Bug 1355927 - Notification bars should use the photon animation curve when appearing/disappearing r?jaws
This patch uses the new Photon animation curve for notification bars as well
as supporting `toolkit.cosmeticAnimations.enabled` to disable the animations
on notification bars entirely.
MozReview-Commit-ID: AHSQR32g6hf
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -7,17 +7,16 @@
@namespace svg url("http://www.w3.org/2000/svg");
:root {
--identity-popup-expander-width: 38px;
--panelui-subview-transition-duration: 150ms;
--lwt-additional-images: none;
--lwt-background-alignment: right top;
--lwt-background-tiling: no-repeat;
- --animation-easing-function: cubic-bezier(.07, .95, 0, 1);
}
:root:-moz-lwtheme {
color: var(--lwt-text-color) !important;
}
:root:-moz-lwtheme:not([customization-lwtheme]) {
background-color: var(--lwt-accent-color) !important;
--- a/toolkit/content/widgets/notification.xml
+++ b/toolkit/content/widgets/notification.xml
@@ -37,33 +37,45 @@
<field name="PRIORITY_CRITICAL_BLOCK" readonly="true">10</field>
<field name="currentNotification">null</field>
<field name="_closedNotification">null</field>
<field name="_blockingCanvas">null</field>
<field name="_animating">false</field>
+ <property name="_allowAnimation">
+ <getter>
+ <![CDATA[
+ var prefs = Components.classes["@mozilla.org/preferences-service;1"]
+ .getService(Components.interfaces.nsIPrefBranch);
+ return prefs.getBoolPref("toolkit.cosmeticAnimations.enabled");
+ ]]>
+ </getter>
+ </property>
+
<property name="notificationsHidden"
onget="return this.getAttribute('notificationshidden') == 'true';">
<setter>
- if (val)
- this.setAttribute("notificationshidden", true);
- else this.removeAttribute("notificationshidden");
- return val;
+ <![CDATA[
+ if (val)
+ this.setAttribute("notificationshidden", true);
+ else this.removeAttribute("notificationshidden");
+ return val;
+ ]]>
</setter>
</property>
<property name="allNotifications" readonly="true">
<getter>
- <![CDATA[
- var closedNotification = this._closedNotification;
- var notifications = this.getElementsByTagName("notification");
- return Array.filter(notifications, n => n != closedNotification);
- ]]>
+ <![CDATA[
+ var closedNotification = this._closedNotification;
+ var notifications = this.getElementsByTagName("notification");
+ return Array.filter(notifications, n => n != closedNotification);
+ ]]>
</getter>
</property>
<method name="getNotificationWithValue">
<parameter name="aValue"/>
<body>
<![CDATA[
var notifications = this.allNotifications;
@@ -231,18 +243,23 @@
for (var n = notifications.length - 1; n >= 0; n--) {
if (aImmediate)
this._removeNotificationElement(notifications[n]);
else
this.removeNotification(notifications[n]);
}
this.currentNotification = null;
- // Must clear up any currently animating notification
- if (aImmediate)
+ // Clean up any currently-animating notification; this is necessary
+ // if a notification was just opened and is still animating, but we
+ // want to close it *without* animating. This can even happen if
+ // the user toggled `toolkit.cosmeticAnimations.enabled` to false
+ // and called this method immediately after an animated notification
+ // displayed (although this case isn't very likely).
+ if (aImmediate || !this._allowAnimation)
this._finishAnimation();
]]>
</body>
</method>
<method name="removeTransientNotifications">
<body>
<![CDATA[
@@ -262,17 +279,19 @@
<parameter name="aNotification"/>
<parameter name="aSlideIn"/>
<parameter name="aSkipAnimation"/>
<body>
<![CDATA[
this._finishAnimation();
var height = aNotification.boxObject.height;
- var skipAnimation = aSkipAnimation || (height == 0);
+ var skipAnimation = aSkipAnimation || height == 0 ||
+ !this._allowAnimation;
+ aNotification.classList.toggle("animated", !skipAnimation);
if (aSlideIn) {
this.currentNotification = aNotification;
aNotification.style.removeProperty("position");
aNotification.style.removeProperty("top");
aNotification.style.removeProperty("margin-top");
aNotification.style.removeProperty("opacity");
--- a/toolkit/content/xul.css
+++ b/toolkit/content/xul.css
@@ -28,16 +28,20 @@
::-moz-tree-column, ::-moz-tree-row, ::-moz-tree-separator,
::-moz-tree-cell, ::-moz-tree-indentation, ::-moz-tree-line,
::-moz-tree-twisty, ::-moz-tree-image, ::-moz-tree-cell-text,
::-moz-tree-checkbox, ::-moz-tree-progressmeter,
::-moz-tree-drop-feedback {
appearance: auto;
}
+:root {
+ --animation-easing-function: cubic-bezier(.07, .95, 0, 1);
+}
+
/* ::::::::::
:: Rules for 'hiding' portions of the chrome for special
:: kinds of windows (not JUST browser windows) with toolbars
::::: */
window[chromehidden~="menubar"] .chromeclass-menubar,
window[chromehidden~="directories"] .chromeclass-directories,
window[chromehidden~="status"] .chromeclass-status,
@@ -201,17 +205,20 @@ notificationbox {
}
.notificationbox-stack {
overflow: -moz-hidden-unscrollable;
}
notification {
-moz-binding: url("chrome://global/content/bindings/notification.xml#notification");
- transition: margin-top 300ms, opacity 300ms;
+}
+
+notification.animated {
+ transition: margin-top 300ms var(--animation-easing-function), opacity 300ms var(--animation-easing-function);
}
/*********** popup notification ************/
popupnotification {
-moz-binding: url("chrome://global/content/bindings/notification.xml#popup-notification");
}
.popup-notification-menubutton:not([label]) {