Bug 904662 - Show layered notifications. r=mbrubeck

This commit is contained in:
Marina Samuel 2013-08-30 19:21:51 -04:00
parent ba18a78bff
commit 7b9c5ae03d
4 changed files with 103 additions and 0 deletions

View File

@ -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>

View File

@ -46,6 +46,10 @@ 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');
}

View File

@ -28,6 +28,7 @@ chrome.jar:
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)

View File

@ -447,8 +447,27 @@ notification {
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 {