Bug 606220 - Style menulist popup to match the new theme [r=mfinkle]
authorMatt Brubeck <mbrubeck@mozilla.com>
Thu, 21 Oct 2010 12:19:58 -0700
changeset 66900 26d2c1196c725d0cedc9fab993592d9708f80c3c
parent 66899 818db9cc0a4ddcd044b084a56151b37abc28d397
child 66901 4f77a9c65c6798ecfb56f3d39eeedf2532dd0822
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)
reviewersmfinkle
bugs606220
Bug 606220 - Style menulist popup to match the new theme [r=mfinkle]
mobile/chrome/content/browser-ui.js
mobile/chrome/content/browser.xul
mobile/themes/core/browser.css
--- a/mobile/chrome/content/browser-ui.js
+++ b/mobile/chrome/content/browser-ui.js
@@ -2386,17 +2386,17 @@ var MenuListHelperUI = {
       listbox.removeChild(listbox.firstChild);
 
     let children = this._currentList.menupopup.children;
     for (let i = 0; i < children.length; i++) {
       let child = children[i];
       let item = document.createElement("richlistitem");
       // Add selected as a class name instead of an attribute to not being overidden
       // by the richlistbox behavior (it sets the "current" and "selected" attribute
-      item.setAttribute("class", "menulist-command" + (child.selected ? " selected" : ""));
+      item.setAttribute("class", "menulist-command prompt-button" + (child.selected ? " selected" : ""));
 
       let image = document.createElement("image");
       image.setAttribute("src", child.image || "");
       item.appendChild(image);
 
       let label = document.createElement("label");
       label.setAttribute("value", child.label);
       item.appendChild(label);
--- a/mobile/chrome/content/browser.xul
+++ b/mobile/chrome/content/browser.xul
@@ -535,17 +535,17 @@
         </hbox>
       </vbox>
       <spacer flex="1000"/>
     </vbox>
 
     <hbox id="menulist-container" class="window-width window-height context-block" top="0" left="0" hidden="true" flex="1">
       <vbox id="menulist-popup" class="dialog-dark">
         <label id="menulist-title" crop="center" flex="1"/>
-        <richlistbox id="menulist-commands" onclick="if (event.target != this) MenuListHelperUI.selectByIndex(this.selectedIndex);" flex="1"/>
+        <richlistbox id="menulist-commands" class="prompt-buttons" onclick="if (event.target != this) MenuListHelperUI.selectByIndex(this.selectedIndex);" flex="1"/>
       </vbox>
     </hbox>
 
     <hbox id="context-container" class="window-width window-height context-block" top="0" left="0" hidden="true">
       <vbox id="context-popup" class="dialog-dark">
         <hbox id="context-header">
           <label id="context-hint" crop="center" flex="1"/>
         </hbox>
--- a/mobile/themes/core/browser.css
+++ b/mobile/themes/core/browser.css
@@ -1025,30 +1025,32 @@ documenttab[reload="true"] > stack > .do
 pageaction {
   -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: 1px !important;
   height: 64px;
+  min-height: 64px;
   width: 100%;
+  min-width: 200px; /* keep the button from being too narrow */
 }
 
 /* Override richlistbox and richlistitem styles */
 #context-commands > scrollbox {
   width: 100%;
 }
 
+.prompt-button,
 .context-command {
   -moz-box-align: center;
-  min-height: 64px;
-  min-width: 200px; /* keep the button from being too narrow */
 }
 
+.prompt-button[selected="true"],
 .context-command[selected="true"] {
   background: transparent;
 }
 
 /* Override button styles */
 .prompt-button {
   margin: 0;
   -moz-border-image: none !important;
@@ -1426,79 +1428,30 @@ echrome-select-option[disabled="true"] {
   min-width: 30px;
 }
 
 .chrome-select-option[selected="true"] {
   list-style-image: url("chrome://browser/skin/images/check-30.png");
 }
 
 /* menulist popup ---------------------------------------------------------- */
-#menulist-popup {
-  border: none;
-  padding: 1px;
-  -moz-border-radius: 8px;
-}
-
 #menulist-popup > #menulist-title {
   padding: 12px 4px 4px 4px;
   font-size: 18px;
 }
 
 #menulist-popup > #menulist-title[value=""] {
   display: none;
 }
 
-#menulist-commands {
-  border: 1px solid rgb(207,207,207);
-  -moz-border-radius: 8px;
-}
-
-#menulist-popup > label:not([value=""]) + #menulist-commands {
-  -moz-border-radius-topleft: 0;
-  -moz-border-radius-topright: 0;
-}
-
-.menulist-command,
-.menulist-command[selected] {
-  -moz-box-align: center;
-  background-color: rgb(245,245,245);
-  min-width: 200px; /* keep the command from being too narrow */
-}
-
 .menulist-command > image {
   width: 32px;
   height: 32px;
 }
 
-.menulist-command:first-child {
-  background: -moz-linear-gradient(top, rgb(255,255,255), rgb(245,245,245));
-}
-
-#menulist-popup > #menulist-title[value=""] + #menulist-commands > .menulist-command:first-child {
-  -moz-border-radius: 8px 8px 0 0;
-}
-
-.menulist-command:last-child {
-  background: -moz-linear-gradient(top, rgb(245,245,245), rgb(215,215,215));
-  -moz-border-radius: 0 0 8px 8px;
-}
-
-.menulist-command:first-child:last-child {
-  -moz-border-radius: 8px;
-}
-
-.menulist-command:hover:active {
-  background: #8db8d8;
-}
-
-.menulist-command.selected {
-  background: #8db8d8;
-  pointer-events: none;
-}
-
 .menulist-command.selected > image {
   width: 30px;
   height: 30px;
   list-style-image: url("chrome://browser/skin/images/check-30.png");
   margin-right: 2px;
   margin-top: 2px;
 }