Bug 602674 - Create an Android theme for popups (part 1) [r=mfinkle]
authorMark Finkle <mark.finkle>
Sat, 16 Oct 2010 21:30:00 -0700
changeset 66864 4f85419d73620722e88728dfabaa405f153554da
parent 66863 e4f93224ae83a3a5ebe069558a91ac614ef4ca0e
child 66865 670b76beb6251a48ff9dd813b26f370f441b22c6
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
bugs602674
Bug 602674 - Create an Android theme for popups (part 1) [r=mfinkle]
mobile/chrome/content/bindings/arrowbox.xml
mobile/chrome/content/browser-ui.js
mobile/chrome/content/browser.xul
mobile/themes/core/browser.css
mobile/themes/core/images/popup-bg-hdpi.png
mobile/themes/core/images/popup-selected-item-hdpi.png
mobile/themes/core/jar.mn
mobile/themes/core/platform.css
--- a/mobile/chrome/content/bindings/arrowbox.xml
+++ b/mobile/chrome/content/bindings/arrowbox.xml
@@ -87,29 +87,29 @@
               let anchorClass = "";
               let hideArrow = false;
               if (horizPos == 0) {
                 container.orient = "vertical";
                 arrowbox.orient = "";
                 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";
                   } else if (vertPos == -1) {
                     container.dir = "reverse"; 
                     anchorClass = "bottom";
                   }
                 }
               } 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";
                 } else if (horizPos == -1) {
                   container.dir = "reverse";
                   anchorClass = "right";
                 }
               } else {
--- a/mobile/chrome/content/browser-ui.js
+++ b/mobile/chrome/content/browser-ui.js
@@ -1381,34 +1381,21 @@ var PageActions = {
     this._updateAttributes();
   },
 
   _updateAttributes: function _updateAttributes() {
     let container = document.getElementById("pageactions-container");
     let visibleNodes = container.querySelectorAll("pageaction:not([hidden=true])");
     let visibleCount = visibleNodes.length;
 
-    let first = null, last = null;
-    for (let i = 0; i < visibleCount; i++) {
-      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) {
-      visibleNodes[visibleCount - 1].setAttribute("selector", "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");
-    }
+    for (let i = 0; i < visibleCount; i++)
+      visibleNodes[i].classList.remove("odd-last-child");
+
+    if (visibleCount % 2)
+      visibleNodes[visibleCount - 1].classList.add("odd-last-child");
   }
 };
 
 var NewTabPopup = {
   _timeout: 0,
   _tabs: [],
 
   get box() {
@@ -1510,20 +1497,19 @@ var AwesomePanel = function(aElementId, 
   }
 };
 
 var BookmarkPopup = {
   get box() {
     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.top  = BrowserUI.starButton.getBoundingClientRect().top + margin;
+    this.box.setAttribute(tabsSidebar.left < controlsSidebar.left ? "right" : "left", controlsSidebar.width - this.box.offset);
+    this.box.top = BrowserUI.starButton.getBoundingClientRect().top - this.box.offset;
 
     // Hide the popup if there is any new page loading
     let self = this;
     messageManager.addMessageListener("pagehide", function(aMessage) {
       self.hide();
     });
 
     return this.box;
@@ -1537,16 +1523,17 @@ var BookmarkPopup = {
       this._bookmarkPopupTimeout = -1;
     }
     this.box.hidden = true;
     BrowserUI.popPopup();
   },
 
   show : function show(aAutoClose) {
     this.box.hidden = false;
+    this.box.anchorTo(BrowserUI.starButton);
 
     if (aAutoClose) {
       this._bookmarkPopupTimeout = setTimeout(function (self) {
         self._bookmarkPopupTimeout = -1;
         self.hide();
       }, 2000, this);
     }
 
--- a/mobile/chrome/content/browser.xul
+++ b/mobile/chrome/content/browser.xul
@@ -348,25 +348,25 @@
         <pageaction id="pageaction-password" title="&pageactions.password.forget;"
           onclick="PageActions.forgetPassword(event);"/>
         <pageaction id="pageaction-reset" title="&pageactions.reset;"
           onclick="PageActions.clearPagePermissions(event);"/>
         <pageaction id="pageaction-search" title="&pageactions.search.addNew;"/>
       </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">
         <image id="bookmark-image"/>
       </hbox>
       <hbox pack="center">
         <button class="button-dark" label="&editBookmarkDone.label;" oncommand="BookmarkHelper.save();"/>
       </hbox>
--- a/mobile/themes/core/browser.css
+++ b/mobile/themes/core/browser.css
@@ -989,30 +989,28 @@ documenttab[reload="true"] > stack > .do
 #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   ---------------------------------------------------- */
 .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: none;
+  border-top: 1px solid rgb(205,205,205);
   padding: 0;
   -moz-user-focus: ignore;
   display: inline-block;
 }
 
 .prompt-button,
 pageaction {
-  -moz-border-top-colors: rgb(235, 235, 235);
-  -moz-border-right-colors: rgb(205, 205, 205);
-  -moz-border-bottom-colors: rgb(205, 205, 205);
-  -moz-border-left-colors: rgb(235, 235, 235);
-  background-color: rgb(235,235,235);
+  -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;
   width :100%;
 }
 
 /* Override buttons style */
 .prompt-button {
@@ -1025,77 +1023,29 @@ pageaction {
 }
 
 @media (min-width: 500px) {
   .prompt-button,
   pageaction {
     width: 50%;
   }
 
-  .prompt-button:nth-last-child(2):not(:nth-child(even)),
-  pageaction[selector="second-last-child"][even=false] {
-    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;
+  .prompt-button:last-child:nth-child(odd),
+  pageaction.odd-last-child {
     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-color: #8db8d8 !important;
+  background: url("chrome://browser/skin/images/popup-selected-item-hdpi.png") repeat-x !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 {
   width: 32px;
   height: 32px;
   -moz-margin-end: 8px;
 }
 
@@ -1109,20 +1059,16 @@ pageaction:not([image]) > hbox >.pageact
   color: #414141 !important;
 }
 
 .pageaction-desc {
   font-size: 14px !important;
   color: #414141;
 }
 
-pageaction:hover:active > vbox > .pageaction-desc {
-  color: white;
-}
-
 .pageaction-desc[value=""] {
   display: none;
 }
 
 /* Preferences window   ---------------------------------------------------- */
 .settings-title {
   font-weight: bold;
   color: black;
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..df8e20c929f0af34effdf0eddd1fb966934ea75a
GIT binary patch
literal 4277
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
Xvk11PAvqxM00000NkvXXu0mjfxZ-jy
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..9cac088e92958606917610ea9eb24b5fb00710a6
GIT binary patch
literal 1191
zc$|GxU1$_n6rNop4QUl?eW|o~8PVeE&d(;h;|^Kf-I-mpC6g|j3Fa}AnVV#Y^W)5o
zyGaqUJ_vm)ltLdW<Vk{}1yPC^jU_E;+ES!V)MWFYO>7$|So%;Z;+;)4R56~1nRCv3
z-*?Zw_nXhMEhl!=?X4pSVn?P)%n`&kfb)3mHvF8pwsZl%-bbl+)M|C1yy8G2p;?^}
zWDKPn=AfeWpS}+pF^kmYcGNC4^QvV~iie>JhD~_Uc)VaMYA-~f6L#xnjQs1?C<$~e
zMxG2yjARS2M{gQ%VCz7OtPb?5QH?x)3^W#aEMP#SfP!(#booMztmyJM_u4cGDiG8g
zBiDy&m$E>x90<Y`6I7W910pQN);Dk*cLanOmZ6yt&4z+3$Jd8=h5;Kv;?*3ji_eMa
zjkRzUBYP0Cd794W^Hjc`vYc+3jYgxMMko}-h@jhVBBc;C-ThSs5xT0Q+eo)e;MGc}
z)rVpvS>1wRZ_1kP#xdaoqYH{nvlK)B4=71*h8o5u+C@3o^=7my_uG)pLD%YYRD5w=
z`#rMF3l3C}<;a$Gs(Omq9t&A+k7Wa)H4G$0)lILi;3bLAm@ZOG6=uX3i93|8YkayP
z6po}tK@4#m%Zllw$VF2E!$vqkU{c9Ml`C3mp8-u&<!YFl2-im=4e18VJ^EU%XN7e(
zbo4V&OFNbUDqH6Dt!GJWJ<B>*d(A8x+~k&A8V^Iia?#Zmc8`~C+7=g^#)l?$yMt{_
zQmTM|2|3#=r^>5qi_5>yFRsoltW3`=PClA>_;_|^Zh2wpNojUz;$i90)ZF+_52i{B
zzfDdrul)JTgUO4-S3W&^?#8zxV?T_~&X=!zbA9B_*yHK>Uniz+kAA;Y{-f#VvWE3<
zWyFMBm|82{Pb7VNYQB5-+2FmE^L78OW@`T4`SoSzN$=`=!%uzkO@G^+!2mZj&SlGl
ze3NK<UJQIRw7a&sxK{iaFx#&YZISqaU0?b8-wG7(?zy)wTdtM;#Y3N;tbj&*U&cG?
zw6`m*eM94Whim+;;PAS@peOLuFZ+GPyI&Mb#XxtZPrMv)^^<qTMh1MBJ{Sy)#{b#X
YLHx*m_}{^y>&LvWnN*8-HQ90Q1tw{sf&c&j
--- a/mobile/themes/core/jar.mn
+++ b/mobile/themes/core/jar.mn
@@ -21,16 +21,18 @@ chrome.jar:
   skin/images/arrowleft-16.png              (images/arrowleft-16.png)
   skin/images/arrowright-16.png             (images/arrowright-16.png)
   skin/images/arrowup-16.png                (images/arrowup-16.png)
   skin/images/arrowdown-16.png              (images/arrowdown-16.png)
   skin/images/arrowleftdark-16.png          (images/arrowleftdark-16.png)
   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)
   skin/images/check-selected-30.png         (images/check-selected-30.png)
   skin/images/check-unselected-30.png       (images/check-unselected-30.png)
   skin/images/dropmarker-30.png             (images/dropmarker-30.png)
   skin/images/dropmarker-rtl-30.png         (images/dropmarker-rtl-30.png)
   skin/images/dropmarker-disabled-30.png    (images/dropmarker-disabled-30.png)
--- a/mobile/themes/core/platform.css
+++ b/mobile/themes/core/platform.css
@@ -103,38 +103,32 @@ textbox[isempty="true"] {
   padding: 8px;
 }
 
 /* prompt dialogs ---------------------------------------------------------- */
 .context-block,
 .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 {
-  color: #fff !important;
-  background-color: transparent;
-  -moz-border-radius: 8px;
-  -moz-box-shadow: black 0 2px 2px;
+dialog,
+.panel-arrowcontent {
+  background: url("chrome://browser/skin/images/popup-bg-hdpi.png") left bottom repeat-x;
+  background-color: white;
+  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 {
   font-size: 24px !important;
 }
 
 @media (max-width: 499px) {
   .context-block,
@@ -307,17 +301,16 @@ toolbarbutton.button-dark[type="checkbox
   /* checked overrides */
   color: #fff !important;
   background: none !important;
   padding: 2px 4px !important;
 }
 
 /* checkbox buttons ----------------------------------------------------------- */
 .button-checkbox {
-  color: #fff;
   padding: 0 !important;
   background: none !important;
   border: none !important;
   -moz-border-image: none !important;
 }
 
 .button-checkbox > .button-image-icon {
   -moz-margin-end: 8px;
@@ -694,48 +687,35 @@ arrowbox {
   border: none;
 }
 
 .panel-dark {
   color: white;
   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;
 }
 
 .panel-arrow[side="bottom"] {
   list-style-image: url("chrome://browser/skin/images/arrowbox-down.png");
-  margin-left: 6px;
-  margin-right: 6px;
-  margin-top: -12px;
+  margin-top: -8px;
 }
 
 .panel-arrow[side="left"] {
   list-style-image: url("chrome://browser/skin/images/arrowbox-horiz.png");
-  margin-top: 6px;
-  margin-bottom: 6px;
-  margin-right: -12px;
+  margin-right: -8px;
+  -moz-transform: scaleX(-1);
 }
 
 .panel-arrow[side="right"] {
   list-style-image: url("chrome://browser/skin/images/arrowbox-horiz.png");
-  -moz-transform: scaleX(-1);
-  margin-top: 6px;
-  margin-bottom: 6px;
-  margin-left: -12px;
+  margin-left: -8px;
 }
 
 /*.panel-row-header ------------------------------------------------------------ */
 .panel-row-header {
   border-bottom: 4px solid rgb(101,121,227);
   background-color: rgb(94,97,102);
   padding: 0 !important;
 }