diff --git a/browser/metro/theme/browser.css b/browser/metro/theme/browser.css index 7b930fd6745a..34bba7ed2546 100644 --- a/browser/metro/theme/browser.css +++ b/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); } } diff --git a/browser/metro/theme/defines.inc b/browser/metro/theme/defines.inc index 17a6801aedad..70f099dc2a8a 100644 --- a/browser/metro/theme/defines.inc +++ b/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 \ No newline at end of file diff --git a/browser/metro/theme/images/appbar-back.png b/browser/metro/theme/images/appbar-back.png deleted file mode 100644 index b21510d4d155..000000000000 Binary files a/browser/metro/theme/images/appbar-back.png and /dev/null differ diff --git a/browser/metro/theme/images/appbar-back@1.4x.png b/browser/metro/theme/images/appbar-back@1.4x.png deleted file mode 100644 index fd0b2d37911a..000000000000 Binary files a/browser/metro/theme/images/appbar-back@1.4x.png and /dev/null differ diff --git a/browser/metro/theme/images/appbar-forward.png b/browser/metro/theme/images/appbar-forward.png deleted file mode 100644 index ed0d4a03c76d..000000000000 Binary files a/browser/metro/theme/images/appbar-forward.png and /dev/null differ diff --git a/browser/metro/theme/images/appbar-forward@1.4x.png b/browser/metro/theme/images/appbar-forward@1.4x.png deleted file mode 100644 index 4b9f1e342440..000000000000 Binary files a/browser/metro/theme/images/appbar-forward@1.4x.png and /dev/null differ diff --git a/browser/metro/theme/images/appbar-menu.png b/browser/metro/theme/images/appbar-menu.png deleted file mode 100644 index bb61481dab1d..000000000000 Binary files a/browser/metro/theme/images/appbar-menu.png and /dev/null differ diff --git a/browser/metro/theme/images/appbar-menu@1.4x.png b/browser/metro/theme/images/appbar-menu@1.4x.png deleted file mode 100644 index 2bc354eb7e9b..000000000000 Binary files a/browser/metro/theme/images/appbar-menu@1.4x.png and /dev/null differ diff --git a/browser/metro/theme/images/appbar-pin.png b/browser/metro/theme/images/appbar-pin.png deleted file mode 100644 index bb0cf44e96a9..000000000000 Binary files a/browser/metro/theme/images/appbar-pin.png and /dev/null differ diff --git a/browser/metro/theme/images/appbar-pin@1.4x.png b/browser/metro/theme/images/appbar-pin@1.4x.png deleted file mode 100644 index 60972778c4cc..000000000000 Binary files a/browser/metro/theme/images/appbar-pin@1.4x.png and /dev/null differ diff --git a/browser/metro/theme/images/appbar-star.png b/browser/metro/theme/images/appbar-star.png deleted file mode 100644 index b33833373368..000000000000 Binary files a/browser/metro/theme/images/appbar-star.png and /dev/null differ diff --git a/browser/metro/theme/images/appbar-star@1.4x.png b/browser/metro/theme/images/appbar-star@1.4x.png deleted file mode 100644 index fa1b0555c90e..000000000000 Binary files a/browser/metro/theme/images/appbar-star@1.4x.png and /dev/null differ diff --git a/browser/metro/theme/images/navbar-back.png b/browser/metro/theme/images/navbar-back.png new file mode 100644 index 000000000000..61a8e78f184e Binary files /dev/null and b/browser/metro/theme/images/navbar-back.png differ diff --git a/browser/metro/theme/images/navbar-back@1.4x.png b/browser/metro/theme/images/navbar-back@1.4x.png new file mode 100644 index 000000000000..7f35011c7a06 Binary files /dev/null and b/browser/metro/theme/images/navbar-back@1.4x.png differ diff --git a/browser/metro/theme/images/navbar-back@1.8x.png b/browser/metro/theme/images/navbar-back@1.8x.png new file mode 100644 index 000000000000..59a2a1c092f2 Binary files /dev/null and b/browser/metro/theme/images/navbar-back@1.8x.png differ diff --git a/browser/metro/theme/images/navbar-forward.png b/browser/metro/theme/images/navbar-forward.png new file mode 100644 index 000000000000..7f4939fcb68a Binary files /dev/null and b/browser/metro/theme/images/navbar-forward.png differ diff --git a/browser/metro/theme/images/navbar-forward@1.4x.png b/browser/metro/theme/images/navbar-forward@1.4x.png new file mode 100644 index 000000000000..a05474c06c01 Binary files /dev/null and b/browser/metro/theme/images/navbar-forward@1.4x.png differ diff --git a/browser/metro/theme/images/navbar-forward@1.8x.png b/browser/metro/theme/images/navbar-forward@1.8x.png new file mode 100644 index 000000000000..11c208da2179 Binary files /dev/null and b/browser/metro/theme/images/navbar-forward@1.8x.png differ diff --git a/browser/metro/theme/images/navbar-menu.png b/browser/metro/theme/images/navbar-menu.png new file mode 100644 index 000000000000..7a059d8d506a Binary files /dev/null and b/browser/metro/theme/images/navbar-menu.png differ diff --git a/browser/metro/theme/images/navbar-menu@1.4x.png b/browser/metro/theme/images/navbar-menu@1.4x.png new file mode 100644 index 000000000000..2bce75bcc254 Binary files /dev/null and b/browser/metro/theme/images/navbar-menu@1.4x.png differ diff --git a/browser/metro/theme/images/navbar-menu@1.8x.png b/browser/metro/theme/images/navbar-menu@1.8x.png new file mode 100644 index 000000000000..763246cd45af Binary files /dev/null and b/browser/metro/theme/images/navbar-menu@1.8x.png differ diff --git a/browser/metro/theme/images/navbar-pin.png b/browser/metro/theme/images/navbar-pin.png new file mode 100644 index 000000000000..4cbf202d3254 Binary files /dev/null and b/browser/metro/theme/images/navbar-pin.png differ diff --git a/browser/metro/theme/images/navbar-pin@1.4x.png b/browser/metro/theme/images/navbar-pin@1.4x.png new file mode 100644 index 000000000000..2f292f7fea59 Binary files /dev/null and b/browser/metro/theme/images/navbar-pin@1.4x.png differ diff --git a/browser/metro/theme/images/navbar-pin@1.8x.png b/browser/metro/theme/images/navbar-pin@1.8x.png new file mode 100644 index 000000000000..ff5d26377478 Binary files /dev/null and b/browser/metro/theme/images/navbar-pin@1.8x.png differ diff --git a/browser/metro/theme/images/navbar-star.png b/browser/metro/theme/images/navbar-star.png new file mode 100644 index 000000000000..720dd26651ad Binary files /dev/null and b/browser/metro/theme/images/navbar-star.png differ diff --git a/browser/metro/theme/images/navbar-star@1.4x.png b/browser/metro/theme/images/navbar-star@1.4x.png new file mode 100644 index 000000000000..2763ade09a7a Binary files /dev/null and b/browser/metro/theme/images/navbar-star@1.4x.png differ diff --git a/browser/metro/theme/images/navbar-star@1.8x.png b/browser/metro/theme/images/navbar-star@1.8x.png new file mode 100644 index 000000000000..acc0fb6bc6ae Binary files /dev/null and b/browser/metro/theme/images/navbar-star@1.8x.png differ diff --git a/browser/metro/theme/jar.mn b/browser/metro/theme/jar.mn index 661fb0494a0f..a6c2c81b85c1 100644 --- a/browser/metro/theme/jar.mn +++ b/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) diff --git a/browser/metro/theme/platform.css b/browser/metro/theme/platform.css index 728c42eb6c30..aaa924d4e2be 100644 --- a/browser/metro/theme/platform.css +++ b/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); } }