Add toolbar notification when the messenger is closed

customize.dist/src/less2/include/toolbar.less

@@ -72,6 +72,18 @@
     .modal_main();
 };
 & {
+    @keyframes notification {
+        0% {
+            background: rgba(0,0,0,0);
+        }
+        50% {
+            background: rgba(0,0,0,0.2);
+        }
+        100% {
+            background: rgba(0,0,0,0);
+        }
+    }
+
     .toolbar_vars();
     @toolbar_line-height: 32px;
     @toolbar_top-height: 64px;
@@ -1001,6 +1013,11 @@
             width: 125px;
             text-align: center;
         }
+        #cp-toolbar-chat-drawer-open button {
+            &.cp-toolbar-notification {
+                animation: notification 2s ease-in-out infinite;
+            }
+        }
         .cp-toolbar-share-button {
             width: 50px;
             text-align: center;

www/common/toolbar3.js

@@ -420,7 +420,7 @@ Messenger, MessengerUI, Messages) {
         }).prependTo(toolbar.chatContent);
         var sframeChan = Common.getSframeChannel();
         var messenger = Messenger.create(sframeChan);
-        MessengerUI.create(messenger, $container, Common);
+        MessengerUI.create(messenger, $container, Common, toolbar);
     };
     var createChat = function (toolbar, config) {
         if (!config.metadataMgr) {
@@ -459,6 +459,7 @@ Messenger, MessengerUI, Messages) {
             $content.show();
             $button.addClass('cp-toolbar-button-active');
             config.$contentContainer.addClass('cp-chat-visible');
+            $button.removeClass('cp-toolbar-notification');
         };
         $closeIcon.click(function () {
             Common.setAttribute(['toolbar', 'chat-drawer'], false);

www/contacts/messenger-ui.js

@@ -40,7 +40,7 @@ define([
         };
     };
 
-    MessengerUI.create = function (messenger, $container, common) {
+    MessengerUI.create = function (messenger, $container, common, toolbar) {
         var sframeChan = common.getSframeChannel();
         var metadataMgr = common.getMetadataMgr();
         var origin = metadataMgr.getPrivateData().origin;
@@ -96,8 +96,15 @@ define([
             return $userlist.find(dataQuery(id));
         };
 
+        var notifyToolbar = function () {
+            if (!toolbar || !toolbar['chat']) { return; }
+            if (toolbar['chat'].find('button').hasClass('cp-toolbar-button-active')) { return; }
+            toolbar['chat'].find('button').addClass('cp-toolbar-notification');
+        };
+
         var notify = function (id) {
             find.inList(id).addClass('cp-app-contacts-notify');
+            notifyToolbar();
         };
         var unnotify = function (id) {
             find.inList(id).removeClass('cp-app-contacts-notify');