--- a/devtools/client/framework/devtools-browser.js
+++ b/devtools/client/framework/devtools-browser.js
@@ -141,17 +141,20 @@ var gDevToolsBrowser = exports.gDevTools
   updateDevtoolsThemeAttribute: function(win) {
     // Set an attribute on root element of each window to make it possible
     // to change colors based on the selected devtools theme.
     let devtoolsTheme = Services.prefs.getCharPref("devtools.theme");
     if (devtoolsTheme != "dark") {
       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:
     // 1) toolbox changes to dark, and the light compact theme was applied.
     //    Switch to the dark compact theme.
     // 2) toolbox changes to light or firebug, and the dark compact theme was applied.
     //    Switch to the light compact theme.
     // 3) No compact theme was applied. Do nothing.

--- a/devtools/client/framework/test/browser_toolbox_theme.js
+++ b/devtools/client/framework/test/browser_toolbox_theme.js
@@ -12,26 +12,32 @@ registerCleanupFunction(() => {
   // Set preferences back to their original values
   Services.prefs.clearUserPref(PREF_DEVTOOLS_THEME);
   LightweightThemeManager.currentTheme = null;
 });
 
 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() {
   if (!AppConstants.INSTALL_COMPACT_THEMES) {
     ok(true, "No need to run this test since themes aren't installed");
     return;
   }
 

--- a/devtools/client/shared/developer-toolbar.js
+++ b/devtools/client/shared/developer-toolbar.js
@@ -928,18 +928,18 @@ OutputPanel.prototype._init = function (
 
   return deferred.promise;
 };
 
 /* Copy the current devtools theme attribute into the iframe,
    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);
   }
 };
 
 /**
  * Prevent the popup from hiding if it is not permitted via this.canHide.
  */
 OutputPanel.prototype._onpopuphiding = function (ev) {
@@ -1248,18 +1248,18 @@ TooltipPanel.prototype._init = function 
 
   return deferred.promise;
 };
 
 /* Copy the current devtools theme attribute into the iframe,
    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);
   }
 };
 
 /**
  * Prevent the popup from hiding if it is not permitted via this.canHide.
  */
 TooltipPanel.prototype._onpopuphiding = function (ev) {

--- a/devtools/client/themes/commandline.inc.css
+++ b/devtools/client/themes/commandline.inc.css
@@ -4,29 +4,29 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 %endif
 
 /* Developer toolbar */
 
 /* 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 */
   --gcli-input-color: #393f4c; /* --theme-body-color */
   --gcli-border-color: #dde1e4; /* --theme-splitter-color */
   --selection-background: #4c9ed9; /* --theme-selection-background */
   --selection-color: #f5f7fa; /* --theme-selection-color */
   --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
   --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 */
   --gcli-input-color: #b6babf; /* --theme-body-color-alt */
   --gcli-border-color: #454d5d; /* --theme-splitter-color */
   --selection-background: #5675b9; /* --theme-selection-background */
   --selection-color: #f5f7fa; /* --theme-selection-color */
   --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme); /* --theme-command-line-image */
@@ -49,28 +49,28 @@
   padding: 0 10px;
   width: 32px;
 }
 
 .developer-toolbar-button > image {
   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);
 }
 
 .developer-toolbar-button > .toolbarbutton-icon {
   width: 16px;
   height: 16px;
 }
 
 /* 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);
 }
 
 #developer-toolbar-toolbox-button {
   list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
 

--- a/devtools/client/themes/splitters.css
+++ b/devtools/client/themes/splitters.css
@@ -15,23 +15,22 @@
   --devtools-splitter-top-width: 2px;
   --devtools-splitter-bottom-width: 2px;
 
   /* Small draggable area on inline-start to avoid overlaps on scrollbars.*/
   --devtools-splitter-inline-start-width: 1px;
   --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;
 }
 
 .devtools-horizontal-splitter,
 .devtools-side-splitter {
   -moz-appearance: none;
   background-image: none;
   border: 0;