Merge branch 'ported-moebius'

6 files changed, 427 insertions, 227 deletions

diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
index d813a55cc8..a8aff1bd7b 100755
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -8075,6 +8075,7 @@ var ToolbarIconColor = {
     window.addEventListener("activate", this);
     window.addEventListener("deactivate", this);
     Services.obs.addObserver(this, "lightweight-theme-styling-update", false);
+    gPrefService.addObserver("ui.colorChanged", this, false);
 
     // If the window isn't active now, we assume that it has never been active
     // before and will soon become active such that inferFromText will be
@@ -8089,6 +8090,7 @@ var ToolbarIconColor = {
     window.removeEventListener("activate", this);
     window.removeEventListener("deactivate", this);
     Services.obs.removeObserver(this, "lightweight-theme-styling-update");
+    gPrefService.removeObserver("ui.colorChanged", this);
   },
 
   handleEvent: function (event) {
@@ -8107,6 +8109,18 @@ var ToolbarIconColor = {
         // lightweight-theme-styling-update observer.
         setTimeout(() => { this.inferFromText(); }, 0);
         break;
+      case "nsPref:changed":
+        // system color change
+        var colorChangedPref = false;
+        try {
+          colorChangedPref = gPrefService.getBoolPref("ui.colorChanged");
+        } catch(e) { }
+        // if pref indicates change, call inferFromText() on a small delay
+        if (colorChangedPref == true)
+          setTimeout(() => { this.inferFromText(); }, 300);
+        break;
+      default:
+        console.error("ToolbarIconColor: Uncaught topic " + aTopic);
     }
   },
 
@@ -8130,16 +8144,19 @@ var ToolbarIconColor = {
     let luminances = new Map;
     for (let toolbar of document.querySelectorAll(toolbarSelector)) {
       let [r, g, b] = parseRGB(getComputedStyle(toolbar).color);
-      let luminance = 0.2125 * r + 0.7154 * g + 0.0721 * b;
+      let luminance = (2 * r + 5 * g + b) / 8;
       luminances.set(toolbar, luminance);
     }
 
     for (let [toolbar, luminance] of luminances) {
-      if (luminance <= 110)
+      if (luminance <= 128)
         toolbar.removeAttribute("brighttext");
       else
         toolbar.setAttribute("brighttext", "true");
     }
+    
+    // Clear pref if set, since we're done applying the color changes.
+    gPrefService.clearUserPref("ui.colorChanged");
   }
 }
 
diff --git a/browser/themes/windows/browser-aero.css b/browser/themes/windows/browser-aero.css
index 5ff9d8250a..28599af7a0 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;
@@ -303,11 +465,6 @@
   }
 
   @media (-moz-windows-default-theme) {
-    #toolbar-menubar:not(:-moz-lwtheme),
-    #TabsToolbar:not(:-moz-lwtheme) {
-      color: black;
-    }
-
     #main-menubar > menu:not(:-moz-lwtheme) {
       color: inherit;
     }
diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css
index 2de5a65455..15e776da16 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 3ba4f95a1d..9cb42d5398 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 4c25f33a1c..2dc72eeeb3 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 {
diff --git a/widget/windows/nsWindow.cpp b/widget/windows/nsWindow.cpp
index e721267ba1..a8923f78e3 100644
--- a/widget/windows/nsWindow.cpp
+++ b/widget/windows/nsWindow.cpp
@@ -7141,8 +7141,10 @@ nsWindow::OnSysColorChanged()
     NotifySysColorChanged();
     // On Windows 10 only, we trigger a theme change to pick up changed media
     // queries that are needed for accent color changes.
+    // We also set a temp pref to notify the FE that the colors have changed.
     if (IsWin10OrLater()) {
       NotifyThemeChanged();
+      Preferences::SetBool("ui.colorChanged", true);
     }
   }
 }