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 274519 ea7d46e2b42d7768693db0e0c6f8f47e40aefbff
parent 274518 a0de6bc9779f6cf17a7449f4f91cdc099cee3e75
child 274520 60489607e7d3c99829b5e3376c801fdfd4d09a4b
push id29733
push usercbook@mozilla.com
push dateMon, 30 Nov 2015 12:16:19 +0000
treeherdermozilla-central@2d385f1302a2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmikedeboer
bugs1223573
milestone45.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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;