Bug 1536264 - Only reset color / background / text-shadow for active options. r=jaws,mconley a=pascalc
authorNarcis Beleuzu <nbeleuzu@mozilla.com>
Sat, 23 Mar 2019 18:32:56 +0200
changeset 522680 9d77f46fc075dcbfeb83fa55c39245f93bc2f2d5
parent 522679 3bfd427973deaf41b48791a69db91f29b67d0460
child 522681 bda705ea201f2bbc11f260d7691ad1c69029c424
push id10902
push usernbeleuzu@mozilla.com
push dateSat, 23 Mar 2019 16:42:54 +0000
treeherdermozilla-beta@1a3cbe1453e4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws, mconley, pascalc
bugs1536264
milestone67.0
Bug 1536264 - Only reset color / background / text-shadow for active options. r=jaws,mconley a=pascalc Summary: Otherwise you see font changes when hovering, which is not really desirable. Reviewers: jaws, mconley Reviewed By: jaws Bug #: 1536264 Differential Revision: https://phabricator.services.mozilla.com/D24116
toolkit/modules/SelectParentHelper.jsm
--- a/toolkit/modules/SelectParentHelper.jsm
+++ b/toolkit/modules/SelectParentHelper.jsm
@@ -12,16 +12,23 @@ const {AppConstants} = ChromeUtils.impor
 const {Services} = ChromeUtils.import("resource://gre/modules/Services.jsm");
 
 // Maximum number of rows to display in the select dropdown.
 const MAX_ROWS = 20;
 
 // Minimum elements required to show select search
 const SEARCH_MINIMUM_ELEMENTS = 40;
 
+// The properties that we should respect only when the item is not active.
+const PROPERTIES_RESET_WHEN_ACTIVE = [
+  "color",
+  "background-color",
+  "text-shadow",
+];
+
 // Make sure to clear these objects when the popup closes to avoid leaking.
 var currentBrowser = null;
 var currentMenulist = null;
 var selectRect = null;
 
 var currentZoom = 1;
 var closedWithEnter = false;
 var customStylingEnabled = Services.prefs.getBoolPref("dom.forms.select.customstyling");
@@ -347,18 +354,22 @@ function populateChildren(menulist, opti
       style.color = selectStyle.color;
     }
 
     if (customStylingEnabled) {
       let ruleBody = "";
       for (let property in style) {
         if (property == "direction" || property == "font-size")
           continue; // handled above
-        if (style[property] != selectStyle[property]) {
+        if (style[property] == selectStyle[property])
+          continue;
+        if (PROPERTIES_RESET_WHEN_ACTIVE.includes(property)) {
           ruleBody += `${property}: ${style[property]};`;
+        } else {
+          item.style.setProperty(property, style[property]);
         }
       }
 
       if (ruleBody) {
         sheet.insertRule(`#ContentSelectDropdown > menupopup > :nth-child(${nthChildIndex}):not([_moz-menuactive="true"]) {
           ${ruleBody}
         }`, 0);