polymer: slim out the styles and change the flow of initialization to avoid race conditions

.hgignore

@@ -1,63 +1,64 b''
 syntax: glob
 *.egg
 *.egg-info
 *.idea
 *.orig
 *.pyc
 *.sqlite-journal
 *.swp
 *.tox
 *.DS_Store*
 rhodecode/public/js/src/components/**/*.css
 
 syntax: regexp
 
 #.filename
 ^\.settings$
 ^\.project$
 ^\.pydevproject$
 ^\.coverage$
 ^\.cache.*$
 ^\.rhodecode$
 
 ^rcextensions
 ^_dev
 ^._dev
 ^build/
 ^bower_components/
 ^coverage\.xml$
 ^data$
 ^\.eggs/
 ^configs/data$
 ^dev.ini$
 ^acceptance_tests/dev.*\.ini$
 ^dist/
 ^fabfile.py
 ^htmlcov
 ^junit\.xml$
 ^node_modules/
 ^pylint.log$
 ^rcextensions/
 ^result$
 ^rhodecode/public/css/style.css$
 ^rhodecode/public/css/style-polymer.css$
 ^rhodecode/public/js/scripts.js$
 ^rhodecode/public/js/rhodecode-components.html$
+^rhodecode/public/js/src/components/root-styles.gen.html$
 ^rhodecode\.db$
 ^rhodecode\.log$
 ^rhodecode_dev\.log$
 ^test\.db$
 
 # ac-tests
 ^acceptance_tests/\.cache.*$
 ^acceptance_tests/externals
 ^acceptance_tests/ghostdriver.log$
 ^acceptance_tests/local(_.+)?\.ini$
 
 # docs
 ^docs/_build$
 ^docs/result$
 ^docs-internal/_build$
 
 # Cythonized things
 ^rhodecode/.*\.(c|so)$

Gruntfile.js

@@ -1,177 +1,187 b''
 module.exports = function(grunt) {
   grunt.initConfig({
 
     dirs: {
       css: "rhodecode/public/css",
       js: {
         "src": "rhodecode/public/js/src",
         "dest": "rhodecode/public/js"
       }
     },
     copy: {
       main: {
         expand: true,
         cwd: 'bower_components',
         src: 'webcomponentsjs/**',
         dest: '<%= dirs.js.dest %>/vendors',
       },
     },
     concat: {
+      polymercss:{
+        src: [
+          // Base libraries
+          '<%= dirs.js.src %>/components/root-styles-prefix.html',
+          '<%= dirs.css %>/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: [
           // Base libraries
           '<%= 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.src %>/appenlight-client-0.4.1.min.js',
           '<%= dirs.js.src %>/i18n_utils.js',
           '<%= dirs.js.src %>/deform.js',
 
           // Plugins
           '<%= 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',
 
           // Select2
           '<%= dirs.js.src %>/select2/select2.js',
 
           // Code-mirror
           '<%= 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',
           // TODO: mikhail: this is an exception. Since the code mirror modes
           // are loaded "on the fly", we need to keep them in a public folder
           '<%= dirs.js.dest %>/mode/meta.js',
           '<%= dirs.js.dest %>/mode/meta_ext.js',
           '<%= dirs.js.dest %>/rhodecode/i18n/select2/translations.js',
 
           // Rhodecode utilities
           '<%= 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',
 
           // Rhodecode widgets
           '<%= dirs.js.src %>/rhodecode/widgets/multiselect.js',
 
           // Rhodecode components
           '<%= dirs.js.src %>/rhodecode/init.js',
           '<%= dirs.js.src %>/rhodecode/connection_controller.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/utils/notifications.js',
           '<%= dirs.js.src %>/rhodecode/appenlight.js',
 
           // Rhodecode main module
           '<%= dirs.js.src %>/rhodecode.js'
         ],
         dest: '<%= dirs.js.dest %>/scripts.js',
         nonull: true
       }
     },
 
     less: {
       development: {
         options: {
           compress: false,
           yuicompress: false,
           optimization: 0
         },
         files: {
           "<%= dirs.css %>/style.css": "<%= dirs.css %>/main.less",
           "<%= dirs.css %>/style-polymer.css": "<%= dirs.css %>/polymer.less"
         }
       },
       production: {
         options: {
           compress: true,
           yuicompress: true,
           optimization: 2
         },
         files: {
           "<%= dirs.css %>/style.css": "<%= dirs.css %>/main.less",
           "<%= dirs.css %>/style-polymer.css": "<%= dirs.css %>/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 %>/*.less"],
-        tasks: ["less:development", 'less:components', "vulcanize"]
+        files: ["<%= dirs.css %>/**/*.less"],
+        tasks: ["less:development", 'less:components', 'concat:polymercss', "vulcanize"]
       },
       js: {
-        files: ["<%= dirs.js.src %>/**/*.js", "<%= dirs.js.src %>/components/*.*"],
-        tasks: ["vulcanize", "concat:dist"]
+        files: ["<%= dirs.js.src %>/**/*.js", "<%= dirs.js.src %>/components/**/*.html"],
+        tasks: ['less:components', 'concat:polymercss', "vulcanize", "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'
         }
       }
     }
   });
 
   grunt.loadNpmTasks('grunt-contrib-less');
   grunt.loadNpmTasks('grunt-contrib-concat');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-jshint');
   grunt.loadNpmTasks('grunt-vulcanize');
   grunt.loadNpmTasks('grunt-crisper');
   grunt.loadNpmTasks('grunt-contrib-copy');
 
-  grunt.registerTask('default', ['less:production', 'less:components', 'copy','vulcanize', 'concat:dist']);
+  grunt.registerTask('default', ['less:production', 'less:components', 'concat:polymercss', 'copy','vulcanize', 'concat:dist']);
 };

rhodecode/public/css/polymer.less

@@ -1,26 +1,23 b''
 //Primary CSS
 //--- IMPORTS ------------------//
 @import 'helpers';
 @import 'mixins';
-@import 'rcicons';
-@import 'fonts';
 @import 'variables';
-@import 'type';
 @import 'buttons';
 
 :root {
     --primary-color: @rcblue;
     --light-primary-color: @rclightblue;
     --dark-primary-color: @rcdarkblue;
     --primary-text-color: @text-color;
 
     --paper-spinner-layer-1-color: @grey6;
     --paper-spinner-layer-2-color: @grey5;
     --paper-spinner-layer-3-color: @grey4;
     --paper-spinner-layer-4-color: @grey3;
 }
 
 .paper-toggle-button {
   display: inline;
 }
 

rhodecode/public/js/src/components/root-styles-prefix.html

@@ -1,3 +1,3 b''
-<dom-module id="shared-styles">
+<dom-module id="root-styles">
     <template>
         <style>

rhodecode/templates/admin/my_account/my_account_notifications.html

@@ -1,94 +1,93 b''
 <template is="dom-bind" id="notificationsPage">
-<style include="shared-styles" is="custom-style"></style>
 <iron-ajax id="toggleNotifications"
            method="post"
            url="${url('my_account_notifications_toggle_visibility')}"
            content-type="application/json"
            loading="{{changeNotificationsLoading}}"
            on-response="handleNotifications"
            handle-as="json"></iron-ajax>
 
 <div class="panel panel-default">
   <div class="panel-heading">
     <h3 class="panel-title">${_('Your Live Notification Settings')}</h3>
   </div>
     <div class="panel-body">
 
         <p><strong>IMPORTANT:</strong> This feature requires enabled channelstream websocket server to function correctly.</p>
 
         <p class="hidden">Status of browser notifications permission: <strong id="browser-notification-status"></strong></p>
 
         <div class="form">
             <!-- fields -->
             <div class="fields">
                 <div class="field">
                     <div class="label">
                         <label for="new_email">${_('Notifications Status')}:</label>
                     </div>
                     <div class="checkboxes">
                         <paper-toggle-button class="paper-toggle-button" on-change="toggleNotifications"  ${'checked' if c.rhodecode_user.get_instance().user_data.get('notification_status') else ''}></paper-toggle-button>
                         <paper-tooltip>Toggle your notifications on/off globally.</paper-tooltip>
                         <template is="dom-if" if="{{changeNotificationsLoading}}">
                             <paper-spinner active class="toggle-ajax-spinner"></paper-spinner>
                         </template>
                     </div>
                 </div>
                 <div class="buttons">
                     <a class="btn btn-default" id="test-notification">Test notification</a>
                 </div>
             </div>
         </div>
 
     </div>
 </div>
 
 <script type="application/javascript">
     /** because im not creating a custom element for this page
      * we need to push the function onto the dom-template
      * ideally we turn this into notification-settings elements
      * then it will be cleaner
      */
     var ctrlr = $('#notificationsPage')[0];
     ctrlr.toggleNotifications = function(event){
         var ajax = $('#toggleNotifications')[0];
         ajax.headers = {"X-CSRF-Token": CSRF_TOKEN}
         ajax.body = {notification_status:event.target.active};
         ajax.generateRequest();
     };
     ctrlr.handleNotifications = function(event){
         $('paper-toggle-button')[0].active = event.detail.response;
     };
 
     function checkBrowserStatus(){
         var browserStatus = 'Unknown';
 
         if (!("Notification" in window)) {
             browserStatus = 'Not supported'
         }
         else if(Notification.permission === 'denied'){
             browserStatus = 'Denied';
             $('.flash_msg').append('<div class="alert alert-error">Notifications are blocked on browser level - you need to enable them in your browser settings.</div>')
         }
         else if(Notification.permission === 'granted'){
             browserStatus = 'Allowed';
         }
 
         $('#browser-notification-status').text(browserStatus);
     };
 
     checkBrowserStatus();
 
 $('#test-notification').on('click', function(e){
     var levels = ['info', 'error', 'warning', 'success'];
     var level = levels[Math.floor(Math.random()*levels.length)];
     var payload = {
         message: {
             message: 'This is a test notification.',
             level: level,
             testMessage: true
         }
     };
     $.Topic('/notifications').publish(payload);
 })
 </script>
 </template>

rhodecode/templates/base/root.html

@@ -1,159 +1,160 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>
         <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 webcomponents polyfills
                 (function() {
                     if ('registerElement' in document
                             && 'import' in document.createElement('link')
                             && 'content' in document.createElement('template')) {
                         // browser has web components
                     } else {
                         // polyfill web components
                         var e = document.createElement('script');
                         e.src = '${h.asset('js/vendors/webcomponentsjs/webcomponents-lite.min.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)}" async>
 
             <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
               }
             };
             </script>
             <!--[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 language="javascript" type="text/javascript" src="${h.asset('js/scripts.js', ver=c.rhodecode_version_hash)}"></script>
+            <link rel="import" href="${h.asset('js/rhodecode-components.html', ver=c.rhodecode_version_hash)}">
+            <style include="shared-styles" is="custom-style"></style>
             ## avoide escaping the %N
             <script>CodeMirror.modeURL = "${h.asset('') + 'js/mode/%N/%N.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()}
         <%include file="/base/plugins_base.html"/>
 
         ## 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-toast id="notifications"></rhodecode-toast>
     </body>
 </html>