Bug 864562 - Move remaining LWT inline styles to CSS variables. r=mikedeboer

MozReview-Commit-ID: 9ETddCw9w14

--HG--
extra : rebase_source : 3c42715d64f0b88dcf3a7fd2cad1f97358c3ea0d

browser/base/content/browser-addons.js

@@ -798,7 +798,7 @@ var LightweightThemeListener = {
     Services.obs.addObserver(this, "lightweight-theme-styling-update", false);
     Services.obs.addObserver(this, "lightweight-theme-optimized", false);
     if (document.documentElement.hasAttribute("lwtheme"))
-      this.updateStyleSheet(document.documentElement.style.backgroundImage);
+      this.updateStyleSheet(document.documentElement.style.getPropertyValue("--lwt-header-image"));
   },
 
   uninit() {

browser/themes/linux/browser.css

@@ -44,6 +44,12 @@
   --lwt-header-image: none;
 }
 
+:root {
+  color: var(--lwt-textcolor);
+  background-color: var(--lwt-accentcolor);
+  background-image: var(--lwt-header-image);
+}
+
 #menubar-items {
   -moz-box-orient: vertical; /* for flex hack */
 }
@@ -129,6 +135,11 @@
   background-color: -moz-Dialog;
 }
 
+#browser-bottombox:-moz-lwtheme {
+  background-color: var(--lwt-accentcolor);
+  background-image: var(--lwt-header-image);
+}
+
 /* Places toolbar */
 toolbarbutton.bookmark-item:not(.subviewbutton),
 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {

browser/themes/osx/browser.css

@@ -55,6 +55,12 @@
   --lwt-header-image: none;
 }
 
+:root {
+  color: var(--lwt-textcolor);
+  background-color: var(--lwt-accentcolor);
+  background-image: var(--lwt-header-image);
+}
+
 #urlbar:-moz-lwtheme:not([focused="true"]),
 .searchbar-textbox:-moz-lwtheme:not([focused="true"]) {
   opacity: .9;
@@ -3329,6 +3335,11 @@ menulist.translate-infobar-element > .menulist-dropmarker {
   -moz-box-ordinal-group: 0;
 }
 
+#browser-bottombox:-moz-lwtheme {
+  background-color: var(--lwt-accentcolor);
+  background-image: var(--lwt-footer-image);
+}
+
 %include ../shared/UITour.inc.css
 
 #UITourTooltipDescription {

browser/themes/windows/browser.css

@@ -84,6 +84,12 @@ toolbar:-moz-lwtheme {
   --toolbarbutton-checkedhover-backgroundcolor: rgba(85%,85%,85%,.25);
 }
 
+:root {
+  color: var(--lwt-textcolor);
+  background-color: var(--lwt-accentcolor);
+  background-image: var(--lwt-header-image);
+}
+
 #menubar-items {
   -moz-box-orient: vertical; /* for flex hack */
 }
@@ -339,6 +345,11 @@ toolbar:-moz-lwtheme {
   -moz-appearance: toolbox;
 }
 
+#browser-bottombox:-moz-lwtheme {
+  background-color: var(--lwt-accentcolor);
+  background-image: var(--lwt-footer-image);
+}
+
 #browser-bottombox:not(:-moz-lwtheme) {
   background-color: -moz-dialog;
 }

toolkit/modules/LightweightThemeConsumer.jsm

@@ -104,11 +104,11 @@ LightweightThemeConsumer.prototype = {
     // We need to clear these either way: either because the theme is being removed,
     // or because we are applying a new theme and the data might be bogus CSS,
     // so if we don't reset first, it'll keep the old value.
-    root.style.removeProperty("color");
-    root.style.removeProperty("background-color");
+    root.style.removeProperty("--lwt-textcolor");
+    root.style.removeProperty("--lwt-accentcolor");
     if (active) {
-      root.style.color = aData.textcolor || "black";
-      root.style.backgroundColor = aData.accentcolor || "white";
+      root.style.setProperty("--lwt-textcolor", aData.textcolor || "black");
+      root.style.setProperty("--lwt-accentcolor", aData.accentcolor || "white");
       let [r, g, b] = _parseRGB(this._doc.defaultView.getComputedStyle(root).color);
       let luminance = 0.2125 * r + 0.7154 * g + 0.0721 * b;
       root.setAttribute("lwthemetextcolor", luminance <= 110 ? "dark" : "bright");
@@ -120,11 +120,10 @@ LightweightThemeConsumer.prototype = {
 
     this._active = active;
 
-    _setImage(root, active, aData.headerURL);
+    _setImage(root, active, aData.headerURL, "--lwt-header-image");
     if (this._footerId) {
       let footer = this._doc.getElementById(this._footerId);
-      footer.style.backgroundColor = active ? aData.accentcolor || "white" : "";
-      _setImage(footer, active, aData.footerURL);
+      _setImage(footer, active, aData.footerURL, "--lwt-footer-image");
       if (active && aData.footerURL)
         footer.setAttribute("lwthemefooter", "true");
       else
@@ -157,9 +156,12 @@ LightweightThemeConsumer.prototype = {
   }
 }
 
-function _setImage(aElement, aActive, aURL) {
-  aElement.style.backgroundImage =
-    (aActive && aURL) ? 'url("' + aURL.replace(/"/g, '\\"') + '")' : "";
+function _setImage(aElement, aActive, aURL, aVariableName) {
+  if (aActive && aURL) {
+    aElement.style.setProperty(aVariableName, `url("${aURL.replace(/"/g, '\\"')}")`);
+  } else {
+    aElement.style.removeProperty(aVariableName);
+  }
 }
 
 function _parseRGB(aColorString) {