Bug 1369999 - Port bug 1367384 to TB [Make the title bar dark by default on Windows 10 and refactor caption button icons]. r=jorgk

mail/themes/windows/jar.mn

@@ -170,7 +170,6 @@ classic.jar:
   skin/classic/messenger/icons/attachment-deleted-large.png   (mail/icons/attachment-deleted-large.png)
   skin/classic/messenger/icons/attachment-col.png             (mail/icons/attachment-col.png)
   skin/classic/messenger/icons/attachment-col.svg             (mail/icons/attachment-col.svg)
-  skin/classic/messenger/icons/caption-buttons.svg            (mail/icons/caption-buttons.svg)
   skin/classic/messenger/icons/columnpicker.svg               (mail/icons/columnpicker.svg)
   skin/classic/messenger/icons/dropmarker.svg                 (mail/icons/dropmarker.svg)
   skin/classic/messenger/icons/junk-col.svg                   (mail/icons/junk-col.svg)
@@ -233,6 +232,18 @@ classic.jar:
   skin/classic/messenger/tabs/stroke-end@2x.png               (mail/tabs/stroke-end@2x.png)
   skin/classic/messenger/tabs/stroke-start.png                (mail/tabs/stroke-start.png)
   skin/classic/messenger/tabs/stroke-start@2x.png             (mail/tabs/stroke-start@2x.png)
+  skin/classic/messenger/window-controls/close.svg                 (mail/window-controls/close.svg)
+  skin/classic/messenger/window-controls/close-highcontrast.svg    (mail/window-controls/close-highcontrast.svg)
+  skin/classic/messenger/window-controls/close-themes.svg          (mail/window-controls/close-themes.svg)
+  skin/classic/messenger/window-controls/maximize.svg              (mail/window-controls/maximize.svg)
+  skin/classic/messenger/window-controls/maximize-highcontrast.svg (mail/window-controls/maximize-highcontrast.svg)
+  skin/classic/messenger/window-controls/maximize-themes.svg       (mail/window-controls/maximize-themes.svg)
+  skin/classic/messenger/window-controls/minimize.svg              (mail/window-controls/minimize.svg)
+  skin/classic/messenger/window-controls/minimize-highcontrast.svg (mail/window-controls/minimize-highcontrast.svg)
+  skin/classic/messenger/window-controls/minimize-themes.svg       (mail/window-controls/minimize-themes.svg)
+  skin/classic/messenger/window-controls/restore.svg               (mail/window-controls/restore.svg)
+  skin/classic/messenger/window-controls/restore-highcontrast.svg  (mail/window-controls/restore-highcontrast.svg)
+  skin/classic/messenger/window-controls/restore-themes.svg        (mail/window-controls/restore-themes.svg)
   skin/classic/messenger/icons/connecting.png                 (mail/icons/connecting.png)
   skin/classic/messenger/icons/notloading.png                 (mail/icons/notloading.png)
   skin/classic/messenger/icons/chat-toolbar.svg               (../shared/mail/icons/chat-toolbar.svg)

mail/themes/windows/mail/icons/caption-buttons.svg

@@ -1,107 +0,0 @@
-<!-- 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/. -->
-<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <style>
-    g {
-      stroke: ButtonText;
-      stroke-width: 0.9px;
-      fill: none;
-    }
-
-    g:not([id|="close"]) {
-      shape-rendering: crispEdges;
-    }
-
-    g:not(:target) {
-      display: none;
-    }
-
-    use:target > g {
-      display: initial;
-    }
-
-    g.highlight {
-      stroke-width: 1.9px;
-    }
-
-    g.themes {
-      stroke: #fff;
-      stroke-width: 1.9px;
-    }
-
-    .outer-stroke {
-      stroke: #000;
-      stroke-width: 3.6px;
-      opacity: .75;
-    }
-
-    .restore-background-window {
-      stroke-width: .9;
-    }
-
-    [id$="-highcontrast-hover"] > g {
-      stroke: HighlightText;
-    }
-
-    [id$="-white"] > g {
-      stroke: #fff;
-    }
-
-  </style>
-  <g id="close">
-    <path d="M1,1 l 10,10 M1,11 l 10,-10"/>
-  </g>
-  <g id="maximize">
-    <rect x="1.5" y="1.5" width="9" height="9"/>
-  </g>
-  <g id="minimize">
-    <line x1="1" y1="5.5" x2="11" y2="5.5"/>
-  </g>
-  <g id="restore">
-    <rect x="1.5" y="3.5" width="7" height="7"/>
-    <polyline points="3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5"/>
-  </g>
-
-  <use id="close-white" xlink:href="#close"/>
-  <use id="maximize-white" xlink:href="#maximize"/>
-  <use id="minimize-white" xlink:href="#minimize"/>
-  <use id="restore-white" xlink:href="#restore"/>
-
-  <g id="close-highcontrast" class="highlight">
-    <path d="M1,1 l 10,10 M1,11 l 10,-10"/>
-  </g>
-  <g id="maximize-highcontrast" class="highlight">
-    <rect x="2" y="2" width="8" height="8"/>
-  </g>
-  <g id="minimize-highcontrast" class="highlight">
-    <line x1="1" y1="6" x2="11" y2="6"/>
-  </g>
-  <g id="restore-highcontrast" class="highlight">
-    <rect x="2" y="4" width="6" height="6"/>
-    <polyline points="3.5,1.5 10.5,1.5 10.5,8.5" class="restore-background-window"/>
-  </g>
-
-  <use id="close-highcontrast-hover" xlink:href="#close-highcontrast"/>
-  <use id="maximize-highcontrast-hover" xlink:href="#maximize-highcontrast"/>
-  <use id="minimize-highcontrast-hover" xlink:href="#minimize-highcontrast"/>
-  <use id="restore-highcontrast-hover" xlink:href="#restore-highcontrast"/>
-
-  <g id="close-themes" class="themes">
-    <path d="M1,1 l 10,10 M1,11 l 10,-10" class="outer-stroke" />
-    <path d="M1.75,1.75 l 8.5,8.5 M1.75,10.25 l 8.5,-8.5"/>
-  </g>
-  <g id="maximize-themes" class="themes">
-    <rect x="2" y="2" width="8" height="8" class="outer-stroke"/>
-    <rect x="2" y="2" width="8" height="8"/>
-  </g>
-  <g id="minimize-themes" class="themes">
-    <line x1="0" y1="6" x2="12" y2="6" class="outer-stroke"/>
-    <line x1="1" y1="6" x2="11" y2="6"/>
-  </g>
-  <g id="restore-themes" class="themes">
-    <path d="M2,4 l 6,0 l 0,6 l -6,0z M2.5,1.5 l 8,0 l 0,8" class="outer-stroke"/>
-    <rect x="2" y="4" width="6" height="6"/>
-    <polyline points="3.5,1.5 10.5,1.5 10.5,8.5" class="restore-background-window"/>
-  </g>
-</svg>

mail/themes/windows/mail/mailWindow1.css

@@ -297,12 +297,12 @@ treechildren::-moz-tree-cell-text(imapdeleted) {
     }
 
     @media (-moz-windows-default-theme) {
-      #messengerWindow[tabsintitlebar] {
+      #messengerWindow[tabsintitlebar] > #navigation-toolbox:not(:-moz-lwtheme) {
         background-color: #a8cbdb;
       }
 
-      #messengerWindow:-moz-window-inactive,
-      #messengerWindow:not([tabsintitlebar]) {
+      #messengerWindow:-moz-window-inactive > #navigation-toolbox:not(:-moz-lwtheme),
+      #messengerWindow:not([tabsintitlebar]) > #navigation-toolbox:not(:-moz-lwtheme) {
         background-color: #d1d1d1;
       }
     }
@@ -322,6 +322,8 @@ treechildren::-moz-tree-cell-text(imapdeleted) {
       border: none;
       margin: 0 !important;
       padding: 10px 17px;
+      -moz-context-properties: stroke;
+      stroke: black;
     }
 
     #messengerWindow[sizemode=maximized] .titlebar-button {
@@ -335,35 +337,35 @@ treechildren::-moz-tree-cell-text(imapdeleted) {
     }
 
     #titlebar-min {
-      list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#minimize);
+      list-style-image: url(chrome://messenger/skin/window-controls/minimize.svg);
     }
 
     #titlebar-max {
-      list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#maximize);
+      list-style-image: url(chrome://messenger/skin/window-controls/maximize.svg);
     }
 
-    #messengerWindow[sizemode="maximized"] #titlebar-max {
-      list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#restore);
+    :root[sizemode="maximized"] #titlebar-max {
+      list-style-image: url(chrome://messenger/skin/window-controls/restore.svg);
     }
 
     #titlebar-close {
-      list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#close);
-    }
-    #titlebar-close:hover {
-      list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#close-white);
+      list-style-image: url(chrome://messenger/skin/window-controls/close.svg);
     }
 
+    .titlebar-button:-moz-lwtheme {
+      -moz-context-properties: unset;
+    }
     #titlebar-min:-moz-lwtheme {
-      list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#minimize-themes);
+      list-style-image: url(chrome://messenger/skin/window-controls/minimize-themes.svg);
     }
     #titlebar-max:-moz-lwtheme {
-      list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#maximize-themes);
+      list-style-image: url(chrome://messenger/skin/window-controls/maximize-themes.svg);
     }
-    #messengerWindow[sizemode="maximized"] #titlebar-max:-moz-lwtheme {
-      list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#restore-themes);
+    :root[sizemode="maximized"] #titlebar-max:-moz-lwtheme {
+      list-style-image: url(chrome://messenger/skin/window-controls/restore-themes.svg);
     }
     #titlebar-close:-moz-lwtheme {
-      list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#close-themes);
+      list-style-image: url(chrome://messenger/skin/window-controls/close-themes.svg);
     }
 
     /* the 12px image renders a 10px icon, and the 10px upscaled gets rounded to 12.5, which
@@ -426,47 +428,46 @@ treechildren::-moz-tree-cell-text(imapdeleted) {
       }
 
       #titlebar-close:hover {
+        stroke: white;
         background-color: hsl(355, 86%, 49%);
       }
 
       #titlebar-close:hover:active {
         background-color: hsl(355, 82%, 69%);
       }
+
+      .titlebar-button:-moz-lwtheme-brighttext:hover {
+        background-color: hsla(0, 0%, 100%, .12);
+      }
+
+      .titlebar-button:-moz-lwtheme-brighttext:hover:active {
+        background-color: hsla(0, 0%, 100%, .22);
+      }
     }
     @media (-moz-windows-default-theme: 0) {
       .titlebar-button {
+        stroke: ButtonText;
         background-color: -moz-field;
       }
       .titlebar-button:hover {
+        stroke: HighlightText;
         background-color: Highlight;
       }
 
       #titlebar-min {
-        list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#minimize-highcontrast);
-      }
-      #titlebar-min:hover {
-        list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#minimize-highcontrast-hover);
+        list-style-image: url(chrome://messenger/skin/window-controls/minimize-highcontrast.svg);
       }
 
       #titlebar-max {
-        list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#maximize-highcontrast);
-      }
-      #titlebar-max:hover {
-        list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#maximize-highcontrast-hover);
+        list-style-image: url(chrome://messenger/skin/window-controls/maximize-highcontrast.svg);
       }
 
-      #messengerWindow[sizemode="maximized"] #titlebar-max {
-        list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#restore-highcontrast);
-      }
-      #messengerWindow[sizemode="maximized"] #titlebar-max:hover {
-        list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#restore-highcontrast-hover);
+      :root[sizemode="maximized"] #titlebar-max {
+        list-style-image: url(chrome://messenger/skin/window-controls/restore-highcontrast.svg);
       }
 
       #titlebar-close {
-        list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#close-highcontrast);
-      }
-      #titlebar-close:hover {
-        list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#close-highcontrast-hover);
+        list-style-image: url(chrome://messenger/skin/window-controls/close-highcontrast.svg);
       }
     }
   }

mail/themes/windows/mail/primaryToolbar.css

@@ -49,6 +49,20 @@ menu:not(:-moz-lwtheme):-moz-window-inactive {
   #tabs-toolbar:not(:-moz-lwtheme) {
     background-image: none;
   }
+
+  #messengerWindow #mail-menubar > menu {
+    -moz-appearance: none;
+    border-style: none;
+  }
+
+  #messengerWindow #mail-menubar > menu[_moz-menuactive="true"] {
+    background-color: hsla(0, 0%, 0%, .12);
+  }
+
+  #messengerWindow #mail-menubar >
+    menu:-moz-lwtheme-brighttext[_moz-menuactive="true"] {
+    background-color: hsla(0, 0%, 100%, .12);
+  }
 }
 
 /**

mail/themes/windows/mail/window-controls/close-highcontrast.svg

@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
+  <path stroke="context-stroke" stroke-width="1.9" fill="none" d="M1,1 l 10,10 M1,11 l 10,-10"/>
+</svg>

mail/themes/windows/mail/window-controls/close-themes.svg

@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
+  <path stroke="black" stroke-width="3.6" stroke-opacity=".75" d="M1,1 l 10,10 M1,11 l 10,-10"/>
+  <path stroke="white" stroke-width="1.9" d="M1.75,1.75 l 8.5,8.5 M1.75,10.25 l 8.5,-8.5"/>
+</svg>

mail/themes/windows/mail/window-controls/close.svg

@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
+  <path stroke="context-stroke" stroke-width=".9" fill="none" d="M1,1 l 10,10 M1,11 l 10,-10"/>
+</svg>

mail/themes/windows/mail/window-controls/maximize-highcontrast.svg

@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
+  <rect stroke="context-stroke" stroke-width="1.9" fill="none" x="2" y="2" width="8" height="8"/>
+</svg>

mail/themes/windows/mail/window-controls/maximize-themes.svg

@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" fill="none">
+  <rect stroke="black" stroke-width="3.6" stroke-opacity=".75" x="2" y="2" width="8" height="8"/>
+  <rect stroke="white" stroke-width="1.9" x="2" y="2" width="8" height="8"/>
+</svg>

mail/themes/windows/mail/window-controls/maximize.svg

@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
+  <rect stroke="context-stroke" stroke-width=".9" fill="none" x="1.5" y="1.5" width="9" height="9"/>
+</svg>

mail/themes/windows/mail/window-controls/minimize-highcontrast.svg

@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
+  <line stroke="context-stroke" stroke-width="1.9" fill="none" shape-rendering="crispEdges" x1="1" y1="6" x2="11" y2="6"/>
+</svg>

mail/themes/windows/mail/window-controls/minimize-themes.svg

@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
+  <line stroke="black" stroke-width="3.6" stroke-opacity=".75" x1="0" y1="6" x2="12" y2="6"/>
+  <line stroke="white" stroke-width="1.9" x1="1" y1="6" x2="11" y2="6"/>
+</svg>

mail/themes/windows/mail/window-controls/minimize.svg

@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
+  <line stroke="context-stroke" stroke-width=".9" fill="none" shape-rendering="crispEdges" x1="1" y1="5.5" x2="11" y2="5.5"/>
+</svg>

mail/themes/windows/mail/window-controls/restore-highcontrast.svg

@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" stroke="context-stroke" stroke-width="1.9" fill="none" shape-rendering="crispEdges">
+  <rect x="2" y="4" width="6" height="6"/>
+  <polyline points="3.5,1.5 10.5,1.5 10.5,8.5" stroke-width=".9"/>
+</svg>

mail/themes/windows/mail/window-controls/restore-themes.svg

@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" fill="none" stroke="white">
+  <path stroke="black" stroke-width="3.6" stroke-opacity=".75" d="M2,4 l 6,0 l 0,6 l -6,0z M2.5,1.5 l 8,0 l 0,8"/>
+  <rect stroke-width="1.9" x="2" y="4" width="6" height="6"/>
+  <polyline stroke-width=".9" points="3.5,1.5 10.5,1.5 10.5,8.5"/>
+</svg>

mail/themes/windows/mail/window-controls/restore.svg

@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" stroke="context-stroke" stroke-width=".9" fill="none" shape-rendering="crispEdges">
+  <rect x="1.5" y="3.5" width="7" height="7"/>
+  <polyline points="3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5"/>
+</svg>