Use windows 10 Accent colors.

4 files changed, 406 insertions, 220 deletions

diff --git a/browser/themes/windows/browser-aero.css b/browser/themes/windows/browser-aero.css
index 5ff9d8250..8e1de9577 100644
--- a/browser/themes/windows/browser-aero.css
+++ b/browser/themes/windows/browser-aero.css
@@ -46,8 +46,7 @@
     color: graytext;
   }
 
-  @media (-moz-os-version: windows-vista),
-         (-moz-os-version: windows-win7) {
+  @media (-moz-os-version: windows-win7) {
     .sidebar-header:not(:-moz-lwtheme),
     #sidebar-header:not(:-moz-lwtheme) {
       background-color: #EEF3FA;
@@ -83,190 +82,353 @@
     -moz-appearance: -moz-win-exclude-glass;
   }
 
-  @media not all and (-moz-os-version: windows-vista) {
-    @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 {
-            background-color: hsl(0, 0%, 78%);
-          }
-
-          :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-os-version: windows-win10) {
+    /* Draw XUL caption buttons and background on Windows 10 */
+    @media (-moz-windows-default-theme) {
+      #main-window {
+        background-color: hsl(0, 0%, 78%);
+      }
 
-        @media not all and (-moz-windows-default-theme) {
-          #main-window {
-            background-color: transparent;
-          }
-        }
+      :root[tabsintitlebar] .tab-label:-moz-window-inactive {
+        /* Calculated to match the opacity change of Windows Explorer
+           titlebar text change for inactive windows. */
+        opacity: .6;
+      }
+    }
 
-        #titlebar-buttonbox,
-        .titlebar-button {
-          -moz-appearance: none !important;
-        }
+    @media not all and (-moz-windows-accent-color-applies) {
+      /* Default styling for when no accent color is applied */
+      #main-window:not(:-moz-window-inactive):not(:-moz-lwtheme) {
+        background-color: hsl(235, 33%, 19%);
+      }
+      
+      :root:not(:-moz-window-inactive):not(:-moz-lwtheme) {
+        --titlebar-text-color: white;
+      }
+      
+      #titlebar-min:not(:-moz-window-inactive):not(:-moz-lwtheme) {
+        list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-highlight);
+      }
 
-        .titlebar-button {
-          border: none;
-          margin: 0 !important;
-          padding: 10px 17px;
-        }
+      #titlebar-max:not(:-moz-window-inactive):not(:-moz-lwtheme) {
+        list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-highlight);
+      }
 
-        #main-window[sizemode=maximized] .titlebar-button {
-          padding-top: 8px;
-          padding-bottom: 8px;
-        }
+      #main-window[sizemode="maximized"] #titlebar-max:not(:-moz-window-inactive):not(:-moz-lwtheme) {
+        list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-highlight);
+      }
+      
+      #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme) {
+        list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highlight);
+      }
 
-        .titlebar-button > .toolbarbutton-icon {
-          width: 12px;
-          height: 12px;
-        }
+      .titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover {
+        background-color: hsla(0, 0%, 100%, .17);
+      }
+
+      .titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active	{
+        background-color: hsla(0, 0%, 100%, .27);
+        transition: none;
+      }
+      
+      #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover {
+        background-color: hsla(0, 86%, 49%, 1);
+      }
+
+      #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active	{
+        background-color: hsla(0, 60%, 39%, 1);
+        transition: none;
+      }
+    }
 
+    @media (-moz-windows-accent-color-applies) { 
+      /* Styling for when an accent color is applied to the titlebar */
+      #main-window:not(:-moz-window-inactive):not(:-moz-lwtheme) {
+        background-color: -moz-win-accentcolor;
+      }
+      
+      :root:not(:-moz-window-inactive):not(:-moz-lwtheme) {
+        --titlebar-text-color: -moz-win-accentcolortext;
+      }
+      
+      #titlebar-min {
+        list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
+      }
+
+      #titlebar-max {
+        list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize);
+      }
+
+      #main-window[sizemode="maximized"] #titlebar-max {
+        list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
+      }
+
+      #titlebar-close {
+        list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
+      }
+      
+      .titlebar-button:hover {
+        background-color: hsla(0, 0%, 0%, .17);
+      }
+
+      .titlebar-button:hover:active {
+        background-color: hsla(0, 0%, 0%, .27);
+        transition: none;
+      }
+      
+      @media (-moz-windows-accent-color-is-dark) {
+        /* dark accent color */
         #titlebar-min {
-          list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
+          list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-highlight);
         }
 
         #titlebar-max {
-          list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize);
+          list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-highlight);
         }
 
         #main-window[sizemode="maximized"] #titlebar-max {
-          list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
+          list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-highlight);
         }
 
         #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/caption-buttons.svg#close-highlight);
         }
-
-        #titlebar-min:-moz-lwtheme {
-          list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-themes);
+      
+        .titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover {
+          background-color: hsla(0, 0%, 100%, .17);
         }
-        #titlebar-max:-moz-lwtheme {
-          list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-themes);
+        .titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active	{
+          background-color: hsla(0, 0%, 100%, .27);
+          transition: none;
         }
-        #main-window[sizemode="maximized"] #titlebar-max:-moz-lwtheme {
-          list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-themes);
+      
+        #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover {
+          background-color: hsla(0, 86%, 49%, 1);
         }
-        #titlebar-close:-moz-lwtheme {
-          list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-themes);
+
+        #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active	{
+          background-color: hsla(0, 60%, 39%, 1);
+          transition: none;
         }
+      }
+    } /* Windows 10 accent color applies */
 
+    @media not all and (-moz-windows-default-theme) {
+      #main-window {
+        background-color: transparent;
+      }
+    }
 
-        /* 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;
-          }
-        }
+    #titlebar-buttonbox,
+    .titlebar-button {
+      -moz-appearance: none !important;
+    }
 
-        /* 175% dpi should result in the same device pixel sizes as 150% dpi. */
-        @media (min-resolution: 1.70dppx) and (max-resolution: 1.95dppx) {
-          .titlebar-button {
-            padding-left: 14.1px;
-            padding-right: 14.1px;
-          }
-
-          .titlebar-button > .toolbarbutton-icon {
-            width: 10.8px;
-            height: 10.8px;
-          }
-        }
+    .titlebar-button {
+      border: none;
+      margin: 0 !important;
+      padding: 9px 17px;
+      transition: background-color linear 120ms;
+    }
+        
+    #main-window[sizemode="maximized"][tabsontop=true] #tabbrowser-tabs {
+      min-height: 28px;
+    }
 
-        /* 225% dpi should result in the same device pixel sizes as 200% dpi. */
-        @media (min-resolution: 2.20dppx) and (max-resolution: 2.45dppx) {
-          .titlebar-button {
-            padding-left: 15.3333px;
-            padding-right: 15.3333px;
-          }
-
-          .titlebar-button > .toolbarbutton-icon {
-            width: 10.8px;
-            height: 10.8px;
-          }
-        }
+    #main-window[sizemode=maximized] .titlebar-button {
+      padding-top: 8px;
+      padding-bottom: 8px;
+    }
 
-        /* 275% dpi should result in the same device pixel sizes as 250% dpi. */
-        @media (min-resolution: 2.70dppx) and (max-resolution: 2.95dppx) {
-          /* NB: todo: this should also change padding on the buttons
-           * themselves, but without a device to test this on, it's
-           * impossible to know by how much. */
-          .titlebar-button > .toolbarbutton-icon {
-            width: 10.8px;
-            height: 10.8px;
-          }
-        }
+    .titlebar-button > .toolbarbutton-icon {
+      width: 12px;
+      height: 12px;
+    }
 
-        @media (-moz-windows-default-theme) {
-          .titlebar-button:hover {
-            background-color: hsla(0, 0%, 0%, .12);
-          }
+    .titlebar-button:not(:hover) > .toolbarbutton-icon:-moz-window-inactive {
+      opacity: 0.5;
+    }
 
-          .titlebar-button:hover:active {
-            background-color: hsla(0, 0%, 0%, .22);
-          }
+    #main-window[chromemargin^="0,"][sizemode=normal] #navigator-toolbox {
+      margin-top: -4px;
+    }
 
-          .titlebar-button:not(:hover) > .toolbarbutton-icon:-moz-window-inactive {
-            opacity: 0.5;
-          }
+    #main-window[sizemode="maximized"] #titlebar-close {
+      padding-right: 19px;
+    }
+    
+    #titlebar-close:hover {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highlight);
+      background-color: hsla(0, 86%, 49%, 1);
+    }
 
-          #titlebar-close:hover {
-            background-color: hsl(355, 86%, 49%);
-          }
+    #titlebar-close:hover:active {
+      background-color: hsla(0, 86%, 49%, 0.6);
+      transition: none;
+    }
+    
+    /* inactive window */
 
-          #titlebar-close:hover:active {
-            background-color: hsl(355, 82%, 69%);
-          }
-        }
-        @media not all and (-moz-windows-default-theme) {
-          .titlebar-button {
-            background-color: -moz-field;
-          }
-          .titlebar-button:hover {
-            background-color: Highlight;
-          }
-
-          #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);
-          }
-
-          #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);
-          }
-
-          #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);
-          }
-
-          #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);
-          }
-        }
+    #titlebar-min:-moz-window-inactive:not(:-moz-lwtheme) {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
+    }
+
+    #titlebar-max:-moz-window-inactive:not(:-moz-lwtheme) {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize);
+    }
+
+    #main-window[sizemode="maximized"] #titlebar-max:-moz-window-inactive:not(:-moz-lwtheme) {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
+    }
+
+    #titlebar-close:-moz-window-inactive:not(:-moz-lwtheme):not(:hover) {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
+    }
+    
+    .titlebar-button:-moz-window-inactive:not(:-moz-lwtheme):hover {
+      background-color: hsla(0, 0%, 0%, .17);
+    }
+
+    .titlebar-button:-moz-window-inactive:not(:-moz-lwtheme):hover:active {
+      background-color: hsla(0, 0%, 0%, .27);
+      transition: none;
+    }
+    
+    /* light persona */
+    
+    .titlebar-button:-moz-lwtheme-darktext:hover {
+      background-color: hsla(0, 0%, 0%, .17);
+    }
+
+   .titlebar-button:-moz-lwtheme-darktext:hover:active {
+      background-color: hsla(0, 0%, 0%, .27);
+      transition: none;
+    }
+    
+    #titlebar-min:-moz-lwtheme-darktext {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-outline);
+    }
+
+    #titlebar-max:-moz-lwtheme-darktext {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-outline);
+    }
+
+    #main-window[sizemode="maximized"]:-moz-lwtheme-darktext #titlebar-max:-moz-lwtheme-darktext {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-outline);
+    }
+
+    #titlebar-close:-moz-lwtheme-darktext {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline);
+    }
+    #titlebar-close:hover:-moz-lwtheme-darktext {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline);
+    }
+        
+    /* dark persona */
+    
+    .titlebar-button:-moz-lwtheme-brighttext:hover {
+      background-color: hsla(0, 0%, 100%, .27);
+    }
+
+    .titlebar-button:-moz-lwtheme-brighttext:hover:active {
+      background-color: hsla(0, 0%, 100%, .37);
+      transition: none;
+    }
+    
+    #titlebar-min:-moz-lwtheme-brighttext {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-outline-inverted);
+    }
+
+    #titlebar-max:-moz-lwtheme-brighttext {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-outline-inverted);
+    }
+
+    #main-window[sizemode="maximized"]:-moz-lwtheme-brighttext #titlebar-max:-moz-lwtheme-brighttext {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-outline-inverted);
+    }
+
+    #titlebar-close:-moz-lwtheme-brighttext {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline-inverted);
+    }
+    #titlebar-close:hover:-moz-lwtheme-brighttext {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline-inverted);
+    }
+
+    /* 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;
+      }
+    }
+     
+    /* 175% dpi should result in the same device pixel sizes as 150% dpi. */
+    @media (min-resolution: 1.70dppx) and (max-resolution: 1.95dppx) {
+      .titlebar-button {
+        padding-left: 14.1px;
+        padding-right: 14.1px;
+      }
+      .titlebar-button > .toolbarbutton-icon {
+        width: 10.8px;
+        height: 10.8px;
       }
     }
-  }
 
-  @media (-moz-os-version: windows-vista),
-         (-moz-os-version: windows-win7),
+    /* 225% dpi should result in the same device pixel sizes as 200% dpi. */
+    @media (min-resolution: 2.20dppx) and (max-resolution: 2.45dppx) {
+      .titlebar-button {
+        padding-left: 15.3333px;
+        padding-right: 15.3333px;
+      }
+      .titlebar-button > .toolbarbutton-icon {
+        width: 10.8px;
+        height: 10.8px;
+      }
+    }
+
+    /* 275% dpi should result in the same device pixel sizes as 250% dpi. */
+    @media (min-resolution: 2.70dppx) and (max-resolution: 2.95dppx) {
+      /* NB: todo: this should also change padding on the buttons
+       * themselves, but without a device to test this on, it's
+       * impossible to know by how much. */
+      .titlebar-button > .toolbarbutton-icon {
+        width: 10.8px;
+        height: 10.8px;
+      }
+    }
+    
+     
+    @media not all and (-moz-windows-default-theme) {
+      .titlebar-button {
+        background-color: -moz-field;
+      }
+      .titlebar-button:hover {
+        background-color: Highlight;
+      }
+
+      #titlebar-min {
+        list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-outine-inverted);
+      }
+
+      #titlebar-max {
+        list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-outine-inverted);
+      }
+
+      #main-window[sizemode="maximized"] #titlebar-max {
+        list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-outine-inverted);
+      }
+
+      #titlebar-close {
+        list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outine-inverted);
+      }
+      #titlebar-close:hover {
+        list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outine-inverted);
+      }
+    }
+  } /* Win 10 styling */
+
+  @media (-moz-os-version: windows-win7),
          (-moz-os-version: windows-win8) {
     #main-window[sizemode="maximized"] #titlebar-buttonbox {
       margin-inline-end: 3px;
diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css
index 2de5a6545..15e776da1 100644
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -16,6 +16,8 @@
 %define conditionalForwardWithUrlbar window:not([chromehidden~="toolbar"]) #urlbar-wrapper
 
 :root {
+  --titlebar-text-color: currentColor;
+
   --space-above-tabbar: 15px;
 
   --backbutton-urlbar-overlap: 6px;
@@ -187,19 +189,22 @@ toolbar:-moz-lwtheme {
   transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
 }
 
+#toolbar-menubar,
+#TabsToolbar {
+  color: var(--titlebar-text-color);
+}
+
 @media not all and (-moz-windows-compositor),
        not all and (-moz-windows-default-theme) {
   /* Please keep the menu text colors in this media block in sync with
    * devedition.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;
   }
 }
 
diff --git a/browser/themes/windows/caption-buttons.svg b/browser/themes/windows/caption-buttons.svg
index 3ba4f95a1..9cb42d539 100644
--- a/browser/themes/windows/caption-buttons.svg
+++ b/browser/themes/windows/caption-buttons.svg
@@ -1,49 +1,61 @@
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <!-- 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(:target) {
       display: none;
     }
+
     use:target > g {
       display: initial;
     }
 
-    g {
-      stroke: ButtonText;
-      stroke-width: 0.9px;
-      fill: none;
-    }
-    g:not([id|="close"]) {
-      shape-rendering: crispEdges;
+    .highlight > g {
+      stroke: HighlightText;
     }
 
-    .highcontrast {
-      stroke-width: 1.9px;
+    .inactive > g {
+      stroke: black;
     }
-    .highcontrast-hover > g {
-      stroke: HighlightText;
+    
+    .bolder {
+      stroke-width: 1.6px;
+      stroke: black;
     }
-    .white > g {
-      stroke: #fff;
+    
+    .outline  {
+      stroke-width: 4px;
+      stroke: white;
+      opacity: 0.75;
     }
-    .themes {
-      stroke: #fff;
-      stroke-width: 1.9px;
+    
+    .inverted  {
+      stroke-width: 1.6px;
+      stroke: white;
     }
 
-    .outer-stroke {
-      stroke: #000;
-      stroke-width: 3.6;
-      opacity: .75;
+    .outline-inverted  {
+      stroke-width: 4px;
+      stroke: black;
+      opacity: 0.75;
     }
-    .restore-background-window {
-      stroke-width: .9;
+    
+    .outline-thinner {
+      stroke-width: 3.6px;
     }
+
   </style>
+
   <g id="close">
-    <path d="M1,1 l 10,10 M1,11 l 10,-10"/>
+    <line x1="1" y1="1" x2="11" y2="11" stroke-width="1px"/>
+    <line x1="11" y1="1" x2="1" y2="11" stroke-width="1px"/>
   </g>
   <g id="maximize">
     <rect x="1.5" y="1.5" width="9" height="9"/>
@@ -56,45 +68,54 @@
     <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 id="close-outline">
+    <line x1="1" y1="1" x2="11" y2="11" stroke-linecap="round" class="outline"/>
+    <line x1="11" y1="1" x2="1" y2="11" stroke-linecap="round" class="outline"/>
+    <line x1="1" y1="1" x2="11" y2="11" class="bolder"/>
+    <line x1="11" y1="1" x2="1" y2="11" class="bolder"/>
   </g>
-  <g id="maximize-highcontrast" class="highcontrast">
-    <rect x="2" y="2" width="8" height="8"/>
+  <g id="maximize-outline">
+    <rect x="1.2" y="1.2" width="9.6" height="9.6" stroke-linecap="round" class="outline"/>
+    <rect x="1.5" y="1.5" width="9" height="9" class="bolder"/>
   </g>
-  <g id="minimize-highcontrast" class="highcontrast">
-    <line x1="1" y1="6" x2="11" y2="6"/>
+  <g id="minimize-outline">
+    <line x1="1" y1="5.5" x2="11" y2="5.5" stroke-linecap="round" class="outline outline-thinner"/>
+    <line x1="1" y1="5.5" x2="11" y2="5.5" class="bolder"/>
   </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 id="restore-outline">
+    <rect x="1.5" y="3.5" width="7" height="7" stroke-linecap="round" class="outline"/>
+    <polyline points="3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5" stroke-linecap="round" class="outline"/>
+    <rect x="1.5" y="3.5" width="7" height="7" class="bolder"/>
+    <polyline points="3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5" class="bolder"/>
   </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 id="close-outline-inverted">
+    <line x1="1" y1="1" x2="11" y2="11" stroke-linecap="round" class="outline-inverted"/>
+    <line x1="11" y1="1" x2="1" y2="11" stroke-linecap="round" class="outline-inverted"/>
+    <line x1="1" y1="1" x2="11" y2="11" class="inverted"/>
+    <line x1="11" y1="1" x2="1" y2="11" class="inverted"/>
   </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 id="maximize-outline-inverted">
+    <rect x="1.2" y="1.2" width="9.6" height="9.6" stroke-linecap="round" class="outline-inverted"/>
+    <rect x="1.5" y="1.5" width="9" height="9" class="inverted"/>
   </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 id="minimize-outline-inverted">
+    <line x1="1" y1="5.5" x2="11" y2="5.5" stroke-linecap="round" class="outline-inverted outline-thinner"/>
+    <line x1="1" y1="5.5" x2="11" y2="5.5" class="inverted"/>
   </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 id="restore-outline-inverted">
+    <rect x="1.5" y="3.5" width="7" height="7" stroke-linecap="round" class="outline-inverted"/>
+    <polyline points="3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5" stroke-linecap="round" class="outline-inverted"/>
+    <rect x="1.5" y="3.5" width="7" height="7" class="inverted"/>
+    <polyline points="3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5" class="inverted"/>
   </g>
+  
+  <use id="close-highlight" class="highlight" xlink:href="#close"/>
+  <use id="maximize-highlight" class="highlight" xlink:href="#maximize"/>
+  <use id="minimize-highlight" class="highlight" xlink:href="#minimize"/>
+  <use id="restore-highlight" class="highlight" xlink:href="#restore"/>
+  <use id="close-inactive" class="inactive" xlink:href="#close"/>
+  <use id="maximize-inactive" class="inactive" xlink:href="#maximize"/>
+  <use id="minimize-inactive" class="inactive" xlink:href="#minimize"/>
+  <use id="restore-inactive" class="inactive" xlink:href="#restore"/>
 </svg>
diff --git a/browser/themes/windows/devedition.css b/browser/themes/windows/devedition.css
index 4c25f33a1..2dc72eeeb 100644
--- a/browser/themes/windows/devedition.css
+++ b/browser/themes/windows/devedition.css
@@ -193,14 +193,12 @@
   /* Use proper menu text styling in Win7 classic mode (copied from browser.css) */
   @media not all and (-moz-windows-compositor),
          not all and (-moz-windows-default-theme) {
-    #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 {