frontend: ensure polyfills are loaded as early as possible

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

@@ -1,129 +1,132 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('/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]);
         }
-        $.Topic('/connection_controller/subscribe').subscribe(
-            this.subscribeToChannelTopic.bind(this));
         this.kickoffChannelstreamPlugin();
     },
 
     /** proxy to channelstream connection */
     getChannelStreamConnection: function () {
         return this.$['channelstream-connection'];
     },
 
     handleNotifications: function (data) {
         this.$['notifications'].handleNotification(data);
     },
 
     /** 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.$['channelstream-connection'];
+            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/topics_list.txt

@@ -1,7 +1,8 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

rhodecode/templates/base/root.html

@@ -1,181 +1,174 b''
 ## -*- coding: utf-8 -*-
 <!DOCTYPE html>
 
 <%
 c.template_context['repo_name'] = getattr(c, 'repo_name', '')
 
 if hasattr(c, 'rhodecode_db_repo'):
     c.template_context['repo_type'] = c.rhodecode_db_repo.repo_type
     c.template_context['repo_landing_commit'] = c.rhodecode_db_repo.landing_rev[1]
 
 if getattr(c, 'rhodecode_user', None) and c.rhodecode_user.user_id:
     c.template_context['rhodecode_user']['username'] = c.rhodecode_user.username
     c.template_context['rhodecode_user']['email'] = c.rhodecode_user.email
     c.template_context['rhodecode_user']['notification_status'] = c.rhodecode_user.get_instance().user_data.get('notification_status', True)
 
 c.template_context['visual']['default_renderer'] = h.get_visual_attr(c, 'default_renderer')
 %>
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+        <script src="${h.asset('js/vendors/webcomponentsjs/webcomponents-lite.min.js', ver=c.rhodecode_version_hash)}"></script>
+        <link rel="import" href="${h.asset('js/rhodecode-components.html', ver=c.rhodecode_version_hash)}">
         <title>${self.title()}</title>
         <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
         <%def name="robots()">
             <meta name="robots" content="index, nofollow"/>
         </%def>
         ${self.robots()}
         <link rel="icon" href="${h.asset('images/favicon.ico', ver=c.rhodecode_version_hash)}" sizes="16x16 32x32" type="image/png" />
 
         ## CSS definitions
         <%def name="css()">
             <link rel="stylesheet" type="text/css" href="${h.asset('css/style.css', ver=c.rhodecode_version_hash)}" media="screen"/>
             <!--[if lt IE 9]>
                 <link rel="stylesheet" type="text/css" href="${h.asset('css/ie.css', ver=c.rhodecode_version_hash)}" media="screen"/>
             <![endif]-->
             ## EXTRA FOR CSS
             ${self.css_extra()}
         </%def>
         ## CSS EXTRA - optionally inject some extra CSS stuff needed for specific websites
         <%def name="css_extra()">
         </%def>
 
         ${self.css()}
 
         ## JAVASCRIPT
         <%def name="js()">
             <script>
                 // setup Polymer options
                 window.Polymer = {lazyRegister: true, dom: 'shadow'};
 
                 // Load webcomponentsjs polyfill if browser does not support native Web Components
                 (function() {
                     'use strict';
                     var onload = function() {
                         // For native Imports, manually fire WebComponentsReady so user code
                         // can use the same code path for native and polyfill'd imports.
                         if (!window.HTMLImports) {
                             document.dispatchEvent(
                                     new CustomEvent('WebComponentsReady', {bubbles: true})
                             );
                         }
                     };
                     var webComponentsSupported = (
                             'registerElement' in document
                             && 'import' in document.createElement('link')
                             && 'content' in document.createElement('template')
                     );
                     if (!webComponentsSupported) {
-                        var e = document.createElement('script');
-                        e.async = true;
-                        e.src = '${h.asset('js/vendors/webcomponentsjs/webcomponents-lite.min.js', ver=c.rhodecode_version_hash)}';
-                        document.head.appendChild(e);
                     } else {
                         onload();
                     }
                 })();
             </script>
 
             <script src="${h.asset('js/rhodecode/i18n/%s.js' % c.language, ver=c.rhodecode_version_hash)}"></script>
             <script type="text/javascript">
             // register templateContext to pass template variables to JS
             var templateContext = ${h.json.dumps(c.template_context)|n};
 
             var REPO_NAME = "${getattr(c, 'repo_name', '')}";
             %if hasattr(c, 'rhodecode_db_repo'):
             var REPO_LANDING_REV = '${c.rhodecode_db_repo.landing_rev[1]}';
             var REPO_TYPE = '${c.rhodecode_db_repo.repo_type}';
             %else:
             var REPO_LANDING_REV = '';
             var REPO_TYPE = '';
             %endif
             var APPLICATION_URL = "${h.url('home').rstrip('/')}";
             var ASSET_URL = "${h.asset('')}";
             var DEFAULT_RENDERER = "${h.get_visual_attr(c, 'default_renderer')}";
             var CSRF_TOKEN = "${getattr(c, 'csrf_token', '')}";
             % if getattr(c, 'rhodecode_user', None):
             var USER = {name:'${c.rhodecode_user.username}'};
             % else:
             var USER = {name:null};
             % endif
 
             var APPENLIGHT = {
               enabled: ${'true' if getattr(c, 'appenlight_enabled', False) else 'false'},
               key: '${getattr(c, "appenlight_api_public_key", "")}',
               % if getattr(c, 'appenlight_server_url', None):
                   serverUrl: '${getattr(c, "appenlight_server_url", "")}',
               % endif
               requestInfo: {
               % if getattr(c, 'rhodecode_user', None):
                   ip: '${c.rhodecode_user.ip_addr}',
                   username: '${c.rhodecode_user.username}'
               % endif
               },
               tags: {
                   rhodecode_version: '${c.rhodecode_version}',
                   rhodecode_edition: '${c.rhodecode_edition}'
               }
             };
             </script>
             <%include file="/base/plugins_base.html"/>
             <!--[if lt IE 9]>
             <script language="javascript" type="text/javascript" src="${h.asset('js/excanvas.min.js')}"></script>
             <![endif]-->
             <script language="javascript" type="text/javascript" src="${h.asset('js/rhodecode/routes.js', ver=c.rhodecode_version_hash)}"></script>
             <script> var alertMessagePayloads = ${h.flash.json_alerts()|n}; </script>
             <script language="javascript" type="text/javascript" src="${h.asset('js/scripts.js', ver=c.rhodecode_version_hash)}"></script>
-            <script>
-                var e = document.createElement('script');
-                e.src = '${h.asset('js/rhodecode-components.js', ver=c.rhodecode_version_hash)}';
-                document.head.appendChild(e);
-            </script>
-            <link rel="import" href="${h.asset('js/rhodecode-components.html', ver=c.rhodecode_version_hash)}">
             ## avoide escaping the %N
             <script>CodeMirror.modeURL = "${h.asset('') + 'js/mode/%N/%N.js?ver='+c.rhodecode_version_hash}";</script>
+            <script language="javascript" type="text/javascript" src="${h.asset('js/rhodecode-components.js', ver=c.rhodecode_version_hash)}"></script>
 
 
             ## JAVASCRIPT EXTRA - optionally inject some extra JS for specificed templates
             ${self.js_extra()}
 
             <script type="text/javascript">
             $(document).ready(function(){
               show_more_event();
               timeagoActivate();
             })
             </script>
 
         </%def>
 
         ## JAVASCRIPT EXTRA - optionally inject some extra JS for specificed templates
         <%def name="js_extra()"></%def>
         ${self.js()}
 
         <%def name="head_extra()"></%def>
         ${self.head_extra()}
         ## extra stuff
         %if c.pre_code:
             ${c.pre_code|n}
         %endif
     </head>
     <body id="body">
         <noscript>
             <div class="noscript-error">
                 ${_('Please enable JavaScript to use RhodeCode Enterprise')}
             </div>
         </noscript>
      ## IE hacks
       <!--[if IE 7]>
       <script>$(document.body).addClass('ie7')</script>
       <![endif]-->
       <!--[if IE 8]>
       <script>$(document.body).addClass('ie8')</script>
       <![endif]-->
       <!--[if IE 9]>
       <script>$(document.body).addClass('ie9')</script>
       <![endif]-->
 
       ${next.body()}
       %if c.post_code:
         ${c.post_code|n}
       %endif
     <rhodecode-app></rhodecode-app>
     </body>
 </html>