From a4052fb611b315f3733fa35601b58db61086528c Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Tue, 13 May 2014 08:18:00 +0200 Subject: [PATCH] Bug 1009002 - Add 2x images for web console. r=bgrins --- browser/themes/linux/jar.mn | 2 + browser/themes/osx/jar.mn | 2 + .../devtools/images/commandline-icon.png | Bin 375 -> 254 bytes .../devtools/images/commandline-icon@2x.png | Bin 0 -> 586 bytes .../shared/devtools/images/webconsole@2x.png | Bin 0 -> 2633 bytes .../themes/shared/devtools/webconsole.inc.css | 80 +++++++++++------- browser/themes/windows/jar.mn | 4 + 7 files changed, 59 insertions(+), 29 deletions(-) create mode 100644 browser/themes/shared/devtools/images/commandline-icon@2x.png create mode 100644 browser/themes/shared/devtools/images/webconsole@2x.png diff --git a/browser/themes/linux/jar.mn b/browser/themes/linux/jar.mn index 81096a01e1c..c5c5424b136 100644 --- a/browser/themes/linux/jar.mn +++ b/browser/themes/linux/jar.mn @@ -190,6 +190,7 @@ browser.jar: skin/classic/browser/devtools/controls@2x.png (../shared/devtools/images/controls@2x.png) * skin/classic/browser/devtools/widgets.css (devtools/widgets.css) skin/classic/browser/devtools/commandline-icon.png (../shared/devtools/images/commandline-icon.png) + skin/classic/browser/devtools/commandline-icon@2x.png (../shared/devtools/images/commandline-icon@2x.png) skin/classic/browser/devtools/command-paintflashing.png (../shared/devtools/images/command-paintflashing.png) skin/classic/browser/devtools/command-paintflashing@2x.png (../shared/devtools/images/command-paintflashing@2x.png) skin/classic/browser/devtools/command-responsivemode.png (../shared/devtools/images/command-responsivemode.png) @@ -210,6 +211,7 @@ browser.jar: * skin/classic/browser/devtools/webconsole.css (devtools/webconsole.css) skin/classic/browser/devtools/webconsole_networkpanel.css (devtools/webconsole_networkpanel.css) skin/classic/browser/devtools/webconsole.png (../shared/devtools/images/webconsole.png) + skin/classic/browser/devtools/webconsole@2x.png (../shared/devtools/images/webconsole@2x.png) skin/classic/browser/devtools/commandline.css (devtools/commandline.css) skin/classic/browser/devtools/markup-view.css (../shared/devtools/markup-view.css) skin/classic/browser/devtools/editor-error.png (../shared/devtools/images/editor-error.png) diff --git a/browser/themes/osx/jar.mn b/browser/themes/osx/jar.mn index 84b88751933..dd414a6fa5a 100644 --- a/browser/themes/osx/jar.mn +++ b/browser/themes/osx/jar.mn @@ -311,6 +311,7 @@ browser.jar: skin/classic/browser/devtools/controls@2x.png (../shared/devtools/images/controls@2x.png) * skin/classic/browser/devtools/widgets.css (devtools/widgets.css) skin/classic/browser/devtools/commandline-icon.png (../shared/devtools/images/commandline-icon.png) + skin/classic/browser/devtools/commandline-icon@2x.png (../shared/devtools/images/commandline-icon@2x.png) skin/classic/browser/devtools/command-paintflashing.png (../shared/devtools/images/command-paintflashing.png) skin/classic/browser/devtools/command-paintflashing@2x.png (../shared/devtools/images/command-paintflashing@2x.png) skin/classic/browser/devtools/command-responsivemode.png (../shared/devtools/images/command-responsivemode.png) @@ -336,6 +337,7 @@ browser.jar: * skin/classic/browser/devtools/webconsole.css (devtools/webconsole.css) skin/classic/browser/devtools/webconsole_networkpanel.css (devtools/webconsole_networkpanel.css) skin/classic/browser/devtools/webconsole.png (../shared/devtools/images/webconsole.png) + skin/classic/browser/devtools/webconsole@2x.png (../shared/devtools/images/webconsole@2x.png) skin/classic/browser/devtools/breadcrumbs-divider@2x.png (../shared/devtools/images/breadcrumbs-divider@2x.png) skin/classic/browser/devtools/breadcrumbs-scrollbutton.png (../shared/devtools/images/breadcrumbs-scrollbutton.png) skin/classic/browser/devtools/breadcrumbs-scrollbutton@2x.png (../shared/devtools/images/breadcrumbs-scrollbutton@2x.png) diff --git a/browser/themes/shared/devtools/images/commandline-icon.png b/browser/themes/shared/devtools/images/commandline-icon.png index e120a392606af02764ee50b2fbec64caeab4f8f3..e51f67f137e49e26ee0aa4400b99bb05ecfdb09e 100644 GIT binary patch delta 226 zcmV<803HAL0{#JzB!9(8L_t(Y$75g^1%nBE{qZXegg<}&sfmqG2w1Lp_8)|;);>wY z#wW=UU%q@1$HvDC{{Lr$Te|9rB?g}u@c;jR7MP_#HWxadkbdLM&$wWg+OB;diOwh1 z5nM=?GNJPc=?7T^vs8Q4RW@`!QI7cZ>5~Y|Qfz#}>EWp%%v(}y{K4&j7cc&EBL_J; zpP=Qd9!nz!IXa(E{IjAZLRL}|p~I?IJjjU-olnSeM&xXV&L?Df=&JwB$k`5^KQs!W cQ9y4104j8g4BoM!OaK4?07*qoM6N<$f{b%&CIA2c delta 348 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 literal 0 HcmV?d00001 diff --git a/browser/themes/shared/devtools/webconsole.inc.css b/browser/themes/shared/devtools/webconsole.inc.css index 617ef6fc053..cc96a518b16 100644 --- a/browser/themes/shared/devtools/webconsole.inc.css +++ b/browser/themes/shared/devtools/webconsole.inc.css @@ -34,16 +34,30 @@ a { } .message > .icon { - background: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 0, 1, 0, 0) no-repeat; - background-position: center; flex: 0 0 auto; margin: 3px 6px 0 0; padding: 0 4px; - width: 8px; height: 1em; align-self: flex-start; } +.message > .icon::before { + content: ""; + background-image: url(chrome://browser/skin/devtools/webconsole.png); + background-position: 8px 8px; + background-repeat: no-repeat; + background-size: 48px 40px; + width: 8px; + height: 8px; + display: inline-block; +} + +@media (min-resolution: 2dppx) { + .message > .icon::before { + background-image: url(chrome://browser/skin/devtools/webconsole@2x.png); + } +} + .message > .message-body-wrapper { flex: 1 1 100%; margin: 3px; @@ -209,8 +223,8 @@ a { -moz-border-end: solid #000 6px; } -.message[category=network][severity=error] > .icon { - background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 0, 16, 8, 8); +.message[category=network][severity=error] > .icon::before { + background-position: -8px 0; } .message[category=network] > .message-body { @@ -255,12 +269,12 @@ a { -moz-border-end: solid #00b6f0 6px; } -.message[category=cssparser][severity=error] > .icon { - background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 8, 16, 16, 8); +.message[category=cssparser][severity=error] > .icon::before { + background-position: -8px -8px; } -.message[category=cssparser][severity=warn] > .icon { - background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 8, 24, 16, 16); +.message[category=cssparser][severity=warn] > .icon::before { + background-position: -16px -8px; } /* JS styles */ @@ -273,12 +287,12 @@ a { -moz-border-end: solid #fb9500 6px; } -.message[category=exception][severity=error] > .icon { - background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 16, 16, 24, 8); +.message[category=exception][severity=error] > .icon::before { + background-position: -8px -16px; } -.message[category=exception][severity=warn] > .icon { - background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 16, 24, 24, 16); +.message[category=exception][severity=warn] > .icon::before { + background-position: -16px -16px; } /* Web Developer styles */ @@ -291,17 +305,17 @@ a { -moz-border-end: solid #cbcbcb 6px; } -.message[category=console][severity=error] > .icon, -.message[category=output][severity=error] > .icon { - background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 24, 16, 32, 8); +.message[category=console][severity=error] > .icon::before, +.message[category=output][severity=error] > .icon::before { + background-position: -8px -24px; } -.message[category=console][severity=warn] > .icon { - background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 24, 24, 32, 16); +.message[category=console][severity=warn] > .icon::before { + background-position: -16px -24px; } -.message[category=console][severity=info] > .icon { - background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 24, 32, 32, 24); +.message[category=console][severity=info] > .icon::before { + background-position: -24px -24px; } /* Input and output styles */ @@ -310,12 +324,12 @@ a { -moz-border-end: solid #808080 6px; } -.message[category=input] > .icon { - background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 24, 40, 32, 32); +.message[category=input] > .icon::before { + background-position: -32px -24px; } -.message[category=output] > .icon { - background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 24, 48, 32, 40); +.message[category=output] > .icon::before { + background-position: -40px -24px; } /* JSTerm Styles */ @@ -328,7 +342,15 @@ a { } .jsterm-input-node { - background: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16) no-repeat; + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16); + background-repeat: no-repeat; + background-size: 16px 16px; +} + +@media (min-resolution: 2dppx) { + .jsterm-input-node { + background-image: -moz-image-rect(url('chrome://browser/skin/devtools/commandline-icon@2x.png'), 0, 64, 32, 32); + } } :-moz-any(.jsterm-input-node, @@ -370,12 +392,12 @@ a { border-color: #D12C2C; } -.message[category=security][severity=error] > .icon { - background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 32, 16, 40, 8); +.message[category=security][severity=error] > .icon::before { + background-position: -8px -32px; } -.message[category=security][severity=warn] > .icon { - background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 32, 24, 40, 16); +.message[category=security][severity=warn] > .icon::before { + background-position: -16px -32px; } .navigation-marker { diff --git a/browser/themes/windows/jar.mn b/browser/themes/windows/jar.mn index 0731d1c9770..a7ddcea28c3 100644 --- a/browser/themes/windows/jar.mn +++ b/browser/themes/windows/jar.mn @@ -227,6 +227,7 @@ browser.jar: skin/classic/browser/devtools/controls@2x.png (../shared/devtools/images/controls@2x.png) * skin/classic/browser/devtools/widgets.css (devtools/widgets.css) skin/classic/browser/devtools/commandline-icon.png (../shared/devtools/images/commandline-icon.png) + skin/classic/browser/devtools/commandline-icon@2x.png (../shared/devtools/images/commandline-icon@2x.png) skin/classic/browser/devtools/alerticon-warning.png (../shared/devtools/images/alerticon-warning.png) skin/classic/browser/devtools/alerticon-warning@2x.png (../shared/devtools/images/alerticon-warning@2x.png) * skin/classic/browser/devtools/ruleview.css (../shared/devtools/ruleview.css) @@ -252,6 +253,7 @@ browser.jar: * skin/classic/browser/devtools/webconsole.css (devtools/webconsole.css) skin/classic/browser/devtools/webconsole_networkpanel.css (devtools/webconsole_networkpanel.css) skin/classic/browser/devtools/webconsole.png (../shared/devtools/images/webconsole.png) + skin/classic/browser/devtools/webconsole@2x.png (../shared/devtools/images/webconsole@2x.png) skin/classic/browser/devtools/breadcrumbs-divider@2x.png (../shared/devtools/images/breadcrumbs-divider@2x.png) skin/classic/browser/devtools/breadcrumbs-scrollbutton.png (../shared/devtools/images/breadcrumbs-scrollbutton.png) skin/classic/browser/devtools/breadcrumbs-scrollbutton@2x.png (../shared/devtools/images/breadcrumbs-scrollbutton@2x.png) @@ -600,6 +602,7 @@ browser.jar: skin/classic/aero/browser/devtools/controls@2x.png (../shared/devtools/images/controls@2x.png) * skin/classic/aero/browser/devtools/widgets.css (devtools/widgets.css) skin/classic/aero/browser/devtools/commandline-icon.png (../shared/devtools/images/commandline-icon.png) + skin/classic/aero/browser/devtools/commandline-icon@2x.png (../shared/devtools/images/commandline-icon@2x.png) skin/classic/aero/browser/devtools/command-paintflashing.png (../shared/devtools/images/command-paintflashing.png) skin/classic/aero/browser/devtools/command-paintflashing@2x.png (../shared/devtools/images/command-paintflashing@2x.png) skin/classic/aero/browser/devtools/command-responsivemode.png (../shared/devtools/images/command-responsivemode.png) @@ -625,6 +628,7 @@ browser.jar: * skin/classic/aero/browser/devtools/webconsole.css (devtools/webconsole.css) skin/classic/aero/browser/devtools/webconsole_networkpanel.css (devtools/webconsole_networkpanel.css) skin/classic/aero/browser/devtools/webconsole.png (../shared/devtools/images/webconsole.png) + skin/classic/aero/browser/devtools/webconsole@2x.png (../shared/devtools/images/webconsole@2x.png) skin/classic/aero/browser/devtools/breadcrumbs-divider@2x.png (../shared/devtools/images/breadcrumbs-divider@2x.png) skin/classic/aero/browser/devtools/breadcrumbs-scrollbutton.png (../shared/devtools/images/breadcrumbs-scrollbutton.png) skin/classic/aero/browser/devtools/breadcrumbs-scrollbutton@2x.png (../shared/devtools/images/breadcrumbs-scrollbutton@2x.png)