js: use ES6 classes for polymer 2.x

.babelrc

@@ -1,10 +1,10 b''
 {
   "presets": [
     ["env", {
       "targets": {
         "browsers": ["last 2 versions"]
       }
     }]
   ],
-    "plugins": ["transform-object-rest-spread"]
+  "plugins": ["transform-object-rest-spread"]
 }

grunt_config.json

@@ -1,176 +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*.*",
+      "src": "webcomponentsjs/*.*",
       "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.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",
         "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",
         "webpack",
         "concat:dist"
       ]
     }
   },
   "jshint": {
     "rhodecode": {
       "src": "<%= dirs.js.src %>/rhodecode/**/*.js",
       "options": {
         "jshintrc": ".jshintrc"
       }
     }
   }
 }

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

@@ -1,185 +1,195 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>
         var ccLog = Logger.get('RhodeCodeApp');
         ccLog.setLevel(Logger.OFF);
 
-        var rhodeCodeApp = Polymer({
-            is: 'rhodecode-app',
-            attached: function () {
+        class RhodecodeApp extends Polymer.Element {
+
+            static get is() {
+                return 'rhodecode-app';
+            }
+
+            connectedCallback() {
+                super.connectedCallback();
                 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(){
+            initPlugins() {
                 for (var i = 0; i < window.APPLICATION_PLUGINS.length; i++) {
                     var pluginDef = window.APPLICATION_PLUGINS[i];
-                    if (pluginDef.component){
+                    if (pluginDef.component) {
                         var pluginElem = document.createElement(pluginDef.component);
                         this.shadowRoot.appendChild(pluginElem);
-                        if (typeof pluginElem.init !== 'undefined'){
+                        if (typeof pluginElem.init !== 'undefined') {
                             pluginElem.init();
                         }
                     }
                 }
-            },
+            }
+
             /** proxy to channelstream connection */
-            getChannelStreamConnection: function () {
+            getChannelStreamConnection() {
                 return this.$['channelstream-connection'];
-            },
+            }
 
-            handleNotifications: function (data) {
+            handleNotifications(data) {
                 var elem = document.getElementById('notifications');
-                if(elem){
+                if (elem) {
                     elem.handleNotification(data);
                 }
 
-            },
+            }
 
-            faviconUpdate: function (data) {
+            faviconUpdate(data) {
                 this.shadowRoot.querySelector('rhodecode-favicon').counter = data.count;
-            },
+            }
 
             /** opens connection to ws server */
-            kickoffChannelstreamPlugin: function (data) {
+            kickoffChannelstreamPlugin(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){
+                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 () {
+            checkViewChannels() {
                 // 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) {
+            subscribeToChannelTopic(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) {
+            receivedMessage(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'){
+                    else if (message.type === 'presence') {
                         $.Topic('/connection_controller/presence').publish(message);
                     }
                     else {
                         ccLog.warn('unhandled message', message);
                     }
                 }
-            },
+            }
 
-            handleConnected: function (event) {
+            handleConnected(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) {
+            }
+
+            handleSubscribed(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) {
+            propagageChannelsState(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]}
                     );
                 }
             }
-        });
 
+        }
+
+        customElements.define(RhodecodeApp.is, RhodecodeApp);
     </script>
 </dom-module>

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

@@ -1,29 +1,38 b''
 <link rel="import" href="../../../../../../bower_components/polymer/polymer.html">
 
 <dom-module id="rhodecode-favicon">
     <template>
     </template>
     <script>
-        Polymer({
-            is: 'rhodecode-favicon',
-            properties: {
-                favicon: Object,
-                counter: {
-                    type: Number,
-                    observer: '_handleCounter'
+        class RhodecodeFavicon extends Polymer.Element {
+
+            static get is() { return 'rhodecode-favicon'; }
+
+            static get properties() {
+                return {
+                    favicon: Object,
+                    counter: {
+                        type: Number,
+                        observer: '_handleCounter'
+                    }
                 }
-            },
+            }
 
-            ready: function () {
+            connectedCallback() {
+                super.connectedCallback();
                 this.favicon = new Favico({
                     type: 'rectangle',
                     animation: 'none'
                 });
-            },
-            _handleCounter: function (newVal, oldVal) {
+            }
+
+            _handleCounter(newVal, oldVal) {
                 this.favicon.badge(this.counter);
             }
-        });
+
+        }
+        customElements.define(RhodecodeFavicon.is, RhodecodeFavicon);
+
 
     </script>
 </dom-module>

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

@@ -1,200 +1,233 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="../../../../../../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">
             /* 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]]">
+                        <div on-click="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;
+
+        class RhodecodeToast extends Polymer.mixinBehaviors([Polymer.IronA11yKeysBehavior], Polymer.Element) {
+
+            static get is() {
+                return 'rhodecode-toast';
+            }
+
+            static get properties() {
+                return {
+                    toasts: {
+                        type: Array,
+                        value() {
+                            return []
+                        }
+                    },
+                    isFixed: {
+                        type: Boolean,
+                        value: false
+                    },
+                    hasToasts: {
+                        type: Boolean,
+                        computed: '_computeHasToasts(toasts.*)'
+                    },
+                    keyEventTarget: {
+                        type: Object,
+                        value() {
+                            return document.body;
+                        }
                     }
                 }
-            },
-            behaviors: [
-                Polymer.IronA11yKeysBehavior
-            ],
-            observers: [
-                '_changedToasts(toasts.splices)'
-            ],
+            }
+
+            get keyBindings() {
+                return {
+                    'esc:keyup': '_hideOnEsc'
+                }
+            }
 
-            keyBindings: {
-                'esc:keyup': '_hideOnEsc'
-            },
+            static get observers() {
+                return [
+                    '_changedToasts(toasts.splices)'
+                ]
+            }
 
-            _hideOnEsc: function (event) {
+            _hideOnEsc(event) {
                 return this.dismissNotifications();
-            },
+            }
 
-            _computeHasToasts: function(){
+            _computeHasToasts() {
                 return this.toasts.length > 0;
-            },
+            }
 
-            _debouncedCalc: function(){
+            _debouncedCalc() {
                 // calculate once in a while
                 this.debounce('debouncedCalc', this.toastInWindow, 25);
-            },
+            }
 
-            conditionalClass: function(){
-                return this.isFixed ? 'fixed': '';
-            },
+            conditionalClass() {
+                return this.isFixed ? 'fixed' : '';
+            }
 
-            toastInWindow: function() {
-                if (!this._headerNode){
+            toastInWindow() {
+                if (!this._headerNode) {
                     return true
                 }
                 var headerHeight = this._headerNode.offsetHeight;
                 var scrollPosition = window.scrollY;
 
-                if (this.isFixed){
+                if (this.isFixed) {
                     this.isFixed = 1 <= scrollPosition;
                 }
-                else{
+                else {
                     this.isFixed = headerHeight <= scrollPosition;
                 }
-            },
+            }
 
-            attached: function(){
+            connectedCallback() {
+                super.connectedCallback();
                 this._headerNode = document.querySelector('.header', document);
-                this.listen(window,'scroll', '_debouncedCalc');
-                this.listen(window,'resize', '_debouncedCalc');
+                this.listen(window, 'scroll', '_debouncedCalc');
+                this.listen(window, 'resize', '_debouncedCalc');
                 this._debouncedCalc();
-            },
-            _changedToasts: function(newValue, oldValue){
+            }
+
+            _changedToasts(newValue, oldValue) {
                 $.Topic('/favicon/update').publish({count: this.toasts.length});
-            },
-            dismissNotification: function(e) {
-                $.Topic('/favicon/update').publish({count: this.toasts.length-1});
+            }
+
+            dismissNotification(e) {
+                $.Topic('/favicon/update').publish({count: this.toasts.length - 1});
                 var idx = e.target.parentNode.indexPos
                 this.splice('toasts', idx, 1);
 
-            },
-            dismissNotifications: function(){
+            }
+
+            dismissNotifications() {
                 $.Topic('/favicon/update').publish({count: 0});
                 this.splice('toasts', 0);
-            },
-            handleNotification: function(data){
+            }
+
+            handleNotification(data) {
                 if (!templateContext.rhodecode_user.notification_status && !data.message.force) {
                     // do not act if notifications are disabled
                     return
                 }
-                this.push('toasts',{
+                this.push('toasts', {
                     level: data.message.level,
                     message: data.message.message
                 });
-            },
-            _gettext: _gettext
-        });
+            }
+
+            _gettext(x){
+                return _gettext(x)
+            }
+
+        }
+
+        customElements.define(RhodecodeToast.is, RhodecodeToast);
 
     </script>
 </dom-module>

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

@@ -1,48 +1,61 b''
-<link rel="import" href="../../../../../../bower_components/paper-toggle-button/paper-toggle-button.html">
+<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">
         .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(){
+
+        class RhodecodeToggle extends Polymer.Element {
+
+            static get is() {
+                return 'rhodecode-toggle';
+            }
+
+            static get properties() {
+                return {
+                    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() {
                 return !this.noSpinner
-            },
-            labelStatus: function(isActive){
-                return this.checked? 'Enabled' : "Disabled"
             }
-        });
+
+            labelStatus(isActive) {
+                return this.checked ? 'Enabled' : "Disabled"
+            }
+        }
+
+        customElements.define(RhodecodeToggle.is, RhodecodeToggle);
     </script>
 </dom-module>

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

@@ -1,23 +1,31 b''
-<link rel="import" href="../../../../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../../../../bower_components/polymer/polymer-element.html">
 
 <dom-module id="rhodecode-unsafe-html">
     <template>
         <style include="shared-styles"></style>
         <slot></slot>
     </template>
     <script>
-        Polymer({
-            is: 'rhodecode-unsafe-html',
-            properties: {
-                text: {
-                    type: String,
-                    observer: '_handleText'
+        class RhodecodeUnsafeHtml extends Polymer.Element {
+
+            static get is() {
+                return 'rhodecode-unsafe-html';
+            }
+
+            static get properties() {
+                return {
+                    text: {
+                        type: String,
+                        observer: '_handleText'
+                    }
                 }
-            },
-            _handleText: function(newVal, oldVal){
+            }
+
+            _handleText(newVal, oldVal) {
                 this.innerHTML = this.text;
             }
-        })
+        }
 
+        customElements.define(RhodecodeUnsafeHtml.is, RhodecodeUnsafeHtml);
     </script>
 </dom-module>

rhodecode/templates/base/root.mako

@@ -1,161 +1,163 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/custom-elements-es5-adapter.js', ver=c.rhodecode_version_hash)}"></script>
         <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>
             <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>

webpack.config.js

@@ -1,69 +1,82 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;
 }
 
+// doing it this way because it seems that plugin via grunt does not pick up .babelrc
+let babelRCOptions = {
+    "presets": [
+        ["env", {
+            "targets": {
+                "browsers": ["last 2 versions"]
+            }
+        }]
+    ],
+    "plugins": ["transform-object-rest-spread"]
+}
+
 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: 'babel-loader',
+                    options: babelRCOptions},
                     {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'
+                use: {loader: 'babel-loader', options: babelRCOptions}
                 // 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: []
 };