Bug 1435122 - move custom properties from :root to tabbrowser where possible, r=johannh,mikedeboer
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Fri, 02 Feb 2018 14:54:52 +0000
changeset 457399 f7334fd418e40a7cb6a76e39451b011fca1333aa
parent 457398 b5b67bfa069bb0b30247a8763a37b3d4cff4273e
child 457400 c074e2c4b2ed6c733479cad11204244edb9e51ef
push id1683
push usersfraser@mozilla.com
push dateThu, 26 Apr 2018 16:43:40 +0000
treeherdermozilla-release@5af6cb21869d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjohannh, mikedeboer
bugs1435122
milestone60.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 1435122 - move custom properties from :root to tabbrowser where possible, r=johannh,mikedeboer MozReview-Commit-ID: CRKhBnMaBun
browser/base/content/tabbrowser.xml
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/shared/compacttheme.inc.css
browser/themes/shared/tabs.inc.css
browser/themes/windows/browser.css
toolkit/modules/LightweightThemeConsumer.jsm
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -5916,18 +5916,17 @@
         <body><![CDATA[
           this.onAreaNodeRegistered(aArea, aContainer);
         ]]></body>
       </method>
 
       <field name="_tabMinWidthLimit">50</field>
       <property name="tabMinWidth">
         <setter><![CDATA[
-          let root = document.documentElement;
-          root.style.setProperty("--tab-min-width", val + "px");
+          this.tabContainer.style.setProperty("--tab-min-width", val + "px");
           return val;
         ]]></setter>
       </property>
 
       <constructor>
         <![CDATA[
           this.mCurrentBrowser = document.getAnonymousElementByAttribute(this, "anonid", "initialBrowser");
           this.mCurrentBrowser.permanentKey = {};
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -7,19 +7,16 @@
 @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-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);
 
   --toolbarbutton-border-radius: 4px;
   --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) - 1px);
@@ -30,16 +27,24 @@
   --arrowpanel-dimmed-further: hsla(0,0%,80%,.45);
   --arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
 
   --urlbar-separator-color: ThreeDShadow;
 
   --toolbox-border-bottom-color: ThreeDShadow;
 }
 
+#navigator-toolbox {
+  --tabs-border-color: rgba(0,0,0,.3);
+}
+
+#tabbrowser-tabs {
+  --tab-line-color: highlight;
+}
+
 :root:-moz-lwtheme {
   --toolbar-bgcolor: rgba(255,255,255,.4);
   --toolbar-bgimage: none;
 
   --toolbox-border-bottom-color: rgba(0,0,0,.3);
 }
 
 #menubar-items {
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -8,19 +8,16 @@
 %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-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);
 
   --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) + 1px);
   --toolbarbutton-border-radius: 4px;
@@ -38,16 +35,24 @@
 
 :root:-moz-lwtheme {
   --toolbar-bgcolor: rgba(255,255,255,.4);
   --toolbar-bgimage: none;
 
   --toolbox-border-bottom-color: rgba(0,0,0,.3);
 }
 
+#navigator-toolbox {
+  --tabs-border-color: rgba(0,0,0,.3);
+}
+
+#tabbrowser-tabs {
+  --tab-line-color: #0a84ff;
+}
+
 #navigator-toolbox toolbarbutton:-moz-lwtheme {
   color: inherit;
   text-shadow: inherit;
 }
 
 #main-window {
   -moz-appearance: none;
   background-color: #eeeeee;
@@ -127,20 +132,20 @@
 #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-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) {
+  #navigator-toolbox:not(:-moz-lwtheme) {
     --tabs-border-color: rgba(0,0,0,.2);
   }
-  :root:not(:-moz-lwtheme):-moz-window-inactive {
+  #navigator-toolbox:not(:-moz-lwtheme):-moz-window-inactive {
     --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-color);
   }
 }
 
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -11,18 +11,16 @@
 
   --toolbar-bgcolor: var(--chrome-secondary-background-color);
   --toolbar-gbimage: none;
   --toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor);
   --toolbar-non-lwt-textcolor: var(--chrome-color);
   --toolbar-non-lwt-bgimage: none;
 
   --toolbarbutton-icon-fill-opacity: .7;
-
-  --tab-line-color: #0a84ff;
 }
 
 :root:-moz-lwtheme-brighttext {
   /* Chrome */
   --chrome-background-color: hsl(240, 5%, 5%);
   --chrome-color: rgb(249, 249, 250);
   --chrome-secondary-background-color: hsl(240, 1%, 20%);
   --toolbox-border-bottom-color: hsla(240, 5%, 5%, .1);
@@ -49,16 +47,20 @@
   --chrome-nav-bar-separator-color: #B6B6B8;
   --chrome-nav-buttons-background: #ffffff; /* --theme-body-background */
   --chrome-nav-buttons-hover-background: #DADBDB;
   --chrome-nav-bar-controls-border-color: #ccc;
   --chrome-selection-color: #f5f7fa;
   --chrome-selection-background-color: #4c9ed9;
 }
 
+#tabbrowser-tabs:-moz-lwtheme {
+  --tab-line-color: #0a84ff;
+}
+
 .toolbarbutton-animatable-box[brighttext],
 toolbar[brighttext] .toolbarbutton-animatable-box,
 toolbar[brighttext] .toolbarbutton-1 {
   fill: rgb(249, 249, 250);
 }
 
 #urlbar ::-moz-selection,
 #navigator-toolbox .searchbar-textbox ::-moz-selection,
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -1,32 +1,36 @@
 %if 0
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 %endif
 %filter substitution
 %define horizontalTabPadding 9px
 
+/* This can't live on the tabbrowser because it's used for the titlebar height, too. */
 :root {
+  --tab-min-height: 33px;
+}
+
+#tabbrowser-tabs {
   --tabs-top-border-width: 0px;
-  --tab-min-height: 33px;
   --tab-min-width: 76px;
   --tab-loading-fill: #0A84FF;
 }
 
 :root[uidensity=compact] {
   --tab-min-height: 29px;
 }
 
 :root[uidensity=touch] {
   --tab-min-height: 41px;
 }
 
-:root:-moz-lwtheme {
+#tabbrowser-tabs:-moz-lwtheme {
   --tab-line-color: var(--lwt-accent-color);
 }
 
 tabbrowser {
   /* Value for --in-content-page-background in in-content/common.inc.css */
   background-color: #f9f9fa;
 }
 
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -9,19 +9,16 @@
 
 %include ../shared/browser.inc.css
 %filter substitution
 %define glassShadowColor hsla(240,5%,5%,0.3)
 
 :root {
   --titlebar-text-color: currentColor;
 
-  --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);
 
   --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) - 1px);
   --toolbarbutton-border-radius: 2px;
@@ -32,42 +29,57 @@
   --arrowpanel-dimmed-further: hsla(0,0%,80%,.45);
   --arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
 
   --urlbar-separator-color: ThreeDLightShadow;
 
   --toolbox-border-bottom-color: ThreeDShadow;
 }
 
+#navigator-toolbox {
+  --tabs-border-color: threedshadow;
+}
+
+#tabbrowser-tabs {
+  --tab-line-color: highlight;
+}
+
 @media (-moz-windows-default-theme) {
   :root {
-    --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;
   }
+
+  #navigator-toolbox {
+    --tabs-border-color: rgba(0,0,0,.3);
+  }
+
+  #tabbrowser-tabs {
+    --tab-line-color: #0a84ff;
+  }
 }
 
 :root:-moz-lwtheme {
-  --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);
 }
 
+#navigator-toolbox:-moz-lwtheme {
+  --tabs-border-color: rgba(0,0,0,.3);
+}
+
 #menubar-items {
   -moz-box-orient: vertical; /* for flex hack */
 }
 
 #main-menubar {
   -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
 }
 
@@ -108,17 +120,17 @@
 }
 
 /*
  * 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) {
+    #navigator-toolbox:not(:-moz-lwtheme) {
       --tabs-border-color: @glassShadowColor@;
     }
 
     #TabsToolbar:not(:-moz-lwtheme) {
       color: hsl(240,9%,98%);
     }
 
     /* Always show full-height tab separators on tabs with borders. */
--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -8,37 +8,37 @@ const {utils: Cu, interfaces: Ci, classe
 
 ChromeUtils.import("resource://gre/modules/XPCOMUtils.jsm");
 ChromeUtils.import("resource://gre/modules/Services.jsm");
 ChromeUtils.import("resource://gre/modules/AppConstants.jsm");
 
 ChromeUtils.defineModuleGetter(this, "LightweightThemeImageOptimizer",
   "resource://gre/modules/addons/LightweightThemeImageOptimizer.jsm");
 
-const kCSSVarsMap = new Map([
+const kCSSVarsMap = [
   ["--lwt-accent-color-inactive", "accentcolorInactive"],
   ["--lwt-background-alignment", "backgroundsAlignment"],
   ["--lwt-background-tiling", "backgroundsTiling"],
-  ["--tab-loading-fill", "tab_loading"],
+  ["--tab-loading-fill", "tab_loading", "tabbrowser-tabs"],
   ["--lwt-tab-text", "tab_text"],
   ["--toolbar-bgcolor", "toolbarColor"],
   ["--toolbar-color", "toolbar_text"],
   ["--url-and-searchbar-background-color", "toolbar_field"],
   ["--url-and-searchbar-color", "toolbar_field_text"],
   ["--lwt-toolbar-field-border-color", "toolbar_field_border"],
   ["--urlbar-separator-color", "toolbar_field_separator"],
-  ["--tabs-border-color", "toolbar_top_separator"],
+  ["--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-background", "button_background"],
   ["--lwt-toolbarbutton-hover-background", "button_background_hover"],
   ["--lwt-toolbarbutton-active-background", "button_background_active"],
-]);
+];
 
 this.LightweightThemeConsumer =
  function LightweightThemeConsumer(aDocument) {
   this._doc = aDocument;
   this._win = aDocument.defaultView;
 
   let screen = this._win.screen;
   this._lastScreenWidth = screen.width;
@@ -194,27 +194,29 @@ LightweightThemeConsumer.prototype = {
 
 function _setImage(aRoot, aActive, aVariableName, aURLs) {
   if (aURLs && !Array.isArray(aURLs)) {
     aURLs = [aURLs];
   }
   _setProperty(aRoot, aActive, aVariableName, aURLs && aURLs.map(v => `url("${v.replace(/"/g, '\\"')}")`).join(","));
 }
 
-function _setProperty(root, active, variableName, value) {
+function _setProperty(elem, active, variableName, value) {
   if (active && value) {
-    root.style.setProperty(variableName, value);
+    elem.style.setProperty(variableName, value);
   } else {
-    root.style.removeProperty(variableName);
+    elem.style.removeProperty(variableName);
   }
 }
 
 function _setProperties(root, active, vars) {
-  for (let [cssVarName, varsKey] of kCSSVarsMap) {
-    _setProperty(root, active, cssVarName, vars[varsKey]);
+  for (let [cssVarName, varsKey, optionalElementID] of kCSSVarsMap) {
+    let elem = optionalElementID ? root.ownerDocument.getElementById(optionalElementID)
+                                 : root;
+    _setProperty(elem, active, cssVarName, vars[varsKey]);
   }
 }
 
 function _parseRGB(aColorString) {
   var rgb = aColorString.match(/^rgba?\((\d+), (\d+), (\d+)/);
   rgb.shift();
   return rgb.map(x => parseInt(x));
 }