From 07cbcd65fc00631f806b207a7c3936a05e476d0f Mon Sep 17 00:00:00 2001 From: Mouad Debbar Date: Mon, 27 Feb 2023 17:56:39 -0500 Subject: [PATCH 1/2] [web] Remove unused function parameter --- lib/web_ui/lib/src/engine/embedder.dart | 1 - lib/web_ui/lib/src/engine/global_styles.dart | 38 +++++++++---------- .../test/engine/global_styles_test.dart | 1 - 3 files changed, 18 insertions(+), 22 deletions(-) diff --git a/lib/web_ui/lib/src/engine/embedder.dart b/lib/web_ui/lib/src/engine/embedder.dart index 5ac02cf7b6141..53d55fcace904 100644 --- a/lib/web_ui/lib/src/engine/embedder.dart +++ b/lib/web_ui/lib/src/engine/embedder.dart @@ -192,7 +192,6 @@ class FlutterViewEmbedder { shadowRoot.appendChild(shadowRootStyleElement); applyGlobalCssRulesToSheet( shadowRootStyleElement, - hasAutofillOverlay: browserHasAutofillOverlay(), defaultCssFont: defaultCssFont, ); diff --git a/lib/web_ui/lib/src/engine/global_styles.dart b/lib/web_ui/lib/src/engine/global_styles.dart index 6be6914ceaf22..8896f91305106 100644 --- a/lib/web_ui/lib/src/engine/global_styles.dart +++ b/lib/web_ui/lib/src/engine/global_styles.dart @@ -9,8 +9,6 @@ import 'text_editing/text_editing.dart'; // Applies the required global CSS to an incoming [DomCSSStyleSheet] `sheet`. void applyGlobalCssRulesToSheet( DomHTMLStyleElement styleElement, { - required bool hasAutofillOverlay, - String cssSelectorPrefix = '', required String defaultCssFont, }) { // TODO(web): use more efficient CSS selectors; descendant selectors are slow. @@ -24,7 +22,7 @@ void applyGlobalCssRulesToSheet( // // Fixes #115216 by ensuring that our parameters only affect the flt-scene-host children. sheet.insertRule(''' - $cssSelectorPrefix flt-scene-host { + flt-scene-host { color: red; font: $defaultCssFont; } @@ -34,7 +32,7 @@ void applyGlobalCssRulesToSheet( // on using gray background. This CSS rule disables that. if (isSafari) { sheet.insertRule(''' - $cssSelectorPrefix * { + * { -webkit-tap-highlight-color: transparent; } ''', sheet.cssRules.length); @@ -46,8 +44,8 @@ void applyGlobalCssRulesToSheet( // // - See: https://github.com/flutter/flutter/issues/44803 sheet.insertRule(''' - $cssSelectorPrefix flt-paragraph, - $cssSelectorPrefix flt-span { + flt-paragraph, + flt-span { line-height: 100%; } ''', sheet.cssRules.length); @@ -56,7 +54,7 @@ void applyGlobalCssRulesToSheet( // This undoes browser's default painting and layout attributes of range // input, which is used in semantics. sheet.insertRule(''' - $cssSelectorPrefix flt-semantics input[type=range] { + flt-semantics input[type=range] { appearance: none; -webkit-appearance: none; width: 100%; @@ -71,7 +69,7 @@ void applyGlobalCssRulesToSheet( if (isSafari) { sheet.insertRule(''' - $cssSelectorPrefix flt-semantics input[type=range]::-webkit-slider-thumb { + flt-semantics input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; } ''', sheet.cssRules.length); @@ -80,27 +78,27 @@ void applyGlobalCssRulesToSheet( // The invisible semantic text field may have a visible cursor and selection // highlight. The following 2 CSS rules force everything to be transparent. sheet.insertRule(''' - $cssSelectorPrefix input::selection { + input::selection { background-color: transparent; } ''', sheet.cssRules.length); sheet.insertRule(''' - $cssSelectorPrefix textarea::selection { + textarea::selection { background-color: transparent; } ''', sheet.cssRules.length); sheet.insertRule(''' - $cssSelectorPrefix flt-semantics input, - $cssSelectorPrefix flt-semantics textarea, - $cssSelectorPrefix flt-semantics [contentEditable="true"] { + flt-semantics input, + flt-semantics textarea, + flt-semantics [contentEditable="true"] { caret-color: transparent; } ''', sheet.cssRules.length); // Hide placeholder text sheet.insertRule(''' - $cssSelectorPrefix .flt-text-editing::placeholder { + .flt-text-editing::placeholder { opacity: 0; } ''', sheet.cssRules.length); @@ -110,10 +108,10 @@ void applyGlobalCssRulesToSheet( // See: https://github.com/flutter/flutter/issues/118337. if (browserHasAutofillOverlay()) { sheet.insertRule(''' - $cssSelectorPrefix .transparentTextEditing:-webkit-autofill, - $cssSelectorPrefix .transparentTextEditing:-webkit-autofill:hover, - $cssSelectorPrefix .transparentTextEditing:-webkit-autofill:focus, - $cssSelectorPrefix .transparentTextEditing:-webkit-autofill:active { + .transparentTextEditing:-webkit-autofill, + .transparentTextEditing:-webkit-autofill:hover, + .transparentTextEditing:-webkit-autofill:focus, + .transparentTextEditing:-webkit-autofill:active { opacity: 0 !important; } ''', sheet.cssRules.length); @@ -129,7 +127,7 @@ void applyGlobalCssRulesToSheet( // the ::-ms-reveal pseudo-selector). try { sheet.insertRule(''' - $cssSelectorPrefix input::-ms-reveal { + input::-ms-reveal { display: none; } ''', sheet.cssRules.length); @@ -140,7 +138,7 @@ void applyGlobalCssRulesToSheet( // Add a fake rule if our code failed because we're under testing assert(() { sheet.insertRule(''' - $cssSelectorPrefix input.fallback-for-fakey-browser-in-ci { + input.fallback-for-fakey-browser-in-ci { display: none; } ''', sheet.cssRules.length); diff --git a/lib/web_ui/test/engine/global_styles_test.dart b/lib/web_ui/test/engine/global_styles_test.dart index 3abeb1f9fe7ca..2254df06481ff 100644 --- a/lib/web_ui/test/engine/global_styles_test.dart +++ b/lib/web_ui/test/engine/global_styles_test.dart @@ -20,7 +20,6 @@ void testMain() { domDocument.body!.append(styleElement); applyGlobalCssRulesToSheet( styleElement, - hasAutofillOverlay: browserHasAutofillOverlay(), defaultCssFont: _kDefaultCssFont, ); }); From 0b74a88c0ba31acb3b55c8d7200feedce5e1222a Mon Sep 17 00:00:00 2001 From: Mouad Debbar Date: Wed, 3 May 2023 13:08:28 -0400 Subject: [PATCH 2/2] put back cssSelectorPrefix --- lib/web_ui/lib/src/engine/embedder.dart | 1 - lib/web_ui/lib/src/engine/global_styles.dart | 37 ++++++++++---------- 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/lib/web_ui/lib/src/engine/embedder.dart b/lib/web_ui/lib/src/engine/embedder.dart index 53d55fcace904..e79254fe57bec 100644 --- a/lib/web_ui/lib/src/engine/embedder.dart +++ b/lib/web_ui/lib/src/engine/embedder.dart @@ -432,7 +432,6 @@ DomElement createTextEditingHostNode(DomElement root, String defaultFont) { root.appendChild(styleElement); applyGlobalCssRulesToSheet( styleElement, - hasAutofillOverlay: browserHasAutofillOverlay(), cssSelectorPrefix: FlutterViewEmbedder.flutterViewTagName, defaultCssFont: defaultFont, ); diff --git a/lib/web_ui/lib/src/engine/global_styles.dart b/lib/web_ui/lib/src/engine/global_styles.dart index 8896f91305106..cb2b560fcc76b 100644 --- a/lib/web_ui/lib/src/engine/global_styles.dart +++ b/lib/web_ui/lib/src/engine/global_styles.dart @@ -9,6 +9,7 @@ import 'text_editing/text_editing.dart'; // Applies the required global CSS to an incoming [DomCSSStyleSheet] `sheet`. void applyGlobalCssRulesToSheet( DomHTMLStyleElement styleElement, { + String cssSelectorPrefix = '', required String defaultCssFont, }) { // TODO(web): use more efficient CSS selectors; descendant selectors are slow. @@ -22,7 +23,7 @@ void applyGlobalCssRulesToSheet( // // Fixes #115216 by ensuring that our parameters only affect the flt-scene-host children. sheet.insertRule(''' - flt-scene-host { + $cssSelectorPrefix flt-scene-host { color: red; font: $defaultCssFont; } @@ -32,7 +33,7 @@ void applyGlobalCssRulesToSheet( // on using gray background. This CSS rule disables that. if (isSafari) { sheet.insertRule(''' - * { + $cssSelectorPrefix * { -webkit-tap-highlight-color: transparent; } ''', sheet.cssRules.length); @@ -44,8 +45,8 @@ void applyGlobalCssRulesToSheet( // // - See: https://github.com/flutter/flutter/issues/44803 sheet.insertRule(''' - flt-paragraph, - flt-span { + $cssSelectorPrefix flt-paragraph, + $cssSelectorPrefix flt-span { line-height: 100%; } ''', sheet.cssRules.length); @@ -54,7 +55,7 @@ void applyGlobalCssRulesToSheet( // This undoes browser's default painting and layout attributes of range // input, which is used in semantics. sheet.insertRule(''' - flt-semantics input[type=range] { + $cssSelectorPrefix flt-semantics input[type=range] { appearance: none; -webkit-appearance: none; width: 100%; @@ -69,7 +70,7 @@ void applyGlobalCssRulesToSheet( if (isSafari) { sheet.insertRule(''' - flt-semantics input[type=range]::-webkit-slider-thumb { + $cssSelectorPrefix flt-semantics input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; } ''', sheet.cssRules.length); @@ -78,27 +79,27 @@ void applyGlobalCssRulesToSheet( // The invisible semantic text field may have a visible cursor and selection // highlight. The following 2 CSS rules force everything to be transparent. sheet.insertRule(''' - input::selection { + $cssSelectorPrefix input::selection { background-color: transparent; } ''', sheet.cssRules.length); sheet.insertRule(''' - textarea::selection { + $cssSelectorPrefix textarea::selection { background-color: transparent; } ''', sheet.cssRules.length); sheet.insertRule(''' - flt-semantics input, - flt-semantics textarea, - flt-semantics [contentEditable="true"] { + $cssSelectorPrefix flt-semantics input, + $cssSelectorPrefix flt-semantics textarea, + $cssSelectorPrefix flt-semantics [contentEditable="true"] { caret-color: transparent; } ''', sheet.cssRules.length); // Hide placeholder text sheet.insertRule(''' - .flt-text-editing::placeholder { + $cssSelectorPrefix .flt-text-editing::placeholder { opacity: 0; } ''', sheet.cssRules.length); @@ -108,10 +109,10 @@ void applyGlobalCssRulesToSheet( // See: https://github.com/flutter/flutter/issues/118337. if (browserHasAutofillOverlay()) { sheet.insertRule(''' - .transparentTextEditing:-webkit-autofill, - .transparentTextEditing:-webkit-autofill:hover, - .transparentTextEditing:-webkit-autofill:focus, - .transparentTextEditing:-webkit-autofill:active { + $cssSelectorPrefix .transparentTextEditing:-webkit-autofill, + $cssSelectorPrefix .transparentTextEditing:-webkit-autofill:hover, + $cssSelectorPrefix .transparentTextEditing:-webkit-autofill:focus, + $cssSelectorPrefix .transparentTextEditing:-webkit-autofill:active { opacity: 0 !important; } ''', sheet.cssRules.length); @@ -127,7 +128,7 @@ void applyGlobalCssRulesToSheet( // the ::-ms-reveal pseudo-selector). try { sheet.insertRule(''' - input::-ms-reveal { + $cssSelectorPrefix input::-ms-reveal { display: none; } ''', sheet.cssRules.length); @@ -138,7 +139,7 @@ void applyGlobalCssRulesToSheet( // Add a fake rule if our code failed because we're under testing assert(() { sheet.insertRule(''' - input.fallback-for-fakey-browser-in-ci { + $cssSelectorPrefix input.fallback-for-fakey-browser-in-ci { display: none; } ''', sheet.cssRules.length);