Bug 1003295 - Win8: Change text color on inactive tabs depending on window color. r=mconley, r=philipp, ui-r=josiah, a=Standard8
authorRichard Marti <richard.marti@gmail.com>
Sat, 10 May 2014 10:56:43 +0200
changeset 19989 08b288b58838b863455dda29a06de0b92fa41f2c
parent 19988 144a6741d45709c6d6e79bc6ba731acfc1b9dfa6
child 19990 00b489b31ed1540c5dc7d49955f3783b8e2e6580
push idunknown
push userunknown
push dateunknown
reviewersmconley, philipp, josiah, Standard8
bugs1003295
Bug 1003295 - Win8: Change text color on inactive tabs depending on window color. r=mconley, r=philipp, ui-r=josiah, a=Standard8
calendar/base/themes/windows/win-aero/lightning-toolbar.css
calendar/base/themes/windows/win-aero/lightning.css
mail/base/content/msgMail3PaneWindow.js
mail/base/modules/Windows8WindowFrameColor.jsm
mail/base/modules/moz.build
mail/themes/windows/mail/primaryToolbar-aero.css
mail/themes/windows/mail/tabmail-aero.css
--- a/calendar/base/themes/windows/win-aero/lightning-toolbar.css
+++ b/calendar/base/themes/windows/win-aero/lightning-toolbar.css
@@ -84,24 +84,44 @@
 }
 
 @media (-moz-windows-glass) {
   #calendar-toolbox:not(:-moz-lwtheme) {
     border-bottom-color: #AABCCF;
   }
 }
 
-@media (-moz-windows-compositor) {
+@media (-moz-windows-glass) {
   #tabbar-toolbar:not(:-moz-lwtheme-darktext) #lightning-button-calendar,
   #tabbar-toolbar:not(:-moz-lwtheme-darktext) #lightning-button-tasks {
     list-style-image: url(chrome://lightning/skin/mode-switch-icons-inverted.png);
   }
 
-  #tabbar-toolbar:not(:-moz-lwtheme-darktext) > #extractTaskButton,
-  #tabbar-toolbar:not(:-moz-lwtheme-darktext) > #extractEventButton {
+  #tabbar-toolbar:not(:-moz-lwtheme-darktext) #extractTaskButton,
+  #tabbar-toolbar:not(:-moz-lwtheme-darktext) #extractEventButton {
+    list-style-image: url(chrome://calendar/skin/toolbar-aero-inverted.png);
+  }
+}
+
+@media (-moz-os-version: windows-win8) {
+  #messengerWindow[darkwindowframe="true"]
+  #tabbar-toolbar:not(:-moz-lwtheme):not(:-moz-window-inactive)
+  #lightning-button-calendar,
+  #messengerWindow[darkwindowframe="true"]
+  #tabbar-toolbar:not(:-moz-lwtheme):not(:-moz-window-inactive)
+  #lightning-button-tasks {
+    list-style-image: url(chrome://lightning/skin/mode-switch-icons-inverted.png);
+  }
+
+  #messengerWindow[darkwindowframe="true"]
+  #tabbar-toolbar:not(:-moz-lwtheme):not(:-moz-window-inactive)
+  #extractTaskButton,
+  #messengerWindow[darkwindowframe="true"]
+  #tabbar-toolbar:not(:-moz-lwtheme):not(:-moz-window-inactive)
+  #extractEventButton {
     list-style-image: url(chrome://calendar/skin/toolbar-aero-inverted.png);
   }
 }
 
 #mail-bar3:-moz-lwtheme-brighttext #lightning-button-calendar,
 #mail-bar3:-moz-lwtheme-brighttext #lightning-button-tasks,
 #tabbar-toolbar:-moz-lwtheme-brighttext #lightning-button-calendar,
 #tabbar-toolbar:-moz-lwtheme-brighttext #lightning-button-tasks {
--- a/calendar/base/themes/windows/win-aero/lightning.css
+++ b/calendar/base/themes/windows/win-aero/lightning.css
@@ -30,23 +30,34 @@
 }
 
 #button-newmsg #newMsgButton-calendar-menuitem,
 #button-newmsg #newMsgButton-task-menuitem,
 #calendar-show-todaypane-panel > #calendar-status-todaypane-button > stack > .toolbarbutton-icon-begin {
   list-style-image: url(chrome://calendar/skin/toolbar-small-aero.png);
 }
 
-@media (-moz-windows-compositor) {
+@media (-moz-windows-glass) {
   #tabbar-toolbar:not(:-moz-lwtheme-darktext) #calendar-tab-button,
   #tabbar-toolbar:not(:-moz-lwtheme-darktext) #task-tab-button {
     list-style-image: url(chrome://lightning/skin/mode-switch-icons-inverted.png);
   }
 }
 
+@media (-moz-os-version: windows-win8) {
+  #messengerWindow[darkwindowframe="true"]
+  #tabbar-toolbar:not(:-moz-lwtheme):not(:-moz-window-inactive)
+  #calendar-tab-button,
+  #messengerWindow[darkwindowframe="true"]
+  #tabbar-toolbar:not(:-moz-lwtheme):not(:-moz-window-inactive)
+  #task-tab-button {
+    list-style-image: url(chrome://lightning/skin/mode-switch-icons-inverted.png);
+  }
+}
+
 #tabbar-toolbar:-moz-lwtheme-brighttext #calendar-tab-button,
 #tabbar-toolbar:-moz-lwtheme-brighttext #task-tab-button {
   list-style-image: url(chrome://lightning/skin/mode-switch-icons-inverted.png);
 }
 
 .imipAcceptButton {
   list-style-image: url(chrome://lightning/skin/imip-aero.png);
   -moz-image-region: rect(0px 16px 16px 0px);
--- a/mail/base/content/msgMail3PaneWindow.js
+++ b/mail/base/content/msgMail3PaneWindow.js
@@ -394,16 +394,43 @@ function OnLoadMessenger()
   // Rig up our TabsInTitlebar early so that we can catch any resize events.
   TabsInTitlebar.init();
   // Listen for Lightweight Theme styling changes and update the theme accordingly.
   LightweightThemeListener.init();
   // update the pane config before we exit onload otherwise the user may see a flicker if we poke the document
   // in delayedOnLoadMessenger...
   UpdateMailPaneConfig(false);
   document.loadBindingDocument('chrome://global/content/bindings/textbox.xml');
+
+#ifdef XP_WIN
+  // On Win8 set an attribute when the window frame color is too dark for black text.
+  if (window.matchMedia("(-moz-os-version: windows-win8)").matches &&
+      window.matchMedia("(-moz-windows-default-theme)").matches) {
+    let windows8WindowFrameColor = Cu.import("resource:///modules/Windows8WindowFrameColor.jsm", {}).Windows8WindowFrameColor;
+    let windowFrameColor = windows8WindowFrameColor.get();
+
+    // Formula from W3C's WCAG 2.0 spec's color ratio and relative luminance,
+    // section 1.3.4, http://www.w3.org/TR/WCAG20/ .
+    windowFrameColor = windowFrameColor.map((color) => {
+      if (color <= 10) {
+        return color / 255 / 12.92;
+      }
+      return Math.pow(((color / 255) + 0.055) / 1.055, 2.4);
+    });
+    let backgroundLuminance = windowFrameColor[0] * 0.2126 +
+                              windowFrameColor[1] * 0.7152 +
+                              windowFrameColor[2] * 0.0722;
+    let foregroundLuminance = 0; // Default to black for foreground text.
+    let contrastRatio = (backgroundLuminance + 0.05) / (foregroundLuminance + 0.05);
+    if (contrastRatio < 3) {
+      document.documentElement.setAttribute("darkwindowframe", "true");
+    }
+  }
+#endif
+
   // Set a sane starting width/height for all resolutions on new profiles.
   // Do this before the window loads.
   if (!document.documentElement.hasAttribute("width"))
   {
     // Prefer 1024xfull height.
     let defaultHeight = screen.availHeight;
     let defaultWidth = (screen.availWidth <= 1024) ? screen.availWidth : 1024;
 
new file mode 100644
--- /dev/null
+++ b/mail/base/modules/Windows8WindowFrameColor.jsm
@@ -0,0 +1,33 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+const {classes: Cc, interfaces: Ci, utils: Cu, results: Cr} = Components;
+
+this.EXPORTED_SYMBOLS = ["Windows8WindowFrameColor"];
+
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+Cu.import("resource://gre/modules/WindowsRegistry.jsm");
+
+const Windows8WindowFrameColor = {
+  _windowFrameColor: null,
+
+  get: function() {
+    if (this._windowFrameColor)
+      return this._windowFrameColor;
+
+    let windowFrameColor = WindowsRegistry.readRegKey(Ci.nsIWindowsRegKey.ROOT_KEY_CURRENT_USER,
+                                                      "Software\\Microsoft\\Windows\\DWM",
+                                                      "ColorizationColor");
+    // The color returned from the Registry is in decimal form.
+    let windowFrameColorHex = windowFrameColor.toString(16);
+    // Zero-pad the number just to make sure that it is 8 digits.
+    windowFrameColorHex = ("00000000" + windowFrameColorHex).substr(-8);
+    let windowFrameColorArray = windowFrameColorHex.match(/../g);
+    let [pixelA, pixelR, pixelG, pixelB] = windowFrameColorArray.map(function(val) parseInt(val, 16));
+
+    return this._windowFrameColor = [pixelR, pixelG, pixelB];
+  },
+};
--- a/mail/base/modules/moz.build
+++ b/mail/base/modules/moz.build
@@ -14,10 +14,11 @@ EXTRA_JS_MODULES += [
     'MailUtils.js',
     'mailViewManager.js',
     'MsgHdrSyntheticView.js',
     'oauth.jsm',
     'quickFilterManager.js',
     'searchSpec.js',
     'sessionStoreManager.js',
     'summaryFrameManager.js',
+    'Windows8WindowFrameColor.jsm',
 ]
 
--- a/mail/themes/windows/mail/primaryToolbar-aero.css
+++ b/mail/themes/windows/mail/primaryToolbar-aero.css
@@ -591,24 +591,16 @@ toolbox[labelalign="end"] > toolbar[mode
 
   #tabs-toolbar {
     -moz-box-ordinal-group: 10;
   }
 
   #mail-toolbar-menubar2 {
     -moz-box-ordinal-group: 20;
   }
-
-  #tabbar-toolbar:not(:-moz-lwtheme-darktext) .toolbarbutton-1 {
-    list-style-image: url("chrome://messenger/skin/icons/mail-toolbar-inverted.png");
-  }
-
-  #tabbar-toolbar:not(:-moz-lwtheme-darktext) .toolbarbutton-1 .dropmarker-icon {
-    list-style-image: url("chrome://messenger/skin/icons/toolbarbutton-arrow-inverted.png");
-  }
 }
 
 @media (-moz-windows-glass) {
   #mail-toolbox:not(:-moz-lwtheme),
   .contentTabToolbox:not(:-moz-lwtheme) {
     border-bottom-color: #AABCCF;
   }
 
@@ -628,16 +620,40 @@ toolbox[labelalign="end"] > toolbar[mode
     height: 0;
     margin: 0 60px; /* (30px + 30px) from box-shadow */
     position: absolute;
     pointer-events: none;
     top: 50%;
     width: -moz-available;
     z-index: -1;
   }
+
+  #tabbar-toolbar:not(:-moz-lwtheme-darktext) .toolbarbutton-1 {
+    list-style-image: url("chrome://messenger/skin/icons/mail-toolbar-inverted.png");
+  }
+
+  #tabbar-toolbar:not(:-moz-lwtheme-darktext) .toolbarbutton-1 .dropmarker-icon {
+    list-style-image: url("chrome://messenger/skin/icons/toolbarbutton-arrow-inverted.png");
+  }
+}
+
+@media (-moz-os-version: windows-win8) {
+  #messengerWindow[darkwindowframe="true"]
+  #tabbar-toolbar:not(:-moz-lwtheme):not(:-moz-window-inactive)
+  .toolbarbutton-1,
+  #tabbar-toolbar:-moz-lwtheme-brighttext .toolbarbutton-1 {
+    list-style-image: url("icons/mail-toolbar-inverted.png");
+  }
+
+  #messengerWindow[darkwindowframe="true"]
+  #tabbar-toolbar:not(:-moz-lwtheme):not(:-moz-window-inactive)
+  .toolbarbutton-1 .dropmarker-icon,
+  #tabbar-toolbar:-moz-lwtheme-brighttext .toolbarbutton-1 .dropmarker-icon {
+    list-style-image: url("icons/toolbarbutton-arrow-inverted.png");
+  }
 }
 
 @media not all and (-moz-windows-compositor) {
   @media (-moz-windows-default-theme) {
     #messengerWindow {
       background-color: rgb(185, 209, 234);
     }
     #messengerWindow:-moz-window-inactive {
--- a/mail/themes/windows/mail/tabmail-aero.css
+++ b/mail/themes/windows/mail/tabmail-aero.css
@@ -59,16 +59,21 @@
   }
 }
 
 #messengerWindow[tabsintitlebar]
 .tabmail-tab:not([selected]):not(:-moz-lwtheme) {
   color: CaptionText;
 }
 
+#messengerWindow[tabsintitlebar]
+.tabmail-tab:not([selected]):not(:-moz-lwtheme):-moz-window-inactive {
+  color: InactiveCaptionText;
+}
+
 .tabmail-tab[busy],
 .tabmail-tab[thinking] {
   list-style-image: url("chrome://messenger/skin/icons/loading.png") !important;
   -moz-image-region: auto !important;
 }
 
 .tabmail-tab[type="glodaSearch"] {
   list-style-image: url("chrome://global/skin/icons/Search-glass.png");
@@ -205,27 +210,52 @@ tabpanels {
   display: none;
 }
 
 .tabs-alltabs-button > .toolbarbutton-icon {
   margin: 3px 0;
 }
 
 /* Apply only on Win8 */
-@media (-moz-windows-compositor) {
-  @media not all and (-moz-windows-glass) {
-    .tabs-alltabs-button:not(:-moz-lwtheme) {
-      list-style-image: url(chrome://messenger/skin/icons/toolbarbutton-arrow.png);
-      width: 22px;
-      -moz-padding-start: 6px;
-    }
+@media (-moz-windows-default-theme) and (-moz-os-version: windows-win8) {
+  #messengerWindow[darkwindowframe="true"]
+  #tabs-toolbar:not(:-moz-lwtheme):not(:-moz-window-inactive),
+  #messengerWindow[darkwindowframe="true"]
+  .tabmail-tab:not([selected="true"]):not(:-moz-lwtheme):not(:-moz-window-inactive) {
+    color: white;
+  }
+
+  #messengerWindow[darkwindowframe="true"] .tabmail-tab:not([selected="true"])
+  .tab-close-button:not(:-moz-any(:hover,:active)):not(:-moz-lwtheme):not(:-moz-window-inactive) {
+    -moz-image-region: rect(0, 64px, 16px, 48px);
+  }
 
-    .tabs-alltabs-button > .toolbarbutton-icon {
-      margin: 4px 0 0;
-    }
+  #messengerWindow[darkwindowframe="true"] .tabmail-arrowscrollbox >
+  .scrollbutton-up:not(:-moz-lwtheme):not(:-moz-window-inactive),
+  #messengerWindow[darkwindowframe="true"] .tabmail-arrowscrollbox
+  > stack > .scrollbutton-down:not(:-moz-lwtheme):not(:-moz-window-inactive) {
+    list-style-image: url(tabs/arrow-left-inverted.png);
+  }
+
+  #messengerWindow[darkwindowframe="true"]
+  .tabs-alltabs-button:not(:-moz-lwtheme):-moz-window-inactive {
+    list-style-image: url(icons/toolbarbutton-arrow.png);
+    -moz-image-region: rect(0, 9px, 7px, 0);
+    padding-top: 1px;
+    -moz-padding-start: 5px;
+    -moz-padding-end: 5px;
+  }
+
+  #messengerWindow[darkwindowframe="true"]
+  .tabs-alltabs-button:not(:-moz-lwtheme):not(:-moz-window-inactive) {
+    list-style-image: url(icons/mainwindow-dropdown-arrow-inverted.png);
+  }
+
+  .tabs-alltabs-button > .toolbarbutton-icon {
+    margin: 4px 0 0;
   }
 }
 
 .tabs-alltabs-button > .toolbarbutton-menu-dropmarker {
   display: none;
 }
 
 /**