Bug 1062334 - Update ambient indicator colour

apps/system/js/notifications.js

@@ -401,7 +401,10 @@ var NotificationScreen = {
       this.container.querySelector('.priority-notifications') :
       this.container.querySelector('.other-notifications');
 
-    this.addUnreadNotification();
+
+    // We need to animate the ambient indicator when the toast
+    // timesout, so we skip updating it here, by passing a skip bool
+    this.addUnreadNotification(true);
 
     var notificationNode = document.createElement('div');
     notificationNode.classList.add('notification');
@@ -648,13 +651,15 @@ var NotificationScreen = {
     notification.style.transform = '';
   },
 
-  addUnreadNotification: function ns_addUnreadNotification() {
+  addUnreadNotification: function ns_addUnreadNotification(skipUpdate) {
     if (UtilityTray.shown) {
       return;
     }
 
     this.unreadNotifications++;
-    this.updateNotificationIndicator();
+    if (!skipUpdate) {
+      this.updateNotificationIndicator();
+    }
   },
 
   removeUnreadNotification: function ns_removeUnreadNotification() {
@@ -680,6 +685,7 @@ var NotificationScreen = {
 
   closeToast: function ns_closeToast() {
     this.toaster.classList.remove('displayed');
+    this.updateNotificationIndicator();
   },
 
   closeNotification: function ns_closeNotification(notificationNode) {

apps/system/style/notifications/notifications.css

@@ -119,7 +119,7 @@
   opacity: 0;
   background-color: #00BCE2;
   transform: translateY(-.2rem);
-  transition: opacity .5s ease .5s, transform 0s ease 1s;
+  transition: opacity .5s ease .5s, transform 0s ease 1s, background-color 0s ease 1s;
 }
 
 #notification-toaster.displayed:after,
@@ -130,7 +130,7 @@
   margin: auto;
   border-left: 0.2rem solid transparent;
   border-right: 0.2rem solid transparent;
-  border-top: 0.2rem solid #B3F3FF;
+  border-top: 0.2rem solid #00d3ff;
   bottom: 0;
   content: '';
 }
@@ -149,8 +149,9 @@
 }
 
 #ambient-indicator.unread {
-  transition: none;
+  background-color: #006e86;
   transform: translateY(0);
+  transition: background-color .3s ease .3s;
   opacity: 1;
 }
 

apps/system/test/unit/notifications_test.js

@@ -266,6 +266,26 @@ suite('system/NotificationScreen >', function() {
     });
   });
 
+  suite('addUnreadNotification', function() {
+    setup(function() {
+      sinon.spy(NotificationScreen, 'updateNotificationIndicator');
+    });
+
+    teardown(function() {
+      NotificationScreen.updateNotificationIndicator.restore();
+    });
+
+    test('should update the notifications indicator', function() {
+      NotificationScreen.addUnreadNotification();
+      assert.isTrue(NotificationScreen.updateNotificationIndicator.called);
+    });
+
+    test('shouldnt update the notif indicator when skipping', function() {
+      NotificationScreen.addUnreadNotification(true);
+      assert.isFalse(NotificationScreen.updateNotificationIndicator.called);
+    });
+  });
+
   suite('addNotification >', function() {
     test('calling addNotification without icon', function() {
       var toasterIcon = NotificationScreen.toasterIcon;
@@ -279,6 +299,15 @@ suite('system/NotificationScreen >', function() {
       assert.isTrue(toasterIcon.hidden);
     });
 
+    test('doesnt update the ambient indicator', function() {
+      sinon.spy(NotificationScreen, 'updateNotificationIndicator');
+      var imgpath = 'http://example.com/test.png';
+      var detail = {icon: imgpath, title: 'title', detail: 'detail'};
+      NotificationScreen.addNotification(detail);
+      assert.isFalse(NotificationScreen.updateNotificationIndicator.called);
+      NotificationScreen.updateNotificationIndicator.restore();
+    });
+
     function testNotificationWithDirection(dir) {
       var toasterTitle = NotificationScreen.toasterTitle;
       var imgpath = 'http://example.com/test.png';