Bug 838211 - Metro info app bar theming, part 1 (basic style and image changes) [r=fryn, ui-r=shorlander]

browser/metro/base/content/browser-ui.js

@@ -988,6 +988,7 @@ var ContextUI = {
   init: function init() {
     Elements.browsers.addEventListener("mousedown", this, true);
     Elements.browsers.addEventListener("touchstart", this, true);
+    Elements.browsers.addEventListener("AlertActive", this, true);
     window.addEventListener("MozEdgeUIGesture", this, true);
     window.addEventListener("keypress", this, true);
     window.addEventListener("KeyboardChanged", this, false);
@@ -1198,6 +1199,8 @@ var ContextUI = {
           this.dismiss();
         break;
       case "touchstart":
+      // ContextUI can hide the notification bar. Workaround until bug 845348 is fixed.
+      case "AlertActive":
         this.dismiss();
         break;
       case "keypress":

browser/metro/base/content/browser.js

@@ -1260,6 +1260,7 @@ var PopupBlockerObserver = {
         else {
           var buttons = [
             {
+              isDefault: false,
               label: strings.GetStringFromName("popupButtonAllowOnce"),
               accessKey: null,
               callback: function() { PopupBlockerObserver.showPopupsForSite(); }

browser/metro/base/content/browser.xul

@@ -150,6 +150,7 @@
     <key id="key_quit" key="q" modifiers="accel" command="cmd_quit"/>
     <key id="key_addBoomkark" key="d" modifiers="accel" command="cmd_addBookmark"/>
     <key id="key_console" key="j" modifiers="accel,shift" oncommand="PanelUI.show('console-container')"/>
+    <key id="key_options" key="o" modifiers="accel,shift" oncommand="Elements.prefsFlyout.show()"/>
 
     <!-- manage tabs -->
     <key id="key_newTab" key="t" modifiers="accel" command="cmd_newTab"/>

browser/metro/base/content/prompt/alert.xul

@@ -34,7 +34,7 @@
     </vbox>
   
     <hbox class="prompt-buttons">
-      <button id="prompt-button-ok" class="prompt-button" label="&ok.label;" command="cmd_ok"/>
+      <button id="prompt-button-ok" class="prompt-button button-default" label="&ok.label;" command="cmd_ok"/>
     </hbox>
   </vbox>
 </dialog>

browser/metro/base/content/prompt/confirm.xul

@@ -34,7 +34,7 @@
     </vbox>
   
     <hbox id="prompt-confirm-buttons-box" class="prompt-buttons">
-      <button class="prompt-button" label="&ok.label;" command="cmd_ok"/>
+      <button class="prompt-button button-default" label="&ok.label;" command="cmd_ok"/>
       <button class="prompt-button" label="&cancel.label;" command="cmd_cancel"/>
     </hbox>
   </vbox>

browser/metro/base/content/prompt/masterPassword.xul

@@ -38,7 +38,7 @@
     </scrollbox>
   
     <hbox class="prompt-buttons">
-      <button class="prompt-button" label="&ok.label;" command="cmd_ok"/>
+      <button class="prompt-button button-default" label="&ok.label;" command="cmd_ok"/>
       <button class="prompt-button" label="&cancel.label;" command="cmd_cancel"/>
     </hbox>
   </vbox>

browser/metro/base/content/prompt/promptPassword.xul

@@ -56,7 +56,7 @@
     </vbox>
   
     <hbox class="prompt-buttons">
-      <button class="prompt-button" label="&ok.label;" command="cmd_ok"/>
+      <button class="prompt-button button-default" label="&ok.label;" command="cmd_ok"/>
       <button class="prompt-button" label="&cancel.label;" command="cmd_cancel"/>
   </hbox>
   </vbox>

browser/metro/base/content/prompt/removeMasterPassword.xul

@@ -36,7 +36,7 @@
     </scrollbox>
   
     <hbox class="prompt-buttons">
-      <button class="prompt-button" label="&ok.label;" disabled="true" command="cmd_ok"/>
+      <button class="prompt-button button-default" label="&ok.label;" disabled="true" command="cmd_ok"/>
       <button class="prompt-button" label="&cancel.label;" command="cmd_cancel"/>
     </hbox>
   </vbox>

browser/metro/base/content/prompt/select.xul

@@ -34,7 +34,7 @@
     </vbox>
   
     <hbox class="prompt-buttons">
-      <button class="prompt-button" label="&ok.label;" command="cmd_ok"/>
+      <button class="prompt-button button-default" label="&ok.label;" command="cmd_ok"/>
       <button class="prompt-button" label="&cancel.label;" command="cmd_cancel"/>
     </hbox>
   </vbox>

browser/metro/components/ContentPermissionPrompt.js

@@ -37,6 +37,10 @@ const kEntities = { "geolocation": "geolocation", "desktop-notification": "deskt
                     "indexedDB": "offlineApps", "indexedDBQuota": "indexedDBQuota",
                     "openWebappsManage": "openWebappsManage" };
 
+const kIcons = {
+  geolocation: "chrome://browser/skin/images/infobar-geolocation.png"
+};
+
 function ContentPermissionPrompt() {}
 
 ContentPermissionPrompt.prototype = {
@@ -96,6 +100,7 @@ ContentPermissionPrompt.prototype = {
       return;
 
     let entityName = kEntities[request.type];
+    let icon = kIcons[request.type] || "";
 
     let buttons = [{
       label: browserBundle.GetStringFromName(entityName + ".allow"),
@@ -118,7 +123,7 @@ ContentPermissionPrompt.prototype = {
                                                      [request.principal.URI.host], 1);
     let newBar = notificationBox.appendNotification(message,
                                                     request.type,
-                                                    "", // Notifications in Fennec do not display images.
+                                                    icon,
                                                     notificationBox.PRIORITY_WARNING_MEDIUM,
                                                     buttons);
   }

browser/metro/components/LoginManagerPrompter.js

@@ -150,7 +150,7 @@ LoginManagerPrompter.prototype = {
         this.log("Adding new " + aName + " notification bar");
         var newBar = aNotifyBox.appendNotification(
                                 aText, aName,
-                                "chrome://mozapps/skin/passwordmgr/key.png",
+                                "chrome://browser/skin/images/infobar-key.png",
                                 priority, aButtons);
 
         // The page we're going to hasn't loaded yet, so we want to persist

browser/metro/locales/en-US/chrome/notification.dtd

@@ -1,12 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-
-
-<!-- 
-     LOCALIZATION NOTE (geolocation.learnMore): Use the
-     unicode ellipsis char, \u2026,
-     or use "..." unless \u2026 doesn't suit traditions in your
-     locale.
--->
-<!ENTITY geolocation.learnMore         "Learn More…">

browser/metro/locales/jar.mn

@@ -15,7 +15,6 @@
   locale/browser/config.dtd               (%chrome/config.dtd)
   locale/browser/preferences.dtd          (%chrome/preferences.dtd)
   locale/browser/checkbox.dtd             (%chrome/checkbox.dtd)
-  locale/browser/notification.dtd         (%chrome/notification.dtd)
   locale/browser/sync.dtd                 (%chrome/sync.dtd)
   locale/browser/sync.properties          (%chrome/sync.properties)
   locale/browser/prompt.dtd               (%chrome/prompt.dtd)

browser/metro/theme/jar.mn

@@ -38,6 +38,9 @@ chrome.jar:
   skin/images/identity-icons-https-ev.png   (images/identity-icons-https-ev.png)
   skin/images/identity-icons-https-mixed.png  (images/identity-icons-https-mixed.png)
   skin/images/identity-icons-https.png      (images/identity-icons-https.png)
+  skin/images/infobar-close.png             (images/infobar-close.png)
+  skin/images/infobar-geolocation.png       (images/infobar-geolocation.png)
+  skin/images/infobar-key.png               (images/infobar-key.png)
   skin/images/firefox-watermark.png         (images/firefox-watermark.png)
   skin/images/flyout-back-button.png        (images/flyout-back-button.png)
   skin/images/about-footer.png              (images/about-footer.png)

browser/metro/theme/platform.css

@@ -16,7 +16,6 @@
   font-size: @font_normal@;
 }
 
-button,
 textbox,
 menulist {
   -moz-appearance: none;
@@ -34,20 +33,81 @@ menulist {
   border-radius: 0;
 }
 
-button[disabled="true"],
 textbox[disabled="true"],
 menulist[disabled="true"] {
   border-color: @field_disabled_foreground_color@ !important;
   color: @field_disabled_foreground_color@;
 }
 
-button:not([disabled]):hover:active,
-button:not([disabled])[checked="true"],
 menulist:not([disabled]):hover:active {
   color: @field_background_color@;
   background: @field_foreground_color@;
 }
 
+
+/* Button ------------------------------------------------------------------ */
+
+button {
+  -moz-appearance: none;
+  border: 1px solid;
+  font-size: @metro_font_normal@;
+  font-weight: normal;
+  margin: @metro_spacing_small@;
+  min-width: @field_sizing@;
+  min-height: 32px;
+  padding: 3px 16px;
+}
+
+/* Non-default button colors */
+
+button {
+  background: linear-gradient(to bottom, hsl(210, 5%, 89%), hsl(210, 5%, 87%));
+  border-color: hsl(220, 5%, 86%);
+  color: hsl(0, 0%, 10%);
+}
+
+button:not([disabled]):hover {
+  background: linear-gradient(to bottom, hsl(210, 5%, 75%), hsl(210, 5%, 73%));
+  border-color: hsl(210, 5%, 71%);
+  color: hsl(0, 0%, 10%);
+}
+
+/* Default button colors */
+
+.button-default,
+.notification-button-default {
+  background: linear-gradient(to bottom, hsl(35, 100%, 50%), hsl(30, 100%, 50%));
+  border-color: hsl(30, 100%, 48%);
+  color: white;
+}
+
+.button-default:not([disabled]):hover,
+.notification-button-default:not([disabled]):hover {
+  background: linear-gradient(to bottom, hsl(25, 100%, 47%), hsl(25, 100%, 45%));
+  border-color: hsl(25, 100%, 43%);
+  color: white;
+}
+
+/* Pushed button colors (both default and non-default */
+
+/* Note: these need enough specificity to override all the :hover rules above. */
+button:not([disabled]):hover:active,
+button:not([disabled])[checked="true"],
+.button-default:not([disabled])[checked="true"],
+.notification-button-default:not([disabled])[checked="true"] {
+  background: linear-gradient(to bottom, hsl(210, 5%, 28%), hsl(210, 5%, 25%));
+  border-color: hsl(216, 4%, 27%);
+  color: white;
+}
+
+/* Disabled button colors (both default and non-default */
+
+button[disabled] {
+  background: linear-gradient(to bottom, hsl(210, 3%, 93%), hsl(210, 3%, 92%));
+  border-color: hsl(210, 3%, 91%);
+  color: hsl(0, 0%, 60%);
+}
+
 /* Textbox ----------------------------------------------------------------- */
 
 textbox[isempty="true"] {
@@ -318,6 +378,62 @@ richlistitem[typeName="message"] {
   border-bottom: 0;
 }
 
+/* Notification box ("info app bar") ---------------------------------------- */
+
+notification {
+  background: hsl(0, 0%, 98%);
+  border-bottom: 1px solid hsla(0, 0%, 0%, .07);
+  box-shadow: 0 0 10px hsla(0, 0%, 0%, .1);
+  min-height: 64px;
+}
+
+.notification-inner {
+  border-style: none;
+}
+
+.notification-button {
+  -moz-margin-start: 0;
+  -moz-margin-end: 20px;
+}
+
+.messageImage {
+  width: 32px;
+  height: 32px;
+  -moz-margin-start: 40px;
+  -moz-margin-end: 16px;
+}
+
+/* If there is no image set, collapse the image but keep the starting margin */
+.messageImage:not([src]) {
+  width: 0;
+  -moz-margin-end: 0;
+}
+
+.messageText {
+  margin: 0;
+}
+
+.messageCloseButton {
+  list-style-image: url("chrome://browser/skin/images/infobar-close.png");
+  padding: 0;
+  -moz-margin-start: 0;
+  -moz-margin-end: 40px;
+  -moz-image-region: rect(0, 40px, 40px, 0);
+}
+
+.messageCloseButton > .toolbarbutton-icon {
+  margin: 0;
+}
+
+.messageCloseButton:hover {
+  -moz-image-region: rect(0, 80px, 40px, 40px);
+}
+
+.messageCloseButton:hover:active {
+  -moz-image-region: rect(0, 120px, 40px, 80px);
+}
+
+
 /* Rich Grid ---------------------------------------------------------------- */
 
 richgrid {