Bug 904662 - Show layered notifications. r=mbrubeck
authorMarina Samuel <msamuel@mozilla.com>
Fri, 30 Aug 2013 19:21:51 -0400
changeset 153125 cb7653a95aa87d1444f260d8120821e7eed19b8a
parent 153124 7fce549724536ffe80bb2cf4abb9c10306b08158
child 153126 4ba8dda1ee31d519561ef39ad682e70da4baa93f
push idunknown
push userunknown
push dateunknown
reviewersmbrubeck
bugs904662
milestone26.0a1
Bug 904662 - Show layered notifications. r=mbrubeck
browser/metro/base/content/bindings/notification.xml
browser/metro/base/content/browser.css
browser/metro/base/jar.mn
browser/metro/theme/platform.css
new file mode 100644
--- /dev/null
+++ b/browser/metro/base/content/bindings/notification.xml
@@ -0,0 +1,79 @@
+<?xml version="1.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/. -->
+
+<!DOCTYPE bindings [
+<!ENTITY % notificationDTD SYSTEM "chrome://global/locale/notification.dtd">
+%notificationDTD;
+]>
+
+<bindings id="notificationBindings"
+          xmlns="http://www.mozilla.org/xbl"
+          xmlns:xbl="http://www.mozilla.org/xbl"
+          xmlns:html="http://www.w3.org/1999/xhtml"
+          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <binding id="notificationbox" extends="chrome://global/content/bindings/notification.xml#notificationbox">
+    <content>
+      <xul:stack xbl:inherits="hidden=notificationshidden"
+                 class="notificationbox-stack">
+        <xul:spacer/>
+        <children includes="notification"/>
+      </xul:stack>
+      <html:div anonid="layer1" class="notification-layer"></html:div>
+      <html:div anonid="layer2" class="notification-layer"></html:div>
+      <children/>
+    </content>
+
+    <implementation>
+      <constructor>
+        <![CDATA[
+          this.addEventListener("AlertActive", this.handleEvent, true);
+          this.addEventListener("AlertClose", this.handleEvent, true);
+          this.setAttribute("count", 0);
+        ]]>
+      </constructor>
+      <destructor>
+        <![CDATA[
+          this.removeEventListener("AlertActive", this.handleEvent, true);
+          this.removeEventListener("AlertClose", this.handleEvent, true);
+        ]]>
+      </destructor>
+      <method name="removeNotification">
+        <parameter name="aItem"/>
+        <parameter name="aSkipAnimation"/>
+        <body>
+          <![CDATA[
+            if (aItem == this.currentNotification)
+              this.removeCurrentNotification(aSkipAnimation);
+            else if (aItem != this._closedNotification)
+              this._removeNotificationElement(aItem);
+
+            // Fire notification closed event.
+            let event = new Event('AlertClose');
+            this.dispatchEvent(event);
+
+            return aItem;
+          ]]>
+        </body>
+      </method>
+      <method name="handleEvent">
+        <parameter name="aEvent"/>
+        <body>
+          <![CDATA[
+            switch (aEvent.type) {
+              case "AlertActive":
+              case "AlertClose":
+                this.setAttribute("count", this.allNotifications.length);
+                break;
+            }
+          ]]>
+        </body>
+      </method>
+    </implementation>
+  </binding>
+
+
+</bindings>
--- a/browser/metro/base/content/browser.css
+++ b/browser/metro/base/content/browser.css
@@ -41,16 +41,20 @@ settings {
 setting {
   display: none;
 }
 
 autoscroller {
   -moz-binding: url('chrome://browser/content/bindings/popup.xml#element-popup');
 }
 
+notificationbox {
+  -moz-binding: url('chrome://browser/content/bindings/notification.xml#notificationbox');
+}
+
 circularprogressindicator {
   -moz-binding: url('chrome://browser/content/bindings/circularprogress.xml#circular-progress-indicator');
 }
 
 setting[type="bool"] {
   display: -moz-box;
   -moz-binding: url("chrome://browser/content/bindings/toggleswitch.xml#setting-fulltoggle-bool");
 }
--- a/browser/metro/base/jar.mn
+++ b/browser/metro/base/jar.mn
@@ -23,16 +23,17 @@ chrome.jar:
   content/bindings/grid.xml                    (content/bindings/grid.xml)
   content/bindings/urlbar.xml                  (content/bindings/urlbar.xml)
   content/bindings/appbar.xml                  (content/bindings/appbar.xml)
   content/bindings/flyoutpanel.xml             (content/bindings/flyoutpanel.xml)
   content/bindings/selectionoverlay.xml        (content/bindings/selectionoverlay.xml)
   content/bindings/cssthrobber.xml             (content/bindings/cssthrobber.xml)
   content/bindings/popup.xml                   (content/bindings/popup.xml)
   content/bindings/circularprogress.xml        (content/bindings/circularprogress.xml)
+  content/bindings/notification.xml            (content/bindings/notification.xml)
 
 * content/flyoutpanels/FlyoutPanelsUI.js       (content/flyoutpanels/FlyoutPanelsUI.js)
 * content/flyoutpanels/AboutFlyoutPanel.js     (content/flyoutpanels/AboutFlyoutPanel.js)
   content/flyoutpanels/PrefsFlyoutPanel.js     (content/flyoutpanels/PrefsFlyoutPanel.js)
 
   content/helperui/AlertsHelper.js             (content/helperui/AlertsHelper.js)
   content/helperui/IndexedDB.js                (content/helperui/IndexedDB.js)
   content/helperui/MenuUI.js                   (content/helperui/MenuUI.js)
--- a/browser/metro/theme/platform.css
+++ b/browser/metro/theme/platform.css
@@ -442,18 +442,37 @@ richlistitem[typeName="message"] {
 
 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;
 }
 
+notificationbox[count="0"] .notification-layer,
+notificationbox[count="1"] .notification-layer,
+notificationbox[count="2"] .notification-layer[anonid="layer2"] {
+  visibility: collapse;
+}
+
+notificationbox[count="2"] .notification-layer[anonid="layer1"],
+notificationbox[count="3"] .notification-layer[anonid="layer1"],
+notificationbox[count="3"] .notification-layer[anonid="layer2"] {
+  visibility: visible;
+}
+
+.notification-layer {
+  border: @metro_border_thin@ solid @field_disabled_foreground_color@;
+  border-bottom: none;
+  height:5px
+}
+
 .notification-inner {
   border-style: none;
+  border: @metro_border_thin@ solid @field_disabled_foreground_color@;
 }
 
 .notification-button {
   -moz-margin-start: 0;
   -moz-margin-end: 20px;
 }
 
 .messageImage {