Bug 960517: Windows 8 style menu-panel buttons. r=dao

browser/themes/shared/customizableui/panelUIOverlay.inc.css

@@ -722,10 +722,8 @@ toolbarpaletteitem[place="palette"] > #search-container {
   padding: .5em;
   margin: 0;
   -moz-box-flex: 1;
-  /* reduce the width with 2px for each button to compensate for two separators
+  min-width: calc(@menuPanelButtonWidth@);
-     of 3px. */
+  max-width: calc(@menuPanelButtonWidth@);
-  min-width: calc(@menuPanelButtonWidth@ - 2px);
-  max-width: calc(@menuPanelButtonWidth@ - 2px);
   /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
      1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
   height: calc(2.2em + 4px);
@@ -733,6 +731,14 @@ toolbarpaletteitem[place="palette"] > #search-container {
   -moz-box-orient: horizontal;
 }
 
+#edit-controls@inAnyPanel@ > #copy-button,
+#zoom-controls@inAnyPanel@ > #zoom-reset-button {
+  /* reduce the width with 2px for this button to compensate for two separators
+     of 1px. */
+  min-width: calc(@menuPanelButtonWidth@ - 2px);
+  max-width: calc(@menuPanelButtonWidth@ - 2px);
+}
+
 #edit-controls@inAnyPanel@ > toolbarbutton[disabled] > .toolbarbutton-icon,
 #zoom-controls@inAnyPanel@ > toolbarbutton[disabled] > .toolbarbutton-icon {
   opacity: .25;
@@ -762,8 +768,7 @@ toolbarpaletteitem[place="palette"] > #search-container {
   border-bottom-left-radius: 0;
 }
 
-#edit-controls > separator,
+.toolbaritem-combined-buttons > separator {
-#zoom-controls > separator {
   -moz-appearance: none;
   width: 3px;
   -moz-box-align: stretch;
@@ -775,6 +780,19 @@ toolbarpaletteitem[place="palette"] > #search-container {
   background-repeat: no-repeat;
 }
 
+.toolbaritem-combined-buttons@inAnyPanel@ > separator {
+  margin: .5em 0;
+  width: 1px;
+  background: hsla(210,4%,10%,.15);
+  transition-property: margin;
+  transition-duration: 10ms;
+  transition-timing-function: ease;
+}
+
+.toolbaritem-combined-buttons@inAnyPanel@:hover > separator {
+  margin: 0;
+}
+
 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
   padding: 0;
 }

browser/themes/windows/customizableui/panelUIOverlay-aero.css

@@ -0,0 +1,7 @@
+/* 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/. */
+
+%define WINDOWS_AERO
+%include panelUIOverlay.css
+%undef WINDOWS_AERO

browser/themes/windows/customizableui/panelUIOverlay.css

@@ -34,3 +34,24 @@
 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
   padding: 0 6px;
 }
+
+%ifdef WINDOWS_AERO
+/* Win8 and beyond. */
+@media not all and (-moz-os-version: windows-vista) {
+  @media not all and (-moz-os-version: windows-win7) {
+    panelview .toolbarbutton-1,
+    .subviewbutton,
+    .widget-overflow-list .toolbarbutton-1,
+    .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
+    #edit-controls@inAnyPanel@ > toolbarbutton,
+    #zoom-controls@inAnyPanel@ > toolbarbutton {
+      border-radius: 0;
+    }
+
+    #edit-controls@inAnyPanel@,
+    #zoom-controls@inAnyPanel@ {
+      border-radius: 0;
+    }
+  }
+}
+%endif

browser/themes/windows/jar.mn

@@ -411,7 +411,7 @@ browser.jar:
         skin/classic/aero/browser/customizableui/customizeMode-separatorHorizontal.png  (customizableui/customizeMode-separatorHorizontal.png)
         skin/classic/aero/browser/customizableui/customizeMode-separatorVertical.png  (customizableui/customizeMode-separatorVertical.png)
         skin/classic/aero/browser/customizableui/menuPanel-customizeFinish.png  (../shared/customizableui/menuPanel-customizeFinish.png)
-*       skin/classic/aero/browser/customizableui/panelUIOverlay.css  (customizableui/panelUIOverlay.css)
+*       skin/classic/aero/browser/customizableui/panelUIOverlay.css  (customizableui/panelUIOverlay-aero.css)
         skin/classic/aero/browser/customizableui/subView-arrow-back-inverted.png  (../shared/customizableui/subView-arrow-back-inverted.png)
 *       skin/classic/aero/browser/downloads/allDownloadsViewOverlay.css (downloads/allDownloadsViewOverlay-aero.css)
         skin/classic/aero/browser/downloads/buttons.png              (downloads/buttons-aero.png)