Bug 1347543 - Use SVGs instead of PNGs for toolbar button icons. r=dao

MozReview-Commit-ID: 27zDcyScFnj

--HG--
extra : rebase_source : 66c95a6c573eb224d993c9e64979ac6e59dbbab0

browser/base/content/browser-places.js

@@ -1795,8 +1795,8 @@ var BookmarkingUI = {
       this.dropmarkerNotifier.style.transform = dropmarkerTransform;
 
       let dropmarkerAnimationNode = this.dropmarkerNotifier.firstChild;
-      dropmarkerAnimationNode.style.MozImageRegion = dropmarkerStyle.MozImageRegion;
       dropmarkerAnimationNode.style.listStyleImage = dropmarkerStyle.listStyleImage;
+      dropmarkerAnimationNode.style.fill = dropmarkerStyle.fill;
     }
 
     let isInOverflowPanel = this.button.getAttribute("overflowedItem") == "true";

browser/extensions/pocket/jar.mn

@@ -15,18 +15,6 @@
 % override chrome://pocket/skin/menuPanel.png             chrome://pocket/skin/menuPanel-aero.png            os=WINNT osversion=6.1
 % override chrome://pocket/skin/menuPanel@2x.png          chrome://pocket/skin/menuPanel-aero@2x.png         os=WINNT osversion=6
 % override chrome://pocket/skin/menuPanel@2x.png          chrome://pocket/skin/menuPanel-aero@2x.png         os=WINNT osversion=6.1
-% override chrome://pocket/skin/Toolbar@2x.png            chrome://pocket/skin/Toolbar-aero@2x.png           os=WINNT osversion=6
-% override chrome://pocket/skin/Toolbar@2x.png            chrome://pocket/skin/Toolbar-aero@2x.png           os=WINNT osversion=6.1
-% override chrome://pocket/skin/Toolbar@2x.png            chrome://pocket/skin/Toolbar-win8@2x.png           os=WINNT osversion=6.2
-% override chrome://pocket/skin/Toolbar@2x.png            chrome://pocket/skin/Toolbar-win8@2x.png           os=WINNT osversion=6.3
-% override chrome://pocket/skin/Toolbar.png               chrome://pocket/skin/Toolbar-XP.png                os=WINNT osversion<6
-% override chrome://pocket/skin/Toolbar.png               chrome://pocket/skin/Toolbar-aero.png              os=WINNT osversion=6
-% override chrome://pocket/skin/Toolbar.png               chrome://pocket/skin/Toolbar-aero.png              os=WINNT osversion=6.1
-% override chrome://pocket/skin/Toolbar.png               chrome://pocket/skin/Toolbar-win8.png              os=WINNT osversion=6.2
-% override chrome://pocket/skin/Toolbar.png               chrome://pocket/skin/Toolbar-win8.png              os=WINNT osversion=6.3
-# osx overrides
-% override chrome://pocket/skin/Toolbar.png               chrome://pocket/skin/Toolbar-yosemite.png          os=Darwin osversion>=10.10
-% override chrome://pocket/skin/Toolbar@2x.png            chrome://pocket/skin/Toolbar-yosemite@2x.png       os=Darwin osversion>=10.10
 % override chrome://pocket/skin/menuPanel.png             chrome://pocket/skin/menuPanel-yosemite.png        os=Darwin osversion>=10.10
 % override chrome://pocket/skin/menuPanel@2x.png          chrome://pocket/skin/menuPanel-yosemite@2x.png     os=Darwin osversion>=10.10
 

browser/extensions/pocket/skin/osx/pocket.css

@@ -4,38 +4,6 @@
   padding: calc(var(--toolbarbutton-vertical-inner-padding)) 6px;
 }
 
-#pocket-button[cui-areatype="toolbar"][open] {
-  -moz-image-region: rect(36px, 18px, 54px, 0);
-}
-
-@media (min-resolution: 2dppx) {
-  #panelMenu_pocket,
-  #menu_pocket,
-  #BMB_pocket {
-    list-style-image: url("chrome://pocket/content/panels/img/pocketmenuitem16@2x.png");
-  }
-
-  #panelMenu_pocket > .toolbarbutton-icon {
-    width: 16px;
-  }
-}
-
-@media not all and (min-resolution: 1.1dppx) {
-  #pocket-button:hover:active:not([disabled="true"]):not([cui-areatype="menu-panel"]) {
-    -moz-image-region: rect(18px, 18px, 36px, 0);
-  }
-}
-
-@media (min-resolution: 1.1dppx) {
-  #pocket-button[cui-areatype="toolbar"][open] {
-    -moz-image-region: rect(72px, 36px, 108px, 0);
-  }
-
-  #pocket-button:hover:active:not([disabled="true"]):not([cui-areatype="menu-panel"]) {
-    -moz-image-region: rect(36px, 36px, 72px, 0);
-  }
-}
-
 #PanelUI-pocketView[mainview=true] > .panel-subview-body > #pocket-panel-iframe {
   border-radius: var(--arrowpanel-border-radius);
 }

browser/extensions/pocket/skin/shared/pocket.css

@@ -14,12 +14,17 @@ panelmultiview[mainViewId=PanelUI-pocketView] > .panel-viewcontainer > .panel-vi
 }
 
 #pocket-button {
-  list-style-image: url("chrome://pocket/skin/Toolbar.png");
-  -moz-image-region: rect(0, 18px, 18px, 0);
+  list-style-image: url("chrome://pocket-shared/skin/pocket.svg");
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill);
 }
 
 toolbar[brighttext] #pocket-button {
-  list-style-image: url(chrome://pocket/skin/Toolbar-inverted.png);
+  fill: var(--toolbarbutton-icon-fill-inverted);
+}
+
+#pocket-button[cui-areatype="toolbar"][open] {
+  fill: rgb(213,32,20);
 }
 
 @media not all and (min-resolution: 1.1dppx) {
@@ -46,34 +51,20 @@ toolbar[brighttext] #pocket-button {
   }
 }
 
-#pocket-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 18px, 18px, 0);
-}
-
-#pocket-button[cui-areatype="toolbar"][open] {
-  -moz-image-region: rect(18px, 18px, 36px, 0);
-}
-
-@media (min-resolution: 1.1dppx) {
-  #pocket-button {
-    list-style-image: url("chrome://pocket/skin/Toolbar@2x.png");
-  }
-
-  toolbar[brighttext] #pocket-button {
-    list-style-image: url("chrome://pocket/skin/Toolbar-inverted@2x.png");
-  }
-
-  #pocket-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 36px, 36px, 0px);
-  }
-
-  #pocket-button[cui-areatype="toolbar"][open] {
-    -moz-image-region: rect(36px, 36px, 72px, 0px);
-  }
-}
-
 #panelMenu_pocket,
 #menu_pocket,
 #BMB_pocket {
   list-style-image: url("chrome://pocket/content/panels/img/pocketmenuitem16.png");
 }
+
+@media (min-resolution: 2dppx) {
+  #panelMenu_pocket,
+  #menu_pocket,
+  #BMB_pocket {
+    list-style-image: url("chrome://pocket/content/panels/img/pocketmenuitem16@2x.png");
+  }
+
+  #panelMenu_pocket > .toolbarbutton-icon {
+    width: 16px;
+  }
+}

browser/extensions/pocket/skin/shared/pocket.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M9,15.969a8,8,0,0,1-8-8v-4a2,2,0,0,1,2-2H15a2,2,0,0,1,2,2v4A8,8,0,0,1,9,15.969ZM12.985,5.937a0.99,0.99,0,0,0-.725.319L8.978,9.539,5.755,6.305A0.984,0.984,0,0,0,5,5.937a1,1,0,0,0-.714,1.7L4.27,7.648l3.293,3.306h0l0.707,0.707a1,1,0,0,0,1.414,0l0.707-.707h0L13.7,7.648l0,0A1,1,0,0,0,12.985,5.937Z"/>
+</svg>

browser/extensions/pocket/skin/windows/pocket.css

@@ -8,9 +8,3 @@
     max-width: 18px;
     padding: 0;
 }
-
-@media (-moz-windows-theme: luna-silver) and (max-resolution: 1dppx) {
-  #pocket-button {
-    list-style-image: url(Toolbar-lunaSilver.png);
-  }
-}

browser/themes/linux/browser.css

@@ -578,8 +578,9 @@ html|*.addon-webext-perm-list {
 .addon-toolbar-icon {
   width: 14px;
   height: 14px;
-  list-style-image: url("chrome://browser/skin/Toolbar.png");
-  -moz-image-region: rect(0, 486px, 18px, 468px);
+  list-style-image: url("chrome://browser/skin/menu.svg");
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill);
 }
 
 /* Notification icon box */

browser/themes/linux/downloads/indicator.css

@@ -21,33 +21,21 @@
 
 /*** Main indicator icon ***/
 
-@media not all and (min-resolution: 1.1dppx) {
-  #downloads-button {
-    --downloads-indicator-image: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 0, 198, 18, 180);
-    --downloads-indicator-image-attention: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 18, 198, 36, 180);
-    --downloads-indicator-image-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180);
-    --downloads-indicator-image-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 18, 198, 36, 180);
-  }
-}
-
-@media (min-resolution: 1.1dppx) {
-  #downloads-button {
-    --downloads-indicator-image: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 0, 396, 36, 360);
-    --downloads-indicator-image-attention: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 36, 396, 72, 360);
-    --downloads-indicator-image-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 0, 396, 36, 360);
-    --downloads-indicator-image-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 36, 396, 72, 360);
-  }
+#downloads-button {
+  --downloads-indicator-image: url("chrome://browser/skin/download.svg");
 }
 
 #downloads-button[cui-areatype="toolbar"] > #downloads-indicator-anchor > #downloads-indicator-icon {
   background: var(--downloads-indicator-image) center no-repeat;
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill);
   width: 18px;
   height: 18px;
   background-size: 18px;
 }
 
 toolbar[brighttext] #downloads-button[cui-areatype="toolbar"]:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon {
-  background-image: var(--downloads-indicator-image-inverted);
+  fill: var(--toolbarbutton-icon-fill-inverted);
 }
 
 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
@@ -81,11 +69,7 @@ toolbar[brighttext] #downloads-button[cui-areatype="toolbar"]:not([attention="su
 }
 
 #downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon {
-  background-image: var(--downloads-indicator-image-attention);
-}
-
-toolbar[brighttext] #downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon {
-  background-image: var(--downloads-indicator-image-attention-inverted);
+  fill: var(--toolbarbutton-icon-fill-attention);
 }
 
 #downloads-button[cui-areatype="menu-panel"][attention="success"] {
@@ -98,19 +82,17 @@ toolbar[brighttext] #downloads-button[cui-areatype="toolbar"][attention="success
 
 #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
   background: var(--downloads-indicator-image) center no-repeat;
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill);
   background-size: 12px;
 }
 
 toolbar[brighttext] #downloads-button:not([counter]):not([attention="success"]) > #downloads-indicator-anchor > #downloads-button-progress-area > #downloads-indicator-counter {
-  background-image: var(--downloads-indicator-image-inverted);
+  fill: var(--toolbarbutton-icon-fill-inverted);
 }
 
 #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  background-image: var(--downloads-indicator-image-attention);
-}
-
-toolbar[brighttext] #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  background-image: var(--downloads-indicator-image-attention-inverted);
+  fill: var(--toolbarbutton-icon-fill-attention);
 }
 
 /*** Download notifications ***/

browser/themes/linux/jar.mn

@@ -32,10 +32,6 @@ browser.jar:
   skin/classic/browser/searchbar.css
   skin/classic/browser/setDesktopBackground.css
   skin/classic/browser/slowStartup-16.png
-  skin/classic/browser/Toolbar.png
-  skin/classic/browser/Toolbar@2x.png
-  skin/classic/browser/Toolbar-inverted.png
-  skin/classic/browser/Toolbar-inverted@2x.png
   skin/classic/browser/Toolbar-small.png
   skin/classic/browser/webRTC-indicator.css  (../shared/webRTC-indicator.css)
 * skin/classic/browser/controlcenter/panel.css        (controlcenter/panel.css)

browser/themes/osx/browser.css

@@ -557,6 +557,108 @@ toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-p
 
 /* Inactive elements are faded out on OSX */
 
+.findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover,
+toolbar .toolbarbutton-1:not(:-moz-any([type="menu-button"],[disabled],[open],#back-button,#forward-button)):hover,
+toolbar .toolbarbutton-1[type="menu-button"]:not([disabled]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker,
+toolbar .toolbarbutton-1[type="menu-button"]:not([disabled]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button,
+toolbar .toolbarbutton-1[type="menu-button"]:not([disabled]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker,
+toolbar .toolbaritem-combined-buttons:hover > .toolbarbutton-combined {
+  border-color: var(--toolbarbutton-hover-bordercolor);
+  box-shadow: var(--toolbarbutton-hover-boxshadow);
+}
+
+.findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover,
+toolbar .toolbarbutton-1:not(:-moz-any([type="menu-button"],[disabled],[open],#back-button,#forward-button)):hover,
+toolbar .toolbarbutton-1[type="menu-button"]:not(:-moz-any([disabled],[open]))[buttonover] > .toolbarbutton-menubutton-button,
+toolbar .toolbarbutton-1[type="menu-button"]:not(:-moz-any([disabled],[open],[buttonover])):hover > .toolbarbutton-menubutton-dropmarker {
+  background: var(--toolbarbutton-hover-background);
+}
+
+.findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active),
+toolbar .toolbarbutton-1:not(:-moz-any([type="menu-button"],[disabled],#back-button,#forward-button)):-moz-any(:hover:active,[open],[checked]),
+toolbar .toolbarbutton-1[type="menu-button"]:not([disabled]) > .toolbarbutton-menubutton-button[open],
+toolbar .toolbarbutton-1[type="menu-button"]:not(:-moz-any([disabled],[open]))[buttonover]:active > .toolbarbutton-menubutton-button,
+toolbar .toolbarbutton-1[type="menu-button"]:not(:-moz-any([disabled],[open],[buttonover])):hover:active > .toolbarbutton-menubutton-dropmarker,
+toolbar .toolbarbutton-1[type="menu-button"][open]:not([disabled]) > .toolbarbutton-menubutton-dropmarker {
+  background: var(--toolbarbutton-active-background);
+  border-color: var(--toolbarbutton-active-bordercolor);
+  box-shadow: var(--toolbarbutton-active-boxshadow);
+  transition-duration: 10ms;
+}
+
+.findbar-button[checked="true"]:not(:active):hover,
+toolbar .toolbarbutton-1[checked]:not(:active):hover {
+  background-color: var(--toolbarbutton-checkedhover-backgroundcolor);
+  transition: background-color 250ms;
+}
+
+.toolbarbutton-1[type="menu-button"]:not([overflowedItem=true]) {
+  padding: 0;
+}
+
+.toolbarbutton-1 > .toolbarbutton-menubutton-button,
+.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
+  margin: 0;
+}
+
+.toolbarbutton-1 {
+  margin: 4px 2px;
+}
+
+/**
+ * Draw seperators before toolbar button dropmarkers, as well as between
+ * consecutive toolbarbutton-1's within a toolbaritem.
+ */
+toolbar .toolbaritem-combined-buttons:not(:hover) > separator,
+toolbar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
+  content: "";
+  display: -moz-box;
+  width: 1px;
+  height: 18px;
+  margin-inline-start: -1px;
+  background-image: linear-gradient(currentColor 0, currentColor 100%);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 1px 18px;
+  opacity: .2;
+}
+
+toolbar[brighttext] .toolbaritem-combined-buttons > separator,
+toolbar[brighttext] .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
+  opacity: .3;
+}
+
+toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
+  -moz-box-orient: horizontal;
+}
+
+toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
+toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
+  margin: 0 4px;
+}
+
+#PanelUI-button {
+  margin-top: -4px;
+  margin-bottom: -4px;
+  margin-inline-start: 5px;
+  margin-inline-end: 1px;
+  padding-inline-start: 5px;
+  -moz-box-align: center;
+}
+
+%include ../shared/toolbarbutton-icons.inc.css
+%include ../shared/menupanel.inc.css
+
+toolbar .toolbarbutton-1:not([type="menu-button"]),
+toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
+  min-width: 28px;
+}
+
+#main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-icon,
+#main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
+#main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled="true"] > .toolbarbutton-icon,
+#main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-menu-dropmarker,
+#main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-menubutton-dropmarker,
 .toolbarbutton-1:not(:hover):-moz-window-inactive > #downloads-indicator-anchor,
 .toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-icon,
 .toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-text,
@@ -2217,8 +2319,9 @@ html|*.addon-webext-perm-list {
 .addon-toolbar-icon {
   width: 14px;
   height: 14px;
-  list-style-image: url("chrome://browser/skin/Toolbar.png");
-  -moz-image-region: rect(0, 486px, 18px, 468px);
+  list-style-image: url("chrome://browser/skin/menu.svg");
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill);
 }
 
 /* Status panel */

browser/themes/osx/downloads/indicator.css

@@ -27,28 +27,18 @@
 /*** Main indicator icon ***/
 
 #downloads-button {
-  --downloads-indicator-image: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 0, 198, 18, 180);
-  --downloads-indicator-image-attention: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 36, 198, 54, 180);
-  --downloads-indicator-image-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180);
-  --downloads-indicator-image-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 36, 198, 54, 180);
-}
-
-@media (min-resolution: 2dppx) {
-  #downloads-button {
-    --downloads-indicator-image: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 0, 396, 36, 360);
-    --downloads-indicator-image-attention: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 72, 396, 108, 360);
-    --downloads-indicator-image-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 0, 396, 36, 360);
-    --downloads-indicator-image-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 72, 396, 108, 360);
-  }
+  --downloads-indicator-image: url("chrome://browser/skin/download.svg");
 }
 
 #downloads-indicator-icon {
   background: var(--downloads-indicator-image) center no-repeat;
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill);
   background-size: 18px;
 }
 
 toolbar[brighttext] #downloads-indicator-icon {
-  background-image: var(--downloads-indicator-image-inverted);
+  fill: var(--toolbarbutton-icon-fill-inverted);
 }
 
 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
@@ -82,11 +72,7 @@ toolbar[brighttext] #downloads-indicator-icon {
 }
 
 #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon {
-  background-image: var(--downloads-indicator-image-attention);
-}
-
-toolbar[brighttext] #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon {
-  background-image: var(--downloads-indicator-image-attention-inverted);
+  fill: var(--toolbarbutton-icon-fill-attention);
 }
 
 #downloads-button[cui-areatype="menu-panel"][attention="success"] {
@@ -99,19 +85,17 @@ toolbar[brighttext] #downloads-button[attention="success"] > #downloads-indicato
 
 #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
   background: var(--downloads-indicator-image) center no-repeat;
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill);
   background-size: 12px;
 }
 
 toolbar[brighttext] #downloads-button:not([counter]):not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  background-image: var(--downloads-indicator-image-inverted);
+  fill: var(--toolbarbutton-icon-fill-inverted);
 }
 
 #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  background-image: var(--downloads-indicator-image-attention);
-}
-
-toolbar[brighttext] #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  background-image: var(--downloads-indicator-image-attention-inverted);
+  fill: var(--toolbarbutton-icon-fill-attention);
 }
 
 @media (min-resolution: 2dppx) {

browser/themes/osx/jar.mn

@@ -38,10 +38,6 @@ browser.jar:
   skin/classic/browser/reload-stop-go@2x.png
   skin/classic/browser/searchbar.css
   skin/classic/browser/slowStartup-16.png
-  skin/classic/browser/Toolbar.png
-  skin/classic/browser/Toolbar@2x.png
-  skin/classic/browser/Toolbar-inverted.png
-  skin/classic/browser/Toolbar-inverted@2x.png
   skin/classic/browser/toolbarbutton-dropmarker.png
   skin/classic/browser/toolbarbutton-dropmarker@2x.png
   skin/classic/browser/urlbar-history-dropmarker.png
@@ -163,8 +159,6 @@ browser.jar:
   skin/classic/browser/syncProgress-horizontalbar.png
   skin/classic/browser/syncProgress-horizontalbar@2x.png
   skin/classic/browser/Toolbar-background-noise.png         (Toolbar-background-noise.png)
-  skin/classic/browser/yosemite/Toolbar.png                            (Toolbar-yosemite.png)
-  skin/classic/browser/yosemite/Toolbar@2x.png                         (Toolbar-yosemite@2x.png)
   skin/classic/browser/yosemite/menuPanel-customize.png                (menuPanel-customize-yosemite.png)
   skin/classic/browser/yosemite/menuPanel-customize@2x.png             (menuPanel-customize-yosemite@2x.png)
   skin/classic/browser/yosemite/menuPanel-exit.png                     (menuPanel-exit-yosemite.png)
@@ -192,8 +186,6 @@ browser.jar:
 % override chrome://browser/skin/feeds/audioFeedIcon16.png                 chrome://browser/skin/feeds/feedIcon16.png
 % override chrome://browser/skin/feeds/videoFeedIcon.png                   chrome://browser/skin/feeds/feedIcon.png
 % override chrome://browser/skin/feeds/videoFeedIcon16.png                 chrome://browser/skin/feeds/feedIcon16.png
-% override chrome://browser/skin/Toolbar.png                               chrome://browser/skin/yosemite/Toolbar.png                              os=Darwin osversion>=10.10
-% override chrome://browser/skin/Toolbar@2x.png                            chrome://browser/skin/yosemite/Toolbar@2x.png                           os=Darwin osversion>=10.10
 % override chrome://browser/skin/menuPanel-customize.png                   chrome://browser/skin/yosemite/menuPanel-customize.png                  os=Darwin osversion>=10.10
 % override chrome://browser/skin/menuPanel-customize@2x.png                chrome://browser/skin/yosemite/menuPanel-customize@2x.png               os=Darwin osversion>=10.10
 % override chrome://browser/skin/menuPanel-exit.png                        chrome://browser/skin/yosemite/menuPanel-exit.png                       os=Darwin osversion>=10.10

browser/themes/shared/bookmarked-notification.inc.css

@@ -37,6 +37,7 @@
 }
 
 #bookmarked-notification-dropmarker-icon {
+  -moz-context-properties: fill;
   width: 18px;
   height: 18px;
   visibility: hidden;

browser/themes/shared/compacttheme.inc.css

@@ -309,13 +309,7 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(
 
 /* Use smaller back button icon */
 #back-button {
-  -moz-image-region: rect(0, 54px, 18px, 36px);
-}
-
-@media (min-resolution: 1.1dppx) {
-  #back-button {
-    -moz-image-region: rect(0, 108px, 36px, 72px);
-  }
+  list-style-image: url("chrome://browser/skin/back.svg");
 }
 
 .tab-background {

browser/themes/shared/downloads/indicator.inc.css

@@ -3,7 +3,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #downloads-indicator-progress-icon {
-  background: var(--downloads-indicator-image-attention) bottom no-repeat;
+  background: var(--downloads-indicator-image) bottom no-repeat;
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill-attention);
   background-size: 18px;
   margin-top: 18px;
   /* From javascript side we use animation delay from 0s to -100s to show
@@ -18,7 +20,6 @@
 }
 
 toolbar[brighttext] #downloads-indicator-progress-icon {
-  background-image: var(--downloads-indicator-image-attention-inverted);
   animation-name: indicatorArrowProgressDark;
 }
 

browser/themes/shared/icons/addons.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M12,17c0.5,0,1-0.5,1-1v-4c0,0,0.2-0.8,0.8-0.8c0.6,0,0.6,0.8,1.8,0.8 c0.6,0,1.5-0.2,1.5-2c0-1.8-0.9-2-1.5-2c-1.1,0-1.2,0.8-1.8,0.8C13.2,8.8,13,8,13,8V6c0-0.6-0.4-1-1-1H9c0,0-0.8-0.1-0.8-0.8 S9,3.6,9,2.5C9,1.9,8.8,1,7,1S5,1.9,5,2.5c0,1.1,0.8,1.2,0.8,1.8S5,5,5,5H2C1.4,5,1,5.4,1,6l0,2.5c0,0-0.1,1.5,1.1,1.5 c0.8,0,0.9-1,1.9-1c0.5,0,1,0.5,1,1.6c0,1-0.5,1.6-1,1.6c-1,0-1.1-1-1.9-1C0.9,11,1,12.5,1,12.5L1,16c0,0.6,0.4,1,1,1h3.9 c0,0,1.5,0.1,1.5-1.1c0-0.8-1-0.9-1-1.9c0-0.5,0.7-1.2,1.8-1.2s1.9,0.7,1.9,1.2c0,1-1,1.1-1,1.9c0,1.2,1.5,1.1,1.5,1.1H12z" />
+</svg>

browser/themes/shared/icons/back-large.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M15,11H8.8l2.8,2.8 c0.4,0.4,0.5,1.1,0.2,1.4l-1.2,1.2c-0.3,0.3-1,0.3-1.4-0.2L2.8,9.9c0,0-0.4-0.5-0.4-0.9c0-0.4,0.4-0.8,0.4-0.8l6.4-6.4 c0.4-0.4,1.1-0.5,1.4-0.2l1.2,1.2c0.3,0.3,0.3,1-0.2,1.4L8.9,7H15c0.6,0,1,0.4,1,1v2C16,10.6,15.6,11,15,11z" />
+</svg>

browser/themes/shared/icons/back.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M14,11H9.2l1.9,1.9c0.5,0.5,0.6,1.2,0.2,1.6 l-0.8,0.9c-0.4,0.4-1.1,0.3-1.6-0.2L3.5,9.7C3.4,9.7,3.2,9.3,3.1,9c0-0.3,0.3-0.6,0.4-0.7l5.3-5.4c0.5-0.5,1.2-0.6,1.6-0.2l0.8,0.9 C11.6,4,11.5,4.7,11,5.2L9.2,7H14c0.6,0,1,0.4,1,1v2C15,10.6,14.6,11,14,11z" />
+</svg>

browser/themes/shared/icons/bookmark-hollow.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M9,4.6l1,2l0.5,0.9l1,0.2l2.3,0.4l-1.7,1.8l-0.7,0.7l0.1,1l0.4,2.4l-2-1L9,12.5 L8.1,13l-2,1l0.4-2.4l0.1-1L5.9,9.9L4.2,8.1l2.4-0.4l1-0.2L8,6.6L9,4.6 M9,1C8.7,1,8.4,1.2,8.2,1.7l-2,4.1L1.9,6.5 c-1,0.2-1.2,0.9-0.5,1.6l3.1,3.3l-0.7,4.6C3.7,16.6,4,17,4.5,17c0.2,0,0.4-0.1,0.6-0.2L9,14.7l3.9,2.1c0.2,0.1,0.5,0.2,0.6,0.2 c0.5,0,0.8-0.4,0.7-1.1l-0.7-4.6l3.1-3.3c0.7-0.7,0.4-1.4-0.5-1.6l-4.3-0.7l-2-4.1C9.6,1.2,9.3,1,9,1L9,1z" />
+</svg>

browser/themes/shared/icons/bookmark.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M9,1c-.3,0-.6.2-.8.7l-2,4.1-4.3.7c-1,.2-1.2.9-.5,1.6l3.1,3.3L3.8,16c-.1.6.2,1,.7,1l.6-.2L9,14.7l3.9,2.1.6.2c.5,0,.8-.4.7-1.1l-.7-4.6L16.6,8c.7-.7.4-1.4-.5-1.6l-4.3-.7-2-4.1A.9.9,0,0,0,9,1Z" />
+</svg>

browser/themes/shared/icons/bookmarksMenu.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M14,16H4c-1.1,0-2-0.9-2-2V6 c0-1.1,0.9-2,2-2h2l3-3l3,3h2c1.1,0,2,0.9,2,2v8C16,15.1,15.1,16,14,16z M5,6C4.4,6,4,6.4,4,7s0.4,1,1,1s1-0.4,1-1S5.6,6,5,6z M5,9 c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S5.6,9,5,9z M5,12c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S5.6,12,5,12z M14,6H7v2h7V6z M14,9H7 v2h7V9z M14,12H7v2h7V12z" />
+</svg>

browser/themes/shared/icons/characterEncoding.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M14,16H4c-1.1,0-2-0.9-2-2V4 c0-1.1,0.9-2,2-2h10c1.1,0,2,0.9,2,2v10C16,15.1,15.1,16,14,16z M14,6c0-1.7-1.3-3-3-3H7C5.3,3,4,4.3,4,6v4c0,1.7,1.3,3,3,3h4 c1.7,0,3-0.3,3-2V6z M11,9.2c0.3,0,0.6,0,0.9-0.1c0.3-0.1,0.5-0.2,0.8-0.3v0.8c-0.3,0.1-0.6,0.2-0.8,0.3C11.7,10,11.4,10,11,10 c-1,0-1.7-0.4-2.1-1.2C8.6,9.2,8.3,9.5,8,9.7C7.6,9.9,7.2,10,6.8,10c-0.6,0-1-0.2-1.3-0.5C5.1,9.3,5,8.8,5,8.3c0-0.6,0.2-1,0.6-1.3 c0.4-0.3,1.1-0.5,1.9-0.5l0.9,0V6.1c0-0.5-0.1-0.8-0.3-1C8,4.8,7.7,4.7,7.3,4.7c-0.5,0-1,0.1-1.6,0.4L5.5,4.5C5.7,4.4,6,4.2,6.4,4.1 C6.7,4.1,7,4,7.4,4c0.4,0,0.8,0.1,1.1,0.2C8.7,4.4,9,4.6,9.1,5c0.2-0.3,0.4-0.6,0.7-0.7c0.3-0.2,0.6-0.3,1-0.3 c0.7,0,1.2,0.2,1.6,0.7C12.8,5.2,13,5.8,13,6.6v0.6H9.4C9.4,8.6,10,9.2,11,9.2z M8.5,7.1l-0.8,0C7,7.1,6.6,7.2,6.3,7.4 C6,7.6,5.9,7.9,5.9,8.3c0,0.3,0.1,0.6,0.3,0.7c0.2,0.2,0.4,0.2,0.7,0.2c0.5,0,0.9-0.1,1.2-0.4c0.3-0.3,0.4-0.7,0.4-1.3V7.1z M12.1,6.5c0-0.6-0.1-1-0.3-1.3c-0.2-0.3-0.5-0.4-0.9-0.4c-0.4,0-0.7,0.1-1,0.4C9.6,5.5,9.5,5.9,9.4,6.5H12.1z" />
+</svg>

browser/themes/shared/icons/chevron.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M11.6,13H8.5l3.8-4L8.5,5h3l3.9,4L11.6,13 z M6.6,13H3.5l3.8-4L3.5,5h3l3.9,4L6.6,13z" />
+</svg>

browser/themes/shared/icons/containers.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M13,5H5V9h8ZM11,7.75a.25.25,0,0,1-.25.25H7.25A.25.25,0,0,1,7,7.75v-.5A.25.25,0,0,1,7.25,7h3.5a.25.25,0,0,1,.25.25ZM13,10H5v4h8Zm-2,2.75a.25.25,0,0,1-.25.25H7.25A.25.25,0,0,1,7,12.75v-.5A.25.25,0,0,1,7.25,12h3.5a.25.25,0,0,1,.25.25Zm3.854-9.9L14,2H4l-.854.853A.5.5,0,0,0,3,3.207V15a1,1,0,0,0,1,1H14a1,1,0,0,0,1-1V3.207A.5.5,0,0,0,14.854,2.853ZM14,15H4V4H14Z"/>
+</svg>

browser/themes/shared/icons/devTools-panel.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M14,17H4a2,2,0,0,1-2-2V7A2,2,0,0,1,4,5H6L9,2l3,3h2a2,2,0,0,1,2,2v8A2,2,0,0,1,14,17ZM13.66,7.631L11.841,9.448a0.917,0.917,0,1,1-1.3-1.3l1.81-1.807a2.979,2.979,0,0,0-4.168,3.694L4.38,13.808a1.271,1.271,0,0,0,0,1.808,1.3,1.3,0,0,0,1.824,0l3.819-3.783a2.98,2.98,0,0,0,3.99-2.823A2.957,2.957,0,0,0,13.66,7.631ZM5.5,15.005a0.5,0.5,0,1,1,.5-0.5A0.5,0.5,0,0,1,5.5,15.005Z"/>
+</svg>

browser/themes/shared/icons/developer.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M13.2,6.5L15.8,4 c0.3,0.6,0.5,1.2,0.5,1.9c0,2.2-1.8,4-4.1,4c-0.5,0-1-0.1-1.4-0.3l-6,5.9c-0.6,0.6-1.7,0.6-2.3,0s-0.6-1.6,0-2.3l5.9-5.9 c-0.2-0.5-0.3-1-0.3-1.6c0-2.2,1.8-4,4.1-4c0.7,0,1.3,0.2,1.9,0.5l-2.5,2.5c-0.2,0.2-0.7,1,0,1.7C12.2,7.2,13,6.6,13.2,6.5z M3.6,13.6c-0.5,0-0.9,0.4-0.9,0.9c0,0.5,0.4,0.9,0.9,0.9c0.5,0,0.9-0.4,0.9-0.9C4.5,14,4.1,13.6,3.6,13.6z" />
+</svg>

browser/themes/shared/icons/download.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M15.6,10.1L10,15.6C9.8,15.9,9.4,16,9,16 c-0.4,0-0.8-0.1-1.1-0.4l-5.6-5.5C1.8,9.5,1.9,9,2.7,9L6,9V3c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1v6h3.2C16,9,16.2,9.5,15.6,10.1z" />
+</svg>

browser/themes/shared/icons/edit-copy.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M15,16H9c-0.6,0-1-0.4-1-1v-3V9.4V7 c0-0.6,0.4-1,1-1c0,0,3.2,0,5,0c0,0,2,2,2,2c0,2.2,0,7,0,7C16,15.6,15.6,16,15,16z M13,7v2h2L13,7z M7,5.9V7v1.9V12H3 c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1c0,0,3.2,0,5,0c0,0,2,2,2,2c0,0.4,0,0.8,0,1.3H7.5C7.2,5.4,7,5.6,7,5.9z M7,3v2h2L7,3z" />
+</svg>

browser/themes/shared/icons/edit-cut.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M14.7,16c-0.8,0-1.5-0.2-2.3-1.3 c-0.8-1.1-1.7-2.5-1.7-2.5s-0.7-0.9-1.1-1.6c-0.5-0.7-1.1-0.5-1.1-0.5S5.6,5.4,5.1,4.7C4.5,3.7,5.7,2,5.7,2l4.4,7 c0,0,1.4,1.9,1.9,2.3c0.5,0.4,1.4-0.4,2.8,0.9C16.7,14,16.1,16,14.7,16z M14.4,13.1c-0.9-1-1.7-0.9-1.9-0.6c-0.2,0.3,0,1.2,0.4,1.7 c0.4,0.5,0.8,0.7,1.4,0.7C14.9,15,15.4,14.2,14.4,13.1z M10.6,8.4L9.4,6.6L12.3,2c0,0,1.2,1.7,0.6,2.7C12.6,5.1,11.5,7,10.6,8.4z M6,11.3c0.3-0.3,1-1.1,1.4-1.7l0.8,1.2c-0.4,0.6-0.9,1.4-0.9,1.4s-0.9,1.4-1.7,2.5C4.9,15.8,4.2,16,3.3,16c-1.4,0-2.1-2-0.1-3.8 C4.6,11,5.5,11.7,6,11.3z M3.6,13.1c-0.9,1-0.4,1.8,0.2,1.8c0.6,0,1-0.2,1.4-0.7c0.4-0.5,0.6-1.5,0.4-1.7 C5.3,12.2,4.5,12.1,3.6,13.1z" />
+</svg>

browser/themes/shared/icons/edit-paste.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M12.5,16h-7C4.7,16,4,15.3,4,14.5v-9 C4,4.7,4.7,4,5.5,4H7c0,0,0-2,2-2s2,2,2,2h1.5C13.3,4,14,4.7,14,5.5v9C14,15.3,13.3,16,12.5,16z M11.7,5l-1.1-0.5c0,0,0-1.5-1.6-1.5 C7.4,3,7.4,4.5,7.4,4.5L6.3,5L5.8,6h2.5h3.2h0.8L11.7,5z M11.8,6.7H7.1l-3,1.7l2.8,4.9l6.6-3.8L11.8,6.7z" />
+</svg>

browser/themes/shared/icons/feed.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M15.3,16h-1.5c-0.4,0-0.8-0.3-0.8-0.8 c0,0,0.3-3.6-3.2-7.2C7.3,5,2.8,4.8,2.8,4.8C2.3,4.8,2,4.5,2,4.1V2.7C2,2.3,2.3,2,2.8,2c0,0,6.3,0.4,9.6,4.5 c3.3,3.1,3.6,8.8,3.6,8.8C16,15.7,15.8,16,15.3,16z M2.8,7c0,0,3.7,0.5,5.8,2.4c2.1,2,2.5,5.9,2.5,5.9c0,0.4-0.1,0.8-0.5,0.8H9.1 c-0.4,0-0.6-0.3-0.6-0.8c0,0,0.1-2.4-1.8-4.2C5.2,9.8,2.8,9.7,2.8,9.7C2.3,9.7,2,9.4,2,9V7.7C2,7.3,2.3,7,2.8,7z M4,12 c1.1,0,2,0.9,2,2s-0.9,2-2,2c-1.1,0-2-0.9-2-2S2.9,12,4,12z" />
+</svg>

browser/themes/shared/icons/find.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M10.5,2C7.5,2,5,4.5,5,7.5c0,1.1,0.3,2.1,0.9,3L2.3,14c-0.4,0.4-0.4,1.2,0,1.6 C2.6,15.9,2.9,16,3.1,16s0.6-0.1,0.8-0.3l3.5-3.5c0.9,0.6,1.9,0.9,3,0.9c3,0,5.5-2.5,5.5-5.5S13.5,2,10.5,2z M10.5,11 C8.6,11,7,9.4,7,7.5S8.6,4,10.5,4S14,5.6,14,7.5S12.4,11,10.5,11z" />
+</svg>

browser/themes/shared/icons/forget.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M9,17a8,8,0,1,1,8-8A8,8,0,0,1,9,17ZM8.981,4.845V2.685L5.605,5.458,8.981,8.4V6.126A2.815,2.815,0,0,1,11.875,9,2.791,2.791,0,0,1,9,11.875,2.884,2.884,0,0,1,6.184,10H5.017A4.281,4.281,0,0,0,9,13.156,4.3,4.3,0,0,0,13.188,9,4.327,4.327,0,0,0,8.981,4.845Z"/>
+</svg>

browser/themes/shared/icons/forward.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M3,10V8c0-0.6,0.4-1,1-1h4.8L7,5.2 C6.5,4.7,6.4,4,6.8,3.6l0.8-0.9C8,2.3,8.7,2.4,9.2,2.9l5.3,5.4c0.1,0.1,0.4,0.4,0.4,0.7c0,0.3-0.3,0.7-0.4,0.7l-5.4,5.4 c-0.5,0.5-1.2,0.6-1.6,0.2l-0.8-0.9c-0.4-0.4-0.3-1.1,0.2-1.6L8.8,11H4C3.4,11,3,10.6,3,10z" />
+</svg>

browser/themes/shared/icons/fullscreen.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M13,12V6l3,3L13,12z M6,13h6l-3,3L6,13 z M11,12H7c-0.6,0-1-0.4-1-1V7c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1v4C12,11.5,11.6,12,11,12z M11,9c0-0.6-0.4-1-1-1H8 C7.4,8,7,8.4,7,9v1c0,0.6,0.4,1,1,1h2c0.6,0,1-0.4,1-1V9z M9,2l3,3H6L9,2z M5,6v6L2,9L5,6z" />
+</svg>

browser/themes/shared/icons/history.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M9,16.1c-4,0-7.2-3.2-7.2-7.2 C1.8,5,5,1.8,9,1.8c4,0,7.2,3.2,7.2,7.2C16.2,12.9,13,16.1,9,16.1z M9,4C6.2,4,4,6.2,4,9c0,2.7,2.2,5,5,5c2.8,0,5-2.2,5-5 C14,6.2,11.8,4,9,4z M8.7,9.9C8.3,9.8,8,9.4,8,9V6c0-0.6,0.4-1,1-1c0.6,0,1,0.4,1,1v2.8c1.1,1.1,2,3.2,2,3.2S9.8,11,8.7,9.9z" />
+</svg>

browser/themes/shared/icons/home.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M15,9L9,4L3,9H1l8-7l8,7H15z M14,9v7h-4v-5H8 v5H4V9l5-4L14,9z" />
+</svg>

browser/themes/shared/icons/mail.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M10.8,9c0,0-0.6,0.8-1.8,0.8 C7.8,9.8,7.2,9,7.2,9l-6-5.1C1.5,3.4,2.1,3,2.8,3h12.4c0.7,0,1.3,0.4,1.6,0.9L10.8,9z M7.2,10.7c0,0,0.6,0.8,1.8,0.8 c1.2,0,1.8-0.8,1.8-0.8L17,5.3v8c0,0.9-0.8,1.7-1.8,1.7H2.8c-1,0-1.8-0.8-1.8-1.7v-8L7.2,10.7z" />
+</svg>

browser/themes/shared/icons/menu.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M15.5,11h-13C1.7,11,1,10.3,1,9.5 C1,8.7,1.7,8,2.5,8h13C16.3,8,17,8.7,17,9.5C17,10.3,16.3,11,15.5,11z M15.5,6h-13C1.7,6,1,5.3,1,4.5S1.7,3,2.5,3h13 C16.3,3,17,3.7,17,4.5S16.3,6,15.5,6z M2.5,13h13c0.8,0,1.5,0.7,1.5,1.5S16.3,16,15.5,16h-13C1.7,16,1,15.3,1,14.5S1.7,13,2.5,13z" />
+</svg>

browser/themes/shared/icons/new-tab.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M18,12v2a1,1,0,0,1-1,1H2a1,1,0,0,1-1-1V12a1,1,0,0,1,1-1H1.142c2.3,0,2.536-1.773,2.875-4,0.351-2.316.083-4,3.13-4h4.707C14.917,3,14.647,4.684,15,7c0.34,2.228.582,4,2.89,4H17A1,1,0,0,1,18,12ZM11.5,8H10V6.5a0.5,0.5,0,1,0-1,0V8H7.5a0.5,0.5,0,0,0,0,1H9v1.5a0.5,0.5,0,1,0,1,0V9h1.5A0.5,0.5,0,1,0,11.5,8Z"/>
+</svg>

browser/themes/shared/icons/new-window.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M15.5,16h-13C1.7,16,1,15.3,1,14.5v-11 C1,2.7,1.7,2,2.5,2h13C16.3,2,17,2.7,17,3.5v11C17,15.3,16.3,16,15.5,16z M9.5,3C9.2,3,9,3.2,9,3.5S9.2,4,9.5,4S10,3.8,10,3.5 S9.8,3,9.5,3z M11.4,3c-0.3,0-0.5,0.2-0.5,0.5S11.2,4,11.4,4c0.3,0,0.5-0.2,0.5-0.5S11.7,3,11.4,3z M14.5,3h-1C13.2,3,13,3.2,13,3.5 S13.2,4,13.5,4h1C14.8,4,15,3.8,15,3.5S14.8,3,14.5,3z M15,7c0-0.6-0.4-1-1-1H4C3.4,6,3,6.4,3,7v6c0,0.6,0.4,1,1,1h10 c0.6,0,1-0.4,1-1V7z" />
+</svg>

browser/themes/shared/icons/open.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M2,6V3c0-0.6,0.5-1,1-1h4 c0.5,0,1.2,0.9,1.2,0.9L9,4l6.5,0C15.8,4,16,4.2,16,4.5V6H2z M1.6,7h14.8c0.2,0,0.3,0.2,0.3,0.3c0,0-0.4,2.1-0.5,4.2 c-0.1,2.1-0.2,4.1-0.2,4.1c0,0.2-0.2,0.4-0.4,0.4H2.3C2.1,16,2,15.8,2,15.6c0,0,0.1-1.6-0.2-4.1C1.6,9.4,1.3,7.3,1.3,7.3 C1.3,7.2,1.5,7,1.6,7z" />
+</svg>

browser/themes/shared/icons/print.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M16,14h-2l1,2H3l1-2H2c-0.6,0-1-0.4-1-1V8 c0-0.6,0.4-1,1-1h1V5c0-0.6,0.4-1,1-1V3c0-0.6,0.4-1,1-1h8c0.6,0,1,0.4,1,1v1c0.6,0,1,0.4,1,1v2h1c0.6,0,1,0.4,1,1v5 C17,13.6,16.6,14,16,14z M4,14l0.5-1H4V14z M4.5,9H4H3.5C3.2,9,3,9.2,3,9.5S3.2,10,3.5,10h1C4.8,10,5,9.8,5,9.5S4.8,9,4.5,9z M13,4 c0-0.6-0.4-1-1-1H6C5.4,3,5,3.4,5,4v3c0,0.6,0.4,1,1,1h6c0.6,0,1-0.4,1-1V4z M12.1,13H5.9L5,15h8L12.1,13z M14,13h-0.5l0.5,1V13z" />
+</svg>

browser/themes/shared/icons/privateBrowsing.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M16.7,7.5 c-0.1,1.1,0.2,2.5-1.3,4.4C13.9,14,12.3,14,12,14c-1.8-0.1-2-1.5-3-1.5c-0.9,0-1.6,1.4-3,1.5c-0.3,0-1.9,0-3.4-2 C1.1,10,1.4,8.7,1.3,7.5C1.2,6.4,1,5.2,1,5.2S1.7,5.9,2.6,6c0.9,0.1,1.1-0.3,3-0.9C7.7,4.5,9,7,9,7s1.4-2.4,3.4-1.9s2,0.9,2.9,0.9 C16.2,5.9,17,5.2,17,5.2S16.8,6.4,16.7,7.5z M5.9,8C4.8,7.8,4.3,8.2,3.8,8.4C3.4,8.5,3,8.6,3,8.6S3,9.2,4.2,9.8 c1.1,0.6,3.5,0.3,3.5,0.3S7.9,8.4,5.9,8z M14.2,8.4c-0.5-0.2-1-0.6-2.1-0.4c-2,0.4-1.8,2.1-1.8,2.1s2.4,0.3,3.5-0.3 C15,9.2,15,8.6,15,8.6S14.7,8.5,14.2,8.4z" />
+</svg>

browser/themes/shared/icons/reload.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M16,9H9l2.8-2.8c-0.7-0.5-1.4-0.7-2.3-0.7 c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c1.4,0,2.7-0.7,3.4-1.9l2.3,1c-1.1,2-3.2,3.4-5.7,3.4C5.9,16,3,13.1,3,9.5C3,5.9,5.9,3,9.5,3 c1.5,0,2.9,0.5,4.1,1.4L16,2V9z" />
+</svg>

browser/themes/shared/icons/save.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M13.5,16h-9C3.7,16,3,15.3,3,14.5v-11 C3,2.7,3.7,2,4.5,2H12l3,3v9.5C15,15.3,14.3,16,13.5,16z M11,2.7V6h3.3L11,2.7z" />
+</svg>

browser/themes/shared/icons/settings.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M12.4,14.7l-0.6-1.5c0.3-0.2,0.5-0.4,0.8-0.6c0.2-0.2,0.4-0.5,0.6-0.7l1.5,0.6 c0.3,0.1,0.5,0,0.7-0.3l0.4-0.9c0.1-0.3,0-0.5-0.3-0.7L13.9,10c0.1-0.6,0.1-1.3,0-1.9l1.5-0.6c0.3-0.1,0.4-0.4,0.3-0.7l-0.4-0.9 c-0.1-0.3-0.4-0.4-0.7-0.3l-1.5,0.6C13,6,12.8,5.7,12.5,5.5c-0.2-0.2-0.5-0.4-0.7-0.6l0.6-1.5c0.1-0.3,0-0.5-0.3-0.7l-0.9-0.4 c-0.3-0.1-0.5,0-0.7,0.3L10,4.1C9.4,4,8.7,4,8.1,4.1L7.5,2.6C7.4,2.3,7.1,2.2,6.8,2.3L5.9,2.7C5.7,2.8,5.5,3.1,5.6,3.4l0.6,1.5 C6,5,5.7,5.2,5.5,5.5C5.3,5.7,5.1,5.9,4.9,6.2L3.4,5.5c-0.3-0.1-0.5,0-0.7,0.3L2.4,6.7C2.3,7,2.4,7.3,2.6,7.4L4.1,8 C4,8.6,4,9.3,4.1,9.9l-1.5,0.6c-0.3,0.1-0.4,0.4-0.3,0.7l0.4,0.9c0.1,0.3,0.4,0.4,0.7,0.3l1.5-0.6C5,12,5.2,12.3,5.5,12.5 c0.2,0.2,0.5,0.4,0.7,0.6l-0.6,1.5c-0.1,0.3,0,0.5,0.3,0.7l0.9,0.4c0.3,0.1,0.5,0,0.7-0.3L8,13.9c0.6,0.1,1.3,0.1,1.9,0l0.6,1.5 c0.1,0.3,0.4,0.4,0.7,0.3l0.9-0.4C12.3,15.2,12.5,14.9,12.4,14.7z M7.4,10.6c-0.9-0.9-0.9-2.3,0-3.2c0.9-0.9,2.3-0.9,3.2,0 c0.9,0.9,0.9,2.3,0,3.2C9.7,11.5,8.3,11.5,7.4,10.6z" />
+</svg>

browser/themes/shared/icons/share.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M10,11l5-8l-7,8l2,6l-4-5H2L16,1v13L10,11z M12.6,13.3L10,17v-5L12.6,13.3z" />
+</svg>

browser/themes/shared/icons/sidebars.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M15.5,16h-13C1.7,16,1,15.3,1,14.5v-11 C1,2.7,1.7,2,2.5,2h13C16.3,2,17,2.7,17,3.5v11C17,15.3,16.3,16,15.5,16z M3,7v6c0,0.6,0.4,1,1,1h7V6H4C3.4,6,3,6.4,3,7z M9.5,3 C9.2,3,9,3.2,9,3.5S9.2,4,9.5,4S10,3.8,10,3.5S9.8,3,9.5,3z M11.4,3c-0.3,0-0.5,0.2-0.5,0.5S11.2,4,11.4,4c0.3,0,0.5-0.2,0.5-0.5 S11.7,3,11.4,3z M14.5,3h-1C13.2,3,13,3.2,13,3.5S13.2,4,13.5,4h1C14.8,4,15,3.8,15,3.5S14.8,3,14.5,3z M15,7c0-0.6-0.4-1-1-1h-1v8 h1c0.6,0,1-0.4,1-1V7z" />
+</svg>

browser/themes/shared/icons/stop.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M15.4,4.8L11.2,9l4.2,4.2l-2.1,2.1L9,11.2 l-4.2,4.2l-2.1-2.1L6.9,9L2.6,4.8l2.1-2.1L9,6.9l4.2-4.2L15.4,4.8z" />
+</svg>

browser/themes/shared/icons/sync.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M16,9.8c-0.1,0.6-0.2,1.2-0.4,1.7 c-0.4,1.3-1.2,2.5-2.5,3.3c0.4,0.4,1.3,0.9,1.3,0.9s-2,0.3-4.1,0.3c0,0-0.1-0.1-0.1-0.1l0,0.1c-1,0-2-0.3-3-0.6 c0.7-0.6,1.2-1.3,1.6-2.1c0.6-1.2,0.6-3,0.6-3c0,0,0.9,1.5,1.4,2.1c1.2-0.6,2-1.8,2.1-3c0.1-0.9-0.2-1.7-0.6-2.3 c-0.4-0.7-1-1.1-1.7-1.4c0.2-0.4,0.5-0.9,0.8-1.3c0.4-0.6,0.9-1,1.3-1.2C14.8,4.3,16.3,6.9,16,9.8z M9,7.8c0,0-1.1-1.5-1.6-2 C6,6.5,5.2,7.8,5.2,9.2c0.1,1.5,1.1,2.7,2.4,3.3c-0.3,0.5-0.6,1-1,1.4c-0.4,0.5-0.9,0.8-1.2,1.1C3.1,13.6,1.7,11,2.1,8.2 c0.1-0.7,0.3-1.4,0.5-2c0.4-1.1,1.1-2,2.1-2.7C4.8,3.4,4.9,3.4,5,3.3C4.6,2.9,3.4,2.5,3.4,2.5s2.5-0.8,6.8-0.3C8.9,4.1,9,7.8,9,7.8z" />
+</svg>

browser/themes/shared/icons/webIDE.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M14.311,5.123A6.579,6.579,0,1,0,5.026,14.24L4.545,15.609A7.985,7.985,0,1,1,16.885,7.7ZM9.034,16.148L5,18l1.863-4.024ZM13.4,4.89c0.009,0.028.014,0.058,0.023,0.085,0.059,0.064.1,0.14,0.16,0.207l-0.89.911c-0.038-.222-0.061-0.458-0.107-0.672a15.86,15.86,0,0,0-1.706-.277c0.034,0.621.058,1.252,0.076,1.9,0.265,0.008.518,0.022,0.778,0.032L10,8.855c0-.283-0.011-0.556-0.014-0.839C9.652,8.013,9.337,8,9,8s-0.652.013-.983,0.017C8.013,8.348,8,8.663,8,9s0.013,0.652.017,0.983C8.308,9.987,8.59,10,8.882,10l-1.8,1.848c-0.012-.3-0.028-0.586-0.036-0.888-0.657-.019-1.3-0.045-1.93-0.081A15.963,15.963,0,0,0,5.389,12.6c0.26,0.059.547,0.089,0.819,0.135l-0.958.982a6.057,6.057,0,0,1-.642-0.6c-0.009-.027-0.014-0.057-0.023-0.085A6,6,0,0,1,3.93,12.2c0.148,0.051.312,0.091,0.466,0.139a13.619,13.619,0,0,1-.275-1.521c-0.282-.02-0.581-0.031-0.857-0.054A5.981,5.981,0,0,1,3.06,9.8c0.313,0.021.651,0.031,0.971,0.049C4.015,9.571,4,9.289,4,9s0.015-.571.032-0.852C3.711,8.166,3.372,8.176,3.06,8.2a5.981,5.981,0,0,1,.2-0.957c0.276-.023.575-0.034,0.857-0.054a13.633,13.633,0,0,1,.268-1.5c-0.158.048-.325,0.088-0.476,0.14a6,6,0,0,1,.671-0.864C4.593,4.938,4.6,4.907,4.607,4.88a6.031,6.031,0,0,1,1.195-1c-0.061.178-.11,0.375-0.165,0.562a13.17,13.17,0,0,1,1.544-.3C7.2,3.827,7.214,3.5,7.239,3.2A5.92,5.92,0,0,1,8.2,3c-0.023.343-.034,0.713-0.053,1.066C8.431,4.046,8.7,4,9,4s0.568,0.046.856,0.063C9.837,3.711,9.826,3.34,9.8,3a5.923,5.923,0,0,1,.957.206c0.025,0.3.037,0.624,0.058,0.931a13.172,13.172,0,0,1,1.518.3c-0.056-.191-0.1-0.391-0.167-0.573A6.032,6.032,0,0,1,13.4,4.89ZM5,9c0,0.308.02,0.6,0.035,0.9,0.648,0.029,1.31.049,1.985,0.064C7.016,9.641,7,9.33,7,9s0.016-.641.02-0.966C6.345,8.049,5.683,8.069,5.035,8.1,5.02,8.4,5,8.692,5,9ZM5.383,5.427a15.968,15.968,0,0,0-.272,1.695c0.631-.036,1.273-0.062,1.93-0.081,0.018-.645.042-1.276,0.076-1.9A15.853,15.853,0,0,0,5.383,5.427Zm4.523-.36C9.606,5.051,9.309,5.031,9,5.031s-0.606.02-.906,0.036c-0.027.638-.046,1.29-0.06,1.954C8.358,7.016,8.67,7,9,7s0.641,0.016.967,0.021C9.952,6.357,9.934,5.7,9.906,5.067Zm4.033,1.872,2.121,2.121L9.884,15.209,7.763,13.087ZM14.5,12.633l2.385-2.313a7.993,7.993,0,0,1-6.806,6.6L12.5,14.569A6.608,6.608,0,0,0,14.5,12.633Z"/>
+</svg>

browser/themes/shared/icons/zoom-in.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M14,10h-4v4H8v-4H4V8h4V4h2v4h4V10z" />
+</svg>

browser/themes/shared/icons/zoom-out.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M4,8h10v2H4V8z" />
+</svg>

browser/themes/shared/jar.inc.mn

@@ -89,6 +89,46 @@
   skin/classic/browser/fxa/android@2x.png                      (../shared/fxa/android@2x.png)
   skin/classic/browser/fxa/ios.png                             (../shared/fxa/ios.png)
   skin/classic/browser/fxa/ios@2x.png                          (../shared/fxa/ios@2x.png)
+
+
+  skin/classic/browser/addons.svg                     (../shared/icons/addons.svg)
+  skin/classic/browser/back.svg                       (../shared/icons/back.svg)
+  skin/classic/browser/back-large.svg                 (../shared/icons/back-large.svg)
+  skin/classic/browser/bookmark.svg                   (../shared/icons/bookmark.svg)
+  skin/classic/browser/bookmark-hollow.svg            (../shared/icons/bookmark-hollow.svg)
+  skin/classic/browser/bookmarksMenu.svg              (../shared/icons/bookmarksMenu.svg)
+  skin/classic/browser/characterEncoding.svg          (../shared/icons/characterEncoding.svg)
+  skin/classic/browser/chevron.svg                    (../shared/icons/chevron.svg)
+  skin/classic/browser/containers.svg                       (../shared/icons/containers.svg)
+  skin/classic/browser/developer.svg                  (../shared/icons/developer.svg)
+  skin/classic/browser/download.svg                   (../shared/icons/download.svg)
+  skin/classic/browser/edit-copy.svg                  (../shared/icons/edit-copy.svg)
+  skin/classic/browser/edit-cut.svg                   (../shared/icons/edit-cut.svg)
+  skin/classic/browser/edit-paste.svg                 (../shared/icons/edit-paste.svg)
+  skin/classic/browser/feed.svg                       (../shared/icons/feed.svg)
+  skin/classic/browser/find.svg                       (../shared/icons/find.svg)
+  skin/classic/browser/forget.svg                     (../shared/icons/forget.svg)
+  skin/classic/browser/forward.svg                    (../shared/icons/forward.svg)
+  skin/classic/browser/fullscreen.svg                 (../shared/icons/fullscreen.svg)
+  skin/classic/browser/history.svg                    (../shared/icons/history.svg)
+  skin/classic/browser/home.svg                       (../shared/icons/home.svg)
+  skin/classic/browser/mail.svg                       (../shared/icons/mail.svg)
+  skin/classic/browser/menu.svg                       (../shared/icons/menu.svg)
+  skin/classic/browser/new-tab.svg                    (../shared/icons/new-tab.svg)
+  skin/classic/browser/new-window.svg                 (../shared/icons/new-window.svg)
+  skin/classic/browser/open.svg                       (../shared/icons/open.svg)
+  skin/classic/browser/print.svg                      (../shared/icons/print.svg)
+  skin/classic/browser/privateBrowsing.svg            (../shared/icons/privateBrowsing.svg)
+  skin/classic/browser/save.svg                       (../shared/icons/save.svg)
+  skin/classic/browser/settings.svg                   (../shared/icons/settings.svg)
+  skin/classic/browser/share.svg                      (../shared/icons/share.svg)
+  skin/classic/browser/sidebars.svg                   (../shared/icons/sidebars.svg)
+  skin/classic/browser/sync.svg                       (../shared/icons/sync.svg)
+  skin/classic/browser/webIDE.svg                     (../shared/icons/webIDE.svg)
+  skin/classic/browser/zoom-in.svg                    (../shared/icons/zoom-in.svg)
+  skin/classic/browser/zoom-out.svg                   (../shared/icons/zoom-out.svg)
+
+
   skin/classic/browser/search-indicator.png                    (../shared/search/search-indicator.png)
   skin/classic/browser/search-indicator@2x.png                 (../shared/search/search-indicator@2x.png)
   skin/classic/browser/search-engine-placeholder.png           (../shared/search/search-engine-placeholder.png)

browser/themes/shared/social/social.inc.css

@@ -5,8 +5,9 @@
 %endif
 
 #manage-share-providers {
-  list-style-image: url("chrome://browser/skin/Toolbar.png");
-  -moz-image-region: rect(0, 468px, 18px, 450px);
+  list-style-image: url("chrome://browser/skin/settings.svg");
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill);
 }
 
 #manage-share-providers > .toolbarbutton-icon {

browser/themes/shared/toolbarbutton-icons.inc.css

@@ -1,83 +1,93 @@
-:-moz-any(@primaryToolbarButtons@),
-#bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
-  list-style-image: url("chrome://browser/skin/Toolbar.png");
+:root {
+  --toolbarbutton-icon-fill: #4c4c4c;
+  --toolbarbutton-icon-fill-inverted: #fff;
+  --toolbarbutton-icon-fill-attention: #177ee5;
 }
 
-toolbar[brighttext] :-moz-any(@primaryToolbarButtons@),
-toolbar[brighttext] #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
-  list-style-image: url(chrome://browser/skin/Toolbar-inverted.png);
+:-moz-any(@primaryToolbarButtons@) {
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill);
+}
+
+toolbar[brighttext] :-moz-any(@primaryToolbarButtons@) {
+  fill: var(--toolbarbutton-icon-fill-inverted);
 }
 
 #back-button {
-  -moz-image-region: rect(0, 36px, 18px, 18px);
+  list-style-image: url("chrome://browser/skin/back-large.svg");
 }
 
 #forward-button {
-  -moz-image-region: rect(0, 72px, 18px, 54px);
+  list-style-image: url("chrome://browser/skin/forward.svg");
 }
 
 #home-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 126px, 18px, 108px);
+  list-style-image: url("chrome://browser/skin/home.svg");
 }
 
 #bookmarks-menu-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 144px, 18px, 126px);
+  list-style-image: url("chrome://browser/skin/bookmark-hollow.svg");
 }
 
 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
-  -moz-image-region: rect(0, 162px, 18px, 144px);
+  list-style-image: url("chrome://browser/skin/bookmark.svg");
+}
+
+toolbar:not([brighttext]) #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button {
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill-attention);
 }
 
 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
-  -moz-image-region: rect(0, 630px, 18px, 612px);
+  list-style-image: url("chrome://browser/skin/bookmarksMenu.svg");
 }
 
 #history-panelmenu[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 180px, 18px, 162px);
+  list-style-image: url("chrome://browser/skin/history.svg");
 }
 
 #downloads-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 198px, 18px, 180px);
+  list-style-image: url("chrome://browser/skin/download.svg");
 }
 
 #add-ons-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 216px, 18px, 198px);
+  list-style-image: url("chrome://browser/skin/addons.svg");
 }
 
 #open-file-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 234px, 18px, 216px);
+  list-style-image: url("chrome://browser/skin/open.svg");
 }
 
 #save-page-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 252px, 18px, 234px);
+  list-style-image: url("chrome://browser/skin/save.svg");
 }
 
 #sync-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 792px, 18px, 774px);
+  list-style-image: url("chrome://browser/skin/sync.svg");
 }
 
 #containers-panelmenu[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 810px, 18px, 792px);
+  list-style-image: url("chrome://browser/skin/containers.svg");
 }
 
 #feed-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 288px, 18px, 270px);
+  list-style-image: url("chrome://browser/skin/feed.svg");
 }
 
 #social-share-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0px, 306px, 18px, 288px);
+  list-style-image: url("chrome://browser/skin/share.svg");
 }
 
 #characterencoding-button[cui-areatype="toolbar"]{
-  -moz-image-region: rect(0, 324px, 18px, 306px);
+  list-style-image: url("chrome://browser/skin/characterEncoding.svg");
 }
 
 #new-window-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 342px, 18px, 324px);
+  list-style-image: url("chrome://browser/skin/new-window.svg");
 }
 
 #e10s-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 342px, 18px, 324px);
+  list-style-image: url("chrome://browser/skin/new-window.svg");
 }
 
 #e10s-button > .toolbarbutton-icon {
@@ -85,62 +95,62 @@ toolbar[brighttext] #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarke
 }
 
 #new-tab-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 360px, 18px, 342px);
+  list-style-image: url("chrome://browser/skin/new-tab.svg");
 }
 
 #privatebrowsing-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 378px, 18px, 360px);
+  list-style-image: url("chrome://browser/skin/privateBrowsing.svg");
 }
 
 #find-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 396px, 18px, 378px);
+  list-style-image: url("chrome://browser/skin/find.svg");
 }
 
 #print-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 414px, 18px, 396px);
+  list-style-image: url("chrome://browser/skin/print.svg");
 }
 
 %ifdef XP_MACOSX
 #restore-button,
 %endif
 #fullscreen-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 432px, 18px, 414px);
+  list-style-image: url("chrome://browser/skin/fullscreen.svg");
 }
 
 #developer-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 450px, 18px, 432px);
+  list-style-image: url("chrome://browser/skin/developer.svg");
 }
 
 #preferences-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 468px, 18px, 450px);
+  list-style-image: url("chrome://browser/skin/settings.svg");
 }
 
 #PanelUI-menu-button {
-  -moz-image-region: rect(0, 486px, 18px, 468px);
+  list-style-image: url("chrome://browser/skin/menu.svg");
 }
 
 #edit-controls:not(@inAnyPanel@) > #cut-button {
-  -moz-image-region: rect(0, 504px, 18px, 486px);
+  list-style-image: url("chrome://browser/skin/edit-cut.svg");
 }
 
 #edit-controls:not(@inAnyPanel@) > #copy-button {
-  -moz-image-region: rect(0, 522px, 18px, 504px);
+  list-style-image: url("chrome://browser/skin/edit-copy.svg");
 }
 
 #edit-controls:not(@inAnyPanel@) > #paste-button {
-  -moz-image-region: rect(0, 540px, 18px, 522px);
+  list-style-image: url("chrome://browser/skin/edit-paste.svg");
 }
 
 #zoom-controls:not(@inAnyPanel@) > #zoom-out-button {
-  -moz-image-region: rect(0, 558px, 18px, 540px);
+  list-style-image: url("chrome://browser/skin/zoom-out.svg");
 }
 
 #zoom-controls:not(@inAnyPanel@) > #zoom-in-button {
-  -moz-image-region: rect(0, 576px, 18px, 558px);
+  list-style-image: url("chrome://browser/skin/zoom-in.svg");
 }
 
 #nav-bar-overflow-button {
-  -moz-image-region: rect(0, 612px, 18px, 594px);
+  list-style-image: url("chrome://browser/skin/chevron.svg");
 }
 
 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
@@ -148,23 +158,19 @@ toolbar[brighttext] #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarke
 }
 
 #email-link-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 666px, 18px, 648px);
+  list-style-image: url("chrome://browser/skin/mail.svg");
 }
 
 #sidebar-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 684px, 18px, 666px);
+  list-style-image: url("chrome://browser/skin/sidebars.svg");
 }
 
 #panic-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 702px, 18px, 684px);
+  list-style-image: url("chrome://browser/skin/forget.svg");
 }
 
 #panic-button[cui-areatype="toolbar"][open] {
-%ifdef XP_MACOSX
-  -moz-image-region: rect(36px, 702px, 54px, 684px);
-%else
-  -moz-image-region: rect(18px, 702px, 36px, 684px);
-%endif
+  fill: rgb(213, 32, 20);
 }
 
 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
@@ -172,176 +178,5 @@ toolbar[brighttext] #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarke
 }
 
 #webide-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 738px, 18px, 720px);
-}
-
-@media (min-resolution: 1.1dppx) {
-  :-moz-any(@primaryToolbarButtons@),
-  #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
-    list-style-image: url("chrome://browser/skin/Toolbar@2x.png");
-  }
-
-  toolbar[brighttext] :-moz-any(@primaryToolbarButtons@),
-  toolbar[brighttext] #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
-    list-style-image: url("chrome://browser/skin/Toolbar-inverted@2x.png");
-  }
-
-  #back-button {
-    -moz-image-region: rect(0, 72px, 36px, 36px);
-  }
-
-  #forward-button {
-    -moz-image-region: rect(0, 144px, 36px, 108px);
-  }
-
-  #home-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 252px, 36px, 216px);
-  }
-
-  #bookmarks-menu-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 288px, 36px, 252px);
-  }
-
-  #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
-    -moz-image-region: rect(0, 324px, 36px, 288px);
-  }
-
-  #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
-    -moz-image-region: rect(0px, 1260px, 36px, 1224px);
-  }
-
-  #history-panelmenu[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 360px, 36px, 324px);
-  }
-
-  #downloads-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 396px, 36px, 360px);
-  }
-
-  #add-ons-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 432px, 36px, 396px);
-  }
-
-  #open-file-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 468px, 36px, 432px);
-  }
-
-  #save-page-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 504px, 36px, 468px);
-  }
-
-  #sync-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 1584px, 36px, 1548px);
-  }
-
-  #containers-panelmenu[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 1620px, 36px, 1584px);
-  }
-
-  #feed-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 576px, 36px, 540px);
-  }
-
-  #social-share-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 612px, 36px, 576px);
-  }
-
-  #characterencoding-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 648px, 36px, 612px);
-  }
-
-  #new-window-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 684px, 36px, 648px);
-  }
-
-  #e10s-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 684px, 36px, 648px);
-  }
-
-  #e10s-button > .toolbarbutton-icon {
-    transform: scaleY(-1);
-  }
-
-  #new-tab-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 720px, 36px, 684px);
-  }
-
-  #privatebrowsing-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 756px, 36px, 720px);
-  }
-
-  #find-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 792px, 36px, 756px);
-  }
-
-  #print-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 828px, 36px, 792px);
-  }
-
-%ifdef XP_MACOSX
-  #restore-button,
-%endif
-  #fullscreen-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 864px, 36px, 828px);
-  }
-
-  #developer-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 900px, 36px, 864px);
-  }
-
-  #preferences-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 936px, 36px, 900px);
-  }
-
-  #PanelUI-menu-button {
-    -moz-image-region: rect(0, 972px, 36px, 936px);
-  }
-
-  #edit-controls[cui-areatype="toolbar"] > #cut-button {
-    -moz-image-region: rect(0, 1008px, 36px, 972px);
-  }
-
-  #edit-controls[cui-areatype="toolbar"] > #copy-button {
-    -moz-image-region: rect(0, 1044px, 36px, 1008px);
-  }
-
-  #edit-controls[cui-areatype="toolbar"] > #paste-button {
-    -moz-image-region: rect(0, 1080px, 36px, 1044px);
-  }
-
-  #zoom-controls[cui-areatype="toolbar"] > #zoom-out-button {
-    -moz-image-region: rect(0, 1116px, 36px, 1080px);
-  }
-
-  #zoom-controls[cui-areatype="toolbar"] > #zoom-in-button {
-    -moz-image-region: rect(0, 1152px, 36px, 1116px);
-  }
-
-  #nav-bar-overflow-button {
-    -moz-image-region: rect(0, 1224px, 36px, 1188px);
-  }
-
-  #email-link-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 1332px, 36px, 1296px);
-  }
-
-  #sidebar-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 1368px, 36px, 1332px);
-  }
-
-  #panic-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 1404px, 36px, 1368px);
-  }
-
-  #panic-button[cui-areatype="toolbar"][open] {
-%ifdef XP_MACOSX
-    -moz-image-region: rect(72px, 1404px, 108px, 1368px);
-%else
-    -moz-image-region: rect(36px, 1404px, 72px, 1368px);
-%endif
-  }
-
-  #webide-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 1476px, 36px, 1440px);
-  }
+  list-style-image: url("chrome://browser/skin/webIDE.svg");
 }

browser/themes/windows/browser.css

@@ -1711,8 +1711,9 @@ html|*.addon-webext-perm-list {
 .addon-toolbar-icon {
   width: 14px;
   height: 14px;
-  list-style-image: url("chrome://browser/skin/Toolbar.png");
-  -moz-image-region: rect(0, 486px, 18px, 468px);
+  list-style-image: url("chrome://browser/skin/menu.svg");
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill);
 }
 
 /* Notification icon box */

browser/themes/windows/downloads/indicator.css

@@ -21,33 +21,21 @@
 
 /*** Main indicator icon ***/
 
-@media not all and (min-resolution: 1.1dppx) {
-  #downloads-button {
-    --downloads-indicator-image: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 0, 198, 18, 180);
-    --downloads-indicator-image-attention: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 18, 198, 36, 180);
-    --downloads-indicator-image-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180);
-    --downloads-indicator-image-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 18, 198, 36, 180);
-  }
-}
-
-@media (min-resolution: 1.1dppx) {
-  #downloads-button {
-    --downloads-indicator-image: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 0, 396, 36, 360);
-    --downloads-indicator-image-attention: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 36, 396, 72, 360);
-    --downloads-indicator-image-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 0, 396, 36, 360);
-    --downloads-indicator-image-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 36, 396, 72, 360);
-  }
+#downloads-button {
+  --downloads-indicator-image: url("chrome://browser/skin/download.svg");
 }
 
 #downloads-indicator-icon {
   background: var(--downloads-indicator-image) center no-repeat;
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill);
   width: 18px;
   height: 18px;
   background-size: 18px;
 }
 
 toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon {
-  background-image: var(--downloads-indicator-image-inverted);
+  fill: var(--toolbarbutton-icon-fill-inverted);
 }
 
 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
@@ -81,11 +69,7 @@ toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-in
 }
 
 #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon {
-  background-image: var(--downloads-indicator-image-attention);
-}
-
-toolbar[brighttext] #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon {
-  background-image: var(--downloads-indicator-image-attention-inverted);
+  fill: var(--toolbarbutton-icon-fill-attention);
 }
 
 #downloads-button[cui-areatype="menu-panel"][attention="success"] {
@@ -98,19 +82,17 @@ toolbar[brighttext] #downloads-button[attention="success"] > #downloads-indicato
 
 #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
   background: var(--downloads-indicator-image) center no-repeat;
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill);
   background-size: 12px;
 }
 
 toolbar[brighttext] #downloads-button:not([counter]):not([attention="success"]) > #downloads-indicator-anchor > #downloads-button-progress-area > #downloads-indicator-counter {
-  background-image: var(--downloads-indicator-image-inverted);
+  fill: var(--toolbarbutton-icon-fill-inverted);
 }
 
 #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  background-image: var(--downloads-indicator-image-attention);
-}
-
-toolbar[brighttext] #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  background-image: var(--downloads-indicator-image-attention-inverted);
+  fill: var(--toolbarbutton-icon-fill-attention);
 }
 
 /*** Download notifications ***/

browser/themes/windows/jar.mn

@@ -39,14 +39,6 @@ browser.jar:
   skin/classic/browser/searchbar.css
   skin/classic/browser/setDesktopBackground.css
   skin/classic/browser/slowStartup-16.png
-  skin/classic/browser/Toolbar.png
-  skin/classic/browser/Toolbar@2x.png
-  skin/classic/browser/Toolbar-win7.png
-  skin/classic/browser/Toolbar-win7@2x.png
-  skin/classic/browser/Toolbar-inverted.png
-  skin/classic/browser/Toolbar-inverted@2x.png
-  skin/classic/browser/Toolbar-win8.png
-  skin/classic/browser/Toolbar-win8@2x.png
   skin/classic/browser/toolbarbutton-dropdown-arrow-win7.png
   skin/classic/browser/urlbar-popup-blocked.png
   skin/classic/browser/urlbar-history-dropmarker.png
@@ -175,13 +167,6 @@ browser.jar:
 % override chrome://browser/skin/tabbrowser/newtab-inverted.svg       chrome://browser/skin/tabbrowser/newtab-inverted-win7.svg     os=WINNT osversion<=6.1
 % override chrome://browser/skin/tabbrowser/tab-arrow-left.svg        chrome://browser/skin/tabbrowser/tab-arrow-left-win7.svg      os=WINNT osversion<=6.1
 
-% override chrome://browser/skin/Toolbar@2x.png                       chrome://browser/skin/Toolbar-win7@2x.png                         os=WINNT osversion=6.1
-% override chrome://browser/skin/Toolbar@2x.png                       chrome://browser/skin/Toolbar-win8@2x.png                         os=WINNT osversion=6.2
-% override chrome://browser/skin/Toolbar@2x.png                       chrome://browser/skin/Toolbar-win8@2x.png                         os=WINNT osversion=6.3
-% override chrome://browser/skin/Toolbar.png                          chrome://browser/skin/Toolbar-win7.png                            os=WINNT osversion=6.1
-% override chrome://browser/skin/Toolbar.png                          chrome://browser/skin/Toolbar-win8.png                            os=WINNT osversion=6.2
-% override chrome://browser/skin/Toolbar.png                          chrome://browser/skin/Toolbar-win8.png                            os=WINNT osversion=6.3
-
 % override chrome://browser/skin/tabbrowser/tab-background-start.png     chrome://browser/skin/tabbrowser/tab-background-start-preWin10.png     os=WINNT osversion<=6.3
 % override chrome://browser/skin/tabbrowser/tab-background-start@2x.png  chrome://browser/skin/tabbrowser/tab-background-start-preWin10@2x.png  os=WINNT osversion<=6.3
 % override chrome://browser/skin/tabbrowser/tab-background-middle.png    chrome://browser/skin/tabbrowser/tab-background-middle-preWin10.png    os=WINNT osversion<=6.3

browser/themes/windows/places/organizer.css

@@ -15,17 +15,19 @@
   opacity: .4;
 }
 
-#back-button,
-#forward-button {
-  list-style-image: url("chrome://browser/skin/Toolbar.png");
+#back-button > .toolbarbutton-icon,
+#forward-button > .toolbarbutton-icon {
+  -moz-context-properties: fill;
+  fill: currentcolor;
+  opacity: 0.65;
 }
 
 #back-button {
-  -moz-image-region: rect(0, 54px, 18px, 36px);
+  list-style-image: url("chrome://browser/skin/back.svg");
 }
 
 #forward-button {
-  -moz-image-region: rect(0, 72px, 18px, 54px);
+  list-style-image: url("chrome://browser/skin/forward.svg");
 }
 
 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
@@ -79,8 +81,8 @@
 }
 
 /* organize, view and maintenance buttons icons */
-#organizeButton, 
-#viewMenu, 
+#organizeButton,
+#viewMenu,
 #maintenanceButton {
   list-style-image: url("chrome://browser/skin/places/libraryToolbar.png");
 }