frontend: use webpack instead of vulcanize

rhodecode/public/js/src/components/index.js

@@ -0,0 +1,7 b''
+import '../../../../../bower_components/iron-ajax/iron-ajax.html';
+import './root-styles.gen.html';
+import './channelstream-connection/channelstream-connection.html';
+import './rhodecode-toast/rhodecode-toast.html';
+import './rhodecode-toggle/rhodecode-toggle.html';
+import './rhodecode-unsafe-html/rhodecode-unsafe-html.html';
+import './rhodecode-app/rhodecode-app.html';

webpack.config.js

@@ -0,0 +1,69 b''
+/* webpack.config.js */
+require('style-loader');
+require('css-loader');
+var path = require('path');
+
+const projectName = 'rhodecode-components';
+let destinationDirectory = path.join(process.cwd(), 'rhodecode', 'public', 'js')
+
+if (process.env.RC_STATIC_DIR) {
+    destinationDirectory = process.env.RC_STATIC_DIR;
+}
+
+module.exports = {
+    // Tell Webpack which file kicks off our app.
+    entry: {
+        main: path.resolve(__dirname, 'rhodecode/public/js/src/components/index.js'),
+    },
+    output: {
+        filename: 'rhodecode-components.js',
+        path: path.resolve(destinationDirectory)
+    },
+    // Tell Webpack which directories to look in to resolve import statements.
+    // Normally Webpack will look in node_modules by default but since we’re overriding
+    // the property we’ll need to tell it to look there in addition to the
+    // bower_components folder.
+    resolve: {
+        modules: [
+            path.resolve(__dirname, 'node_modules'),
+            path.resolve(__dirname, 'bower_components')
+        ]
+    },
+    // These rules tell Webpack how to process different module types.
+    // Remember, *everything* is a module in Webpack. That includes
+    // CSS, and (thanks to our loader) HTML.
+    module: {
+        rules: [
+            {
+                // If you see a file that ends in .html, send it to these loaders.
+                test: /\.html$/,
+                // This is an example of chained loaders in Webpack.
+                // Chained loaders run last to first. So it will run
+                // polymer-webpack-loader, and hand the output to
+                // babel-loader. This let's us transpile JS in our `<script>` elements.
+                use: [
+                    {loader: 'babel-loader'},
+                    {loader: 'polymer-webpack-loader',
+                        options: {
+                            processStyleLinks: true,
+                        }
+                    }
+                ],
+            },
+            {
+                // If you see a file that ends in .js, just send it to the babel-loader.
+                test: /\.js$/,
+                use: 'babel-loader'
+                // Optionally exclude node_modules from transpilation except for polymer-webpack-loader:
+                // exclude: /node_modules\/(?!polymer-webpack-loader\/).*/
+            },
+            // this is required because of bug:
+            // https://github.com/webpack-contrib/polymer-webpack-loader/issues/49
+            {
+                test: /intl-messageformat.min.js/,
+                use: 'imports-loader?this=>window'
+            }
+        ]
+    },
+    plugins: []
+};

.hgignore

@@ -1,67 +1,68 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/
 ^node_binaries/
 ^pylint.log$
 ^rcextensions/
 ^result$
 ^rhodecode/public/css/style.css$
 ^rhodecode/public/css/style-polymer.css$
 ^rhodecode/public/js/rhodecode-components.html$
 ^rhodecode/public/js/scripts.js$
 ^rhodecode/public/js/rhodecode-components.js$
+^rhodecode/public/js/app-bundle.js$
 ^rhodecode/public/js/src/components/root-styles.gen.html$
 ^rhodecode/public/js/vendors/webcomponentsjs/
 ^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,14 +1,21 b''
 var gruntConfig = require('./grunt_config.json');
+var webpackConfig = require('./webpack.config');
+gruntConfig["webpack"] = {
+    options: {
+        stats: !process.env.NODE_ENV || process.env.NODE_ENV === 'development'
+    },
+    prod: webpackConfig,
+    dev: Object.assign({ watch: false }, webpackConfig)
+};
 
 module.exports = function(grunt) {
   grunt.initConfig(gruntConfig);
 
   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-contrib-copy');
-
-  grunt.registerTask('default', ['less:production', 'less:components', 'concat:polymercss', 'copy', 'concat:dist', 'vulcanize']);
+  grunt.loadNpmTasks('grunt-webpack');
+  grunt.registerTask('default', ['less:production', 'less:components',  'concat:polymercss', 'copy', 'webpack', 'concat:dist']);
 };

grunt_config.json

@@ -1,188 +1,176 b''
 {
   "dirs": {
     "css": {
       "src":"rhodecode/public/css",
       "dest":"rhodecode/public/css"
     },
     "js": {
       "src": "rhodecode/public/js/src",
       "src_rc": "rhodecode/public/js/rhodecode",
       "dest": "rhodecode/public/js",
       "bower": "bower_components",
       "node_modules": "node_modules"
     }
   },
   "copy": {
     "main": {
       "expand": true,
       "cwd": "bower_components",
       "src": "webcomponentsjs/webcomponents*.*",
       "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.node_modules %>/jquery/dist/jquery.min.js",
         "<%= dirs.js.node_modules %>/mousetrap/mousetrap.min.js",
         "<%= dirs.js.node_modules %>/moment/min/moment.min.js",
         "<%= dirs.js.node_modules %>/clipboard/dist/clipboard.min.js",
         "<%= dirs.js.node_modules %>/favico.js/favico-0.3.10.min.js",
         "<%= dirs.js.node_modules %>/sticky-sidebar/dist/sticky-sidebar.min.js",
         "<%= dirs.js.node_modules %>/sticky-sidebar/dist/jquery.sticky-sidebar.min.js",
         "<%= dirs.js.node_modules %>/waypoints/lib/noframework.waypoints.min.js",
         "<%= dirs.js.node_modules %>/waypoints/lib/jquery.waypoints.min.js",
         "<%= dirs.js.node_modules %>/appenlight-client/appenlight-client.min.js",
         "<%= dirs.js.src %>/logging.js",
         "<%= dirs.js.src %>/bootstrap.js",
         "<%= dirs.js.src %>/i18n_utils.js",
         "<%= dirs.js.src %>/deform.js",
         "<%= dirs.js.src %>/ejs.js",
         "<%= dirs.js.src %>/ejs_templates/utils.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.src %>/codemirror/codemirror_simplemode.js",
         "<%= dirs.js.dest %>/mode/meta.js",
         "<%= dirs.js.dest %>/mode/meta_ext.js",
         "<%= dirs.js.src_rc %>/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/init.js",
         "<%= dirs.js.src %>/rhodecode/changelog.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"
+        "<%= dirs.js.src %>/rhodecode.js",
+        "<%= dirs.js.dest %>/rhodecode-components.js"
       ],
       "dest": "<%= dirs.js.dest %>/scripts.js",
       "nonull": true
     }
   },
   "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",
+        "webpack",
         "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",
+        "webpack",
         "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"
-      }
-    }
   }
 }

package.json

@@ -1,36 +1,50 b''
 {
   "name": "rhodecode-enterprise",
   "version": "1.0.0",
   "private": true,
   "description" : "RhodeCode JS packaged",
   "license": "SEE LICENSE IN LICENSE.txt",
   "repository" : {
     "type" : "hg",
     "url" : "https://code.rhodecode.com/rhodecode-enterprise-ce"
   },
   "devDependencies": {
     "appenlight-client": "git+https://[e-mail]/AppEnlight/appenlight-client-js.git#0.5.1",
     "bower": "^1.8.4",
     "clipboard": "^2.0.1",
     "exports-loader": "^0.6.4",
     "favico.js": "^0.3.10",
     "grunt": "^0.4.5",
     "grunt-cli": "^1.3.1",
     "grunt-contrib-concat": "^0.5.1",
     "grunt-contrib-copy": "^1.0.0",
     "grunt-contrib-jshint": "^0.12.0",
     "grunt-contrib-less": "^1.1.0",
     "grunt-contrib-watch": "^0.6.1",
-    "grunt-vulcanize": "^1.0.0",
+    "grunt-webpack": "^3.1.3",
     "jquery": "1.11.3",
     "jshint": "^2.9.1-rc3",
     "moment": "^2.18.1",
     "mousetrap": "^1.6.1",
     "qrious": "^4.0.2",
     "sticky-sidebar": "3.3.1",
-    "vulcanize": "^1.16.0",
     "waypoints": "4.0.1",
     "webpack": "4.23.1",
-    "webpack-cli": "3.1.2"
+    "webpack-cli": "3.1.2",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.6.0",
+    "copy-webpack-plugin": "^4.4.2",
+    "css-loader": "^0.28.11",
+    "exports-loader": "^0.6.4",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^3.2.0",
+    "imports-loader": "^0.7.1",
+    "polymer-webpack-loader": "^2.0.1",
+    "style-loader": "^0.21.0",
+    "webpack-uglify-js-plugin": "^1.1.9",
+    "raw-loader": "1.0.0-beta.0",
+    "ts-loader": "^1.3.3"
   }
 }

rhodecode/apps/home/tests/test_home.py

@@ -1,142 +1,141 b''
 # -*- coding: utf-8 -*-
 
 # Copyright (C) 2010-2018 RhodeCode GmbH
 #
 # This program is free software: you can redistribute it and/or modify
 # it under the terms of the GNU Affero General Public License, version 3
 # (only), as published by the Free Software Foundation.
 #
 # This program is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 #
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #
 # This program is dual-licensed. If you wish to learn more about the
 # RhodeCode Enterprise Edition, including its added features, Support services,
 # and proprietary license terms, please see https://rhodecode.com/licenses/
 
 
 import pytest
 
 import rhodecode
 from rhodecode.model.db import Repository
 from rhodecode.model.meta import Session
 from rhodecode.model.repo import RepoModel
 from rhodecode.model.repo_group import RepoGroupModel
 from rhodecode.model.settings import SettingsModel
 from rhodecode.tests import TestController
 from rhodecode.tests.fixture import Fixture
 from rhodecode.lib import helpers as h
 
 fixture = Fixture()
 
 
 def route_path(name, **kwargs):
     return {
         'home': '/',
         'repo_group_home': '/{repo_group_name}'
     }[name].format(**kwargs)
 
 
 class TestHomeController(TestController):
 
     def test_index(self):
         self.log_user()
         response = self.app.get(route_path('home'))
         # if global permission is set
         response.mustcontain('Add Repository')
 
         # search for objects inside the JavaScript JSON
         for repo in Repository.getAll():
             response.mustcontain('"name_raw": "%s"' % repo.repo_name)
 
     def test_index_contains_statics_with_ver(self):
         from rhodecode.lib.base import calculate_version_hash
 
         self.log_user()
         response = self.app.get(route_path('home'))
 
         rhodecode_version_hash = calculate_version_hash(
             {'beaker.session.secret': 'test-rc-uytcxaz'})
         response.mustcontain('style.css?ver={0}'.format(rhodecode_version_hash))
         response.mustcontain('scripts.js?ver={0}'.format(rhodecode_version_hash))
-        response.mustcontain('hodecode-components.html?ver={0}'.format(rhodecode_version_hash))
 
     def test_index_contains_backend_specific_details(self, backend):
         self.log_user()
         response = self.app.get(route_path('home'))
         tip = backend.repo.get_commit().raw_id
 
         # html in javascript variable:
         response.mustcontain(r'<i class=\"icon-%s\"' % (backend.alias, ))
         response.mustcontain(r'href=\"/%s\"' % (backend.repo_name, ))
 
         response.mustcontain("""/%s/changeset/%s""" % (backend.repo_name, tip))
         response.mustcontain("""Added a symlink""")
 
     def test_index_with_anonymous_access_disabled(self):
         with fixture.anon_access(False):
             response = self.app.get(route_path('home'), status=302)
             assert 'login' in response.location
 
     def test_index_page_on_groups(self, autologin_user, repo_group):
         response = self.app.get(route_path('repo_group_home', repo_group_name='gr1'))
         response.mustcontain("gr1/repo_in_group")
 
     def test_index_page_on_group_with_trailing_slash(
             self, autologin_user, repo_group):
         response = self.app.get(route_path('repo_group_home', repo_group_name='gr1') + '/')
         response.mustcontain("gr1/repo_in_group")
 
     @pytest.fixture(scope='class')
     def repo_group(self, request):
         gr = fixture.create_repo_group('gr1')
         fixture.create_repo(name='gr1/repo_in_group', repo_group=gr)
 
         @request.addfinalizer
         def cleanup():
             RepoModel().delete('gr1/repo_in_group')
             RepoGroupModel().delete(repo_group='gr1', force_delete=True)
             Session().commit()
 
     def test_index_with_name_with_tags(self, user_util, autologin_user):
         user = user_util.create_user()
         username = user.username
         user.name = '<img src="/image1" onload="alert(\'Hello, World!\');">'
         user.lastname = '#"><img src=x onerror=prompt(document.cookie);>'
 
         Session().add(user)
         Session().commit()
         user_util.create_repo(owner=username)
 
         response = self.app.get(route_path('home'))
         response.mustcontain(h.html_escape(user.first_name))
         response.mustcontain(h.html_escape(user.last_name))
 
     @pytest.mark.parametrize("name, state", [
         ('Disabled', False),
         ('Enabled', True),
     ])
     def test_index_show_version(self, autologin_user, name, state):
         version_string = 'RhodeCode Enterprise %s' % rhodecode.__version__
 
         sett = SettingsModel().create_or_update_setting(
             'show_version', state, 'bool')
         Session().add(sett)
         Session().commit()
         SettingsModel().invalidate_settings_cache()
 
         response = self.app.get(route_path('home'))
         if state is True:
             response.mustcontain(version_string)
         if state is False:
             response.mustcontain(no=[version_string])
 
     def test_logout_form_contains_csrf(self, autologin_user, csrf_token):
         response = self.app.get(route_path('home'))
         assert_response = response.assert_response()
         element = assert_response.get_element('.logout #csrf_token')
         assert element.value == csrf_token

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

@@ -1,185 +1,185 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>
         <channelstream-connection
                 id="channelstream-connection"
                 on-channelstream-listen-message="receivedMessage"
                 on-channelstream-connected="handleConnected"
                 on-channelstream-subscribed="handleSubscribed">
         </channelstream-connection>
         <rhodecode-favicon></rhodecode-favicon>
     </template>
     <script>
-        ccLog = Logger.get('RhodeCodeApp');
+        var 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.initPlugins();
                 // after rest of application loads and topics get fired, launch connection
                 $(document).ready(function () {
                     this.kickoffChannelstreamPlugin();
                 }.bind(this));
             },
 
             initPlugins: function(){
                 for (var i = 0; i < window.APPLICATION_PLUGINS.length; i++) {
                     var pluginDef = window.APPLICATION_PLUGINS[i];
                     if (pluginDef.component){
                         var pluginElem = document.createElement(pluginDef.component);
                         this.shadowRoot.appendChild(pluginElem);
                         if (typeof pluginElem.init !== 'undefined'){
                             pluginElem.init();
                         }
                     }
                 }
             },
             /** proxy to channelstream connection */
             getChannelStreamConnection: function () {
                 return this.$['channelstream-connection'];
             },
 
             handleNotifications: function (data) {
                 var elem = document.getElementById('notifications');
                 if(elem){
                     elem.handleNotification(data);
                 }
 
             },
 
             faviconUpdate: function (data) {
                 this.shadowRoot.querySelector('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 () {
                 // subscribe to different channels data is sent.
 
                 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);
                 }
 
                 if (templateContext.commit_data.commit_id) {
                     var channelName = '/repo$' + templateContext.repo_name + '$/commit/' +
                         String(templateContext.commit_data.commit_id);
                     channels.push(channelName);
                 }
 
                 return channels;
             },
 
             /** subscribes users from channels in channelstream */
             subscribeToChannelTopic: function (channels) {
                 var channelstreamConnection = this.getChannelStreamConnection();
                 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.getChannelStreamConnection();
                 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.getChannelStreamConnection();
                 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.getChannelStreamConnection();
                 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]}
                     );
                 }
             }
         });
 
     </script>
 </dom-module>

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

@@ -1,123 +1,200 b''
 <link rel="import" href="../../../../../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../../../../../bower_components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
 <link rel="import" href="../rhodecode-unsafe-html/rhodecode-unsafe-html.html">
 <dom-module id="rhodecode-toast">
     <template>
-        <style include="shared-styles"></style>
-        <link rel="stylesheet" href="rhodecode-toast.css">
+        <style include="shared-styles">
+            /* inset border for buttons - does not work in ie */
+            /* rounded borders */
+            /* rounded borders - bottom only */
+            /* rounded borders - top only */
+            /* text shadow */
+            /* centers text in a circle - input diameter of circle and color */
+            /* pill version of the circle */
+            .absolute-center {
+                margin: auto;
+                position: absolute;
+                top: 0;
+                left: 0;
+                bottom: 0;
+                right: 0;
+            }
+            .top-left-rounded-corner {
+                -webkit-border-top-left-radius: 2px;
+                -khtml-border-radius-topleft: 2px;
+                border-top-left-radius: 2px;
+            }
+            .top-right-rounded-corner {
+                -webkit-border-top-right-radius: 2px;
+                -khtml-border-radius-topright: 2px;
+                border-top-right-radius: 2px;
+            }
+            .bottom-left-rounded-corner {
+                -webkit-border-bottom-left-radius: 2px;
+                -khtml-border-radius-bottomleft: 2px;
+                border-bottom-left-radius: 2px;
+            }
+            .bottom-right-rounded-corner {
+                -webkit-border-bottom-right-radius: 2px;
+                -khtml-border-radius-bottomright: 2px;
+                border-bottom-right-radius: 2px;
+            }
+            .top-left-rounded-corner-mid {
+                -webkit-border-top-left-radius: 2px;
+                -khtml-border-radius-topleft: 2px;
+                border-top-left-radius: 2px;
+            }
+            .top-right-rounded-corner-mid {
+                -webkit-border-top-right-radius: 2px;
+                -khtml-border-radius-topright: 2px;
+                border-top-right-radius: 2px;
+            }
+            .bottom-left-rounded-corner-mid {
+                -webkit-border-bottom-left-radius: 2px;
+                -khtml-border-radius-bottomleft: 2px;
+                border-bottom-left-radius: 2px;
+            }
+            .bottom-right-rounded-corner-mid {
+                -webkit-border-bottom-right-radius: 2px;
+                -khtml-border-radius-bottomright: 2px;
+                border-bottom-right-radius: 2px;
+            }
+            .alert {
+                margin: 10px 0;
+            }
+            .toast-close {
+                margin: 0;
+                float: right;
+                cursor: pointer;
+            }
+            .toast-message-holder {
+                background: rgba(255, 255, 255, 0.25);
+            }
+            .toast-message-holder.fixed {
+                position: fixed;
+                padding: 10px 0;
+                margin-left: 10px;
+                margin-right: 10px;
+                top: 0;
+                left: 0;
+                right: 0;
+                z-index: 100;
+            }
+        </style>
+
         <template is="dom-if" if="[[hasToasts]]">
             <div class$="container toast-message-holder [[conditionalClass(isFixed)]]">
                 <template is="dom-repeat" items="[[toasts]]">
                     <div class$="alert alert-[[item.level]]">
                         <div on-tap="dismissNotification" class="toast-close"  index-pos="[[index]]">
                             <span>[[_gettext('Close')]]</span>
                         </div>
                         <rhodecode-unsafe-html text="[[item.message]]"></rhodecode-unsafe-html>
                     </div>
                 </template>
             </div>
         </template>
     </template>
 
     <script>
         Polymer({
             is: 'rhodecode-toast',
             properties: {
                 toasts: {
                     type: Array,
                     value: function(){
                         return []
                     }
                 },
                 isFixed: {
                     type: Boolean,
                     value: false
                 },
                 hasToasts: {
                     type: Boolean,
                     computed: '_computeHasToasts(toasts.*)'
                 },
                 keyEventTarget: {
                     type: Object,
                     value: function() {
                         return document.body;
                     }
                 }
             },
             behaviors: [
                 Polymer.IronA11yKeysBehavior
             ],
             observers: [
                 '_changedToasts(toasts.splices)'
             ],
 
             keyBindings: {
                 'esc:keyup': '_hideOnEsc'
             },
 
             _hideOnEsc: function (event) {
                 return this.dismissNotifications();
             },
 
             _computeHasToasts: function(){
                 return this.toasts.length > 0;
             },
 
             _debouncedCalc: function(){
                 // calculate once in a while
                 this.debounce('debouncedCalc', this.toastInWindow, 25);
             },
 
             conditionalClass: function(){
                 return this.isFixed ? 'fixed': '';
             },
 
             toastInWindow: function() {
                 if (!this._headerNode){
                     return true
                 }
                 var headerHeight = this._headerNode.offsetHeight;
                 var scrollPosition = window.scrollY;
 
                 if (this.isFixed){
                     this.isFixed = 1 <= scrollPosition;
                 }
                 else{
                     this.isFixed = headerHeight <= scrollPosition;
                 }
             },
 
             attached: function(){
                 this._headerNode = document.querySelector('.header', document);
                 this.listen(window,'scroll', '_debouncedCalc');
                 this.listen(window,'resize', '_debouncedCalc');
                 this._debouncedCalc();
             },
             _changedToasts: function(newValue, oldValue){
                 $.Topic('/favicon/update').publish({count: this.toasts.length});
             },
             dismissNotification: function(e) {
                 $.Topic('/favicon/update').publish({count: this.toasts.length-1});
                 var idx = e.target.parentNode.indexPos
                 this.splice('toasts', idx, 1);
 
             },
             dismissNotifications: function(){
                 $.Topic('/favicon/update').publish({count: 0});
                 this.splice('toasts', 0);
             },
             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
                 });
             },
             _gettext: _gettext
         });
 
     </script>
 </dom-module>

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

@@ -1,37 +1,48 b''
 <link rel="import" href="../../../../../../bower_components/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="../../../../../../bower_components/paper-spinner/paper-spinner.html">
 <link rel="import" href="../../../../../../bower_components/paper-tooltip/paper-tooltip.html">
 
 <dom-module id="rhodecode-toggle">
 
-    <style include="shared-styles"></style>
-    <link rel="stylesheet" href="rhodecode-toggle.css">
+    <style include="shared-styles">
+        .rc-toggle {
+            float: left;
+            position: relative;
+        }
+        .rc-toggle paper-spinner {
+            position: absolute;
+            top: 0;
+            left: -30px;
+            width: 20px;
+            height: 20px;
+        }
+    </style>
 
     <template>
         <div class="rc-toggle">
             <paper-toggle-button checked={{checked}}>[[labelStatus(checked)]]</paper-toggle-button>
             <paper-tooltip>[[tooltipText]]</paper-tooltip>
             <template is="dom-if" if="[[shouldShow(noSpinner)]]">
                 <paper-spinner active=[[active]]></paper-spinner>
             </template>
         </div>
     </template>
 
     <script>
         Polymer({
             is: 'rhodecode-toggle',
             properties: {
                 noSpinner: { type: Boolean, value: false, reflectToAttribute:true},
                 tooltipText: { type: String, value: "Click to toggle", reflectToAttribute:true},
                 checked: { type:  Boolean, value: false, reflectToAttribute:true},
                 active: { type: Boolean, value: false, reflectToAttribute:true, notify:true}
             },
             shouldShow: function(){
                 return !this.noSpinner
             },
             labelStatus: function(isActive){
                 return this.checked? 'Enabled' : "Disabled"
             }
         });
     </script>
 </dom-module>

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

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

rhodecode/templates/base/root.mako

@@ -1,162 +1,161 b''
 ## -*- coding: utf-8 -*-
 <!DOCTYPE html>
 
 <%
 c.template_context['repo_name'] = getattr(c, 'repo_name', '')
 go_import_header = ''
 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, 'repo_group', None):
     c.template_context['repo_group_id'] = c.repo_group.group_id
 
 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['rhodecode_user']['first_name'] = c.rhodecode_user.first_name
     c.template_context['rhodecode_user']['last_name'] = c.rhodecode_user.last_name
 
 c.template_context['visual']['default_renderer'] = h.get_visual_attr(c, 'default_renderer')
 c.template_context['default_user'] = {
     'username': h.DEFAULT_USER,
     'user_id': 1
 }
 
 %>
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <script src="${h.asset('js/vendors/webcomponentsjs/webcomponents-lite.js', ver=c.rhodecode_version_hash)}"></script>
         <title>${self.title()}</title>
         <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 
         ${h.go_import_header(request, getattr(c, 'rhodecode_db_repo', None))}
 
         % if 'safari' in (request.user_agent or '').lower():
             <meta name="referrer" content="origin">
         % else:
             <meta name="referrer" content="origin-when-cross-origin">
         % endif
 
         <%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 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 APPLICATION_URL = "${h.route_path('home').rstrip('/')}";
             var APPLICATION_PLUGINS = [];
             var ASSET_URL = "${h.asset('')}";
             var DEFAULT_RENDERER = "${h.get_visual_attr(c, 'default_renderer')}";
             var CSRF_TOKEN = "${getattr(c, 'csrf_token', '')}";
 
             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.mako"/>
             <!--[if lt IE 9]>
             <script language="javascript" type="text/javascript" src="${h.asset('js/src/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(request=request)|n}; </script>
             ## avoide escaping the %N
             <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)}">
             <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">
             Rhodecode = (function() {
                 function _Rhodecode() {
                   this.comments = new CommentsController();
                 }
                 return new _Rhodecode();
             })();
 
             $(document).ready(function(){
               show_more_event();
               timeagoActivate();
               clipboardActivate();
             })
             </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>