Bug 602674 - Create an Android theme for popups (part 1) [r=mfinkle]

mobile/chrome/content/bindings/arrowbox.xml

@@ -92,7 +92,7 @@
                 if (vertPos == 0) {
                   hideArrow = true;
                 } else {
-                  arrowbox.style.MozMarginStart = (anchorRect.left + (anchorRect.width / 2) - HALF_ARROW_WIDTH) + "px";
+                  arrowbox.style.MozMarginStart = ((anchorRect.left - popupRect.left) + (anchorRect.width / 2) - HALF_ARROW_WIDTH) + "px";
                   if (vertPos == 1) {
                     container.dir = ""; 
                     anchorClass = "top";
@@ -104,7 +104,7 @@
               } else if (vertPos == 0) {
                 container.orient = "";
                 arrowbox.orient = "vertical";
-                arrowbox.style.MozMarginStart = (anchorRect.top + (anchorRect.height / 2) - HALF_ARROW_WIDTH) + "px";
+                arrowbox.style.marginTop = ((anchorRect.top - popupRect.top) + (anchorRect.height / 2) - HALF_ARROW_WIDTH) + "px";
                 if (horizPos == 1) {
                   container.dir = ""; 
                   anchorClass = "left";

mobile/chrome/content/browser-ui.js

@@ -1386,24 +1386,11 @@ var PageActions = {
     let visibleNodes = container.querySelectorAll("pageaction:not([hidden=true])");
     let visibleCount = visibleNodes.length;
 
-    let first = null, last = null;
+    for (let i = 0; i < visibleCount; i++)
-    for (let i = 0; i < visibleCount; i++) {
+      visibleNodes[i].classList.remove("odd-last-child");
-      let node = visibleNodes[i];
-      node.removeAttribute("selector");
-      // Note: CSS indexes start at one, so even/odd are swapped.
-      node.setAttribute("even", (i % 2) ? "true" : "false");
-    }
 
-    if (visibleCount >= 1) {
+    if (visibleCount % 2)
-      visibleNodes[visibleCount - 1].setAttribute("selector", "last-child");
+      visibleNodes[visibleCount - 1].classList.add("odd-last-child");
-      visibleNodes[0].setAttribute("selector", "first-child");
-    }
-
-    if (visibleCount >= 2) {
-      visibleNodes[visibleCount - 2].setAttribute("selector", "second-last-child");
-      visibleNodes[0].setAttribute("selector", "first-child");
-      visibleNodes[1].setAttribute("selector", "second-child");
-    }
   }
 };
 
@@ -1515,10 +1502,9 @@ var BookmarkPopup = {
     delete this.box;
     this.box = document.getElementById("bookmark-popup");
 
-    const margin = 10;
     let [tabsSidebar, controlsSidebar] = [Elements.tabs.getBoundingClientRect(), Elements.controls.getBoundingClientRect()];
-    this.box.setAttribute(tabsSidebar.left < controlsSidebar.left ? "right" : "left", controlsSidebar.width + margin);
+    this.box.setAttribute(tabsSidebar.left < controlsSidebar.left ? "right" : "left", controlsSidebar.width - this.box.offset);
-    this.box.top  = BrowserUI.starButton.getBoundingClientRect().top + margin;
+    this.box.top = BrowserUI.starButton.getBoundingClientRect().top - this.box.offset;
 
     // Hide the popup if there is any new page loading
     let self = this;
@@ -1542,6 +1528,7 @@ var BookmarkPopup = {
 
   show : function show(aAutoClose) {
     this.box.hidden = false;
+    this.box.anchorTo(BrowserUI.starButton);
 
     if (aAutoClose) {
       this._bookmarkPopupTimeout = setTimeout(function (self) {

mobile/chrome/content/browser.xul

@@ -353,15 +353,15 @@
       </hbox>
     </arrowbox>
 
-    <vbox id="bookmark-popup" hidden="true" class="dialog-dark" align="center">
+    <arrowbox id="bookmark-popup" hidden="true" align="center" offset="12">
       <label value="&bookmarkPopup.label;"/>
       <separator class="thin"/>
       <vbox>
-        <button id="bookmark-popup-edit" label="&bookmarkEdit.label;" class="button-dark" oncommand="BookmarkHelper.edit();"/>
+        <button id="bookmark-popup-edit" label="&bookmarkEdit.label;" oncommand="BookmarkHelper.edit();"/>
         <spacer/>
-        <button id="bookmark-popup-remove" label="&bookmarkRemove.label;" class="button-dark" oncommand="BookmarkPopup.hide(); BookmarkHelper.removeBookmarksForURI(getBrowser().currentURI);"/>
+        <button id="bookmark-popup-remove" label="&bookmarkRemove.label;" oncommand="BookmarkPopup.hide(); BookmarkHelper.removeBookmarksForURI(getBrowser().currentURI);"/>
       </vbox>
-    </vbox>
+    </arrowbox>
 
     <vbox id="bookmark-container" hidden="true" class="panel-dark window-width">
       <hbox id="bookmark-form" align="start">

mobile/themes/core/browser.css

@@ -994,8 +994,7 @@ documenttab[reload="true"] > stack > .documenttab-reload {
 /* Page Actions popup   ---------------------------------------------------- */
 .prompt-buttons,
 #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-top: 1px solid rgb(205,205,205);
-  border: none;
   padding: 0;
   -moz-user-focus: ignore;
   display: inline-block;
@@ -1003,11 +1002,10 @@ documenttab[reload="true"] > stack > .documenttab-reload {
 
 .prompt-button,
 pageaction {
-  -moz-border-top-colors: rgb(235, 235, 235);
+  -moz-border-top-colors: white;
-  -moz-border-right-colors: rgb(205, 205, 205);
+  -moz-border-right-colors: rgb(175,175,175);
-  -moz-border-bottom-colors: rgb(205, 205, 205);
+  -moz-border-bottom-colors: rgb(175,175,175);
-  -moz-border-left-colors: rgb(235, 235, 235);
+  -moz-border-left-colors: white;
-  background-color: rgb(235,235,235);
   border-style: solid;
   border-width: 1px !important;
   height: 64px;
@@ -1030,67 +1028,19 @@ pageaction {
     width: 50%;
   }
 
-  .prompt-button:nth-last-child(2):not(:nth-child(even)),
+  .prompt-button:last-child:nth-child(odd),
-  pageaction[selector="second-last-child"][even=false] {
+  pageaction.odd-last-child {
-    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;
-  }
-
-  .prompt-button:first-child,
-  .prompt-button:nth-child(2),
-  pageaction[selector="first-child"],
-  pageaction[selector="second-child"] {
-    background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(235,235,235) 90%) !important;
-  }
-
-  .prompt-button:last-child:not(:nth-child(even)),
-  pageaction[selector="last-child"][even=false] {
-    border-bottom: 1px solid #fff;
-    -moz-border-radius-bottomleft: 8px;
-    -moz-border-radius-bottomright: 8px;
     width: 100%;
   }
-
-  .prompt-button:last-child:not(:nth-child(odd)),
-  pageaction[selector="last-child"][even=true] {
-    border-bottom: 1px solid #fff;
-    -moz-border-radius-bottomright: 8px;
-  }
-
-  .prompt-button:nth-last-child(2):not(:nth-child(even)):-moz-locale-dir(rtl) {
-    -moz-border-radius-bottomleft: 0;
-    -moz-border-radius-bottomright: 8px;
-  }
-
-  .prompt-button:last-child:not(:nth-child(odd)):-moz-locale-dir(rtl) {
-    -moz-border-radius-bottomright: 0;
-    -moz-border-radius-bottomleft: 8px;
-  }
-}
-
-@media (max-width: 499px) {
-  .prompt-button:last-child,
-  pageaction[selector="last-child"] {
-    -moz-border-radius-bottomleft: 8px;
-    -moz-border-radius-bottomright: 8px;
-  }
-}
-
-.prompt-button:last-child,
-pageaction[selector="last-child"] {
-  background-image: -moz-linear-gradient(top, rgb(235,235,235) 0%, rgb(215,215,215) 90%);
-}
-
-.prompt-button:first-child,
-pageaction[selector="first-child"] {
-  background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(235,235,235) 90%);
 }
 
 .prompt-button:not([disabled]):hover:active,
 pageaction:not([disabled]):hover:active {
-  background-image: none !important;
+  background: url("chrome://browser/skin/images/popup-selected-item-hdpi.png") repeat-x !important;
-  background-color: #8db8d8 !important;
+  background-origin: border-box !important;
+  background-clip: border-box !important;
+  -moz-border-top-colors: transparent;
+  -moz-border-left-colors: transparent;
 }
 
 pageaction > hbox > .pageaction-image {
@@ -1114,10 +1064,6 @@ pageaction:not([image]) > hbox >.pageaction-image {
   color: #414141;
 }
 
-pageaction:hover:active > vbox > .pageaction-desc {
-  color: white;
-}
-
 .pageaction-desc[value=""] {
   display: none;
 }

mobile/themes/core/jar.mn

@@ -26,6 +26,8 @@ chrome.jar:
   skin/images/arrowrightdark-16.png         (images/arrowrightdark-16.png)
   skin/images/arrowupdark-16.png            (images/arrowupdark-16.png)
   skin/images/arrowdowndark-16.png          (images/arrowdowndark-16.png)
+  skin/images/popup-bg-hdpi.png             (images/popup-bg-hdpi.png)
+  skin/images/popup-selected-item-hdpi.png  (images/popup-selected-item-hdpi.png)
   skin/images/arrowbox-up.png               (images/arrowbox-up.png)
   skin/images/arrowbox-down.png             (images/arrowbox-down.png)
   skin/images/arrowbox-horiz.png            (images/arrowbox-horiz.png)

mobile/themes/core/platform.css

@@ -108,28 +108,22 @@ textbox[isempty="true"] {
 .modal-block {
   -moz-box-align: center;
   -moz-box-pack: center;
-  background-color: rgba(128, 128, 128, 0.5);
+  background-color: rgba(0,0,0,.6);
   padding: 64px;
 }
 
-dialog {
+dialog,
-  color: #fff !important;
+.panel-arrowcontent {
-  background-color: transparent;
+  background: url("chrome://browser/skin/images/popup-bg-hdpi.png") left bottom repeat-x;
-  -moz-border-radius: 8px;
+  background-color: white;
-  -moz-box-shadow: black 0 2px 2px;
+  border-radius: 8px;
+  box-shadow: black 0 2px 2px, black 0 -1px 2px;
+  padding: 8px 0; /* core spacing on top/bottom */
 }
 
 dialog > .prompt-header {
   padding: 8px;
   font-size: 18px !important;
-  -moz-border-radius: 8px 8px 0 0;
-  background-color: #767973;
-  border-style: solid;
-  border-width: 4px 3px 2px 3px;
-  -moz-border-top-colors: black #4a4b4f;
-  -moz-border-left-colors: black #4a4b4f;
-  -moz-border-bottom-colors: black #4a4b4f;
-  -moz-border-right-colors: black #4a4b4f;
 }
 
 dialog > .prompt-header > .prompt-title {
@@ -312,7 +306,6 @@ toolbarbutton.button-dark[type="checkbox"][checked="true"] {
 
 /* checkbox buttons ----------------------------------------------------------- */
 .button-checkbox {
-  color: #fff;
   padding: 0 !important;
   background: none !important;
   border: none !important;
@@ -699,13 +692,6 @@ arrowbox {
   background: rgb(94,97,102);
 }
 
-.panel-arrowcontent {
-  background-color: white;
-  border-radius: 8px;
-  box-shadow: black 0 2px 2px, black 0 -2px 2px;
-  padding: 8px 0;
-}
-
 .panel-arrow[side="top"] {
   list-style-image: url("chrome://browser/skin/images/arrowbox-up.png");
   margin-bottom: -8px;
@@ -713,24 +699,18 @@ arrowbox {
 
 .panel-arrow[side="bottom"] {
   list-style-image: url("chrome://browser/skin/images/arrowbox-down.png");
-  margin-left: 6px;
+  margin-top: -8px;
-  margin-right: 6px;
-  margin-top: -12px;
 }
 
 .panel-arrow[side="left"] {
   list-style-image: url("chrome://browser/skin/images/arrowbox-horiz.png");
-  margin-top: 6px;
+  margin-right: -8px;
-  margin-bottom: 6px;
+  -moz-transform: scaleX(-1);
-  margin-right: -12px;
 }
 
 .panel-arrow[side="right"] {
   list-style-image: url("chrome://browser/skin/images/arrowbox-horiz.png");
-  -moz-transform: scaleX(-1);
+  margin-left: -8px;
-  margin-top: 6px;
-  margin-bottom: 6px;
-  margin-left: -12px;
 }
 
 /*.panel-row-header ------------------------------------------------------------ */