Bug 681650 - Update site menus for tablets. r=mbrubeck

mobile/chrome/content/bindings/arrowbox.xml

@@ -238,7 +238,6 @@
                 vertPos = (Math.round(popupRect.bottom) <= Math.round(anchorRect.top + offset)) ? -1 :
                               (Math.round(popupRect.top) >= Math.round(anchorRect.bottom - offset)) ? 1 : 0;
               }
-
               this._updateArrow(popupRect, anchorRect, horizPos, vertPos);
             ]]>
          </body>

mobile/chrome/content/browser.js

@@ -2201,7 +2201,7 @@ IdentityHandler.prototype = {
 
       // Build an appropriate supplemental block out of whatever location data we have
       if (iData.city)
-        supplemental += iData.city + " ";
+        supplemental += iData.city + "\n";
       if (iData.state && iData.country)
         supplemental += Strings.browser.formatStringFromName("identity.identified.state_and_country", [iData.state, iData.country], 2);
       else if (iData.state) // State only
@@ -2235,13 +2235,17 @@ IdentityHandler.prototype = {
     this.setPopupMessages(this._identityBox.getAttribute("mode") || this.IDENTITY_MODE_UNKNOWN);
 
     this._identityPopup.hidden = false;
-    this._identityPopup.top = BrowserUI.toolbarH - this._identityPopup.offset;
-    this._identityPopup.anchorTo(this._identityBox);
+    let anchorPos = "";
+    if (Util.isTablet())
+      anchorPos = "after_start";
+    else
+      this._identityPopup.top = BrowserUI.toolbarH - this._identityPopup.offset;
 
     this._identityBox.setAttribute("open", "true");
 
     BrowserUI.pushPopup(this, [this._identityPopup, this._identityBox, Elements.toolbarContainer]);
     BrowserUI.lockToolbar();
+    this._identityPopup.anchorTo(this._identityBox, anchorPos);
   },
 
   hide: function ih_hide() {

mobile/chrome/content/browser.xul

@@ -316,27 +316,27 @@
     </arrowbox>
 
     <!-- popup for site identity information -->
-    <arrowbox id="identity-container" hidden="true" mode="unknownIdentity" offset="18" flex="1" type="dialog">
-      <hbox id="identity-popup-container" flex="1" align="top">
+    <arrowbox id="identity-container" hidden="true" mode="unknownIdentity" offset="18" flex="1" type="dialog" observes="bcast_urlbarState">
+      <box id="identity-popup-container" flex="1" align="top">
         <image id="identity-popup-icon"/>
         <vbox id="identity-popup-content-box" flex="1">
-          <hbox flex="1">
+          <box id="identity-popup-connected-box" flex="1">
             <label id="identity-popup-connectedToLabel" value="&identity.connectedTo2;"/>
             <label id="identity-popup-connectedToLabel2" flex="1">&identity.unverifiedsite2;</label>
             <description id="identity-popup-content-host" flex="1"/>
-          </hbox>
-          <hbox id="identity-popup-runBy-box">
+          </box>
+          <box id="identity-popup-runBy-box">
             <label id="identity-popup-runByLabel" value="&identity.runBy2;"/>
             <description id="identity-popup-content-owner"/>
             <description id="identity-popup-content-supplemental"/>
-          </hbox>
+          </box>
           <description id="identity-popup-content-verifier"/>
         </vbox>
-        <vbox align="center" pack="start">
+        <box id="identity-popup-encryption-box">
           <image id="identity-popup-encryption-icon"/>
           <description id="identity-popup-encryption-label"/>
-        </vbox>
-      </hbox>
+        </box>
+      </box>
 
       <hbox id="pageactions-container" hidden="true">
 #ifndef ANDROID

mobile/chrome/content/common-ui.js

@@ -393,8 +393,9 @@ var PageActions = {
     for (let i = 0; i < visibleCount; i++)
       visibleNodes[i].classList.remove("odd-last-child");
 
+    visibleNodes[visibleCount - 1].classList.add("last-child");
     if (visibleCount % 2)
-      visibleNodes[visibleCount - 1].classList.add("odd-last-child");
+      visibleNodes[visibleCount - 1].classList.add("odd");
   }
 };
 

mobile/themes/core/browser.css

@@ -1044,6 +1044,7 @@ documenttab[reload="true"] > stack > .documenttab-reload {
 #identity-popup-container {
   padding: @padding_normal@; /* core spacing */
   padding-bottom: @padding_xxxnormal@;
+  -moz-box-direction: horizontal;
 }
 
 /* Popup Icons */
@@ -1052,11 +1053,11 @@ documenttab[reload="true"] > stack > .documenttab-reload {
   list-style-image: url("chrome://browser/skin/images/identity-default-hdpi.png");
 }
 
-#identity-container[mode="verifiedIdentity"] > hbox > #identity-popup-icon {
+#identity-container[mode="verifiedIdentity"] > box > #identity-popup-icon {
   list-style-image: url("chrome://browser/skin/images/identity-ev-hdpi.png");
 }
 
-#identity-container[mode="verifiedDomain"] > hbox > #identity-popup-icon {
+#identity-container[mode="verifiedDomain"] > box > #identity-popup-icon {
   list-style-image: url("chrome://browser/skin/images/identity-ssl-hdpi.png");
 }
 
@@ -1072,12 +1073,11 @@ documenttab[reload="true"] > stack > .documenttab-reload {
   display: block;
 }
 
-#identity-popup-content-box.unknownIdentity > hbox > #identity-popup-connectedToLabel,
-#identity-popup-content-box.unknownIdentity > hbox > #identity-popup-runByLabel,
-#identity-popup-content-box.unknownIdentity > hbox > #identity-popup-content-host,
-#identity-popup-content-box.unknownIdentity > hbox > #identity-popup-content-owner,
-#identity-popup-content-box.verifiedIdentity > hbox > #identity-popup-connectedToLabel2,
-#identity-popup-content-box.verifiedDomain > hbox > #identity-popup-connectedToLabel2 {
+#identity-popup-content-box.unknownIdentity > box > #identity-popup-connectedToLabel,
+#identity-popup-content-box.unknownIdentity > #identity-popup-runBy-box,
+#identity-popup-content-box.unknownIdentity > box > #identity-popup-content-host,
+#identity-popup-content-box.verifiedIdentity > box > #identity-popup-connectedToLabel2,
+#identity-popup-content-box.verifiedDomain > box > #identity-popup-connectedToLabel2 {
   display: none;
 }
 
@@ -1100,6 +1100,20 @@ documenttab[reload="true"] > stack > .documenttab-reload {
   list-style-image: url("chrome://browser/skin/images/locked-hdpi.png");
 }
 
+#identity-popup-encryption-box {
+  -moz-box-orient: vertical;
+  -moz-box-align: center;
+  -moz-box-pack: start;
+}
+
+#identity-popup-connected-box {
+  -moz-box-orient: horizontal;
+}
+
+#identity-popup-content-supplemental {
+  white-space: normal;
+}
+
 /* Page Actions, Prompt, and Context Menu popups --------------------------- */
 .action-buttons,
 #context-commands,
@@ -1179,7 +1193,7 @@ pageaction {
   }
 
   .action-button:last-child:nth-child(odd),
-  pageaction.odd-last-child {
+  pageaction.odd.last-child {
     width: 100%;
   }
 }

mobile/themes/core/defines.inc

@@ -59,6 +59,7 @@
 
 %define urlbar_edit_height 6.35mozmm
 %define urlbar_edit_indent 0.85mozmm
+%define urlbar_max_width   96mozmm
 
 %define scroller_thickness 0.64mozmm
 %define scroller_minimum 1.27mozmm
@@ -147,6 +148,7 @@
 
 %define urlbar_edit_height 60px
 %define urlbar_edit_indent 8px
+%define urlbar_max_width 596px
 
 %define scroller_thickness 6px
 %define scroller_minimum 12px

mobile/themes/core/gingerbread/browser.css

@@ -995,6 +995,7 @@ documenttab[reload="true"] > stack > .documenttab-reload {
   padding: @padding_normal@; /* core spacing */
   padding-bottom: @padding_xxxnormal@;
   color: @color_text_panel@;
+  -moz-box-orient: horizontal;
 }
 
 /* Popup Icons */
@@ -1004,11 +1005,11 @@ documenttab[reload="true"] > stack > .documenttab-reload {
   list-style-image: url("chrome://browser/skin/images/identity-default-hdpi.png");
 }
 
-#identity-container[mode="verifiedIdentity"] > hbox > #identity-popup-icon {
+#identity-container[mode="verifiedIdentity"] > box > #identity-popup-icon {
   list-style-image: url("chrome://browser/skin/images/identity-ev-hdpi.png");
 }
 
-#identity-container[mode="verifiedDomain"] > hbox > #identity-popup-icon {
+#identity-container[mode="verifiedDomain"] > box > #identity-popup-icon {
   list-style-image: url("chrome://browser/skin/images/identity-ssl-hdpi.png");
 }
 
@@ -1024,12 +1025,15 @@ documenttab[reload="true"] > stack > .documenttab-reload {
   display: block;
 }
 
-#identity-popup-content-box.unknownIdentity > hbox > #identity-popup-connectedToLabel,
-#identity-popup-content-box.unknownIdentity > hbox > #identity-popup-runByLabel,
-#identity-popup-content-box.unknownIdentity > hbox > #identity-popup-content-host,
-#identity-popup-content-box.unknownIdentity > hbox > #identity-popup-content-owner,
-#identity-popup-content-box.verifiedIdentity > hbox > #identity-popup-connectedToLabel2,
-#identity-popup-content-box.verifiedDomain > hbox > #identity-popup-connectedToLabel2 {
+#identity-popup-connected-box {
+  -moz-box-orient: horizontal;
+}
+
+#identity-popup-content-box.unknownIdentity > box > #identity-popup-connectedToLabel,
+#identity-popup-content-box.unknownIdentity > #identity-popup-runBy-box,
+#identity-popup-content-box.unknownIdentity > box > #identity-popup-content-host,
+#identity-popup-content-box.verifiedIdentity > box > #identity-popup-connectedToLabel2,
+#identity-popup-content-box.verifiedDomain > box > #identity-popup-connectedToLabel2 {
   display: none;
 }
 
@@ -1048,11 +1052,21 @@ documenttab[reload="true"] > stack > .documenttab-reload {
   list-style-image: url("chrome://browser/skin/images/unlocked-hdpi.png");
 }
 
-#identity-container[mode="verifiedIdentity"] > hbox > vbox > #identity-popup-encryption-icon ,
-#identity-container[mode="verifiedDomain"] > hbox > vbox > #identity-popup-encryption-icon {
+#identity-container[mode="verifiedIdentity"] > box > box > #identity-popup-encryption-icon ,
+#identity-container[mode="verifiedDomain"] > box > box > #identity-popup-encryption-icon {
   list-style-image: url("chrome://browser/skin/images/locked-hdpi.png");
 }
 
+#identity-popup-encryption-box {
+  -moz-box-orient: vertical;
+  -moz-box-align: center;
+  -moz-box-pack: start;
+}
+
+#identity-popup-content-supplemental {
+  white-space: normal;
+}
+
 /* Page Actions, Prompt, and Context Menu popups --------------------------- */
 .action-buttons,
 #context-commands,
@@ -1132,7 +1146,7 @@ pageaction {
   }
 
   .action-button:last-child:nth-child(odd),
-  pageaction.odd-last-child {
+  pageaction.odd.last-child {
     width: 100%;
   }
 }

mobile/themes/core/gingerbread/defines.inc

@@ -87,6 +87,7 @@
 
 %define urlbar_edit_height 6.35mozmm
 %define urlbar_edit_indent 0.85mozmm
+%define urlbar_max_width   96mozmm
 
 %define scroller_thickness 0.64mozmm
 %define scroller_minimum 1.27mozmm
@@ -177,6 +178,7 @@
 
 %define urlbar_edit_height 60px
 %define urlbar_edit_indent 8px
+%define urlbar_max_width 596px
 
 %define scroller_thickness 6px
 %define scroller_minimum 12px

mobile/themes/core/honeycomb/browser.css

@@ -179,6 +179,11 @@ toolbarbutton.urlbar-button {
   background-color: #6579e3;
 }
 
+#identity-popup-runBy-box,
+#identity-popup-connected-box {
+  -moz-box-orient: vertical;
+}
+
 #urlbar-throbber[loading] {
   list-style-image: url("chrome://browser/skin/images/throbber.png");
 }
@@ -1074,74 +1079,104 @@ documenttab[reload="true"] > stack > .documenttab-reload {
 }
 
 /* Identity popup   -------------------------------------------------------- */
+#identity-container .panel-arrowcontent {
+  background-image: url("chrome://browser/skin/images/menu-top-insideglow-grey.png");
+  box-shadow: 0 0 @shadow_width_tiny@ @shadow_width_medium@ @color_shadow_grey@;
+}
+
+#identity-container[mode="verifiedIdentity"] .panel-arrowcontent {
+  background-image: url("chrome://browser/skin/images/menu-top-insideglow-green.png");
+  box-shadow: 0 0 @shadow_width_tiny@ @shadow_width_medium@ @color_shadow_green@;
+}
+
+#identity-container[mode="verifiedDomain"] .panel-arrowcontent {
+  background-image: url("chrome://browser/skin/images/menu-top-insideglow.png");
+  box-shadow: 0 0 @shadow_width_tiny@ @shadow_width_medium@ @color_shadow_light@;
+}
+
 #identity-popup-container {
-  background-color: @color_background_panel@;
-  padding: @padding_normal@; /* core spacing */
-  padding-bottom: @padding_xxxnormal@;
-  color: @color_text_panel@;
+  -moz-box-orient: vertical;
+  background-image: url("chrome://browser/skin/images/identity-default-hdpi.png");
+  background-position: @padding_large@ @padding_large@;
+  background-repeat: no-repeat;
+  padding: @padding_large@ @padding_large@ @padding_large@ -moz-calc(2 * @padding_large@ + 48px);
 }
 
 /* Popup Icons */
 #identity-popup-icon {
-  padding: 0;
-  padding-top: @padding_snormal@; /* align to top of text */
-  list-style-image: url("chrome://browser/skin/images/identity-default-hdpi.png");
+  display: none;
 }
 
-#identity-container[mode="verifiedIdentity"] > hbox > #identity-popup-icon {
-  list-style-image: url("chrome://browser/skin/images/identity-ev-hdpi.png");
+#identity-popup-content-box label,
+#identity-popup-content-box description {
+  padding: 0px;
+  margin: 0px;
 }
 
-#identity-container[mode="verifiedDomain"] > hbox > #identity-popup-icon {
-  list-style-image: url("chrome://browser/skin/images/identity-ssl-hdpi.png");
+#identity-popup-content-verifier,
+#identity-popup-runBy-box,
+#identity-popup-content-supplemental,
+#identity-popup-encryption-box {
+  padding-top: @padding_xnormal@ !important;
+}
+
+#identity-container[mode="verifiedIdentity"] > #identity-popup-container {
+  background-image: url("chrome://browser/skin/images/identity-ev-hdpi.png");
+}
+
+#identity-container[mode="verifiedDomain"] > #identity-popup-container {
+  background-image: url("chrome://browser/skin/images/identity-ssl-hdpi.png");
 }
 
 /* Popup Body Text */
 #identity-popup-content-box {
-  -moz-padding-start: @padding_normal@; /* core spacing */
-  font-size: @font_small@ !important;
+  padding: 0px;
+  margin: 0px;
+  font-size: @font_tiny@;
   white-space: pre-wrap;
 }
 
-/* let the text flow into a second row, if needed */
-#identity-popup-runBy-box {
-  display: block;
-}
-
-#identity-popup-content-box.unknownIdentity > hbox > #identity-popup-connectedToLabel,
-#identity-popup-content-box.unknownIdentity > hbox > #identity-popup-runByLabel,
-#identity-popup-content-box.unknownIdentity > hbox > #identity-popup-content-host,
-#identity-popup-content-box.unknownIdentity > hbox > #identity-popup-content-owner,
-#identity-popup-content-box.verifiedIdentity > hbox > #identity-popup-connectedToLabel2,
-#identity-popup-content-box.verifiedDomain > hbox > #identity-popup-connectedToLabel2 {
+#identity-popup-content-box.unknownIdentity > box > #identity-popup-connectedToLabel,
+#identity-popup-content-box.unknownIdentity > #identity-popup-runBy-box,
+#identity-popup-content-box.unknownIdentity > box > #identity-popup-content-host,
+#identity-popup-content-box.verifiedIdentity > box > #identity-popup-connectedToLabel2,
+#identity-popup-content-box.verifiedDomain > box > #identity-popup-connectedToLabel2 {
   display: none;
 }
 
 #identity-popup-encryption-label,
 #identity-popup-content-verifier {
+  color: @color_text_placeholder@;
   font-size: @font_tiny@ !important;
 }
 
 #identity-popup-content-host,
 #identity-popup-content-owner {
   font-weight: bold;
+  padding: 0px;
+  margin: 0px;
+  font-size: @font_xsmall@ !important;
 }
 
 #identity-popup-encryption-icon {
-  padding-top: @padding_snormal@; /* align to top of text */
   list-style-image: url("chrome://browser/skin/images/unlocked-hdpi.png");
 }
 
-#identity-container[mode="verifiedIdentity"] > hbox > vbox > #identity-popup-encryption-icon ,
-#identity-container[mode="verifiedDomain"] > hbox > vbox > #identity-popup-encryption-icon {
+#identity-container[mode="verifiedIdentity"] > box > box > #identity-popup-encryption-icon ,
+#identity-container[mode="verifiedDomain"] > box > box > #identity-popup-encryption-icon {
   list-style-image: url("chrome://browser/skin/images/locked-hdpi.png");
 }
 
+#identity-popup-encryption-box {
+  -moz-box-orient: horizontal;
+  -moz-box-align: baseline;
+  -moz-box-pack: start;
+}
+
 /* Page Actions, Prompt, and Context Menu popups --------------------------- */
 .action-buttons,
 #context-commands,
 #pageactions-container {
-  border-top: @border_width_tiny@ solid rgb(205,205,205);
   padding: 0;
   -moz-user-focus: ignore;
 }
@@ -1159,19 +1194,27 @@ documenttab[reload="true"] > stack > .documenttab-reload {
 .action-button,
 .context-command,
 pageaction {
-  background-color: none;
-  -moz-border-top-colors: white;
-  -moz-border-right-colors: rgb(175,175,175);
-  -moz-border-bottom-colors: rgb(175,175,175);
-  -moz-border-left-colors: white;
-  border-style: solid;
-  border-width: @border_width_tiny@ !important;
   height: @touch_button_xlarge@;
   min-height: @touch_button_xlarge@;
   width: 100%;
   min-width: @touch_action_minwidth@; /* keep the button from being too narrow */
 }
 
+pageaction {
+  padding: 0px @padding_normal@ !important;
+  border-bottom: -moz-calc(3 * @border_width_tiny@) solid white;
+}
+
+pageaction.last-child {
+  border-bottom: @border_width_tiny@ solid white !important;
+}
+
+pageaction > vbox {
+  border-top: @border_width_tiny@ solid lightgray;
+  -moz-box-flex: 1 !important;
+  margin-top: -moz-calc(-2 * @border_width_tiny@);
+}
+
 /* Override richlistbox and richlistitem styles */
 #context-commands > scrollbox {
   width: 100%;
@@ -1217,7 +1260,7 @@ pageaction {
   }
 
   .action-button:last-child:nth-child(odd),
-  pageaction.odd-last-child {
+  pageaction.odd.last-child {
     width: 100%;
   }
 }

mobile/themes/core/honeycomb/defines.inc

@@ -32,6 +32,8 @@
 %define color_selection #c0e49a
 %define color_shadow #6699ff
 %define color_shadow_light rgba(102,153,255, 0.2)
+%define color_shadow_green rgba(137,251,21, 0.2)
+%define color_shadow_grey rgba(200,200,200, 0.5)
 
 %define color_subtext_default #aaaaaa
 

mobile/themes/core/jar.mn

@@ -418,3 +418,5 @@ chrome.jar:
   skin/honeycomb/images/urlbar-border-side-active.png (honeycomb/images/urlbar-border-side-active.png)
   skin/honeycomb/images/urlbar-border-bottom-active.png (honeycomb/images/urlbar-border-bottom-active.png)
   skin/honeycomb/images/menu-top-insideglow.png       (honeycomb/images/menu-top-insideglow.png)
+  skin/honeycomb/images/menu-top-insideglow-green.png (honeycomb/images/menu-top-insideglow-green.png)
+  skin/honeycomb/images/menu-top-insideglow-grey.png  (honeycomb/images/menu-top-insideglow-grey.png)

mobile/themes/core/tablet.css

@@ -129,6 +129,16 @@ documenttab[selected="true"] > stack > hbox > .documenttab-close[tablet] {
   }
 }
 
+#identity-container[tablet] #identity-popup-container {
+  -moz-stack-sizing: ignore;
+  max-width: -moz-calc(0.75 * @urlbar_max_width@);
+  min-width: -moz-calc(0.75 * @urlbar_max_width@);
+}
+
+#identity-container[tablet] pageaction {
+  width: 100%;
+}
+
 %ifndef honeycomb
 @media (min-width: @tablet_panel_minwidth@) {
   #awesome-panels {