favicon: added favicon notifications

rhodecode/public/js/src/components/rhodecode-favicon/rhodecode-favicon.html

@@ -0,0 +1,7 b''
+<link rel="import" href="../../../../../../bower_components/polymer/polymer.html">
+
+<dom-module id="rhodecode-favicon">
+    <template>
+    </template>
+    <script src="rhodecode-favicon.js"></script>
+</dom-module>

rhodecode/public/js/src/components/rhodecode-favicon/rhodecode-favicon.js

@@ -0,0 +1,20 b''
+Polymer({
+    is: 'rhodecode-favicon',
+    properties: {
+        favicon: Object,
+        counter: {
+            type: Number,
+            observer: '_handleCounter'
+        }
+    },
+
+    ready: function () {
+        this.favicon = new Favico({
+            type: 'rectangle',
+            animation: 'none'
+        });
+    },
+    _handleCounter: function (newVal, oldVal) {
+        this.favicon.badge(this.counter);
+    }
+});

grunt_config.json

@@ -1,190 +1,191 b''
 {
   "dirs": {
     "css": {
       "src":"rhodecode/public/css",
       "dest":"rhodecode/public/css"
     },
     "js": {
       "src": "rhodecode/public/js/src",
       "dest": "rhodecode/public/js",
       "bower": "bower_components",
       "node_modules": "node_modules"
     }
   },
   "copy": {
     "main": {
       "expand": true,
       "cwd": "bower_components",
       "src": "webcomponentsjs/webcomponents-lite.js",
       "dest": "<%= dirs.js.dest %>/vendors"
     }
   },
   "concat": {
     "polymercss": {
       "src": [
         "<%= dirs.js.src %>/components/root-styles-prefix.html",
         "<%= dirs.css.src %>/style-polymer.css",
         "<%= dirs.js.src %>/components/root-styles-suffix.html"
       ],
       "dest": "<%= dirs.js.dest %>/src/components/root-styles.gen.html",
       "nonull": true
     },
     "dist": {
       "src": [
         "<%= dirs.js.src %>/jquery-1.11.1.min.js",
         "<%= dirs.js.src %>/logging.js",
         "<%= dirs.js.src %>/bootstrap.js",
         "<%= dirs.js.src %>/mousetrap.js",
         "<%= dirs.js.src %>/moment.js",
         "<%= dirs.js.node_modules %>/appenlight-client/appenlight-client.min.js",
+        "<%= dirs.js.node_modules %>/favico.js/favico-0.3.10.min.js",
         "<%= dirs.js.src %>/i18n_utils.js",
         "<%= dirs.js.src %>/deform.js",
         "<%= dirs.js.src %>/plugins/jquery.pjax.js",
         "<%= dirs.js.src %>/plugins/jquery.dataTables.js",
         "<%= dirs.js.src %>/plugins/flavoured_checkbox.js",
         "<%= dirs.js.src %>/plugins/jquery.auto-grow-input.js",
         "<%= dirs.js.src %>/plugins/jquery.autocomplete.js",
         "<%= dirs.js.src %>/plugins/jquery.debounce.js",
         "<%= dirs.js.src %>/plugins/jquery.mark.js",
         "<%= dirs.js.src %>/plugins/jquery.timeago.js",
         "<%= dirs.js.src %>/plugins/jquery.timeago-extension.js",
         "<%= dirs.js.src %>/select2/select2.js",
         "<%= dirs.js.src %>/codemirror/codemirror.js",
         "<%= dirs.js.src %>/codemirror/codemirror_loadmode.js",
         "<%= dirs.js.src %>/codemirror/codemirror_hint.js",
         "<%= dirs.js.src %>/codemirror/codemirror_overlay.js",
         "<%= dirs.js.src %>/codemirror/codemirror_placeholder.js",
         "<%= dirs.js.dest %>/mode/meta.js",
         "<%= dirs.js.dest %>/mode/meta_ext.js",
         "<%= dirs.js.dest %>/rhodecode/i18n/select2/translations.js",
         "<%= dirs.js.src %>/rhodecode/utils/array.js",
         "<%= dirs.js.src %>/rhodecode/utils/string.js",
         "<%= dirs.js.src %>/rhodecode/utils/pyroutes.js",
         "<%= dirs.js.src %>/rhodecode/utils/ajax.js",
         "<%= dirs.js.src %>/rhodecode/utils/autocomplete.js",
         "<%= dirs.js.src %>/rhodecode/utils/colorgenerator.js",
         "<%= dirs.js.src %>/rhodecode/utils/ie.js",
         "<%= dirs.js.src %>/rhodecode/utils/os.js",
         "<%= dirs.js.src %>/rhodecode/utils/topics.js",
         "<%= dirs.js.src %>/rhodecode/widgets/multiselect.js",
         "<%= dirs.js.src %>/rhodecode/init.js",
         "<%= dirs.js.src %>/rhodecode/codemirror.js",
         "<%= dirs.js.src %>/rhodecode/comments.js",
         "<%= dirs.js.src %>/rhodecode/constants.js",
         "<%= dirs.js.src %>/rhodecode/files.js",
         "<%= dirs.js.src %>/rhodecode/followers.js",
         "<%= dirs.js.src %>/rhodecode/menus.js",
         "<%= dirs.js.src %>/rhodecode/notifications.js",
         "<%= dirs.js.src %>/rhodecode/permissions.js",
         "<%= dirs.js.src %>/rhodecode/pjax.js",
         "<%= dirs.js.src %>/rhodecode/pullrequests.js",
         "<%= dirs.js.src %>/rhodecode/settings.js",
         "<%= dirs.js.src %>/rhodecode/select2_widgets.js",
         "<%= dirs.js.src %>/rhodecode/tooltips.js",
         "<%= dirs.js.src %>/rhodecode/users.js",
         "<%= dirs.js.src %>/rhodecode/appenlight.js",
         "<%= dirs.js.src %>/rhodecode.js"
       ],
       "dest": "<%= dirs.js.dest %>/scripts.js",
       "nonull": true
     }
   },
   "crisper": {
     "dist": {
       "options": {
         "cleanup": false,
         "onlySplit": true
       },
       "src": "<%= dirs.js.dest %>/rhodecode-components.html",
       "dest": "<%= dirs.js.dest %>/rhodecode-components.js"
     }
   },
   "less": {
     "development": {
       "options": {
         "compress": false,
         "yuicompress": false,
         "optimization": 0
       },
       "files": {
         "<%= dirs.css.dest %>/style.css": "<%= dirs.css.src %>/main.less",
         "<%= dirs.css.dest %>/style-polymer.css": "<%= dirs.css.src %>/polymer.less"
       }
     },
     "production": {
       "options": {
         "compress": true,
         "yuicompress": true,
         "optimization": 2
       },
       "files": {
         "<%= dirs.css.dest %>/style.css": "<%= dirs.css.src %>/main.less",
         "<%= dirs.css.dest %>/style-polymer.css": "<%= dirs.css.src %>/polymer.less"
       }
     },
     "components": {
       "files": [
         {
           "cwd": "<%= dirs.js.src %>/components/",
           "dest": "<%= dirs.js.src %>/components/",
           "src": [
             "**/*.less"
           ],
           "expand": true,
           "ext": ".css"
         }
       ]
     }
   },
   "watch": {
     "less": {
       "files": [
         "<%= dirs.css.src %>/**/*.less",
         "<%= dirs.js.src %>/components/**/*.less"
       ],
       "tasks": [
         "less:development",
         "less:components",
         "concat:polymercss",
         "vulcanize",
         "crisper",
         "concat:dist"
       ]
     },
     "js": {
       "files": [
         "!<%= dirs.js.src %>/components/root-styles.gen.html",
         "<%= dirs.js.src %>/**/*.js",
         "<%= dirs.js.src %>/components/**/*.html"
       ],
       "tasks": [
         "less:components",
         "concat:polymercss",
         "vulcanize",
         "crisper",
         "concat:dist"
       ]
     }
   },
   "jshint": {
     "rhodecode": {
       "src": "<%= dirs.js.src %>/rhodecode/**/*.js",
       "options": {
         "jshintrc": ".jshintrc"
       }
     }
   },
   "vulcanize": {
     "default": {
       "options": {
         "abspath": "",
         "inlineScripts": true,
         "inlineCss": true,
         "stripComments": true
       },
       "files": {
         "<%= dirs.js.dest %>/rhodecode-components.html": "<%= dirs.js.src %>/components/shared-components.html"
       }
     }
   }
 }

rhodecode/public/js/src/components/rhodecode-app/rhodecode-app.html

@@ -1,15 +1,18 b''
 <link rel="import" href="../../../../../../bower_components/polymer/polymer.html">
 <link rel="import" href="../channelstream-connection/channelstream-connection.html">
+<link rel="import" href="../rhodecode-toast/rhodecode-toast.html">
+<link rel="import" href="../rhodecode-favicon/rhodecode-favicon.html">
 
 <dom-module id="rhodecode-app">
     <template>
+        <rhodecode-favicon></rhodecode-favicon>
         <rhodecode-toast id="notifications"></rhodecode-toast>
         <channelstream-connection
                 id="channelstream-connection"
                 on-channelstream-listen-message="receivedMessage"
                 on-channelstream-connected="handleConnected"
                 on-channelstream-subscribed="handleSubscribed">
         </channelstream-connection>
     </template>
     <script src="rhodecode-app.js"></script>
 </dom-module>

rhodecode/public/js/src/components/rhodecode-app/rhodecode-app.js

@@ -1,132 +1,137 b''
 ccLog = Logger.get('RhodeCodeApp');
 ccLog.setLevel(Logger.OFF);
 
 var rhodeCodeApp = Polymer({
     is: 'rhodecode-app',
     attached: function () {
         ccLog.debug('rhodeCodeApp created');
         $.Topic('/notifications').subscribe(this.handleNotifications.bind(this));
+        $.Topic('/favicon/update').subscribe(this.faviconUpdate.bind(this));
         $.Topic('/connection_controller/subscribe').subscribe(
             this.subscribeToChannelTopic.bind(this));
         // this event can be used to coordinate plugins to do their
         // initialization before channelstream is kicked off
         $.Topic('/__MAIN_APP__').publish({});
 
         for (var i = 0; i < alertMessagePayloads.length; i++) {
             $.Topic('/notifications').publish(alertMessagePayloads[i]);
         }
         this.kickoffChannelstreamPlugin();
     },
 
     /** proxy to channelstream connection */
     getChannelStreamConnection: function () {
         return this.$['channelstream-connection'];
     },
 
     handleNotifications: function (data) {
         this.$['notifications'].handleNotification(data);
     },
 
+    faviconUpdate: function (data) {
+        this.$$('rhodecode-favicon').counter = data.count;
+    },
+
     /** opens connection to ws server */
     kickoffChannelstreamPlugin: function (data) {
         ccLog.debug('kickoffChannelstreamPlugin');
         var channels = ['broadcast'];
         var addChannels = this.checkViewChannels();
         for (var i = 0; i < addChannels.length; i++) {
             channels.push(addChannels[i]);
         }
         if (window.CHANNELSTREAM_SETTINGS && CHANNELSTREAM_SETTINGS.enabled){
             var channelstreamConnection = this.getChannelStreamConnection();
             channelstreamConnection.connectUrl = CHANNELSTREAM_URLS.connect;
             channelstreamConnection.subscribeUrl = CHANNELSTREAM_URLS.subscribe;
             channelstreamConnection.websocketUrl = CHANNELSTREAM_URLS.ws + '/ws';
             channelstreamConnection.longPollUrl = CHANNELSTREAM_URLS.longpoll + '/listen';
             // some channels might already be registered by topic
             for (var i = 0; i < channels.length; i++) {
                 channelstreamConnection.push('channels', channels[i]);
             }
             // append any additional channels registered in other plugins
             $.Topic('/connection_controller/subscribe').processPrepared();
             channelstreamConnection.connect();
         }
     },
 
     checkViewChannels: function () {
         var channels = []
         // subscribe to PR repo channel for PR's'
         if (templateContext.pull_request_data.pull_request_id) {
             var channelName = '/repo$' + templateContext.repo_name + '$/pr/' +
                 String(templateContext.pull_request_data.pull_request_id);
             channels.push(channelName);
         }
         return channels;
     },
 
     /** subscribes users from channels in channelstream */
     subscribeToChannelTopic: function (channels) {
         var channelstreamConnection = this.$['channelstream-connection'];
         var toSubscribe = channelstreamConnection.calculateSubscribe(channels);
         ccLog.debug('subscribeToChannelTopic', toSubscribe);
         if (toSubscribe.length > 0) {
             // if we are connected then subscribe
             if (channelstreamConnection.connected) {
                 channelstreamConnection.subscribe(toSubscribe);
             }
             // not connected? just push channels onto the stack
             else {
                 for (var i = 0; i < toSubscribe.length; i++) {
                     channelstreamConnection.push('channels', toSubscribe[i]);
                 }
             }
         }
     },
 
     /** publish received messages into correct topic */
     receivedMessage: function (event) {
         for (var i = 0; i < event.detail.length; i++) {
             var message = event.detail[i];
             if (message.message.topic) {
                 ccLog.debug('publishing', message.message.topic);
                 $.Topic(message.message.topic).publish(message);
             }
             else if (message.type === 'presence'){
                 $.Topic('/connection_controller/presence').publish(message);
             }
             else {
                 ccLog.warn('unhandled message', message);
             }
         }
     },
 
     handleConnected: function (event) {
         var channelstreamConnection = this.$['channelstream-connection'];
         channelstreamConnection.set('channelsState',
             event.detail.channels_info);
         channelstreamConnection.set('userState', event.detail.state);
         channelstreamConnection.set('channels', event.detail.channels);
         this.propagageChannelsState();
     },
     handleSubscribed: function (event) {
         var channelstreamConnection = this.$['channelstream-connection'];
         var channelInfo = event.detail.channels_info;
         var channelKeys = Object.keys(event.detail.channels_info);
         for (var i = 0; i < channelKeys.length; i++) {
             var key = channelKeys[i];
             channelstreamConnection.set(['channelsState', key], channelInfo[key]);
         }
         channelstreamConnection.set('channels', event.detail.channels);
         this.propagageChannelsState();
     },
     /** propagates channel states on topics */
     propagageChannelsState: function (event) {
         var channelstreamConnection = this.$['channelstream-connection'];
         var channel_data = channelstreamConnection.channelsState;
         var channels = channelstreamConnection.channels;
         for (var i = 0; i < channels.length; i++) {
             var key = channels[i];
             $.Topic('/connection_controller/channel_update').publish(
                 {channel: key, state: channel_data[key]}
             );
         }
     }
 });

rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.js

@@ -1,38 +1,40 b''
 Polymer({
     is: 'rhodecode-toast',
     properties: {
         toasts: {
             type: Array,
             value: function(){
                 return []
             }
         }
     },
     observers: [
         '_changedToasts(toasts.splices)'
     ],
     _changedToasts: function(newValue, oldValue){
         this.$['p-toast'].notifyResize();
+        $.Topic('/favicon/update').publish({count: this.toasts.length});
     },
     dismissNotifications: function(){
         this.$['p-toast'].close();
+        $.Topic('/favicon/update').publish({count: 0});
     },
     handleClosed: function(){
         this.splice('toasts', 0);
     },
     open: function(){
         this.$['p-toast'].open();
     },
     handleNotification: function(data){
         if (!templateContext.rhodecode_user.notification_status && !data.message.force) {
             // do not act if notifications are disabled
             return
         }
         this.push('toasts',{
             level: data.message.level,
             message: data.message.message
         });
         this.open();
     },
     _gettext: _gettext
 });

rhodecode/public/js/topics_list.txt

@@ -1,8 +1,9 b''
 /__MAIN_APP__ - launched when rhodecode-app element is attached to DOM
 /plugins/__REGISTER__ - launched after the onDomReady() code from rhodecode.js is executed
 /ui/plugins/code/anchor_focus - launched when rc starts to scroll on load to anchor on PR/Codeview
 /ui/plugins/code/comment_form_built - launched when injectInlineForm() is executed and the form object is created
 /notifications - shows new event notifications
 /connection_controller/subscribe - subscribes user to new channels
 /connection_controller/presence - receives presence change messages
 /connection_controller/channel_update - receives channel states
+/favicon/update - notify state change for favicon