Bug 1315255 - Add ability for themes to change toolbar icons. r?mdeboer draft
authorJared Wein <jwein@mozilla.com>
Fri, 04 Nov 2016 16:50:51 -0400
changeset 441126 c8d39a6ce4255f6431c182c37952e541c0a34cb9
parent 440554 76094c82d70cebcf7e596a43a96585cf3100d64b
child 537502 1ad08a55764ee59f44c401772e7988117be7ee89
push id36367
push userjwein@mozilla.com
push dateFri, 18 Nov 2016 14:48:50 +0000
reviewersmdeboer
bugs1315255
milestone53.0a1
Bug 1315255 - Add ability for themes to change toolbar icons. r?mdeboer MozReview-Commit-ID: H8qKR05PpBU
browser/components/extensions/ext-theme.js
browser/components/extensions/schemas/theme.json
browser/components/extensions/test/browser/browser.ini
browser/components/extensions/test/browser/browser_ext_theme_icons.js
browser/components/extensions/test/browser/burrito.svg
browser/components/extensions/test/browser/hamburger.svg
browser/components/extensions/test/browser/house-with-garden.svg
browser/components/extensions/test/browser/pile-of-poop.svg
browser/components/extensions/test/browser/point-left.svg
--- a/browser/components/extensions/ext-theme.js
+++ b/browser/components/extensions/ext-theme.js
@@ -59,16 +59,49 @@ const kThemePropertiesVarMap = new Map([
   ["space_above_tabbar", ["--space-above-tabbar", ":root"]],
   ["square_tabs", ["--tab-curve-width", "#TabsToolbar"]],
   ["toolbar_button_shadow", ["--toolbarbutton-active-boxshadow", ":root"]],
   ["toolbar_button_shadow_inactive", ["--toolbarbutton-hover-boxshadow", ":root"]],
   ["toolbar_navbar_overlap", ["--tab-toolbar-navbar-overlap", ":root"]],
   ["toolbar_navbar_highlight_overlap", ["--navbar-tab-toolbar-highlight-overlap", ":root"]],
   ["toolbar_text_shadow", ["--toolbarbutton-text-shadow", ":root"]],
 ]);
+const kIconsVarMap = new Map([
+  ["back", ["--back-icon", ":root"]],
+  ["forward", ["--forward-icon", ":root"]],
+  ["reload", ["--reload-icon", ":root"]],
+  ["stop", ["--stop-icon", ":root"]],
+  ["bookmark_star", ["--bookmark_star-icon", ":root"]],
+  ["bookmark_menu", ["--bookmark_menu-icon", ":root"]],
+  ["downloads", ["--downloads-icon", ":root"]],
+  ["home", ["--home-icon", ":root"]],
+  ["app_menu", ["--app_menu-icon", ":root"]],
+  ["cut", ["--cut-icon", ":root"]],
+  ["copy", ["--copy-icon", ":root"]],
+  ["paste", ["--paste-icon", ":root"]],
+  ["new_window", ["--new_window-icon", ":root"]],
+  ["new_private_window", ["--new_private_window-icon", ":root"]],
+  ["save_page", ["--save_page-icon", ":root"]],
+  ["print", ["--print-icon", ":root"]],
+  ["history", ["--history-icon", ":root"]],
+  ["full_screen", ["--full_screen-icon", ":root"]],
+  ["find", ["--find-icon", ":root"]],
+  ["options", ["--options-icon", ":root"]],
+  ["addons", ["--addons-icon", ":root"]],
+  ["developer", ["--developer-icon", ":root"]],
+  ["synced_tabs", ["--synced_tabs-icon", ":root"]],
+  ["open_file", ["--open_file-icon", ":root"]],
+  ["sidebars", ["--sidebars-icon", ":root"]],
+  ["share_page", ["--share_page-icon", ":root"]],
+  ["subscribe", ["--subscribe-icon", ":root"]],
+  ["text_encoding", ["--text_encoding-icon", ":root"]],
+  ["email_link", ["--email_link-icon", ":root"]],
+  ["forget", ["--forget-icon", ":root"]],
+  ["pocket", ["--pocket-icon", ":root"]],
+]);
 
 // Some color settings or properties from the manifest need to trigger core browser
 // CSS styles to be overridden in order to be visually applied.
 // The static maps below provide the basic mechanism to do just that:
 // key< 'property_name' > => value< [ 'css_selector', 'css_style_properties_bag' ] >
 //   ^-- if present in the       ^-- An array that consists of
 //       manifest, this rule         0. The selector to which the following styles
 //       will be used                   should apply on, overriding the current theme.
@@ -148,16 +181,112 @@ const kBrowserOverridePropertiesVarMap =
     ["toolbar[brighttext] #downloads-indicator-counter", {"text-shadow": "--toolbarbutton-text-shadow"}],
   ]],
   ["space_above_tabbar", [
     // Give some space to drag the window around while customizing (normal space
     // to left and right of tabs doesn't work in this case)
     ["#main-window[tabsintitlebar][customizing]", {"--space-above-tabbar": "9px"}],
   ]],
 ]);
+const kBrowserOverrideIconsVarMap = new Map([
+  ["back", [
+    ["#back-button", {"list-style-image": "--back-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["forward", [
+    ["#forward-button", {"list-style-image": "--forward-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["reload", [
+    ["#urlbar-reload-button", {"list-style-image": "--reload-icon", "-moz-image-region": "rect(0, 14px, 14px, 0)"}]
+  ]],
+  ["stop", [
+    ["#urlbar-stop-button", {"list-style-image": "--stop-icon", "-moz-image-region": "rect(0, 14px, 14px, 0)"}]
+  ]],
+  ["bookmark_star", [
+    ["#bookmarks-menu-button", {"list-style-image": "--bookmark_star-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["bookmark_menu", [
+    ["#bookmarks-menu-button[cui-areatype='toolbar'] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon", {"list-style-image": "--bookmark_menu-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["downloads", [
+    ["#downloads-button", {"list-style-image": "--downloads-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)", "background-image": "none"}]
+  ]],
+  ["home", [
+    ["#home-button", {"list-style-image": "--home-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["app_menu", [
+    ["#PanelUI-menu-button", {"list-style-image": "--app_menu-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["cut", [
+    ["#cut-button", {"list-style-image": "--cut-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["copy", [
+    ["#copy-button", {"list-style-image": "--copy-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["paste", [
+    ["#paste-button", {"list-style-image": "--paste-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["new_window", [
+    ["#new-window-button", {"list-style-image": "--new_window-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["new_private_window", [
+    ["#privatebrowsing-button", {"list-style-image": "--new_private_window-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["save_page", [
+    ["#save-page-button", {"list-style-image": "--save_page-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["print", [
+    ["#print-button", {"list-style-image": "--print-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["history", [
+    ["#history-panelmenu", {"list-style-image": "--history-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["full_screen", [
+    ["#fullscreen-button", {"list-style-image": "--full_screen-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["find", [
+    ["#find-button", {"list-style-image": "--find-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["options", [
+    ["#preferences-button", {"list-style-image": "--options-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["addons", [
+    ["#add-ons-button", {"list-style-image": "--addons-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["developer", [
+    ["#developer-button", {"list-style-image": "--developer-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["synced_tabs", [
+    ["#sync-button", {"list-style-image": "--synced_tabs-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["open_file", [
+    ["#open-file-button", {"list-style-image": "--open_file-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["sidebars", [
+    ["#sidebar-button", {"list-style-image": "--sidebars-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["share_page", [
+    ["#social-share-button", {"list-style-image": "--share_page-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["subscribe", [
+    ["#feed-button", {"list-style-image": "--subscribe-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["text_encoding", [
+    ["#characterencoding-button", {"list-style-image": "--text_encoding-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["email_link", [
+    ["#email-link-button", {"list-style-image": "--email_link-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["forget", [
+    ["#panic-button", {"list-style-image": "--forget-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+  ["pocket", [
+    ["#pocket-button", {"list-style-image": "--pocket-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}]
+  ]],
+]);
+
 const kTransparentGif = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
 const kVideoElementID = "__WebExtThemeVideoElement__";
 
 function hueToRgb(p, q, t) {
   if (t < 0) {
     t += 1;
   }
   if (t > 1) {
@@ -293,32 +422,35 @@ class Theme {
     this.browserStyleOverrides = {};
     this.cssVars = {};
     this.ntp_video = null;
     this.load(manifest.theme);
     this.render();
   }
 
   load(theme) {
-    // Order of sections matters here!
+    // Order of sections matters because gradients apply on top of colors.
     if (theme.images) {
       this.loadImages(theme.images);
     }
     if (theme.colors) {
       this.loadColors(theme.colors);
     }
     if (theme.tints) {
       this.loadTints(theme.tints);
     }
     if (theme.gradients) {
       this.loadGradients(theme.gradients);
     }
     if (theme.properties) {
       this.loadProperties(theme.properties);
     }
+    if (theme.icons) {
+      this.loadIcons(theme.icons);
+    }
   }
 
   loadColors(colors) {
     for (let color of Object.getOwnPropertyNames(colors)) {
       let val = colors[color];
       // Since values are optional, they may be `null`.
       if (val === null) {
         continue;
@@ -554,54 +686,72 @@ class Theme {
           if (kBrowserOverrideTintsVarMap.has(tint)) {
             addToBrowserOverrides(this.browserStyleOverrides, cssColor, kBrowserOverrideTintsVarMap.get(tint));
           }
         }
       }
     }
   }
 
+  loadIcons(icons) {
+    for (let icon of Object.getOwnPropertyNames(icons || {})) {
+      let val = icons[icon];
+      if (!val) {
+        continue;
+      }
+      if (kIconsVarMap.has(icon)) {
+        // The icons in the manifest are not pre-resolved, and must be local.
+        let resolvedURL = this.baseURI.resolve(val);
+
+        let cssIcon = `url("${resolvedURL.replace(/"/g, '\\"')}")`;
+        let [varName, ...selectors] = kIconsVarMap.get(icon);
+        addToCSSVars.apply(null, [this.cssVars, cssIcon, varName].concat(selectors));
+        addToBrowserOverrides(this.browserStyleOverrides, resolvedURL, kBrowserOverrideIconsVarMap.get(icon));
+      }
+    }
+  }
+
   receiveMessage(message) {
     if (message.name != "Ext:Theme:RequestRender") {
       return;
     }
 
     if (this.ntp_video) {
       Services.mm.broadcastAsyncMessage("Ext:Theme:Render", {
         video: this.ntp_video,
       });
     }
   }
 
   render({asUpdate} = {asUpdate: false}) {
     let browserStyles = [`
-      @-moz-document url("about:home"),
-                     url("about:newtab"),
-                     url("chrome://browser/content/abouthome/aboutHome.xhtml"),
-                     url("chrome://browser/content/newtab/newTab.xhtml") {`];
+      @-moz-document url("about:home"),\n
+                     url("about:newtab"),\n
+                     url("chrome://browser/content/abouthome/aboutHome.xhtml"),\n
+                     url("chrome://browser/content/newtab/newTab.xhtml") {\n`];
     for (let selector of Object.getOwnPropertyNames(this.aboutHomeCSSVars)) {
       browserStyles.push(`
         ${selector} {
-          ${this.aboutHomeCSSVars[selector].join(" !important;")} !important;
+          ${this.aboutHomeCSSVars[selector].join(" !important;\n")} !important;
         }`);
     }
     if (this.ntp_video) {
       browserStyles.push(`
         body {
           background-size: 100% !important;
         }`);
     }
     // Close the '@-moz-document' block.
     browserStyles.push(`
       }`);
 
     for (let selector of Object.getOwnPropertyNames(this.cssVars)) {
       browserStyles.push(`
         ${selector} {
-          ${this.cssVars[selector].join(" !important;")} !important;
+          ${this.cssVars[selector].join(" !important;\n")} !important;
         }`);
     }
     for (let selector of Object.getOwnPropertyNames(this.browserStyleOverrides)) {
       let styles = this.browserStyleOverrides[selector];
       if (!styles.length) {
         continue;
       }
       browserStyles.push(`
--- a/browser/components/extensions/schemas/theme.json
+++ b/browser/components/extensions/schemas/theme.json
@@ -183,24 +183,24 @@
               },
               "toolbar_bottom_separator": {
                 "type": "array",
                 "items": {
                   "type": "number"
                 },
                 "optional": true
               },
-              "toolbar_button_stroke": {
+              "toolbar_stroke": {
                 "type": "array",
                 "items": {
                   "type": "number"
                 },
                 "optional": true
               },
-              "toolbar_button_stroke_inactive": {
+              "toolbar_stroke_inactive": {
                 "type": "array",
                 "items": {
                   "type": "number"
                 },
                 "optional": true
               },
               "toolbar_input_control": {
                 "type": "array",
@@ -231,21 +231,21 @@
                 "optional": true
               }
             }
           },
           "gradients": {
             "type": "object",
             "optional": true,
             "properties": {
-              "toolbar_button": {
+              "toolbar": {
                 "type": "string",
                 "optional": true
               },
-              "toolbar_button_pressed": {
+              "toolbar_pressed": {
                 "type": "string",
                 "optional": true
               }
             }
           },
           "properties": {
             "type": "object",
             "optional": true,
@@ -284,21 +284,21 @@
               "tab_curve_half_width": {
                 "type": "number",
                 "optional": true
               },
               "tab_curve_width": {
                 "type": "number",
                 "optional": true
               },
-              "toolbar_button_shadow": {
+              "toolbar_shadow": {
                 "type": "string",
                 "optional": true
               },
-              "toolbar_button_shadow_inactive": {
+              "toolbar_shadow_inactive": {
                 "type": "string",
                 "optional": true
               },
               "toolbar_navbar_highlight_overlap": {
                 "type": "number",
                 "optional": true
               },
               "toolbar_navbar_overlap": {
@@ -325,16 +325,146 @@
               "buttons": {
                 "type": "array",
                 "items": {
                   "type": "number"
                 },
                 "optional": true
               }
             }
+          },
+          "icons": {
+            "type": "object",
+            "optional": true,
+            "properties": {
+              "back": {
+                "type": "string",
+                "optional": true
+              },
+              "forward": {
+                "type": "string",
+                "optional": true
+              },
+              "reload": {
+                "type": "string",
+                "optional": true
+              },
+              "stop": {
+                "type": "string",
+                "optional": true
+              },
+              "bookmark_star": {
+                "type": "string",
+                "optional": true
+              },
+              "bookmark_menu": {
+                "type": "string",
+                "optional": true
+              },
+              "downloads": {
+                "type": "string",
+                "optional": true
+              },
+              "home": {
+                "type": "string",
+                "optional": true
+              },
+              "app_menu": {
+                "type": "string",
+                "optional": true
+              },
+              "cut": {
+                "type": "string",
+                "optional": true
+              },
+              "copy": {
+                "type": "string",
+                "optional": true
+              },
+              "paste": {
+                "type": "string",
+                "optional": true
+              },
+              "new_window": {
+                "type": "string",
+                "optional": true
+              },
+              "new_private_window": {
+                "type": "string",
+                "optional": true
+              },
+              "save_page": {
+                "type": "string",
+                "optional": true
+              },
+              "print": {
+                "type": "string",
+                "optional": true
+              },
+              "history": {
+                "type": "string",
+                "optional": true
+              },
+              "full_screen": {
+                "type": "string",
+                "optional": true
+              },
+              "find": {
+                "type": "string",
+                "optional": true
+              },
+              "options": {
+                "type": "string",
+                "optional": true
+              },
+              "addons": {
+                "type": "string",
+                "optional": true
+              },
+              "developer": {
+                "type": "string",
+                "optional": true
+              },
+              "synced_tabs": {
+                "type": "string",
+                "optional": true
+              },
+              "open_file": {
+                "type": "string",
+                "optional": true
+              },
+              "sidebars": {
+                "type": "string",
+                "optional": true
+              },
+              "share_page": {
+                "type": "string",
+                "optional": true
+              },
+              "subscribe": {
+                "type": "string",
+                "optional": true
+              },
+              "text_encoding": {
+                "type": "string",
+                "optional": true
+              },
+              "email_link": {
+                "type": "string",
+                "optional": true
+              },
+              "forget": {
+                "type": "string",
+                "optional": true
+              },
+              "pocket": {
+                "type": "string",
+                "optional": true
+              }
+            }
           }
         }
       },
       {
         "$extend": "WebExtensionManifest",
         "properties": {
           "theme": {
             "optional": true,
--- a/browser/components/extensions/test/browser/browser.ini
+++ b/browser/components/extensions/test/browser/browser.ini
@@ -93,16 +93,21 @@ tags = webextensions
 [browser_ext_tabs_update.js]
 [browser_ext_tabs_zoom.js]
 [browser_ext_tabs_update_url.js]
 [browser_ext_theme_abouthomebackground.js]
 [browser_ext_theme_chromeThemeSupport.js]
 [browser_ext_theme_devEdition.js]
 [browser_ext_theme_extreme.js]
 [browser_ext_theme_lwtsupport.js]
+[browser_ext_theme_icons.js]
+support-files =
+  burrito.svg
+  hamburger.svg
+  pile-of-poop.svg
 [browser_ext_topwindowid.js]
 [browser_ext_webNavigation_frameId0.js]
 [browser_ext_webNavigation_getFrames.js]
 [browser_ext_webNavigation_urlbar_transitions.js]
 [browser_ext_windows.js]
 [browser_ext_windows_allowScriptsToClose.js]
 [browser_ext_windows_create.js]
 tags = fullscreen
new file mode 100644
--- /dev/null
+++ b/browser/components/extensions/test/browser/browser_ext_theme_icons.js
@@ -0,0 +1,164 @@
+/* -*- Mode: indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set sts=2 sw=2 et tw=80: */
+"use strict";
+
+const kBurgerIcon = ["hamburger.svg", "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiPjxwYXRoIGQ9Im02MiA0NC41YzAgMTItMTAuOSAxNy41LTI5LjggMTcuNS0xOSAwLTI5LjgtNS41LTI5LjgtMTcuNSAwLTE3LjYgNTkuNi0xNy42IDU5LjYgMCIgZmlsbD0iI2U3YTc0ZiIvPjxwYXRoIGQ9Im02MS44IDM2LjJjMCAxMi0xMC44IDE3LjUtMjkuNyAxNy41LTE4LjggMC0yOS43LTUuNS0yOS43LTE3LjUuMS0xNy41IDU5LjQtMTcuNSA1OS40IDAiIGZpbGw9IiNiYTg0NDMiLz48cGF0aCBkPSJtMi40IDM2LjVjMC01IDUuOS0xMS45IDI5LjgtMTEuOXMyOS44IDcgMjkuOCAxMS45YzAgOS4xLTguNCAxNS43LTI5LjggMTUuNy0yMS40IDAtMjkuOC02LjYtMjkuOC0xNS43IiBmaWxsPSIjODI2MDQ2Ii8+PHBhdGggZD0iTTMsMzEuM2MwLTUsNS44LTExLjksMjkuMi0xMS45YzIzLjQsMCwyOS4yLDcsMjkuMiwxMS45YzAsOS4xLTguMiwxNS43LTI5LjIsMTUuN1MzLDQwLjQsMywzMS4zeiIgZmlsbD0iIzY4NDcyYyIvPjxwYXRoIGQ9Im0zLjIgMjQuOGMxLjQtMyA1LjEtMy4yIDE3LjEgMS45IDEyIDUuMSAxNC4zIDcuOCAxMi45IDEwLjktMi42IDUuNS05LjcgOS42LTIwLjUgNXMtMTIuMi0xMi4yLTkuNS0xNy44IiBmaWxsPSIjZWY0ZDNjIi8+PHBhdGggZD0ibTQuMiAyMS40YzEuNC0zIDUuMS0zLjIgMTcuMSAxLjkgMTIgNS4xIDE0LjMgNy44IDEyLjkgMTAuOS0yLjYgNS41LTkuNyA5LjYtMjAuNSA1LTEwLjgtNC42LTEyLjItMTIuMy05LjUtMTcuOCIgZmlsbD0iI2QzM2IyMyIvPjxwYXRoIGQ9Im0yOS4zIDM0LjVjLS44LTMuMiAyLTUuNSAxNC45LTguM3MxNi40LTIgMTcuMiAxLjNjMS41IDUuOS0xLjUgMTMuMi0xMy4xIDE1LjctMTEuNSAyLjUtMTcuNi0yLjgtMTktOC43IiBmaWxsPSIjZWY0ZDNjIi8+PHBhdGggZD0ibTI4IDMxLjNjLS44LTMuMiAyLTUuNSAxNC45LTguMyAxMi45LTIuOCAxNi40LTIgMTcuMiAxLjMgMS41IDUuOS0xLjUgMTMuMi0xMy4xIDE1LjctMTEuNSAyLjUtMTcuNS0yLjgtMTktOC43IiBmaWxsPSIjZDMzYjIzIi8+PHBhdGggZmlsbD0iI2ZmZTYyZSIgZD0ibTkuNyAzMC45bDIwIDE5LjIgMTkuNi0xOS4yeiIvPjxwYXRoIGQ9Im02MC43IDI1LjljMCAwIC45IDMuNCAwIDQuNC0uOC45LTMuMy0uMS00LjQuNy0xIC43LS43IDMuNC0xLjkgNC0xLjEuNi0zLjItMS4xLTQuNC0uNi0xLjEuNC0xLjUgMy4xLTIuNyAzLjUtMS4yLjMtMy0xLjctNC4yLTEuNS0xLjIuMi0yIDIuOC0zLjMgMy0xLjIuMi0yLjctMi4xLTQtMi0xLjIuMS0yLjQgMi41LTMuNyAyLjUtMS4zIDAtMi40LTIuNS0zLjctMi41LTEuMy0uMS0yLjcgMi4yLTQgMi0xLjMtLjItMi4xLTIuNy0zLjMtMy0xLjMtLjMtMyAxLjgtNC4yIDEuNS0xLjItLjQtMS42LTMtMi43LTMuNS0xLjItLjUtMy40IDEuMi00LjQuNi0xLjItLjYtLjktMy4zLTEuOS00LTEuMS0uOC0zLjYuMi00LjQtLjctLjktMSAwLTQuNCAwLTQuNGg1Ny4yIiBmaWxsPSIjOGNjNjNlIi8+PHBhdGggZD0iTTYyLDIzLjRjMCw2LjUtMTMuMyw5LjctMjkuOCw5LjdjLTE2LjUsMC0yOS44LTMuMi0yOS44LTkuN0MyLjQsMTEuNiwxNS43LDIsMzIuMiwyQzQ4LjcsMiw2MiwxMS42LDYyLDIzLjR6IiBmaWxsPSIjZTdhNzRmIi8+PGcgZmlsbD0iI2ZmYzE3YSI+PHBhdGggZD0ibTE2LjMgMTQuNGwtMS42IDEuNS0xLjUtMS41IDEuNS0xLjV6Ii8+PHBhdGggZD0ibTIzLjcgMTJsLTEuNSAxLjUtMS41LTEuNSAxLjUtMS41eiIvPjxwYXRoIGQ9Im0yOCAxOC44bC0xLjYgMS41LTEuNS0xLjUgMS41LTEuNXoiLz48cGF0aCBkPSJtMzMuMiAxMy40bC0xIDEtMS0xIDEtMXoiLz48cGF0aCBkPSJtNTEuOSAxNy4zbC0xIDEtMS0xIDEtMXoiLz48cGF0aCBkPSJtNTguMSAxOC4zbC0xIDEtMS0xIDEtMXoiLz48cGF0aCBkPSJtNDYuNCAxMWwtMSAxLTEtMSAxLTF6Ii8+PHBhdGggZD0ibTE1LjkgOS43bC0xIDEtMS0xIDEtMXoiLz48cGF0aCBkPSJtMTAuNSAxNC40bC0xIDEtMS0xIDEtMXoiLz48cGF0aCBkPSJtMTYuOCAyMS4xbC0xIDEtMS4xLTEgMS4xLTF6Ii8+PHBhdGggZD0ibTI4LjUgNS43bC0xIDEtMS4xLTEgMS4xLTF6Ii8+PHBhdGggZD0ibTM4IDQuN2wtMSAxLTEtMSAxLTF6Ii8+PHBhdGggZD0ibTIyLjIgNi43bC0xIDEtMS0xIDEtMXoiLz48cGF0aCBkPSJtNTAuOSA5LjFsLTEgMS0xLTEgMS0xeiIvPjxwYXRoIGQ9Im00MCAyMS43bC0xLjUgMS41LTEuNS0xLjUgMS41LTEuNXoiLz48cGF0aCBkPSJtMzcuNiAxNGwtMS41IDEuNS0xLjUtMS41IDEuNS0xLjV6Ii8+PHBhdGggZD0ibTQzLjIgOC4ybC0xLjUgMS41LTEuNS0xLjUgMS41LTEuNXoiLz48cGF0aCBkPSJtNDcuNiAxNC43bC0xLjUgMS41LTEuNi0xLjUgMS42LTEuNXoiLz48cGF0aCBkPSJtNTQgMTIuNWwtMS41IDEuNS0xLjYtMS41IDEuNi0xLjV6Ii8+PHBhdGggZD0ibTQ5LjEgMjEuM2wtMS41IDEuNS0xLjUtMS41IDEuNS0xLjV6Ii8+PHBhdGggZD0ibTEyLjUgMTguN2wtMS41IDEuNS0xLjUtMS41IDEuNS0xLjV6Ii8+PC9nPjwvc3ZnPg=="];
+const kBurritoIcon = ["burrito.svg", "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiPjxwYXRoIGQ9Im01OC4yIDQuMWMtMy44LTQtMjEuOC00LjktNDcuMSAyMC4yLTEwLjIgMTAuMS02LjMgMzIgMTAuMiAzNi4yIDE4LjIgNC42IDI0LjEtNSAyNy4zLTkuNCAxMC4xLTEzLjcgMTguNi00My41IDkuNi00NyIgZmlsbD0iI2ZkZGZiMyIvPjxwYXRoIGQ9Ik00NC44LDMwLjJDMzguNSwyMCwyOS43LDIwLDI0LjksMjAuM0MyLjMsMjEuNiwxLjQsNTUuNSwyMy4yLDU5LjRDNDcuNCw2My45LDUxLjEsNDAuNSw0NC44LDMwLjJ6IiBmaWxsPSIjODk2NjRjIi8+PGcgZmlsbD0iI2QzOTc2ZSI+PHBhdGggZD0ibTI1LjMgMjkuMmwtNiAyLTEuMyA3LjkgNyAuNHoiLz48cGF0aCBkPSJtMjYgNTAuN2wtMy4yLTYuOS03LjMtLjYuMiA5LjF6Ii8+PHBhdGggZD0ibTE5LjggNDcuNWMwIDAtNS43LjMtNi43IDIuNS0xIDIuMy0yLjUgNi4zLTEuNSA4IDEgMS43IDUuOSAyLjUgOC4yIDEgMi40LTEuNSAxLjgtMTEuNyAwLTExLjUiLz48L2c+PHBhdGggZD0ibTEzLjEgNTBjLTEgMi4zLTIuNSA2LjMtMS41IDgtLjktMy40IDQuNS0xLjggNi0yLjQgMS41LS42IDIuMi04LjEgMi4yLTguMXMtNS43LjItNi43IDIuNSIgb3BhY2l0eT0iLjUiIGZpbGw9IiM4OTY2NGMiLz48cGF0aCBkPSJtMTYuNyA0N2MwIDAtMi02LjMtNC40LTYuNy0yLjQtLjQtNi41LS45LTcuOC44LTEuMyAxLjctLjUgNy4zIDEuNiA5LjUgMi4xIDIuMiAxMS4zLTEuNiAxMC42LTMuNiIgZmlsbD0iI2QzOTc2ZSIvPjxwYXRoIGQ9Im0xMi4zIDQwLjRjLTIuNC0uNC02LjUtLjktNy44LjggMi44LTIgMy4xIDQuNCA0LjEgNS45IDEgMS41IDguMS0uMSA4LjEtLjFzLTItNi4yLTQuNC02LjYiIG9wYWNpdHk9Ii41IiBmaWxsPSIjODk2NjRjIi8+PHBhdGggZD0ibTE0LjMgMjkuOGMwIDAtNS0yLjQtNi44LTFzLTQuNSA0LjMtNC4zIDYuM2MuMiAyIDQuMSA0LjkgNi43IDQuNyAyLjctLjIgNi05LjQgNC40LTEwIiBmaWxsPSIjZDM5NzZlIi8+PHBhdGggZD0ibTcuNiAyOC44Yy0xLjcgMS41LTQuNiA0LjMtNC40IDYuMi41LTMuMyA0LjYuNSA2LjEuNyAxLjUuMiA1LTYgNS02cy01LTIuNC02LjctLjkiIG9wYWNpdHk9Ii41IiBmaWxsPSIjODk2NjRjIi8+PHBhdGggZD0ibTIzLjggMjNjMCAwLTQuOC0zLjktNi45LTIuNy0yLjEgMS4xLTUuOCAzLjMtNS45IDUuNS0uMiAyLjIgMy4zIDYuMiA2LjEgNi43IDIuNy40IDguMi04LjQgNi43LTkuNSIgZmlsbD0iI2QzOTc2ZSIvPjxwYXRoIGQ9Im0xNi45IDIwLjNjLTIuMSAxLjEtNS44IDMuMy01LjkgNS41IDEuMi0zLjQgNC43IDEuNyA2LjMgMi4zIDEuNi42IDYuNi01IDYuNi01cy00LjktNC03LTIuOCIgb3BhY2l0eT0iLjUiIGZpbGw9IiM4OTY2NGMiLz48ZyBmaWxsPSIjZmZjN2NlIj48cGF0aCBkPSJtMjYuMiA0Mi4zYy0zLjYgMi00LjQgMy0zLjkgNi4xLjUgMy4xIDMtLjggOC4yLTIuM3MyLjQtNy42LTQuMy0zLjgiLz48cGF0aCBkPSJtMjkuMiAzMS41Yy0yLjgtMy4yLTMuOS0zLjgtNi40LTIuNC0yLjUgMS40IDEuNiAzIDQuMyA3LjlzNy4yLjQgMi4xLTUuNSIvPjwvZz48ZyBmaWxsPSIjODNiZjRmIj48cGF0aCBkPSJtOS40IDQwLjRjLTUuMSAzLjQtOC43IDYuMy03IDcuNiAyLjIgMS42IDguOS00LjUgMTEuNS03LjcgMi43LTMuMiA2LTYuOC00LjUuMSIvPjxwYXRoIGQ9Im0xNCA0OS43Yy00LjkgMy41LTguMyA2LjUtNi42IDcuNyAyLjIgMS42IDguNy00LjggMTEuMS04IDIuNC0zLjIgNS42LTYuOS00LjUuMyIvPjxwYXRoIGQ9Im0yNy41IDUzLjdjLTUuNyAyLjItOS44IDQuMy04LjQgNiAxLjggMi4xIDkuNy0yLjYgMTIuOS01LjEgMy4zLTIuNiA3LjMtNS41LTQuNS0uOSIvPjxwYXRoIGQ9Im0yOC43IDM4LjRjLTYgMS4xLTEwLjUgMi40LTkuNCA0LjMgMS40IDIuNCAxMC0uNyAxMy43LTIuNiAzLjctMiA4LjItNC00LjMtMS43Ii8+PHBhdGggZD0ibTMyLjQgMjEuOGMtNS41LTEuNS05LjgtMi4yLTkuNi0uMi4yIDIuNiA4LjcgMy41IDEyLjYgMy40IDMuOC0uMiA4LjMtLjEtMy0zLjIiLz48L2c+PGcgZmlsbD0iI2ZmZmJlOSI+PHBhdGggZD0ibTMyIDYxLjhjLS44LjQtLjEuMiAwIDAiLz48cGF0aCBkPSJtNDQuMiAyOC4zbC0zLjUtMy4zLTIuNC0uMi0xLjMtMi41LTQuMS0uMi0uOCAzLjEtMy4yLS4xdjNsLTIuNCAxLjMgNC4xIDMuNi0uOCA0LjUgMi4xIDUuNi0zLjcgNCAuNiAxLjYgMS45LTEuMy0yLjYgNyAzLjEtMi42LTIuMyA2LjRoMmwtMiAzIDgtMiA1LjEtMy43IDQuMi01LjUtMS4zLTIuOCAyLjYtNCAuMi00LjQtMS4xLTQuNS0yLjctMy41eiIvPjwvZz48ZyBmaWxsPSIjZThlMWQ2Ij48cGF0aCBkPSJtNDIuNSA1MS4ybC0xLjIgNCAyLjYtMi44LjktMy44eiIvPjxwYXRoIGQ9Im00NSAzOC45bC41IDIuOCAyLTIuOS0uNy0yLjh6Ii8+PHBhdGggZD0ibTQyLjUgMzEuNmwuMSAzLjEgMi40IDEuOS4xLTMuMXoiLz48cGF0aCBkPSJtMzYuMyA0MS4xbC4xIDMuMSAyLjQgMS45LjEtM3oiLz48cGF0aCBkPSJtMzAuNCA0NWwuMSAzLjEgMi40IDEuOS4xLTMuMXoiLz48cGF0aCBkPSJtNDEuNyA1MS4ybC0zLjEgMi0xLjcgMyAzLTF6Ii8+PHBhdGggZD0ibTM1IDUzbC0zLjEgMi0xLjcgMyAzLTF6Ii8+PHBhdGggZD0ibTQxLjggMjguNGwtMS42LTIuOC0zLjctMS4xIDEuOCAyLjh6Ii8+PHBhdGggZD0ibTMzLjggMzQuNGwyLjMgMi4yIDMuNC0uMS0yLjMtMi4xeiIvPjxwYXRoIGQ9Im0zNC45IDQ4bDIuNCAyLjIgMy40LS4xLTIuMy0yLjF6Ii8+PHBhdGggZD0ibTM1LjkgMjUuOWwtMy42LS44LTIuOCAxLjQgMy41Ljl6Ii8+PHBhdGggZD0ibTMzLjQgMzEuOWwtMy42LS44LTIuOSAxLjUgMy42Ljh6Ii8+PHBhdGggZD0ibTQwLjIgNDBsMS44LTIuOC0uNy0yLjktMS43IDIuOXoiLz48cGF0aCBkPSJtMzQuNyAzOC43bC0xLjEtMi44LTEuMyAyLjkuOSAyLjd6Ii8+PHBhdGggZD0ibTQzLjkgNDMuM2wtMS0yLjgtMS4zIDIuOS44IDIuOHoiLz48cGF0aCBkPSJtMzguMyAzMC45bC0xLjEtMi44LTEuMyAyLjguOSAyLjh6Ii8+PC9nPjxwYXRoIGQ9Im0yMyA1MC40Yy0yLjQtMi45LTMuMy0zLjQtNS41LTIuMy0yLjIgMS4xIDEuMyAyLjYgMy41IDcgMi4zIDQuNCA2LjQuNiAyLTQuNyIgZmlsbD0iI2ZmYzdjZSIvPjxnIGZpbGw9IiNlODY2MmQiPjxwYXRoIGQ9Im0yNS41IDQ3LjhsLTMuNiA0LjQgMS43IDMuNiA1LjctLjIgMS41LTYuNi0yLjEtMi4zLTMuMiAxLjEiLz48cGF0aCBkPSJtMjguNyA0Ni43bC0zLjIgMS4xLTMuNiA0LjQgMS43IDMuNiA1LjctLjIgMS41LTYuNi0yLjEtMi4zIi8+PHBhdGggZD0ibTIzLjUgMjIuMmwtMy42IDUuOCAyLjYgMy45IDYuNy0xLjIuNy04LjEtMi43LTIuMy0zLjcgMS45Ii8+PHBhdGggZD0ibTI3LjIgMjAuM2wtMy43IDEuOS0zLjYgNS44IDIuNiAzLjkgNi43LTEuMi43LTguMS0yLjctMi4zIi8+PHBhdGggZD0ibTEwLjEgNDUuNGwtMS4yIDQuMyAyLjIgMS44IDMuOS0yLjEtLjktNS0yLjEtLjktMS45IDEuOSIvPjxwYXRoIGQ9Im0xMiA0My41bC0xLjkgMS45LTEuMiA0LjMgMi4yIDEuOCAzLjktMi4xLS45LTUtMi4xLS45Ii8+PHBhdGggZD0ibTE0IDM0Ljl2Ni40bDMuNyAxLjUgNC41LTQuNy0zLjItNi41LTMuMi0uMi0xLjggMy41Ii8+PHBhdGggZD0ibTE1LjggMzEuNGwtMS44IDMuNXY2LjRsMy43IDEuNSA0LjUtNC43LTMuMi02LjUtMy4yLS4yIi8+PC9nPjxnIGZpbGw9IiM4OTY2NGMiPjxwYXRoIG9wYWNpdHk9Ii41IiBkPSJtMzkuMyAxMmwtMSAxLTEtMSAxLTF6Ii8+PHBhdGggb3BhY2l0eT0iLjUiIGQ9Im01My45IDI1LjFsLTEgMS0xLTEgMS0xeiIvPjxwYXRoIG9wYWNpdHk9Ii41IiBkPSJtMzcuNSAxNS4zbC0xIDEtMS0xIDEtMXoiLz48cGF0aCBvcGFjaXR5PSIuNSIgZD0ibTQ4LjkgNy4zbC0xIDEtMS0xIDEtMXoiLz48cGF0aCB0cmFuc2Zvcm09Im1hdHJpeCguNzA1LS43MDkyLjcwOTIuNzA1IDcuNzQxOCAzOC4xNjI4KSIgb3BhY2l0eT0iLjUiIGQ9Im00OS40IDkuNGguN3YuN2gtLjd6Ii8+PHBhdGggdHJhbnNmb3JtPSJtYXRyaXgoLjcwNS0uNzA5Mi43MDkyLjcwNS0zLjkwMzQgNDMuODM3MykiIG9wYWNpdHk9Ii41IiBkPSJtNTAuNCAyNi4zaC43di43aC0uN3oiLz48cGF0aCB0cmFuc2Zvcm09Im1hdHJpeCguNzA2NC0uNzA3OC43MDc4LjcwNjQgMTAuNTIwMyAzNi45MDQzKSIgb3BhY2l0eT0iLjUiIGQ9Im00OS40IDUuNGguN3YuN2gtLjd6Ii8+PHBhdGggb3BhY2l0eT0iLjUiIGQ9Im01NS40IDI4LjFsLTEuNSAxLjUtMS41LTEuNSAxLjUtMS41eiIvPjxwYXRoIG9wYWNpdHk9Ii41IiBkPSJtMzUuNiAxMy44bC0yIDItMi0yIDItMnoiLz48cGF0aCBkPSJtMzIuNCAxNy41YzkuMSAyLjUgMjUuNSAyLjkgMjUuOC0xMy40IDAgMCAyLjEgMTYuNy0xNC40IDE2LjktMTIuOS4xLTE1LjctNC45LTI0LjktMy44LS4xIDAgNS4xLTIgMTMuNS4zIiBvcGFjaXR5PSIuMzMiLz48L2c+PC9zdmc+"];
+const kPoopIcon = ["pile-of-poop.svg", "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiPjxwYXRoIGQ9Im0zMi4yIDM2LjljLTE3LjEgMC0zMC4yLTcuMS0zMC4yIDguOCAwIDEyLjggMTYuOSAxNi4zIDI5LjggMTYuMyAxNSAwIDMwLjItMy41IDMwLjItMTYuMyAwLTE1LjktMTIuMi04LjgtMjkuOC04LjgiIGZpbGw9IiM4OTY2NGMiLz48cGF0aCBkPSJtMzEuNyAyMC45Yy05LjYgMC0yNC41IDEuMS0yNC41IDEyLjYgMCAxNi44IDQ5LjUgMTYuOCA0OS41IDAgLjEtMTEuNS0xNC44LTEyLjYtMjUtMTIuNiIgZmlsbD0iIzliNzg2MSIvPjxwYXRoIGQ9Im00OSAxNi43Yy00LjYtMTAuMy0yNi40LjMtMjIuNi0xMi4yLjYtMS45LjUtMi43LS45LTIuNC03LjggMS42LTEzLjUgOS42LTExLjUgMTYuMyA2LjQgMjEuNCA0MS4zIDEyLjMgMzUtMS43IiBmaWxsPSIjYTg4NjczIi8+PHBhdGggZD0ibTI4LjggMzQuM2MwIDQtMy4yIDcuMi03LjIgNy4yLTQgMC03LjItMy4yLTcuMi03LjIgMC00IDMuMi03LjIgNy4yLTcuMiA0IDAgNy4yIDMuMiA3LjIgNy4yIiBmaWxsPSIjZmZmIi8+PGNpcmNsZSBjeD0iMjMuNiIgY3k9IjM0LjMiIHI9IjMuNiIgZmlsbD0iIzIzMWYyMCIvPjxwYXRoIGQ9Im00OS42IDM0LjNjMCA0LTMuMiA3LjItNy4yIDcuMi00IDAtNy4yLTMuMi03LjItNy4yIDAtNCAzLjItNy4yIDcuMi03LjIgMy45IDAgNy4yIDMuMiA3LjIgNy4yIiBmaWxsPSIjZmZmIi8+PGcgZmlsbD0iIzIzMWYyMCI+PGNpcmNsZSBjeD0iNDAuNCIgY3k9IjM0LjMiIHI9IjMuNiIvPjxwYXRoIGQ9Im0zOCA1MC42YzAgMy4zLTIuNyA2LTYgNi0zLjMgMC02LTIuNy02LTYgMC0zLjMgMi43LTYgNi02IDMuMyAwIDYgMi43IDYgNiIvPjwvZz48L3N2Zz4="];
+const kPointLeft = ["point-left.svg", "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiPjxwYXRoIGQ9Im0yOC43IDEyLjZjLjQgNC40IDQgNS45IDUuNyA2LjRsLjguMmMwIDAgLjYuNSAxLjUgMS4xIDAgLjEgMCAuMSAwIC4yIDAgMC03LjguNS0xMC4zLjEtMi44LS40LTE1LjItLjQtMTguMy0uNS0zLjUgMC02LjEuNi02LjEgNC43IDAgNC4xIDMuMiA1LjMgNi4yIDUuMSA0LjItLjMgMTguMy0uNiAxOC4zLS42LTEuOC40LTMuNSAxLjItMy4yIDQuMi40IDMuNCAxLjcgNC4xIDMuOCA0LjItMi45IDEuNy0yLjcgNC0yLjMgNS40LjYgMi40IDQuOSAzLjEgNC45IDMuMS0zLjIuOS0yLjYgMi40LTIuMyA0LjUuMiAxLjMgMS41IDIuOCAzLjcgMy4zIDIuMi41IDMuOCAyLjIgMjEuMS0uMyA0LjUtLjYgNi43LTQuNiA3LjgtMTAuNS43LTQgMS44LTkuNSAyLjEtMTMuNiAwLS40IDAtLjcgMC0xLjEuMS0yLjMtLjgtNC41LTIuOC02bC0xMi4zLTljMCAwIDAgMCAwIDAtLjYtLjYtMS40LTEtMi40LTEuMi0zLjEtLjMtNi45LTEuMS0xMS40LTMuMS0xLjctLjctNC44LjQtNC41IDMuNCIgZmlsbD0iI2ZmZGQ2NyIvPjxnIGZpbGw9IiNlYmEzNTIiPjxwYXRoIGQ9Im0yNy4xIDQ5LjNjLS42LTMuOCA1LjMtMy41IDIuOC0yLjctMi41LjgtMi44IDIuNy0yLjggMi43Ii8+PHBhdGggZD0ibTI0LjYgNDJjLS41LTUuMiA1LjMtNC43IDIuOS0zLjctMi40IDEtMi45IDMuNy0yLjkgMy43Ii8+PHBhdGggZD0ibTIzLjMgMzMuNGMtLjUtNS4yIDUuNy00LjcgMy4zLTMuNy0yLjUgMS0zLjMgMy43LTMuMyAzLjciLz48cGF0aCBkPSJtMzYuOCAyMC43YzAgMC0xMi42LTEuNS0yOC42LS43LTIuNCAwLTYgLjEtNi4yIDQuMiAxLjUtNC43IDE3LjQtMi41IDM0LjgtMy41Ii8+PHBhdGggZD0ibTI5LjYgMTBjLjctLjIgMS41LS4xIDIgLjEgNC41IDIuMSA4LjMgMi44IDExLjQgMy4xIDEgLjEgMS44LjUgMi40IDEuMmwxMi4yIDguOWMxLjkgMS40IDIuOSAzLjcgMi44IDYgMCAuNCAwIC43IDAgMS4xLS4zIDQuMS0xLjQgOS42LTIuMSAxMy42LS43IDQuMi0yLjEgNy41LTQuNCA5LjIgMy40LTEuMyA1LjEtNSA2LTEwLjEuNy00IDEuOC05LjUgMi4xLTEzLjYgMC0uNCAwLS43IDAtMS4xLjEtMi4zLS44LTQuNS0yLjgtNmwtMTIuMi04LjljMCAwIDAgMCAwIDAtLjYtLjYtMS40LTEtMi40LTEuMi0zLjEtLjMtNi45LTEuMS0xMS40LTMuMS0xLS40LTIuNi0uMi0zLjYuOCIvPjxwYXRoIGQ9Im00MSAxOS41YzAgMC00LjMtMS4zLTYuMy0xLjgtMS43LS40LTQuOC0yLTYtNC42LjYgNC4yIDQgNS42IDUuNyA2LjFsLjguMmMwIDAgLjUuNyAxLjUgMS40LjEtLjEgMi0xLjUgNC4zLTEuMyIvPjxwYXRoIGQ9Im0yNy42IDI5LjhjLjYtLjIgMS4zLS4xIDEuOC4xLjYuMiAxLjEuNSAxLjYuNy41LjMgMSAuNSAxLjUuNi41LjEgMS4xLjIgMS43LjItLjYuNC0xLjIuNi0xLjkuNi0uNiAwLTEuMy0uMi0xLjgtLjUtLjUtLjMtMS0uNi0xLjUtLjktLjQtLjMtLjgtLjYtMS40LS44Ii8+PHBhdGggZD0ibTI5LjIgMzcuN2MuNi0uMiAxLjMtLjEgMS44LjEuNi4yIDEuMS41IDEuNi43LjUuMyAxIC41IDEuNS42LjUuMSAxLjEuMiAxLjcuMi0uNS40LTEuMS41LTEuOC41LS42IDAtMS4zLS4yLTEuOC0uNS0uNS0uMy0xLS42LTEuNS0uOS0uNS0uMi0uOS0uNS0xLjUtLjciLz48cGF0aCBkPSJtMzEuNiA0Ni4yYy42LS4yIDEuMy0uMSAxLjguMS42LjIgMS4xLjUgMS42LjcuNS4zIDEgLjUgMS41LjYuNS4xIDEuMS4yIDEuNy4yLS41LjQtMS4xLjUtMS44LjUtLjYgMC0xLjMtLjItMS44LS41LS41LS4zLTEtLjYtMS41LS45LS41LS4yLS45LS40LTEuNS0uNyIvPjwvZz48L3N2Zz4="];
+const kHouseWithGarden = ["house-with-garden.svg", "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiPjxwYXRoIGZpbGw9IiNjOTQ3NDciIGQ9Im0zOSAzOGwxNC44IDQuMWgtMTEuM2wtMTUuNS00LjF6Ii8+PHBhdGggZmlsbD0iI2Y5ZjNkOSIgZD0ibTUgMjJoMjJ2MzhoLTIyeiIvPjxwYXRoIGZpbGw9IiNkYmI0NzEiIGQ9Im0yNyAyMmgxMnYxNmgtMTJ6Ii8+PHBhdGggZmlsbD0iI2VkNGM1YyIgZD0iTTIxIDggMS4xIDIyIDI3IDIyeiIvPjxwYXRoIGZpbGw9IiNkMGQwZDAiIGQ9Im0yOSAxMGgzdjhoLTN6Ii8+PHBhdGggZmlsbD0iIzk0OTg5YiIgZD0ibTMyIDEwaDJ2OWgtMnoiLz48cGF0aCBmaWxsPSIjYzk0NzQ3IiBkPSJtMjEgOGwyMiAxNGgtMTZ6Ii8+PHBhdGggZmlsbD0iI2QwZDBkMCIgZD0ibTI4IDhoNXYyaC01eiIvPjxwYXRoIGZpbGw9IiM5NDk4OWIiIGQ9Im0zMyA4aDJ2MmgtMnoiLz48cGF0aCBmaWxsPSIjZDZlZWYwIiBkPSJtMTIuOCAyNy44aDYuNHY2LjRoLTYuNHoiLz48cGF0aCBkPSJtMTIgMjd2OGg4di04aC04bTcuMi44djIuOGgtMi44di0yLjhoMi44bS0zLjYgMHYyLjhoLTIuOHYtMi44aDIuOG0tMi44IDYuNHYtMi44aDIuOHYyLjhoLTIuOG0zLjYgMHYtMi44aDIuOHYyLjhoLTIuOCIgZmlsbD0iIzg5NjY0YyIvPjxwYXRoIGZpbGw9IiNkNmVlZjAiIGQ9Im0zMC42IDI3LjRoNC44djcuMmgtNC44eiIvPjxnIGZpbGw9IiM4OTY2NGMiPjxwYXRoIGQ9Im0zMC4yIDI3djhoNS42di04aC01LjZtLjguOGgxLjZ2Mi44aC0xLjZjMCAwIDAtMi44IDAtMi44bTAgNi40di0yLjhoMS42djIuOGgtMS42bTQgMGgtMS42di0yLjhoMS42djIuOG0wLTMuNmgtMS42di0yLjhoMS42djIuOCIvPjxwYXRoIGQ9Im0xMy43IDQ5LjFoNi4ydjEwLjloLTYuMnoiLz48cGF0aCBkPSJtMTkuMiA0Ny41aDEuNnYxLjZoLTEuNnoiLz48L2c+PHBhdGggZmlsbD0iIzU5NDY0MCIgZD0ibTEyLjEgNDkuMWgxLjZ2MTAuOWgtMS42eiIvPjxwYXRoIGZpbGw9IiNkYmI0NzEiIGQ9Im0xMS40IDQ3LjVoNy44djEuNmgtNy44eiIvPjxjaXJjbGUgY3g9IjE4LjYiIGN5PSI1My44IiByPSIuNiIgZmlsbD0iI2Y5ZjNkOSIvPjxwYXRoIGZpbGw9IiM4M2JmNGYiIGQ9Im0uMSA2MGg1MnY0aC01MnoiLz48cGF0aCBmaWxsPSIjZGJiNDcxIiBkPSJtMzkuOSA0Mi4xaDkuM3YxNy45aC05LjN6Ii8+PHBhdGggZmlsbD0iI2Y5ZjNkOSIgZD0ibTI3IDQyLjFoMTIuOXYxNy45aC0xMi45eiIvPjxwYXRoIGZpbGw9IiNlZDRjNWMiIGQ9Im0yNyAzOGgtMjJsLTUgNC4xaDQyLjV6Ii8+PHBhdGggZmlsbD0iI2Q2ZWVmMCIgZD0ibTI4LjMgNDcuOGg2LjR2Ni40aC02LjR6Ii8+PHBhdGggZD0ibTI3LjUgNDd2OGg4di04aC04bTcuMi44djIuOGgtMi44di0yLjhoMi44bS0zLjYgMHYyLjhoLTIuOHYtMi44aDIuOG0tMi44IDYuNHYtMi44aDIuOHYyLjhoLTIuOG0zLjYgMHYtMi44aDIuOHYyLjhoLTIuOCIgZmlsbD0iIzg5NjY0YyIvPjxwYXRoIGZpbGw9IiNkNmVlZjAiIGQ9Im00Mi4xIDQ3LjRoNC44djcuMmgtNC44eiIvPjxwYXRoIGQ9Im00MS43IDQ3djhoNS42di04aC01LjZtLjguOGgxLjZ2Mi44aC0xLjZ2LTIuOG0wIDYuNHYtMi44aDEuNnYyLjhoLTEuNm00IDBoLTEuNnYtMi44aDEuNnYyLjhtMC0zLjZoLTEuNnYtMi44aDEuNnYyLjgiIGZpbGw9IiM4OTY2NGMiLz48cGF0aCBmaWxsPSIjNjk5NjM1IiBkPSJtNTEuOSA2MGgxMnY0aC0xMnoiLz48cGF0aCBmaWxsPSIjZDM5NzZlIiBkPSJtNTIuMiAzNGg0djI2aC00eiIvPjxwYXRoIGQ9Im01Ni4yIDM0aC0xLjVjMCAuMiAwIC4zIDAgLjUgMCAyLjMtLjggMi4zLS44IDQuNiAwIDIuMy44IDIuMy44IDQuNSAwIDIuMy0uOCAyLjMtLjggNC42IDAgMi4zLjggMi4zLjggNC41IDAgMi4zLS44IDIuMy0uOCA0LjUgMCAxLjQuMiAyIC40IDIuN2gxLjhjLjEuMS4xLTI1LjkuMS0yNS45IiBmaWxsPSIjODk2NjRjIi8+PHBhdGggZD0ibTUzLjIgMi45Yy0xLjkgMi43LTQuMi0yLjItNy4yIDJzLTEuNCA3LjktLjUgMTAuNmMxLjggNS41LTEuOSA3LjIuNiAxMS44IDIuNCA0LjYtMS4xIDYuOCAzLjUgOS4zczIuMy0yLjkgNyAuM2M0LjcgMy4yIDUuMy0yLjIgNC44LTQuMi0xLTMuNyAxLjctNC42IDIuNS03LjcgMS4zLTUuNS0zLjEtOC41LTEuNy0xMy43IDEuMi01LjEtMy4zLTE2LjctOS04LjQiIGZpbGw9IiM4M2JmNGYiLz48cGF0aCBkPSJtNjIgMTEuNGMxLjEtMy45LTEuMi0xMS40LTQuOC0xMS40IDAgMCAyLjQgMy4yLTEgNy4yLTMuNCA0IDIuOSA2IDAgOS43LTIuOSAzLjcgMi43IDcuMy41IDEwLjItMi43IDMuNi03IDMuMS00LjUgMTAgMCAwIDAgLjEgMCAuMSAxLS42IDEuMS0yLjMgNC4yLS4yIDQuNyAzLjIgNS4zLTIuMiA0LjgtNC4yLTEtMy43IDEuNy00LjYgMi41LTcuNyAxLjQtNS41LTMtOC41LTEuNy0xMy43IiBmaWxsPSIjNjk5NjM1Ii8+PGcgZmlsbD0iIzgzYmY0ZiI+PHBhdGggZD0ibTU3LjggMTEuMmMtLjcgMCAuNC0uNi40LTEuNHMtMS4xLTEuNC0uNC0xLjRjLjcgMCAxLjQuNiAxLjQgMS40cy0uNiAxLjQtMS40IDEuNCIvPjxwYXRoIGQ9Im01OS42IDIzLjNjLTEuMSAwIC42LS45LjYtMnMtMS43LTItLjYtMmMxLjEgMCAyIC45IDIgMnMtLjkgMi0yIDIiLz48cGF0aCBkPSJtNTcuOCAzMy41Yy0uOCAwIDAtLjcgMC0xLjVzLS44LTEuNSAwLTEuNWMuOCAwIDEuNS43IDEuNSAxLjUgMCAuOC0uNyAxLjUtMS41IDEuNSIvPjxwYXRoIGQ9Im00OS4zIDEyLjFjLjggMC0uMi43LS4yIDEuNXMxLjEgMS41LjIgMS41LTEuNS0uNy0xLjUtMS41LjctMS41IDEuNS0xLjUiLz48cGF0aCBkPSJtNTIuNiA2LjRjMS4xIDAtLjUuOS0uNSAyczEuNyAyIC41IDJjLTEuMSAwLTItLjktMi0ycy44LTIgMi0yIi8+PC9nPjxnIGZpbGw9IiM2OTk2MzUiPjxwYXRoIGQ9Im01MS43IDIxLjZjMS43IDAtLjcgMS4zLS43IDNzMi4zIDMgLjcgM2MtMS43IDAtMy0xLjMtMy0zczEuMy0zIDMtMyIvPjxwYXRoIGQ9Im01Mi42IDE2LjFjLjggMCAwIC43IDAgMS41cy44IDEuNSAwIDEuNWMtLjggMC0xLjUtLjctMS41LTEuNXMuNy0xLjUgMS41LTEuNSIvPjwvZz48cGF0aCBmaWxsPSIjODNiZjRmIiBkPSJtNTguMSA1N2guNHYzaC0uNHoiLz48cGF0aCBkPSJtNTcuMiA1My45djIuM2MwIC40LjMuOC44LjhoLjh2LTEuNmMtLjEtMS4xLTEuNi0xLjUtMS42LTEuNSIgZmlsbD0iI2M5NDc0NyIvPjxwYXRoIGQ9Im01OS41IDUzLjl2Mi4zYzAgLjQtLjMuOC0uOC44aC0uOHYtMS42YzAtMS4xIDEuNi0xLjUgMS42LTEuNSIgZmlsbD0iI2VkNGM1YyIvPjxwYXRoIGZpbGw9IiM4M2JmNGYiIGQ9Im02Mi41IDU0LjdoLjR2NS4zaC0uNHoiLz48cGF0aCBkPSJtNjEuNiA1MS41djIuM2MwIC40LjMuOC44LjhoLjh2LTEuNmMtLjEtMS0xLjYtMS41LTEuNi0xLjUiIGZpbGw9IiNjOTQ3NDciLz48cGF0aCBkPSJtNjMuOSA1MS41djIuM2MwIC40LS4zLjgtLjguOGgtLjh2LTEuNmMwLTEgMS42LTEuNSAxLjYtMS41IiBmaWxsPSIjZWQ0YzVjIi8+PHBhdGggZD0ibTU4LjcgNTAuMnYyLjNjMCAuNC4zLjguOC44aC44di0xLjZjMC0xLTEuNi0xLjUtMS42LTEuNSIgZmlsbD0iI2YyYjIwMCIvPjxwYXRoIGQ9Im02MS4xIDUwLjJ2Mi4zYzAgLjQtLjMuOC0uOC44aC0uOHYtMS42YzAtMSAxLjYtMS41IDEuNi0xLjUiIGZpbGw9IiNmZmNlMzEiLz48cGF0aCBmaWxsPSIjODNiZjRmIiBkPSJtNTkuNyA1My40aC40djYuNmgtLjR6Ii8+PHBhdGggZD0ibTU1LjUgNTEuNHYyLjNjMCAuNC40LjguOC44aC43di0xLjVjMC0xLjItMS41LTEuNi0xLjUtMS42IiBmaWxsPSIjZjJiMjAwIi8+PHBhdGggZD0ibTU3LjggNTEuNHYyLjNjMCAuNC0uMy44LS44LjhoLS44di0xLjVjMC0xLjIgMS42LTEuNiAxLjYtMS42IiBmaWxsPSIjZmZjZTMxIi8+PGcgZmlsbD0iIzgzYmY0ZiI+PHBhdGggZD0ibTU2LjQgNTQuNWguNHY1LjVoLS40eiIvPjxwYXRoIGQ9Im00OSA1N2guNHYzaC0uNHoiLz48L2c+PHBhdGggZD0ibTQ4IDUzLjl2Mi4zYzAgLjQuMy44LjguOGguOHYtMS42YzAtMS4xLTEuNi0xLjUtMS42LTEuNSIgZmlsbD0iI2M5NDc0NyIvPjxwYXRoIGQ9Im01MC40IDUzLjl2Mi4zYzAgLjQtLjMuOC0uOC44aC0uOHYtMS42YzAtMS4xIDEuNi0xLjUgMS42LTEuNSIgZmlsbD0iI2VkNGM1YyIvPjxwYXRoIGZpbGw9IiM4M2JmNGYiIGQ9Im01My40IDU0LjdoLjR2NS4zaC0uNHoiLz48cGF0aCBkPSJtNTIuNCA1MS41djIuM2MwIC40LjMuOC44LjhoLjh2LTEuNmMwLTEtMS42LTEuNS0xLjYtMS41IiBmaWxsPSIjYzk0NzQ3Ii8+PHBhdGggZD0ibTU0LjggNTEuNXYyLjNjMCAuNC0uMy44LS44LjhoLS44di0xLjZjMC0xIDEuNi0xLjUgMS42LTEuNSIgZmlsbD0iI2VkNGM1YyIvPjxwYXRoIGQ9Im00OS42IDUwLjJ2Mi4zYzAgLjQuMy44LjguOGguOHYtMS42YzAtMS0xLjYtMS41LTEuNi0xLjUiIGZpbGw9IiNmMmIyMDAiLz48cGF0aCBkPSJtNTEuOSA1MC4ydjIuM2MwIC40LS4zLjgtLjguOGgtLjh2LTEuNmMuMS0xIDEuNi0xLjUgMS42LTEuNSIgZmlsbD0iI2ZmY2UzMSIvPjxwYXRoIGZpbGw9IiM4M2JmNGYiIGQ9Im01MC42IDUzLjRoLjR2Ni42aC0uNHoiLz48cGF0aCBkPSJtNDYuMyA1MS40djIuM2MwIC40LjMuOC44LjhoLjh2LTEuNWMwLTEuMi0xLjYtMS42LTEuNi0xLjYiIGZpbGw9IiNjOTQ3NDciLz48cGF0aCBkPSJtNDguNyA1MS40djIuM2MwIC40LS4zLjgtLjguOGgtLjh2LTEuNWMwLTEuMiAxLjYtMS42IDEuNi0xLjYiIGZpbGw9IiNlZDRjNWMiLz48cGF0aCBmaWxsPSIjODNiZjRmIiBkPSJtNDcuMyA1NC41aC40djUuNWgtLjR6Ii8+PC9zdmc+"];
+
+function imageBufferForIcon(encodedImageData) {
+  let decodedImageData = atob(encodedImageData);
+  return Uint8Array.from(decodedImageData, byte => byte.charCodeAt(0)).buffer;
+}
+
+function iconForButton(buttonName) {
+  if (buttonName == "app_menu") {
+    return kBurgerIcon[0];
+  }
+  if (buttonName == "back") {
+    return kPointLeft[0];
+  }
+  if (buttonName == "home") {
+    return kHouseWithGarden[0];
+  }
+  if (buttonName == "downloads") {
+    return kBurritoIcon[0];
+  }
+  return kPoopIcon[0];
+}
+
+function shouldButtonHaveCustomStyling(selector, verifyFn, icon, message) {
+  try {
+    let element;
+    if (selector == "#bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon") {
+      if (message.includes("panel")) {
+        // The dropmarker isn't shown in the menupanel.
+        return;
+      }
+      element = document.querySelector("#bookmarks-menu-button");
+      element = document.getAnonymousElementByAttribute(element, "class", "toolbarbutton-menubutton-dropmarker");
+      element = document.getAnonymousElementByAttribute(element, "class", "dropmarker-icon");
+    } else {
+      element = document.querySelector(selector);
+    }
+
+    let iconFileName = iconForButton(icon);
+    let listStyleImage = getComputedStyle(element).listStyleImage;
+    info(`listStyleImage for ${iconFileName} is ${listStyleImage}`);
+    verifyFn(listStyleImage.includes(iconFileName), message);
+  } catch (ex) {
+    ok(false, `Unable to verify ${selector}: ${ex}`);
+  }
+}
+
+function verifyButtonWithoutCustomStyling(selector, icon, message) {
+  shouldButtonHaveCustomStyling(selector, (result, message) => ok(!result, message), icon, message);
+}
+
+function verifyButtonWithCustomStyling(selector, icon, message) {
+  shouldButtonHaveCustomStyling(selector, ok, icon, message);
+}
+
+add_task(function* testCustomizedIcons() {
+  let buttons = [
+    ["back", "#back-button"],
+    ["forward", "#forward-button"],
+    ["reload", "#urlbar-reload-button"],
+    ["stop", "#urlbar-stop-button"],
+    ["bookmark_star", "#bookmarks-menu-button", "bookmarks-menu-button"],
+    ["bookmark_menu", "#bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon"],
+    ["downloads", "#downloads-button", "downloads-button"],
+    ["home", "#home-button", "home-button"],
+    ["app_menu", "#PanelUI-menu-button"],
+    ["cut", "#cut-button", "edit-controls"],
+    ["copy", "#copy-button"],
+    ["paste", "#paste-button"],
+    ["new_window", "#new-window-button", "new-window-button"],
+    ["new_private_window", "#privatebrowsing-button", "privatebrowsing-button"],
+    ["save_page", "#save-page-button", "save-page-button"],
+    ["print", "#print-button", "print-button"],
+    ["history", "#history-panelmenu", "history-panelmenu"],
+    ["full_screen", "#fullscreen-button", "fullscreen-button"],
+    ["find", "#find-button", "find-button"],
+    ["options", "#preferences-button", "preferences-button"],
+    ["addons", "#add-ons-button", "add-ons-button"],
+    ["developer", "#developer-button", "developer-button"],
+    ["synced_tabs", "#sync-button", "sync-button"],
+    ["open_file", "#open-file-button", "open-file-button"],
+    ["sidebars", "#sidebar-button", "sidebar-button"],
+    ["share_page", "#social-share-button", "social-share-button"],
+    ["subscribe", "#feed-button", "feed-button"],
+    ["text_encoding", "#characterencoding-button", "characterencoding-button"],
+    ["email_link", "#email-link-button", "email-link-button"],
+    ["forget", "#panic-button", "panic-button"],
+    ["pocket", "#pocket-button", "pocket-button"]
+  ];
+
+  window.maximize();
+
+  try {
+    for (let button of buttons) {
+      if (button[2]) {
+        CustomizableUI.addWidgetToArea(button[2], CustomizableUI.AREA_NAVBAR);
+      }
+
+      verifyButtonWithoutCustomStyling(button[1], button[0],
+        `The ${button[1]} should not have it's icon customized when the test starts`);
+    }
+
+    let manifest = {
+      theme: {
+        icons: {}
+      }
+    };
+
+    for (let button of buttons) {
+      manifest.theme.icons[button[0]] = iconForButton(button[0]);
+    }
+
+    let files = {
+      "burrito.svg": imageBufferForIcon(kBurritoIcon[1]),
+      "hamburger.svg": imageBufferForIcon(kBurgerIcon[1]),
+      "house-with-garden.svg": imageBufferForIcon(kHouseWithGarden[1]),
+      "pile-of-poop.svg": imageBufferForIcon(kPoopIcon[1]),
+      "point-left.svg": imageBufferForIcon(kPointLeft[1]),
+    };
+
+    let extension = ExtensionTestUtils.loadExtension({manifest, files});
+
+    yield extension.startup();
+
+    for (let button of buttons) {
+      verifyButtonWithCustomStyling(button[1], button[0],
+        `The ${button[1]} should have it's icon customized in the toolbar`);
+    }
+
+    for (let button of buttons) {
+      if (button[2]) {
+        CustomizableUI.addWidgetToArea(button[2], CustomizableUI.AREA_PANEL);
+      }
+    }
+
+    yield PanelUI.show();
+
+    for (let button of buttons) {
+      verifyButtonWithCustomStyling(button[1], button[0],
+        `The ${button[1]} should have it's icon customized in the panel`);
+    }
+
+    yield PanelUI.hide();
+
+    yield extension.unload();
+
+    for (let button of buttons) {
+      verifyButtonWithoutCustomStyling(button[1], button[0],
+        `The ${button[1]} should not have it's icon customized when the theme is unloaded`);
+    }
+  } finally {
+    CustomizableUI.reset();
+    window.restore();
+  }
+
+});
new file mode 100644
--- /dev/null
+++ b/browser/components/extensions/test/browser/burrito.svg
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" enable-background="new 0 0 64 64"><path d="m58.2 4.1c-3.8-4-21.8-4.9-47.1 20.2-10.2 10.1-6.3 32 10.2 36.2 18.2 4.6 24.1-5 27.3-9.4 10.1-13.7 18.6-43.5 9.6-47" fill="#fddfb3"/><path d="M44.8,30.2C38.5,20,29.7,20,24.9,20.3C2.3,21.6,1.4,55.5,23.2,59.4C47.4,63.9,51.1,40.5,44.8,30.2z" fill="#89664c"/><g fill="#d3976e"><path d="m25.3 29.2l-6 2-1.3 7.9 7 .4z"/><path d="m26 50.7l-3.2-6.9-7.3-.6.2 9.1z"/><path d="m19.8 47.5c0 0-5.7.3-6.7 2.5-1 2.3-2.5 6.3-1.5 8 1 1.7 5.9 2.5 8.2 1 2.4-1.5 1.8-11.7 0-11.5"/></g><path d="m13.1 50c-1 2.3-2.5 6.3-1.5 8-.9-3.4 4.5-1.8 6-2.4 1.5-.6 2.2-8.1 2.2-8.1s-5.7.2-6.7 2.5" opacity=".5" fill="#89664c"/><path d="m16.7 47c0 0-2-6.3-4.4-6.7-2.4-.4-6.5-.9-7.8.8-1.3 1.7-.5 7.3 1.6 9.5 2.1 2.2 11.3-1.6 10.6-3.6" fill="#d3976e"/><path d="m12.3 40.4c-2.4-.4-6.5-.9-7.8.8 2.8-2 3.1 4.4 4.1 5.9 1 1.5 8.1-.1 8.1-.1s-2-6.2-4.4-6.6" opacity=".5" fill="#89664c"/><path d="m14.3 29.8c0 0-5-2.4-6.8-1s-4.5 4.3-4.3 6.3c.2 2 4.1 4.9 6.7 4.7 2.7-.2 6-9.4 4.4-10" fill="#d3976e"/><path d="m7.6 28.8c-1.7 1.5-4.6 4.3-4.4 6.2.5-3.3 4.6.5 6.1.7 1.5.2 5-6 5-6s-5-2.4-6.7-.9" opacity=".5" fill="#89664c"/><path d="m23.8 23c0 0-4.8-3.9-6.9-2.7-2.1 1.1-5.8 3.3-5.9 5.5-.2 2.2 3.3 6.2 6.1 6.7 2.7.4 8.2-8.4 6.7-9.5" fill="#d3976e"/><path d="m16.9 20.3c-2.1 1.1-5.8 3.3-5.9 5.5 1.2-3.4 4.7 1.7 6.3 2.3 1.6.6 6.6-5 6.6-5s-4.9-4-7-2.8" opacity=".5" fill="#89664c"/><g fill="#ffc7ce"><path d="m26.2 42.3c-3.6 2-4.4 3-3.9 6.1.5 3.1 3-.8 8.2-2.3s2.4-7.6-4.3-3.8"/><path d="m29.2 31.5c-2.8-3.2-3.9-3.8-6.4-2.4-2.5 1.4 1.6 3 4.3 7.9s7.2.4 2.1-5.5"/></g><g fill="#83bf4f"><path d="m9.4 40.4c-5.1 3.4-8.7 6.3-7 7.6 2.2 1.6 8.9-4.5 11.5-7.7 2.7-3.2 6-6.8-4.5.1"/><path d="m14 49.7c-4.9 3.5-8.3 6.5-6.6 7.7 2.2 1.6 8.7-4.8 11.1-8 2.4-3.2 5.6-6.9-4.5.3"/><path d="m27.5 53.7c-5.7 2.2-9.8 4.3-8.4 6 1.8 2.1 9.7-2.6 12.9-5.1 3.3-2.6 7.3-5.5-4.5-.9"/><path d="m28.7 38.4c-6 1.1-10.5 2.4-9.4 4.3 1.4 2.4 10-.7 13.7-2.6 3.7-2 8.2-4-4.3-1.7"/><path d="m32.4 21.8c-5.5-1.5-9.8-2.2-9.6-.2.2 2.6 8.7 3.5 12.6 3.4 3.8-.2 8.3-.1-3-3.2"/></g><g fill="#fffbe9"><path d="m32 61.8c-.8.4-.1.2 0 0"/><path d="m44.2 28.3l-3.5-3.3-2.4-.2-1.3-2.5-4.1-.2-.8 3.1-3.2-.1v3l-2.4 1.3 4.1 3.6-.8 4.5 2.1 5.6-3.7 4 .6 1.6 1.9-1.3-2.6 7 3.1-2.6-2.3 6.4h2l-2 3 8-2 5.1-3.7 4.2-5.5-1.3-2.8 2.6-4 .2-4.4-1.1-4.5-2.7-3.5z"/></g><g fill="#e8e1d6"><path d="m42.5 51.2l-1.2 4 2.6-2.8.9-3.8z"/><path d="m45 38.9l.5 2.8 2-2.9-.7-2.8z"/><path d="m42.5 31.6l.1 3.1 2.4 1.9.1-3.1z"/><path d="m36.3 41.1l.1 3.1 2.4 1.9.1-3z"/><path d="m30.4 45l.1 3.1 2.4 1.9.1-3.1z"/><path d="m41.7 51.2l-3.1 2-1.7 3 3-1z"/><path d="m35 53l-3.1 2-1.7 3 3-1z"/><path d="m41.8 28.4l-1.6-2.8-3.7-1.1 1.8 2.8z"/><path d="m33.8 34.4l2.3 2.2 3.4-.1-2.3-2.1z"/><path d="m34.9 48l2.4 2.2 3.4-.1-2.3-2.1z"/><path d="m35.9 25.9l-3.6-.8-2.8 1.4 3.5.9z"/><path d="m33.4 31.9l-3.6-.8-2.9 1.5 3.6.8z"/><path d="m40.2 40l1.8-2.8-.7-2.9-1.7 2.9z"/><path d="m34.7 38.7l-1.1-2.8-1.3 2.9.9 2.7z"/><path d="m43.9 43.3l-1-2.8-1.3 2.9.8 2.8z"/><path d="m38.3 30.9l-1.1-2.8-1.3 2.8.9 2.8z"/></g><path d="m23 50.4c-2.4-2.9-3.3-3.4-5.5-2.3-2.2 1.1 1.3 2.6 3.5 7 2.3 4.4 6.4.6 2-4.7" fill="#ffc7ce"/><g fill="#e8662d"><path d="m25.5 47.8l-3.6 4.4 1.7 3.6 5.7-.2 1.5-6.6-2.1-2.3-3.2 1.1"/><path d="m28.7 46.7l-3.2 1.1-3.6 4.4 1.7 3.6 5.7-.2 1.5-6.6-2.1-2.3"/><path d="m23.5 22.2l-3.6 5.8 2.6 3.9 6.7-1.2.7-8.1-2.7-2.3-3.7 1.9"/><path d="m27.2 20.3l-3.7 1.9-3.6 5.8 2.6 3.9 6.7-1.2.7-8.1-2.7-2.3"/><path d="m10.1 45.4l-1.2 4.3 2.2 1.8 3.9-2.1-.9-5-2.1-.9-1.9 1.9"/><path d="m12 43.5l-1.9 1.9-1.2 4.3 2.2 1.8 3.9-2.1-.9-5-2.1-.9"/><path d="m14 34.9v6.4l3.7 1.5 4.5-4.7-3.2-6.5-3.2-.2-1.8 3.5"/><path d="m15.8 31.4l-1.8 3.5v6.4l3.7 1.5 4.5-4.7-3.2-6.5-3.2-.2"/></g><g fill="#89664c"><path opacity=".5" d="m39.3 12l-1 1-1-1 1-1z"/><path opacity=".5" d="m53.9 25.1l-1 1-1-1 1-1z"/><path opacity=".5" d="m37.5 15.3l-1 1-1-1 1-1z"/><path opacity=".5" d="m48.9 7.3l-1 1-1-1 1-1z"/><path transform="matrix(.705-.7092.7092.705 7.7418 38.1628)" opacity=".5" d="m49.4 9.4h.7v.7h-.7z"/><path transform="matrix(.705-.7092.7092.705-3.9034 43.8373)" opacity=".5" d="m50.4 26.3h.7v.7h-.7z"/><path transform="matrix(.7064-.7078.7078.7064 10.5203 36.9043)" opacity=".5" d="m49.4 5.4h.7v.7h-.7z"/><path opacity=".5" d="m55.4 28.1l-1.5 1.5-1.5-1.5 1.5-1.5z"/><path opacity=".5" d="m35.6 13.8l-2 2-2-2 2-2z"/><path d="m32.4 17.5c9.1 2.5 25.5 2.9 25.8-13.4 0 0 2.1 16.7-14.4 16.9-12.9.1-15.7-4.9-24.9-3.8-.1 0 5.1-2 13.5.3" opacity=".33"/></g></svg>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/browser/components/extensions/test/browser/hamburger.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" enable-background="new 0 0 64 64"><path d="m62 44.5c0 12-10.9 17.5-29.8 17.5-19 0-29.8-5.5-29.8-17.5 0-17.6 59.6-17.6 59.6 0" fill="#e7a74f"/><path d="m61.8 36.2c0 12-10.8 17.5-29.7 17.5-18.8 0-29.7-5.5-29.7-17.5.1-17.5 59.4-17.5 59.4 0" fill="#ba8443"/><path d="m2.4 36.5c0-5 5.9-11.9 29.8-11.9s29.8 7 29.8 11.9c0 9.1-8.4 15.7-29.8 15.7-21.4 0-29.8-6.6-29.8-15.7" fill="#826046"/><path d="M3,31.3c0-5,5.8-11.9,29.2-11.9c23.4,0,29.2,7,29.2,11.9c0,9.1-8.2,15.7-29.2,15.7S3,40.4,3,31.3z" fill="#68472c"/><path d="m3.2 24.8c1.4-3 5.1-3.2 17.1 1.9 12 5.1 14.3 7.8 12.9 10.9-2.6 5.5-9.7 9.6-20.5 5s-12.2-12.2-9.5-17.8" fill="#ef4d3c"/><path d="m4.2 21.4c1.4-3 5.1-3.2 17.1 1.9 12 5.1 14.3 7.8 12.9 10.9-2.6 5.5-9.7 9.6-20.5 5-10.8-4.6-12.2-12.3-9.5-17.8" fill="#d33b23"/><path d="m29.3 34.5c-.8-3.2 2-5.5 14.9-8.3s16.4-2 17.2 1.3c1.5 5.9-1.5 13.2-13.1 15.7-11.5 2.5-17.6-2.8-19-8.7" fill="#ef4d3c"/><path d="m28 31.3c-.8-3.2 2-5.5 14.9-8.3 12.9-2.8 16.4-2 17.2 1.3 1.5 5.9-1.5 13.2-13.1 15.7-11.5 2.5-17.5-2.8-19-8.7" fill="#d33b23"/><path fill="#ffe62e" d="m9.7 30.9l20 19.2 19.6-19.2z"/><path d="m60.7 25.9c0 0 .9 3.4 0 4.4-.8.9-3.3-.1-4.4.7-1 .7-.7 3.4-1.9 4-1.1.6-3.2-1.1-4.4-.6-1.1.4-1.5 3.1-2.7 3.5-1.2.3-3-1.7-4.2-1.5-1.2.2-2 2.8-3.3 3-1.2.2-2.7-2.1-4-2-1.2.1-2.4 2.5-3.7 2.5-1.3 0-2.4-2.5-3.7-2.5-1.3-.1-2.7 2.2-4 2-1.3-.2-2.1-2.7-3.3-3-1.3-.3-3 1.8-4.2 1.5-1.2-.4-1.6-3-2.7-3.5-1.2-.5-3.4 1.2-4.4.6-1.2-.6-.9-3.3-1.9-4-1.1-.8-3.6.2-4.4-.7-.9-1 0-4.4 0-4.4h57.2" fill="#8cc63e"/><path d="M62,23.4c0,6.5-13.3,9.7-29.8,9.7c-16.5,0-29.8-3.2-29.8-9.7C2.4,11.6,15.7,2,32.2,2C48.7,2,62,11.6,62,23.4z
+			" fill="#e7a74f"/><g fill="#ffc17a"><path d="m16.3 14.4l-1.6 1.5-1.5-1.5 1.5-1.5z"/><path d="m23.7 12l-1.5 1.5-1.5-1.5 1.5-1.5z"/><path d="m28 18.8l-1.6 1.5-1.5-1.5 1.5-1.5z"/><path d="m33.2 13.4l-1 1-1-1 1-1z"/><path d="m51.9 17.3l-1 1-1-1 1-1z"/><path d="m58.1 18.3l-1 1-1-1 1-1z"/><path d="m46.4 11l-1 1-1-1 1-1z"/><path d="m15.9 9.7l-1 1-1-1 1-1z"/><path d="m10.5 14.4l-1 1-1-1 1-1z"/><path d="m16.8 21.1l-1 1-1.1-1 1.1-1z"/><path d="m28.5 5.7l-1 1-1.1-1 1.1-1z"/><path d="m38 4.7l-1 1-1-1 1-1z"/><path d="m22.2 6.7l-1 1-1-1 1-1z"/><path d="m50.9 9.1l-1 1-1-1 1-1z"/><path d="m40 21.7l-1.5 1.5-1.5-1.5 1.5-1.5z"/><path d="m37.6 14l-1.5 1.5-1.5-1.5 1.5-1.5z"/><path d="m43.2 8.2l-1.5 1.5-1.5-1.5 1.5-1.5z"/><path d="m47.6 14.7l-1.5 1.5-1.6-1.5 1.6-1.5z"/><path d="m54 12.5l-1.5 1.5-1.6-1.5 1.6-1.5z"/><path d="m49.1 21.3l-1.5 1.5-1.5-1.5 1.5-1.5z"/><path d="m12.5 18.7l-1.5 1.5-1.5-1.5 1.5-1.5z"/></g></svg>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/browser/components/extensions/test/browser/house-with-garden.svg
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" enable-background="new 0 0 64 64"><path fill="#c94747" d="m39 38l14.8 4.1h-11.3l-15.5-4.1z"/><path fill="#f9f3d9" d="m5 22h22v38h-22z"/><path fill="#dbb471" d="m27 22h12v16h-12z"/><path fill="#ed4c5c" d="M21 8 1.1 22 27 22z"/><path fill="#d0d0d0" d="m29 10h3v8h-3z"/><path fill="#94989b" d="m32 10h2v9h-2z"/><path fill="#c94747" d="m21 8l22 14h-16z"/><path fill="#d0d0d0" d="m28 8h5v2h-5z"/><path fill="#94989b" d="m33 8h2v2h-2z"/><path fill="#d6eef0" d="m12.8 27.8h6.4v6.4h-6.4z"/><path d="m12 27v8h8v-8h-8m7.2.8v2.8h-2.8v-2.8h2.8m-3.6 0v2.8h-2.8v-2.8h2.8m-2.8 6.4v-2.8h2.8v2.8h-2.8m3.6 0v-2.8h2.8v2.8h-2.8" fill="#89664c"/><path fill="#d6eef0" d="m30.6 27.4h4.8v7.2h-4.8z"/><g fill="#89664c"><path d="m30.2 27v8h5.6v-8h-5.6m.8.8h1.6v2.8h-1.6c0 0 0-2.8 0-2.8m0 6.4v-2.8h1.6v2.8h-1.6m4 0h-1.6v-2.8h1.6v2.8m0-3.6h-1.6v-2.8h1.6v2.8"/><path d="m13.7 49.1h6.2v10.9h-6.2z"/><path d="m19.2 47.5h1.6v1.6h-1.6z"/></g><path fill="#594640" d="m12.1 49.1h1.6v10.9h-1.6z"/><path fill="#dbb471" d="m11.4 47.5h7.8v1.6h-7.8z"/><circle cx="18.6" cy="53.8" r=".6" fill="#f9f3d9"/><path fill="#83bf4f" d="m.1 60h52v4h-52z"/><path fill="#dbb471" d="m39.9 42.1h9.3v17.9h-9.3z"/><path fill="#f9f3d9" d="m27 42.1h12.9v17.9h-12.9z"/><path fill="#ed4c5c" d="m27 38h-22l-5 4.1h42.5z"/><path fill="#d6eef0" d="m28.3 47.8h6.4v6.4h-6.4z"/><path d="m27.5 47v8h8v-8h-8m7.2.8v2.8h-2.8v-2.8h2.8m-3.6 0v2.8h-2.8v-2.8h2.8m-2.8 6.4v-2.8h2.8v2.8h-2.8m3.6 0v-2.8h2.8v2.8h-2.8" fill="#89664c"/><path fill="#d6eef0" d="m42.1 47.4h4.8v7.2h-4.8z"/><path d="m41.7 47v8h5.6v-8h-5.6m.8.8h1.6v2.8h-1.6v-2.8m0 6.4v-2.8h1.6v2.8h-1.6m4 0h-1.6v-2.8h1.6v2.8m0-3.6h-1.6v-2.8h1.6v2.8" fill="#89664c"/><path fill="#699635" d="m51.9 60h12v4h-12z"/><path fill="#d3976e" d="m52.2 34h4v26h-4z"/><path d="m56.2 34h-1.5c0 .2 0 .3 0 .5 0 2.3-.8 2.3-.8 4.6 0 2.3.8 2.3.8 4.5 0 2.3-.8 2.3-.8 4.6 0 2.3.8 2.3.8 4.5 0 2.3-.8 2.3-.8 4.5 0 1.4.2 2 .4 2.7h1.8c.1.1.1-25.9.1-25.9" fill="#89664c"/><path d="m53.2 2.9c-1.9 2.7-4.2-2.2-7.2 2s-1.4 7.9-.5 10.6c1.8 5.5-1.9 7.2.6 11.8 2.4 4.6-1.1 6.8 3.5 9.3s2.3-2.9 7 .3c4.7 3.2 5.3-2.2 4.8-4.2-1-3.7 1.7-4.6 2.5-7.7 1.3-5.5-3.1-8.5-1.7-13.7 1.2-5.1-3.3-16.7-9-8.4" fill="#83bf4f"/><path d="m62 11.4c1.1-3.9-1.2-11.4-4.8-11.4 0 0 2.4 3.2-1 7.2-3.4 4 2.9 6 0 9.7-2.9 3.7 2.7 7.3.5 10.2-2.7 3.6-7 3.1-4.5 10 0 0 0 .1 0 .1 1-.6 1.1-2.3 4.2-.2 4.7 3.2 5.3-2.2 4.8-4.2-1-3.7 1.7-4.6 2.5-7.7 1.4-5.5-3-8.5-1.7-13.7" fill="#699635"/><g fill="#83bf4f"><path d="m57.8 11.2c-.7 0 .4-.6.4-1.4s-1.1-1.4-.4-1.4c.7 0 1.4.6 1.4 1.4s-.6 1.4-1.4 1.4"/><path d="m59.6 23.3c-1.1 0 .6-.9.6-2s-1.7-2-.6-2c1.1 0 2 .9 2 2s-.9 2-2 2"/><path d="m57.8 33.5c-.8 0 0-.7 0-1.5s-.8-1.5 0-1.5c.8 0 1.5.7 1.5 1.5 0 .8-.7 1.5-1.5 1.5"/><path d="m49.3 12.1c.8 0-.2.7-.2 1.5s1.1 1.5.2 1.5-1.5-.7-1.5-1.5.7-1.5 1.5-1.5"/><path d="m52.6 6.4c1.1 0-.5.9-.5 2s1.7 2 .5 2c-1.1 0-2-.9-2-2s.8-2 2-2"/></g><g fill="#699635"><path d="m51.7 21.6c1.7 0-.7 1.3-.7 3s2.3 3 .7 3c-1.7 0-3-1.3-3-3s1.3-3 3-3"/><path d="m52.6 16.1c.8 0 0 .7 0 1.5s.8 1.5 0 1.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5"/></g><path fill="#83bf4f" d="m58.1 57h.4v3h-.4z"/><path d="m57.2 53.9v2.3c0 .4.3.8.8.8h.8v-1.6c-.1-1.1-1.6-1.5-1.6-1.5" fill="#c94747"/><path d="m59.5 53.9v2.3c0 .4-.3.8-.8.8h-.8v-1.6c0-1.1 1.6-1.5 1.6-1.5" fill="#ed4c5c"/><path fill="#83bf4f" d="m62.5 54.7h.4v5.3h-.4z"/><path d="m61.6 51.5v2.3c0 .4.3.8.8.8h.8v-1.6c-.1-1-1.6-1.5-1.6-1.5" fill="#c94747"/><path d="m63.9 51.5v2.3c0 .4-.3.8-.8.8h-.8v-1.6c0-1 1.6-1.5 1.6-1.5" fill="#ed4c5c"/><path d="m58.7 50.2v2.3c0 .4.3.8.8.8h.8v-1.6c0-1-1.6-1.5-1.6-1.5" fill="#f2b200"/><path d="m61.1 50.2v2.3c0 .4-.3.8-.8.8h-.8v-1.6c0-1 1.6-1.5 1.6-1.5" fill="#ffce31"/><path fill="#83bf4f" d="m59.7 53.4h.4v6.6h-.4z"/><path d="m55.5 51.4v2.3c0 .4.4.8.8.8h.7v-1.5c0-1.2-1.5-1.6-1.5-1.6" fill="#f2b200"/><path d="m57.8 51.4v2.3c0 .4-.3.8-.8.8h-.8v-1.5c0-1.2 1.6-1.6 1.6-1.6" fill="#ffce31"/><g fill="#83bf4f"><path d="m56.4 54.5h.4v5.5h-.4z"/><path d="m49 57h.4v3h-.4z"/></g><path d="m48 53.9v2.3c0 .4.3.8.8.8h.8v-1.6c0-1.1-1.6-1.5-1.6-1.5" fill="#c94747"/><path d="m50.4 53.9v2.3c0 .4-.3.8-.8.8h-.8v-1.6c0-1.1 1.6-1.5 1.6-1.5" fill="#ed4c5c"/><path fill="#83bf4f" d="m53.4 54.7h.4v5.3h-.4z"/><path d="m52.4 51.5v2.3c0 .4.3.8.8.8h.8v-1.6c0-1-1.6-1.5-1.6-1.5" fill="#c94747"/><path d="m54.8 51.5v2.3c0 .4-.3.8-.8.8h-.8v-1.6c0-1 1.6-1.5 1.6-1.5" fill="#ed4c5c"/><path d="m49.6 50.2v2.3c0 .4.3.8.8.8h.8v-1.6c0-1-1.6-1.5-1.6-1.5" fill="#f2b200"/><path d="m51.9 50.2v2.3c0 .4-.3.8-.8.8h-.8v-1.6c.1-1 1.6-1.5 1.6-1.5" fill="#ffce31"/><path fill="#83bf4f" d="m50.6 53.4h.4v6.6h-.4z"/><path d="m46.3 51.4v2.3c0 .4.3.8.8.8h.8v-1.5c0-1.2-1.6-1.6-1.6-1.6" fill="#c94747"/><path d="m48.7 51.4v2.3c0 .4-.3.8-.8.8h-.8v-1.5c0-1.2 1.6-1.6 1.6-1.6" fill="#ed4c5c"/><path fill="#83bf4f" d="m47.3 54.5h.4v5.5h-.4z"/></svg>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/browser/components/extensions/test/browser/pile-of-poop.svg
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" enable-background="new 0 0 64 64"><path d="m32.2 36.9c-17.1 0-30.2-7.1-30.2 8.8 0 12.8 16.9 16.3 29.8 16.3 15 0 30.2-3.5 30.2-16.3 0-15.9-12.2-8.8-29.8-8.8" fill="#89664c"/><path d="m31.7 20.9c-9.6 0-24.5 1.1-24.5 12.6 0 16.8 49.5 16.8 49.5 0 .1-11.5-14.8-12.6-25-12.6" fill="#9b7861"/><path d="m49 16.7c-4.6-10.3-26.4.3-22.6-12.2.6-1.9.5-2.7-.9-2.4-7.8 1.6-13.5 9.6-11.5 16.3 6.4 21.4 41.3 12.3 35-1.7" fill="#a88673"/><path d="m28.8 34.3c0 4-3.2 7.2-7.2 7.2-4 0-7.2-3.2-7.2-7.2 0-4 3.2-7.2 7.2-7.2 4 0 7.2 3.2 7.2 7.2" fill="#fff"/><circle cx="23.6" cy="34.3" r="3.6" fill="#231f20"/><path d="m49.6 34.3c0 4-3.2 7.2-7.2 7.2-4 0-7.2-3.2-7.2-7.2 0-4 3.2-7.2 7.2-7.2 3.9 0 7.2 3.2 7.2 7.2" fill="#fff"/><g fill="#231f20"><circle cx="40.4" cy="34.3" r="3.6"/><path d="m38 50.6c0 3.3-2.7 6-6 6-3.3 0-6-2.7-6-6 0-3.3 2.7-6 6-6 3.3 0 6 2.7 6 6"/></g></svg>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/browser/components/extensions/test/browser/point-left.svg
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" enable-background="new 0 0 64 64"><path d="m28.7 12.6c.4 4.4 4 5.9 5.7 6.4l.8.2c0 0 .6.5 1.5 1.1 0 .1 0 .1 0 .2 0 0-7.8.5-10.3.1-2.8-.4-15.2-.4-18.3-.5-3.5 0-6.1.6-6.1 4.7 0 4.1 3.2 5.3 6.2 5.1 4.2-.3 18.3-.6 18.3-.6-1.8.4-3.5 1.2-3.2 4.2.4 3.4 1.7 4.1 3.8 4.2-2.9 1.7-2.7 4-2.3 5.4.6 2.4 4.9 3.1 4.9 3.1-3.2.9-2.6 2.4-2.3 4.5.2 1.3 1.5 2.8 3.7 3.3 2.2.5 3.8 2.2 21.1-.3 4.5-.6 6.7-4.6 7.8-10.5.7-4 1.8-9.5 2.1-13.6 0-.4 0-.7 0-1.1.1-2.3-.8-4.5-2.8-6l-12.3-9c0 0 0 0 0 0-.6-.6-1.4-1-2.4-1.2-3.1-.3-6.9-1.1-11.4-3.1-1.7-.7-4.8.4-4.5 3.4" fill="#ffdd67"/><g fill="#eba352"><path d="m27.1 49.3c-.6-3.8 5.3-3.5 2.8-2.7-2.5.8-2.8 2.7-2.8 2.7"/><path d="m24.6 42c-.5-5.2 5.3-4.7 2.9-3.7-2.4 1-2.9 3.7-2.9 3.7"/><path d="m23.3 33.4c-.5-5.2 5.7-4.7 3.3-3.7-2.5 1-3.3 3.7-3.3 3.7"/><path d="m36.8 20.7c0 0-12.6-1.5-28.6-.7-2.4 0-6 .1-6.2 4.2 1.5-4.7 17.4-2.5 34.8-3.5"/><path d="m29.6 10c.7-.2 1.5-.1 2 .1 4.5 2.1 8.3 2.8 11.4 3.1 1 .1 1.8.5 2.4 1.2l12.2 8.9c1.9 1.4 2.9 3.7 2.8 6 0 .4 0 .7 0 1.1-.3 4.1-1.4 9.6-2.1 13.6-.7 4.2-2.1 7.5-4.4 9.2 3.4-1.3 5.1-5 6-10.1.7-4 1.8-9.5 2.1-13.6 0-.4 0-.7 0-1.1.1-2.3-.8-4.5-2.8-6l-12.2-8.9c0 0 0 0 0 0-.6-.6-1.4-1-2.4-1.2-3.1-.3-6.9-1.1-11.4-3.1-1-.4-2.6-.2-3.6.8"/><path d="m41 19.5c0 0-4.3-1.3-6.3-1.8-1.7-.4-4.8-2-6-4.6.6 4.2 4 5.6 5.7 6.1l.8.2c0 0 .5.7 1.5 1.4.1-.1 2-1.5 4.3-1.3"/><path d="m27.6 29.8c.6-.2 1.3-.1 1.8.1.6.2 1.1.5 1.6.7.5.3 1 .5 1.5.6.5.1 1.1.2 1.7.2-.6.4-1.2.6-1.9.6-.6 0-1.3-.2-1.8-.5-.5-.3-1-.6-1.5-.9-.4-.3-.8-.6-1.4-.8"/><path d="m29.2 37.7c.6-.2 1.3-.1 1.8.1.6.2 1.1.5 1.6.7.5.3 1 .5 1.5.6.5.1 1.1.2 1.7.2-.5.4-1.1.5-1.8.5-.6 0-1.3-.2-1.8-.5-.5-.3-1-.6-1.5-.9-.5-.2-.9-.5-1.5-.7"/><path d="m31.6 46.2c.6-.2 1.3-.1 1.8.1.6.2 1.1.5 1.6.7.5.3 1 .5 1.5.6.5.1 1.1.2 1.7.2-.5.4-1.1.5-1.8.5-.6 0-1.3-.2-1.8-.5-.5-.3-1-.6-1.5-.9-.5-.2-.9-.4-1.5-.7"/></g></svg>
\ No newline at end of file