Bug 885242 - Part 3 - Update existing toolbar buttons with 1.4x modes, add 1.8x versions. r=mbrubeck

--HG--
rename : browser/metro/theme/images/appbar-back.png => browser/metro/theme/images/navbar-back.png
rename : browser/metro/theme/images/appbar-back@1.4x.png => browser/metro/theme/images/navbar-back@1.4x.png
rename : browser/metro/theme/images/appbar-forward.png => browser/metro/theme/images/navbar-forward.png
rename : browser/metro/theme/images/appbar-forward@1.4x.png => browser/metro/theme/images/navbar-forward@1.4x.png
rename : browser/metro/theme/images/appbar-menu.png => browser/metro/theme/images/navbar-menu.png
rename : browser/metro/theme/images/appbar-menu@1.4x.png => browser/metro/theme/images/navbar-menu@1.4x.png
rename : browser/metro/theme/images/appbar-pin.png => browser/metro/theme/images/navbar-pin.png
rename : browser/metro/theme/images/appbar-pin@1.4x.png => browser/metro/theme/images/navbar-pin@1.4x.png
rename : browser/metro/theme/images/appbar-star.png => browser/metro/theme/images/navbar-star.png
rename : browser/metro/theme/images/appbar-star@1.4x.png => browser/metro/theme/images/navbar-star@1.4x.png
extra : rebase_source : a21f57cbed180bdc4a0ed0539437c96a5af56ef9

browser/metro/theme/browser.css

@@ -474,39 +474,49 @@ documenttab[selected] .documenttab-selection {
   background-color: @panel_light_color@;
 }
 
-#toolbar > #back-button {
-  list-style-image: url(chrome://browser/skin/images/appbar-back.png);
+#back-button {
+  list-style-image: url(chrome://browser/skin/images/navbar-back.png);
   position: relative;
   z-index: 1;
   transition: opacity @forward_transition_length@ ease-out;
 }
 
-#toolbar > #back-button[disabled] {
+#back-button[disabled] {
   visibility: visible;
   opacity: 0.5;
 }
 
-#toolbar > #forward-button {
-  list-style-image: url(chrome://browser/skin/images/appbar-forward.png);
+#forward-button {
+  list-style-image: url(chrome://browser/skin/images/navbar-forward.png);
   transition: margin @forward_transition_length@ ease-out,
               visibility @forward_transition_length@ ease-out,
               opacity @forward_transition_length@ ease-out;
 }
 
-#toolbar > #forward-button[disabled] {
+#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);
+@media (min-resolution: @min_res_140pc@) {
+  #back-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-back@1.4x.png);
   }
 
-  #toolbar > #forward-button {
-    list-style-image: url(chrome://browser/skin/images/appbar-forward@1.4x.png);
+  #forward-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-forward@1.4x.png);
+  }
+}
+
+@media (min-resolution: @min_res_180pc@) {
+  #back-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-back@1.8x.png);
+  }
+
+  #forward-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-forward@1.8x.png);
   }
 }
 
@@ -577,28 +587,42 @@ documenttab[selected] .documenttab-selection {
 /* Page-Specific */
 
 #pin-button {
-  list-style-image: url(chrome://browser/skin/images/appbar-pin.png);
+  list-style-image: url(chrome://browser/skin/images/navbar-pin.png);
 }
 
 #star-button {
-  list-style-image: url(chrome://browser/skin/images/appbar-star.png);
+  list-style-image: url(chrome://browser/skin/images/navbar-star.png);
 }
 
 #menu-button {
-  list-style-image: url(chrome://browser/skin/images/appbar-menu.png);
+  list-style-image: url(chrome://browser/skin/images/navbar-menu.png);
 }
 
-@media (min-resolution: 130dpi) {
+@media (min-resolution: @min_res_140pc@) {
   #pin-button {
-    list-style-image: url(chrome://browser/skin/images/appbar-pin@1.4x.png);
+    list-style-image: url(chrome://browser/skin/images/navbar-pin@1.4x.png);
   }
 
   #star-button {
-    list-style-image: url(chrome://browser/skin/images/appbar-star@1.4x.png);
+    list-style-image: url(chrome://browser/skin/images/navbar-star@1.4x.png);
   }
 
   #menu-button {
-    list-style-image: url(chrome://browser/skin/images/appbar-menu@1.4x.png);
+    list-style-image: url(chrome://browser/skin/images/navbar-menu@1.4x.png);
+  }
+}
+
+@media (min-resolution: @min_res_180pc@) {
+  #pin-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-pin@1.8x.png);
+  }
+
+  #star-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-star@1.8x.png);
+  }
+
+  #menu-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-menu@1.8x.png);
   }
 }
 

browser/metro/theme/defines.inc

@@ -96,3 +96,8 @@
 % that the bars slide up after the keyboard is in place.
 %define appbar_keyboard_slideup_duration 750ms
 
+% minimum resolution cutoffs for displaying 1.4x and 1.8x versions of icons
+% XXX currently, there's some weirdness with the dppx unit, as documented in
+% bug 895277. Because of that, we have to use 1.39dppx instead of 1.4dppx.
+%define min_res_140pc 1.39dppx
+%define min_res_180pc 1.8dppx

browser/metro/theme/jar.mn

@@ -22,16 +22,21 @@ chrome.jar:
 % override chrome://global/skin/netError.css chrome://browser/skin/netError.css
 
   skin/images/panel-dark.png                (images/panel-dark.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/navbar-back.png               (images/navbar-back.png)
+  skin/images/navbar-back@1.4x.png          (images/navbar-back@1.4x.png)
+  skin/images/navbar-back@1.8x.png          (images/navbar-back@1.8x.png)
+  skin/images/navbar-forward.png            (images/navbar-forward.png)
+  skin/images/navbar-forward@1.4x.png       (images/navbar-forward@1.4x.png)
+  skin/images/navbar-forward@1.8x.png       (images/navbar-forward@1.8x.png)
+  skin/images/navbar-star.png               (images/navbar-star.png)
+  skin/images/navbar-star@1.4x.png          (images/navbar-star@1.4x.png)
+  skin/images/navbar-star@1.8x.png          (images/navbar-star@1.8x.png)
+  skin/images/navbar-pin.png                (images/navbar-pin.png)
+  skin/images/navbar-pin@1.4x.png           (images/navbar-pin@1.4x.png)
+  skin/images/navbar-pin@1.8x.png           (images/navbar-pin@1.8x.png)
+  skin/images/navbar-menu.png               (images/navbar-menu.png)
+  skin/images/navbar-menu@1.4x.png          (images/navbar-menu@1.4x.png)
+  skin/images/navbar-menu@1.8x.png          (images/navbar-menu@1.8x.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)

browser/metro/theme/platform.css

@@ -742,6 +742,7 @@ appbar toolbar[labelled] > toolbarbutton > .toolbarbutton-text {
   -moz-image-region: rect(0 80px 40px 40px);
 }
 
+.appbar-primary:not([checked]):active,
 .appbar-primary[checked] {
   -moz-image-region: rect(0 120px 40px 80px);
 }
@@ -750,11 +751,11 @@ appbar toolbar[labelled] > toolbarbutton > .toolbarbutton-text {
   -moz-image-region: rect(0 160px 40px 120px);
 }
 
-.appbar-primary:active {
-  -moz-image-region: rect(0 120px 40px 80px);
+.appbar-primary[checked]:active {
+  -moz-image-region: rect(0 200px 40px 160px);
 }
 
-@media (min-resolution: 130dpi) {
+@media (min-resolution: @min_res_140pc@) {
   .appbar-primary {
     -moz-image-region: rect(0 56px 56px 0);
   }
@@ -763,16 +764,40 @@ appbar toolbar[labelled] > toolbarbutton > .toolbarbutton-text {
     -moz-image-region: rect(0 112px 56px 56px);
   }
 
+  .appbar-primary:not([checked]):active,
   .appbar-primary[checked] {
-    -moz-image-region: rect(0 224px 56px 168px);
+    -moz-image-region: rect(0 168px 56px 112px);
   }
 
   .appbar-primary[checked]:hover:not(:active) {
     -moz-image-region: rect(0 224px 56px 168px);
   }
 
-  .appbar-primary:active {
-    -moz-image-region: rect(0 168px 56px 112px);
+  .appbar-primary[checked]:active {
+    -moz-image-region: rect(0 280px 56px 224px);
+  }
+}
+
+@media (min-resolution: @min_res_180pc@) {
+  .appbar-primary {
+    -moz-image-region: rect(0 72px 72px 0);
+  }
+
+  .appbar-primary:not([checked]):hover:not(:active) {
+    -moz-image-region: rect(0 144px 72px 72px);
+  }
+
+  .appbar-primary:not([checked]):active,
+  .appbar-primary[checked] {
+    -moz-image-region: rect(0 216px 72px 144px);
+  }
+
+  .appbar-primary[checked]:hover:not(:active) {
+    -moz-image-region: rect(0 288px 72px 216px);
+  }
+
+  .appbar-primary[checked]:active {
+    -moz-image-region: rect(0 360px 72px 288px);
   }
 }