Bug 873251 - [Metro] Part 1 of 2: Update buttons and backgrounds of Firefox app bar. r=jwilde

--HG--
rename : browser/metro/theme/images/forward.png => browser/metro/theme/images/appbar-forward.png
rename : browser/metro/theme/images/reload.png => browser/metro/theme/images/appbar-reload.png
rename : browser/metro/theme/images/stop-hdpi.png => browser/metro/theme/images/appbar-stop.png

browser/metro/base/content/appbar.js

@@ -8,7 +8,7 @@ var Appbar = {
   get jsShellButton() { return document.getElementById('jsshell-button'); },
   get starButton()    { return document.getElementById('star-button'); },
   get pinButton()     { return document.getElementById('pin-button'); },
-  get moreButton()    { return document.getElementById('more-button'); },
+  get menuButton()    { return document.getElementById('menu-button'); },
 
   // track selected/active richgrid/tilegroup - the context for contextual action buttons
   activeTileset: null,
@@ -111,7 +111,7 @@ var Appbar = {
     }
   },
 
-  onMoreButton: function(aEvent) {
+  onMenuButton: function(aEvent) {
       var typesArray = ["find-in-page"];
       try {
         // If we have a valid http or https URI then show the view on desktop
@@ -124,7 +124,7 @@ var Appbar = {
       } catch(ex) {
       }
 
-      var x = this.moreButton.getBoundingClientRect().left;
+      var x = this.menuButton.getBoundingClientRect().left;
       var y = Elements.navbar.getBoundingClientRect().top;
       ContextMenuUI.showContextMenu({
         json: {

browser/metro/base/content/browser.xul

@@ -318,10 +318,10 @@
         <observes element="bcast_windowState" attribute="*"/>
         <observes element="bcast_urlbarState" attribute="*"/>
 
-        <toolbarbutton id="back-button" command="cmd_back"/>
+        <toolbarbutton id="back-button" class="appbar-primary" command="cmd_back"/>
+        <toolbarbutton id="forward-button" class="appbar-primary" command="cmd_forward"/>
 
         <hbox id="urlbar-container" flex="1" observes="bcast_urlbarState">
-          <toolbarbutton id="forward-button" command="cmd_forward"/>
           <hbox id="urlbar" flex="1">
             <box id="identity-box" role="button">
               <hbox id="identity-box-inner" align="center" mousethrough="always">
@@ -341,20 +341,20 @@
                      onkeydown="BrowserUI.navEditKeyPress();"
                      onblur="BrowserUI._urlbarBlurred();"/>
           </hbox>
-        </hbox>
 
-        <toolbarbutton id="tool-reload" oncommand="CommandUpdater.doCommand(event.shiftKey ? 'cmd_forceReload' : 'cmd_reload');"/>
-        <toolbarbutton id="tool-stop" command="cmd_stop"/>
+          <toolbarbutton id="reload-button" oncommand="CommandUpdater.doCommand(event.shiftKey ? 'cmd_forceReload' : 'cmd_reload');"/>
+          <toolbarbutton id="stop-button" command="cmd_stop"/>
+        </hbox>
 
         <!-- developer buttons -->
         <toolbarbutton id="console-button" oncommand="Appbar.onConsoleButton()"/>
         <toolbarbutton id="jsshell-button" oncommand="Appbar.onJSShellButton()"/>
 
         <toolbarbutton id="download-button" oncommand="Appbar.onDownloadButton()"/>
-        <toolbarbutton id="star-button" type="checkbox" oncommand="Appbar.onStarButton()"/>
-        <toolbarbutton id="pin-button" type="checkbox" oncommand="Appbar.onPinButton()"/>
-        <toolbarbutton id="more-button" onclick="Appbar.onMoreButton(event)"/>
-      </toolbar>
+        <toolbarbutton id="star-button" class="appbar-primary" type="checkbox" oncommand="Appbar.onStarButton()"/>
+        <toolbarbutton id="pin-button" class="appbar-primary" type="checkbox" oncommand="Appbar.onPinButton()"/>
+        <toolbarbutton id="menu-button" class="appbar-primary" oncommand="Appbar.onMenuButton(event)"/>
+       </toolbar>
     </appbar>
 
     <!-- Context button bar -->

browser/metro/theme/browser.css

@@ -5,9 +5,8 @@
 %filter substitution
 %include defines.inc
 
-%define forward_transition_length 150ms
-%define forward_width 22px
-%define forward_spacing 12px
+%define forward_transition_length 200ms
+%define forward_spacing 50px
 
 /* Progress meter ------------------------------------------------- */
 
@@ -213,7 +212,7 @@ documenttab[selected] .documenttab-selection {
 }
 
 #newtab-button {
-  list-style-image: url("images/newtab-default.png");
+  list-style-image: url(chrome://browser/skin/images/newtab-default.png);
 }
 
 /* Selection overlay and monocles ----------------------------------------------- */
@@ -247,48 +246,49 @@ documenttab[selected] .documenttab-selection {
 /* Toolbar ------------------------------------------------------------------ */
 
 #toolbar {
-  background-color: @panel_dark_color@;
-  background-image: @panel_dark_background@;
+  background-color: @panel_light_color@;
 }
 
 #toolbar > #back-button {
-  list-style-image: url(chrome://browser/skin/images/back.png);
-  -moz-image-region: rect(0 96px 48px 48px);
+  list-style-image: url(chrome://browser/skin/images/appbar-back.png);
   position: relative;
   z-index: 1;
-  -moz-margin-end: -@forward_spacing@;
-  min-height: 48px;
-  max-height: 48px;
+  transition: opacity @forward_transition_length@ ease-out;
 }
 
 #toolbar > #back-button[disabled] {
   visibility: visible;
-  -moz-image-region: rect(0 48px 48px 0);
+  opacity: 0.5;
 }
 
-#forward-button {
-  list-style-image: url(chrome://browser/skin/images/forward.png);
-  -moz-image-region: rect(1px 22px 25px 0); /* width: 22px; height: 24px; */
-  -moz-border-end: @metro_border_thick@ solid @urlbar_border_color@;
-  margin: -1.5px 0;
-  padding: 0;
-  -moz-padding-start: calc(@metro_spacing_snormal@ + @forward_spacing@);
-  -moz-padding-end: @forward_spacing@;
-  transition: -moz-margin-start @forward_transition_length@ ease-out,
+#toolbar > #forward-button {
+  list-style-image: url(chrome://browser/skin/images/appbar-forward.png);
+  transition: margin @forward_transition_length@ ease-out,
+              visibility @forward_transition_length@ ease-out,
               opacity @forward_transition_length@ ease-out;
 }
 
-#forward-button[disabled] {
-  -moz-margin-start: calc(-@forward_width@ - @forward_spacing@ * 2);
+#toolbar > #forward-button[disabled] {
+  -moz-margin-start: -@forward_spacing@;
+  visibility: hidden;
   opacity: 0;
   pointer-events: none;
 }
 
+@media (min-resolution: 130dpi) {
+  #toolbar > #back-button {
+    list-style-image: url(chrome://browser/skin/images/appbar-back@1.4x.png);
+  }
+
+  #toolbar > #forward-button {
+    list-style-image: url(chrome://browser/skin/images/appbar-forward@1.4x.png);
+  }
+}
++
 /* URL bar */
 #urlbar-container {
   border: @metro_border_thick@ solid @urlbar_border_color@;
-  margin: 0;
-  -moz-margin-end: @toolbar_horizontal_spacing@;
+  margin: 0 @toolbar_horizontal_spacing@;
   padding: 0;
   background-color: @field_background_color@;
   overflow: hidden;
@@ -335,17 +335,17 @@ documenttab[selected] .documenttab-selection {
 }
 
 /* Combined stop-reload button */
-#tool-reload {
-  list-style-image: url("chrome://browser/skin/images/reload.png");
+#reload-button {
+  list-style-image: url(chrome://browser/skin/images/appbar-reload.png);
 }
 
-#tool-stop {
-  list-style-image: url("chrome://browser/skin/images/stop-hdpi.png");
+#stop-button {
+  list-style-image: url(chrome://browser/skin/images/appbar-stop.png);
 }
 
-#toolbar[mode="loading"] > #tool-reload,
-#toolbar:-moz-any([mode="edit"], [mode="view"]) > #tool-stop,
-#toolbar[viewstate="snapped"] > #tool-stop ~ toolbarbutton {
+#toolbar[mode="loading"] > #urlbar-container > #reload-button,
+#toolbar:-moz-any([mode="edit"], [mode="view"]) > #urlbar-container > #stop-button,
+#toolbar[viewstate="snapped"] > #urlbar-container ~ toolbarbutton {
   visibility: collapse;
 }
 
@@ -405,6 +405,45 @@ appbar > toolbar > toolbarbutton:active {
   -moz-image-region: rect(80px, 200px, 120px, 160px);
 }
 
+#toolbar > .appbar-primary {
+  -moz-image-region: rect(0 40px 40px 0);
+}
+
+#toolbar > .appbar-primary:not([checked]):hover:not(:active) {
+  -moz-image-region: rect(0 80px 40px 40px);
+}
+
+#toolbar > .appbar-primary:not([checked]):active {
+  -moz-image-region: rect(0 120px 40px 80px);
+}
+
+#toolbar > .appbar-primary[checked]:hover:not(:active) {
+  -moz-image-region: rect(0 160px 40px 120px);
+}
+
+@media (min-resolution: 130dpi) {
+  #toolbar > .appbar-primary > .toolbarbutton-icon {
+    width: 40px;
+    height: 40px;
+  }
+
+  #toolbar > .appbar-primary {
+    -moz-image-region: rect(0 56px 56px 0);
+  }
+
+  #toolbar > .appbar-primary:not([checked]):hover:not(:active) {
+    -moz-image-region: rect(0 112px 56px 56px);
+  }
+
+  #toolbar > .appbar-primary:not([checked]):active {
+    -moz-image-region: rect(0 168px 56px 112px);
+  }
+
+  #toolbar > .appbar-primary[checked]:hover:not(:active) {
+    -moz-image-region: rect(0 224px 56px 168px);
+  }
+}
+
 /* Application-Specific */
 #download-button {
   -moz-image-region: rect(0px, 40px, 40px, 0px) !important;
@@ -429,29 +468,32 @@ appbar > toolbar > toolbarbutton:active {
 /* Page-Specific */
 
 #pin-button {
-  -moz-image-region: rect(0px, 240px, 40px, 200px) !important;
-}
-#pin-button:hover {
-  -moz-image-region: rect(40px, 240px, 80px, 200px) !important;
-}
-#pin-button:active {
-  -moz-image-region: rect(80px, 240px, 120px, 200px) !important;
-}
-#pin-button[checked] {
-  -moz-image-region: rect(0px, 280px, 40px, 240px) !important;
+  list-style-image: url(chrome://browser/skin/images/appbar-pin.png);
 }
 
 #star-button {
-  -moz-image-region: rect(0px, 360px, 40px, 320px) !important;
+  list-style-image: url(chrome://browser/skin/images/appbar-star.png);
 }
-#star-button:hover {
-  -moz-image-region: rect(40px, 360px, 80px, 320px) !important;
+
+#menu-button {
+  list-style-image: url(chrome://browser/skin/images/appbar-menu.png);
 }
-#star-button:active,
-#star-button[checked] {
-  -moz-image-region: rect(80px, 360px, 120px, 320px) !important;
+
+@media (min-resolution: 130dpi) {
+  #pin-button {
+    list-style-image: url(chrome://browser/skin/images/appbar-pin@1.4x.png);
+  }
+
+  #star-button {
+    list-style-image: url(chrome://browser/skin/images/appbar-star@1.4x.png);
+  }
+
+  #menu-button {
+    list-style-image: url(chrome://browser/skin/images/appbar-menu@1.4x.png);
+  }
 }
 
+
 #contextualactions-tray {
   background-color: @metro_orange@;
 }
@@ -779,16 +821,23 @@ setting[type="radio"] > vbox {
   -moz-appearance: none;
   margin: 0;
   -moz-margin-end: 40px;
-  list-style-image: url(chrome://browser/skin/images/back.png);
-  -moz-image-region: rect(0 48px 48px 0);
+  list-style-image: url(chrome://browser/skin/images/appbar-back.png);
+  -moz-image-region: rect(0 40px 40px 0);
   padding: 0;
-  min-height: 48px;
-  max-height: 48px;
+  min-height: 40px;
+  max-height: 40px;
   -moz-box-pack: center;
 }
 
+@media (min-resolution: 130dpi) {
+  #panel-close-button {
+    list-style-image: url(chrome://browser/skin/images/appbar-back@1.4x.png);
+    width: 40px;
+  }
+}
+
 #panel-close-button[disabled] {
-  -moz-image-region: rect(0 96px 48px 48px);
+  opacity: .5;
 }
 
 #panel-view-switcher {
@@ -1059,4 +1108,4 @@ setting[type="radio"] > vbox {
 
 .autoscroller[scrolldir="EW"] {
   background-position: right bottom;
-}
+}

browser/metro/theme/defines.inc

@@ -3,7 +3,6 @@
 %define panel_dark_color #41464C
 %define panel_dark_background url(chrome://browser/skin/images/panel-dark.png)
 %define panel_light_color #F1F1F1
-%define panel_light_background url(chrome://browser/skin/images/panel-light.png)
 
 %define field_sizing 30px
 %define field_foreground_color #000000

browser/metro/theme/jar.mn

@@ -21,11 +21,19 @@ chrome.jar:
 % override chrome://global/skin/media/videocontrols.css chrome://browser/skin/touchcontrols.css
 % override chrome://global/skin/netError.css chrome://browser/skin/netError.css
 
-  skin/images/panel-light.png               (images/panel-light.png)
   skin/images/panel-dark.png                (images/panel-dark.png)
-  skin/images/back.png                      (images/back.png)
-  skin/images/forward.png                   (images/forward.png)
-  skin/images/reload.png                    (images/reload.png)
+  skin/images/appbar-back.png               (images/appbar-back.png)
+  skin/images/appbar-back@1.4x.png          (images/appbar-back@1.4x.png)
+  skin/images/appbar-forward.png            (images/appbar-forward.png)
+  skin/images/appbar-forward@1.4x.png       (images/appbar-forward@1.4x.png)
+  skin/images/appbar-star.png               (images/appbar-star.png)
+  skin/images/appbar-star@1.4x.png          (images/appbar-star@1.4x.png)
+  skin/images/appbar-pin.png                (images/appbar-pin.png)
+  skin/images/appbar-pin@1.4x.png           (images/appbar-pin@1.4x.png)
+  skin/images/appbar-menu.png               (images/appbar-menu.png)
+  skin/images/appbar-menu@1.4x.png          (images/appbar-menu@1.4x.png)
+  skin/images/appbar-reload.png             (images/appbar-reload.png)
+  skin/images/appbar-stop.png               (images/appbar-stop.png)
   skin/images/newtab-default.png            (images/newtab-default.png)
   skin/images/closetab-default.png          (images/closetab-default.png)
   skin/images/tab-arrows.png                (images/tab-arrows.png)
@@ -62,7 +70,6 @@ chrome.jar:
   skin/images/errorpage-larry-white.png     (images/errorpage-larry-white.png)
   skin/images/errorpage-larry-black.png     (images/errorpage-larry-black.png)
   skin/images/throbber.png                  (images/throbber.png)
-  skin/images/stop-hdpi.png                 (images/stop-hdpi.png)
   skin/images/alert-downloads-30.png        (images/alert-downloads-30.png)
   skin/images/identity-default-hdpi.png     (images/identity-default-hdpi.png)
   skin/images/identity-ssl-hdpi.png         (images/identity-ssl-hdpi.png)
@@ -82,4 +89,4 @@ chrome.jar:
 
   skin/images/overlay-back.png              (images/overlay-back.png)
   skin/images/overlay-plus.png              (images/overlay-plus.png)
-  skin/images/autoscroll.png                (images/autoscroll.png)
+  skin/images/autoscroll.png                (images/autoscroll.png)