Bug 1423757 - Allow theming toolbar fields hover & focused state r=jaws,ntim
☠☠ backed out by 03a0851d6310 ☠ ☠
authorZhengyi Lian <lianzhen@msu.edu>
Wed, 07 Mar 2018 02:59:00 -0500
changeset 409743 6fbbb00841e489a639cbe766ad5f02c798c21ac7
parent 409742 8f963aeb1f00f5a2cb8f51e0442c005907e1da23
child 409744 69c3d8d1d6532d1f84f2bec267317b7d70480f0d
push id61627
push userjwein@mozilla.com
push dateFri, 23 Mar 2018 22:21:45 +0000
treeherderautoland@6fbbb00841e4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws, ntim
bugs1423757
milestone61.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1423757 - Allow theming toolbar fields hover & focused state r=jaws,ntim MozReview-Commit-ID: 9XrN64FTMA4
browser/modules/ThemeVariableMap.jsm
browser/themes/shared/urlbar-searchbar.inc.css
toolkit/components/extensions/ext-theme.js
toolkit/components/extensions/schemas/theme.json
toolkit/components/extensions/test/browser/browser.ini
toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields_focus.js
--- a/browser/modules/ThemeVariableMap.jsm
+++ b/browser/modules/ThemeVariableMap.jsm
@@ -20,9 +20,12 @@ const ThemeVariableMap = [
   ["--tabs-border-color", "toolbar_top_separator", "navigator-toolbox"],
   ["--lwt-toolbar-vertical-separator", "toolbar_vertical_separator"],
   ["--toolbox-border-bottom-color", "toolbar_bottom_separator"],
   ["--lwt-toolbarbutton-icon-fill", "icon_color"],
   ["--lwt-toolbarbutton-icon-fill-attention", "icon_attention_color"],
   ["--lwt-toolbarbutton-hover-background", "button_background_hover"],
   ["--lwt-toolbarbutton-active-background", "button_background_active"],
   ["--lwt-selected-tab-background-color", "tab_selected"],
+  ["--lwt-toolbar-field-focus", "toolbar_field_focus"],
+  ["--lwt-toolbar-field-focus-color", "toolbar_field_text_focus"],
+  ["--lwt-toolbar-field-focus-border-color", "toolbar_field_border_focus"],
 ];
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -54,20 +54,25 @@
 }
 
 #urlbar:not([focused="true"]):-moz-lwtheme:hover,
 #navigator-toolbox .searchbar-textbox:not([focused="true"]):-moz-lwtheme:hover {
   border-color: var(--lwt-toolbar-field-border-color, @fieldHoverBorderColor@);
 }
 
 #urlbar:-moz-lwtheme:hover,
+#navigator-toolbox .searchbar-textbox:-moz-lwtheme:hover {
+  background-color: var(--url-and-searchbar-background-color, white);
+}
+
 #urlbar:-moz-lwtheme[focused="true"],
-#navigator-toolbox .searchbar-textbox:-moz-lwtheme:hover,
 #navigator-toolbox .searchbar-textbox:-moz-lwtheme[focused="true"] {
-  background-color: var(--url-and-searchbar-background-color, white);
+  background-color: var(--lwt-toolbar-field-focus, var(--url-and-searchbar-background-color, white));
+  color: var(--lwt-toolbar-field-focus-color, var(--url-and-searchbar-color, black));
+  border-color: var(--lwt-toolbar-field-focus-border-color, var(--lwt-toolbar-field-border-color, @fieldBorderColor@));
 }
 
 :root[uidensity=compact] #urlbar,
 :root[uidensity=compact] .searchbar-textbox {
   min-height: 26px;
   margin-top: 3px;
   margin-bottom: 3px;
 }
--- a/toolkit/components/extensions/ext-theme.js
+++ b/toolkit/components/extensions/ext-theme.js
@@ -159,16 +159,19 @@ class Theme {
         case "toolbar_top_separator":
         case "toolbar_bottom_separator":
         case "toolbar_vertical_separator":
         case "button_background_hover":
         case "button_background_active":
         case "popup":
         case "popup_text":
         case "popup_border":
+        case "toolbar_field_focus":
+        case "toolbar_field_text_focus":
+        case "toolbar_field_border_focus":
           this.lwtStyles[color] = cssColor;
           break;
       }
     }
   }
 
   /**
    * Helper method for loading images found in the extension's manifest.
--- a/toolkit/components/extensions/schemas/theme.json
+++ b/toolkit/components/extensions/schemas/theme.json
@@ -167,16 +167,28 @@
               },
               "popup_text": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
               "popup_border": {
                 "$ref": "ThemeColor",
                 "optional": true
+              },
+              "toolbar_field_focus": {
+                "$ref": "ThemeColor",
+                "optional": true
+              },
+              "toolbar_field_text_focus": {
+                "$ref": "ThemeColor",
+                "optional": true
+              },
+              "toolbar_field_border_focus": {
+                "$ref": "ThemeColor",
+                "optional": true
               }
             },
             "additionalProperties": { "$ref": "UnrecognizedProperty" }
           },
           "icons": {
             "type": "object",
             "optional": true,
             "properties": {
--- a/toolkit/components/extensions/test/browser/browser.ini
+++ b/toolkit/components/extensions/test/browser/browser.ini
@@ -12,15 +12,16 @@ support-files =
 [browser_ext_themes_lwtsupport.js]
 [browser_ext_themes_multiple_backgrounds.js]
 [browser_ext_themes_persistence.js]
 [browser_ext_themes_separators.js]
 [browser_ext_themes_static_onUpdated.js]
 [browser_ext_themes_tab_line.js]
 [browser_ext_themes_tab_loading.js]
 [browser_ext_themes_tab_text.js]
+[browser_ext_themes_toolbar_fields_focus.js]
 [browser_ext_themes_toolbar_fields.js]
 [browser_ext_themes_toolbars.js]
 [browser_ext_themes_toolbarbutton_icons.js]
 [browser_ext_themes_toolbarbutton_colors.js]
 [browser_ext_themes_theme_transition.js]
 [browser_ext_themes_arrowpanels.js]
 [browser_ext_themes_tab_selected.js]
new file mode 100644
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields_focus.js
@@ -0,0 +1,57 @@
+"use strict";
+
+Cu.importGlobalProperties(["InspectorUtils"]);
+
+add_task(async function test_toolbar_field_hover() {
+  const TOOLBAR_FIELD_BACKGROUND = "#FF00FF";
+  const TOOLBAR_FIELD_COLOR = "#00FF00";
+  const TOOLBAR_FOCUS_BACKGROUND = "#FF0000";
+  const TOOLBAR_FOCUS_TEXT = "#9400FF";
+  const TOOLBAR_FOCUS_BORDER = "#FFFFFF";
+
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "colors": {
+          "accentcolor": "#FF0000",
+          "textcolor": "#ffffff",
+          "toolbar_field": TOOLBAR_FIELD_BACKGROUND,
+          "toolbar_field_text": TOOLBAR_FIELD_COLOR,
+          "toolbar_field_focus": TOOLBAR_FOCUS_BACKGROUND,
+          "toolbar_field_text_focus": TOOLBAR_FOCUS_TEXT,
+          "toolbar_field_border_focus": TOOLBAR_FOCUS_BORDER,
+        },
+      },
+    },
+  });
+
+  await extension.startup();
+
+  // Remove the `remotecontrol` attribute since it interferes with the urlbar styling.
+  document.documentElement.removeAttribute("remotecontrol");
+  registerCleanupFunction(() => {
+    document.documentElement.setAttribute("remotecontrol", "true");
+  });
+  info("Checking toolbar field's focus color");
+
+  let urlBar = document.getElementById("urlbar");
+  urlBar.setAttribute("focused", "true");
+  Assert.equal(window.getComputedStyle(urlBar).backgroundColor,
+               `rgb(${hexToRGB(TOOLBAR_FOCUS_BACKGROUND).join(", ")})`,
+               "Background Color is changed");
+
+  Assert.equal(window.getComputedStyle(urlBar).color,
+               `rgb(${hexToRGB(TOOLBAR_FOCUS_TEXT).join(", ")})`,
+               "Text Color is changed");
+  testBorderColor(urlBar, TOOLBAR_FOCUS_BORDER);
+
+  urlBar.removeAttribute("focused");
+
+  Assert.equal(window.getComputedStyle(urlBar).backgroundColor,
+               `rgb(${hexToRGB(TOOLBAR_FIELD_BACKGROUND).join(", ")})`,
+               "Background Color is set back to initial");
+  Assert.equal(window.getComputedStyle(urlBar).color,
+               `rgb(${hexToRGB(TOOLBAR_FIELD_COLOR).join(", ")})`,
+               "Text Color is set back to initial");
+  await extension.unload();
+});