Bug 1378320 - Use Windows 10 accent color in the title bar when in the foreground. r=jorgk

2017-07-08 22:23:01 +02:00 · 2017-07-08 22:23:01 +02:00 · 31aee4b945
--- a/mail/themes/windows/mail/mailWindow1.css
+++ b/mail/themes/windows/mail/mailWindow1.css
@ -297,13 +297,23 @@ treechildren::-moz-tree-cell-text(imapdeleted) {
    }

    @media (-moz-windows-default-theme) {
-      #messengerWindow[tabsintitlebar] > #navigation-toolbox:not(:-moz-lwtheme) {
-        background-color: #a8cbdb;
+      #navigation-toolbox:not(:-moz-lwtheme) {
+        background-color: #d1d1d1;
      }

-      #messengerWindow:-moz-window-inactive > #navigation-toolbox:not(:-moz-lwtheme),
-      #messengerWindow:not([tabsintitlebar]) > #navigation-toolbox:not(:-moz-lwtheme) {
-        background-color: #d1d1d1;
+      @media (-moz-windows-accent-color-in-titlebar: 0) {
+        #messengerWindow[tabsintitlebar] >
+          #navigation-toolbox:not(:-moz-window-inactive):not(:-moz-lwtheme) {
+          background-color: #a8cbdb;
+        }
+      }
+
+      @media (-moz-windows-accent-color-in-titlebar) {
+        #messengerWindow[tabsintitlebar] >
+          #navigation-toolbox:not(:-moz-window-inactive):not(:-moz-lwtheme) {
+          background-color: -moz-win-accentcolor;
+          color: -moz-win-accentcolortext;
+        }
      }
    }

@ -326,6 +336,14 @@ treechildren::-moz-tree-cell-text(imapdeleted) {
      stroke: black;
    }

+    @media (-moz-windows-default-theme) {
+      @media (-moz-windows-accent-color-in-titlebar) {
+        .titlebar-button:not(:-moz-window-inactive):not(:-moz-lwtheme) {
+          stroke: -moz-win-accentcolortext;
+        }
+      }
+    }
+
    #messengerWindow[sizemode=maximized] .titlebar-button {
      padding-top: 8px;
      padding-bottom: 8px;
@ -647,6 +665,12 @@ treechildren::-moz-tree-cell-text(imapdeleted) {
 }

@media (-moz-os-version: windows-win7) and (-moz-windows-default-theme) {
+  @media (-moz-windows-glass: 0) {
+    #messengerWindow:not([tabsintitlebar]) > #navigation-toolbox:not(:-moz-lwtheme) {
+      background-color: #d1d1d1;
+    }
+  }
+
  menulist {
    border-radius: 2px;
  }
@ -704,6 +728,10 @@ treechildren::-moz-tree-cell-text(imapdeleted) {
 }

@media (-moz-os-version: windows-win8) and (-moz-windows-default-theme) {
+  #messengerWindow:not([tabsintitlebar]) > #navigation-toolbox:not(:-moz-lwtheme) {
+    background-color: #d1d1d1;
+  }
+
  #viewPickerPopup menu[_moz-menuactive="true"],
  #viewPickerPopup menuitem[_moz-menuactive="true"] {
    color: -moz-DialogText;
--- a/mail/themes/windows/mail/messageWindow.css
+++ b/mail/themes/windows/mail/messageWindow.css
@ -19,7 +19,7 @@

 #messagepanebox {
  text-shadow: none;
-  background-color: -moz-dialog;
+  background-color: -moz-Dialog;
 }

 #mail-toolbox:-moz-lwtheme {
@ -58,3 +58,9 @@
    border-top: 1px solid ThreeDShadow;
  }
 }
+
+@media (-moz-os-version: windows-win10) and (-moz-windows-default-theme) {
+  #menubar-items > #mail-menubar > menu {
+    -moz-appearance: menuitem;
+  }
+}
--- a/mail/themes/windows/mail/primaryToolbar.css
+++ b/mail/themes/windows/mail/primaryToolbar.css
@ -27,13 +27,15 @@
  margin-top: 15px;
 }

-#messengerWindow[tabsintitlebar] #mail-menubar > menu:not(:-moz-lwtheme) {
-  color: CaptionText;
-}
+@media (-moz-windows-compositor: 0),
+       (-moz-windows-default-theme: 0) {
+  #messengerWindow[tabsintitlebar] > #navigation-toolbox:not(:-moz-lwtheme) {
+    color: CaptionText;
+  }

-#messengerWindow[tabsintitlebar] #mail-menubar >
-menu:not(:-moz-lwtheme):-moz-window-inactive {
-  color: InactiveCaptionText;
+  #messengerWindow[tabsintitlebar] > #navigation-toolbox:not(:-moz-lwtheme):-moz-window-inactive {
+    color: InactiveCaptionText;
+  }
 }

 #navigation-toolbox {
@ -46,20 +48,21 @@ menu:not(:-moz-lwtheme):-moz-window-inactive {
 }

@media (-moz-os-version: windows-win10) and (-moz-windows-default-theme) {
+
  #tabs-toolbar:not(:-moz-lwtheme) {
    background-image: none;
  }

-  #messengerWindow #mail-menubar > menu {
+  #menubar-items > #mail-menubar > menu {
    -moz-appearance: none;
    border-style: none;
  }

-  #messengerWindow #mail-menubar > menu[_moz-menuactive="true"] {
+  #menubar-items > #mail-menubar > menu[_moz-menuactive="true"] {
    background-color: hsla(0, 0%, 0%, .12);
  }

-  #messengerWindow #mail-menubar >
+  #menubar-items > #mail-menubar >
    menu:-moz-lwtheme-brighttext[_moz-menuactive="true"] {
    background-color: hsla(0, 0%, 100%, .12);
  }
@ -710,16 +713,6 @@ toolbar:not([mode="text"]) > toolbarpaletteitem > #button-chat > stack {
    background-color: transparent !important
  }

-  #messengerWindow[tabsintitlebar]:not([inFullscreen])
-  #tabs-toolbar:not(:-moz-lwtheme) {
-    color: CaptionText;
-  }
-
-  #messengerWindow[tabsintitlebar]:not([inFullscreen])
-  #tabs-toolbar:not(:-moz-lwtheme):-moz-window-inactive {
-    color: InactiveCaptionText;
-  }
-
  #messengerWindow[tabsintitlebar] #titlebar:-moz-lwtheme {
    visibility: hidden;
  }
@ -924,6 +917,7 @@ toolbar:not([mode="text"]) > toolbarpaletteitem > #button-chat > stack {
@media (-moz-windows-default-theme: 0) {
  #messengerWindow[tabsintitlebar] #mail-menubar > menu {
    -moz-appearance: none;
+    color: inherit;
  }
 }

@ -938,6 +932,20 @@ toolbar:not([mode="text"]) > toolbarpaletteitem > #button-chat > stack {
  .glodaTabToolbar {
    color: black;
  }
+
+  #mail-menubar > menu:not(:-moz-lwtheme) {
+    color: inherit;
+  }
+
+  /* Use a different color only on Windows 8 and higher for inactive windows.
+   * On Win 7, the menubar fog disappears for inactive windows, and renders gray
+   * illegible.
+   */
+  @media not all and (-moz-os-version: windows-win7) {
+    #mail-toolbar-menubar2:not(:-moz-lwtheme):-moz-window-inactive {
+      color: ThreeDShadow;
+    }
+  }
 }

@media (-moz-windows-glass) {
@ -953,12 +961,10 @@ toolbar:not([mode="text"]) > toolbarpaletteitem > #button-chat > stack {
  #mail-toolbar-menubar2 {
    -moz-box-ordinal-group: 20;
    -moz-window-dragging: no-drag;
-  }
-
-  #mail-toolbar-menubar2 {
    box-shadow: 0 1px 0 rgba(253, 253, 253, 0.45) inset;
    background-image: linear-gradient(var(--toolbarHighlight),
                                      var(--toolbarHighlight));
+    background-color: -moz-dialog;
    padding-bottom: 1px !important;
    padding-top: 2px;
  }
@ -1011,6 +1017,24 @@ toolbar:not([mode="text"]) > toolbarpaletteitem > #button-chat > stack {
  }
 }

+@media (-moz-os-version: windows-win8) {
+  @media (-moz-windows-default-theme) {
+    #messengerWindow[darkwindowframe="true"]:not(:-moz-lwtheme):not(:-moz-window-inactive) >
+      #navigation-toolbox {
+      color: white;
+    }
+  }
+  @media (-moz-windows-default-theme: 0) {
+    #messengerWindow > #navigation-toolbox:not(:-moz-lwtheme) {
+      color: CaptionText;
+    }
+
+    #messengerWindow > #navigation-toolbox:not(:-moz-lwtheme):-moz-window-inactive {
+      color: InactiveCaptionText;
+    }
+  }
+}
+
@media (-moz-os-version: windows-win8),
       (-moz-os-version: windows-win10) {
  #appmenuSecondaryPane {
@ -1034,17 +1058,9 @@ toolbar:not([mode="text"]) > toolbarpaletteitem > #button-chat > stack {
  }

  @media (-moz-windows-default-theme: 0) {
-    #messengerWindow:not([tabsintitlebar]) #tabs-toolbar:not(:-moz-lwtheme),
    #messengerWindow:not([tabsintitlebar]) #mail-menubar >
      menu:not(:-moz-lwtheme) {
-      color: CaptionText;
-    }
-
-    #messengerWindow:not([tabsintitlebar])
-      #tabs-toolbar:not(:-moz-lwtheme):-moz-window-inactive,
-    #messengerWindow:not([tabsintitlebar]) #mail-menubar >
-      menu:not(:-moz-lwtheme):-moz-window-inactive {
-      color: InactiveCaptionText;
+      color: inherit;
    }

    #messengerWindow:not([tabsintitlebar]) #mail-menubar > menu {
--- a/mail/themes/windows/mail/tabmail.css
+++ b/mail/themes/windows/mail/tabmail.css
@ -20,35 +20,14 @@
 * Tab
 */

-@media (-moz-os-version: windows-win8),
-       (-moz-os-version: windows-win10) {
-  @media (-moz-windows-default-theme: 0) {
-    #tabs-toolbar:not(:-moz-lwtheme) {
-      color: CaptionText;
-    }
-
-    #tabs-toolbar:not(:-moz-lwtheme):-moz-window-inactive,
-    #messengerWindow:not([tabsintitlebar])
-      .tabmail-tab:not([selected]):not(:-moz-lwtheme):-moz-window-inactive {
-      color: InactiveCaptionText;
-    }
-  }
-}
-
@media (min-resolution: 1.1dppx) {
  .tab-throbber {
    list-style-image: url("chrome://global/skin/icons/loading@2x.png") !important;
  }
 }

-#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;
+  color: inherit;
 }

 .tabmail-tab[busy],
@ -255,6 +234,14 @@ tabpanels {
  }
 }

+@media (-moz-os-version: windows-win10) and (-moz-windows-default-theme) {
+  .tab-label:-moz-window-inactive {
+    /* Calculated to match the opacity change of Windows Explorer
+       titlebar text change for inactive windows. */
+    opacity: .6;
+  }
+}
+
@media (-moz-os-version: windows-win8) and (-moz-windows-default-theme) {
  #messengerWindow[darkwindowframe="true"]
  #tabs-toolbar:not(:-moz-lwtheme):not(:-moz-window-inactive),