Bug 1367384 - Make the title bar dark by default on Windows 10 and refactor caption button icons. r?johannh draft
authorDão Gottwald <dao@mozilla.com>
Mon, 29 May 2017 18:14:52 +0200
changeset 586063 c10fc30a43edd6132e56a0400228f77196127241
parent 586049 34ac1a5d6576d6775491c8a882710a1520551da6
child 630872 54e4e3810d1c8f6efa235189a6d5d69f3f08f419
push id61276
push userdgottwald@mozilla.com
push dateMon, 29 May 2017 16:15:12 +0000
reviewersjohannh
bugs1367384
milestone55.0a1
Bug 1367384 - Make the title bar dark by default on Windows 10 and refactor caption button icons. r?johannh MozReview-Commit-ID: EvLhDGAA5M2
browser/themes/windows/browser-aero.css
browser/themes/windows/browser.css
browser/themes/windows/caption-buttons.svg
browser/themes/windows/compacttheme.css
browser/themes/windows/jar.mn
browser/themes/windows/window-controls/close-highcontrast.svg
browser/themes/windows/window-controls/close-themes.svg
browser/themes/windows/window-controls/close.svg
browser/themes/windows/window-controls/maximize-highcontrast.svg
browser/themes/windows/window-controls/maximize-themes.svg
browser/themes/windows/window-controls/maximize.svg
browser/themes/windows/window-controls/minimize-highcontrast.svg
browser/themes/windows/window-controls/minimize-themes.svg
browser/themes/windows/window-controls/minimize.svg
browser/themes/windows/window-controls/restore-highcontrast.svg
browser/themes/windows/window-controls/restore-themes.svg
browser/themes/windows/window-controls/restore.svg
--- a/browser/themes/windows/browser-aero.css
+++ b/browser/themes/windows/browser-aero.css
@@ -45,87 +45,97 @@
    * 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) {
-        #main-window {
+        :root:not(:-moz-lwtheme) {
+%ifdef MOZ_PHOTON_THEME
+          background-color: hsl(235,33%,19%);
+          --titlebar-text-color: hsl(240,9%,98%);
+%else
           background-color: hsl(0, 0%, 78%);
+%endif
         }
 
         :root[tabsintitlebar] .tab-label:-moz-window-inactive {
           /* Calculated to match the opacity change of Windows Explorer
              titlebar text change for inactive windows. */
           opacity: .6;
         }
       }
 
       @media (-moz-windows-default-theme: 0) {
-        #main-window {
+        :root {
           background-color: transparent;
         }
       }
 
       #titlebar-buttonbox,
       .titlebar-button {
         -moz-appearance: none !important;
       }
 
       .titlebar-button {
         border: none;
         margin: 0 !important;
         padding: 10px 17px;
+        -moz-context-properties: stroke;
+%ifdef MOZ_PHOTON_THEME
+        stroke: white;
+%else
+        stroke: black;
+%endif
       }
 
-      #main-window[sizemode=maximized] .titlebar-button {
+      :root[sizemode=maximized] .titlebar-button {
         padding-top: 8px;
         padding-bottom: 8px;
       }
 
       .titlebar-button > .toolbarbutton-icon {
         width: 12px;
         height: 12px;
       }
 
       #titlebar-min {
-        list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
+        list-style-image: url(chrome://browser/skin/window-controls/minimize.svg);
       }
 
       #titlebar-max {
-        list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize);
+        list-style-image: url(chrome://browser/skin/window-controls/maximize.svg);
       }
 
-      #main-window[sizemode="maximized"] #titlebar-max {
-        list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
+      :root[sizemode="maximized"] #titlebar-max {
+        list-style-image: url(chrome://browser/skin/window-controls/restore.svg);
       }
 
       #titlebar-close {
-        list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
-      }
-      #titlebar-close:hover {
-        list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-white);
+        list-style-image: url(chrome://browser/skin/window-controls/close.svg);
       }
 
+      .titlebar-button:-moz-lwtheme {
+        -moz-context-properties: unset;
+      }
       #titlebar-min:-moz-lwtheme {
-        list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-themes);
+        list-style-image: url(chrome://browser/skin/window-controls/minimize-themes.svg);
       }
       #titlebar-max:-moz-lwtheme {
-        list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-themes);
+        list-style-image: url(chrome://browser/skin/window-controls/maximize-themes.svg);
       }
-      #main-window[sizemode="maximized"] #titlebar-max:-moz-lwtheme {
-        list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-themes);
+      :root[sizemode="maximized"] #titlebar-max:-moz-lwtheme {
+        list-style-image: url(chrome://browser/skin/window-controls/restore-themes.svg);
       }
       #titlebar-close:-moz-lwtheme {
-        list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-themes);
+        list-style-image: url(chrome://browser/skin/window-controls/close-themes.svg);
       }
 
-
       /* the 12px image renders a 10px icon, and the 10px upscaled gets rounded to 12.5, which
        * rounds up to 13px, which makes the icon one pixel too big on 1.25dppx. Fix: */
       @media (min-resolution: 1.20dppx) and (max-resolution: 1.45dppx) {
         .titlebar-button > .toolbarbutton-icon {
           width: 11.5px;
           height: 11.5px;
         }
       }
@@ -163,70 +173,82 @@
          * impossible to know by how much. */
         .titlebar-button > .toolbarbutton-icon {
           width: 10.8px;
           height: 10.8px;
         }
       }
 
       @media (-moz-windows-default-theme) {
+%ifdef MOZ_PHOTON_THEME
         .titlebar-button:hover {
-          background-color: hsla(0, 0%, 0%, .12);
+          background-color: hsla(0,0%,100%,.12);
+        }
+        .titlebar-button:hover:active {
+          background-color: hsla(0,0%,100%,.22);
+        }
+        .titlebar-button:-moz-lwtheme-darktext:hover {
+          background-color: hsla(0,0%,0%,.12);
+        }
+        .titlebar-button:-moz-lwtheme-darktext:hover:active {
+          background-color: hsla(0,0%,0%,.22);
         }
-
+%else
+        .titlebar-button:hover {
+          background-color: hsla(0,0%,0%,.12);
+        }
         .titlebar-button:hover:active {
-          background-color: hsla(0, 0%, 0%, .22);
+          background-color: hsla(0,0%,0%,.22);
+        }
+        .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);
+        }
+%endif
 
         .titlebar-button:not(:hover) > .toolbarbutton-icon:-moz-window-inactive {
           opacity: 0.5;
         }
 
         #titlebar-close:hover {
-          background-color: hsl(355, 86%, 49%);
+          stroke: white;
+          background-color: hsl(355,86%,49%);
         }
 
         #titlebar-close:hover:active {
-          background-color: hsl(355, 82%, 69%);
+          background-color: hsl(355,82%,69%);
         }
       }
+
       @media (-moz-windows-default-theme: 0) {
         .titlebar-button {
           background-color: -moz-field;
+          stroke: ButtonText;
         }
         .titlebar-button:hover {
           background-color: Highlight;
+          stroke: HighlightText;
         }
 
         #titlebar-min {
-          list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-highcontrast);
-        }
-        #titlebar-min:hover {
-          list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-highcontrast-hover);
+          list-style-image: url(chrome://browser/skin/window-controls/minimize-highcontrast.svg);
         }
 
         #titlebar-max {
-          list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-highcontrast);
-        }
-        #titlebar-max:hover {
-          list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-highcontrast-hover);
+          list-style-image: url(chrome://browser/skin/window-controls/maximize-highcontrast.svg);
         }
 
-        #main-window[sizemode="maximized"] #titlebar-max {
-          list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-highcontrast);
-        }
-        #main-window[sizemode="maximized"] #titlebar-max:hover {
-          list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-highcontrast-hover);
+        :root[sizemode="maximized"] #titlebar-max {
+          list-style-image: url(chrome://browser/skin/window-controls/restore-highcontrast.svg);
         }
 
         #titlebar-close {
-          list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highcontrast);
-        }
-        #titlebar-close:hover {
-          list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highcontrast-hover);
+          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 {
@@ -259,39 +281,33 @@
     /* Artificially draw window borders that are covered by lwtheme, see bug 591930.
      * Borders for win7 are below, win10 doesn't need them. */
     #main-window[sizemode="normal"] > #tab-view-deck > #browser-panel:-moz-lwtheme {
       border-top: 1px solid @toolbarShadowColor@;
     }
   }
 
   @media (-moz-windows-default-theme) {
-    #toolbar-menubar:not(:-moz-lwtheme),
-    #TabsToolbar:not(:-moz-lwtheme) {
-      color: black;
-    }
-
     #main-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) {
       #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive {
         color: ThreeDShadow;
       }
     }
   }
 
-  #main-window[darkwindowframe="true"] #toolbar-menubar:not(:-moz-lwtheme):not(:-moz-window-inactive),
-  #main-window[darkwindowframe="true"] #TabsToolbar:not(:-moz-lwtheme):not(:-moz-window-inactive) {
-    color: white;
+  :root[darkwindowframe="true"]:not(:-moz-lwtheme):not(:-moz-window-inactive) {
+    --titlebar-text-color: white;
   }
 
   /* Show borders on Win 7 & 8, but not on 10 and later: */
   @media (-moz-os-version: windows-win7),
          (-moz-os-version: windows-win8) {
     /* Vertical toolbar border */
     #main-window:not([customizing])[sizemode=normal] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme),
     #main-window:not([customizing])[sizemode=normal] #navigator-toolbox:-moz-lwtheme,
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -10,16 +10,18 @@
 
 %include ../shared/browser.inc
 %include windowsShared.inc
 %define toolbarShadowColor hsla(209,67%,12%,0.35)
 
 %include ../shared/browser.inc.css
 
 :root {
+  --titlebar-text-color: inherit;
+
   --space-above-tabbar: 15px;
 
   --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) - 1px);
 
 %ifdef MOZ_PHOTON_THEME
   --toolbarbutton-border-radius: 2px;
 %else
   --toolbarbutton-border-radius: 1px;
@@ -158,29 +160,32 @@ toolbar[brighttext] {
 }
 
 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
   min-height: 0.1px;
   max-height: 0;
   transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
 }
 
+#toolbar-menubar,
+#TabsToolbar {
+  color: var(--titlebar-text-color);
+}
+
 @media (-moz-windows-compositor: 0),
        (-moz-windows-default-theme: 0) {
   /* Please keep the menu text colors in this media block in sync with
    * compacttheme.css, minus the :not(:-moz-lwtheme) condition - see Bug 1165718.
    */
-  #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
-  #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
-    color: CaptionText;
+  :root[tabsintitlebar]:not([inFullscreen]):not(:-moz-lwtheme) {
+    --titlebar-text-color: CaptionText;
   }
 
-  #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
-  #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
-    color: InactiveCaptionText;
+  :root[tabsintitlebar]:not([inFullscreen]):not(:-moz-lwtheme):-moz-window-inactive {
+    --titlebar-text-color: InactiveCaptionText;
   }
 }
 
 @media (-moz-windows-compositor: 0) {
   #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
     visibility: hidden;
   }
 
@@ -505,75 +510,81 @@ menuitem.bookmark-item {
 
 #minimize-button,
 #restore-button,
 #close-button {
   -moz-appearance: none;
   border: none;
   margin: 0 !important;
   padding: 6px 12px;
+  -moz-context-properties: stroke;
+  stroke: currentColor;
+  color: inherit;
 }
 
 #minimize-button {
-  list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
+  list-style-image: url(chrome://browser/skin/window-controls/minimize.svg);
 }
 
 #restore-button {
-  list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
+  list-style-image: url(chrome://browser/skin/window-controls/restore.svg);
 }
 
 #minimize-button:hover,
 #restore-button:hover {
-  background-color: hsla(0, 0%, 0%, .12);
+  background-color: hsla(0,0%,0%,.12);
 }
 
 #minimize-button:hover:active,
 #restore-button:hover:active {
-  background-color: hsla(0, 0%, 0%, .22);
+  background-color: hsla(0,0%,0%,.22);
+}
+
+#TabsToolbar[brighttext] > #window-controls > #minimize-button:hover,
+#TabsToolbar[brighttext] > #window-controls > #restore-button:hover {
+  background-color: hsla(0,0%,100%,.12);
+}
+
+#TabsToolbar[brighttext] > #window-controls > #minimize-button:hover:active,
+#TabsToolbar[brighttext] > #window-controls > #restore-button:hover:active {
+  background-color: hsla(0,0%,100%,.22);
 }
 
 #close-button {
-  list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
+  list-style-image: url(chrome://browser/skin/window-controls/close.svg);
 }
 
 #close-button:hover {
   background-color: hsl(355, 86%, 49%);
-  list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-white);
+  stroke: white;
 }
 
 #close-button:hover:active {
   background-color: hsl(355, 82%, 69%);
 }
 
-toolbar[brighttext] #minimize-button {
-  list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-white);
-}
-
-toolbar[brighttext] #restore-button {
-  list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-white);
-}
-
-toolbar[brighttext] #close-button {
-  list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-white);
-}
-
 @media (-moz-os-version: windows-win7) {
   #window-controls {
+    -moz-box-align: start;
     margin-inline-start: 4px;
   }
 
   #minimize-button,
   #restore-button,
   #close-button {
+    -moz-appearance: none;
+    border-style: none;
+    margin: 0;
     /* Important to ensure this applies even on toolbar[brighttext] */
     list-style-image: url("chrome://global/skin/icons/windowControls.png") !important;
     /* Also override background color to a avoid hover background styling
      * leaking through around the image. */
     background-color: transparent !important;
     padding: 0;
+    -moz-context-properties: unset;
   }
 
   #minimize-button {
     -moz-image-region: rect(0, 16px, 16px, 0);
   }
 
   #minimize-button:hover {
     -moz-image-region: rect(16px, 16px, 32px, 0);
@@ -604,30 +615,16 @@ toolbar[brighttext] #close-button {
 
   #close-button:hover {
     -moz-image-region: rect(16px, 48px, 32px, 32px);
   }
 
   #close-button:hover:active {
     -moz-image-region: rect(32px, 48px, 48px, 32px);
   }
-}
-
-@media (-moz-os-version: windows-win7) {
-  #window-controls {
-    -moz-box-align: start;
-  }
-
-  #minimize-button,
-  #restore-button,
-  #close-button {
-    -moz-appearance: none;
-    border-style: none;
-    margin: 0;
-  }
 
   #close-button {
     -moz-image-region: rect(0, 49px, 16px, 32px);
   }
 
   #close-button:hover {
     -moz-image-region: rect(16px, 49px, 32px, 32px);
   }
deleted file mode 100644
--- a/browser/themes/windows/caption-buttons.svg
+++ /dev/null
@@ -1,100 +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:not(:target) {
-      display: none;
-    }
-    use:target > g {
-      display: initial;
-    }
-
-    g {
-      stroke: ButtonText;
-      stroke-width: 0.9px;
-      fill: none;
-    }
-    g:not([id|="close"]) {
-      shape-rendering: crispEdges;
-    }
-
-    .highcontrast {
-      stroke-width: 1.9px;
-    }
-    .highcontrast-hover > g {
-      stroke: HighlightText;
-    }
-    .white > g {
-      stroke: #fff;
-    }
-    .themes {
-      stroke: #fff;
-      stroke-width: 1.9px;
-    }
-
-    .outer-stroke {
-      stroke: #000;
-      stroke-width: 3.6;
-      opacity: .75;
-    }
-    .restore-background-window {
-      stroke-width: .9;
-    }
-  </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" class="white" xlink:href="#close"/>
-  <use id="maximize-white" class="white" xlink:href="#maximize"/>
-  <use id="minimize-white" class="white" xlink:href="#minimize"/>
-  <use id="restore-white" class="white" xlink:href="#restore"/>
-
-  <g id="close-highcontrast" class="highcontrast">
-    <path d="M1,1 l 10,10 M1,11 l 10,-10"/>
-  </g>
-  <g id="maximize-highcontrast" class="highcontrast">
-    <rect x="2" y="2" width="8" height="8"/>
-  </g>
-  <g id="minimize-highcontrast" class="highcontrast">
-    <line x1="1" y1="6" x2="11" y2="6"/>
-  </g>
-  <g id="restore-highcontrast" class="highcontrast">
-    <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" class="highcontrast-hover" xlink:href="#close-highcontrast"/>
-  <use id="maximize-highcontrast-hover" class="highcontrast-hover" xlink:href="#maximize-highcontrast"/>
-  <use id="minimize-highcontrast-hover" class="highcontrast-hover" xlink:href="#minimize-highcontrast"/>
-  <use id="restore-highcontrast-hover" class="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>
--- a/browser/themes/windows/compacttheme.css
+++ b/browser/themes/windows/compacttheme.css
@@ -140,24 +140,22 @@
 
   #main-window[sizemode="maximized"] #main-menubar > menu:not(:-moz-window-inactive) {
     color: inherit;
   }
 
   /* Use proper menu text styling in Win7 classic mode (copied from browser.css) */
   @media (-moz-windows-compositor: 0),
          (-moz-windows-default-theme: 0) {
-    #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar,
-    #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar {
-      color: CaptionText;
+    :root[tabsintitlebar]:not([inFullscreen]) {
+      --titlebar-text-color: CaptionText;
     }
 
-    #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:-moz-window-inactive,
-    #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:-moz-window-inactive {
-      color: InactiveCaptionText;
+    :root[tabsintitlebar]:not([inFullscreen]):-moz-window-inactive {
+      --titlebar-text-color: InactiveCaptionText;
     }
 
     #main-window[tabsintitlebar] #main-menubar > menu {
       color: inherit;
     }
   }
 
   /* Use less opacity than normal since this is very dark, and on top of the default toolbar color */
@@ -219,45 +217,31 @@
 
 @media (-moz-os-version: windows-win10) {
   /* Always keep draggable space on the sides of tabs since there is no top margin on Win10 */
   #main-window .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
     padding-left: 15px;
     padding-right: 15px;
   }
 
-  /* Force white caption buttons for the dark theme on Windows 10 */
-  #titlebar-min:-moz-lwtheme-brighttext {
-    list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-white);
+  .titlebar-button:-moz-lwtheme {
+    -moz-context-properties: stroke;
+    stroke: currentColor;
   }
-  #titlebar-max:-moz-lwtheme-brighttext {
-    list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-white);
-  }
-  #main-window[sizemode="maximized"] #titlebar-max:-moz-lwtheme-brighttext {
-    list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-white);
-  }
-  #titlebar-close:-moz-lwtheme-brighttext {
-    list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-white);
+  #titlebar-min:-moz-lwtheme {
+    list-style-image: url(chrome://browser/skin/window-controls/minimize.svg);
   }
-
-  /* ... and normal ones for the light theme on Windows 10 */
-  #titlebar-min:-moz-lwtheme-darktext {
-    list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
-  }
-  #titlebar-max:-moz-lwtheme-darktext {
-    list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize);
+  #titlebar-max:-moz-lwtheme {
+    list-style-image: url(chrome://browser/skin/window-controls/maximize.svg);
   }
-  #main-window[sizemode="maximized"] #titlebar-max:-moz-lwtheme-darktext {
-    list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
+  :root[sizemode="maximized"] #titlebar-max:-moz-lwtheme {
+    list-style-image: url(chrome://browser/skin/window-controls/restore.svg);
   }
-  #titlebar-close:-moz-lwtheme-darktext {
-    list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
-  }
-  #titlebar-close:-moz-lwtheme-darktext:hover {
-    list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-white);
+  #titlebar-close:-moz-lwtheme {
+    list-style-image: url(chrome://browser/skin/window-controls/close.svg);
   }
 }
 
 .ac-type-icon {
   /* Left-align the type icon in awesomebar popup results with the icon in the
      urlbar. */
   margin-inline-start: 13px;
 }
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -5,17 +5,16 @@
 browser.jar:
 % skin browser classic/1.0 %skin/classic/browser/
 #include ../shared/jar.inc.mn
   skin/classic/browser/sanitizeDialog.css
   skin/classic/browser/aboutSessionRestore-window-icon.png
 * skin/classic/browser/syncedtabs/sidebar.css     (syncedtabs/sidebar.css)
 * skin/classic/browser/browser.css
 * skin/classic/browser/compacttheme.css
-  skin/classic/browser/caption-buttons.svg
   skin/classic/browser/Info.png
   skin/classic/browser/livemark-folder.png
   skin/classic/browser/menu-back.png
   skin/classic/browser/menu-forward.png
   skin/classic/browser/menuPanel-customize.png
   skin/classic/browser/menuPanel-customize@2x.png
   skin/classic/browser/menuPanel-exit.png
   skin/classic/browser/menuPanel-exit@2x.png
@@ -32,16 +31,26 @@ browser.jar:
   skin/classic/browser/privatebrowsing-mask-titlebar-win7-tall.png
   skin/classic/browser/reload-stop-go.png
   skin/classic/browser/reload-stop-go@2x.png
   skin/classic/browser/reload-stop-go-win7.png
   skin/classic/browser/reload-stop-go-win7@2x.png
   skin/classic/browser/searchbar.css
   skin/classic/browser/setDesktopBackground.css
   skin/classic/browser/slowStartup-16.png
+  skin/classic/browser/sync-desktopIcon.svg  (../shared/sync-desktopIcon.svg)
+  skin/classic/browser/sync-horizontalbar.png
+  skin/classic/browser/sync-horizontalbar@2x.png
+  skin/classic/browser/sync-horizontalbar-win7.png
+  skin/classic/browser/sync-horizontalbar-win7@2x.png
+  skin/classic/browser/sync-mobileIcon.svg  (../shared/sync-mobileIcon.svg)
+  skin/classic/browser/syncProgress-horizontalbar.png
+  skin/classic/browser/syncProgress-horizontalbar@2x.png
+  skin/classic/browser/syncProgress-horizontalbar-win7.png
+  skin/classic/browser/syncProgress-horizontalbar-win7@2x.png
   skin/classic/browser/toolbarbutton-dropdown-arrow-win7.png
   skin/classic/browser/urlbar-popup-blocked.png
   skin/classic/browser/urlbar-history-dropmarker.png
   skin/classic/browser/urlbar-history-dropmarker@2x.png
   skin/classic/browser/urlbar-history-dropmarker-win7.png
   skin/classic/browser/urlbar-history-dropmarker-win7@2x.png
   skin/classic/browser/webRTC-indicator.css  (../shared/webRTC-indicator.css)
 * skin/classic/browser/controlcenter/panel.css                 (controlcenter/panel.css)
@@ -117,26 +126,28 @@ browser.jar:
   skin/classic/browser/tabbrowser/tab-selected-end.svg         (tab-selected-end.svg)
   skin/classic/browser/tabbrowser/tab-selected-start.svg       (tab-selected-start.svg)
 
   skin/classic/browser/tabbrowser/tab-stroke-end.png           (tabbrowser/tab-stroke-end.png)
   skin/classic/browser/tabbrowser/tab-stroke-end@2x.png        (tabbrowser/tab-stroke-end@2x.png)
   skin/classic/browser/tabbrowser/tab-stroke-start.png         (tabbrowser/tab-stroke-start.png)
   skin/classic/browser/tabbrowser/tab-stroke-start@2x.png      (tabbrowser/tab-stroke-start@2x.png)
   skin/classic/browser/tabbrowser/tabDragIndicator.png         (tabbrowser/tabDragIndicator.png)
-  skin/classic/browser/sync-desktopIcon.svg  (../shared/sync-desktopIcon.svg)
-  skin/classic/browser/sync-horizontalbar.png
-  skin/classic/browser/sync-horizontalbar@2x.png
-  skin/classic/browser/sync-horizontalbar-win7.png
-  skin/classic/browser/sync-horizontalbar-win7@2x.png
-  skin/classic/browser/sync-mobileIcon.svg  (../shared/sync-mobileIcon.svg)
-  skin/classic/browser/syncProgress-horizontalbar.png
-  skin/classic/browser/syncProgress-horizontalbar@2x.png
-  skin/classic/browser/syncProgress-horizontalbar-win7.png
-  skin/classic/browser/syncProgress-horizontalbar-win7@2x.png
+  skin/classic/browser/window-controls/close.svg                 (window-controls/close.svg)
+  skin/classic/browser/window-controls/close-highcontrast.svg    (window-controls/close-highcontrast.svg)
+  skin/classic/browser/window-controls/close-themes.svg          (window-controls/close-themes.svg)
+  skin/classic/browser/window-controls/maximize.svg              (window-controls/maximize.svg)
+  skin/classic/browser/window-controls/maximize-highcontrast.svg (window-controls/maximize-highcontrast.svg)
+  skin/classic/browser/window-controls/maximize-themes.svg       (window-controls/maximize-themes.svg)
+  skin/classic/browser/window-controls/minimize.svg              (window-controls/minimize.svg)
+  skin/classic/browser/window-controls/minimize-highcontrast.svg (window-controls/minimize-highcontrast.svg)
+  skin/classic/browser/window-controls/minimize-themes.svg       (window-controls/minimize-themes.svg)
+  skin/classic/browser/window-controls/restore.svg               (window-controls/restore.svg)
+  skin/classic/browser/window-controls/restore-highcontrast.svg  (window-controls/restore-highcontrast.svg)
+  skin/classic/browser/window-controls/restore-themes.svg        (window-controls/restore-themes.svg)
 
 #ifdef E10S_TESTING_ONLY
   skin/classic/browser/e10s-64@2x.png (../shared/e10s-64@2x.png)
 #endif
 
 [extensions/{972ce4c6-7e08-4474-a285-3208198ce6fd}] chrome.jar:
 % override chrome://browser/skin/page-livemarks.png                   chrome://browser/skin/feeds/feedIcon16.png
 % override chrome://browser/skin/feeds/audioFeedIcon.png              chrome://browser/skin/feeds/feedIcon.png
new file mode 100644
--- /dev/null
+++ b/browser/themes/windows/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>
new file mode 100644
--- /dev/null
+++ b/browser/themes/windows/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>
new file mode 100644
--- /dev/null
+++ b/browser/themes/windows/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>
new file mode 100644
--- /dev/null
+++ b/browser/themes/windows/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>
new file mode 100644
--- /dev/null
+++ b/browser/themes/windows/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>
new file mode 100644
--- /dev/null
+++ b/browser/themes/windows/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>
new file mode 100644
--- /dev/null
+++ b/browser/themes/windows/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>
new file mode 100644
--- /dev/null
+++ b/browser/themes/windows/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>
new file mode 100644
--- /dev/null
+++ b/browser/themes/windows/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>
new file mode 100644
--- /dev/null
+++ b/browser/themes/windows/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>
new file mode 100644
--- /dev/null
+++ b/browser/themes/windows/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>
new file mode 100644
--- /dev/null
+++ b/browser/themes/windows/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>