Bug 868636: new Help subview panel. r=jaws

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

@@ -44,8 +44,10 @@
       <vbox id="PanelUI-mainView-spring" flex="1"/>
 
       <footer class="PanelUI-footer" align="center">
+        <!-- The parentNode is used so that the footer is presented as the anchor
+             instead of just the button being the anchor. -->
         <toolbarbutton id="PanelUI-help-btn" label="&helpMenu.label;"
-                       command="openHelpLink('firefox-help');"/>
+                       onclick="PanelUI.showHelpView(this.parentNode);"/>
         <spacer flex="1"/>
         <toolbarbutton id="PanelUI-customize-btn" label="&appMenuCustomize.label;"
                        command="cmd_CustomizeToolbars"/>
@@ -60,5 +62,10 @@
              class="text-link"
              onclick="PlacesCommandHook.showPlacesOrganizer('History'); PanelUI.hide();"/>
     </panelsubview>
+
+    <panelsubview id="PanelUI-help" flex="1">
+      <label value="&helpMenu.label;"/>
+      <vbox id="PanelUI-helpItems"/>
+    </panelsubview>
   </panelmultiview>
 </panel>

browser/components/customizableui/content/panelUI.js

@@ -20,6 +20,7 @@ const PanelUI = {
       contents: "PanelUI-contents",
       mainView: "PanelUI-mainView",
       multiView: "PanelUI-multiView",
+      helpView: "PanelUI-help",
       menuButton: "PanelUI-menu-button",
       panel: "PanelUI-popup",
       zoomResetButton: "PanelUI-zoomReset-btn"
@@ -46,12 +47,17 @@ const PanelUI = {
     Services.obs.addObserver(this, "browser-fullZoom:zoomReset", false);
 
     this._updateZoomResetButton();
+
+    this.helpView.addEventListener("ViewShowing", this._onHelpViewShow, false);
+    this.helpView.addEventListener("ViewHiding", this._onHelpViewHide, false);
   },
 
   uninit: function() {
     for (let event of this.kEvents) {
       this.panel.removeEventListener(event, this);
     }
+    this.helpView.removeEventListener("ViewShowing", this._onHelpViewShow);
+    this.helpView.removeEventListener("ViewHiding", this._onHelpViewHide);
     Services.obs.removeObserver(this, "browser-fullZoom:zoomChange");
     Services.obs.removeObserver(this, "browser-fullZoom:zoomReset");
   },
@@ -137,6 +143,14 @@ const PanelUI = {
     this.multiView.showMainView();
   },
 
+  /**
+   * Switch the panel to the help view if it's not already
+   * in that view.
+   */
+  showHelpView: function(aAnchor) {
+    this.multiView.showSubView("PanelUI-help", aAnchor);
+  },
+
   /**
    * Shows a subview in the panel with a given ID.
    *
@@ -192,5 +206,50 @@ const PanelUI = {
   _updateZoomResetButton: function() {
     this.zoomResetButton.setAttribute("label", gNavigatorBundle
       .getFormattedString("zoomReset.label", [Math.floor(ZoomManager.zoom * 100)]));
+  },
+
+  // Button onclick handler which hides the whole PanelUI
+  _onHelpViewClick: function(aEvent) {
+    if (aEvent.button == 0 && !aEvent.target.hasAttribute("disabled")) {
+      PanelUI.hide();
+    }
+  },
+
+  _onHelpViewShow: function(aEvent) {
+    // Call global menu setup function
+    buildHelpMenu();
+
+    let helpMenu = document.getElementById("menu_HelpPopup");
+    let items = this.getElementsByTagName("vbox")[0];
+    let attrs = ["oncommand", "onclick", "label", "key", "disabled"];
+    let NSXUL = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+
+    // Remove all buttons from the view
+    while (items.firstChild) {
+      items.removeChild(items.firstChild);
+    }
+
+    // Add the current set of menuitems of the Help menu to this view
+    let menuItems = Array.prototype.slice.call(helpMenu.getElementsByTagName("menuitem"));
+    let fragment = document.createDocumentFragment();
+    for (let node of menuItems) {
+      if (node.hidden)
+        continue;
+      let button = document.createElementNS(NSXUL, "toolbarbutton");
+      // Copy specific attributes from a menuitem of the Help menu
+      for (let attrName of attrs) {
+        if (!node.hasAttribute(attrName))
+          continue;
+        button.setAttribute(attrName, node.getAttribute(attrName));
+      }
+      fragment.appendChild(button);
+    }
+    items.appendChild(fragment);
+
+    this.addEventListener("click", PanelUI._onHelpViewClick, false);
+  },
+
+  _onHelpViewHide: function(aEvent) {
+    this.removeEventListener("click", PanelUI._onHelpViewClick);
   }
 };

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

@@ -220,6 +220,8 @@ panelsubview toolbarbutton:not([disabled]):-moz-any([open],[checked],:hover:acti
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
 }
 
+.PanelUI-footer.panel-multiview-anchor,
+.PanelUI-footer.panel-multiview-anchor > #PanelUI-help-btn,
 toolbarbutton.panel-multiview-anchor {
   background-color: Highlight;
   background-image: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0));