Bug 577928 - 7/Vista specific styling of menu buttons in popup notifications. r=dao a=blocking-betaN

browser/themes/winstripe/browser/browser.css

@@ -1864,7 +1864,7 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
 }
 
 .geolocation-text-link {
-  padding-top: 5px;
+  margin-top: 17px;
 }
 
 .popup-notification-icon[popupid="xpinstall-disabled"],

toolkit/content/widgets/notification.xml

@@ -439,6 +439,9 @@
         </xul:hbox>
       </xul:vbox>
     </content>
+    <resources>
+      <stylesheet src="chrome://global/skin/notification.css"/>
+    </resources>
     <implementation>
       <field name="button" readonly="true">
         document.getAnonymousElementByAttribute(this, "anonid", "button");

toolkit/themes/winstripe/global/jar.mn

@@ -33,7 +33,7 @@ toolkit.jar:
         skin/classic/global/menulist.css
         skin/classic/global/netError.css
         skin/classic/global/numberbox.css
-        skin/classic/global/notification.css
+*       skin/classic/global/notification.css
         skin/classic/global/passwordmgr.css
 *       skin/classic/global/popup.css
         skin/classic/global/preferences.css
@@ -205,7 +205,7 @@ toolkit.jar:
 *       skin/classic/aero/global/menulist.css                            (menulist-aero.css)
         skin/classic/aero/global/netError.css
         skin/classic/aero/global/numberbox.css
-        skin/classic/aero/global/notification.css
+*       skin/classic/aero/global/notification.css                        (notification-aero.css)
         skin/classic/aero/global/passwordmgr.css
 *       skin/classic/aero/global/popup.css                               (popup-aero.css)
         skin/classic/aero/global/preferences.css

toolkit/themes/winstripe/global/notification-aero.css

@@ -0,0 +1,3 @@
+%define WINSTRIPE_AERO
+%include notification.css
+%undef WINSTRIPE_AERO

toolkit/themes/winstripe/global/notification.css

@@ -56,3 +56,70 @@ notification[type="critical"] .messageImage {
 .messageCloseButton > .toolbarbutton-icon {
   -moz-margin-end: 5px;
 }
+
+/* Popup notification button */
+
+.popup-notification-menubutton {
+  margin-top: 17px;
+}
+
+%ifdef WINSTRIPE_AERO
+@media all and (-moz-windows-default-theme) {
+  .popup-notification-menubutton {
+    -moz-appearance: none;
+    border: 1px solid rgba(0,0,0,.35);
+    border-radius: 3px;
+    padding: 0;
+  }
+
+  .popup-notification-menubutton:hover:active {
+    border-color: rgba(0,0,0,.5);
+  }
+
+  .popup-notification-menubutton > .button-menubutton-button,
+  .popup-notification-menubutton > .button-menubutton-dropmarker {
+    -moz-appearance: none;
+    margin: 0;
+    background-image: -moz-linear-gradient(top, rgba(250,250,250,.6), rgba(175,175,175,.25) 49%, rgba(0,0,0,.12) 51%, rgba(0,0,0,.09) 60%, rgba(0,0,0,.05));
+    box-shadow: 0 0 1px 1px rgba(255,255,255,.75) inset;
+  }
+
+  .popup-notification-menubutton > .button-menubutton-button {
+    padding: 0;
+    -moz-padding-start: 8px;
+    -moz-padding-end: 5px;
+    -moz-border-end: 1px solid rgba(0,0,0,.35);
+  }
+
+  .popup-notification-menubutton > .button-menubutton-dropmarker {
+    padding: 9px 5px 8px;
+    width: auto;
+    height: auto;
+    list-style-image: url("chrome://global/skin/arrow/arrow-dn-sharp.gif");
+  }
+
+  .popup-notification-menubutton > .button-menubutton-button:-moz-locale-dir(ltr),
+  .popup-notification-menubutton > .button-menubutton-dropmarker:-moz-locale-dir(rtl) {
+    border-radius: 2px 0 0 2px;
+  }
+
+  .popup-notification-menubutton > .button-menubutton-button:-moz-locale-dir(rtl),
+  .popup-notification-menubutton > .button-menubutton-dropmarker:-moz-locale-dir(ltr) {
+    border-radius: 0 2px 2px 0;
+  }
+
+  .popup-notification-menubutton > .button-menubutton-button:hover,
+  .popup-notification-menubutton > .button-menubutton-dropmarker:hover {
+    background-image: -moz-linear-gradient(top, rgba(250,250,250,.9), rgba(200,200,200,.6) 49%, rgba(0,0,0,.23) 51%, rgba(0,0,0,.17) 60%, rgba(0,0,0,.05));
+    box-shadow: 0 0 0 1px white inset,
+                0 0 2px 1px rgba(255,255,255,.75) inset;
+  }
+
+  .popup-notification-menubutton > .button-menubutton-button:hover:active,
+  .popup-notification-menubutton > .button-menubutton-dropmarker:hover:active,
+  .popup-notification-menubutton[open="true"] > .button-menubutton-dropmarker {
+    background-image: -moz-linear-gradient(top, rgba(250,250,250,.9), rgba(200,200,200,.6) 49%, rgba(0,0,0,.23) 51%, rgba(0,0,0,.17) 60%, rgba(0,0,0,.05));
+    box-shadow: 0 0 2px rgba(0,0,0,.65) inset;
+  }
+}
+%endif

toolkit/themes/winstripe/global/popup.css

@@ -101,7 +101,7 @@ panel[type="arrow"] {
   -moz-border-left-colors: rgba(255,255,255,.6) rgba(0,0,0,.7);
   -moz-border-bottom-colors: rgba(255,255,255,.6) rgba(0,0,0,.7);
   -moz-border-right-colors: rgba(255,255,255,.6) rgba(0,0,0,.7);
-  padding: 6px;
+  padding: 14px;
 }
 %endif