Bug 1188778 - Fix the caption buttons on Win 10. r=clokep, a=rkent
authorRichard Marti <richard.marti@gmail.com>
Sat, 12 Sep 2015 20:30:17 +0200
changeset 22888 11097c52b2716277c3e61d67f4eaa5da6ba47333
parent 22887 9d3eefbed90e77133c834eabf0d578c0f297b6e7
child 22889 0681e92bad2e320308672c8700622536af538f84
push id1465
push userkent@caspia.com
push dateMon, 14 Sep 2015 21:51:35 +0000
treeherdercomm-beta@48e8ee8813e3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersclokep, rkent
bugs1188778, 1173725, 1184932
Bug 1188778 - Fix the caption buttons on Win 10. r=clokep, a=rkent Referenced Bugs: Bug 1173725 - Title bar and tab strip should have a darker background color on Windows 10 Bug 1184932 - [Windows 10] Tweak SVGs for caption buttons to match the native color + thickness more precisely on different DPI scaling settings
mail/themes/windows/jar.mn
mail/themes/windows/mail/icons/caption-buttons.svg
mail/themes/windows/mail/mailWindow1.css
--- a/mail/themes/windows/jar.mn
+++ b/mail/themes/windows/jar.mn
@@ -551,9 +551,10 @@ classic.jar:
   skin/classic/aero/messenger/icons/box-logo.png                   (mail/icons/box-logo.png)
   skin/classic/aero/messenger/sharedPlatform.css                   (mail/windowsShared.css)
   skin/classic/aero/messenger/shared/mailWindow1.css               (../shared/mail/mailWindow1.css)
   skin/classic/aero/messenger/shared/messenger.css                 (../shared/mail/messenger.css)
   skin/classic/aero/messenger/shared/messageHeader.css             (../shared/mail/messageHeader.css)
   skin/classic/aero/messenger/shared/tabmail.css                   (../shared/mail/tabmail.css)
   skin/classic/aero/messenger/shared/addressbook.css               (../shared/mail/addressbook.css)
   skin/classic/aero/messenger/shared/accountProvisioner.css        (../shared/mail/accountProvisioner.css)
+  skin/classic/aero/messenger/icons/caption-buttons.svg            (mail/icons/caption-buttons.svg)
 #endif
new file mode 100644
--- /dev/null
+++ b/mail/themes/windows/mail/icons/caption-buttons.svg
@@ -0,0 +1,107 @@
+<!-- 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([id|="close"]) {
+      shape-rendering: crispEdges;
+    }
+
+    g:not(:target) {
+      display: none;
+    }
+
+    use:target > g {
+      display: initial;
+    }
+
+    g.highlight {
+      stroke-width: 1.9px;
+    }
+
+    g.themes {
+      stroke: #fff;
+      stroke-width: 1.9px;
+    }
+
+    .outer-stroke {
+      stroke: #000;
+      stroke-width: 3.6px;
+      opacity: .75;
+    }
+
+    .restore-background-window {
+      stroke-width: .9;
+    }
+
+    [id$="-highcontrast-hover"] > g {
+      stroke: HighlightText;
+    }
+
+    [id$="-white"] > g {
+      stroke: #fff;
+    }
+
+  </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" 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>
--- a/mail/themes/windows/mail/mailWindow1.css
+++ b/mail/themes/windows/mail/mailWindow1.css
@@ -529,8 +529,182 @@ treechildren::-moz-tree-image(subjectCol
 }
 
 @media not all and (-moz-windows-compositor) {
   #mail-toolbar-menubar2[autohide="false"] +
   #tabs-toolbar > .titlebar-placeholder {
     display: none;
   }
 }
+
+@media (-moz-os-version: windows-win10) {
+  #messengerWindow {
+    -moz-appearance: -moz-win-glass;
+  }
+
+  @media (-moz-windows-default-theme) {
+    #messengerWindow {
+      background-color: hsl(0, 0%, 82%);
+    }
+  }
+
+  #titlebar-buttonbox,
+  .titlebar-button {
+    -moz-appearance: none !important;
+  }
+
+  #messengerWindow[sizemode="maximized"] #titlebar-buttonbox {
+    -moz-margin-end: 0;
+  }
+
+  .titlebar-button {
+    display: -moz-box;
+    border: none;
+    margin: 0 !important;
+    padding: 10px 17px;
+  }
+
+  #messengerWindow[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://messenger/skin/icons/caption-buttons.svg#minimize);
+  }
+
+  #titlebar-max {
+    list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#maximize);
+  }
+
+  #messengerWindow[sizemode="maximized"] #titlebar-max {
+    list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#restore);
+  }
+
+  #titlebar-close {
+    list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#close);
+  }
+  #titlebar-close:hover {
+    list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#close-white);
+  }
+
+  #titlebar-min:-moz-lwtheme {
+    list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#minimize-themes);
+  }
+  #titlebar-max:-moz-lwtheme {
+    list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#maximize-themes);
+  }
+  #messengerWindow[sizemode="maximized"] #titlebar-max:-moz-lwtheme {
+    list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#restore-themes);
+  }
+  #titlebar-close:-moz-lwtheme {
+    list-style-image: url(chrome://messenger/skin/icons/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;
+    }
+  }
+
+  /* 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;
+    }
+  }
+
+  /* 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 (-moz-windows-default-theme) {
+    .titlebar-button:hover {
+      background-color: hsla(0, 0%, 0%, .12);
+    }
+
+    .titlebar-button:hover:active {
+      background-color: hsla(0, 0%, 0%, .22);
+    }
+
+    .titlebar-button:not(:hover) > .toolbarbutton-icon:-moz-window-inactive {
+      opacity: 0.5;
+    }
+
+    #titlebar-close:hover {
+      background-color: hsl(355, 86%, 49%);
+    }
+
+    #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://messenger/skin/icons/caption-buttons.svg#minimize-highcontrast);
+    }
+    #titlebar-min:hover {
+      list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#minimize-highcontrast-hover);
+    }
+
+    #titlebar-max {
+      list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#maximize-highcontrast);
+    }
+    #titlebar-max:hover {
+      list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#maximize-highcontrast-hover);
+    }
+
+    #messengerWindow[sizemode="maximized"] #titlebar-max {
+      list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#restore-highcontrast);
+    }
+    #messengerWindow[sizemode="maximized"] #titlebar-max:hover {
+      list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#restore-highcontrast-hover);
+    }
+
+    #titlebar-close {
+      list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#close-highcontrast);
+    }
+    #titlebar-close:hover {
+      list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#close-highcontrast-hover);
+    }
+  }
+}