Bug 1331449 - Set the [devtoolstheme] attribute on more specific nodes to improve tpaint;r=Gijs

MozReview-Commit-ID: 3LDQeKsGShB

--HG--
extra : rebase_source : c37b38921953a646d1d676f48b953c9715757bf2

devtools/client/framework/devtools-browser.js

@@ -146,7 +146,10 @@ var gDevToolsBrowser = exports.gDevToolsBrowser = {
       devtoolsTheme = "light";
     }
 
-    win.document.documentElement.setAttribute("devtoolstheme", devtoolsTheme);
+    // Style gcli and the splitter between the toolbox and page content.  This used to
+    // set the attribute on the browser's root node but that regressed tpaint: bug 1331449.
+    win.document.getElementById("browser-bottombox").setAttribute("devtoolstheme", devtoolsTheme);
+    win.document.getElementById("content").setAttribute("devtoolstheme", devtoolsTheme);
 
     // If the toolbox color changes and we have the opposite compact theme applied,
     // change it to match.  For example:

devtools/client/framework/test/browser_toolbox_theme.js

@@ -17,16 +17,22 @@ registerCleanupFunction(() => {
 add_task(function* testDevtoolsTheme() {
   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.");
+  is(document.getElementById("browser-bottombox").getAttribute("devtoolstheme"), "light",
+    "The element has an attribute based on devtools theme.");
+  is(document.getElementById("content").getAttribute("devtoolstheme"), "light",
+    "The element has an attribute based on devtools theme.");
 
   Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "dark");
-  is(document.documentElement.getAttribute("devtoolstheme"), "dark",
-    "The documentElement has an attribute based on devtools theme.");
+  is(document.getElementById("browser-bottombox").getAttribute("devtoolstheme"), "dark",
+    "The element has an attribute based on devtools theme.");
+  is(document.getElementById("content").getAttribute("devtoolstheme"), "dark",
+    "The element has an attribute based on devtools theme.");
 
   Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "firebug");
-  is(document.documentElement.getAttribute("devtoolstheme"), "light",
-    "The documentElement has 'light' as a default for the devtoolstheme attribute");
+  is(document.getElementById("browser-bottombox").getAttribute("devtoolstheme"), "light",
+    "The element has 'light' as a default for the devtoolstheme attribute.");
+  is(document.getElementById("content").getAttribute("devtoolstheme"), "light",
+    "The element has 'light' as a default for the devtoolstheme attribute.");
 });
 
 add_task(function* testDevtoolsAndCompactThemeSyncing() {

devtools/client/shared/developer-toolbar.js

@@ -933,8 +933,8 @@ OutputPanel.prototype._init = function (devtoolbar) {
    so it can be styled correctly. */
 OutputPanel.prototype._copyTheme = function () {
   if (this.document) {
-    let theme =
-      this._devtoolbar._doc.documentElement.getAttribute("devtoolstheme");
+    let theme = this._devtoolbar._doc.getElementById("browser-bottombox")
+                  .getAttribute("devtoolstheme");
     this.document.documentElement.setAttribute("devtoolstheme", theme);
   }
 };
@@ -1253,8 +1253,8 @@ TooltipPanel.prototype._init = function (devtoolbar) {
    so it can be styled correctly. */
 TooltipPanel.prototype._copyTheme = function () {
   if (this.document) {
-    let theme =
-      this._devtoolbar._doc.documentElement.getAttribute("devtoolstheme");
+    let theme = this._devtoolbar._doc.getElementById("browser-bottombox")
+                  .getAttribute("devtoolstheme");
     this.document.documentElement.setAttribute("devtoolstheme", theme);
   }
 };

devtools/client/themes/commandline.inc.css

@@ -9,7 +9,7 @@
 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
    We are copy/pasting variables from light-theme and dark-theme,
    since they aren't loaded in this context (within browser.css). */
-:root[devtoolstheme="light"] #developer-toolbar {
+#browser-bottombox[devtoolstheme="light"] #developer-toolbar {
   --gcli-background-color: #fcfcfc; /* --theme-tab-toolbar-background */
   --gcli-input-background: #fcfcfc; /* --theme-toolbar-background */
   --gcli-input-focused-background: #ffffff; /* --theme-sidebar-background */
@@ -21,7 +21,7 @@
   --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
 }
 
-:root[devtoolstheme="dark"] #developer-toolbar {
+#browser-bottombox[devtoolstheme="dark"] #developer-toolbar {
   --gcli-background-color: #272b35; /* --theme-toolbar-background */
   --gcli-input-background: #272b35; /* --theme-tab-toolbar-background */
   --gcli-input-focused-background: #272b35; /* --theme-tab-toolbar-background */
@@ -54,8 +54,8 @@
   margin: auto 10px;
 }
 
-:root[devtoolstheme="light"] #developer-toolbar > .developer-toolbar-button:not([checked=true]) > image,
-:root[devtoolstheme="light"] .gclitoolbar-input-node:not([focused=true])::before  {
+#browser-bottombox[devtoolstheme="light"] #developer-toolbar > .developer-toolbar-button:not([checked=true]) > image,
+#browser-bottombox[devtoolstheme="light"] .gclitoolbar-input-node:not([focused=true])::before  {
   filter: invert(1);
 }
 
@@ -65,7 +65,7 @@
 }
 
 /* The toolkit close button is low contrast in the dark theme so invert it. */
-:root[devtoolstheme="dark"] #developer-toolbar > .close-icon:not(:hover) > image {
+#browser-bottombox[devtoolstheme="dark"] #developer-toolbar > .close-icon:not(:hover) > image {
   filter: invert(1);
 }
 

devtools/client/themes/splitters.css

@@ -20,13 +20,12 @@
   --devtools-splitter-inline-end-width: 4px;
 }
 
-:root[devtoolstheme="light"] {
+#content[devtoolstheme="light"] {
   /* These variables are used in browser.xul but inside the toolbox they are overridden by --theme-splitter-color */
   --devtools-splitter-color: #dde1e4;
 }
 
-:root[devtoolstheme="dark"],
-:root[devtoolstheme="firebug"] {
+#content[devtoolstheme="dark"] {
   --devtools-splitter-color: #42484f;
 }