Backed out changeset a99f7690feea (bug 864562)
authorSebastian Hengst <archaeopteryx@coole-files.de>
Thu, 23 Feb 2017 19:33:31 +0100
changeset 373540 64df634e26a435ba4243e86967dadd948a5c00a0
parent 373539 b4a3f056216c271ba4955c575cbe655d469ed941
child 373541 010d89bb2adbe319c7ddff7e3301846d5c67f22a
push id10863
push userjlorenzo@mozilla.com
push dateMon, 06 Mar 2017 23:02:23 +0000
treeherdermozilla-aurora@0931190cd725 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs864562
milestone54.0a1
backs outa99f7690feea3ed9eb216edd7986ba7e8eb946e7
Backed out changeset a99f7690feea (bug 864562)
browser/base/content/browser-addons.js
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/windows/browser.css
toolkit/modules/LightweightThemeConsumer.jsm
--- a/browser/base/content/browser-addons.js
+++ b/browser/base/content/browser-addons.js
@@ -793,17 +793,17 @@ var LightWeightThemeWebInstaller = {
 /*
  * Listen for Lightweight Theme styling changes and update the browser's theme accordingly.
  */
 var LightweightThemeListener = {
   init() {
     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.getPropertyValue("--lwt-header-image"));
+      this.updateStyleSheet(document.documentElement.style.backgroundImage);
   },
 
   uninit() {
     Services.obs.removeObserver(this, "lightweight-theme-styling-update");
     Services.obs.removeObserver(this, "lightweight-theme-optimized");
   },
 
   /**
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -37,22 +37,16 @@
   --arrowpanel-dimmed-further: hsla(0,0%,80%,.45);
   --arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
 
   --urlbar-separator-color: ThreeDShadow;
 
   --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 */
 }
 
 #main-menubar {
   -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
 }
 
@@ -128,21 +122,16 @@
   min-height: 30px;
 }
 
 #browser-bottombox {
   /* opaque for layers optimization */
   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 {
   margin: 0;
   padding: 2px 3px;
 }
 
 toolbarbutton.bookmark-item:not(.subviewbutton):not(:hover):not(:active):not([open]) {
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -48,22 +48,16 @@
   --arrowpanel-dimmed-further: hsla(210,4%,10%,.12);
   --arrowpanel-dimmed-even-further: hsla(210,4%,10%,.17);
 
   --urlbar-separator-color: hsla(0,0%,16%,.2);
 
   --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;
 }
 
 #navigator-toolbox::after {
   -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
   content: "";
@@ -3358,21 +3352,16 @@ menulist.translate-infobar-element > .me
      position and padding for the private browsing indicator. */
   display: -moz-box;
 }
 
 #TabsToolbar > .private-browsing-indicator:-moz-locale-dir(rtl) {
   -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 {
   font-size: 1.18rem;
   line-height: 2rem;
 }
 
 #UITourTooltipClose {
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -78,22 +78,16 @@ toolbar:-moz-lwtheme {
 
   --toolbarbutton-active-background: rgba(70%,70%,70%,.25);
   --toolbarbutton-active-bordercolor: rgba(0,0,0,.3);
   --toolbarbutton-active-boxshadow: 0 0 2px rgba(0,0,0,.6) inset;
 
   --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 */
 }
 
 #main-menubar {
   -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
 }
 
@@ -339,21 +333,16 @@ toolbar:-moz-lwtheme {
 #personal-bookmarks {
   min-height: 24px;
 }
 
 #print-preview-toolbar:not(:-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;
 }
 
 /* ::::: titlebar ::::: */
 
 #main-window[sizemode="normal"] > #titlebar {
   -moz-appearance: -moz-window-titlebar;
--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -99,36 +99,37 @@ LightweightThemeConsumer.prototype = {
 
     let root = this._doc.documentElement;
     let active = !!aData.headerURL;
     let stateChanging = (active != this._active);
 
     // 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("--lwt-textcolor");
-    root.style.removeProperty("--lwt-accentcolor");
+    root.style.removeProperty("color");
+    root.style.removeProperty("background-color");
     if (active) {
-      root.style.setProperty("--lwt-textcolor", aData.textcolor || "black");
-      root.style.setProperty("--lwt-accentcolor", aData.accentcolor || "white");
+      root.style.color = aData.textcolor || "black";
+      root.style.backgroundColor = 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");
       root.setAttribute("lwtheme", "true");
     } else {
       root.removeAttribute("lwthemetextcolor");
       root.removeAttribute("lwtheme");
     }
 
     this._active = active;
 
-    _setImage(root, active, aData.headerURL, "--lwt-header-image");
+    _setImage(root, active, aData.headerURL);
     if (this._footerId) {
       let footer = this._doc.getElementById(this._footerId);
-      _setImage(footer, active, aData.footerURL, "--lwt-footer-image");
+      footer.style.backgroundColor = active ? aData.accentcolor || "white" : "";
+      _setImage(footer, active, aData.footerURL);
       if (active && aData.footerURL)
         footer.setAttribute("lwthemefooter", "true");
       else
         footer.removeAttribute("lwthemefooter");
     }
 
     // On OS X, we extend the lightweight theme into the titlebar, which means setting
     // the chromemargin attribute. Some XUL applications already draw in the titlebar,
@@ -151,21 +152,18 @@ LightweightThemeConsumer.prototype = {
         }
       }
     }
     Services.obs.notifyObservers(this._win, "lightweight-theme-window-updated",
                                  JSON.stringify(aData));
   }
 }
 
-function _setImage(aElement, aActive, aURL, aVariableName) {
-  if (aActive && aURL) {
-    aElement.style.setProperty(aVariableName, `url("${aURL.replace(/"/g, '\\"')}")`);
-  } else {
-    aElement.style.removeProperty(aVariableName);
-  }
+function _setImage(aElement, aActive, aURL) {
+  aElement.style.backgroundImage =
+    (aActive && aURL) ? 'url("' + aURL.replace(/"/g, '\\"') + '")' : "";
 }
 
 function _parseRGB(aColorString) {
   var rgb = aColorString.match(/^rgba?\((\d+), (\d+), (\d+)/);
   rgb.shift();
   return rgb.map(x => parseInt(x));
 }