[web] Add styling in CSS reset to remove Edge password reveal icon (#38011)

* Add pseudoelement css to remove password reveal

* Add comments

* Add changes to inject style tag to shadow root on Edge browsers

* Remove print statement

* Dart lint

* Whitespace

* Fix comments

* Change to getter

Author: htoor3

lib/web_ui/lib/src/engine/browser_detection.dart

@@ -223,6 +223,9 @@ bool get isSafari => browserEngine == BrowserEngine.webkit;
 /// Whether the current browser is Firefox.
 bool get isFirefox => browserEngine == BrowserEngine.firefox;
 
+/// Whether the current browser is Edge.
+bool get isEdge => domWindow.navigator.userAgent.contains('Edg/');
+
 /// Use in tests to simulate the detection of iOS 15.
 bool? debugIsIOS15;
 

lib/web_ui/lib/src/engine/dom.dart

@@ -212,6 +212,7 @@ extension DomNodeExtension on DomNode {
   external String? get baseUri;
   external DomNode? get firstChild;
   external String get innerText;
+  external set innerText(String text);
   external DomNode? get lastChild;
   external DomNode appendChild(DomNode node);
   DomElement? get parent => js_util.getProperty(this, 'parentElement');

lib/web_ui/lib/src/engine/host_node.dart

@@ -91,9 +91,9 @@ class ShadowDomHostNode implements HostNode {
   /// This also calls [applyGlobalCssRulesToSheet], defined in dom_renderer.
   ShadowDomHostNode(DomElement root) :
     assert(
-    root.isConnected ?? true,
-    'The `root` of a ShadowDomHostNode must be connected to the Document object or a ShadowRoot.',
-    ) {
+          root.isConnected ?? true,
+          'The `root` of a ShadowDomHostNode must be connected to the Document object or a ShadowRoot.',
+        ) {
     _shadow = root.attachShadow(<String, dynamic>{
       'mode': 'open',
       // This needs to stay false to prevent issues like this:
@@ -111,6 +111,19 @@ class ShadowDomHostNode implements HostNode {
       browserEngine: browserEngine,
       hasAutofillOverlay: browserHasAutofillOverlay(),
     );
+
+    // Removes password reveal icon for text inputs in Edge browsers.
+    // Style tag needs to be injected into DOM because non-Edge
+    // browsers will crash trying to parse -ms-reveal CSS selectors if added via
+    // sheet.insertRule().
+    // See: https://github.com/flutter/flutter/issues/83695
+    if (isEdge) {
+      final DomHTMLStyleElement edgeStyleElement = createDomHTMLStyleElement();
+
+      edgeStyleElement.id = 'ms-reveal';
+      edgeStyleElement.innerText = 'input::-ms-reveal {display: none;}';
+      _shadow.appendChild(edgeStyleElement);
+    }
   }
 
   late DomShadowRoot _shadow;

lib/web_ui/test/engine/host_node_test.dart

@@ -39,6 +39,19 @@ void testMain() {
       expect(firstChild.tagName, equalsIgnoringCase('style'));
     });
 
+    test('Attaches styling to remove password reveal icons on Edge', () {
+      final DomElement? edgeStyleElement = hostNode.querySelector('#ms-reveal');
+
+      expect(edgeStyleElement, isNotNull);
+      expect(edgeStyleElement!.innerText, 'input::-ms-reveal {display: none;}');
+    }, skip: !isEdge);
+
+    test('Does not attach the Edge-specific style tag on non-Edge browsers',
+        () {
+      final DomElement? edgeStyleElement = hostNode.querySelector('#ms-reveal');
+      expect(edgeStyleElement, isNull);
+    }, skip: isEdge);
+
     _runDomTests(hostNode);
   });