Bug 1094509 - Switch to light devedition theme when light devtools theme is applied;r=Gijs
authorBrian Grinstead <bgrinstead@mozilla.com>
Fri, 07 Nov 2014 21:43:24 +0000
changeset 235067 2e401372dcf5c13f6c3b5f6a99192954b9a5f79b
parent 235066 8e53d157ab8491015ff518f966309af43e1559ef
child 235068 222cf02605d259422e22b890ec46de6e88528f6e
push id611
push userraliiev@mozilla.com
push dateMon, 05 Jan 2015 23:23:16 +0000
treeherdermozilla-release@345cd3b9c445 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1094509
milestone35.0a2
Bug 1094509 - Switch to light devedition theme when light devtools theme is applied;r=Gijs
browser/base/content/browser-devedition.js
browser/base/content/test/general/browser_devedition.js
browser/components/customizableui/test/browser_970511_undo_restore_default.js
browser/themes/linux/devedition.css
browser/themes/osx/devedition.css
browser/themes/shared/devedition.inc.css
browser/themes/windows/devedition.css
--- a/browser/base/content/browser-devedition.js
+++ b/browser/base/content/browser-devedition.js
@@ -51,37 +51,33 @@ let DevEdition = {
     }
   },
 
   _updateDevtoolsThemeAttribute: function() {
     // Set an attribute on root element to make it possible
     // to change colors based on the selected devtools theme.
     document.documentElement.setAttribute("devtoolstheme",
       Services.prefs.getCharPref(this._devtoolsThemePrefName));
+    ToolbarIconColor.inferFromText();
     this._updateStyleSheetFromPrefs();
   },
 
   _updateStyleSheetFromPrefs: function() {
     let lightweightThemeSelected = false;
     try {
       lightweightThemeSelected = Services.prefs.getBoolPref(this._lwThemePrefName);
     } catch(e) {}
 
     let defaultThemeSelected = false;
     try {
        defaultThemeSelected = Services.prefs.getCharPref(this._themePrefName) == "classic/1.0";
     } catch(e) {}
 
-    let devtoolsIsDark = false;
-    try {
-       devtoolsIsDark = Services.prefs.getCharPref(this._devtoolsThemePrefName) == "dark";
-    } catch(e) {}
-
     let deveditionThemeEnabled = Services.prefs.getBoolPref(this._prefName) &&
-      !lightweightThemeSelected && defaultThemeSelected && devtoolsIsDark;
+      !lightweightThemeSelected && defaultThemeSelected;
 
     this._toggleStyleSheet(deveditionThemeEnabled);
   },
 
   handleEvent: function(e) {
     if (e.type === "load") {
       this.styleSheet.removeEventListener("load", this);
       gBrowser.tabContainer._positionPinnedTabs();
--- a/browser/base/content/test/general/browser_devedition.js
+++ b/browser/base/content/test/general/browser_devedition.js
@@ -54,32 +54,22 @@ function testDevtoolsTheme() {
 
   Services.prefs.setBoolPref(PREF_DEVEDITION_THEME, true);
   ok (DevEdition.styleSheet, "The devedition stylesheet exists.");
 
   info ("Checking stylesheet and :root attributes based on devtools theme.");
   Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "light");
   is (document.documentElement.getAttribute("devtoolstheme"), "light",
     "The documentElement has an attribute based on devtools theme.");
-  ok (!DevEdition.styleSheet, "The devedition stylesheet has been removed because of light devtools theme.");
+  ok (DevEdition.styleSheet, "The devedition stylesheet is still there with the light devtools theme.");
 
   Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "dark");
   is (document.documentElement.getAttribute("devtoolstheme"), "dark",
     "The documentElement has an attribute based on devtools theme.");
-  ok (DevEdition.styleSheet, "The devedition stylesheet has been readded because of dark devtools theme.");
-
-  Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "light");
-  is (document.documentElement.getAttribute("devtoolstheme"), "light",
-    "The documentElement has an attribute based on devtools theme.");
-  ok (!DevEdition.styleSheet, "The devedition stylesheet has been removed because of light devtools theme.");
-
-  Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "dark");
-  is (document.documentElement.getAttribute("devtoolstheme"), "dark",
-    "The documentElement has an attribute based on devtools theme.");
-  ok (DevEdition.styleSheet, "The devedition stylesheet has been readded because of dark devtools theme.");
+  ok (DevEdition.styleSheet, "The devedition stylesheet is still there with the dark devtools theme.");
 }
 
 function dummyLightweightTheme(id) {
   return {
     id: id,
     name: id,
     headerURL: "http://lwttest.invalid/a.png",
     footerURL: "http://lwttest.invalid/b.png",
--- a/browser/components/customizableui/test/browser_970511_undo_restore_default.js
+++ b/browser/components/customizableui/test/browser_970511_undo_restore_default.js
@@ -110,19 +110,16 @@ add_task(function() {
   let deveditionThemeButton = document.getElementById("customization-devedition-theme-button");
   let undoResetButton = document.getElementById("customization-undo-reset-button");
   ok(CustomizableUI.inDefaultState, "Should be in default state at start of test");
   ok(restoreDefaultsButton.disabled, "Restore defaults button should be disabled when in default state");
   is(deveditionThemeButton.hasAttribute("checked"), defaultValue, "Devedition theme button should reflect pref value");
   is(undoResetButton.hidden, true, "Undo reset button should be hidden at start of test");
   Services.prefs.setBoolPref(prefName, !defaultValue);
 
-  //XXXgijs this line should be removed once bug 1094509 lands
-  Services.prefs.setCharPref("devtools.theme", "dark");
-
   yield waitForCondition(() => !restoreDefaultsButton.disabled);
   ok(!restoreDefaultsButton.disabled, "Restore defaults button should be enabled when pref changed");
   is(deveditionThemeButton.hasAttribute("checked"), !defaultValue, "Devedition theme button should reflect changed pref value");
   ok(!CustomizableUI.inDefaultState, "With devedition theme flipped, no longer default");
   is(undoResetButton.hidden, true, "Undo reset button should be hidden after pref change");
 
   yield gCustomizeMode.reset();
   ok(restoreDefaultsButton.disabled, "Restore defaults button should be disabled after reset");
--- a/browser/themes/linux/devedition.css
+++ b/browser/themes/linux/devedition.css
@@ -26,28 +26,28 @@
 }
 
 /* Square back and forward buttons */
 #back-button:not(:-moz-lwtheme) > .toolbarbutton-icon,
 #forward-button:not(:-moz-lwtheme) > .toolbarbutton-icon {
   margin: 0;
   border: none;
   padding: 2px 6px;
-  background: #252C33;
+  background: var(--chrome-nav-buttons-background);
   box-shadow: none !important;
 }
 
 /* Override a box shadow for disabled back button */
 #main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon {
   box-shadow: none !important;
 }
 
 #back-button:hover:not([disabled="true"]) > .toolbarbutton-icon,
 #forward-button:hover:not([disabled="true"]) > .toolbarbutton-icon {
-  background: #1B2127 !important;
+  background: var(--chrome-nav-buttons-hover-background) !important;
 }
 
 #back-button > .toolbarbutton-icon {
   border-radius: 2px 0 0 2px !important;
 }
 
 .urlbar-history-dropmarker {
   -moz-appearance: none;
@@ -56,8 +56,17 @@
   -moz-image-region: var(--urlbar-dropmarker-region);
 }
 
 /* Add the proper background for tab overflow */
 #alltabs-button,
 #new-tab-button {
   background: var(--chrome-background-color);
 }
+
+#new-tab-button:hover > .toolbarbutton-icon {
+  border-color: transparent !important;
+}
+
+/* Prevent double border below tabs toolbar */
+#TabsToolbar:not([collapsed="true"]) + #nav-bar {
+  border-top-width: 0 !important;
+}
--- a/browser/themes/osx/devedition.css
+++ b/browser/themes/osx/devedition.css
@@ -1,14 +1,27 @@
 % 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/.
 
 %include ../shared/devedition.inc.css
 
+/* Use forward-facing magnifying glasses for the search box */
+:root[devtoolstheme="dark"] {
+  --search-button-image: url("chrome://browser/skin/devedition/search.svg#search-icon-mac-inverted");
+}
+:root[devtoolstheme="light"] {
+  --search-button-image: url("chrome://browser/skin/devedition/search.svg#search-icon-mac");
+}
+
+/* Use only 1px separator between nav toolbox and page content */
+#navigator-toolbox::after {
+  linear-gradient(to top, var(--chrome-navigator-toolbox-separator-color), var(--chrome-navigator-toolbox-separator-color) 1px, transparent 1px);
+}
+
 /* Include extra space on left/right for dragging since there is no space above
    the tabs */
 #main-window[tabsintitlebar] #TabsToolbar {
   padding-left: 50px;
   padding-right: 50px;
   margin-bottom: 0; /* Don't overlap the inner highlight at the top of the nav-bar */
 }
 
@@ -26,22 +39,22 @@
 /* Square back and forward buttons.  Need !important on these because there
    are a lot of more specific selectors sprinkled around elsewhere for changing
    background / shadows for different states */
 #back-button,
 #forward-button {
   height: 22px !important;
   box-shadow: none !important;
   border: none !important;
-  background: #252C33 !important;
+  background: var(--chrome-nav-buttons-background) !important;
 }
 
 #back-button:hover:not([disabled="true"]),
 #forward-button:hover:not([disabled="true"]) {
-  background: #1B2127 !important;
+  background: var(--chrome-nav-buttons-hover-background) !important;
 }
 
 #back-button {
   border-radius: 3px 0 0 3px !important;
   padding: 0 !important;
   margin: 0 !important;
 }
 
@@ -60,21 +73,16 @@
   }
 }
 
 #forward-button:hover:active:not(:-moz-lwtheme) {
   background-image: none;
   box-shadow: none;
 }
 
-/* Use forward-facing magnifying glass for the search box */
-.search-go-button {
-  list-style-image: url("chrome://browser/skin/devedition/search.svg#search-icon-mac-inverted");
-}
-
 /* Don't use the default background for tabs toolbar */
 #TabsToolbar {
   -moz-appearance: none !important;
 }
 
 /* Tab styling - make sure to use an inverted icon for the selected tab
    (brighttext only covers the unselected tabs) */
 .tab-close-button[selected=true]:not(:hover) {
--- a/browser/themes/shared/devedition.inc.css
+++ b/browser/themes/shared/devedition.inc.css
@@ -2,72 +2,123 @@
 % 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/.
 
 /* devedition.css is loaded in browser.xul after browser.css when it is
    preffed on.  The bulk of the styling is here in the shared file, but
    there are overrides for each platform in their devedition.css files. */
 
 :root {
+  --space-above-tabbar: 1px;
+  --toolbarbutton-text-shadow: none;
+  --panel-ui-button-background-size: 1px calc(100% - 1px);
+  --panel-ui-button-background-position: 1px 0px;
+}
+
+:root[devtoolstheme="dark"] {
   /* Chrome */
-  --space-above-tabbar: 1px;
   --chrome-background-color: #1C2126;
   --chrome-color: #F5F7FA;
   --chrome-secondary-background-color: #39424D;
   --chrome-navigator-toolbox-separator-color: rgba(0,0,0,.2);
+  --chrome-nav-bar-separator-color: rgba(0,0,0,.2);
+  --chrome-nav-buttons-background: #252C33;
+  --chrome-nav-buttons-hover-background: #1B2127;
+  --chrome-selection-color: #fff;
+  --chrome-selection-background-color: #074D75;
 
   /* Tabs */
   --tabs-toolbar-color: #F5F7FA;
   --tab-background-color: #1C2126;
   --tab-color: #ced3d9;
-  --tab-hover-background-color: hsla(206,37%,4%,.5);
-  --tab-separator-color: #464C50;
+  --tab-hover-background-color: #07090a;
+  --tab-separator-color: #474C50;
   --tab-selection-color: #f5f7fa;
   --tab-selection-background-color: #1a4666;
   --tab-selection-box-shadow: 0 2px 0 #d7f1ff inset,
                                      0 8px 3px -5px #2b82bf inset,
-                                     0 -2px 0 rgba(0,0,0,.2) inset;
+                                     0 -1px 0 rgba(0,0,0,.2) inset;
 
   /* Toolbar buttons */
   --toolbarbutton-hover-background: rgba(25,33, 38,.6) linear-gradient(rgba(25,33,38,.6), rgba(25,33,38,.6)) padding-box;
   --toolbarbutton-hover-boxshadow: none;
   --toolbarbutton-hover-bordercolor: rgba(25,33,38,.6);
   --toolbarbutton-active-background: rgba(25,33,38,1) linear-gradient(rgba(25,33,38,1), rgba(25,33,38,1)) border-box;
   --toolbarbutton-active-boxshadow: none;
   --toolbarbutton-active-bordercolor: rgba(25,33,38,.8);
   --toolbarbutton-checkedhover-backgroundcolor: #1D4F73;
   --toolbarbutton-combined-boxshadow: none;
   --toolbarbutton-combined-backgroundimage: linear-gradient(#5F6670 0, #5F6670 18px);
-  --toolbarbutton-text-shadow: none;
 
   /* Identity box */
   --identity-box-chrome-color: #46afe3;
   --identity-box-chrome-background-image: linear-gradient(#5F6670 0, #5F6670 100%);
   --identity-box-verified-background-image: linear-gradient(#5F6670 0, #5F6670 100%);
   --verified-identity-box-backgroundcolor: transparent;
 
   /* Url and search bars */
   --url-and-searchbar-background-color: #171B1F;
   --url-and-searchbar-color: #fff;
   --urlbar-dropmarker-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg");
   --urlbar-dropmarker-region: rect(0px, 11px, 14px, 0px);
   --urlbar-dropmarker-active-region: rect(0px, 22px, 14px, 11px);
   --urlbar-dropmarker-2x-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg");
   --urlbar-dropmarker-2x-region: rect(0px, 11px, 14px, 0px);
   --urlbar-dropmarker-active-2x-region: rect(0px, 22px, 14px, 11px);
+  --search-button-image: url("chrome://browser/skin/devedition/search.svg#search-icon-inverted");
 
   /* Menu button separator */
-  --panel-ui-button-background-image: linear-gradient(to bottom, #5E6670, #5E6670);
-  --panel-ui-button-background-size: 1px calc(100% - 1px);
-  --panel-ui-button-background-position: 1px 0px;
+  --panel-ui-button-background-image: linear-gradient(to bottom, transparent, #5F6670 30%, #5F6670 70%, transparent);
+}
+
+:root[devtoolstheme="dark"] .searchbar-dropmarker-image {
+  --searchbar-dropmarker-url: url("chrome://browser/skin/devtools/dropmarker.svg");
+  --searchbar-dropmarker-2x-url: url("chrome://browser/skin/devtools/dropmarker.svg");
 }
 
-.searchbar-dropmarker-image {
-  --searchbar-dropmarker-url: url("chrome://browser/skin/devtools/dropmarker.svg");
-  --searchbar-dropmarker-2x-url: url("chrome://browser/skin/devtools/dropmarker.svg");
+:root[devtoolstheme="light"] {
+  --url-and-searchbar-background-color: #fff;
+
+  --chrome-background-color: #E3E4E6;
+  --chrome-color: #18191a;
+  --chrome-secondary-background-color: #f0f1f2;
+  --chrome-navigator-toolbox-separator-color: #cccccc;
+  --chrome-nav-bar-separator-color: #B6B6B8;
+  --chrome-nav-buttons-background: #f0f1f2;
+  --chrome-nav-buttons-hover-background: #DADBDB;
+  --chrome-selection-color: #f5f7fa;
+  --chrome-selection-background-color: #4c9ed9;
+
+  --tab-color: #18191a;
+  --tab-background-color: #E3E4E6;
+  --tab-hover-background-color: rgba(170,170,170,.2);
+  --tab-color: #18191a;
+  --tab-separator-color: rgba(170,170,170,.5);
+  --tab-selection-color: #f5f7fa;
+  --tab-selection-background-color: #4c9ed9;
+  --tab-selection-box-shadow: 0 2px 0 #d7f1ff inset,
+                              0 8px 3px -5px #319BDB inset,
+                              0 -1px 0 #2A7CB1 inset;
+
+  /* Toolbar buttons */
+  --toolbarbutton-hover-background: #D7D7D8;
+  --toolbarbutton-hover-boxshadow: none;
+  --toolbarbutton-hover-bordercolor: rgba(0,0,0,0.1);
+  --toolbarbutton-active-background: rgba(76,158,217,.5) linear-gradient(rgba(76,158,217,.5), rgba(76,158,217,.5)) border-box
+  --toolbarbutton-active-boxshadow: none;
+  --toolbarbutton-active-bordercolor: rgba(0,0,0,0.3);
+  --toolbarbutton-checkedhover-backgroundcolor: rgba(0,0,0,0.2);
+  --toolbarbutton-combined-boxshadow: none;
+  --toolbarbutton-combined-backgroundimage: linear-gradient(rgba(0,0,0,0.1) 0, rgba(0,0,0,0.1) 18px);
+
+  /* Url and search bars */
+  --search-button-image: url("chrome://browser/skin/devedition/search.svg#search-icon");
+
+  /* Menu button separator */
+  --panel-ui-button-background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.1) 70%, transparent);
 }
 
 /* Give some space to drag the window around while customizing
    (normal space to left and right of tabs doesn't work in this case) */
 #main-window[tabsintitlebar][customizing] {
   --space-above-tabbar: 9px;
 }
 
@@ -99,32 +150,33 @@
 }
 
 .tab-background-start[selected=true]::after,
 .tab-background-end[selected=true]::after {
   -moz-margin-start: 0;
 }
 /* End override @tabCurveHalfWidth@ and @tabCurveWidth@ */
 
-#navigator-toolbox ::-moz-selection {
-  background-color: #074D75;
-  color: #fff;
+#urlbar ::-moz-selection,
+#navigator-toolbox .searchbar-textbox ::-moz-selection {
+  background-color: var(--chrome-selection-background-color);
+  color: var(--chrome-selection-color);
 }
 
 /* Change the base colors for the browser chrome */
 
 #tabbrowser-tabs,
 #TabsToolbar,
 #browser-panel {
   background: var(--chrome-background-color);
   color: var(--chrome-color);
 }
 
 #navigator-toolbox::after {
-  background: var(--chrome-navigator-toolbox-separator-color)
+  background: var(--chrome-navigator-toolbox-separator-color);
 }
 
 #navigator-toolbox > toolbar:not(#TabsToolbar):not(#toolbar-menubar),
 #browser-bottombox {
   background: var(--chrome-secondary-background-color) !important;
   color: var(--chrome-color);
 }
 
@@ -168,17 +220,17 @@ window:not([chromehidden~="toolbar"]) #u
   background: transparent;
 }
 
 /* Nav bar specific stuff */
 #nav-bar {
   margin-top: 0 !important;
   border: none !important;
   border-radius: 0 !important;
-  box-shadow: 0 -1px var(--chrome-navigator-toolbox-separator-color) !important;
+  box-shadow: 0 1px var(--chrome-nav-bar-separator-color) inset !important;
   background-image: none !important;
 }
 
 /* No extra vertical padding for nav bar */
 #nav-bar-customization-target,
 #nav-bar {
   padding-top: 0;
   padding-bottom: 0;
@@ -187,27 +239,27 @@ window:not([chromehidden~="toolbar"]) #u
 /* Use smaller back button icon */
 #back-button {
   -moz-image-region: rect(0, 54px, 18px, 36px);
 }
 
 .search-go-button {
    /* !important is needed because searchbar.css is loaded after this */
   -moz-image-region: auto !important;
-  list-style-image: url("chrome://browser/skin/devedition/search.svg#search-icon-inverted");
+  list-style-image: var(--search-button-image);
 }
 
 .tab-background {
   visibility: hidden;
 }
 
 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
 .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
-  background-image: linear-gradient(to top, #474C50, #474C50);
+  background-image: linear-gradient(to top, var(--tab-separator-color), var(--tab-separator-color));
   background-position: 1px 0;
   background-repeat: no-repeat;
   background-size: 1px 100%;
 }
 
 .tabbrowser-arrowscrollbox > .scrollbutton-down,
 .tabbrowser-arrowscrollbox > .scrollbutton-up {
   background-color: var(--tab-background-color);
@@ -237,17 +289,17 @@ window:not([chromehidden~="toolbar"]) #u
 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover,
 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover,
 .tabbrowser-tab:hover {
   background-color: var(--tab-hover-background-color);
   color: var(--tab-hover-color);
 }
 
 .tabbrowser-tab[selected] {
-  color: var(--tab-selection-color);
+  color: var(--tab-selection-color) !important; /* Override color: inherit */
   background-color: var(--tab-selection-background-color);
   box-shadow: var(--tab-selection-box-shadow);
 }
 
 /* New tab buttons */
 #TabsToolbar > #new-tab-button,
 .tabs-newtab-button {
   background-image: none !important;
--- a/browser/themes/windows/devedition.css
+++ b/browser/themes/windows/devedition.css
@@ -5,26 +5,38 @@
 %include ../shared/devedition.inc.css
 
 #TabsToolbar::after {
   display: none;
 }
 
 #back-button > .toolbarbutton-icon,
 #forward-button > .toolbarbutton-icon {
-  background: #252C33 !important;
+  background: var(--chrome-nav-buttons-background) !important;
   border-radius: 0 !important;
   width: auto !important;
   height: auto !important;
   padding: 2px 6px !important;
   margin: 0 !important;
   border: none !important;
   box-shadow: none !important;
 }
 
+/* Override a box shadow for disabled back button */
+#main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon {
+  box-shadow: none !important;
+}
+
+/* Override !important properties for hovered back button */
+#main-window #back-button:hover:not([disabled="true"]) > .toolbarbutton-icon,
+#main-window #forward-button:hover:not([disabled="true"]) > .toolbarbutton-icon {
+  background: var(--chrome-nav-buttons-hover-background) !important;
+  box-shadow: none !important;
+}
+
 #back-button > .toolbarbutton-icon {
   border-radius: 2px 0 0 2px !important;
 }
 
 #nav-bar .toolbarbutton-1:not([type=menu-button]),
 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
   padding-top: 2px;