Bug 612193 - Move Find In Page, Share Page, and Save As PDF to app menu on Android [r=mbrubeck, wesj]

mobile/chrome/content/AppMenu.js

@@ -73,24 +73,10 @@ var AppMenu = {
   showAsList: function showAsList() {
     // allow menu to hide to remove the more button before we show the menulist
     setTimeout((function() {
-      this.menu.menupopup.children = this.overflowMenu;
-      MenuListHelperUI.show(this.menu);
+      AppMenuOverflow.show(this.overflowMenu);
     }).bind(this), 0)
   },
 
-  menu : {
-    id: "appmenu-menulist",
-    dispatchEvent: function(aEvent) {
-      let menuitem = AppMenu.overflowMenu[this.selectedIndex];
-      if (menuitem)
-        menuitem.click();
-    },
-    menupopup: {
-      hasAttribute: function(aAttr) { return false; }
-    },
-    selectedIndex: -1
-  },
-
   createMoreButton: function() {
     let button = document.createElement("toolbarbutton");
     button.setAttribute("id", "appmenu-more-button");
@@ -101,3 +87,45 @@ var AppMenu = {
     return button;
   }
 };
+
+
+var AppMenuOverflow = {
+  get container() {
+    delete this.container;
+    return this.container = document.getElementById("appmenu-overflow");
+  },
+  
+  get list() {
+    delete this.list;
+    return this.list = document.getElementById("appmenu-overflow-commands");
+  },
+  
+  show: function show(aList) {
+    let container = this.container;
+    let listbox = this.list;
+    while (listbox.firstChild)
+      listbox.removeChild(listbox.firstChild);
+
+    let children = aList;
+    for (let i = 0; i < children.length; i++) {
+      let child = children[i];
+      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);
+    }
+
+    container.hidden = false;
+    BrowserUI.pushPopup(this, [this.container]);
+  },
+
+  hide: function hide() {
+    this.container.hidden = true;
+    BrowserUI.popPopup(this);
+  }
+};

mobile/chrome/content/browser.xul

@@ -333,6 +333,7 @@
       </hbox>
 
       <hbox id="pageactions-container" class="window-width" hidden="true">
+#ifndef ANDROID
         <pageaction id="pageaction-findinpage" title="&pageactions.findInPage;"
           onclick="FindHelperUI.show();"/>
 #ifdef NS_PRINTING
@@ -341,6 +342,7 @@
 #endif
         <pageaction id="pageaction-share" title="&pageactions.share.page;"
           onclick="SharingUI.show(getBrowser().currentURI.spec, getBrowser().contentTitle);"/>
+#endif
         <pageaction id="pageaction-password" title="&pageactions.password.forget;"
           onclick="PageActions.forgetPassword(event);"/>
         <pageaction id="pageaction-reset" title="&pageactions.reset;"
@@ -677,6 +679,10 @@
       </vbox>
     </hbox>
 
+    <hbox id="appmenu-overflow" bottom="0" hidden="true" oncommand="AppMenu.hideOverflow();">
+      <richlistbox id="appmenu-overflow-commands" flex="1"/>
+    </hbox>
+
     <hbox id="appmenu" bottom="0" hidden="true" align="stretch" oncommand="AppMenu.hide();">
       <toolbarbutton class="appmenu-site-button appmenu-button"
         label="&appMenu.siteOptions;"
@@ -687,9 +693,20 @@
       <toolbarbutton class="appmenu-addons-button appmenu-button"
         label="&addonsHeader.label;"
         oncommand="BrowserUI.showPanel('addons-container');"/>
+      <toolbarbutton class="appmenu-share-button appmenu-button"
+        label="&pageactions.share.page;"
+        oncommand="SharingUI.show(getBrowser().currentURI.spec, getBrowser().contentTitle);"/>
+      <toolbarbutton class="appmenu-findinpage-button appmenu-button"
+        label="&pageactions.findInPage;"
+        oncommand="FindHelperUI.show();"/>
       <toolbarbutton class="appmenu-downloads-button appmenu-button"
         label="&downloadsHeader.label;"
         oncommand="BrowserUI.showPanel('downloads-container');"/>
+#ifdef NS_PRINTING
+      <toolbarbutton class="appmenu-saveas-button appmenu-button"
+        label="&pageactions.saveas.pdf;"
+        oncommand="PageActions.savePageAsPDF();"/>
+#endif
     </hbox>
   </stack>
 

mobile/themes/core/browser.css

@@ -1094,8 +1094,8 @@ pageaction {
   -moz-border-left-colors: white;
   border-style: solid;
   border-width: @border_width_tiny@ !important;
-  height: @touch_button_large@;
-  min-height: @touch_button_large@;
+  height: @touch_button_xlarge@;
+  min-height: @touch_button_xlarge@;
   width: 100%;
   min-width: @touch_action_minwidth@; /* keep the button from being too narrow */
 }
@@ -1354,28 +1354,36 @@ pageaction:not([image]) > hbox >.pageaction-image {
   margin-bottom: @margin_small@ !important;
 }
 
-richlistitem.appmenu-site-button > image,
 .appmenu-site-button {
   list-style-image: url("chrome://browser/skin/images/appmenu-site-hdpi.png");
 }
 
-richlistitem.appmenu-addons-button > image,
 .appmenu-addons-button {
   list-style-image: url("chrome://browser/skin/images/appmenu-addons-hdpi.png");
 }
 
-richlistitem.appmenu-preferences-button > image,
 .appmenu-preferences-button {
   list-style-image: url("chrome://browser/skin/images/appmenu-preferences-hdpi.png");
 }
 
-richlistitem.appmenu-downloads-button > image,
 .appmenu-downloads-button {
   list-style-image: url("chrome://browser/skin/images/appmenu-downloads-hdpi.png");
 }
 
+.appmenu-findinpage-button {
+  list-style-image: url("chrome://browser/skin/images/appmenu-findinpage-hdpi.png");
+}
+
+.appmenu-saveas-button {
+  list-style-image: url("chrome://browser/skin/images/appmenu-downloads-hdpi.png");
+}
+
+.appmenu-share-button {
+  list-style-image: url("chrome://browser/skin/images/appmenu-share-hdpi.png");
+}
+
 #appmenu-more-button {
-  list-style-image: url("chrome://browser/skin/images/appmenu-site-hdpi.png");
+  list-style-image: url("chrome://browser/skin/images/appmenu-more-hdpi.png");
   display: none;
 }
 
@@ -1400,6 +1408,30 @@ richlistitem.appmenu-downloads-button > image,
   }
 }
 
+#appmenu-overflow {
+  background: rgba(255,255,255,0.95);
+  box-shadow: 0 @shadow_width_small@ @shadow_width_large@ @shadow_width_small@ black;
+  border-style: solid;
+  border-color: #6d6d6d;
+  border-width: @border_width_large@ @border_width_large@ 0 @border_width_large@;
+  margin: @margin_xxxnormal@ @margin_xxxnormal@ 0 @margin_xxxnormal@;
+}
+
+#appmenu-overflow-commands > .appmenu-button {
+  color: #000;
+  background: transparent;
+  font-size: @font_normal@ !important;
+  height: @touch_button_xlarge@;
+  min-height: @touch_button_xlarge@;
+  width: 100%; 
+  -moz-box-align: center;
+}
+
+#appmenu-overflow-commands > .appmenu-button:hover:active {
+  background-image: url("chrome://browser/skin/images/appmenu-active-hdpi.png");
+  background-size: 100% 100%;
+}
+
 /* Sync setup ------------------------------------------------------------- */
 .syncsetup-center {
   text-align: center;

mobile/themes/core/gingerbread/browser.css

@@ -1059,8 +1059,8 @@ pageaction {
   -moz-border-left-colors: white;
   border-style: solid;
   border-width: @border_width_tiny@ !important;
-  height: @touch_button_large@;
-  min-height: @touch_button_large@;
+  height: @touch_button_xlarge@;
+  min-height: @touch_button_xlarge@;
   width: 100%;
   min-width: @touch_action_minwidth@; /* keep the button from being too narrow */
 }
@@ -1329,28 +1329,36 @@ pageaction:not([image]) > hbox >.pageaction-image {
   margin-bottom: @margin_small@ !important;
 }
 
-richlistitem.appmenu-site-button > image,
 .appmenu-site-button {
   list-style-image: url("chrome://browser/skin/images/appmenu-site-hdpi.png");
 }
 
-richlistitem.appmenu-addons-button > image,
 .appmenu-addons-button {
   list-style-image: url("chrome://browser/skin/images/appmenu-addons-hdpi.png");
 }
 
-richlistitem.appmenu-preferences-button > image,
 .appmenu-preferences-button {
   list-style-image: url("chrome://browser/skin/images/appmenu-preferences-hdpi.png");
 }
 
-richlistitem.appmenu-downloads-button > image,
 .appmenu-downloads-button {
   list-style-image: url("chrome://browser/skin/images/appmenu-downloads-hdpi.png");
 }
 
+.appmenu-findinpage-button {
+  list-style-image: url("chrome://browser/skin/images/appmenu-findinpage-hdpi.png");
+}
+
+.appmenu-saveas-button {
+  list-style-image: url("chrome://browser/skin/images/appmenu-downloads-hdpi.png");
+}
+
+.appmenu-share-button {
+  list-style-image: url("chrome://browser/skin/images/appmenu-share-hdpi.png");
+}
+
 #appmenu-more-button {
-  list-style-image: url("chrome://browser/skin/images/appmenu-site-hdpi.png");
+  list-style-image: url("chrome://browser/skin/images/appmenu-more-hdpi.png");
   display: none;
 }
 
@@ -1375,6 +1383,29 @@ richlistitem.appmenu-downloads-button > image,
   }
 }
 
+#appmenu-overflow {
+  background: @color_background_default@;
+  border-style: solid;
+  border-color: @color_dialog_border@;
+  border-width: @border_width_small@ @border_width_small@ 0 @border_width_small@;
+  margin: @margin_xxxnormal@ @margin_xxxnormal@ 0 @margin_xxxnormal@;
+}
+
+#appmenu-overflow-commands > .appmenu-button {
+  color: @color_text_default@;
+  background: transparent;
+  font-size: @font_normal@ !important;
+  height: @touch_button_xlarge@;
+  min-height: @touch_button_xlarge@;
+  width: 100%; 
+  -moz-box-align: center;
+}
+
+#appmenu-overflow-commands > .appmenu-button:hover:active {
+  background-image: url("chrome://browser/skin/images/appmenu-active-hdpi.png");
+  background-size: 100% 100%;
+}
+
 /* Sync setup ------------------------------------------------------------- */
 .syncsetup-center {
   /* TODO: remove this dummy when we no longer use it in other themes */

mobile/themes/core/jar.mn

@@ -24,8 +24,10 @@ chrome.jar:
   skin/images/appmenu-addons-hdpi.png       (images/appmenu-addons-hdpi.png)
   skin/images/appmenu-active-hdpi.png       (images/appmenu-active-hdpi.png)
   skin/images/appmenu-downloads-hdpi.png    (images/appmenu-downloads-hdpi.png)
+  skin/images/appmenu-findinpage-hdpi.png   (images/appmenu-findinpage-hdpi.png)
   skin/images/appmenu-more-hdpi.png         (images/appmenu-more-hdpi.png)
   skin/images/appmenu-preferences-hdpi.png  (images/appmenu-preferences-hdpi.png)
+  skin/images/appmenu-share-hdpi.png        (images/appmenu-share-hdpi.png)
   skin/images/appmenu-site-hdpi.png         (images/appmenu-site-hdpi.png)
   skin/images/aboutBackground.jpg           (images/aboutBackground.jpg)
   skin/images/button-bg.png                 (images/button-bg.png)
@@ -142,8 +144,10 @@ chrome.jar:
   skin/gingerbread/images/appmenu-addons-hdpi.png       (gingerbread/images/appmenu-addons-hdpi.png)
   skin/gingerbread/images/appmenu-active-hdpi.png       (gingerbread/images/appmenu-active-hdpi.png)
   skin/gingerbread/images/appmenu-downloads-hdpi.png    (gingerbread/images/appmenu-downloads-hdpi.png)
+  skin/gingerbread/images/appmenu-findinpage-hdpi.png   (gingerbread/images/appmenu-findinpage-hdpi.png)
   skin/gingerbread/images/appmenu-more-hdpi.png         (gingerbread/images/appmenu-more-hdpi.png)
   skin/gingerbread/images/appmenu-preferences-hdpi.png  (gingerbread/images/appmenu-preferences-hdpi.png)
+  skin/gingerbread/images/appmenu-share-hdpi.png        (gingerbread/images/appmenu-share-hdpi.png)
   skin/gingerbread/images/appmenu-site-hdpi.png         (gingerbread/images/appmenu-site-hdpi.png)
   skin/gingerbread/images/aboutBackground.jpg           (gingerbread/images/aboutBackground.jpg)
   skin/gingerbread/images/button-bg.png                 (gingerbread/images/button-bg.png)
@@ -257,8 +261,10 @@ chrome.jar:
   skin/honeycomb/images/appmenu-addons-hdpi.png       (honeycomb/images/appmenu-addons-hdpi.png)
   skin/honeycomb/images/appmenu-active-hdpi.png       (honeycomb/images/appmenu-active-hdpi.png)
   skin/honeycomb/images/appmenu-downloads-hdpi.png    (honeycomb/images/appmenu-downloads-hdpi.png)
+  skin/honeycomb/images/appmenu-findinpage-hdpi.png   (honeycomb/images/appmenu-findinpage-hdpi.png)
   skin/honeycomb/images/appmenu-more-hdpi.png         (honeycomb/images/appmenu-more-hdpi.png)
   skin/honeycomb/images/appmenu-preferences-hdpi.png  (honeycomb/images/appmenu-preferences-hdpi.png)
+  skin/honeycomb/images/appmenu-share-hdpi.png        (honeycomb/images/appmenu-share-hdpi.png)
   skin/honeycomb/images/appmenu-site-hdpi.png         (honeycomb/images/appmenu-site-hdpi.png)
   skin/honeycomb/images/aboutBackground.jpg           (honeycomb/images/aboutBackground.jpg)
   skin/honeycomb/images/button-bg.png                 (honeycomb/images/button-bg.png)