Improve toolbar icons for all DPIs

Tag #576.

- Redraw toolbar SVG images, pixel-aligning them as best as possible
  with manual node placement on the pixel grid.
- Reintroduce PNG versions for < 1.33 dppx (with added glow arrow)
- Make the css adaptive around the 1.33 dppx border, using PNG below
  that threshold and SVG above it.

1 files changed, 12 insertions, 3 deletions

diff --git a/application/palemoon/themes/windows/browser.css b/application/palemoon/themes/windows/browser.css
index f921554df..c261fe083 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.svg");
-  --toolbarbutton-glass-image: url("chrome://browser/skin/Toolbar-glass.svg");
-  --toolbarbutton-inverted-image: url("chrome://browser/skin/Toolbar-inverted.svg");
+  --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");
 
   --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));
@@ -52,6 +52,15 @@
   --window-text-color: currentColor;
 }
 
+/* Use SVG for HiDPI 133%+ */
+@media (min-resolution: 1.33dppx) {
+  :root {
+    --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");
+  }
+}
+
 :root:-moz-lwtheme-brighttext {
   --toolbar-highlight-top: rgba(32,32,32,.8);
   --toolbar-highlight-bottom: rgba(32,32,32,0);