Bug 1184934 - Add caption buttons for themes and high contrast mode. r=dolske
authorStephen Horlander <shorlander@mozilla.com>
Sat, 25 Jul 2015 13:56:18 -0700
changeset 286358 da4b14a3178a2fa0bd58eb52ea1a38e4787267f5
parent 286357 7adf4ce8c5e0f438aaa502f8cd34ef18ecad3fa0
child 286359 7449a9371810d8f813ece7043dcdb98963a05b6c
push id5067
push userraliiev@mozilla.com
push dateMon, 21 Sep 2015 14:04:52 +0000
treeherdermozilla-beta@14221ffe5b2f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdolske
bugs1184934
milestone42.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1184934 - Add caption buttons for themes and high contrast mode. r=dolske
browser/themes/windows/browser-aero.css
browser/themes/windows/caption-buttons.svg
--- a/browser/themes/windows/browser-aero.css
+++ b/browser/themes/windows/browser-aero.css
@@ -142,16 +142,30 @@
 
         #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);
         }
 
+        #titlebar-min:-moz-lwtheme {
+          list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-themes);
+        }
+        #titlebar-max:-moz-lwtheme {
+          list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-themes);
+        }
+        #main-window[sizemode="maximized"] #titlebar-max:-moz-lwtheme {
+          list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-themes);
+        }
+        #titlebar-close:-moz-lwtheme {
+          list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-themes);
+        }
+
+
         /* 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;
           }
         }
@@ -217,30 +231,42 @@
         @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-highlight);
+            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-highlight);
+            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-highlight);
+            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-highlight);
+            list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highcontrast-hover);
           }
         }
       }
     }
   }
 
   @media (-moz-os-version: windows-vista),
          (-moz-os-version: windows-win7),
--- a/browser/themes/windows/caption-buttons.svg
+++ b/browser/themes/windows/caption-buttons.svg
@@ -4,52 +4,104 @@
 <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(#close) {
+    g:not([id|="close"]) {
       shape-rendering: crispEdges;
     }
 
     g:not(:target) {
       display: none;
     }
 
     use:target > g {
       display: initial;
     }
 
-    [id$="-highlight"] > g {
+    g.highlight {
+      stroke-width: 1.9px;
+    }
+
+    g.themes {
+      stroke: #fff;
+      stroke-width: 1.9px;
+    }
+
+    .outer-stroke {
+      stroke: #000;
+      stroke-width: 3.6;
+      opacity: .75;
+    }
+
+    .restore-background-window {
+      stroke-width: .9;
+    }
+
+    [id$="-highcontrast-hover"] > g {
       stroke: HighlightText;
     }
 
     [id$="-white"] > g {
       stroke: #fff;
     }
+
   </style>
   <g id="close">
-    <line x1="1" y1="1" x2="11" y2="11"/>
-    <line x1="11" y1="1" x2="1" y2="11"/>
+    <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-highlight" xlink:href="#close"/>
-  <use id="maximize-highlight" xlink:href="#maximize"/>
-  <use id="minimize-highlight" xlink:href="#minimize"/>
-  <use id="restore-highlight" xlink:href="#restore"/>
 
   <use id="close-white" xlink:href="#close"/>
   <use id="maximize-white" xlink:href="#maximize"/>
   <use id="minimize-white" xlink:href="#minimize"/>
   <use id="restore-white" xlink:href="#restore"/>
+
+  <g id="close-highcontrast" class="highlight">
+    <path d="M1,1 l 10,10 M1,11 l 10,-10"/>
+  </g>
+  <g id="maximize-highcontrast" class="highlight">
+    <rect x="2" y="2" width="8" height="8"/>
+  </g>
+  <g id="minimize-highcontrast" class="highlight">
+    <line x1="1" y1="6" x2="11" y2="6"/>
+  </g>
+  <g id="restore-highcontrast" class="highlight">
+    <rect x="2" y="4" width="6" height="6"/>
+    <polyline points="3.5,1.5 10.5,1.5 10.5,8.5" class="restore-background-window"/>
+  </g>
+
+  <use id="close-highcontrast-hover" xlink:href="#close-highcontrast"/>
+  <use id="maximize-highcontrast-hover" xlink:href="#maximize-highcontrast"/>
+  <use id="minimize-highcontrast-hover" xlink:href="#minimize-highcontrast"/>
+  <use id="restore-highcontrast-hover" xlink:href="#restore-highcontrast"/>
+
+  <g id="close-themes" class="themes">
+    <path d="M1,1 l 10,10 M1,11 l 10,-10" class="outer-stroke" />
+    <path d="M1.75,1.75 l 8.5,8.5 M1.75,10.25 l 8.5,-8.5"/>
+  </g>
+  <g id="maximize-themes" class="themes">
+    <rect x="2" y="2" width="8" height="8" class="outer-stroke"/>
+    <rect x="2" y="2" width="8" height="8"/>
+  </g>
+  <g id="minimize-themes" class="themes">
+    <line x1="0" y1="6" x2="12" y2="6" class="outer-stroke"/>
+    <line x1="1" y1="6" x2="11" y2="6"/>
+  </g>
+  <g id="restore-themes" class="themes">
+    <path d="M2,4 l 6,0 l 0,6 l -6,0z M2.5,1.5 l 8,0 l 0,8" class="outer-stroke"/>
+    <rect x="2" y="4" width="6" height="6"/>
+    <polyline points="3.5,1.5 10.5,1.5 10.5,8.5" class="restore-background-window"/>
+  </g>
 </svg>