Backed out changeset 282b96702ce9 (bug 1687682) for causing multiple mochitest failures.

layout/style/res/forms.css

@@ -999,26 +999,6 @@ input:autofill {
   filter: grayscale(21%) brightness(88%) contrast(161%) invert(10%) sepia(40%) saturate(206%);
 }
 
-@supports -moz-bool-pref("layout.css.autofill.background") {
-  /* We find a few pages where using `filter` causes issues because it
-   * changes the z-order (see bug 1687682, bug 1727950).
-   *
-   * The idea behind using background-image instead of plain background-color,
-   * is that it's less likely to be overridden by the page.
-   *
-   * The color is chosen so that you get the same final color on a white
-   * background as the filter above (#fffcc8), but with some alpha so as to
-   * prevent fully illegible text.
-   *
-   * NOTE(emilio): Keep the color in sync with kAutofillColor in
-   * nsNativeBasicTheme!
-   */
-  input:autofill {
-    filter: none;
-    background-image: linear-gradient(rgba(255, 249, 145, 0.5), rgba(255, 249, 145, 0.5));
-  }
-}
-
 input:-moz-autofill-preview {
   color: GrayText;
 }

modules/libpref/init/StaticPrefList.yaml

@@ -6742,12 +6742,6 @@
   mirror: always
   rust: true
 
-# Whether to use background-image to style autofill controls.
-- name: layout.css.autofill.background
-  type: bool
-  value: true
-  mirror: always
-
 # Whether the `:-moz-submit-invalid` pseudo-class is exposed to content.
 - name: layout.css.moz-submit-invalid.enabled
   type: RelaxedAtomicBool

toolkit/components/passwordmgr/test/browser/browser_context_menu_generated_password.js

@@ -140,8 +140,9 @@ add_task(async function fill_generated_password_empty_field() {
         function checkInitialFieldValue(inputSelector) {
           const input = content.document.querySelector(inputSelector);
           is(input.value.length, 0, "Password field is empty");
-          ok(
-            !input.matches(":autofill"),
+          is(
+            content.getComputedStyle(input).filter,
+            "none",
             "Password field should not be highlighted"
           );
         }
@@ -164,8 +165,9 @@ add_task(async function fill_generated_password_empty_field() {
             LTU.generation.LENGTH,
             "Password field was filled with generated password"
           );
-          ok(
-            input.matches(":autofill"),
+          isnot(
+            content.getComputedStyle(input).filter,
+            "none",
             "Password field should be highlighted"
           );
           LTU.loginField.checkPasswordMasked(input, false, "after fill");
@@ -208,8 +210,9 @@ add_task(async function fill_generated_password_nonempty_field() {
         [[passwordInputSelector]],
         function checkInitialFieldValue(inputSelector) {
           const input = content.document.querySelector(inputSelector);
-          ok(
-            !input.matches(":autofill"),
+          is(
+            content.getComputedStyle(input).filter,
+            "none",
             "Password field should not be highlighted"
           );
         }
@@ -232,8 +235,9 @@ add_task(async function fill_generated_password_nonempty_field() {
             LTU.generation.LENGTH,
             "Password field was filled with generated password"
           );
-          ok(
-            input.matches(":autofill"),
+          isnot(
+            content.getComputedStyle(input).filter,
+            "none",
             "Password field should be highlighted"
           );
           LTU.loginField.checkPasswordMasked(input, false, "after fill");
@@ -299,8 +303,9 @@ add_task(async function fill_generated_password_with_matching_logins() {
             LTU.generation.LENGTH,
             "Password field was filled with generated password"
           );
-          ok(
-            input.matches(":autofill"),
+          isnot(
+            content.getComputedStyle(input).filter,
+            "none",
             "Password field should be highlighted"
           );
           LTU.loginField.checkPasswordMasked(input, false, "after fill");
@@ -391,8 +396,9 @@ add_task(async function test_edited_generated_password_in_new_tab() {
         function checkInitialFieldValue(inputSelector) {
           const input = content.document.querySelector(inputSelector);
           is(input.value.length, 0, "Password field is empty");
-          ok(
-            !input.matches(":autofill"),
+          is(
+            content.getComputedStyle(input).filter,
+            "none",
             "Password field should not be highlighted"
           );
         }
@@ -415,8 +421,9 @@ add_task(async function test_edited_generated_password_in_new_tab() {
             LTU.generation.LENGTH,
             "Password field was filled with generated password"
           );
-          ok(
-            input.matches(":autofill"),
+          isnot(
+            content.getComputedStyle(input).filter,
+            "none",
             "Password field should be highlighted"
           );
           LTU.loginField.checkPasswordMasked(input, false, "after fill");

toolkit/components/passwordmgr/test/mochitest/test_autocomplete_highlight.html

@@ -49,11 +49,11 @@ add_task(async function test_field_highlight_on_autocomplete() {
   await synthesizeKey("KEY_Enter");
 
   await ContentTaskUtils.waitForCondition(() => {
-    return username.matches(":autofill")
+    return document.defaultView.getComputedStyle(username).getPropertyValue("filter") !== "none";
   }, "Highlight was successfully applied to the username field on username autocomplete");
 
-  ok(password.matches(":autofill"),
-     "Highlight was successfully applied to the password field on username autocomplete");
+  isnot(document.defaultView.getComputedStyle(password).getPropertyValue("filter"), "none",
+        "Highlight was successfully applied to the password field on username autocomplete");
 
   // Clear existing highlight on login fields. We check by pressing the tab key after backspace
   // (by shifting focus to the next element) because the tab key was known to cause a bug where the
@@ -61,12 +61,12 @@ add_task(async function test_field_highlight_on_autocomplete() {
   username.focus();
   synthesizeKey("KEY_Backspace");
   synthesizeKey("KEY_Tab");
-  ok(!username.matches(":autofill"),
+  is(document.defaultView.getComputedStyle(username).getPropertyValue("filter"), "none",
      "Highlight was successfully removed on the username field");
 
   synthesizeKey("KEY_Backspace");
   synthesizeKey("KEY_Tab");
-  ok(!password.matches(":autofill"),
+  is(document.defaultView.getComputedStyle(password).getPropertyValue("filter"), "none",
      "Highlight was successfully removed on the password field");
 
   // Clear login fields.
@@ -82,7 +82,7 @@ add_task(async function test_field_highlight_on_autocomplete() {
   synthesizeKey("KEY_Enter");
 
   await ContentTaskUtils.waitForCondition(() => {
-    return password.matches(":autofill");
+    return document.defaultView.getComputedStyle(password).getPropertyValue("filter") !== "none";
   }, "Highlight was successfully applied to the password field on password autocomplete");
 
   // Clear existing highlight on the password field. We check by pressing the tab key after backspace
@@ -91,7 +91,7 @@ add_task(async function test_field_highlight_on_autocomplete() {
   synthesizeKey("KEY_Backspace");
   synthesizeKey("KEY_Tab");
 
-  ok(!password.matches(":autofill"),
+  is(document.defaultView.getComputedStyle(password).getPropertyValue("filter"), "none",
      "Highlight was successfully removed on the password field");
 
   // Clear login fields.

toolkit/components/passwordmgr/test/mochitest/test_autocomplete_highlight_username_only_form.html

@@ -47,7 +47,7 @@ add_task(async function test_username_field_in_username_only_form_highlight_on_a
   await synthesizeKey("KEY_Enter");
 
   await ContentTaskUtils.waitForCondition(() => {
-    return username.matches(":autofill");
+    return document.defaultView.getComputedStyle(username).getPropertyValue("filter") !== "none";
   }, "Highlight was successfully applied to the username field on username autocomplete");
 
   // Clear existing highlight on login fields. We check by pressing the tab key after backspace
@@ -56,7 +56,7 @@ add_task(async function test_username_field_in_username_only_form_highlight_on_a
   username.focus();
   synthesizeKey("KEY_Backspace");
   synthesizeKey("KEY_Tab");
-  ok(!username.matches(":autofill"),
+  is(document.defaultView.getComputedStyle(username).getPropertyValue("filter"), "none",
      "Highlight was successfully removed on the username field");
 
   // Clear login fields.

toolkit/components/passwordmgr/test/mochitest/test_autocomplete_password_generation_confirm.html

@@ -167,13 +167,13 @@ async function testConfirmPasswordFieldFilledWithGeneratedPassword({
     // check field filling & highlights
     if (expectedFilled.includes(input.name)) {
       await ContentTaskUtils.waitForCondition(() => {
-        return input.matches(":autofill");
+        return document.defaultView.getComputedStyle(input).getPropertyValue("filter") !== "none";
       }, `Highlight was successfully applied to the (${input.name}) field`);
 
       is(input.value, generatedPW, `Field (${input.name}) has the generated password value`);
     } else {
       await ContentTaskUtils.waitForCondition(() => {
-        return !input.matches(":autofill");
+        return document.defaultView.getComputedStyle(input).getPropertyValue("filter") == "none";
       }, `Highlight was not applied to field (${input.name})`);
 
       let expectedValue = (input.name in expectedNonDefaultValues) ? expectedNonDefaultValues[input.name] : input.defaultValue;
@@ -222,7 +222,7 @@ async function testConfirmPasswordFieldFilledWithGeneratedPassword({
     synthesizeKey("KEY_Backspace");
     await TestUtils.waitForTick();
     await ContentTaskUtils.waitForCondition(() => {
-        return !pword2.matches(":autofill");
+        return document.defaultView.getComputedStyle(pword2).getPropertyValue("filter") == "none";
     }, "Highlight was successfully cleared from the confirm-password field");
 
     // if it got originally masked (i.e. was a password field) verify the focused confirm field now masks

toolkit/components/passwordmgr/test/mochitest/test_autofill_highlight.html

@@ -35,10 +35,10 @@ add_task(async function test_field_highlight_on_autofill() {
     let doc = this.content.document;
     let username = doc.getElementById("uname");
     let password = doc.getElementById("pword");
-    ok(username.matches(":autofill"),
-       "Highlight was successfully applied to the username field on page load autofill");
-    ok(password.matches(":autofill"),
-       "Highlight was successfully applied to the password field on page load autofill");
+    isnot(doc.defaultView.getComputedStyle(username).getPropertyValue("filter"), "none",
+          "Highlight was successfully applied to the username field on page load autofill");
+    isnot(doc.defaultView.getComputedStyle(password).getPropertyValue("filter"), "none",
+          "Highlight was successfully applied to the password field on page load autofill");
 
     // Test that initiating a change on the input value will remove the highlight. We check by pressing
     // the tab key after backspace(by shifting focus to the next element) because the tab key is known to
@@ -47,11 +47,13 @@ add_task(async function test_field_highlight_on_autofill() {
     await EventUtils.synthesizeKey("KEY_Backspace", {}, this.content);
     await EventUtils.synthesizeKey("KEY_Tab", {}, this.content);
 
-    ok(!username.matches(":autofill"), "Highlight was successfully removed on change in value of username input element");
+    let computedStyle = doc.defaultView.getComputedStyle(username);
+    is(computedStyle.getPropertyValue("filter"), "none", "Highlight was successfully removed on change in value of username input element");
 
     await EventUtils.synthesizeKey("KEY_Backspace", {}, this.content);
     await EventUtils.synthesizeKey("KEY_Tab", {}, this.content);
-    ok(!password.matches(":autofill"), "Highlight was successfully removed on change in value of password input element");
+    computedStyle = doc.defaultView.getComputedStyle(password);
+    is(computedStyle.getPropertyValue("filter"), "none", "Highlight was successfully removed on change in value of password input element");
   });
 });
 </script>

toolkit/components/passwordmgr/test/mochitest/test_autofill_highlight_empty_username.html

@@ -35,9 +35,9 @@ add_task(async function test_field_highlight_on_autofill() {
     let doc = this.content.document;
     let username = doc.getElementById("uname");
     let password = doc.getElementById("pword");
-    ok(!username.matches(":autofill"),
+    is(doc.defaultView.getComputedStyle(username).getPropertyValue("filter"), "none",
           "Highlight was not applied to the username field on page load autofill");
-    ok(password.matches(":autofill"),
+    isnot(doc.defaultView.getComputedStyle(password).getPropertyValue("filter"), "none",
           "Highlight was successfully applied to the password field on page load autofill");
 
     // Test that initiating a change on the input value will remove the highlight. We check by pressing
@@ -47,11 +47,13 @@ add_task(async function test_field_highlight_on_autofill() {
     await EventUtils.synthesizeKey("U", {}, this.content);
     await EventUtils.synthesizeKey("KEY_Tab", {}, this.content);
 
-    ok(!username.matches(":autofill"), "Highlight is still not present on username element");
+    let computedStyle = doc.defaultView.getComputedStyle(username);
+    is(computedStyle.getPropertyValue("filter"), "none", "Highlight is still not present on username element");
 
     await EventUtils.synthesizeKey("KEY_Backspace", {}, this.content);
     await EventUtils.synthesizeKey("KEY_Tab", {}, this.content);
-    ok(!password.matches(":autofill"), "Highlight was successfully removed on change in value of password input element");
+    computedStyle = doc.defaultView.getComputedStyle(password);
+    is(computedStyle.getPropertyValue("filter"), "none", "Highlight was successfully removed on change in value of password input element");
   });
 });
 </script>

toolkit/components/passwordmgr/test/mochitest/test_autofill_highlight_username_only_form.html

@@ -33,7 +33,7 @@ add_task(async function test_field_highlight_on_autofill() {
     let EventUtils = ContentTaskUtils.getEventUtils(this.content);
     let doc = this.content.document;
     let username = doc.getElementById("uname");
-    ok(username.matches(":autofill"),
+    isnot(doc.defaultView.getComputedStyle(username).getPropertyValue("filter"), "none",
           "Highlight was successfully applied to the username field on page load autofill");
 
     // Test that initiating a change on the input value will remove the highlight. We check by pressing
@@ -43,7 +43,8 @@ add_task(async function test_field_highlight_on_autofill() {
     await EventUtils.synthesizeKey("KEY_Backspace", {}, this.content);
     await EventUtils.synthesizeKey("KEY_Tab", {}, this.content);
 
-    ok(!username.matches(":autofill"), "Highlight was successfully removed on change in value of username input element");
+    let computedStyle = doc.defaultView.getComputedStyle(username);
+    is(computedStyle.getPropertyValue("filter"), "none", "Highlight was successfully removed on change in value of username input element");
   });
 });
 </script>

widget/nsNativeBasicTheme.cpp

@@ -317,15 +317,11 @@ static bool IsScrollbarWidthThin(nsIFrame* aFrame) {
   return scrollbarWidth == StyleScrollbarWidth::Thin;
 }
 
-static nscolor SystemNsColor(StyleSystemColor aColor) {
+static sRGBColor SystemColor(StyleSystemColor aColor) {
   // TODO(emilio): We could not hardcode light appearance here with a bit of
   // work, but doesn't matter for now.
-  return LookAndFeel::Color(aColor, LookAndFeel::ColorScheme::Light,
-                            LookAndFeel::UseStandins::No);
-}
-
-static sRGBColor SystemColor(StyleSystemColor aColor) {
-  return sRGBColor::FromABGR(SystemNsColor(aColor));
+  return sRGBColor::FromABGR(LookAndFeel::Color(
+      aColor, LookAndFeel::ColorScheme::Light, LookAndFeel::UseStandins::No));
 }
 
 template <typename Compute>
@@ -530,29 +526,19 @@ std::pair<sRGBColor, sRGBColor> nsNativeBasicTheme::ComputeButtonColors(
   return std::make_pair(backgroundColor, borderColor);
 }
 
-// NOTE: This should be kept in sync with forms.css, see the comment in the
-// input:autofill rule.
-constexpr nscolor kAutofillColor = NS_RGBA(255, 249, 145, 128);
-
 std::pair<sRGBColor, sRGBColor> nsNativeBasicTheme::ComputeTextfieldColors(
     const EventStates& aState, UseSystemColors aUseSystemColors) {
-  nscolor backgroundColor = [&] {
+  const sRGBColor backgroundColor = [&] {
     if (bool(aUseSystemColors)) {
-      return SystemNsColor(StyleSystemColor::Field);
+      return SystemColor(StyleSystemColor::TextBackground);
     }
     if (aState.HasState(NS_EVENT_STATE_DISABLED)) {
-      return NS_RGBA(0xff, 0xff, 0xff, 128);
+      return sColorWhiteAlpha50;
     }
-    return NS_RGB(0xff, 0xff, 0xff);
+    return sColorWhite;
   }();
-
-  if (aState.HasState(NS_EVENT_STATE_AUTOFILL) &&
-      StaticPrefs::layout_css_autofill_background()) {
-    backgroundColor = NS_ComposeColors(backgroundColor, kAutofillColor);
-  }
-
   const sRGBColor borderColor = ComputeBorderColor(aState, aUseSystemColors);
-  return std::make_pair(sRGBColor::FromABGR(backgroundColor), borderColor);
+  return std::make_pair(backgroundColor, borderColor);
 }
 
 std::pair<sRGBColor, sRGBColor> nsNativeBasicTheme::ComputeRangeProgressColors(