Bug 1366405 - Stop using -moz-appearance: -moz-win-glass with the Windows 10 default theme. r=nhnt11, a=ritu
authorDão Gottwald <dao@mozilla.com>
Tue, 03 Oct 2017 01:43:00 -0400
changeset 677820 7c374b1db6da28f5cd12ca47553f49ebb201949a
parent 677819 18045d83cbb225c43b093cf10107c5ce553532c2
child 677821 569466abab14517782edd37612651df4d4d9a1ba
push id83805
push userbmo:rail@mozilla.com
push dateTue, 10 Oct 2017 19:01:30 +0000
reviewersnhnt11, ritu
bugs1366405
milestone57.0
Bug 1366405 - Stop using -moz-appearance: -moz-win-glass with the Windows 10 default theme. r=nhnt11, a=ritu
browser/themes/windows/browser-aero.css
browser/themes/windows/compacttheme.css
toolkit/modules/LightweightThemeConsumer.jsm
toolkit/themes/windows/global/global.css
--- a/browser/themes/windows/browser-aero.css
+++ b/browser/themes/windows/browser-aero.css
@@ -18,31 +18,27 @@
 @media (-moz-windows-default-theme) {
   .menu-accel,
   .menu-iconic-accel {
     color: graytext;
   }
 }
 
 @media (-moz-windows-compositor) {
-  #main-window {
-    -moz-appearance: -moz-win-glass;
-  }
-
-
-  /* On win10, if we don't set this on the entire browser container including
-   * the sidebar, if the sidebar is open the accent color bleeds through in
-   * the titlebar */
-  #browser {
-    -moz-appearance: -moz-win-exclude-glass;
-  }
-
   @media not all and (-moz-os-version: windows-win7) {
     @media not all and (-moz-os-version: windows-win8) {
       @media (-moz-windows-default-theme) {
+        :root[sizemode=normal][tabsintitlebar] {
+          border-top: 1px solid -moz-win-accentcolor;
+        }
+
+        :root[sizemode=normal][tabsintitlebar]:-moz-window-inactive {
+          border-top-color: rgba(0,0,0,.2);
+        }
+
         :root:not(:-moz-lwtheme) {
           background-color: hsl(0, 0%, 78%);
         }
 
         @media (-moz-windows-accent-color-in-titlebar: 0) {
           :root[tabsintitlebar]:not(:-moz-lwtheme) {
             background-color: hsl(235,33%,19%);
             --titlebar-text-color: hsl(240,9%,98%);
@@ -61,16 +57,24 @@
              titlebar text change for inactive windows. */
           opacity: .6;
         }
       }
 
       @media (-moz-windows-default-theme: 0) {
         :root {
           background-color: transparent;
+          -moz-appearance: -moz-win-glass;
+        }
+
+        /* On win10, if we don't set this on the entire browser container including
+         * the sidebar, if the sidebar is open the accent color bleeds through in
+         * the titlebar */
+        #browser {
+          -moz-appearance: -moz-win-exclude-glass;
         }
       }
 
       #titlebar-buttonbox,
       .titlebar-button {
         -moz-appearance: none !important;
       }
 
@@ -225,37 +229,33 @@
           list-style-image: url(chrome://browser/skin/window-controls/close-highcontrast.svg);
         }
       }
     }
   }
 
   @media (-moz-os-version: windows-win7),
          (-moz-os-version: windows-win8) {
-    #main-window[sizemode="maximized"] #titlebar-buttonbox {
-      margin-inline-end: 3px;
+    :root {
+      background-color: transparent;
+      -moz-appearance: -moz-win-borderless-glass;
     }
 
-    #main-window {
-      background-color: transparent;
-      -moz-appearance: -moz-win-borderless-glass;
+    :root[sizemode="maximized"] #titlebar-buttonbox {
+      margin-inline-end: 3px;
     }
 
     /* These should be hidden w/ glass enabled. Windows draws its own buttons. */
     .titlebar-button {
       display: none;
     }
 
     /* The borders on the glass frame are ours, and inside #browser, and on
      * win7 we want to make sure they are "glassy", so we can't use #browser
      * as the exclude-glass container. We use #appcontent instead. */
-    #browser {
-      -moz-appearance: none;
-    }
-
     #appcontent {
       -moz-appearance: -moz-win-exclude-glass;
     }
   }
 
   @media (-moz-os-version: windows-win8) {
     /* Artificially draw window borders that are covered by lwtheme, see bug 591930.
      * Borders for win7 are below, win10 doesn't need them. */
--- a/browser/themes/windows/compacttheme.css
+++ b/browser/themes/windows/compacttheme.css
@@ -15,22 +15,16 @@
    broken. So instead just show the normal titlebar in that case, and override
    the window color as transparent when the compositor is available. */
 @media (-moz-windows-compositor: 0) {
   #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
     visibility: visible;
   }
 }
 
-@media (-moz-windows-compositor) {
-  #main-window {
-    background: transparent !important;
-  }
-}
-
 #toolbar-menubar {
   text-shadow: none !important;
 }
 
 @media (-moz-os-version: windows-win7) {
   @media (-moz-windows-default-theme) {
     /* Always show light toolbar elements on aero surface. */
     #TabsToolbar {
@@ -59,16 +53,22 @@
     background-color: rgba(255,255,255,.5);
     color: black;
     border-radius: 4px;
   }
 }
 
 @media (-moz-os-version: windows-win7),
        (-moz-os-version: windows-win8) {
+  @media (-moz-windows-compositor) {
+    #main-window {
+      background: transparent !important;
+    }
+  }
+
   /* Always show full-height tab separators on tabs with borders. */
   .tabbrowser-tab::before {
     border-image: none !important;
   }
 
   /* Show the tabs toolbar background color inside tabs on Win 7. */
   .tab-background:not([selected=true]) {
     background-color: var(--chrome-background-color) !important;
--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -117,19 +117,19 @@ LightweightThemeConsumer.prototype = {
     let root = this._doc.documentElement;
     let active = !!aData.headerURL;
 
     // 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-text-color");
     root.style.removeProperty("--lwt-accent-color");
-    let textcolor = aData.textcolor || "black";
+    let textcolor = this._sanitizeCSSColor(aData.textcolor) || "black";
     _setProperty(root, active, "--lwt-text-color", textcolor);
-    _setProperty(root, active, "--lwt-accent-color", aData.accentcolor || "white");
+    _setProperty(root, active, "--lwt-accent-color", this._sanitizeCSSColor(aData.accentcolor) || "white");
     if (active) {
       let dummy = this._doc.createElement("dummy");
       dummy.style.color = textcolor;
       let [r, g, b] = _parseRGB(this._doc.defaultView.getComputedStyle(dummy).color);
       let luminance = 0.2125 * r + 0.7154 * g + 0.0721 * b;
       root.setAttribute("lwthemetextcolor", luminance <= 110 ? "dark" : "bright");
       root.setAttribute("lwtheme", "true");
     } else {
@@ -156,16 +156,29 @@ LightweightThemeConsumer.prototype = {
 
     if (active && aData.footerURL)
       root.setAttribute("lwthemefooter", "true");
     else
       root.removeAttribute("lwthemefooter");
 
     Services.obs.notifyObservers(this._win, "lightweight-theme-window-updated",
                                  JSON.stringify(aData));
+  },
+
+  _sanitizeCSSColor(cssColor) {
+    // style.color normalizes color values and rejects invalid ones, so a
+    // simple round trip gets us a sanitized color value.
+    let span = this._doc.createElementNS("http://www.w3.org/1999/xhtml", "span");
+    span.style.color = cssColor;
+    cssColor = span.style.color;
+    if (cssColor == "transparent" ||
+        cssColor == "rgba(0, 0, 0, 0)") {
+      return "";
+    }
+    return cssColor;
   }
 }
 
 function _setImage(aRoot, aActive, aVariableName, aURLs) {
   if (aURLs && !Array.isArray(aURLs)) {
     aURLs = [aURLs];
   }
   _setProperty(aRoot, aActive, aVariableName, aURLs && aURLs.map(v => `url("${v.replace(/"/g, '\\"')}")`).join(","));
--- a/toolkit/themes/windows/global/global.css
+++ b/toolkit/themes/windows/global/global.css
@@ -148,20 +148,16 @@ sidebarheader > label {
 
 toolbar[mode="text"] .toolbarbutton-text {
   padding: 0 !important;
   margin: 3px 5px !important;
 }
 
 /* ::::: miscellaneous formatting ::::: */
 
-:root:-moz-lwtheme {
-  -moz-appearance: none;
-}
-
 :root:-moz-lwtheme-darktext {
   text-shadow: 0 -0.5px 1.5px white;
 }
 
 :root:-moz-lwtheme-brighttext {
   text-shadow: 1px 1px 1.5px black;
 }