Bug 664149 - Add a menu pop-up button for tablet mode [r=mfinkle]

mobile/chrome/content/AppMenu.js

@@ -4,6 +4,11 @@ var AppMenu = {
     return this.panel = document.getElementById("appmenu");
   },
 
+  get popup() {
+    delete this.popup;
+    return this.popup = document.getElementById("appmenu-popup");
+  },
+
   shouldShow: function appmenu_shouldShow(aElement) {
     return !aElement.hidden;
   },
@@ -15,39 +20,81 @@ var AppMenu = {
     if (BrowserUI.activePanel || BrowserUI.isPanelVisible() || modals > 0 || BrowserUI.activeDialog)
       return;
 
-    let shown = 0;
-    let lastShown = null;
-    this.overflowMenu = [];
-    let childrenCount = this.panel.childElementCount;
-    for (let i = 0; i < childrenCount; i++) {
-      if (this.shouldShow(this.panel.children[i])) {
-        if (shown == 6 && this.overflowMenu.length == 0) {
-          // if we are trying to show more than 6 elements fall back to showing a more button
-          lastShown.removeAttribute("show");
-          this.overflowMenu.push(lastShown);
-          this.panel.appendChild(this.createMoreButton());
-        }
-        if (this.overflowMenu.length > 0) {
-          this.overflowMenu.push(this.panel.children[i]);
-        } else {
-          lastShown = this.panel.children[i];
-          lastShown.setAttribute("show", shown);
-          shown++;
-        }
-      }
-    }
-
-    this.panel.setAttribute("count", shown);
-    this.panel.hidden = false;
+    // Figure if we should show a menu-list or a pop-up menu
+    let menuButton = document.getElementById("tool-menu");
+    let listFormat = (getComputedStyle(menuButton).visibility == "visible");
 
     addEventListener("keypress", this, true);
 
-    BrowserUI.lockToolbar();
-    BrowserUI.pushPopup(this, [this.panel, Elements.toolbarContainer]);
+    if (listFormat) {
+      let listbox = document.getElementById("appmenu-popup-commands");
+      while (listbox.firstChild)
+        listbox.removeChild(listbox.firstChild);
+
+      let childrenCount = this.panel.childElementCount;
+      for (let i = 0; i < childrenCount; i++) {
+        let child = this.panel.children[i];
+
+        if (!this.shouldShow(child))
+          continue;
+
+        child.setAttribute("show", true);
+
+        let item = document.createElement("richlistitem");
+        item.setAttribute("class", "appmenu-button");
+        item.onclick = function() { child.click(); }
+
+        let label = document.createElement("label");
+        label.setAttribute("value", child.label);
+        item.appendChild(label);
+
+        listbox.appendChild(item);
+      }
+
+      this.popup.top = menuButton.getBoundingClientRect().bottom;
+
+      let chromeReg = Cc["@mozilla.org/chrome/chrome-registry;1"].getService(Ci.nsIXULChromeRegistry);
+      this.popup.setAttribute(chromeReg.isLocaleRTL("global") ? "left" : "right", 0);
+
+      this.popup.hidden = false;
+      this.popup.anchorTo(menuButton);
+
+      BrowserUI.lockToolbar();
+      BrowserUI.pushPopup(this, [this.popup, menuButton]);
+    } else {
+      let shown = 0;
+      let lastShown = null;
+      this.overflowMenu = [];
+      let childrenCount = this.panel.childElementCount;
+      for (let i = 0; i < childrenCount; i++) {
+        if (this.shouldShow(this.panel.children[i])) {
+          if (shown == 6 && this.overflowMenu.length == 0) {
+            // if we are trying to show more than 6 elements fall back to showing a more button
+            lastShown.removeAttribute("show");
+            this.overflowMenu.push(lastShown);
+            this.panel.appendChild(this.createMoreButton());
+          }
+          if (this.overflowMenu.length > 0) {
+            this.overflowMenu.push(this.panel.children[i]);
+          } else {
+            lastShown = this.panel.children[i];
+            lastShown.setAttribute("show", shown);
+            shown++;
+          }
+        }
+      }
+
+      this.panel.setAttribute("count", shown);
+      this.panel.hidden = false;
+
+      BrowserUI.lockToolbar();
+      BrowserUI.pushPopup(this, [this.panel, Elements.toolbarContainer]);
+    }
   },
 
   hide: function hide() {
     this.panel.hidden = true;
+    this.popup.hidden = true;
     let moreButton = document.getElementById("appmenu-more-button");
     if (moreButton)
       moreButton.parentNode.removeChild(moreButton);
@@ -64,7 +111,7 @@ var AppMenu = {
   },
 
   toggle: function toggle() {
-    this.panel.hidden ? this.show() : this.hide();
+    (this.panel.hidden && this.popup.hidden) ? this.show() : this.hide();
   },
 
   handleEvent: function handleEvent(aEvent) {

mobile/chrome/content/browser.xul

@@ -261,6 +261,7 @@
                     </hbox>
                   </hbox>
                   <toolbarbutton id="tool-star2" class="tool-star button-actionbar" command="cmd_star"/>
+                  <toolbarbutton id="tool-menu" class="button-actionbar" command="cmd_menu"/>
                   <toolbarbutton id="tool-tabs" class="button-actionbar" command="cmd_showTabs"/>
 #ifndef ANDROID
                   <toolbarbutton id="tool-app-close" class="urlbar-button" command="cmd_close"/>
@@ -389,6 +390,10 @@
       </dialog>
     </box>
 
+    <arrowbox id="appmenu-popup" hidden="true">
+      <richlistbox id="appmenu-popup-commands"/>
+    </arrowbox>
+
     <box id="panel-container" hidden="true" class="window-width window-height panel-dark"
          style="-moz-stack-sizing: ignore" left="10000">
       <box id="panel-container-inner" flex="1" class="panel-dark">

mobile/themes/core/browser.css

@@ -374,6 +374,10 @@ toolbarbutton.urlbar-button {
   list-style-image: url("chrome://browser/skin/images/settings-default-hdpi.png");
 }
 
+#tool-menu {
+  list-style-image: url("chrome://browser/skin/images/menu-hdpi.png");
+}
+
 %ifndef ANDROID
 /* MAEMO (and desktop) only */
 .panel-close {

mobile/themes/core/jar.mn

@@ -76,6 +76,7 @@ chrome.jar:
   skin/images/allpages-48.png               (images/allpages-48.png)
   skin/images/history-48.png                (images/history-48.png)
   skin/images/tabs-hdpi.png                 (images/tabs-hdpi.png)
+  skin/images/menu-hdpi.png                 (images/menu-hdpi.png)
   skin/images/bookmark-default-hdpi.png     (images/bookmark-default-hdpi.png)
   skin/images/bookmarks-48.png              (images/bookmarks-48.png)
   skin/images/bookmark-starred-hdpi.png     (images/bookmark-starred-hdpi.png)
@@ -254,6 +255,7 @@ chrome.jar:
   skin/gingerbread/images/handle-start.png              (gingerbread/images/handle-start.png)
   skin/gingerbread/images/handle-end.png                (gingerbread/images/handle-end.png)
   skin/gingerbread/images/tabs-hdpi.png                 (images/tabs-hdpi.png)
+  skin/gingerbread/images/menu-hdpi.png                 (images/menu-hdpi.png)
   skin/gingerbread/images/errorpage-warning.png         (images/errorpage-warning.png)
   skin/gingerbread/images/errorpage-larry-white.png     (images/errorpage-larry-white.png)
   skin/gingerbread/images/errorpage-larry-black.png     (images/errorpage-larry-black.png)
@@ -383,6 +385,7 @@ chrome.jar:
   skin/honeycomb/images/handle-start.png              (images/handle-start.png)
   skin/honeycomb/images/handle-end.png                (images/handle-end.png)
   skin/honeycomb/images/tabs-hdpi.png                 (images/tabs-hdpi.png)
+  skin/honeycomb/images/menu-hdpi.png                 (images/menu-hdpi.png)
   skin/honeycomb/images/errorpage-warning.png         (images/errorpage-warning.png)
   skin/honeycomb/images/errorpage-larry-white.png     (images/errorpage-larry-white.png)
   skin/honeycomb/images/errorpage-larry-black.png     (images/errorpage-larry-black.png)