Bug 1330369 - Part 2 - Add browser_style support to ext-sidebar.js r=kmag

MozReview-Commit-ID: AIGuVv98HGR

--HG--
extra : rebase_source : 7eceec18bfb1f3fca44335e9bafa60e3470951da

browser/base/content/webext-panels.js

@@ -12,12 +12,12 @@ XPCOMUtils.defineLazyModuleGetter(this, "ExtensionParent",
 Cu.import("resource://gre/modules/ExtensionUtils.jsm");
 
 var {
+  extensionStylesheets,
   promiseEvent,
 } = ExtensionUtils;
 
 const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 
-
 function getBrowser(sidebar) {
   let browser = document.getElementById("webext-panels-browser");
   if (browser) {
@@ -54,6 +54,15 @@ function getBrowser(sidebar) {
   return readyPromise.then(() => {
     browser.messageManager.loadFrameScript("chrome://browser/content/content.js", false);
     ExtensionParent.apiManager.emit("extension-browser-inserted", browser);
+
+    if (sidebar.browserStyle) {
+      browser.messageManager.loadFrameScript(
+        "chrome://extensions/content/ext-browser-content.js", false);
+
+      browser.messageManager.sendAsyncMessage("Extension:InitBrowser", {
+        stylesheets: extensionStylesheets,
+      });
+    }
     return browser;
   });
 }
@@ -63,6 +72,7 @@ function loadWebPanel() {
   let sidebar = {
     uri: sidebarURI.searchParams.get("panel"),
     remote: sidebarURI.searchParams.get("remote"),
+    browserStyle: sidebarURI.searchParams.get("browser-style"),
   };
   getBrowser(sidebar).then(browser => {
     browser.loadURI(sidebar.uri);

browser/components/extensions/ext-sidebarAction.js

@@ -43,6 +43,10 @@ this.sidebarAction = class extends ExtensionAPI {
     this.id = `${widgetId}-sidebar-action`;
     this.menuId = `menu_${this.id}`;
 
+    // We default browser_style to true because this is a new API and
+    // we therefore don't need to worry about breaking existing add-ons.
+    this.browserStyle = options.browser_style || options.browser_style === null;
+
     this.defaults = {
       enabled: true,
       title: options.default_title || extension.name,
@@ -120,10 +124,17 @@ this.sidebarAction = class extends ExtensionAPI {
   }
 
   sidebarUrl(panel) {
+    let url = `${sidebarURL}?panel=${encodeURIComponent(panel)}`;
+
     if (this.extension.remote) {
-      return `${sidebarURL}?remote=1&panel=${encodeURIComponent(panel)}`;
+      url += "&remote=1";
     }
-    return `${sidebarURL}?&panel=${encodeURIComponent(panel)}`;
+
+    if (this.browserStyle) {
+      url += "&browser-style=1";
+    }
+
+    return url;
   }
 
   createMenuItem(window, details) {
@@ -138,6 +149,7 @@ this.sidebarAction = class extends ExtensionAPI {
     broadcaster.setAttribute("group", "sidebar");
     broadcaster.setAttribute("label", details.title);
     broadcaster.setAttribute("sidebarurl", this.sidebarUrl(details.panel));
+
     // oncommand gets attached to menuitem, so we use the observes attribute to
     // get the command id we pass to SidebarUI.
     broadcaster.setAttribute("oncommand", "SidebarUI.toggle(this.getAttribute('observes'))");

browser/components/extensions/schemas/sidebar_action.json

@@ -22,6 +22,10 @@
                 "$ref": "IconPath",
                 "optional": true
               },
+              "browser_style": {
+                "type": "boolean",
+                "optional": true
+              },
               "default_panel": {
                 "type": "string",
                 "format": "strictRelativeUrl",

toolkit/components/extensions/ext-browser-content.js

@@ -71,6 +71,9 @@ const BrowserListener = {
     this.maxWidth = maxWidth;
     this.maxHeight = maxHeight;
 
+    this.blockParser = blockParser;
+    this.needsResize = fixedWidth || maxHeight || maxWidth;
+
     this.oldBackground = null;
 
     if (allowScriptsToClose) {
@@ -80,27 +83,30 @@ const BrowserListener = {
     // Force external links to open in tabs.
     docShell.isAppTab = true;
 
-    if (blockParser) {
+    if (this.blockParser) {
       this.blockingPromise = new Promise(resolve => {
         this.unblockParser = resolve;
       });
+      addEventListener("DOMDocElementInserted", this, true);
     }
 
-    addEventListener("DOMWindowCreated", this, true);
     addEventListener("load", this, true);
+    addEventListener("DOMWindowCreated", this, true);
     addEventListener("DOMContentLoaded", this, true);
     addEventListener("DOMWindowClose", this, true);
     addEventListener("MozScrolledAreaChanged", this, true);
-    addEventListener("DOMDocElementInserted", this, true);
   },
 
   destroy() {
-    removeEventListener("DOMWindowCreated", this, true);
+    if (this.blockParser) {
+      removeEventListener("DOMDocElementInserted", this, true);
+    }
+
     removeEventListener("load", this, true);
+    removeEventListener("DOMWindowCreated", this, true);
     removeEventListener("DOMContentLoaded", this, true);
     removeEventListener("DOMWindowClose", this, true);
     removeEventListener("MozScrolledAreaChanged", this, true);
-    removeEventListener("DOMDocElementInserted", this, true);
   },
 
   receiveMessage({name, data}) {
@@ -147,7 +153,10 @@ const BrowserListener = {
       case "DOMContentLoaded":
         if (event.target === content.document) {
           sendAsyncMessage("Extension:BrowserContentLoaded", {url: content.location.href});
-          this.handleDOMChange(true);
+
+          if (this.needsResize) {
+            this.handleDOMChange(true);
+          }
         }
         break;
 
@@ -167,6 +176,10 @@ const BrowserListener = {
           break;
         }
 
+        if (!this.needsResize) {
+          break;
+        }
+
         // We use a capturing listener, so we get this event earlier than any
         // load listeners in the content page. Resizing after a timeout ensures
         // that we calculate the size after the entire event cycle has completed
@@ -187,7 +200,9 @@ const BrowserListener = {
         break;
 
       case "MozScrolledAreaChanged":
-        this.handleDOMChange();
+        if (this.needsResize) {
+          this.handleDOMChange();
+        }
         break;
     }
   },