Bug 1374048 - Show the sidebar extension icon in the header. r=Gijs, ui-r=shorlander.

MozReview-Commit-ID: 3FLYauvCs8E

--HG--
extra : rebase_source : 34e979c2670c162778ad8c31db7791c0c705bcdd

browser/base/content/browser-sidebar.js

@@ -229,6 +229,15 @@ var SidebarUI = {
     }
   },
 
+  /**
+   * Fire a "SidebarShown" event on the sidebar to give any interested parties
+   * a chance to update the button or whatever.
+   */
+  _fireShowEvent() {
+    let event = new CustomEvent("SidebarShown", {bubbles: true});
+    this._switcherTarget.dispatchEvent(event);
+  },
+
   /**
    * Fire a "SidebarFocused" event on the sidebar's |window| to give the sidebar
    * a chance to adjust focus as needed. An additional event is needed, because
@@ -372,11 +381,17 @@ var SidebarUI = {
           sidebarOnLoad(event);
 
           resolve();
+
+          // Now that the currentId is updated, fire a show event.
+          this._fireShowEvent();
         }, {capture: true, once: true});
       } else {
         // Older code handled this case, so we do it too.
         this._fireFocusedEvent();
         resolve();
+
+        // Now that the currentId is updated, fire a show event.
+        this._fireShowEvent();
       }
 
       let selBrowser = gBrowser.selectedBrowser;

browser/base/content/browser.css

@@ -1387,4 +1387,19 @@ toolbarpaletteitem[place="palette"][hidden] {
   display: none;
 }
 
+/* WebExtension Sidebars */
+#sidebar-box[sidebarcommand$="-sidebar-action"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
+  list-style-image: var(--webextension-menuitem-image, inherit);
+  -moz-context-properties: fill;
+  fill: currentColor;
+  width: 16px;
+  height: 16px;
+}
+
+@media (min-resolution: 1.1dppx) {
+  #sidebar-box[sidebarcommand$="-sidebar-action"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
+    list-style-image: var(--webextension-menuitem-image-2x, inherit);
+  }
+}
+
 %include theme-vars.inc.css

browser/components/extensions/ext-sidebarAction.js

@@ -70,6 +70,23 @@ this.sidebarAction = class extends ExtensionAPI {
     };
     windowTracker.addOpenListener(this.windowOpenListener);
 
+    this.updateHeader = (event) => {
+      let window = event.target.ownerGlobal;
+      let details = this.tabContext.get(window.gBrowser.selectedTab);
+      let header = window.document.getElementById("sidebar-switcher-target");
+      if (window.SidebarUI.currentID === this.id) {
+        this.setMenuIcon(header, details);
+      }
+    };
+
+    this.windowCloseListener = (window) => {
+      let header = window.document.getElementById("sidebar-switcher-target");
+      if (header) {
+        header.removeEventListener("SidebarShown", this.updateHeader);
+      }
+    };
+    windowTracker.addCloseListener(this.windowCloseListener);
+
     sidebarActionMap.set(extension, this);
   }
 
@@ -105,8 +122,11 @@ this.sidebarAction = class extends ExtensionAPI {
       if (broadcaster) {
         broadcaster.remove();
       }
+      let header = document.getElementById("sidebar-switcher-target");
+      header.removeEventListener("SidebarShown", this.updateHeader);
     }
     windowTracker.removeOpenListener(this.windowOpenListener);
+    windowTracker.removeCloseListener(this.windowCloseListener);
   }
 
   build() {
@@ -165,6 +185,9 @@ this.sidebarAction = class extends ExtensionAPI {
     // get the command id we pass to SidebarUI.
     broadcaster.setAttribute("oncommand", "SidebarUI.show(this.getAttribute('observes'))");
 
+    let header = document.getElementById("sidebar-switcher-target");
+    header.addEventListener("SidebarShown", this.updateHeader);
+
     // Insert a menuitem for View->Show Sidebars.
     let menuitem = document.createElementNS(XUL_NS, "menuitem");
     menuitem.setAttribute("id", this.menuId);
@@ -232,6 +255,8 @@ this.sidebarAction = class extends ExtensionAPI {
     // Update the sidebar if this extension is the current sidebar.
     if (SidebarUI.currentID === this.id) {
       SidebarUI.title = title;
+      let header = document.getElementById("sidebar-switcher-target");
+      this.setMenuIcon(header, tabData);
       if (SidebarUI.isOpen && urlChanged) {
         SidebarUI.show(this.id);
       }