Bug 1347190 - Add support for toolbar_top/bottom/vertical_separator in the theming API. r=jaws
authorTim Nguyen <ntim.bugs@gmail.com>
Fri, 03 Nov 2017 18:00:51 +0000
changeset 443382 acede01031566cf9b889331c4befbe707c913d2a
parent 443381 90453cc7c3b4021b28e3a03eb4c540f372c5974d
child 443383 255697502b59e51850f523bb60f6e03160796d5a
push id1618
push userCallek@gmail.com
push dateThu, 11 Jan 2018 17:45:48 +0000
treeherdermozilla-release@882ca853e05a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1347190
milestone58.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 1347190 - Add support for toolbar_top/bottom/vertical_separator in the theming API. r=jaws MozReview-Commit-ID: EWQar4tKHs0
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/shared/tabs.inc.css
browser/themes/windows/browser.css
browser/themes/windows/compacttheme.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_separators.js
toolkit/modules/LightweightThemeConsumer.jsm
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -7,17 +7,17 @@
 @import url("chrome://global/skin/");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 %include ../shared/browser.inc.css
 
 :root {
-  --tabs-border: rgba(0,0,0,.3);
+  --tabs-border-color: rgba(0,0,0,.3);
   --tab-line-color: highlight;
 
   --toolbar-non-lwt-bgcolor: -moz-dialog;
   --toolbar-non-lwt-textcolor: -moz-dialogtext;
   --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));
   --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
   --toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
 
@@ -64,17 +64,17 @@
   background-color: var(--toolbar-bgcolor);
   background-image: var(--toolbar-bgimage);
   color: var(--toolbar-color, inherit);
   -moz-appearance: none;
   border-style: none;
 }
 
 #TabsToolbar:not([collapsed="true"]) + #nav-bar {
-  box-shadow: 0 -@navbarTabsShadowSize@ 0 var(--tabs-border);
+  box-shadow: 0 -@navbarTabsShadowSize@ 0 var(--tabs-border-color);
   /* This is needed for some toolbar button animations. Gross :( */
   position: relative;
 }
 
 #browser-bottombox {
   /* opaque for layers optimization */
   background-color: -moz-Dialog;
 }
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -8,17 +8,17 @@
 %define toolbarButtonPressed :hover:active:not([disabled="true"]):not([cui-areatype="menu-panel"])
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 %include ../shared/browser.inc.css
 
 :root {
-  --tabs-border: rgba(0,0,0,.3);
+  --tabs-border-color: rgba(0,0,0,.3);
   --tab-line-color: #0a84ff;
 
   --toolbar-non-lwt-bgcolor: #f9f9fa;
   --toolbar-non-lwt-textcolor: #0c0c0d;
   --toolbar-non-lwt-bgimage: none;
   --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
   --toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
 
@@ -126,31 +126,31 @@
   color: var(--toolbar-color, inherit);
 }
 
 /* Draw the bottom border of the tabs toolbar when it's not using
    -moz-appearance: toolbar. */
 #main-window:-moz-any([sizemode="fullscreen"],[customize-entered]) #TabsToolbar:not([collapsed="true"]) + #nav-bar,
 #main-window:not([tabsintitlebar]) #TabsToolbar:not([collapsed="true"]) + #nav-bar,
 #TabsToolbar:not([collapsed="true"]) + #nav-bar:-moz-lwtheme {
-  box-shadow: 0 -@navbarTabsShadowSize@ 0 var(--tabs-border);
+  box-shadow: 0 -@navbarTabsShadowSize@ 0 var(--tabs-border-color);
 }
 
 /* Always draw a border on Yosemite to ensure the border is well-defined there
  * (the default border is too light). */
 @media (-moz-mac-yosemite-theme) {
   :root:not(:-moz-lwtheme) {
-    --tabs-border: rgba(0,0,0,.2);
+    --tabs-border-color: rgba(0,0,0,.2);
   }
   :root:not(:-moz-lwtheme):-moz-window-inactive {
-    --tabs-border: rgba(0,0,0,.05);
+    --tabs-border-color: rgba(0,0,0,.05);
   }
 
   #main-window[tabsintitlebar] #TabsToolbar:not([collapsed="true"]) + #nav-bar:not(:-moz-lwtheme) {
-    box-shadow: 0 -@navbarTabsShadowSize@ 0 var(--tabs-border);
+    box-shadow: 0 -@navbarTabsShadowSize@ 0 var(--tabs-border-color);
   }
 }
 
 #TabsToolbar:not([collapsed="true"]) + #nav-bar {
   /* The toolbar buttons that animate are only visible when the #TabsToolbar is not collapsed.
      The animations use position:absolute and require a positioned #nav-bar. */
   position: relative;
 }
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -480,17 +480,17 @@ tabbrowser {
 #toolbar-menubar:not([autohide=true]) + #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-background,
 %endif
 :root:not([tabsintitlebar]) .tab-background,
 :root[extradragspace] .tab-background {
   border-top-style: solid;
 }
 
 .tab-background[selected=true] {
-  border-top-color: var(--tabs-border);
+  border-top-color: var(--tabs-border-color);
   background-color: var(--toolbar-bgcolor);
   background-image: var(--toolbar-bgimage);
   background-repeat: repeat-x;
 }
 
 .tab-line[selected=true] {
   background-color: var(--tab-line-color);
 }
@@ -616,17 +616,17 @@ tabbrowser {
   margin-top: var(--tabs-top-border-width);
   margin-bottom: 0;
 }
 
 /* Show full height tab separators on selected tabs. */
 #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[beforeselected-visible]::after,
 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[visuallyselected]::before,
 .tabbrowser-tab[visuallyselected]::after {
-  border-color: var(--tabs-border);
+  border-color: var(--tabs-border-color);
   margin-top: 0;
   margin-bottom: @navbarTabsShadowSize@;
   opacity: 1;
 }
 
 .tabbrowser-tab::after,
 /* Also show separators beside the selected tab when dragging it. */
 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[visuallyselected]::before {
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -9,17 +9,17 @@
 
 %include ../shared/browser.inc.css
 %filter substitution
 %define glassShadowColor hsla(240,5%,5%,0.3)
 
 :root {
   --titlebar-text-color: currentColor;
 
-  --tabs-border: threedshadow;
+  --tabs-border-color: threedshadow;
   --tab-line-color: highlight;
 
   --toolbar-non-lwt-bgcolor: -moz-dialog;
   --toolbar-non-lwt-textcolor: -moz-dialogtext;
   --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));
   --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
   --toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
 
@@ -34,33 +34,33 @@
 
   --urlbar-separator-color: ThreeDLightShadow;
 
   --toolbox-border-bottom-color: ThreeDShadow;
 }
 
 @media (-moz-windows-default-theme) {
   :root {
-    --tabs-border: rgba(0,0,0,.3);
+    --tabs-border-color: rgba(0,0,0,.3);
     --tab-line-color: #0a84ff;
 
     --toolbar-non-lwt-bgcolor: #f9f9fa;
     --toolbar-non-lwt-textcolor: #0c0c0d;
     --toolbar-non-lwt-bgimage: none;
 
     --toolbarbutton-icon-fill-opacity: .7;
 
     --panel-separator-color: hsla(210,4%,10%,.14);
 
     --toolbox-border-bottom-color: #e1e1e2;
   }
 }
 
 :root:-moz-lwtheme {
-  --tabs-border: rgba(0,0,0,.3);
+  --tabs-border-color: rgba(0,0,0,.3);
 
   --toolbar-bgcolor: rgba(255,255,255,.4);
   --toolbar-bgimage: none;
 
   --toolbox-border-bottom-color: rgba(0,0,0,.3);
 }
 
 #menubar-items {
@@ -109,47 +109,47 @@
 
 /*
  * Windows 7 draws the chrome background color as the tab background
  * instead of in the tabs toolbar.
  */
 @media (-moz-os-version: windows-win7) {
   @media (-moz-windows-default-theme) {
     :root:not(:-moz-lwtheme) {
-      --tabs-border: @glassShadowColor@;
+      --tabs-border-color: @glassShadowColor@;
     }
 
     #TabsToolbar:not(:-moz-lwtheme) {
       color: hsl(240,9%,98%);
     }
 
     /* Always show full-height tab separators on tabs with borders. */
     .tabbrowser-tab:not(:-moz-lwtheme)::before,
     .tabbrowser-tab:not(:-moz-lwtheme)::after {
       border-image: none !important;
     }
 
     /* Show border on tabs with background colors and
      * show the tabs toolbar background color inside tabs. */
     .tabbrowser-tab:not(:-moz-lwtheme) {
       background-color: hsl(235,33%,19%) !important;
-      border-top: 1px solid var(--tabs-border);
+      border-top: 1px solid var(--tabs-border-color);
       background-clip: padding-box;
     }
 
     /* The top border on top of the tab background is replaced
-     * by the slightly transparent outside tabs-border. */
+     * by the slightly transparent outside tabs-border-color. */
     .tab-background:not(:-moz-lwtheme) {
       border-top-style: none !important;
     }
 
     /* The border at the end of the tab strip is replaced
-     * by the slightly transparent outside tabs-border. */
+     * by the slightly transparent outside tabs-border-color. */
     .tabbrowser-tab[last-visible-tab]:not(:-moz-lwtheme) {
-      border-inline-end: 1px solid var(--tabs-border);
+      border-inline-end: 1px solid var(--tabs-border-color);
     }
 
     .tabbrowser-tab[last-visible-tab]:not(:-moz-lwtheme)::after {
       display: none !important;
     }
   }
 }
 
@@ -253,17 +253,17 @@
 }
 
 #TabsToolbar:not([collapsed="true"]) + #nav-bar {
   /* This is needed for some toolbar button animations. Gross :( */
   position: relative;
 }
 
 #nav-bar {
-  box-shadow: 0 -@navbarTabsShadowSize@ 0 var(--tabs-border);
+  box-shadow: 0 -@navbarTabsShadowSize@ 0 var(--tabs-border-color);
 }
 @media (-moz-windows-compositor: 0) {
   #TabsToolbar[collapsed="true"] + #nav-bar {
     box-shadow: none;
   }
 }
 
 #print-preview-toolbar:not(:-moz-lwtheme) {
--- a/browser/themes/windows/compacttheme.css
+++ b/browser/themes/windows/compacttheme.css
@@ -97,30 +97,30 @@
   .tabbrowser-tab::after {
     border-image: none !important;
   }
 
   /* Show border on tabs with background colors and
    * show the tabs toolbar background color inside tabs. */
   .tabbrowser-tab {
     background-color: var(--chrome-background-color) !important;
-    border-top: 1px solid var(--tabs-border);
+    border-top: 1px solid var(--tabs-border-color);
     background-clip: padding-box;
   }
 
   /* The top border on top of the tab background is replaced
-   * by the slightly transparent outside tabs-border. */
+   * by the slightly transparent outside tabs-border-color. */
   .tab-background {
     border-top-style: none !important;
   }
 
   /* The border at the end of the tab strip is replaced
-   * by the slightly transparent outside tabs-border. */
+   * by the slightly transparent outside tabs-border-color. */
   .tabbrowser-tab[last-visible-tab] {
-    border-inline-end: 1px solid var(--tabs-border);
+    border-inline-end: 1px solid var(--tabs-border-color);
   }
 
   .tabbrowser-tab[last-visible-tab]::after {
     display: none !important;
   }
 
   /* Use default window colors when in non-maximized mode */
   #tabbrowser-tabs,
--- a/toolkit/components/extensions/ext-theme.js
+++ b/toolkit/components/extensions/ext-theme.js
@@ -130,23 +130,22 @@ class Theme {
         case "textcolor":
         case "tab_text":
           this.lwtStyles.textcolor = cssColor;
           break;
         case "toolbar":
           this.lwtStyles.toolbarColor = cssColor;
           break;
         case "toolbar_text":
-          this.lwtStyles.toolbar_text = cssColor;
-          break;
         case "toolbar_field":
-          this.lwtStyles.toolbar_field = cssColor;
-          break;
         case "toolbar_field_text":
-          this.lwtStyles.toolbar_field_text = cssColor;
+        case "toolbar_top_separator":
+        case "toolbar_bottom_separator":
+        case "toolbar_vertical_separator":
+          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
@@ -75,16 +75,28 @@
               },
               "toolbar_field": {
                 "type": "string",
                 "optional": true
               },
               "toolbar_field_text": {
                 "type": "string",
                 "optional": true
+              },
+              "toolbar_top_separator": {
+                "type": "string",
+                "optional": true
+              },
+              "toolbar_bottom_separator": {
+                "type": "string",
+                "optional": true
+              },
+              "toolbar_vertical_separator": {
+                "type": "string",
+                "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
@@ -5,11 +5,12 @@ support-files =
 [browser_ext_management_themes.js]
 [browser_ext_themes_chromeparity.js]
 [browser_ext_themes_dynamic_getCurrent.js]
 [browser_ext_themes_dynamic_onUpdated.js]
 [browser_ext_themes_dynamic_updates.js]
 [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_toolbar_fields.js]
 [browser_ext_themes_toolbars.js]
new file mode 100644
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_separators.js
@@ -0,0 +1,56 @@
+"use strict";
+
+// This test checks whether applied WebExtension themes that attempt to change
+// the separator colors are applied properly.
+
+add_task(async function test_support_separator_properties() {
+  const SEPARATOR_TOP_COLOR = "#ff00ff";
+  const SEPARATOR_VERTICAL_COLOR = "#9400ff";
+  const SEPARATOR_BOTTOM_COLOR = "#3366cc";
+
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "images": {
+          "headerURL": "image1.png",
+        },
+        "colors": {
+          "accentcolor": ACCENT_COLOR,
+          "textcolor": TEXT_COLOR,
+          "toolbar_top_separator": SEPARATOR_TOP_COLOR,
+          "toolbar_vertical_separator": SEPARATOR_VERTICAL_COLOR,
+          "toolbar_bottom_separator": SEPARATOR_BOTTOM_COLOR,
+        },
+      },
+    },
+    files: {
+      "image1.png": BACKGROUND,
+    },
+  });
+
+  await extension.startup();
+
+  let navbar = document.querySelector("#nav-bar");
+  Assert.ok(
+    window.getComputedStyle(navbar).boxShadow.includes(
+      `rgb(${hexToRGB(SEPARATOR_TOP_COLOR).join(", ")})`
+    ),
+    "Top separator color properly set"
+  );
+
+  let mainWin = document.querySelector("#main-window");
+  Assert.equal(
+    window.getComputedStyle(mainWin).getPropertyValue("--urlbar-separator-color"),
+    SEPARATOR_VERTICAL_COLOR,
+    "Vertical separator color properly set"
+  );
+
+  let toolbox = document.querySelector("#navigator-toolbox");
+  Assert.equal(
+    window.getComputedStyle(toolbox, ":after").borderBottomColor,
+    `rgb(${hexToRGB(SEPARATOR_BOTTOM_COLOR).join(", ")})`,
+    "Bottom separator color properly set"
+  );
+
+  await extension.unload();
+});
--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -14,17 +14,20 @@ XPCOMUtils.defineLazyModuleGetter(this, 
   "resource://gre/modules/addons/LightweightThemeImageOptimizer.jsm");
 
 const kCSSVarsMap = new Map([
   ["--lwt-background-alignment", "backgroundsAlignment"],
   ["--lwt-background-tiling", "backgroundsTiling"],
   ["--toolbar-bgcolor", "toolbarColor"],
   ["--toolbar-color", "toolbar_text"],
   ["--url-and-searchbar-background-color", "toolbar_field"],
-  ["--url-and-searchbar-color", "toolbar_field_text"]
+  ["--url-and-searchbar-color", "toolbar_field_text"],
+  ["--tabs-border-color", "toolbar_top_separator"],
+  ["--toolbox-border-bottom-color", "toolbar_bottom_separator"],
+  ["--urlbar-separator-color", "toolbar_vertical_separator"],
 ]);
 
 this.LightweightThemeConsumer =
  function LightweightThemeConsumer(aDocument) {
   this._doc = aDocument;
   this._win = aDocument.defaultView;
 
   let screen = this._win.screen;