From 3c9d8715a7e4ce3a1ea4846331c5d19bd8b7e1eb Mon Sep 17 00:00:00 2001 From: wolfbeast Date: Mon, 19 Nov 2018 01:47:32 +0100 Subject: [PATCH] Replace toolbar PNG bitmaps with SVG vectors. This makes the main toolbar icon set use SVG vector images, so they are prepared for HiDPI use. The download indicator "attention" state (green arrow) has been folded into the main toolbar image. This is a direct replacement of the previous images (and not separate icon files) to have a direct drop-in replacement for the previously used files. Tag #576 --- .../palemoon/themes/windows/Toolbar-glass.svg | 2304 +++++++++++++++++ .../themes/windows/Toolbar-inverted.svg | 376 +++ .../palemoon/themes/windows/Toolbar.svg | 1486 +++++++++++ .../palemoon/themes/windows/browser.css | 6 +- .../themes/windows/downloads/downloads.css | 19 +- application/palemoon/themes/windows/jar.mn | 7 +- 6 files changed, 4185 insertions(+), 13 deletions(-) create mode 100644 application/palemoon/themes/windows/Toolbar-glass.svg create mode 100644 application/palemoon/themes/windows/Toolbar-inverted.svg create mode 100644 application/palemoon/themes/windows/Toolbar.svg diff --git a/application/palemoon/themes/windows/Toolbar-glass.svg b/application/palemoon/themes/windows/Toolbar-glass.svg new file mode 100644 index 0000000000..49f21470fe --- /dev/null +++ b/application/palemoon/themes/windows/Toolbar-glass.svg @@ -0,0 +1,2304 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/application/palemoon/themes/windows/Toolbar-inverted.svg b/application/palemoon/themes/windows/Toolbar-inverted.svg new file mode 100644 index 0000000000..69526caf3c --- /dev/null +++ b/application/palemoon/themes/windows/Toolbar-inverted.svg @@ -0,0 +1,376 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/application/palemoon/themes/windows/Toolbar.svg b/application/palemoon/themes/windows/Toolbar.svg new file mode 100644 index 0000000000..5831fce379 --- /dev/null +++ b/application/palemoon/themes/windows/Toolbar.svg @@ -0,0 +1,1486 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/application/palemoon/themes/windows/browser.css b/application/palemoon/themes/windows/browser.css index 45f0e066c2..e4f5f679f8 100644 --- a/application/palemoon/themes/windows/browser.css +++ b/application/palemoon/themes/windows/browser.css @@ -39,9 +39,9 @@ --toolbarbutton-border-radius: 2.5px; --toolbarbutton-border-color: hsla(210,54%,20%,.2); - --toolbarbutton-image: url("chrome://browser/skin/Toolbar.png"); - --toolbarbutton-glass-image: url("chrome://browser/skin/Toolbar-glass.png"); - --toolbarbutton-inverted-image: url("chrome://browser/skin/Toolbar-inverted.png"); + --toolbarbutton-image: url("chrome://browser/skin/Toolbar.svg"); + --toolbarbutton-glass-image: url("chrome://browser/skin/Toolbar-glass.svg"); + --toolbarbutton-inverted-image: url("chrome://browser/skin/Toolbar-inverted.svg"); --tab-background: linear-gradient(transparent, hsla(0,0%,45%,.1) 1px, hsla(0,0%,32%,.2) 80%, hsla(0,0%,0%,.2)); --tab-background-hover: linear-gradient(hsla(0,0%,100%,.3) 1px, hsla(0,0%,75%,.2) 80%, hsla(0,0%,60%,.2)); diff --git a/application/palemoon/themes/windows/downloads/downloads.css b/application/palemoon/themes/windows/downloads/downloads.css index 91ea652ed6..f16989655b 100644 --- a/application/palemoon/themes/windows/downloads/downloads.css +++ b/application/palemoon/themes/windows/downloads/downloads.css @@ -326,6 +326,11 @@ toolbar[brighttext] #downloads-indicator-icon { 0, 108, 18, 90) center no-repeat; } +#downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon { + background: -moz-image-rect(var(--toolbarbutton-image), + 19, 108, 36, 90) center no-repeat; +} + @media (-moz-windows-compositor) { :-moz-any(#toolbar-menubar, #nav-bar[tabsontop=false]) #downloads-indicator-icon:not(:-moz-lwtheme), #TabsToolbar[tabsontop=true] #downloads-indicator-icon:not(:-moz-lwtheme), @@ -333,10 +338,12 @@ toolbar[brighttext] #downloads-indicator-icon { background: -moz-image-rect(var(--toolbarbutton-glass-image), 0, 108, 18, 90) center no-repeat; } + #downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon { + background: -moz-image-rect(var(--toolbarbutton-glass-image), + 19, 108, 36, 90) center no-repeat; } -#downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon { - background-image: url("chrome://browser/skin/downloads/download-glow.png"); + } /* In the next few rules, we use :not([counter]) as a shortcut that is @@ -360,10 +367,10 @@ toolbar[brighttext] #downloads-indicator:not([counter]) > #downloads-indicator-a background: -moz-image-rect(var(--toolbarbutton-glass-image), 0, 108, 18, 90) center no-repeat; } -} - -#downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background-image: url("chrome://browser/skin/downloads/download-glow.png"); + #downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { + background: -moz-image-rect(var(--toolbarbutton-glass-image), + 19, 108, 36, 90) center no-repeat; + } } /*** Download notifications ***/ diff --git a/application/palemoon/themes/windows/jar.mn b/application/palemoon/themes/windows/jar.mn index 0a4342d403..eb5edb3c12 100644 --- a/application/palemoon/themes/windows/jar.mn +++ b/application/palemoon/themes/windows/jar.mn @@ -60,9 +60,9 @@ browser.jar: skin/classic/browser/Secure24.png skin/classic/browser/setDesktopBackground.css skin/classic/browser/slowStartup-16.png - skin/classic/browser/Toolbar.png - skin/classic/browser/Toolbar-glass.png - skin/classic/browser/Toolbar-inverted.png + skin/classic/browser/Toolbar.svg + skin/classic/browser/Toolbar-glass.svg + skin/classic/browser/Toolbar-inverted.svg skin/classic/browser/toolbarbutton-dropdown-arrow.png skin/classic/browser/toolbarbutton-dropdown-arrow-inverted.png skin/classic/browser/urlbar-arrow.png @@ -79,7 +79,6 @@ browser.jar: skin/classic/browser/webRTC-sharingDevice-16.png #endif skin/classic/browser/downloads/buttons.png (downloads/buttons.png) - skin/classic/browser/downloads/download-glow.png (downloads/download-glow.png) skin/classic/browser/downloads/download-notification-finish.png (downloads/download-notification-finish.png) skin/classic/browser/downloads/download-notification-start.png (downloads/download-notification-start.png) skin/classic/browser/downloads/download-summary.png (downloads/download-summary.png)