Bug 1365637 place WE sidebars into the photon sidebar dropdown, r=Gijs,mattw

MozReview-Commit-ID: 3ZM9mXjEbWh

--HG--
extra : rebase_source : 9c59235156ddd58108524af520f6c4ca0fe26fb0

browser/base/content/browser.xul

@@ -321,6 +321,8 @@
          <observes element="viewTabsSidebar" attribute="checked"/>
        </toolbarbutton>
       <toolbarseparator/>
+      <vbox id="sidebar-extensions"></vbox>
+      <toolbarseparator/>
       <toolbarbutton id="sidebar-reverse-position"
                      class="subviewbutton"
                      oncommand="SidebarUI.reversePosition()"/>

browser/components/extensions/ext-sidebarAction.js

@@ -42,6 +42,7 @@ this.sidebarAction = class extends ExtensionAPI {
     let widgetId = makeWidgetId(extension.id);
     this.id = `${widgetId}-sidebar-action`;
     this.menuId = `menu_${this.id}`;
+    this.buttonId = `button_${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.
@@ -90,6 +91,10 @@ this.sidebarAction = class extends ExtensionAPI {
       if (menu) {
         menu.remove();
       }
+      let button = document.getElementById(this.buttonId);
+      if (button) {
+        button.remove();
+      }
       let broadcaster = document.getElementById(this.id);
       if (broadcaster) {
         broadcaster.remove();
@@ -152,17 +157,25 @@ this.sidebarAction = class extends ExtensionAPI {
 
     // 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'))");
+    broadcaster.setAttribute("oncommand", "SidebarUI.show(this.getAttribute('observes'))");
 
+    // Insert a menuitem for View->Show Sidebars.
     let menuitem = document.createElementNS(XUL_NS, "menuitem");
     menuitem.setAttribute("id", this.menuId);
     menuitem.setAttribute("observes", this.id);
     menuitem.setAttribute("class", "menuitem-iconic webextension-menuitem");
-
     this.setMenuIcon(menuitem, details);
 
+    // Insert a toolbarbutton for the sidebar dropdown selector.
+    let toolbarbutton = document.createElementNS(XUL_NS, "toolbarbutton");
+    toolbarbutton.setAttribute("id", this.buttonId);
+    toolbarbutton.setAttribute("observes", this.id);
+    toolbarbutton.setAttribute("class", "subviewbutton subviewbutton-iconic webextension-menuitem");
+    this.setMenuIcon(toolbarbutton, details);
+
     document.getElementById("mainBroadcasterSet").appendChild(broadcaster);
     document.getElementById("viewSidebarMenu").appendChild(menuitem);
+    document.getElementById("sidebar-extensions").appendChild(toolbarbutton);
 
     return menuitem;
   }
@@ -207,6 +220,9 @@ this.sidebarAction = class extends ExtensionAPI {
 
     this.setMenuIcon(menu, tabData);
 
+    let button = document.getElementById(this.buttonId);
+    this.setMenuIcon(button, tabData);
+
     // Update the sidebar if this extension is the current sidebar.
     if (SidebarUI.currentID === this.id) {
       SidebarUI.title = title;

browser/components/extensions/test/browser/browser_ext_sidebarAction_windows.js

@@ -38,7 +38,9 @@ add_task(async function sidebar_windows() {
   ok(!document.getElementById("sidebar-box").hidden, "sidebar box is visible in first window");
   // Check that the menuitem has our image styling.
   let elements = document.getElementsByClassName("webextension-menuitem");
-  is(elements.length, 1, "have one menuitem");
+  // ui is in flux, at time of writing we potentially have 3 menuitems, later
+  // it may be two or one, just make sure one is there.
+  ok(elements.length > 0, "have a menuitem");
   let style = elements[0].getAttribute("style");
   ok(style.includes("webextension-menuitem-image"), "this menu has style");
 
@@ -52,7 +54,7 @@ add_task(async function sidebar_windows() {
   ok(!win.document.getElementById("sidebar-box").hidden, "sidebar box is visible in second window");
   // Check that the menuitem has our image styling.
   elements = win.document.getElementsByClassName("webextension-menuitem");
-  is(elements.length, 1, "have one menuitem");
+  ok(elements.length > 0, "have a menuitem");
   style = elements[0].getAttribute("style");
   ok(style.includes("webextension-menuitem-image"), "this menu has style");
 

browser/themes/shared/sidebar.inc.css

@@ -89,6 +89,10 @@
   min-width: 190px;
 }
 
+#sidebar-extensions:empty + toolbarseparator {
+  display: none;
+}
+
 %ifndef XP_MACOSX
 /* Allow room for the checkbox drawn as a background image at the start of the toolbarbutton */
 #sidebarMenu-popup .subviewbutton-iconic > .toolbarbutton-icon {