Make fennecomb site ID menus pretty

VERIFIED FIXED in Firefox 9

Status

enhancement
VERIFIED FIXED
8 years ago
8 years ago

People

(Reporter: ibarlow, Assigned: wesj)

Tracking

Firefox 8
Firefox 9
ARM
Android
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments, 2 obsolete attachments)

Posted file site id assets
Let's make our site ID menus look like this: http://www.flickr.com/photos/61892693@N03/6076240415/in/photostream and this http://www.flickr.com/photos/61892693@N03/6076780784/in/photostream/

Notes:
* In addition to the Larry icon, we are differentiating green, blue and grey menus with outer border colours and top inner glows. 
* We are pulling in more site ID data to match what is shown on Desktop Firefox, since we have more space to work with here

Specs: http://cl.ly/3t3p35261u2o050q1P2D

Assets are attached
Severity: normal → enhancement
OS: Mac OS X → Android
Hardware: x86 → ARM
Assignee: nobody → wjohnston
Posted patch WIP (obsolete) — Splinter Review
Saving my place. Build with this is at my dropbox:

http://dl.dropbox.com/u/72157/fennec-honeycomb1.apk

Ian, there's nothing here to display security information without clicking on the favicon, right? I remember seeing some mockups using different glows/graidents. Are we still undecided about exactly how that will be presented?
(In reply to Wesley Johnston (:wesj) from comment #1)

> Ian, there's nothing here to display security information without clicking
> on the favicon, right? I remember seeing some mockups using different
> glows/graidents. Are we still undecided about exactly how that will be
> presented?

That part could be sizeable. Wouldn't want it to hold up the site menu.
Posted patch Patch v1 (obsolete) — Splinter Review
Screenshots with all three themes are at:

http://people.mozilla.com/~wjohnston/screenshots/honeycomb-sitemenu/

My phone is dead or I'd test on there. On desktop with tablet mode off things seem fine.
Attachment #557999 - Attachment is obsolete: true
Attachment #559323 - Flags: review?(mbrubeck)
Comment on attachment 559323 [details] [diff] [review]
Patch v1

># HG changeset patch
># Parent 9ef54e0600f423ea9ebee892e01dc04dd9cfa62f
>
>diff --git a/mobile/chrome/content/bindings/arrowbox.xml b/mobile/chrome/content/bindings/arrowbox.xml
>--- a/mobile/chrome/content/bindings/arrowbox.xml
>+++ b/mobile/chrome/content/bindings/arrowbox.xml
>@@ -233,17 +233,16 @@
>                 popupRect.top = top;
>                 this.setAttribute("top", top);
>               } else {
>                 horizPos = (Math.round(popupRect.right) <= Math.round(anchorRect.left + offset)) ? -1 :
>                                (Math.round(popupRect.left) >= Math.round(anchorRect.right - offset)) ? 1 : 0;
>                 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>
>       </method>
> 
>       <method name="pointLeftAt">
>          <parameter name="targetNode"/>
>          <body>
>diff --git a/mobile/chrome/content/browser.js b/mobile/chrome/content/browser.js
>--- a/mobile/chrome/content/browser.js
>+++ b/mobile/chrome/content/browser.js
>@@ -2196,17 +2196,17 @@ IdentityHandler.prototype = {
>       // If it's identified, then we can populate the dialog with credentials
>       iData = this.getIdentityData();
>       host = this.getEffectiveHost();
>       owner = iData.subjectOrg;
>       verifier = this._identityBox.tooltipText;
> 
>       // 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
>         supplemental += iData.state;
>       else if (iData.country) // Country only
>         supplemental += iData.country;
>     } else {
>       // These strings will be hidden in CSS anyhow
>@@ -2230,23 +2230,27 @@ IdentityHandler.prototype = {
>     AwesomeScreen.activePanel = null;
>     while (BrowserUI.activeDialog)
>       BrowserUI.activeDialog.close();
> 
>     // Update the popup strings
>     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() {
>     Elements.contentShowing.setAttribute("disabled", "false");
> 
>     this._identityPopup.hidden = true;
>     this._identityBox.removeAttribute("open");
> 
>diff --git a/mobile/chrome/content/browser.xul b/mobile/chrome/content/browser.xul
>--- a/mobile/chrome/content/browser.xul
>+++ b/mobile/chrome/content/browser.xul
>@@ -311,37 +311,37 @@
>     </scrollbox>
> 
>     <!-- Form Helper suggestions helper popup -->
>     <arrowbox id="form-helper-suggestions-container" flex="1" hidden="true" offset="0" top="0" left="0">
>       <arrowscrollbox id="form-helper-suggestions" align="center" flex="1" orient="horizontal" onclick="FormHelperUI.doAutoComplete(event.target);"/>
>     </arrowbox>
> 
>     <!-- popup for site identity information -->
>-    <arrowbox id="identity-container" hidden="true" mode="unknownIdentity" offset="18" flex="1">
>-      <hbox id="identity-popup-container" flex="1" align="top">
>+    <arrowbox id="identity-container" hidden="true" mode="unknownIdentity" offset="18" flex="1" 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
>         <pageaction id="pageaction-findinpage" title="&pageactions.findInPage;"
>           onclick="FindHelperUI.show();"/>
> #ifdef NS_PRINTING
>         <pageaction id="pageaction-saveas" title="&pageactions.saveas.pdf;"
>           onclick="PageActions.savePageAsPDF();"/>
>diff --git a/mobile/chrome/content/common-ui.js b/mobile/chrome/content/common-ui.js
>--- a/mobile/chrome/content/common-ui.js
>+++ b/mobile/chrome/content/common-ui.js
>@@ -388,18 +388,19 @@ var PageActions = {
>   _updateAttributes: function _updateAttributes() {
>     let container = document.getElementById("pageactions-container");
>     let visibleNodes = container.querySelectorAll("pageaction:not([hidden=true])");
>     let visibleCount = visibleNodes.length;
> 
>     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");
>   }
> };
> 
> var NewTabPopup = {
>   _timeout: 0,
>   _tabs: [],
> 
>   init: function init() {
>diff --git a/mobile/themes/core/browser.css b/mobile/themes/core/browser.css
>--- a/mobile/themes/core/browser.css
>+++ b/mobile/themes/core/browser.css
>@@ -1038,50 +1038,50 @@ documenttab[reload="true"] > stack > .do
> #bookmark-popup .action-button {
>   -moz-border-right-colors: white;
> }
> 
> /* Identity popup   -------------------------------------------------------- */
> #identity-popup-container {
>   padding: @padding_normal@; /* core spacing */
>   padding-bottom: @padding_xxxnormal@;
>+  -moz-box-direction: horizontal;
> }
> 
> /* Popup Icons */
> #identity-popup-icon {
>   padding: 0;
>   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");
> }
> 
> /* Popup Body Text */
> #identity-popup-content-box {
>   -moz-padding-start: @padding_normal@; /* core spacing */
>   font-size: @font_small@ !important;
>   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 {
>   font-size: @font_tiny@ !important;
> }
> 
>@@ -1094,16 +1094,30 @@ documenttab[reload="true"] > stack > .do
>   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 {
>   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,
> #pageactions-container {
>   background: transparent;
>   border-top: @border_width_tiny@ solid rgb(205,205,205);
>   padding: 0;
>   -moz-user-focus: ignore;
>@@ -1173,17 +1187,17 @@ pageaction {
> 
> @media (min-width: 500px) {
>   .action-button,
>   pageaction {
>     width: 50%;
>   }
> 
>   .action-button:last-child:nth-child(odd),
>-  pageaction.odd-last-child {
>+  pageaction.odd.last-child {
>     width: 100%;
>   }
> }
> 
> .action-button:not([disabled]):hover:active,
> .context-command:not([disabled]):hover:active,
> pageaction:not([disabled]):hover:active {
>   background: url("chrome://browser/skin/images/popup-selected-item-hdpi.png") repeat-x !important;
>diff --git a/mobile/themes/core/defines.inc b/mobile/themes/core/defines.inc
>--- a/mobile/themes/core/defines.inc
>+++ b/mobile/themes/core/defines.inc
>@@ -54,16 +54,17 @@
> %define textbox_height 5.08mozmm
> 
> %define dropmarker_padding 0.53mozmm
> 
> %define progressmeter_height 3.39mozmm
> 
> %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
> 
> %define sidebar_width_minimum 8.47mozmm
> %define sidebar_button_height 7.41mozmm
> %define documenttab_margin_bottom 0.53mozmm
> 
>@@ -142,16 +143,17 @@
> %define textbox_height 48px
> 
> %define dropmarker_margin 5px
> 
> %define progressmeter_height 32px
> 
> %define urlbar_edit_height 60px
> %define urlbar_edit_indent 8px
>+%define urlbar_max_width 596px
> 
> %define scroller_thickness 6px
> %define scroller_minimum 12px
> 
> %define sidebar_width_minimum 80px
> %define sidebar_button_height 70px
> %define documenttab_margin_bottom 5px
> 
>diff --git a/mobile/themes/core/gingerbread/browser.css b/mobile/themes/core/gingerbread/browser.css
>--- a/mobile/themes/core/gingerbread/browser.css
>+++ b/mobile/themes/core/gingerbread/browser.css
>@@ -989,51 +989,55 @@ documenttab[reload="true"] > stack > .do
> }
> 
> /* Identity popup   -------------------------------------------------------- */
> #identity-popup-container {
>   background-color: @color_background_panel@;
>   padding: @padding_normal@; /* core spacing */
>   padding-bottom: @padding_xxxnormal@;
>   color: @color_text_panel@;
>+  -moz-box-orient: horizontal;
> }
> 
> /* 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");
> }
> 
>-#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");
> }
> 
> /* Popup Body Text */
> #identity-popup-content-box {
>   -moz-padding-start: @padding_normal@; /* core spacing */
>   font-size: @font_small@ !important;
>   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-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;
> }
> 
> #identity-popup-encryption-label,
> #identity-popup-content-verifier {
>   font-size: @font_tiny@ !important;
> }
> 
>@@ -1042,21 +1046,31 @@ documenttab[reload="true"] > stack > .do
>   font-weight: bold;
> }
> 
> #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: 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,
> #pageactions-container {
>   background: transparent;
>   border-top: @border_width_tiny@ solid rgb(205,205,205);
>   padding: 0;
>   -moz-user-focus: ignore;
>@@ -1126,17 +1140,17 @@ pageaction {
> 
> @media (min-width: 500px) {
>   .action-button,
>   pageaction {
>     width: 50%;
>   }
> 
>   .action-button:last-child:nth-child(odd),
>-  pageaction.odd-last-child {
>+  pageaction.odd.last-child {
>     width: 100%;
>   }
> }
> 
> .action-button:not([disabled]):hover:active,
> .context-command:not([disabled]):hover:active,
> pageaction:not([disabled]):hover:active {
>   color: @color_text_highlight@;
>diff --git a/mobile/themes/core/gingerbread/defines.inc b/mobile/themes/core/gingerbread/defines.inc
>--- a/mobile/themes/core/gingerbread/defines.inc
>+++ b/mobile/themes/core/gingerbread/defines.inc
>@@ -82,16 +82,17 @@
> %define textbox_height 5.08mozmm
> 
> %define dropmarker_padding 0.53mozmm
> 
> %define progressmeter_height 3.39mozmm
> 
> %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
> 
> %define sidebar_width_minimum 8.47mozmm
> %define sidebar_button_height 7.41mozmm
> %define documenttab_margin_bottom 0.85mozmm
> 
>@@ -172,16 +173,17 @@
> %define textbox_height 48px
> 
> %define dropmarker_margin 5px
> 
> %define progressmeter_height 32px
> 
> %define urlbar_edit_height 60px
> %define urlbar_edit_indent 8px
>+%define urlbar_max_width 596px
> 
> %define scroller_thickness 6px
> %define scroller_minimum 12px
> 
> %define sidebar_width_minimum 80px
> %define sidebar_button_height 70px
> %define documenttab_margin_bottom 8px
> 
>diff --git a/mobile/themes/core/honeycomb/browser.css b/mobile/themes/core/honeycomb/browser.css
>--- a/mobile/themes/core/honeycomb/browser.css
>+++ b/mobile/themes/core/honeycomb/browser.css
>@@ -174,16 +174,21 @@ toolbarbutton.urlbar-button {
> #identity-box[mode="verifiedIdentity"] {
>   background-color: #89d715;
> }
> 
> #identity-box[mode="verifiedDomain"] {
>   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");
> }
> 
> #urlbar-throbber,
> #urlbar-favicon {
>   width: 32px;
>   height: 32px;
>@@ -1068,79 +1073,110 @@ documenttab[reload="true"] > stack > .do
>   display: none;
> }
> 
> #bookmark-popup-title {
>   background-color: @color_background_default@;
> }
> 
> /* 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 {
>+  padding: 0px;
>+  margin: 0px;
>+  font-size: @font_xsmall@ !important;
>   font-weight: bold;
> }
> 
> #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,
> #pageactions-container {
>   padding: 0;
>   -moz-user-focus: ignore;
> }
> 
> .action-buttons,
>@@ -1157,16 +1193,31 @@ documenttab[reload="true"] > stack > .do
> .context-command,
> pageaction {
>   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-header {
>   background-color: transparent;
>   border-bottom: @border_width_xlarge@ solid @color_divider_border@;
>   margin: @margin_large@ @margin_large@ 0px;
> }
> 
> #context-commands > scrollbox {
>@@ -1228,17 +1279,17 @@ pageaction {
> 
> @media (min-width: 500px) {
>   .action-button,
>   pageaction {
>     width: 50%;
>   }
> 
>   .action-button:last-child:nth-child(odd),
>-  pageaction.odd-last-child {
>+  pageaction.odd.last-child {
>     width: 100%;
>   }
> }
> 
> .action-button:not([disabled]):hover:active,
> .context-command:not([disabled]):hover:active,
> pageaction:not([disabled]):hover:active {
>   color: @color_text_highlight@;
>diff --git a/mobile/themes/core/honeycomb/defines.inc b/mobile/themes/core/honeycomb/defines.inc
>--- a/mobile/themes/core/honeycomb/defines.inc
>+++ b/mobile/themes/core/honeycomb/defines.inc
>@@ -3,16 +3,17 @@
> %define color_background_active #fff
> %define color_text_active #222222
> %define color_background_default_window #fff
> %define color_background_default rgba(255,255,255,0.95)
> %define color_text_default #222222
> %define color_toolbar_background #eaeaea
> %define color_divider_border #6699ff
> %define color_button_border rgb(207,207,207)
>+%define color_dialog_border #5a5a5a
> %define color_background_dialog #fff
> %define color_text_dialog #000
> %define color_dialog_border #5a5a5a
> %define color_background_dlgbuttons #9a9a9a
> %define color_background_panel #d6d6d6
> %define color_text_panel #000
> %define color_background_header #6699ff
> %define color_text_header #fff
>@@ -27,16 +28,18 @@
> %define color_text_panelrow #222222
> 
> %define color_background_highlight #a7c5f4
> %define color_background_highlight_overlay rgba(167, 197, 244, 0.8)
> %define color_text_highlight #000
> %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
> 
> %ifdef ANDROID
> %define font_xlarge 6.08mozmm
> %define font_xnormal 3.75mozmm
> %define font_normal 3.54mozmm
> %define font_snormal 3mozmm
>diff --git a/mobile/themes/core/honeycomb/images/identity-default-hdpi.png b/mobile/themes/core/honeycomb/images/identity-default-hdpi.png
>index 6f21d92adf41e77b7cfdc23f372196e6fe8dbdf3..b74e0bb4add517537316127b6f300a3549cd92c9
>GIT binary patch
>literal 912
>zc$@){18@9^P)<h;3K|Lk000e1NJLTq001%o001`#1^@s6PVyN70000PbVXQnQ*UN;
>zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU#GD$>1RCwC#S}~H^KoDHXJU~z2exUmS
>zdVwKy1Vn^By#RQ@;gIMQIy1ZgLTA<wtc+BC0iLaDs<ze=n$fO=%EeSoU2waj>D`&x
>zp1BLI*Q=_M)oP_Y$dvS}4@3L?KDqb%k?K~?r0=BTj=!VAj_sGEOVxvnD1;XDb1rb~
>z8%|nsD_hcar$BJ+6Tu$6_64B0vLXFU8g~iAmIK0}%26HfZ*b@={MHitdjm4Xsn05$
>z{p0YhoHP+sDQ6&BBGMD-jx_ajXcO3EiCz8)Sm08%bQt~e5ZgKre>}SU#*R)z*dGny
>z9g$WxQ`TKptG*sYg&Yf@NlP2$5P*mrx>NB61w=bkwAgnX8W07FBM}We8zPV$*aJ5d
>zXY_`6&5=3yl1r?cbY;i5iG)Dp9D^f)Qwt-`a}P<MBKGGf&oP|WwvPlLlNbzihe&i_
>z!=TwIxL4js{7Jc1h)o-i#Im8{<Z7T2m_0k)%#9OOy~K%tx=+xnM-Gg@48vDC>;gW<
>zXa`C&1Ot2cKno)*T(ku8QL)#lFx;GlZzt=Z&w4Ns+?k@hS&h&O<1zCMVn<G<hEH|&
>zw<BZG1{GwCI<NceSAgNX$P3RPatp*g`|}YN-C9_)OPr$KbBJE-xs5GRe3X?Jwe0-U
>z<#N$C@V#ci6gPBa^c!Q3K)%pz{50~S(SFEqV1X{Nt}%M|+;7+vhGjowvQcg5cZESt
>zUP$OnZq5iA@}lx(w{xV4CuIP2YG`3IL3dfAxD>|WHQE2?WlvG1IPzg=#64Z+0TtGF
>z*nNIza2pOyF+(bDINhZntXkzoEsZBI2VAc!r%DAj?3<ek!o0p80jEhgUD=(y;O;H0
>zcWR7~@-sz2N48Y*DWfzm>`-n!{|Xtgn=oTtnipG(ggU)PoL2V?!kBx^3vF}bnip+)
>z_FIk5JmtmAM_#y0QI>EbH=Noj*`L?E<%K<bkjg<Y&gnES9yQnUo)?b*(n(%C0!Sx$
>z;hH0=MS&<f>|c5VQdGP*jjw;zfR5UY>kyK?Q~7Uz^buMU)neKx{qLl{fUKXP^#t++
>m@&xh((s%hi_W|Uu00RKjbpuQ>-@Ru50000<MNUMnLSTX;C8tLK
>
>diff --git a/mobile/themes/core/honeycomb/images/identity-ev-hdpi.png b/mobile/themes/core/honeycomb/images/identity-ev-hdpi.png
>index 761b7d8a25993d4255faf52d72bc9c7d63682cec..66c902cbb9470bfd20ac2f9b9414ba2cc2ea6bde
>GIT binary patch
>literal 914
>zc$@)}18w|?P)<h;3K|Lk000e1NJLTq001%o001`#1^@s6PVyN70000PbVXQnQ*UN;
>zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU#G)Y83RCwC#S>2JFFc1b01u&_A>wt7%
>zr-9%KY$`bWF;B)%dBj%%bl{|cm=2(Wa|H>hz*)^K8F_<Yg(S>m(9F(xd}gIj`o8@U
>z?(KGShK?^kKJ@)00(*7Lj1~Rj>!+W8KYNbdQGlgjf#rFeg=POWSnP~2JfO!G{%#Z&
>z_6A2<D4xm@>|hlL9{W<^nI(XK0Wh_~GYQydu+SzDI=%@yv@H|>2)^%dL51R6G3sSB
>zAQA5Rx`jf&HRh_?B9Cpc`(PJ50aHWJ_oiW5QELZaN-$k+3mu-H9ezX2Mfmu<KZQIJ
>zz^N<;&T+6At;R}-V(h_Ow4q|JrvOB0K^+lqQb5Flt^=O?J~bd>yea-(0MDlg<b>4&
>zmx^oC8rfjIq{DT&TsbjLV#U!%Q=)JewQYC~rAuW%^n2v~2E%iRi?8teT*aXWi#kD$
>z@EK*cn7A+if|mG&2}cWT850H<E5jh{Bt%%G5a35HCm98zC`&Gyg`%)uq*V^l?-`rI
>zf5i@98iC~+ATpdNQf%0|D1DXcwha9W{~3U}v_>t_P=UqhfJPAxh^^sJEpKYtQn!iT
>zDe<K4FTn^BV4Oc9)l$^Ql@ZlUf~d%5cKP3Uq=l8c#0XnnPN5eXZeyE7$n_sA07O7Q
>z+))MopE3H4%y7REx9Gy}i&{Y+Ww1+p<R~@VZ_pBk<$u8xv2gU>((-b2QCrf*JrES}
>ziSb);B4rc15mcWpa)rF4s*AhfHka5KwYax|xl|wZUH_b!`D9HfRjN={&g`5rMLzPd
>zXLn--S`E_0!!q7rnX*^#L3I&zL{WY}VxUaP6`rlhg+zd%R(ZHxFM2>XJH<rT=t8E{
>zr9&etQpT6gz);@VA&Oq5WnrdtaU>wL@=<TAix=5149=_QLikK{b-|`q3)LP~x4HB9
>z%@n0pjT=)-x+rx^9Hm<nEbrIS&es?^RbH>r5O3sO*tPstm!8OxP%71>)HCk2jO*eV
>zKxiE`IA1&)h!tJj-D`~iA||bZ>HcN36S=nJ8+V{hLhM$@e*<I;jVv8A7j=^Wa+s+#
>o1DS!$KxQCghu>lhAb$iH0JlXc&Bx0>IRF3v07*qoM6N<$g2T+6o&W#<
>
>diff --git a/mobile/themes/core/honeycomb/images/identity-ssl-hdpi.png b/mobile/themes/core/honeycomb/images/identity-ssl-hdpi.png
>index 64051751ba5c3a553d2f868994af538553eb1d38..094a32f576486207b0f0bffc8dab34f85c3b9ea2
>GIT binary patch
>literal 911
>zc$@)`191F_P)<h;3K|Lk000e1NJLTq001%o001`#1^@s6PVyN70000PbVXQnQ*UN;
>zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU#F-b&0RCwC#S<8*vFc75#7oclySs(?-
>z9at4)U4i8aVx4oaeaLy03RWG&TY=p{RKNo3Tdqz8&JcJC7_B}tA}I@j2Ot*Eilcet
>zy!kn}UazW6K7IS8Eaj2b7v(@+zkW!%{y$TG<wWa=)<@6ZQK4u37g}pIg3QQ$Qu@0R
>z81@|}ExDCFt*uuexb}r$kAC+7pt!Q5^_f=e6G&YS+8u~omj<$Hf8W5Mlki(>>>mw?
>zjx-Abv1~B*x5c+gT8S`HSpm@!(K^z~X=RQMZ2_HZF+GAn1vXJjyU|YvzO8xq<JRFf
>zwlpHb{%8t$L>k#l+4_uDV<kidjs;lBKpmGU01+9~5%DGkL>qJ-u<vDRKom+GiD=-(
>z6oKTZ9=NW!)K!K{AS={MHok6_D>>sP5&}_j6wU-jrG}rE4oIKD_g4tdF^n(qypWVA
>zf$k8g6xcD!><qP6IhGGffP~nffh>D&ryLW6R06YSr<<v2qNYro2uk+_diBVnA~4->
>zPKSMljWOB*{rrWV7w>@J#RxB^1A#m@?6nFEm9enxSUc#G9!vynQxw{?sWn0mjAZ5-
>zL{3I#hD~ky_kV$a@GBIE2lUxhS6DLok`zFkRRIKIZh+|0f3Bid)xtK#`-1V&7+3D9
>zRBz%%r~VKG-*mW2-zi6U$7R2<uG|>B=+z&p{^41QF0oC~ljDA)Uc#{Shs<hJD|%~C
>zm@>#MDQEuSB6z_H9wGcNXS^HXW>N!O-*~4GB+(0!vJ&Wjm)SETN^$bUGsAB=k*<*!
>z#&;qS5J8z@x>VeAx@&=34dO*>8BbuevblqrDii3a-`rzI6y^6L;7r2IA8ouS1iVOU
>z)0#m^HR$=FXQO2E+G;Fny410waIDvFgNK13!*>&=uS<EcuYs`2N1Rsogo3ej$P2A=
>zXUmHrJ^KYgpm4;Cr3+rzOi|V_qBM-kmF(xWdWd&27asCs=s_^f@yd%^&9$8K;ub)>
>z@ZuIgyzs)7BZHeHPyGukv)^=9RUgoiJ=ZCa-K+dJK*r$6LJgcYN?dy^AltiZ-GSVJ
>l+=1MIj2(VYV*vRhzyR-m5L#AE>Ky<8002ovPDHLkV1kVTqA36X
>
>diff --git a/mobile/themes/core/honeycomb/images/locked-hdpi.png b/mobile/themes/core/honeycomb/images/locked-hdpi.png
>index e50bc4f1dd28c885fead85a7c811854d233c3e09..766a56746febc2f7ea3be4c8031b9f81dd7f26a0
>GIT binary patch
>literal 227
>zc%17D@N?(olHy`uVBq!ia0vp^!a&T&!3HGHN~m`NDajJoh?3y^w370~qErUQl>DSr
>z1<%~X^wgl##FWaylc_d9MXjDLjv*DdlK%YvZ_jKtVcxtvh9$omZ!mgRFbasDn`8Nz
>z+053*f+vU}==Ve(D~6@Q3m);fNVBngb<klrBHj=o@IuI4A(!Kbg197uuD8O`4GbD{
>zIX(+bV3UmD5dE%x)PPZidBQ>Fl**C=9Wsm#&;O?@2r}rVs5~*+bYMl|;<kqj42*0H
>Y?|!NBXf#jW33L#Hr>mdKI;Vst0K}$9Qvd(}
>
>diff --git a/mobile/themes/core/honeycomb/images/menu-top-insideglow-green.png b/mobile/themes/core/honeycomb/images/menu-top-insideglow-green.png
>new file mode 100644
>index 0000000000000000000000000000000000000000..61219f16108ccd207830412b514337f78641b765
>GIT binary patch
>literal 231
>zc%17D@N?(olHy`uVBq!ia0vp^Qb5eg!3HFwPyJ~CQj#UE5hcO-X(i=}MX3yqDfvmM
>z3ZA)%>8U}fi7AzZCsS>JiaI@A978H@t(kC<tJ#3Z_43OvH}~J2|2A_+y^w5=*-g>>
>zn@7JEHadGx`nJS(`|&L^Z!(2VaAZ8$x1&K@;s8h0@3!WI`iD2q)FkR=eXc8D(+|3l
>zq4Y}g_I1Cu6-weWz5ltFu;=?NKKfv3=mMe1a`v1ttXfsu=4mawKSQe2zB9VoTX5~}
>e|MK#TYz&nvO)alAzI_CA6oaR$pUXO@geCykm0M2$
>
>diff --git a/mobile/themes/core/honeycomb/images/menu-top-insideglow-grey.png b/mobile/themes/core/honeycomb/images/menu-top-insideglow-grey.png
>new file mode 100644
>index 0000000000000000000000000000000000000000..70d2d2ea76f756a391f6f03a565ea071f0e1d0be
>GIT binary patch
>literal 228
>zc%17D@N?(olHy`uVBq!ia0vp^Qb5eg!3HFwPyJ~CQj#UE5hcO-X(i=}MX3yqDfvmM
>z3ZA)%>8U}fi7AzZCsS>JirPF~978H@t?BdTYc>#YPS=<ps`{?JXHG-tPG)h(Eh^0`
>zWlUT)9KLk<$>SRr1rDhw+0Hm9?vmi($s2W{u`S)n|51!*$>llk<v%gzZ)lMBjoi87
>z;hOv|CC|P$mR)TBEOxa&diJhzqSv`ksVgJqZ)xx0F%XaQdU>&XcZkU8t8r)FZJK{o
>b?Eu4$_r`84eKN;@E@JR>^>bP0l+XkK3|U%Z
>
>diff --git a/mobile/themes/core/honeycomb/images/unlocked-hdpi.png b/mobile/themes/core/honeycomb/images/unlocked-hdpi.png
>index 359923dc6cc484fd86dcc05b3a3af0b1b7eca330..2b993352a4d8a2323f32fa78e597575040798255
>GIT binary patch
>literal 230
>zc%17D@N?(olHy`uVBq!ia0vp^!a&T&!3HGHN~m`NDajJoh?3y^w370~qErUQl>DSr
>z1<%~X^wgl##FWaylc_d9MID|ljv*DdlK%YvZ|_`HwTqFN+1Xye+Cbp|lY-tH%i?G3
>zY)Xv67Zg|(_R61Jz#L%3sO4vp!1Sm}L5$%Mw}TExNvHAzGnS+Y-8>D`R3{`wFie@t
>z@mXjBn`8`!=y&y_28=4q6Am(K=sK)P>{-C!!0xdAZ@PjYgY4lGM;u%YvTm$Mv|w;(
>aU}SieqRR7mZjwLHO$?r{elF{r5}E)EFGchK
>
>diff --git a/mobile/themes/core/jar.mn b/mobile/themes/core/jar.mn
>--- a/mobile/themes/core/jar.mn
>+++ b/mobile/themes/core/jar.mn
>@@ -397,8 +397,10 @@ chrome.jar:
>   skin/honeycomb/images/errorpage-larry-black.png     (images/errorpage-larry-black.png)
>   skin/honeycomb/images/homescreen-blank-hdpi.png     (images/homescreen-blank-hdpi.png)
>   skin/honeycomb/images/homescreen-default-hdpi.png   (images/homescreen-default-hdpi.png)
>   skin/honeycomb/images/urlbar-border-side.png        (honeycomb/images/urlbar-border-side.png)
>   skin/honeycomb/images/urlbar-border-bottom.png      (honeycomb/images/urlbar-border-bottom.png)
>   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)
>diff --git a/mobile/themes/core/tablet.css b/mobile/themes/core/tablet.css
>--- a/mobile/themes/core/tablet.css
>+++ b/mobile/themes/core/tablet.css
>@@ -53,8 +53,17 @@
>   }
> 
>   #controls-scrollbox[tablet="true"] > #tabs-sidebar[open] {
>     position: fixed;
>     visibility: visible;
>   }
> }
> 
>+#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%;
>+}
Attachment #559323 - Flags: review?(mbrubeck) → review+
Posted patch For checkinSplinter Review
Attachment #559323 - Attachment is obsolete: true
Attachment #559359 - Flags: review+
http://hg.mozilla.org/mozilla-central/rev/45f55ff3fab8
Whiteboard: [inbound]
Target Milestone: --- → Firefox 9
Status: NEW → RESOLVED
Closed: 8 years ago
Resolution: --- → FIXED
Verified fixed on:
Mozilla/5.0 (Android;Linux armv7l;rv:9.0a1)Gecko/20110922
Firefox/9.0a1 Fennec/9.0a1
Device: Acer ICONIA A500
OS: Android 3.1
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.