Bug 577931 - Mac OS X specific styling of menu buttons in popup notifications. r=dao a=blocking-betaN
authorMargaret Leibovic <margaret.leibovic@gmail.com>
Fri, 05 Nov 2010 14:03:42 -0700
changeset 56974 c609be50b0b20180148fe4be05e3b61c16f90e2d
parent 56973 c2e080da2214bb476d2fcdd11ef69a37ef82ca74
child 56975 e3230a374d65754f0c09dfba072fd13394f5934d
push id16741
push usermargaret.leibovic@gmail.com
push dateFri, 05 Nov 2010 21:25:12 +0000
treeherdermozilla-central@c609be50b0b2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao, blocking-betaN
bugs577931
milestone2.0b8pre
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 577931 - Mac OS X specific styling of menu buttons in popup notifications. r=dao a=blocking-betaN
browser/themes/pinstripe/browser/browser.css
toolkit/themes/pinstripe/global/arrow/arrow-dn-white.png
toolkit/themes/pinstripe/global/button.css
toolkit/themes/pinstripe/global/dropmarker.css
toolkit/themes/pinstripe/global/jar.mn
toolkit/themes/pinstripe/global/notification.css
toolkit/themes/pinstripe/global/popup.css
--- a/browser/themes/pinstripe/browser/browser.css
+++ b/browser/themes/pinstripe/browser/browser.css
@@ -1932,17 +1932,16 @@ toolbarbutton.chevron > .toolbarbutton-m
   -moz-appearance: none;
   background-color: #fffcd6;
   border: 1px solid #dad8b6;
   padding: 5px 5px 5px 5px;
   font-weight: bold;
 }
 
 #notification-popup {
-  color: #fff;
   margin-left: -16px;
   margin-right: -16px;
 }
 
 #notification-popup-box {
   margin: 0 3px;
 }
 
new file mode 100644
index 0000000000000000000000000000000000000000..8a858077971863d58dfa8768268d173f31ca66fb
GIT binary patch
literal 210
zc%17D@N?(olHy`uVBq!ia0vp^oIuRR!3HD+k8e2&q$EpRBT9nv(@M${i&7aJQ}UBi
z6+Ckj(^G>|6H_V+Po~-c6_t3pIEGZ*N=ivcn85yMrNf!C4V?cN3MEhf|Nnnx{r`Wu
z2Tq+j)wu4FzJP(T@n!=<BcprFS}TqwaWMxtng{$d5$<44dGr7K`}<BQtPcOO7W|MB
ziFL@HS@-9Mp|HpNpI={J=Mj*f{ZgT|$-#!RqjJJgMkXGH=>J9@UuIms2(+KU)78&q
Iol`;+0CvMrlK=n!
--- a/toolkit/themes/pinstripe/global/button.css
+++ b/toolkit/themes/pinstripe/global/button.css
@@ -82,17 +82,17 @@ button[type="menu-button"] {
 .button-menubutton-button {
   -moz-appearance: none;
   margin: 0;
 }
 
 .button-menu-dropmarker,
 .button-menubutton-dropmarker {
   -moz-appearance: none !important;
-  border: none !important;
+  border: none;
   background-color: transparent !important;
   margin: 1px;
 }
 
 .button-menu-dropmarker {
   display: none;
 }
 
--- a/toolkit/themes/pinstripe/global/dropmarker.css
+++ b/toolkit/themes/pinstripe/global/dropmarker.css
@@ -9,24 +9,19 @@ dropmarker {
   -moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow;
   -moz-border-left-colors: ThreeDLightShadow ThreeDHighlight;
   background-color: -moz-Dialog;
   padding: 1px;
   list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
   -moz-image-region: auto;
 }
 
-dropmarker:hover:active {
+dropmarker:hover:active:not([disabled="true"]) {
   -moz-border-top-colors: ThreeDShadow ThreeDFace;
   -moz-border-right-colors: ThreeDShadow ThreeDFace;
   -moz-border-bottom-colors: ThreeDShadow ThreeDFace;
   -moz-border-left-colors: ThreeDShadow ThreeDFace;
   padding: 2px 0 0 2px;
 }
 
 dropmarker[disabled="true"] {
   list-style-image: url("chrome://global/skin/arrow/arrow-dn-dis.gif");
-  -moz-border-top-colors: ThreeDLightShadow ThreeDHighlight !important;
-  -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow !important;
-  -moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow !important;
-  -moz-border-left-colors: ThreeDLightShadow ThreeDHighlight !important;
-  padding: 1px !important;
 }
--- a/toolkit/themes/pinstripe/global/jar.mn
+++ b/toolkit/themes/pinstripe/global/jar.mn
@@ -50,16 +50,17 @@ toolkit.jar:
   skin/classic/global/tree.css
 * skin/classic/global/viewbuttons.css
 * skin/classic/global/webConsole.css
 * skin/classic/global/webConsole_networkPanel.css
   skin/classic/global/wizard.css
   skin/classic/global/arrow/arrow-dn-dis.gif                         (arrow/arrow-dn-dis.gif)
   skin/classic/global/arrow/arrow-dn-dis.png                         (arrow/arrow-dn-dis.png)
   skin/classic/global/arrow/arrow-dn-sharp.gif                       (arrow/arrow-dn-sharp.gif)
+  skin/classic/global/arrow/arrow-dn-white.png                       (arrow/arrow-dn-white.png)
   skin/classic/global/arrow/arrow-dn.gif                             (arrow/arrow-dn.gif)
   skin/classic/global/arrow/arrow-dn.png                             (arrow/arrow-dn.png)
   skin/classic/global/arrow/arrow-lft-dis.gif                        (arrow/arrow-lft-dis.gif)
   skin/classic/global/arrow/arrow-lft-hov.gif                        (arrow/arrow-lft-hov.gif)
   skin/classic/global/arrow/arrow-lft-sharp-end.gif                  (arrow/arrow-lft-sharp-end.gif)
   skin/classic/global/arrow/arrow-lft-sharp.gif                      (arrow/arrow-lft-sharp.gif)
   skin/classic/global/arrow/arrow-lft.gif                            (arrow/arrow-lft.gif)
   skin/classic/global/arrow/arrow-rit-dis.gif                        (arrow/arrow-rit-dis.gif)
--- a/toolkit/themes/pinstripe/global/notification.css
+++ b/toolkit/themes/pinstripe/global/notification.css
@@ -80,8 +80,71 @@ notification[type="critical"] .messageIm
   list-style-image: url("chrome://global/skin/icons/closetab-active.png");
 }
 
 .messageCloseButton:-moz-focusring > .toolbarbutton-icon {
   border-radius: 10000px;
   box-shadow: 0 0 2px 1px -moz-mac-focusring,
               0 0 0 2px -moz-mac-focusring inset;
 }
+
+/* Popup notification */
+
+.popup-notification-description {
+  margin-bottom: 10px;
+  -moz-margin-start: 5px;
+}
+
+.popup-notification-menubutton {
+  -moz-appearance: none;
+}
+
+.popup-notification-menubutton > .button-menubutton-button,
+.popup-notification-menubutton > .button-menubutton-dropmarker {
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
+  border-radius: 12px;
+  border: 1px solid rgba(0,0,0,.65);
+  background: -moz-linear-gradient(rgba(110,110,110,.9), rgba(70,70,70,.9) 49%,
+                                   rgba(50,50,50,.9) 51%, rgba(40,40,40,.9));
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.2),
+              inset 0 0 1px rgba(255,255,255,.1),
+              0 1px 0 rgba(255,255,255,.1);
+  background-clip: padding-box;
+  background-origin: padding-box;
+}
+
+.popup-notification-menubutton > .button-menubutton-button {
+  padding-top: 2px;
+  padding-bottom: 2px;
+  -moz-padding-start: 8px;
+  -moz-padding-end: 5px;
+  -moz-border-end: 1px solid rgba(0,0,0,.65);
+}
+
+.popup-notification-menubutton > .button-menubutton-dropmarker {
+  padding-top: 7px;
+  padding-bottom: 7px;
+  -moz-padding-start: 5px;
+  -moz-padding-end: 8px;
+  -moz-margin-start: -1px;
+  list-style-image: url("chrome://global/skin/arrow/arrow-dn-white.png");
+}
+
+.popup-notification-menubutton > .button-menubutton-button:-moz-locale-dir(ltr),
+.popup-notification-menubutton > .button-menubutton-dropmarker:-moz-locale-dir(rtl) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.popup-notification-menubutton > .button-menubutton-button:-moz-locale-dir(rtl),
+.popup-notification-menubutton > .button-menubutton-dropmarker:-moz-locale-dir(ltr) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.popup-notification-menubutton > .button-menubutton-button:hover:active,
+.popup-notification-menubutton[open="true"] > .button-menubutton-dropmarker {
+  background: -moz-linear-gradient(rgba(40,40,40,.9), rgba(70,70,70,.9));
+  box-shadow: inset 0 0 3px rgba(0,0,0,.2),
+              inset 0 1px 7px rgba(0,0,0,.4),
+              0 1px 0 rgba(255,255,255,.1);
+}
--- a/toolkit/themes/pinstripe/global/popup.css
+++ b/toolkit/themes/pinstripe/global/popup.css
@@ -66,17 +66,17 @@ panel[type="arrow"] {
 .panel-arrowcontent {
   -moz-appearance: none;
   color: white;
   background: -moz-linear-gradient(rgba(85,85,85,1), rgba(75,75,75,.97) 5px, rgba(58,58,58,.97) 17px, rgba(43,43,43,.97) 40px, rgba(40,40,40,.97) 80px, rgba(40,40,40,.97));
   border-radius: 6px;
   box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset,
               0 1px 0 rgba(255,255,255,.05) inset,
               0 0 0 1px rgba(0,0,0,.25);
-  padding: 6px;
+  padding: 14px;
   margin: 1px;
 }
 
 .panel-arrow {
   opacity: 0.97;
 }
 
 .panel-arrow[side="top"] {