Bug 552526 - fennec UI - style for site menu [r=mark.finkle]
authorVivien Nicolas <21@vingtetun.org>
Mon, 29 Mar 2010 16:41:03 -0400
changeset 66077 aa8d289017e6fb6c0bfae71638e49fd4d99a52b3
parent 66076 fb495310ee30fec38fcdadf43d9afb0036bcca33
child 66078 b4cc6d5dad4ddea134d2cd17d9c3dbe7eb5be16c
push id1
push userroot
push dateTue, 26 Apr 2011 22:38:44 +0000
treeherdermozilla-beta@bfdb6e623a36 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmark
bugs552526
Bug 552526 - fennec UI - style for site menu [r=mark.finkle]
mobile/chrome/content/browser-ui.js
mobile/chrome/content/browser.js
mobile/chrome/content/browser.xul
mobile/themes/hildon/browser.css
mobile/themes/wince/browser-high.css
mobile/themes/wince/browser-low.css
mobile/themes/wince/browser.css
--- a/mobile/chrome/content/browser-ui.js
+++ b/mobile/chrome/content/browser-ui.js
@@ -377,19 +377,16 @@ var BrowserUI = {
     delete this.starButton;
     return this.starButton = document.getElementById("tool-star");
   },
 
   sizeControls : function(windowW, windowH) {
     // tabs
     document.getElementById("tabs").resize();
 
-    // Site menu
-    PageActions.resize();
-
     // awesomebar
     let popup = document.getElementById("popup_autocomplete");
     popup.top = this.toolbarH;
     popup.height = windowH - this.toolbarH;
     popup.width = windowW;
 
     // form helper
     let formHelper = document.getElementById("form-helper-container");
@@ -879,16 +876,18 @@ var PageActions = {
         let permission = perms.getNext().QueryInterface(Ci.nsIPermission);
         if (permission.host == aHost.asciiHost && permission.type == type)
           aCallback(type);
       }
     }
   },
 
   updatePagePermissions: function updatePagePermissions() {
+    this.removeItems("preferences");
+
     let host = Browser.selectedBrowser.currentURI;
     let permissions = [];
 
     this._forEachPermissions(host, function(aType) {
       permissions.push(aType);
     });
 
     let lm = this._loginManager;
@@ -898,31 +897,31 @@ var PageActions = {
 
     // Show the clear site preferences button if needed
     if (permissions.length) {
       let title = Elements.browserBundle.getString("pageactions.reset");
       let description = [];
       for each(permission in permissions)
         description.push(Elements.browserBundle.getString("pageactions." + permission));
 
-      let node = this.appendItem(title, description.join(", "));
+      let node = this.appendItem("preferences", title, description.join(", "));
       node.onclick = function(event) {
         PageActions.clearPagePermissions();
         PageActions.removeItem(node);
       }
     }
 
     // Show the password button if needed
     let logins = lm.getAllLogins({});
     for each(login in logins) {
       if (login.hostname != host.prePath)
         continue;
 
       let title = Elements.browserBundle.getString("pageactions.password.forget");
-      let node = this.appendItem(title, "");
+      let node = this.appendItem("preferences", title, "");
       node.onclick = function(event) {
         lm.removeLogin(login);
         PageActions.removeItem(node);
       };
     }
   },
 
   clearPagePermissions: function clearPagePermissions() {
@@ -971,73 +970,55 @@ var PageActions = {
     printSettings.headerStrRight  = '';
 
     let webBrowserPrint = contentWindow.QueryInterface(Ci.nsIInterfaceRequestor)
                                        .getInterface(Ci.nsIWebBrowserPrint);
     webBrowserPrint.print(printSettings, null);
   },
 
   updatePageSaveAs: function updatePageSaveAs() {
+    this.removeItems("saveas");
     if (Browser.selectedBrowser.contentDocument instanceof XULDocument)
       return;
 
     let strings = Elements.browserBundle;
-    let node = this.appendItem(strings.getString("pageactions.saveas.pdf"), "");
+    let node = this.appendItem("saveas", strings.getString("pageactions.saveas.pdf"), "");
     node.onclick = function(event) {
       PageActions._savePageAsPDF();
     }
   },
 
-  appendItem: function appendItem(aTitle, aDesc, aImage) {
+  appendItem: function appendItem(aType, aTitle, aDesc) {
     let container = document.getElementById("pageactions-container");
     let item = document.createElement("pageaction");
     item.setAttribute("title", aTitle);
     item.setAttribute("description", aDesc);
-    if (aImage)
-      item.setAttribute("image", aImage);
+    item.setAttribute("type", aType);
     container.appendChild(item);
 
-    this.resize();
-    container.hidden = !container.hasChildNodes();
-
+    let identityContainer = document.getElementById("identity-container");
+    identityContainer.setAttribute("hasmenu", "true");
     return item;
   },
 
   removeItem: function removeItem(aItem) {
     let container = document.getElementById("pageactions-container");
     container.removeChild(aItem);
 
-    if (container.hasChildNodes())
-      this.resize();
-    container.hidden = !container.hasChildNodes();
-  },
-
-  removeAllItems: function removeAllItems() {
-    let container = document.getElementById("pageactions-container");
-    while(container.hasChildNodes())
-      this.removeItem(container.lastChild);
+    let identityContainer = document.getElementById("identity-container");
+    identityContainer.setAttribute("hasmenu", container.hasChildNodes() ? "true" : "false");
   },
 
-  resize: function resize() {
+  removeItems: function removeItems(aType) {
     let container = document.getElementById("pageactions-container");
-    if (container.hidden)
-      return;
-
-    // We manually size the arrowscrollbox
-    let childHeight = container.firstChild.getBoundingClientRect().height;
-    let linesCount = (window.innerHeight < window.innerWidth) ? Math.round(container.childNodes.length / 2)
-                                                              : container.childNodes.length;
-
-    const kMargin = 64;
-    let toolbarHeight = BrowserUI.toolbarH;
-    let identityHeight = document.getElementById("identity-popup-container").getBoundingClientRect().height;
-    let maxHeight = window.innerHeight - (toolbarHeight + identityHeight) - kMargin;
-
-    let additional = 50; // size of the scroll arrows + margins
-    container.style.height = Math.min(maxHeight, linesCount * childHeight + additional) + "px";
+    let count = container.childNodes.length;
+    for (let i = count - 1; i >= 0; i--) {
+      if (aType == "" || container.childNodes[i].getAttribute("type") == aType)
+        this.removeItem(container.childNodes[i]);
+    }
   }
 }
 
 var NewTabPopup = {
   _timeout: 0,
   _tabs: [],
 
   get box() {
--- a/mobile/chrome/content/browser.js
+++ b/mobile/chrome/content/browser.js
@@ -1700,31 +1700,34 @@ const BrowserSearch = {
 
     // Prevent duplicate
     if (!this._allEngines.some(function (e) {
         return (e.engine.title == aEngine.title) && (e.doc == aDocument);
     })) this._allEngines.push( {engine:aEngine, doc:aDocument});
   },
 
   updatePageSearchEngines: function() {
+    PageActions.removeItems("search");
+
     // Check to see whether we've already added an engine with this title in
     // the search list
     let newEngines = this._currentEngines.filter(function(element) {
       return !this.engines.some(function (e) e.name == element.engine.title);
     }, this);
 
     if (newEngines.length == 0)
       return;
 
     // XXX limit to the first search engine for now
-    for (let i = 0; i<1; i++) {
+    let kMaxSearchEngine = 1;
+    for (let i = 0; i < kMaxSearchEngine; i++) {
       let engine = newEngines[i].engine;
-      let item = PageActions.appendItem(engine.title,
+      let item = PageActions.appendItem("search",
                                         Elements.browserBundle.getString("pageactions.search.addNew"),
-                                        BrowserUI._favicon.src);
+                                        engine.title);
 
       item.engine = engine;
       item.onclick = function() {
         BrowserSearch.addPermanentSearchEngine(item.engine);
         PageActions.removeItem(item);
       };
     }
   },
@@ -2132,19 +2135,16 @@ IdentityHandler.prototype = {
     }
 
     // Push the appropriate strings out to the UI
     this._identityPopupContentHost.textContent = host;
     this._identityPopupContentOwner.textContent = owner;
     this._identityPopupContentSupp.textContent = supplemental;
     this._identityPopupContentVerif.textContent = verifier;
 
-    // clean all the previous result
-    PageActions.removeAllItems();
-
     PageActions.updatePageSaveAs();
 
     // Update the search engines results
     BrowserSearch.updatePageSearchEngines();
 
     // Update the per site permissions results
     PageActions.updatePagePermissions();
   },
--- a/mobile/chrome/content/browser.xul
+++ b/mobile/chrome/content/browser.xul
@@ -304,17 +304,17 @@
           <description id="identity-popup-content-verifier"/>
         </vbox>
         <vbox align="center" pack="start">
           <image id="identity-popup-encryption-icon"/>
           <description id="identity-popup-encryption-label"/>
         </vbox>
       </hbox>
 
-      <arrowscrollbox id="pageactions-container" orient="vertical" class="window-width" hidden="true"/>
+      <hbox id="pageactions-container" class="window-width" hidden="true"/>
     </vbox>
 
     <vbox id="newtab-popup" hidden="true" class="dialog-dark" onclick="NewTabPopup.selectTab()" align="center" left="21">
       <label/>
     </vbox>
 
     <vbox id="bookmark-popup" hidden="true" class="dialog-dark" align="center" left="0">
       <label value="&bookmarkPopup.label;"/>
--- a/mobile/themes/hildon/browser.css
+++ b/mobile/themes/hildon/browser.css
@@ -49,17 +49,16 @@
 }
 
 #toolbar-moveable-container[top="0"] {
   position: fixed;
   left: 0;
   z-index: 1000;
 }
 
-
 /* main toolbar buttons */
 toolbarbutton.urlbar-button {
   /* space out the buttons a bit horizontally */
   margin-left: 8px; /* core spacing */
 }
 
 #tool-app-switch {
   min-width: 64px !important;
@@ -260,17 +259,17 @@ toolbarbutton.page-button {
 }
 
 /* button overflows off the right edge */
 #tool-panel-open {
   list-style-image: url("chrome://browser/skin/images/settings-default-64.png");
   margin-right: -40px; /* big number just to make sure the image overflows the edge */
 }
 
-#tool-panel-open:not([disabled="true"]):active:hover {
+#tool-panel-open:not([disabled="true"]):hover:active {
   list-style-image: url("chrome://browser/skin/images/settings-active-64.png");
 }
 
 /* button overflows off the left edge */
 #tool-panel-close {
   list-style-image: url("chrome://browser/skin/images/settings-open-64.png");
   margin-left: -40px; /* big number just to make sure the image overflows the edge */
 }
@@ -775,20 +774,30 @@ box[type="documenttab"]:only-child .docu
 
 /* Identity popup   -------------------------------------------------------- */
 #identity-container {
   background-image: url("chrome://browser/skin/images/panel-shadow.png");
   background-repeat: repeat-x;
   -moz-box-shadow: black 0 2px 2px;
 }
 
+#identity-container[hasmenu="true"] {
+  -moz-border-radius-bottomleft: 8px;
+  -moz-border-radius-bottomright: 8px;
+}
+
 #identity-popup-container {
   padding: 8px; /* core spacing */
 }
 
+#identity-container[hasmenu="true"] > #identity-popup-container {
+  background-image: -moz-linear-gradient(bottom, rgb(94,95,99) 0%, rgb(54,55,59) 25%, transparent);
+  padding-bottom: 16px;
+}
+
 /* Popup Icons */
 #identity-popup-icon {
   padding: 0;
   list-style-image: url("chrome://browser/skin/images/identity-64.png");
 }
 
 #identity-container[mode="verifiedDomain"] > hbox > #identity-popup-icon {
   list-style-image: url("chrome://browser/skin/images/identitySSL-64.png");
@@ -838,75 +847,108 @@ box[type="documenttab"]:only-child .docu
 }
 
 #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/lock-40.png");
 }
 
 /* Page Actions popup   ---------------------------------------------------- */
-#pageactions-container {
-  border: 2px solid transparent;
-  -moz-border-top-colors: #212429 #52555a;
-  padding: 0 8px;
-  -moz-user-focus: ignore;
-}
-
-#pageactions-container .scrollbox-innerbox {
-  display: inline-block;
+#identity-container[hasmenu="false"] > #pageactions-container {
+  display: none;
 }
 
-#pageactions-container .autorepeatbutton-down {
-  list-style-image: url(images/arrowdowndark-16.png);
-}
-
-#pageactions-container .autorepeatbutton-up {
-  list-style-image: url(images/arrowupdark-16.png);
-}
-
-/* force the autorepeat buttons to create a 'padding' when collapsed */
-#pageactions-container autorepeatbutton[collapsed="true"],
-#pageactions-container autorepeatbutton[disabled="true"] {
-  visibility: hidden;
+#pageactions-container {
+  background: rgb(210, 210, 210) -moz-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(235,235,235,0.4) 90%, rgba(185,185,185,0.4) 100%);
+  border: none;
+  padding: 0;
+  -moz-user-focus: ignore;
+  display: inline-block;
+  -moz-border-radius-bottomleft: 8px;
+  -moz-border-radius-bottomright: 8px;
 }
 
 pageaction {
-  width: 50%;
+  border-color: rgb(255,255,255) rgb(215,215,215) rgb(215,215,215) rgb(255,255,255);
+  background-color: rgb(235,235,235);
+  border-style: solid;
+  border-width: 1px;
   height: 64px;
-  border-width: 10px;
-  -moz-border-image: url("chrome://browser/skin/images/toolbarbutton-default-64.png") 10 repeat repeat;
+  width :100%;
+}
+
+@media all and (orientation: landscape) {
+  pageaction {
+    width: 50%;
+  }
+
+  pageaction:nth-last-child(2):not(:nth-child(even)) {
+    background-image: -moz-linear-gradient(top, rgb(235,235,235) 0%, rgb(215,215,215) 90%);
+    border-bottom: 1px solid #fff;
+    -moz-border-radius-bottomleft: 8px;
+  }
+
+  pageaction:first-child,
+  pageaction:nth-child(2) {
+    background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(235,235,235) 90%) !important;
+  }
+
+  pageaction:last-child:not(:nth-child(even)) {
+    border-bottom: 1px solid #fff;
+    -moz-border-radius-bottomleft: 8px;
+  }
+
+  pageaction:last-child:not(:nth-child(odd)) {
+    border-bottom: 1px solid #fff;
+    -moz-border-radius-bottomright: 8px;
+  }
 }
 
 @media all and (orientation: portrait) {
-  pageaction {
-    width :100%;
+  pageaction:last-child {
+    -moz-border-radius-bottomleft: 8px;
+    -moz-border-radius-bottomright: 8px;
   }
 }
 
-pageaction:active:hover {
-  -moz-border-image: url("chrome://browser/skin/images/toolbarbutton-active-64.png") 10 repeat repeat;
+pageaction:last-child {
+  background-image: -moz-linear-gradient(top, rgb(235,235,235) 0%, rgb(215,215,215) 90%);
+}
+
+pageaction:first-child {
+  background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(235,235,235) 90%);
+}
+
+pageaction:hover:active {
+  background-image: none !important;
+  background-color: #8db8d8;
 }
 
 pageaction .pageaction-image {
   width: 32px;
   height: 32px;
   -moz-margin-end: 8px;
 }
 
 pageaction:not([image]) .pageaction-image {
-  width: 0px;
+  width: 0;
 }
 
 pageaction .pageaction-title {
-  font-size: 18px !important;
+  font-size: 24px !important;
+  color: #414141;
 }
 
 pageaction .pageaction-desc {
   font-size: 14px !important;
-  color: grey;
+  color: darkgray;
+}
+
+pageaction:hover:active  .pageaction-desc {
+  color: white;
 }
 
 pageaction .pageaction-desc[value=""] {
   display: none;
 }
 
 /* Preferences window   ---------------------------------------------------- */
 .settings-title {
--- a/mobile/themes/wince/browser-high.css
+++ b/mobile/themes/wince/browser-high.css
@@ -100,32 +100,16 @@
   background: url("images/leftcapSSL-default-64.png");
 }
 
 #identity-box[mode="verifiedDomain"]:hover:active,
 #identity-box[mode="verifiedDomain"][open] {
   background: url("images/leftcapSSL-active-64.png");
 }
 
-pageaction {
-  height: 64px;
-  border-width: 10px;
-  -moz-border-image: url("chrome://browser/skin/images/toolbarbutton-default-64.png") 10 repeat repeat;
-}
-
-pageaction:active:hover {
-  -moz-border-image: url("chrome://browser/skin/images/toolbarbutton-active-64.png") 10 repeat repeat;
-}
-
-pageaction .pageaction-image {
-  width: 32px;
-  height: 32px;
-  -moz-margin-end: 8px;
-}
-
 #urlbar-throbber[loading] {
   list-style-image: url("chrome://browser/skin/images/throbber.png");
 }
 
 #urlbar-favicon {
   width: 32px;
   height: 32px;
 }
--- a/mobile/themes/wince/browser-low.css
+++ b/mobile/themes/wince/browser-low.css
@@ -99,32 +99,16 @@
   background: url("images/leftcapSSL-default-36.png");
 }
 
 #identity-box[mode="verifiedDomain"]:hover:active,
 #identity-box[mode="verifiedDomain"][open] {
   background: url("images/leftcapSSL-active-36.png");
 }
 
-pageaction {
-  height: 36px;
-  border-width: 6px;
-  -moz-border-image: url("chrome://browser/skin/images/toolbarbutton-default-36.png") 6 repeat repeat;
-}
-
-pageaction:active:hover {
-  -moz-border-image: url("chrome://browser/skin/images/toolbarbutton-active-36.png") 6 repeat repeat;
-}
-
-pageaction .pageaction-image {
-  width: 16px;
-  height: 16px;
-  -moz-margin-end: 4px;
-}
-
 #urlbar-throbber[loading] {
   list-style-image: url("chrome://browser/skin/images/throbber.png");
 }
 
 #urlbar-favicon {
   width: 24px;
   height: 24px;
 }
--- a/mobile/themes/wince/browser.css
+++ b/mobile/themes/wince/browser.css
@@ -477,20 +477,30 @@ box[type="documenttab"]:only-child .docu
 
 /* Identity popup   -------------------------------------------------------- */
 #identity-container {
   background-image: url("chrome://browser/skin/images/panel-shadow.png");
   background-repeat: repeat-x;
   -moz-box-shadow: black 0 0.25mm 0.25mm;
 }
 
+#identity-container[hasmenu="true"] {
+  -moz-border-radius-bottomleft: 1.1mm;
+  -moz-border-radius-bottomright: 1.1mm;
+}
+
 #identity-popup-container {
   padding: 1.1mm; /* core spacing */
 }
 
+#identity-container[hasmenu="true"] > #identity-popup-container {
+  background-image: -moz-linear-gradient(bottom, rgb(94,95,99) 0%, rgb(54,55,59) 25%, transparent);
+  padding-bottom: 2.2mm;
+}
+
 /* Popup Body Text */
 #identity-popup-content-box {
   -moz-padding-start: 1.1mm; /* core spacing */
 }
 
 /* let the text flow into a second row, if needed */
 #identity-popup-runBy-box {
   display: block;
@@ -517,68 +527,114 @@ box[type="documenttab"]:only-child .docu
 }
 
 #identity-popup-content-host,
 #identity-popup-content-owner {
   font-weight: bold;
 }
 
 /* Page Actions popup   ----------------------------------------------------- */
-#pageactions-container {
-  border: 0.2mm solid transparent;
-  -moz-border-top-colors: #212429 #52555a;
-  padding: 0 1.1mm; /* core spacing */
-  -moz-user-focus: ignore;
-}
-
-#pageactions-container .scrollbox-innerbox {
-  display: inline-block;
+#identity-container[hasmenu="false"] > #pageactions-container {
+  display: none;
 }
 
-#pageactions-container .autorepeatbutton-down {
-  list-style-image: url(images/arrowdowndark-16.png);
-}
-
-#pageactions-container .autorepeatbutton-up {
-  list-style-image: url(images/arrowupdark-16.png);
-}
-
-/* force the autorepeat buttons to create a 'padding' when collapsed */
-#pageactions-container autorepeatbutton[collapsed="true"],
-#pageactions-container autorepeatbutton[disabled="true"] {
-  visibility: hidden;
+#pageactions-container {
+  background: rgb(210, 210, 210) -moz-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(235,235,235,0.4) 90%, rgba(185,185,185,0.4) 100%);
+  border: none;
+  padding: 0;
+  -moz-user-focus: ignore;
+  display: inline-block;
+  -moz-border-radius-bottomleft: 1.1mm;
+  -moz-border-radius-bottomright: 1.1mm;
 }
 
 pageaction {
-  width: 50%;
+  border-color: rgb(255,255,255) rgb(215,215,215) rgb(215,215,215) rgb(255,255,255);
+  background-color: rgb(235,235,235);
+  border-style: solid;
+  border-width: 1px;
+  height: 64px;
+  width: 100%;
+}
+
+@media all and (orientation: landscape) {
+  pageaction {
+    width: 50%;
+  }
+
+  pageaction:nth-last-child(2):not(:nth-child(even)) {
+    background-image: -moz-linear-gradient(top, rgb(235,235,235) 0%, rgb(215,215,215) 90%);
+    border-bottom: 1px solid #fff;
+    -moz-border-radius-bottomleft: 1.1mm;
+  }
+
+  pageaction:first-child,
+  pageaction:nth-child(2) {
+    background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(235,235,235) 90%) !important;
+  }
+
+  pageaction:last-child:not(:nth-child(even)) {
+    border-bottom: 1px solid #fff;
+    -moz-border-radius-bottomleft: 1.1mm;
+  }
+
+  pageaction:last-child:not(:nth-child(odd)) {
+    border-bottom: 1px solid #fff;
+    -moz-border-radius-bottomright: 1.1mm;
+  }
 }
 
 @media all and (orientation: portrait) {
-  pageaction {
-    width :100%;
+  pageaction:last-child {
+    -moz-border-radius-bottomleft: 1.1mm;
+    -moz-border-radius-bottomright: 1.1mm;
   }
 }
 
+pageaction:last-child {
+  background-image: -moz-linear-gradient(top, rgb(235,235,235) 0%, rgb(215,215,215) 90%);
+}
+
+pageaction:first-child {
+  background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgba(235,235,235) 90%);
+}
+
+pageaction:hover:active {
+  background-image: none !important;
+  background-color: #8db8d8;
+}
+
+pageaction .pageaction-image {
+  width: 32px;
+  height: 32px;
+  -moz-margin-end: 8px;
+}
+
 pageaction:not([image]) .pageaction-image {
   width: 0;
 }
 
 pageaction .pageaction-title {
   font-size: 9pt !important;
+  color: #414141;
+}
+
+pageaction .pageaction-desc {
+  font-size: 8pt !important;
+  color: darkgray;
+}
+
+pageaction:hover:active .pageaction-desc {
+  color: white;
 }
 
 pageaction .pageaction-desc[value=""] {
   display: none;
 }
 
-pageaction .pageaction-desc {
-  font-size: 8pt !important;
-  color: grey;
-}
-
 /* Preferences window   ---------------------------------------------------- */
 .settings-title {
   font-weight: bold;
   color: black;
   background-color: lightgray;
   margin: 0;
   padding: 0.25mm;
 }