Bug 1423757 - Allow theming toolbar fields focused state r=jaws,ntim
authorZhengyi Lian <lianzhen@msu.edu>
Wed, 07 Mar 2018 02:59:00 -0500
changeset 409982 e811edda21f3bcb3bc564e85f9f91fda8e318a7a
parent 409981 3d1f7f7dd0334b166c115430020388d20fec7278
child 409983 a00793cc659e39f65087ecbb9df039c1da0443e1
push id61722
push userntim.bugs@gmail.com
push dateMon, 26 Mar 2018 20:06:16 +0000
treeherderautoland@e811edda21f3 [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 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,55 @@
+"use strict";
+
+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();
+});