Bug 1223573 - Part 2. Move prefs and css into the new Loop system add-on. r=mikedeboer
authorMark Banner <standard8@mozilla.com>
Sun, 29 Nov 2015 17:08:34 +0000
changeset 274486 ea7d46e2b42d7768693db0e0c6f8f47e40aefbff
parent 274485 a0de6bc9779f6cf17a7449f4f91cdc099cee3e75
child 274487 60489607e7d3c99829b5e3376c801fdfd4d09a4b
push id16444
push usermbanner@mozilla.com
push dateSun, 29 Nov 2015 17:10:04 +0000
treeherderfx-team@29ce9059dc2c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmikedeboer
bugs1223573
milestone45.0a1
Bug 1223573 - Part 2. Move prefs and css into the new Loop system add-on. r=mikedeboer
browser/app/profile/firefox.js
browser/base/content/browser.css
browser/extensions/loop/content/preferences/prefs.js
browser/extensions/loop/skin/linux/menuPanel.png
browser/extensions/loop/skin/linux/menuPanel@2x.png
browser/extensions/loop/skin/linux/toolbar-inverted.png
browser/extensions/loop/skin/linux/toolbar-inverted@2x.png
browser/extensions/loop/skin/linux/toolbar.png
browser/extensions/loop/skin/linux/toolbar@2x.png
browser/extensions/loop/skin/osx/menuPanel-yosemite.png
browser/extensions/loop/skin/osx/menuPanel-yosemite@2x.png
browser/extensions/loop/skin/osx/menuPanel.png
browser/extensions/loop/skin/osx/menuPanel@2x.png
browser/extensions/loop/skin/osx/platform.css
browser/extensions/loop/skin/osx/toolbar-inverted.png
browser/extensions/loop/skin/osx/toolbar-inverted@2x.png
browser/extensions/loop/skin/osx/toolbar-yosemite.png
browser/extensions/loop/skin/osx/toolbar-yosemite@2x.png
browser/extensions/loop/skin/osx/toolbar.png
browser/extensions/loop/skin/osx/toolbar@2x.png
browser/extensions/loop/skin/shared/loop.css
browser/extensions/loop/skin/windows/menuPanel-aero.png
browser/extensions/loop/skin/windows/menuPanel-aero@2x.png
browser/extensions/loop/skin/windows/menuPanel.png
browser/extensions/loop/skin/windows/menuPanel@2x.png
browser/extensions/loop/skin/windows/platform.css
browser/extensions/loop/skin/windows/toolbar-XP.png
browser/extensions/loop/skin/windows/toolbar-XP@2x.png
browser/extensions/loop/skin/windows/toolbar-aero.png
browser/extensions/loop/skin/windows/toolbar-aero@2x.png
browser/extensions/loop/skin/windows/toolbar-inverted.png
browser/extensions/loop/skin/windows/toolbar-inverted@2x.png
browser/extensions/loop/skin/windows/toolbar-lunaSilver.png
browser/extensions/loop/skin/windows/toolbar-lunaSilver@2x.png
browser/extensions/loop/skin/windows/toolbar-win8.png
browser/extensions/loop/skin/windows/toolbar-win8@2x.png
browser/extensions/loop/skin/windows/toolbar.png
browser/extensions/loop/skin/windows/toolbar@2x.png
browser/themes/linux/loop/menuPanel.png
browser/themes/linux/loop/menuPanel@2x.png
browser/themes/linux/loop/toolbar-inverted.png
browser/themes/linux/loop/toolbar-inverted@2x.png
browser/themes/linux/loop/toolbar.png
browser/themes/linux/loop/toolbar@2x.png
browser/themes/osx/browser.css
browser/themes/osx/loop/menuPanel-yosemite.png
browser/themes/osx/loop/menuPanel-yosemite@2x.png
browser/themes/osx/loop/menuPanel.png
browser/themes/osx/loop/menuPanel@2x.png
browser/themes/osx/loop/toolbar-inverted.png
browser/themes/osx/loop/toolbar-inverted@2x.png
browser/themes/osx/loop/toolbar-yosemite.png
browser/themes/osx/loop/toolbar-yosemite@2x.png
browser/themes/osx/loop/toolbar.png
browser/themes/osx/loop/toolbar@2x.png
browser/themes/shared/browser.inc
browser/themes/shared/menupanel.inc.css
browser/themes/shared/notification-icons.inc.css
browser/themes/shared/social/chat.inc.css
browser/themes/shared/toolbarbuttons.inc.css
browser/themes/windows/browser.css
browser/themes/windows/loop/menuPanel-aero.png
browser/themes/windows/loop/menuPanel-aero@2x.png
browser/themes/windows/loop/menuPanel.png
browser/themes/windows/loop/menuPanel@2x.png
browser/themes/windows/loop/toolbar-XP.png
browser/themes/windows/loop/toolbar-XP@2x.png
browser/themes/windows/loop/toolbar-aero.png
browser/themes/windows/loop/toolbar-aero@2x.png
browser/themes/windows/loop/toolbar-inverted.png
browser/themes/windows/loop/toolbar-inverted@2x.png
browser/themes/windows/loop/toolbar-lunaSilver.png
browser/themes/windows/loop/toolbar-lunaSilver@2x.png
browser/themes/windows/loop/toolbar-win8.png
browser/themes/windows/loop/toolbar-win8@2x.png
browser/themes/windows/loop/toolbar.png
browser/themes/windows/loop/toolbar@2x.png
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1371,52 +1371,16 @@ pref("pdfjs.previousHandler.alwaysAskBef
 pref("shumway.disabled", true);
 #endif
 
 // The maximum amount of decoded image data we'll willingly keep around (we
 // might keep around more than this, but we'll try to get down to this value).
 // (This is intentionally on the high side; see bug 746055.)
 pref("image.mem.max_decoded_image_kb", 256000);
 
-pref("loop.enabled", true);
-pref("loop.textChat.enabled", true);
-pref("loop.server", "https://loop.services.mozilla.com/v0");
-pref("loop.linkClicker.url", "https://hello.firefox.com/");
-pref("loop.gettingStarted.seen", false);
-pref("loop.gettingStarted.url", "https://www.mozilla.org/%LOCALE%/firefox/%VERSION%/hello/start/");
-pref("loop.gettingStarted.resumeOnFirstJoin", false);
-pref("loop.learnMoreUrl", "https://www.firefox.com/hello/");
-pref("loop.legal.ToS_url", "https://www.mozilla.org/about/legal/terms/firefox-hello/");
-pref("loop.legal.privacy_url", "https://www.mozilla.org/privacy/firefox-hello/");
-pref("loop.do_not_disturb", false);
-pref("loop.ringtone", "chrome://browser/content/loop/shared/sounds/ringtone.ogg");
-pref("loop.retry_delay.start", 60000);
-pref("loop.retry_delay.limit", 300000);
-pref("loop.ping.interval", 1800000);
-pref("loop.ping.timeout", 10000);
-pref("loop.feedback.baseUrl", "https://input.mozilla.org/api/v1/feedback");
-pref("loop.feedback.product", "Loop");
-pref("loop.debug.loglevel", "Error");
-pref("loop.debug.dispatcher", false);
-pref("loop.debug.sdk", false);
-pref("loop.debug.twoWayMediaTelemetry", false);
-pref("loop.feedback.dateLastSeenSec", 0);
-pref("loop.feedback.periodSec", 15770000); // 6 months.
-pref("loop.feedback.formURL", "https://www.mozilla.org/firefox/hello/npssurvey/");
-pref("loop.feedback.manualFormURL", "https://www.mozilla.org/firefox/hello/feedbacksurvey/");
-#ifdef DEBUG
-pref("loop.CSP", "default-src 'self' about: file: chrome: http://localhost:*; img-src * data:; font-src 'none'; connect-src wss://*.tokbox.com https://*.opentok.com https://*.tokbox.com wss://*.mozilla.com https://*.mozilla.org wss://*.mozaws.net http://localhost:* ws://localhost:*; media-src blob:");
-#else
-pref("loop.CSP", "default-src 'self' about: file: chrome:; img-src * data:; font-src 'none'; connect-src wss://*.tokbox.com https://*.opentok.com https://*.tokbox.com wss://*.mozilla.com https://*.mozilla.org wss://*.mozaws.net; media-src blob:");
-#endif
-pref("loop.fxa_oauth.tokendata", "");
-pref("loop.fxa_oauth.profile", "");
-pref("loop.support_url", "https://support.mozilla.org/kb/group-conversations-firefox-hello-webrtc");
-pref("loop.browserSharing.showInfoBar", true);
-
 pref("social.sidebar.unload_timeout_ms", 10000);
 
 // Activation from inside of share panel is possible if activationPanelEnabled
 // is true. Pref'd off for release while usage testing is done through beta.
 pref("social.share.activationPanelEnabled", true);
 pref("social.shareDirectory", "https://activations.cdn.mozilla.net/sharePanel.html");
 
 pref("dom.identity.enabled", false);
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -897,21 +897,16 @@ panelview > .social-panel-frame {
   height: auto;
 }
 
 /* Translation */
 notification[value="translation"] {
   -moz-binding: url("chrome://browser/content/translation-infobar.xml#translationbar");
 }
 
-/* Loop/ Hello */
-notification[value="loop-sharing-notification"] .close-icon {
-  display: none;
-}
-
 /* Social */
 /* Note the chatbox 'width' values are duplicated in socialchat.xml */
 chatbox {
   -moz-binding: url("chrome://browser/content/socialchat.xml#chatbox");
   transition: height 150ms ease-out, width 150ms ease-out;
   height: 290px;
   width: 300px; /* CHAT_WIDTH_OPEN in socialchat.xml */
 }
new file mode 100644
--- /dev/null
+++ b/browser/extensions/loop/content/preferences/prefs.js
@@ -0,0 +1,33 @@
+pref("loop.enabled", true);
+pref("loop.textChat.enabled", true);
+pref("loop.server", "https://loop.services.mozilla.com/v0");
+pref("loop.linkClicker.url", "https://hello.firefox.com/");
+pref("loop.gettingStarted.seen", false);
+pref("loop.gettingStarted.url", "https://www.mozilla.org/%LOCALE%/firefox/%VERSION%/hello/start/");
+pref("loop.gettingStarted.resumeOnFirstJoin", false);
+pref("loop.learnMoreUrl", "https://www.firefox.com/hello/");
+pref("loop.legal.ToS_url", "https://www.mozilla.org/about/legal/terms/firefox-hello/");
+pref("loop.legal.privacy_url", "https://www.mozilla.org/privacy/firefox-hello/");
+pref("loop.do_not_disturb", false);
+pref("loop.ringtone", "chrome://browser/content/loop/shared/sounds/ringtone.ogg");
+pref("loop.retry_delay.start", 60000);
+pref("loop.retry_delay.limit", 300000);
+pref("loop.ping.interval", 1800000);
+pref("loop.ping.timeout", 10000);
+pref("loop.debug.loglevel", "Error");
+pref("loop.debug.dispatcher", false);
+pref("loop.debug.sdk", false);
+pref("loop.debug.twoWayMediaTelemetry", false);
+pref("loop.feedback.dateLastSeenSec", 0);
+pref("loop.feedback.periodSec", 15770000); // 6 months.
+pref("loop.feedback.formURL", "https://www.mozilla.org/firefox/hello/npssurvey/");
+pref("loop.feedback.manualFormURL", "https://www.mozilla.org/firefox/hello/feedbacksurvey/");
+#ifdef DEBUG
+pref("loop.CSP", "default-src 'self' about: file: chrome: http://localhost:*; img-src * data:; font-src 'none'; connect-src wss://*.tokbox.com https://*.opentok.com https://*.tokbox.com wss://*.mozilla.com https://*.mozilla.org wss://*.mozaws.net http://localhost:* ws://localhost:*; media-src blob:");
+#else
+pref("loop.CSP", "default-src 'self' about: file: chrome:; img-src * data:; font-src 'none'; connect-src wss://*.tokbox.com https://*.opentok.com https://*.tokbox.com wss://*.mozilla.com https://*.mozilla.org wss://*.mozaws.net; media-src blob:");
+#endif
+pref("loop.fxa_oauth.tokendata", "");
+pref("loop.fxa_oauth.profile", "");
+pref("loop.support_url", "https://support.mozilla.org/kb/group-conversations-firefox-hello-webrtc");
+pref("loop.browserSharing.showInfoBar", true);
rename from browser/themes/windows/loop/menuPanel.png
rename to browser/extensions/loop/skin/linux/menuPanel.png
rename from browser/themes/windows/loop/menuPanel@2x.png
rename to browser/extensions/loop/skin/linux/menuPanel@2x.png
rename from browser/themes/windows/loop/toolbar-inverted.png
rename to browser/extensions/loop/skin/linux/toolbar-inverted.png
rename from browser/themes/windows/loop/toolbar-inverted@2x.png
rename to browser/extensions/loop/skin/linux/toolbar-inverted@2x.png
rename from browser/themes/linux/loop/toolbar.png
rename to browser/extensions/loop/skin/linux/toolbar.png
rename from browser/themes/linux/loop/toolbar@2x.png
rename to browser/extensions/loop/skin/linux/toolbar@2x.png
rename from browser/themes/osx/loop/menuPanel-yosemite.png
rename to browser/extensions/loop/skin/osx/menuPanel-yosemite.png
rename from browser/themes/osx/loop/menuPanel-yosemite@2x.png
rename to browser/extensions/loop/skin/osx/menuPanel-yosemite@2x.png
rename from browser/themes/osx/loop/menuPanel.png
rename to browser/extensions/loop/skin/osx/menuPanel.png
rename from browser/themes/osx/loop/menuPanel@2x.png
rename to browser/extensions/loop/skin/osx/menuPanel@2x.png
new file mode 100644
--- /dev/null
+++ b/browser/extensions/loop/skin/osx/platform.css
@@ -0,0 +1,39 @@
+/* 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/. */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+notification[value="loop-sharing-notification"] {
+  background: #00a9dc;
+  padding: 0;
+  border: 0;
+}
+
+notification[value="loop-sharing-notification"].paused {
+  background: #ebebeb;
+}
+
+notification[value="loop-sharing-notification"] .notification-button {
+  background: #fff;
+  border-radius: 0;
+}
+
+notification[value="loop-sharing-notification"].paused .notification-button {
+  background: #57bd35;
+}
+
+notification[value="loop-sharing-notification"].paused .notification-button:hover {
+  background: #39a017;
+}
+
+notification[value="loop-sharing-notification"] .notification-button:hover,
+notification[value="loop-sharing-notification"].paused .notification-button-default:hover {
+  background: #ebebeb;
+}
+
+notification[value="loop-sharing-notification"] .notification-button-default,
+notification[value="loop-sharing-notification"].paused .notification-button-default {
+  background: #fff;
+}
+
rename from browser/themes/osx/loop/toolbar-inverted.png
rename to browser/extensions/loop/skin/osx/toolbar-inverted.png
rename from browser/themes/osx/loop/toolbar-inverted@2x.png
rename to browser/extensions/loop/skin/osx/toolbar-inverted@2x.png
rename from browser/themes/osx/loop/toolbar-yosemite.png
rename to browser/extensions/loop/skin/osx/toolbar-yosemite.png
rename from browser/themes/osx/loop/toolbar-yosemite@2x.png
rename to browser/extensions/loop/skin/osx/toolbar-yosemite@2x.png
rename from browser/themes/osx/loop/toolbar.png
rename to browser/extensions/loop/skin/osx/toolbar.png
rename from browser/themes/osx/loop/toolbar@2x.png
rename to browser/extensions/loop/skin/osx/toolbar@2x.png
new file mode 100644
--- /dev/null
+++ b/browser/extensions/loop/skin/shared/loop.css
@@ -0,0 +1,280 @@
+/* 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/. */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+/* Only apply to browser.xul documents */
+@-moz-document url("chrome://browser/content/browser.xul") {
+  /*
+     XXX Copied from browser/themes/<platform>/browser.css. Should really be
+     changing the sizes of icons in files to 16px x 16px and no borders.
+   */
+  :-moz-any(toolbar, .widget-overflow-list) #loop-button > .toolbarbutton-icon,
+  :-moz-any(toolbar, .widget-overflow-list) #loop-button > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon {
+    max-width: 18px;
+    margin: 0;
+  }
+
+  #loop-button {
+    list-style-image: url(chrome://browser/skin/loop/toolbar.png);
+    -moz-image-region: rect(0, 18px, 18px, 0);
+  }
+
+  toolbar[brighttext] #loop-button {
+    list-style-image: url(chrome://browser/skin/loop/toolbar-inverted.png);
+  }
+
+  #loop-button[state="disabled"],
+  #loop-button[disabled="true"] {
+    -moz-image-region: rect(0, 36px, 18px, 18px);
+  }
+
+  #loop-button:not([disabled="true"])[state="error"] {
+    -moz-image-region: rect(0, 54px, 18px, 36px);
+  }
+
+  #loop-button:not([disabled="true"])[state="action"] {
+    -moz-image-region: rect(0, 72px, 18px, 54px);
+  }
+
+  #loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) {
+    -moz-image-region: rect(0, 90px, 18px, 72px);
+  }
+
+  #loop-button:not([disabled="true"])[state="active"] {
+    -moz-image-region: rect(0, 108px, 18px, 90px);
+  }
+
+  #loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) {
+    -moz-image-region: rect(0, 126px, 18px, 108px);
+  }
+
+  @media (min-resolution: 1.1dppx) {
+    #loop-button {
+      list-style-image: url("chrome://browser/skin/loop/toolbar@2x.png");
+      -moz-image-region: rect(0, 36px, 36px, 0);
+    }
+
+    toolbar[brighttext] #loop-button {
+      list-style-image: url("chrome://browser/skin/loop/toolbar-inverted@2x.png");
+    }
+
+    #loop-button[state="disabled"],
+    #loop-button[disabled="true"] {
+      -moz-image-region: rect(0, 72px, 36px, 36px);
+    }
+
+    #loop-button:not([disabled="true"])[state="error"] {
+      -moz-image-region: rect(0, 108px, 36px, 72px);
+    }
+
+    #loop-button:not([disabled="true"])[state="action"] {
+      -moz-image-region: rect(0, 144px, 36px, 108px);
+    }
+
+    #loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) {
+      -moz-image-region: rect(0, 180px, 36px, 144px);
+    }
+
+    #loop-button:not([disabled="true"])[state="active"] {
+      -moz-image-region: rect(0, 216px, 36px, 180px);
+    }
+
+    #loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) {
+      -moz-image-region: rect(0, 252px, 36px, 216px);
+    }
+
+    #loop-button[cui-areatype="menu-panel"],
+    toolbarpaletteitem[place="palette"] > #loop-button {
+      list-style-image: url(chrome://browser/skin/loop/menuPanel@2x.png);
+      -moz-image-region: rect(0, 64px, 64px, 0);
+    }
+
+    /* Make sure that the state icons are not shown in the customization palette. */
+    toolbarpaletteitem[place="palette"] > #loop-button {
+      -moz-image-region: rect(0, 64px, 64px, 0) !important;
+    }
+
+    #loop-button[cui-areatype="menu-panel"][state="disabled"],
+    #loop-button[cui-areatype="menu-panel"][disabled="true"] {
+      -moz-image-region: rect(0, 128px, 64px, 64px);
+    }
+
+    #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] {
+      -moz-image-region: rect(0, 192px, 64px, 128px);
+    }
+
+    #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] {
+      -moz-image-region: rect(0, 256px, 64px, 192px);
+    }
+
+    #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) {
+      -moz-image-region: rect(0, 320px, 64px, 256px);
+    }
+
+    #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] {
+      -moz-image-region: rect(0, 384px, 64px, 320px);
+    }
+
+    #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) {
+      -moz-image-region: rect(0, 448px, 64px, 384px);
+    }
+  }
+
+  @media not all and (min-resolution: 1.1dppx) {
+    #loop-button[cui-areatype="menu-panel"],
+    toolbarpaletteitem[place="palette"] > #loop-button {
+      list-style-image: url(chrome://browser/skin/loop/menuPanel.png);
+      -moz-image-region: rect(0, 32px, 32px, 0);
+    }
+
+    /* Make sure that the state icons are not shown in the customization palette. */
+    toolbarpaletteitem[place="palette"] > #loop-button {
+      -moz-image-region: rect(0, 32px, 32px, 0) !important;
+    }
+
+    #loop-button[cui-areatype="menu-panel"][state="disabled"],
+    #loop-button[cui-areatype="menu-panel"][disabled="true"] {
+      -moz-image-region: rect(0, 64px, 32px, 32px);
+    }
+
+    #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] {
+      -moz-image-region: rect(0, 96px, 32px, 64px);
+    }
+
+    #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] {
+      -moz-image-region: rect(0, 128px, 32px, 96px);
+    }
+
+    #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) {
+      -moz-image-region: rect(0, 160px, 32px, 128px);
+    }
+
+    #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] {
+      -moz-image-region: rect(0, 192px, 32px, 160px);
+    }
+
+    #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) {
+      -moz-image-region: rect(0, 224px, 32px, 192px);
+    }
+  }
+
+  notification[value="loop-sharing-notification"] {
+    -moz-appearance: none;
+    height: 40px;
+    background-color: #00a9dc;
+    box-shadow: 0 40px 1px rgba(0,0,0,.5) inset;
+  }
+
+  notification[value="loop-sharing-notification"].paused {
+    background-color: #ebebeb;
+  }
+
+  notification[value="loop-sharing-notification"] .notification-inner {
+    color: #fff;
+    padding: 0;
+  }
+
+  notification[value="loop-sharing-notification"].paused .notification-inner {
+    color: #00a9dc;
+  }
+
+  notification[value="loop-sharing-notification"] .notification-button {
+    -moz-appearance: none;
+    background-color: #fff;
+    border: 0;
+    border-right: solid 1px #ebebeb;
+    width: 100px;
+    height: 40px;
+    margin: 0;
+    list-style-image: url(chrome://browser/content/loop/shared/img/pause-12x12.svg);
+    box-shadow: 0 40px 1px rgba(0,0,0,.5) inset;
+    text-shadow: none;
+  }
+
+  notification[value="loop-sharing-notification"] .notification-button:-moz-locale-dir(rtl) {
+    border-right: 0;
+    border-left: solid 1px #ebebeb;
+  }
+
+  notification[value="loop-sharing-notification"].paused .notification-button {
+    background-color: #57bd35;
+    color: #fff;
+    list-style-image: url(chrome://browser/content/loop/shared/img/play-12x12.svg);
+  }
+
+  notification[value="loop-sharing-notification"].paused .notification-button:hover {
+    background-color: #39a017;
+  }
+
+  notification[value="loop-sharing-notification"] .notification-button:hover,
+  notification[value="loop-sharing-notification"].paused .notification-button-default:hover {
+    background-color: #ebebeb;
+  }
+
+  notification[value="loop-sharing-notification"] .notification-button-default,
+  notification[value="loop-sharing-notification"].paused .notification-button-default {
+    color: #d92215;
+    background-color: #fff;
+    border-right: 0;
+    list-style-image: url(chrome://browser/content/loop/shared/img/stop-12x12.svg);
+  }
+
+  notification[value="loop-sharing-notification"] .notification-button .button-icon {
+    display: block;
+    -moz-margin-end: 6px;
+  }
+
+  notification[value="loop-sharing-notification"] .button-menubutton-button {
+    min-width: 0;
+  }
+
+  notification[value="loop-sharing-notification"] .messageImage {
+    list-style-image: url(chrome://browser/content/loop/shared/img/icons-16x16.svg#loop-icon-white);
+    margin-inline-start: 14px;
+  }
+
+  notification[value="loop-sharing-notification"].paused .messageImage {
+    list-style-image: url(chrome://browser/content/loop/shared/img/icons-16x16.svg#loop-icon-still);
+  }
+
+  notification[value="loop-sharing-notification"] .close-icon {
+    display: none;
+  }
+
+  chatbox[src^="about:loopconversation#"] > .chat-titlebar {
+    background-color: #00a9dc;
+    border-color: #00a9dc;
+  }
+
+  chatbox[src^="about:loopconversation#"] .chat-title {
+    color: white;
+  }
+
+  chatbox[src^="about:loopconversation#"] .chat-minimize-button {
+    list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-white");
+  }
+
+  chatbox[src^="about:loopconversation#"] .chat-swap-button {
+    list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-white");
+  }
+
+  .chat-loop-hangup {
+    list-style-image: url("chrome://browser/skin/social/chat-icons.svg#exit-white");
+    background-color: #d13f1a;
+    border: 1px solid #d13f1a;
+    border-top-right-radius: 4px;
+    width: 32px;
+    height: 26px;
+    margin-top: -6px;
+    margin-bottom: -5px;
+    -moz-margin-start: 6px;
+    -moz-margin-end: -5px;
+  }
+
+  .chat-toolbarbutton.chat-loop-hangup:-moz-any(:hover,:hover:active) {
+    background-color: #ef6745;
+    border-color: #ef6745;
+  }
+}
rename from browser/themes/windows/loop/menuPanel-aero.png
rename to browser/extensions/loop/skin/windows/menuPanel-aero.png
rename from browser/themes/windows/loop/menuPanel-aero@2x.png
rename to browser/extensions/loop/skin/windows/menuPanel-aero@2x.png
rename from browser/themes/linux/loop/menuPanel.png
rename to browser/extensions/loop/skin/windows/menuPanel.png
rename from browser/themes/linux/loop/menuPanel@2x.png
rename to browser/extensions/loop/skin/windows/menuPanel@2x.png
new file mode 100644
--- /dev/null
+++ b/browser/extensions/loop/skin/windows/platform.css
@@ -0,0 +1,18 @@
+/* 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/. */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+@media (-moz-windows-theme: luna-silver) and (max-resolution: 1dppx) {
+  #loop-button {
+    list-style-image: url(chrome://browser/skin/loop/toolbar-lunaSilver.png)
+  }
+}
+
+@media (-moz-windows-theme: luna-silver) and (min-resolution: 1.1dppx) {
+  #loop-button {
+    list-style-image: url(chrome://browser/skin/loop/toolbar-lunaSilver@2x.png)
+  }
+}
+
rename from browser/themes/windows/loop/toolbar-XP.png
rename to browser/extensions/loop/skin/windows/toolbar-XP.png
rename from browser/themes/windows/loop/toolbar-XP@2x.png
rename to browser/extensions/loop/skin/windows/toolbar-XP@2x.png
rename from browser/themes/windows/loop/toolbar-aero.png
rename to browser/extensions/loop/skin/windows/toolbar-aero.png
rename from browser/themes/windows/loop/toolbar-aero@2x.png
rename to browser/extensions/loop/skin/windows/toolbar-aero@2x.png
rename from browser/themes/linux/loop/toolbar-inverted.png
rename to browser/extensions/loop/skin/windows/toolbar-inverted.png
rename from browser/themes/linux/loop/toolbar-inverted@2x.png
rename to browser/extensions/loop/skin/windows/toolbar-inverted@2x.png
rename from browser/themes/windows/loop/toolbar-lunaSilver.png
rename to browser/extensions/loop/skin/windows/toolbar-lunaSilver.png
rename from browser/themes/windows/loop/toolbar-lunaSilver@2x.png
rename to browser/extensions/loop/skin/windows/toolbar-lunaSilver@2x.png
rename from browser/themes/windows/loop/toolbar-win8.png
rename to browser/extensions/loop/skin/windows/toolbar-win8.png
rename from browser/themes/windows/loop/toolbar-win8@2x.png
rename to browser/extensions/loop/skin/windows/toolbar-win8@2x.png
rename from browser/themes/windows/loop/toolbar.png
rename to browser/extensions/loop/skin/windows/toolbar.png
rename from browser/themes/windows/loop/toolbar@2x.png
rename to browser/extensions/loop/skin/windows/toolbar@2x.png
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -3206,50 +3206,16 @@ menulist.translate-infobar-element > .me
     list-style-image: url("chrome://global/skin/icons/glyph-dropdown@2x.png");
   }
 
   menulist.translate-infobar-element > .menulist-dropmarker > .dropmarker-icon {
     width: 8px;
   }
 }
 
-/* Loop/ Hello browser styles */
-notification[value="loop-sharing-notification"] {
-  background: #00a9dc;
-  padding: 0;
-  border: 0;
-}
-
-notification[value="loop-sharing-notification"].paused {
-  background: #ebebeb;
-}
-
-notification[value="loop-sharing-notification"] .notification-button {
-  background: #fff;
-  border-radius: 0;
-}
-
-notification[value="loop-sharing-notification"].paused .notification-button {
-  background: #57bd35;
-}
-
-notification[value="loop-sharing-notification"].paused .notification-button:hover {
-  background: #39a017;
-}
-
-notification[value="loop-sharing-notification"] .notification-button:hover,
-notification[value="loop-sharing-notification"].paused .notification-button-default:hover {
-  background: #ebebeb;
-}
-
-notification[value="loop-sharing-notification"] .notification-button-default,
-notification[value="loop-sharing-notification"].paused .notification-button-default {
-  background: #fff;
-}
-
 .popup-notification-body[popupid="addon-progress"],
 .popup-notification-body[popupid="addon-install-confirmation"] {
   width: 28em;
   max-width: 28em;
 }
 
 .addon-install-confirmation-name {
   font-weight: bold;
--- a/browser/themes/shared/browser.inc
+++ b/browser/themes/shared/browser.inc
@@ -1,13 +1,13 @@
 %filter substitution
 
 % Note that zoom-reset-button is a bit different since it doesn't use an image and thus has the image with display: none.
 %define nestedButtons #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button
-%define primaryToolbarButtons #back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, @nestedButtons@, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button
+%define primaryToolbarButtons #back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, @nestedButtons@, #e10s-button, #panic-button, #web-apps-button, #webide-button, #pocket-button
 
 %ifdef XP_MACOSX
 % Prior to 10.7 there wasn't a native fullscreen button so we use #restore-button to exit fullscreen
 % and want it to behave like other toolbar buttons.
 %define primaryToolbarButtons @primaryToolbarButtons@, #restore-button
 %endif
 
 %define inAnyPanel :-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
--- a/browser/themes/shared/menupanel.inc.css
+++ b/browser/themes/shared/menupanel.inc.css
@@ -186,52 +186,16 @@
   #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
     -moz-image-region: rect(32px, 992px, 64px, 960px);
   }
 
   toolbaritem[sdkstylewidget="true"] > toolbarbutton {
     -moz-image-region: rect(0, 832px, 32px, 800px);
   }
 
-  #loop-button[cui-areatype="menu-panel"],
-  toolbarpaletteitem[place="palette"] > #loop-button {
-    list-style-image: url(chrome://browser/skin/loop/menuPanel.png);
-    -moz-image-region: rect(0, 32px, 32px, 0);
-  }
-
-  /* Make sure that the state icons are not shown in the customization palette. */
-  toolbarpaletteitem[place="palette"] > #loop-button {
-    -moz-image-region: rect(0, 32px, 32px, 0) !important;
-  }
-
-  #loop-button[cui-areatype="menu-panel"][state="disabled"],
-  #loop-button[cui-areatype="menu-panel"][disabled="true"] {
-    -moz-image-region: rect(0, 64px, 32px, 32px);
-  }
-
-  #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] {
-    -moz-image-region: rect(0, 96px, 32px, 64px);
-  }
-
-  #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] {
-    -moz-image-region: rect(0, 128px, 32px, 96px);
-  }
-
-  #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) {
-    -moz-image-region: rect(0, 160px, 32px, 128px);
-  }
-
-  #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] {
-    -moz-image-region: rect(0, 192px, 32px, 160px);
-  }
-
-  #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) {
-    -moz-image-region: rect(0, 224px, 32px, 192px);
-  }
-
   /* Wide panel control icons */
 
   #edit-controls@inAnyPanel@ > toolbarbutton,
   #zoom-controls@inAnyPanel@ > toolbarbutton,
   toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
   toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
     list-style-image: var(--menupanel-small-list-style-image);
   }
@@ -370,52 +334,16 @@
   toolbarpaletteitem[place="palette"] > #pocket-button {
     -moz-image-region: rect(0px, 1984px, 64px, 1920px);
   }
 
   #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
     -moz-image-region: rect(64px, 1984px, 128px, 1920px);
   }
 
-  #loop-button[cui-areatype="menu-panel"],
-  toolbarpaletteitem[place="palette"] > #loop-button {
-    list-style-image: url(chrome://browser/skin/loop/menuPanel@2x.png);
-    -moz-image-region: rect(0, 64px, 64px, 0);
-  }
-
-  /* Make sure that the state icons are not shown in the customization palette. */
-  toolbarpaletteitem[place="palette"] > #loop-button {
-    -moz-image-region: rect(0, 64px, 64px, 0) !important;
-  }
-
-  #loop-button[cui-areatype="menu-panel"][state="disabled"],
-  #loop-button[cui-areatype="menu-panel"][disabled="true"] {
-    -moz-image-region: rect(0, 128px, 64px, 64px);
-  }
-
-  #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] {
-    -moz-image-region: rect(0, 192px, 64px, 128px);
-  }
-
-  #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] {
-    -moz-image-region: rect(0, 256px, 64px, 192px);
-  }
-
-  #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) {
-    -moz-image-region: rect(0, 320px, 64px, 256px);
-  }
-
-  #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] {
-    -moz-image-region: rect(0, 384px, 64px, 320px);
-  }
-
-  #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) {
-    -moz-image-region: rect(0, 448px, 64px, 384px);
-  }
-
   #new-tab-button[cui-areatype="menu-panel"],
   toolbarpaletteitem[place="palette"] > #new-tab-button {
     -moz-image-region: rect(0px, 1088px, 64px, 1024px);
   }
 
   #privatebrowsing-button[cui-areatype="menu-panel"],
   toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
     -moz-image-region: rect(0px, 1152px, 64px, 1088px);
--- a/browser/themes/shared/notification-icons.inc.css
+++ b/browser/themes/shared/notification-icons.inc.css
@@ -440,88 +440,8 @@
     list-style-image: url(chrome://browser/skin/social/services-64@2x.png);
   }
 
   #servicesInstall-notification-icon {
     list-style-image: url(chrome://browser/skin/social/services-16@2x.png);
   }
 %endif
 }
-
-/* Loop notification */
-notification[value="loop-sharing-notification"] {
-  -moz-appearance: none;
-  height: 40px;
-  background-color: #00a9dc;
-  box-shadow: 0 40px 1px rgba(0,0,0,.5) inset;
-}
-
-notification[value="loop-sharing-notification"].paused {
-  background-color: #ebebeb;
-}
-
-notification[value="loop-sharing-notification"] .notification-inner {
-  color: #fff;
-  padding: 0;
-}
-
-notification[value="loop-sharing-notification"].paused .notification-inner {
-  color: #00a9dc;
-}
-
-notification[value="loop-sharing-notification"] .notification-button {
-  -moz-appearance: none;
-  background-color: #fff;
-  border: 0;
-  border-right: solid 1px #ebebeb;
-  width: 100px;
-  height: 40px;
-  margin: 0;
-  list-style-image: url(chrome://browser/content/loop/shared/img/pause-12x12.svg);
-  box-shadow: 0 40px 1px rgba(0,0,0,.5) inset;
-  text-shadow: none;
-}
-
-notification[value="loop-sharing-notification"] .notification-button:-moz-locale-dir(rtl) {
-  border-right: 0;
-  border-left: solid 1px #ebebeb;
-}
-
-notification[value="loop-sharing-notification"].paused .notification-button {
-  background-color: #57bd35;
-  color: #fff;
-  list-style-image: url(chrome://browser/content/loop/shared/img/play-12x12.svg);
-}
-
-notification[value="loop-sharing-notification"].paused .notification-button:hover {
-  background-color: #39a017;
-}
-
-notification[value="loop-sharing-notification"] .notification-button:hover,
-notification[value="loop-sharing-notification"].paused .notification-button-default:hover {
-  background-color: #ebebeb;
-}
-
-notification[value="loop-sharing-notification"] .notification-button-default,
-notification[value="loop-sharing-notification"].paused .notification-button-default {
-  color: #d92215;
-  background-color: #fff;
-  border-right: 0;
-  list-style-image: url(chrome://browser/content/loop/shared/img/stop-12x12.svg);
-}
-
-notification[value="loop-sharing-notification"] .notification-button .button-icon {
-  display: block;
-  -moz-margin-end: 6px;
-}
-
-notification[value="loop-sharing-notification"] .button-menubutton-button {
-  min-width: 0;
-}
-
-notification[value="loop-sharing-notification"] .messageImage {
-  list-style-image: url(chrome://browser/content/loop/shared/img/icons-16x16.svg#loop-icon-white);
-  margin-inline-start: 14px;
-}
-
-notification[value="loop-sharing-notification"].paused .messageImage {
-  list-style-image: url(chrome://browser/content/loop/shared/img/icons-16x16.svg#loop-icon-still);
-}
\ No newline at end of file
--- a/browser/themes/shared/social/chat.inc.css
+++ b/browser/themes/shared/social/chat.inc.css
@@ -100,52 +100,22 @@
 .chat-swap-button:hover:active {
   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active");
 }
 
 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
   transform: none;
 }
 
-chatbox[src^="about:loopconversation#"] .chat-minimize-button {
-  list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-white");
-}
-
-chatbox[src^="about:loopconversation#"] .chat-swap-button {
-  list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-white");
-}
-
-.chat-loop-hangup {
-  list-style-image: url("chrome://browser/skin/social/chat-icons.svg#exit-white");
-  background-color: #d13f1a;
-  border: 1px solid #d13f1a;
-  border-top-right-radius: 4px;
-  width: 32px;
-  height: 26px;
-  margin-top: -6px;
-  margin-bottom: -5px;
-  -moz-margin-start: 6px;
-  -moz-margin-end: -5px;
-}
-
-.chat-toolbarbutton.chat-loop-hangup:-moz-any(:hover,:hover:active) {
-  background-color: #ef6745;
-  border-color: #ef6745;
-}
-
 .chat-title {
   color: #666;
   text-shadow: none;
   cursor: inherit;
 }
 
-chatbox[src^="about:loopconversation#"] .chat-title {
-  color: white;
-}
-
 .chat-titlebar {
   height: 26px;
   min-height: 26px;
   width: 100%;
   margin: 0;
   padding: 5px 4px;
   border: 1px solid #ebebeb;
   border-bottom: 0;
@@ -154,21 +124,16 @@ chatbox[src^="about:loopconversation#"] 
   cursor: pointer;
   background-color: #ebebeb;
 }
 
 .chat-titlebar[selected] {
   background-color: #f0f0f0;
 }
 
-chatbox[src^="about:loopconversation#"] > .chat-titlebar {
-  background-color: #00a9dc;
-  border-color: #00a9dc;
-}
-
 .chat-titlebar > .notification-anchor-icon {
   margin-left: 2px;
   margin-right: 2px;
 }
 
 .chat-titlebar[minimized="true"] {
   border-bottom: none;
 }
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -179,50 +179,16 @@ toolbar[brighttext] #sync-button[status=
 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
   transform: scaleX(-1);
 }
 
 #web-apps-button[cui-areatype="toolbar"] {
   -moz-image-region: rect(0, 720px, 18px, 702px);
 }
 
-#loop-button {
-  list-style-image: url(chrome://browser/skin/loop/toolbar.png);
-  -moz-image-region: rect(0, 18px, 18px, 0);
-}
-
-toolbar[brighttext] #loop-button {
-  list-style-image: url(chrome://browser/skin/loop/toolbar-inverted.png);
-}
-
-#loop-button[state="disabled"],
-#loop-button[disabled="true"] {
-  -moz-image-region: rect(0, 36px, 18px, 18px);
-}
-
-#loop-button:not([disabled="true"])[state="error"] {
-  -moz-image-region: rect(0, 54px, 18px, 36px);
-}
-
-#loop-button:not([disabled="true"])[state="action"] {
-  -moz-image-region: rect(0, 72px, 18px, 54px);
-}
-
-#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) {
-  -moz-image-region: rect(0, 90px, 18px, 72px);
-}
-
-#loop-button:not([disabled="true"])[state="active"] {
-  -moz-image-region: rect(0, 108px, 18px, 90px);
-}
-
-#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) {
-  -moz-image-region: rect(0, 126px, 18px, 108px);
-}
-
 #webide-button[cui-areatype="toolbar"] {
   -moz-image-region: rect(0, 738px, 18px, 720px);
 }
 
 #pocket-button[cui-areatype="toolbar"] {
   -moz-image-region: rect(0, 774px, 18px, 756px);
 }
 
@@ -424,44 +390,10 @@ toolbar[brighttext] #loop-button {
 
   #pocket-button[cui-areatype="toolbar"][open] {
 %ifdef XP_MACOSX
     -moz-image-region: rect(72px, 1548px, 108px, 1512px);
 %else
     -moz-image-region: rect(36px, 1548px, 72px, 1512px);
 %endif
   }
-
-  #loop-button {
-    list-style-image: url("chrome://browser/skin/loop/toolbar@2x.png");
-    -moz-image-region: rect(0, 36px, 36px, 0);
-  }
-
-  toolbar[brighttext] #loop-button {
-    list-style-image: url("chrome://browser/skin/loop/toolbar-inverted@2x.png");
-  }
-
-  #loop-button[state="disabled"],
-  #loop-button[disabled="true"] {
-    -moz-image-region: rect(0, 72px, 36px, 36px);
-  }
-
-  #loop-button:not([disabled="true"])[state="error"] {
-    -moz-image-region: rect(0, 108px, 36px, 72px);
-  }
-
-  #loop-button:not([disabled="true"])[state="action"] {
-    -moz-image-region: rect(0, 144px, 36px, 108px);
-  }
-
-  #loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) {
-    -moz-image-region: rect(0, 180px, 36px, 144px);
-  }
-
-  #loop-button:not([disabled="true"])[state="active"] {
-    -moz-image-region: rect(0, 216px, 36px, 180px);
-  }
-
-  #loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) {
-    -moz-image-region: rect(0, 252px, 36px, 216px);
-  }
 }
 %endif
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -647,26 +647,16 @@ menuitem.bookmark-item {
 %include ../shared/toolbarbuttons.inc.css
 %include ../shared/menupanel.inc.css
 
 @media (-moz-windows-theme: luna-silver) and (max-resolution: 1dppx) {
   :-moz-any(@primaryToolbarButtons@),
   #bookmarks-menu-button.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
     list-style-image: url("chrome://browser/skin/Toolbar-lunaSilver.png");
   }
-
-  #loop-button {
-    list-style-image: url(chrome://browser/skin/loop/toolbar-lunaSilver.png)
-  }
-}
-
-@media (-moz-windows-theme: luna-silver) and (min-resolution: 1.1dppx) {
-  #loop-button {
-    list-style-image: url(chrome://browser/skin/loop/toolbar-lunaSilver@2x.png)
-  }
 }
 
 #main-window:not([customizing]) .toolbarbutton-1[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,
 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
   opacity: .4;