Bug 1007336 - Set lightweight themes in customization mode. r=gijs

browser/app/profile/firefox.js

@@ -248,6 +248,8 @@ pref("xpinstall.whitelist.add", "addons.mozilla.org");
 pref("xpinstall.whitelist.add.180", "marketplace.firefox.com");
 
 pref("lightweightThemes.update.enabled", true);
+pref("lightweightThemes.getMoreURL", "https://addons.mozilla.org/%LOCALE%/firefox/themes");
+pref("lightweightThemes.recommendedThemes", "[{\"id\":\"recommended-1\",\"homepageURL\":\"https://addons.mozilla.org/firefox/addon/a-web-browser-renaissance/\",\"headerURL\":\"resource:///chrome/browser/content/browser/defaultthemes/1.header.jpg\",\"footerURL\":\"resource:///chrome/browser/content/browser/defaultthemes/1.footer.jpg\",\"textcolor\":\"#000000\",\"accentcolor\":\"#f2d9b1\",\"iconURL\":\"resource:///chrome/browser/content/browser/defaultthemes/1.icon.jpg\",\"previewURL\":\"resource:///chrome/browser/content/browser/defaultthemes/1.preview.jpg\",\"author\":\"Sean.Martell\",\"version\":\"0\"},{\"id\":\"recommended-2\",\"homepageURL\":\"https://addons.mozilla.org/firefox/addon/space-fantasy/\",\"headerURL\":\"resource:///chrome/browser/content/browser/defaultthemes/2.header.jpg\",\"footerURL\":\"resource:///chrome/browser/content/browser/defaultthemes/2.footer.jpg\",\"textcolor\":\"#ffffff\",\"accentcolor\":\"#d9d9d9\",\"iconURL\":\"resource:///chrome/browser/content/browser/defaultthemes/2.icon.jpg\",\"previewURL\":\"resource:///chrome/browser/content/browser/defaultthemes/2.preview.jpg\",\"author\":\"fx5800p\",\"version\":\"1.0\"},{\"id\":\"recommended-3\",\"homepageURL\":\"https://addons.mozilla.org/firefox/addon/linen-light/\",\"headerURL\":\"resource:///chrome/browser/content/browser/defaultthemes/3.header.png\",\"footerURL\":\"resource:///chrome/browser/content/browser/defaultthemes/3.footer.png\",\"textcolor\":\"#None\",\"accentcolor\":\"#ada8a8\",\"iconURL\":\"resource:///chrome/browser/content/browser/defaultthemes/3.icon.png\",\"previewURL\":\"resource:///chrome/browser/content/browser/defaultthemes/3.preview.png\",\"author\":\"DVemer\",\"version\":\"1.0\"},{\"id\":\"recommended-4\",\"homepageURL\":\"https://addons.mozilla.org/firefox/addon/pastel-gradient/\",\"headerURL\":\"resource:///chrome/browser/content/browser/defaultthemes/4.header.png\",\"footerURL\":\"resource:///chrome/browser/content/browser/defaultthemes/4.footer.png\",\"textcolor\":\"#000000\",\"accentcolor\":\"#000000\",\"iconURL\":\"resource:///chrome/browser/content/browser/defaultthemes/4.icon.png\",\"previewURL\":\"resource:///chrome/browser/content/browser/defaultthemes/4.preview.png\",\"author\":\"darrinhenein\",\"version\":\"1.0\"},{\"id\":\"recommended-5\",\"homepageURL\":\"https://addons.mozilla.org/firefox/addon/carbon-light/\",\"headerURL\":\"resource:///chrome/browser/content/browser/defaultthemes/5.header.png\",\"footerURL\":\"resource:///chrome/browser/content/browser/defaultthemes/5.footer.png\",\"textcolor\":\"#3b3b3b\",\"accentcolor\":\"#2e2e2e\",\"iconURL\":\"resource:///chrome/browser/content/browser/defaultthemes/5.icon.jpg\",\"previewURL\":\"resource:///chrome/browser/content/browser/defaultthemes/5.preview.jpg\",\"author\":\"Jaxivo\",\"version\":\"1.0\"}]");
 
 // UI tour experience.
 pref("browser.uitour.enabled", true);

browser/base/jar.mn

@@ -78,6 +78,26 @@ browser.jar:
 *       content/browser/browser-tabPreviews.xml       (content/browser-tabPreviews.xml)
 *       content/browser/chatWindow.xul                (content/chatWindow.xul)
         content/browser/content.js                    (content/content.js)
+        content/browser/defaultthemes/1.footer.jpg    (content/defaultthemes/1.footer.jpg)
+        content/browser/defaultthemes/1.header.jpg    (content/defaultthemes/1.header.jpg)
+        content/browser/defaultthemes/1.icon.jpg      (content/defaultthemes/1.icon.jpg)
+        content/browser/defaultthemes/1.preview.jpg   (content/defaultthemes/1.preview.jpg)
+        content/browser/defaultthemes/2.footer.jpg    (content/defaultthemes/2.footer.jpg)
+        content/browser/defaultthemes/2.header.jpg    (content/defaultthemes/2.header.jpg)
+        content/browser/defaultthemes/2.icon.jpg      (content/defaultthemes/2.icon.jpg)
+        content/browser/defaultthemes/2.preview.jpg   (content/defaultthemes/2.preview.jpg)
+        content/browser/defaultthemes/3.footer.png    (content/defaultthemes/3.footer.png)
+        content/browser/defaultthemes/3.header.png    (content/defaultthemes/3.header.png)
+        content/browser/defaultthemes/3.icon.png      (content/defaultthemes/3.icon.png)
+        content/browser/defaultthemes/3.preview.png   (content/defaultthemes/3.preview.png)
+        content/browser/defaultthemes/4.footer.png    (content/defaultthemes/4.footer.png)
+        content/browser/defaultthemes/4.header.png    (content/defaultthemes/4.header.png)
+        content/browser/defaultthemes/4.icon.png      (content/defaultthemes/4.icon.png)
+        content/browser/defaultthemes/4.preview.png   (content/defaultthemes/4.preview.png)
+        content/browser/defaultthemes/5.footer.png    (content/defaultthemes/5.footer.png)
+        content/browser/defaultthemes/5.header.png    (content/defaultthemes/5.header.png)
+        content/browser/defaultthemes/5.icon.jpg      (content/defaultthemes/5.icon.jpg)
+        content/browser/defaultthemes/5.preview.jpg   (content/defaultthemes/5.preview.jpg)
         content/browser/newtab/newTab.xul             (content/newtab/newTab.xul)
 *       content/browser/newtab/newTab.js              (content/newtab/newTab.js)
         content/browser/newtab/newTab.css             (content/newtab/newTab.css)

browser/components/customizableui/CustomizeMode.jsm

@@ -27,11 +27,15 @@ Cu.import("resource:///modules/CustomizableUI.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource://gre/modules/Task.jsm");
 Cu.import("resource://gre/modules/Promise.jsm");
+Cu.import("resource://gre/modules/AddonManager.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "DragPositionManager",
                                   "resource:///modules/DragPositionManager.jsm");
 XPCOMUtils.defineLazyModuleGetter(this, "BrowserUITelemetry",
                                   "resource:///modules/BrowserUITelemetry.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "LightweightThemeManager",
+                                  "resource://gre/modules/LightweightThemeManager.jsm");
+
 
 let gModuleName = "[CustomizeMode]";
 #include logging.js
@@ -1218,6 +1222,119 @@ CustomizeMode.prototype = {
     }
   },
 
+  openAddonsManagerThemes: function(aEvent) {
+    aEvent.target.parentNode.parentNode.hidePopup();
+    this.window.BrowserOpenAddonsMgr('addons://list/theme');
+  },
+
+  getMoreThemes: function(aEvent) {
+    aEvent.target.parentNode.parentNode.hidePopup();
+    let getMoreURL = Services.urlFormatter.formatURLPref("lightweightThemes.getMoreURL");
+    this.window.openUILinkIn(getMoreURL, "tab");
+  },
+
+  onLWThemesMenuShowing: function(aEvent) {
+    AddonManager.getAddonsByTypes(["theme"], function(aThemes) {
+      function buildToolbarButton(doc, aTheme) {
+        function previewTheme(aEvent) {
+          LightweightThemeManager.previewTheme(aEvent.target.theme);
+        }
+        function resetPreview() {
+          LightweightThemeManager.resetPreview();
+        }
+        let tbb = doc.createElement("toolbarbutton");
+        tbb.theme = aTheme;
+        tbb.setAttribute("label", aTheme.name);
+        tbb.setAttribute("image", aTheme.iconURL);
+        tbb.setAttribute("tooltiptext", aTheme.description);
+        tbb.setAttribute("tabindex", "0");
+        tbb.classList.add("customization-lwtheme-menu-theme");
+        tbb.setAttribute("aria-checked", aTheme.isActive);
+        tbb.setAttribute("role", "menuitemradio");
+        if (aTheme.isActive) {
+          tbb.setAttribute("active", "true");
+        }
+        tbb.addEventListener("focus", previewTheme);
+        tbb.addEventListener("mouseover", previewTheme);
+        tbb.addEventListener("blur", resetPreview);
+        tbb.addEventListener("mouseout", resetPreview);
+
+        return tbb;
+      }
+
+      const DEFAULT_THEME_ID = "{972ce4c6-7e08-4474-a285-3208198ce6fd}";
+      // Order the themes so the Default theme is always at the beginning.
+      aThemes.sort((a,b) => {a.id != DEFAULT_THEME_ID});
+      let doc = this.window.document;
+      let footer = doc.getElementById("customization-lwtheme-menu-footer");
+      let panel = footer.parentNode;
+      let themesInMyThemesSection = 0;
+      let recommendedLabel = doc.getElementById("customization-lwtheme-menu-recommended");
+      for (let theme of aThemes) {
+        // Only allow the Default full theme to be shown in this list.
+        if ("skinnable" in theme &&
+            theme.id != DEFAULT_THEME_ID) {
+          continue;
+        }
+
+        let tbb = buildToolbarButton(doc, theme);
+        tbb.addEventListener("command", function() {
+          this.theme.userDisabled = false;
+          this.parentNode.hidePopup();
+        });
+        panel.insertBefore(tbb, recommendedLabel);
+        themesInMyThemesSection++;
+      }
+
+      let lwthemePrefs = Services.prefs.getBranch("lightweightThemes.");
+      let recommendedThemes = lwthemePrefs.getComplexValue("recommendedThemes",
+                                                           Ci.nsISupportsString).data;
+      recommendedThemes = JSON.parse(recommendedThemes);
+      let sb = Services.strings.createBundle("chrome://browser/locale/lightweightThemes.properties");
+      for (let theme of recommendedThemes) {
+        theme.name = sb.GetStringFromName("lightweightThemes." + theme.id + ".name");
+        theme.description = sb.GetStringFromName("lightweightThemes." + theme.id + ".description");
+        let tbb = buildToolbarButton(doc, theme);
+        tbb.addEventListener("command", function() {
+          LightweightThemeManager.setLocalTheme(this.theme);
+          recommendedThemes = recommendedThemes.filter((aTheme) => { return aTheme.id != this.theme.id; });
+          let string = Cc["@mozilla.org/supports-string;1"]
+                         .createInstance(Ci.nsISupportsString);
+          string.data = JSON.stringify(recommendedThemes);
+          lwthemePrefs.setComplexValue("recommendedThemes",
+                                       Ci.nsISupportsString, string);
+          this.parentNode.hidePopup();
+        });
+        panel.insertBefore(tbb, footer);
+      }
+      let hideRecommendedLabel = (footer.previousSibling == recommendedLabel);
+      recommendedLabel.hidden = hideRecommendedLabel;
+
+      let hideMyThemesSection = themesInMyThemesSection < 2 && hideRecommendedLabel;
+      let headerLabel = doc.getElementById("customization-lwtheme-menu-header");
+      if (hideMyThemesSection) {
+        let element = recommendedLabel.previousSibling;
+        while (element && element != headerLabel) {
+          element.hidden = true;
+          element = element.previousSibling;
+        }
+      }
+      headerLabel.hidden = hideMyThemesSection;
+    }.bind(this));
+  },
+
+  onLWThemesMenuHidden: function(aEvent) {
+    let doc = aEvent.target.ownerDocument;
+    let footer = doc.getElementById("customization-lwtheme-menu-footer");
+    let recommendedLabel = doc.getElementById("customization-lwtheme-menu-recommended");
+    for (let element of [footer, recommendedLabel]) {
+      while (element.previousSibling &&
+             element.previousSibling.localName == "toolbarbutton") {
+        element.previousSibling.remove();
+      }
+    }
+  },
+
   _onUIChange: function() {
     this._changed = true;
     if (!this.resetting) {

browser/components/customizableui/content/customizeMode.inc.xul

@@ -29,6 +29,27 @@
       <button id="customization-toolbar-visibility-button" label="&customizeMode.toolbars;" class="customizationmode-button" type="menu">
         <menupopup id="customization-toolbar-menu" onpopupshowing="onViewToolbarsPopupShowing(event)"/>
       </button>
+      <button id="customization-lwtheme-button" label="&customizeMode.lwthemes;" class="customizationmode-button" type="menu">
+        <panel type="arrow" id="customization-lwtheme-menu"
+               onpopupshowing="gCustomizeMode.onLWThemesMenuShowing(event);"
+               onpopuphidden="gCustomizeMode.onLWThemesMenuHidden(event);"
+               role="menu">
+          <label id="customization-lwtheme-menu-header" value="&customizeMode.lwthemes.myThemes;"/>
+          <label id="customization-lwtheme-menu-recommended" value="&customizeMode.lwthemes.recommended;"/>
+          <hbox id="customization-lwtheme-menu-footer">
+            <toolbarbutton class="customization-lwtheme-menu-footeritem"
+                           label="&customizeMode.lwthemes.menuManage;"
+                           accesskey="&customizeMode.lwthemes.menuManage.accessKey;"
+                           tabindex="0"
+                           oncommand="gCustomizeMode.openAddonsManagerThemes(event);"/>
+            <toolbarbutton class="customization-lwtheme-menu-footeritem"
+                           label="&customizeMode.lwthemes.menuGetMore;"
+                           accesskey="&customizeMode.lwthemes.menuGetMore.accessKey;"
+                           tabindex="0"
+                           oncommand="gCustomizeMode.getMoreThemes(event);"/>
+          </hbox>
+        </panel>
+      </button>
       <spacer id="customization-footer-spacer"/>
       <button id="customization-undo-reset-button"
               class="customizationmode-button"

browser/components/customizableui/test/browser.ini

@@ -115,6 +115,7 @@ skip-if = os == "linux"
 [browser_996364_registerArea_different_properties.js]
 [browser_996635_remove_non_widgets.js]
 [browser_1003588_no_specials_in_panel.js]
+[browser_1007336_lwthemes_in_customize_mode.js]
 [browser_1008559_anchor_undo_restore.js]
 [browser_1042100_default_placements_update.js]
 [browser_bootstrapped_custom_toolbar.js]

browser/components/customizableui/test/browser_1007336_lwthemes_in_customize_mode.js

@@ -0,0 +1,60 @@
+/* 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/. */
+
+"use strict";
+
+const DEFAULT_THEME_ID = "{972ce4c6-7e08-4474-a285-3208198ce6fd}";
+
+add_task(function () {
+  Services.prefs.clearUserPref("lightweightThemes.usedThemes");
+  Services.prefs.clearUserPref("lightweightThemes.recommendedThemes");
+
+  yield startCustomizing();
+
+  let themesButton = document.getElementById("customization-lwtheme-button");
+  let popup = document.getElementById("customization-lwtheme-menu");
+
+  let popupShownPromise = popupShown(popup);
+  EventUtils.synthesizeMouseAtCenter(themesButton, {});
+  info("Clicked on themes button");
+  yield popupShownPromise;
+
+  let header = document.getElementById("customization-lwtheme-menu-header");
+  let recommendedHeader = document.getElementById("customization-lwtheme-menu-recommended");
+
+  is(header.nextSibling.nextSibling, recommendedHeader,
+     "There should only be one theme (default) in the 'My Themes' section by default");
+  is(header.nextSibling.theme.id, DEFAULT_THEME_ID, "That theme should be the default theme");
+
+  let firstLWTheme = recommendedHeader.nextSibling;
+  let firstLWThemeId = firstLWTheme.theme.id;
+  let themeChangedPromise = promiseObserverNotified("lightweight-theme-changed");
+  firstLWTheme.doCommand();
+  info("Clicked on first theme");
+  yield themeChangedPromise;
+
+  popupShownPromise = popupShown(popup);
+  EventUtils.synthesizeMouseAtCenter(themesButton, {});
+  info("Clicked on themes button");
+  yield popupShownPromise;
+
+  is(header.nextSibling.theme.id, DEFAULT_THEME_ID, "The first theme should be the Default theme");
+  let installedThemeId = header.nextSibling.nextSibling.theme.id;
+  ok(installedThemeId.startsWith(firstLWThemeId),
+     "The second theme in the 'My Themes' section should be the newly installed theme: " +
+     "Installed theme id: " + installedThemeId + "; First theme ID: " + firstLWThemeId);
+  is(header.nextSibling.nextSibling.nextSibling, recommendedHeader,
+     "There should be two themes in the 'My Themes' section");
+
+  let defaultTheme = header.nextSibling;
+  defaultTheme.doCommand();
+  is(Services.prefs.getBoolPref("lightweightThemes.isThemeSelected"), false, "No lwtheme should be selected");
+});
+
+add_task(function asyncCleanup() {
+  yield endCustomizing();
+
+  Services.prefs.clearUserPref("lightweightThemes.usedThemes");
+  Services.prefs.clearUserPref("lightweightThemes.recommendedThemes");
+})

browser/components/customizableui/test/head.js

@@ -227,6 +227,15 @@ function startCustomizing(aWindow=window) {
   return deferred.promise;
 }
 
+function promiseObserverNotified(aTopic) {
+  let deferred = Promise.defer();
+  Services.obs.addObserver(function onNotification(aSubject, aTopic, aData) {
+    Services.obs.removeObserver(onNotification, aTopic);
+      deferred.resolve({subject: aSubject, data: aData});
+    }, aTopic, false);
+  return deferred.promise;
+}
+
 function openAndLoadWindow(aOptions, aWaitForDelayedStartup=false) {
   let deferred = Promise.defer();
   let win = OpenBrowserWindow(aOptions);

browser/locales/en-US/chrome/browser/browser.dtd

@@ -697,6 +697,13 @@ just addresses the organization to follow, e.g. "This site is run by " -->
 <!ENTITY customizeMode.restoreDefaults "Restore Defaults">
 <!ENTITY customizeMode.toolbars "Show / Hide Toolbars">
 <!ENTITY customizeMode.titlebar "Title Bar">
+<!ENTITY customizeMode.lwthemes "Themes">
+<!ENTITY customizeMode.lwthemes.myThemes "My Themes">
+<!ENTITY customizeMode.lwthemes.recommended "Recommended">
+<!ENTITY customizeMode.lwthemes.menuManage "Manage">
+<!ENTITY customizeMode.lwthemes.menuManage.accessKey "M">
+<!ENTITY customizeMode.lwthemes.menuGetMore "Get More Themes">
+<!ENTITY customizeMode.lwthemes.menuGetMore.accessKey "G">
 
 <!ENTITY social.chatBar.commandkey "c">
 <!ENTITY social.chatBar.label "Focus chats">

browser/locales/en-US/chrome/browser/lightweightThemes.properties

@@ -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/.
+
+lightweightThemes.recommended-1.name=A Web Browser Renaissance
+lightweightThemes.recommended-1.description=A Web Browser Renaissance is (C) Sean.Martell. Available under CC-BY-SA. No warranty.
+
+lightweightThemes.recommended-2.name=Space Fantasy
+lightweightThemes.recommended-2.description=Space Fantasy is (C) fx5800p. Available under CC-BY-SA. No warranty.
+
+lightweightThemes.recommended-3.name=Linen Light
+lightweightThemes.recommended-3.description=Linen Light is (C) DVemer. Available under CC-BY-SA. No warranty.
+
+lightweightThemes.recommended-4.name=Pastel Gradient
+lightweightThemes.recommended-4.description=Pastel Gradient is (C) darrinhenein. Available under CC-BY. No warranty.
+
+lightweightThemes.recommended-5.name=Carbon Light
+lightweightThemes.recommended-5.description=Carbon Light is (C) Jaxivo. Available under CC-BY-SA. No warranty.

browser/locales/jar.mn

@@ -66,6 +66,7 @@
     locale/browser/devtools/app-manager.properties (%chrome/browser/devtools/app-manager.properties)
     locale/browser/devtools/webide.dtd             (%chrome/browser/devtools/webide.dtd)
     locale/browser/devtools/webide.properties      (%chrome/browser/devtools/webide.properties)
+    locale/browser/lightweightThemes.properties    (%chrome/browser/lightweightThemes.properties)
     locale/browser/loop/loop.properties            (%chrome/browser/loop/loop.properties)
     locale/browser/newTab.dtd                      (%chrome/browser/newTab.dtd)
     locale/browser/newTab.properties               (%chrome/browser/newTab.properties)

browser/themes/shared/customizableui/customizeMode.inc.css

@@ -276,4 +276,97 @@ toolbarpaletteitem[place="toolbar"] {
   margin-right: 0;
 }
 
+#customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
+  -moz-box-orient: vertical;
+  /* Make the panel padding uniform across all platforms due to the
+     styling of the section headers and footer. */
+  padding: 10px;
+}
+
+.customization-lwtheme-menu-theme > .toolbarbutton-icon {
+  width: 32px;
+  height: 32px;
+}
+
+.customization-lwtheme-menu-theme {
+  -moz-appearance: none;
+  border: 1px solid transparent;
+  margin: 0 -5px 5px;
+  padding-top: 0;
+  -moz-padding-end: 5px;
+  padding-bottom: 0;
+  -moz-padding-start: 0;
+}
+
+.customization-lwtheme-menu-theme[active="true"],
+.customization-lwtheme-menu-theme:hover {
+  background-color: hsla(210,4%,10%,.08);
+  border-color: hsla(210,4%,10%,.11);
+}
+
+.customization-lwtheme-menu-theme[active="true"],
+.customization-lwtheme-menu-theme:hover:active {
+  background-color: hsla(210,4%,10%,.15);
+}
+
+.customization-lwtheme-menu-theme > .toolbarbutton-icon {
+  margin: 5px;
+}
+
+.customization-lwtheme-menu-theme > .toolbarbutton-text {
+  text-align: start;
+}
+
+#customization-lwtheme-menu-header,
+#customization-lwtheme-menu-recommended {
+  padding: 10px;
+  margin-bottom: 5px;
+}
+
+#customization-lwtheme-menu-header,
+#customization-lwtheme-menu-recommended,
+#customization-lwtheme-menu-footer {
+  background-color: hsla(210,4%,10%,.05);
+  color: hsl(0,0%,50%);
+  margin-right: -10px;
+  margin-left: -10px;
+}
+
+#customization-lwtheme-menu-header {
+  margin-top: -10px;
+  border-bottom: 1px solid hsla(210,4%,10%,.05);
+}
+
+#customization-lwtheme-menu-recommended {
+  border-top: 1px solid hsla(210,4%,10%,.05);
+  border-bottom: 1px solid hsla(210,4%,10%,.05);
+}
+
+#customization-lwtheme-menu-footer {
+  border-top: 1px solid hsla(210,4%,10%,.05);
+  margin-bottom: -10px;
+}
+
+.customization-lwtheme-menu-footeritem {
+  -moz-appearance: none;
+  -moz-box-flex: 1;
+  color: hsl(0,0%,50%);
+  border: 1px solid transparent;
+  padding: 10px;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.customization-lwtheme-menu-footeritem:hover {
+  background-color: hsla(210,4%,10%,.15);
+}
+
+#customization-lwtheme-menu-footer:not(:hover) > .customization-lwtheme-menu-footeritem:first-child {
+  -moz-border-end: 1px solid hsla(210,4%,10%,.15);
+}
+
+#customization-lwtheme-menu-footer:hover > .customization-lwtheme-menu-footeritem:first-child {
+  -moz-border-end-color: transparent;
+}
+
 %include customizeTip.inc.css

toolkit/mozapps/extensions/LightweightThemeManager.jsm

@@ -398,6 +398,8 @@ this.LightweightThemeManager = {
 function AddonWrapper(aTheme) {
   this.__defineGetter__("id", function AddonWrapper_idGetter() aTheme.id + ID_SUFFIX);
   this.__defineGetter__("type", function AddonWrapper_typeGetter() ADDON_TYPE);
+  this.__defineGetter__("headerURL", function AddonWrapper_headerURLGetter() aTheme.headerURL);
+  this.__defineGetter__("footerURL", function AddonWrapper_footerURLGetter() aTheme.footerURL);
   this.__defineGetter__("isActive", function AddonWrapper_isActiveGetter() {
     let current = LightweightThemeManager.currentTheme;
     if (current)
@@ -623,7 +625,7 @@ function _sanitizeTheme(aData, aBaseURI, aLocal) {
   if (!aData || typeof aData != "object")
     return null;
 
-  var resourceProtocols = ["http", "https"];
+  var resourceProtocols = ["http", "https", "resource"];
   if (aLocal)
     resourceProtocols.push("file");
   var resourceProtocolExp = new RegExp("^(" + resourceProtocols.join("|") + "):");
@@ -754,7 +756,7 @@ function _getLocalImageURI(localFileName) {
 }
 
 function _persistImage(sourceURL, localFileName, successCallback) {
-  if (/^file:/.test(sourceURL))
+  if (/^(file|resource):/.test(sourceURL))
     return;
 
   var targetURI = _getLocalImageURI(localFileName);