Bug 680441 - Update style of more menu on Honeycomb. r=mfinkle

mobile/chrome/content/AppMenu.js

@@ -1,4 +1,5 @@
 var AppMenu = {
+  offset: 10,
   get panel() {
     delete this.panel;
     return this.panel = document.getElementById("appmenu");
@@ -27,10 +28,14 @@ var AppMenu = {
     addEventListener("keypress", this, true);
 
     if (listFormat) {
-      let listbox = document.getElementById("appmenu-popup-commands");
+      let listbox = document.getElementById("appmenu-popup-appcommands");
       while (listbox.firstChild)
         listbox.removeChild(listbox.firstChild);
 
+      let siteCommandsBox = document.getElementById("appmenu-popup-sitecommands");
+      while (siteCommandsBox.firstChild)
+        siteCommandsBox.removeChild(siteCommandsBox.firstChild);
+
       let childrenCount = this.panel.childElementCount;
       for (let i = 0; i < childrenCount; i++) {
         let child = this.panel.children[i];
@@ -41,20 +46,23 @@ var AppMenu = {
         child.setAttribute("show", true);
 
         let item = document.createElement("richlistitem");
-        item.setAttribute("class", "appmenu-button");
+        item.setAttribute("class", child.className);
         item.onclick = function() { child.click(); }
 
         let label = document.createElement("label");
         label.setAttribute("value", child.label);
         item.appendChild(label);
 
-        listbox.appendChild(item);
+        if (item.classList.contains("appmenu-pageaction"))
+          siteCommandsBox.appendChild(item);
+        else
+          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.setAttribute(chromeReg.isLocaleRTL("global") ? "left" : "right", this.offset);
 
       this.popup.hidden = false;
       this.popup.anchorTo(menuButton);

mobile/chrome/content/browser.xul

@@ -392,7 +392,8 @@
     </box>
 
     <arrowbox id="appmenu-popup" hidden="true">
-      <richlistbox id="appmenu-popup-commands"/>
+      <box id="appmenu-popup-sitecommands"/>
+      <richlistbox id="appmenu-popup-appcommands"/>
     </arrowbox>
 
     <box id="panel-container" hidden="true" class="window-width window-height panel-dark"
@@ -714,7 +715,7 @@
     </hbox>
 
     <hbox id="appmenu" bottom="0" hidden="true" align="stretch" oncommand="AppMenu.hide();">
-      <toolbarbutton class="appmenu-site-button appmenu-button"
+      <toolbarbutton class="appmenu-site-button appmenu-button appmenu-pageaction"
         label="&appMenu.siteOptions;"
         oncommand="getIdentityHandler().show(); event.stopPropagation();"/>
       <toolbarbutton class="appmenu-preferences-button appmenu-button"
@@ -723,17 +724,17 @@
       <toolbarbutton class="appmenu-addons-button appmenu-button"
         label="&addonsHeader.label;"
         oncommand="BrowserUI.showPanel('addons-container');"/>
-      <toolbarbutton class="appmenu-share-button appmenu-button"
+      <toolbarbutton class="appmenu-share-button appmenu-button appmenu-pageaction"
         label="&pageactions.share.page;"
         oncommand="SharingUI.show(getBrowser().currentURI.spec, getBrowser().contentTitle);"/>
-      <toolbarbutton class="appmenu-findinpage-button appmenu-button"
+      <toolbarbutton class="appmenu-findinpage-button appmenu-button appmenu-pageaction"
         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"
+      <toolbarbutton class="appmenu-saveas-button appmenu-button appmenu-pageaction"
         label="&pageactions.saveas.pdf;"
         oncommand="PageActions.savePageAsPDF();"/>
 #endif

mobile/themes/core/browser.css

@@ -1470,7 +1470,7 @@ setting {
   margin: @margin_xxxnormal@ @margin_xxxnormal@ 0 @margin_xxxnormal@;
 }
 
-#appmenu-overflow-commands > .appmenu-button {
+#appmenu-overflow-appcommands > .appmenu-button {
   color: #000;
   background: transparent;
   font-size: @font_normal@ !important;
@@ -1480,11 +1480,15 @@ setting {
   -moz-box-align: center;
 }
 
-#appmenu-overflow-commands > .appmenu-button:hover:active {
+#appmenu-overflow-appcommands > .appmenu-button:hover:active {
   background-image: url("chrome://browser/skin/images/appmenu-active-hdpi.png");
   background-size: 100% 100%;
 }
 
+#appmenu-popup-sitecommands {
+  -moz-box-orient: vertical;
+}
+
 /* Sync setup ------------------------------------------------------------- */
 .syncsetup-center {
   text-align: center;

mobile/themes/core/gingerbread/browser.css

@@ -1438,7 +1438,7 @@ setting {
   margin: @margin_xxxnormal@ @margin_xxxnormal@ 0 @margin_xxxnormal@;
 }
 
-#appmenu-overflow-commands > .appmenu-button {
+#appmenu-overflow-appcommands > .appmenu-button {
   color: @color_text_default@;
   background: transparent;
   font-size: @font_normal@ !important;
@@ -1448,11 +1448,19 @@ setting {
   -moz-box-align: center;
 }
 
-#appmenu-overflow-commands > .appmenu-button:hover:active {
+#appmenu-overflow-appcommands > .appmenu-button:hover:active {
   background-image: url("chrome://browser/skin/images/appmenu-active-hdpi.png");
   background-size: 100% 100%;
 }
 
+#appmenu-popup-sitecommands {
+  -moz-box-orient: vertical;
+}
+
+#appmenu-popup-sitecommands > .appmenu-pageaction {
+  background-color: @color_background_default@;
+}
+
 /* Sync setup ------------------------------------------------------------- */
 .syncsetup-center {
   /* TODO: remove this dummy when we no longer use it in other themes */

mobile/themes/core/honeycomb/browser.css

@@ -1514,7 +1514,7 @@ setting {
   margin: @margin_xxxnormal@ @margin_xxxnormal@ 0 @margin_xxxnormal@;
 }
 
-#appmenu-overflow-commands > .appmenu-button {
+#appmenu-overflow-appcommands > .appmenu-button {
   color: @color_text_default@;
   background: transparent;
   font-size: @font_normal@ !important;
@@ -1524,11 +1524,90 @@ setting {
   -moz-box-align: center;
 }
 
-#appmenu-overflow-commands > .appmenu-button:hover:active {
+#appmenu-overflow-appcommands > .appmenu-button:hover:active {
   background-image: url("chrome://browser/skin/images/appmenu-active-hdpi.png");
   background-size: 100% 100%;
 }
 
+#appmenu-popup-appcommands {
+  padding: @padding_normal@ !important;
+  background-color: transparent;
+}
+
+#appmenu-popup-appcommands richlistitem {
+  -moz-box-align: center;
+  border-top: @border_width_tiny@ solid @color_button_border@;
+  border-bottom: none;
+  background-color: transparent;
+}
+
+#appmenu-popup-appcommands richlistitem:hover:active {
+  background-color: @color_background_highlight_overlay@;
+}
+
+#appmenu-popup-sitecommands {
+  display: block;
+  max-width: -moz-calc(4.51 * @touch_button_xlarge@ + 2 * @padding_normal@) !important;
+  width: -moz-calc(4.51 * @touch_button_xlarge@ + 2 * @padding_normal@) !important;
+}
+
+#appmenu-popup-sitecommands > .appmenu-pageaction {
+  font-size: @font_tiny@;
+  display: inline-block;
+  min-height: -moz-calc(1.5 * @touch_button_xlarge@) !important;
+  min-width: -moz-calc(1.5 * @touch_button_xlarge@) !important;
+  max-width: -moz-calc(1.5 * @touch_button_xlarge@) !important;
+  width: -moz-calc(1.5 * @touch_button_xlarge@) !important;
+  border-radius: 0px;
+  border-bottom: @border_width_tiny@ solid @color_button_border@;
+  text-align: center;
+  background-repeat: no-repeat;
+  background-position: 50% -moz-calc(50% - 1em);
+}
+
+#appmenu-popup-sitecommands > .appmenu-pageaction > label {
+  padding-top: @touch_button_small@;
+}
+
+#appmenu-popup-sitecommands > .appmenu-site-button {
+  background-image: url("chrome://browser/skin/images/appmenu-site-hdpi.png");
+}
+
+#appmenu-popup-sitecommands > .appmenu-share-button {
+  background-image: url("chrome://browser/skin/images/appmenu-share-hdpi.png");
+}
+
+#appmenu-popup-sitecommands > .appmenu-findinpage-button {
+  background-image: url("chrome://browser/skin/images/appmenu-findinpage-hdpi.png");
+}
+
+#appmenu-popup-sitecommands > .appmenu-saveas-button {
+  background-image: url("chrome://browser/skin/images/appmenu-saveas-hdpi.png");
+}
+
+#appmenu-popup-sitecommands {
+  padding: @padding_normal@ !important;
+  -moz-box-pack: center;
+  -moz-box-align: center;
+}
+
+#appmenu-popup-sitecommands > .appmenu-pageaction:not(:nth-child(3n+3)):-moz-locale-dir(ltr) {
+  border-right: @border_width_tiny@ solid @color_button_border@;
+}
+
+#appmenu-popup-sitecommands > .appmenu-pageaction:not(:nth-child(3n+3)):-moz-locale-dir(rtl) {
+  border-left: @border_width_tiny@ solid @color_button_border@;
+}
+
+#appmenu-popup-sitecommands > .appmenu-pageaction:nth-child(3n+1):last-child,
+#appmenu-popup-sitecommands > .appmenu-pageaction:nth-child(3n+1):nth-last-child(-3n+2),
+#appmenu-popup-sitecommands > .appmenu-pageaction:nth-child(3n+1):nth-last-child(-3n+3),
+#appmenu-popup-sitecommands > .appmenu-pageaction:nth-child(3n+2):last-child,
+#appmenu-popup-sitecommands > .appmenu-pageaction:nth-child(3n+2):nth-last-child(-3n+2),
+#appmenu-popup-sitecommands > .appmenu-pageaction:nth-child(3n+3):last-child {
+  border-bottom: none;
+}
+
 /* Sync setup ------------------------------------------------------------- */
 .syncsetup-center {
   /* TODO: remove this dummy when we no longer use it in other themes */

mobile/themes/core/jar.mn

@@ -290,6 +290,7 @@ chrome.jar:
   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/appmenu-saveas-hdpi.png       (honeycomb/images/appmenu-saveas-hdpi.png)
   skin/honeycomb/images/aboutBackground.jpg           (honeycomb/images/aboutBackground.jpg)
   skin/honeycomb/images/button-bg.png                 (honeycomb/images/button-bg.png)
   skin/honeycomb/images/textbox-bg.png                (honeycomb/images/textbox-bg.png)