Use windows 10 Accent colors.

1 files changed, 314 insertions, 152 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;