Bug 1219613 - Stop preprocessing devtools theme css files. r=bgrins
authorAlexandre Poirot <poirot.alex@gmail.com>
Tue, 03 Nov 2015 13:35:11 -0800
changeset 271115 a081f1e22fdc054910923948099f878e73e92f37
parent 271114 7a6d5c81c20b61dc5f4019c281ad7e5304e99997
child 271116 71e0c1cfbb7b5e421b020d962902d359ab6e38cb
push id67553
push usercbook@mozilla.com
push dateWed, 04 Nov 2015 11:31:24 +0000
treeherdermozilla-inbound@8868503916ba [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1219613
milestone45.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 1219613 - Stop preprocessing devtools theme css files. r=bgrins
devtools/client/jar.mn
devtools/client/shared/test/browser.ini
devtools/client/shared/test/browser_theme_switching.js
devtools/client/shared/theme-switching.js
devtools/client/themes/dark-theme.css
devtools/client/themes/light-theme.css
devtools/client/themes/memory.css
devtools/client/themes/toolbars.css
devtools/client/themes/toolbars.inc.css
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -145,18 +145,19 @@ devtools.jar:
     content/eyedropper/eyedropper.xul (eyedropper/eyedropper.xul)
     content/eyedropper/crosshairs.css (eyedropper/crosshairs.css)
     content/eyedropper/nocursor.css (eyedropper/nocursor.css)
     content/aboutdebugging/aboutdebugging.xhtml (aboutdebugging/aboutdebugging.xhtml)
     content/aboutdebugging/aboutdebugging.css (aboutdebugging/aboutdebugging.css)
     content/aboutdebugging/aboutdebugging.js (aboutdebugging/aboutdebugging.js)
 %   skin devtools classic/1.0 %skin/
 *   skin/themes/common.css (themes/common.css)
-*   skin/themes/dark-theme.css (themes/dark-theme.css)
-*   skin/themes/light-theme.css (themes/light-theme.css)
+    skin/themes/dark-theme.css (themes/dark-theme.css)
+    skin/themes/light-theme.css (themes/light-theme.css)
+    skin/themes/toolbars.css (themes/toolbars.css)
     skin/themes/variables.css (themes/variables.css)
     skin/themes/images/add.svg (themes/images/add.svg)
     skin/themes/images/filters.svg (themes/images/filters.svg)
     skin/themes/images/filter-swatch.svg (themes/images/filter-swatch.svg)
     skin/themes/images/pseudo-class.svg (themes/images/pseudo-class.svg)
     skin/themes/images/controls.png (themes/images/controls.png)
     skin/themes/images/controls@2x.png (themes/images/controls@2x.png)
     skin/themes/images/animation-fast-track.svg (themes/images/animation-fast-track.svg)
--- a/devtools/client/shared/test/browser.ini
+++ b/devtools/client/shared/test/browser.ini
@@ -129,8 +129,9 @@ skip-if = e10s # Bug 1086492 - Disable t
 [browser_toolbar_basic.js]
 [browser_toolbar_tooltip.js]
 [browser_toolbar_webconsole_errors_count.js]
 skip-if = buildapp == 'mulet' || e10s # The developertoolbar error count isn't correct with e10s
 [browser_treeWidget_basic.js]
 [browser_treeWidget_keyboard_interaction.js]
 [browser_treeWidget_mouse_interaction.js]
 [browser_devices.js]
+[browser_theme_switching.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/shared/test/browser_theme_switching.js
@@ -0,0 +1,32 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+var toolbox;
+
+add_task(function*() {
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  let toolbox = yield gDevTools.showToolbox(target);
+  let root = toolbox.frame.contentDocument.documentElement;
+
+  let platform = root.getAttribute("platform");
+  let expectedPlatform = getPlatform();
+  is(platform, expectedPlatform, ":root[platform] is correct");
+
+  let theme = Services.prefs.getCharPref("devtools.theme");
+  let className = "theme-" + theme;
+  ok(root.classList.contains(className), ":root has " + className + " class (current theme)");
+
+  yield toolbox.destroy();
+});
+
+function getPlatform() {
+  let {OS} = Services.appinfo;
+  if (OS == "WINNT") {
+    return "win";
+  } else if (OS == "Darwin") {
+    return "mac";
+  } else {
+    return "linux";
+  }
+}
--- a/devtools/client/shared/theme-switching.js
+++ b/devtools/client/shared/theme-switching.js
@@ -102,16 +102,27 @@
 
   const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
 
   Cu.import("resource://gre/modules/Services.jsm");
   Cu.import("resource://devtools/client/framework/gDevTools.jsm");
   const {require} = Components.utils.import("resource://devtools/shared/Loader.jsm", {});
   const StylesheetUtils = require("sdk/stylesheet/utils");
 
+  let os;
+  let platform = navigator.platform;
+  if (platform.startsWith("Win")) {
+    os = "win";
+  } else if (platform.startsWith("Mac")) {
+    os = "mac";
+  } else {
+    os = "linux";
+  }
+  documentElement.setAttribute("platform", os);
+
   if (documentElement.hasAttribute("force-theme")) {
     switchTheme(documentElement.getAttribute("force-theme"));
   } else {
     switchTheme(Services.prefs.getCharPref("devtools.theme"));
 
     gDevTools.on("pref-changed", handlePrefChange);
     window.addEventListener("unload", function() {
       gDevTools.off("pref-changed", handlePrefChange);
--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -1,14 +1,15 @@
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* 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/. */
 
 @import url(variables.css);
+@import url(toolbars.css);
 
 body {
   margin: 0;
 }
 
 .theme-body {
   background: var(--theme-body-background);
   color: var(--theme-body-color);
@@ -369,11 +370,8 @@ div.CodeMirror span.eval-text {
 }
 
 .CodeMirror-hints,
 .CodeMirror-Tern-tooltip {
   box-shadow: 0 0 4px rgba(255, 255, 255, .3);
   background-color: #0f171f;
   color: var(--theme-body-color);
 }
-
-
-%include toolbars.inc.css
--- a/devtools/client/themes/light-theme.css
+++ b/devtools/client/themes/light-theme.css
@@ -1,14 +1,15 @@
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* 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/. */
 
 @import url(variables.css);
+@import url(toolbars.css);
 
 body {
   margin: 0;
 }
 
 .theme-body {
   background: var(--theme-body-background);
   color: var(--theme-body-color);
@@ -367,11 +368,8 @@ div.CodeMirror span.eval-text {
   border-bottom: 0;
 }
 
 .CodeMirror-hints,
 .CodeMirror-Tern-tooltip {
   box-shadow: 0 0 4px rgba(128, 128, 128, .5);
   background-color: var(--theme-sidebar-background);
 }
-
-
-%include toolbars.inc.css
--- a/devtools/client/themes/memory.css
+++ b/devtools/client/themes/memory.css
@@ -82,17 +82,17 @@ html, body, #app, #memory-tool {
     background-image: url(images/command-screenshot@2x.png);
   }
 }
 
 /**
  * TODO bug 1213100
  * Once we figure out how to store invertable buttons (pseudo element like in
  * this case?) we should add a .invertable class to handle this generally,
- * rather than the definitions in toolbars.inc.css.
+ * rather than the definitions in toolbars.css.
  *
  * @see bug 1173397 for another inverted related bug
  */
 .theme-light .devtools-toolbar > .devtools-toolbarbutton.take-snapshot::before {
   filter: url(images/filters.svg#invert);
 }
 
 /**
rename from devtools/client/themes/toolbars.inc.css
rename to devtools/client/themes/toolbars.css
--- a/devtools/client/themes/toolbars.inc.css
+++ b/devtools/client/themes/toolbars.css
@@ -1,13 +1,12 @@
-%if 0
+/* vim:set ts=2 sw=2 sts=2 et: */
 /* 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
 
 /* CSS Variables specific to the devtools toolbar that aren't defined by the themes */
 .theme-light {
   --searchbox-background-color: #ffee99;
   --searchbox-border-color: #ffbf00;
   --searcbox-no-match-background-color: #ffe5e5;
   --searcbox-no-match-border-color: #e52e2e;
 }
@@ -327,25 +326,26 @@
 
 /* Text input */
 
 .devtools-textinput,
 .devtools-searchinput {
   -moz-appearance: none;
   margin: 1px 3px;
   border: 1px solid;
-%ifdef XP_MACOSX
-  border-radius: 20px;
-%else
   border-radius: 2px;
-%endif
   padding: 4px 6px;
   border-color: var(--theme-splitter-color);
 }
 
+:root[platform="mac"] .devtools-textinput,
+:root[platform="mac"] .devtools-searchinput {
+  border-radius: 20px;
+}
+
 .devtools-searchinput {
   padding: 0;
   -moz-padding-start: 22px;
   -moz-padding-end: 4px;
   background-position: 8px center;
   background-size: 11px 11px;
   background-repeat: no-repeat;
   font-size: inherit;