polymer: prepare for 3.x migration

rhodecode/public/js/src/components/channelstream-connection/channelstream-connection.html

@@ -102,5 +102,509 b' this handler will forever try to re-esta'
             debounce-duration="100"></iron-ajax>
 
     </template>
-    <script src="channelstream-connection.js"></script>
+    <script>
+        Polymer({
+            is: 'channelstream-connection',
+
+            /**
+             * Fired when `channels` array changes.
+             *
+             * @event channelstream-channels-changed
+             */
+
+            /**
+             * Fired when `connect()` method succeeds.
+             *
+             * @event channelstream-connected
+             */
+
+            /**
+             * Fired when `connect` fails.
+             *
+             * @event channelstream-connect-error
+             */
+
+            /**
+             * Fired when `disconnect()` succeeds.
+             *
+             * @event channelstream-disconnected
+             */
+
+            /**
+             * Fired when `message()` succeeds.
+             *
+             * @event channelstream-message-sent
+             */
+
+            /**
+             * Fired when `message()` fails.
+             *
+             * @event channelstream-message-error
+             */
+
+            /**
+             * Fired when `subscribe()` succeeds.
+             *
+             * @event channelstream-subscribed
+             */
+
+            /**
+             * Fired when `subscribe()` fails.
+             *
+             * @event channelstream-subscribe-error
+             */
+
+            /**
+             * Fired when `unsubscribe()` succeeds.
+             *
+             * @event channelstream-unsubscribed
+             */
+
+            /**
+             * Fired when `unsubscribe()` fails.
+             *
+             * @event channelstream-unsubscribe-error
+             */
+
+            /**
+             * Fired when listening connection receives a message.
+             *
+             * @event channelstream-listen-message
+             */
+
+            /**
+             * Fired when listening connection is opened.
+             *
+             * @event channelstream-listen-opened
+             */
+
+            /**
+             * Fired when listening connection is closed.
+             *
+             * @event channelstream-listen-closed
+             */
+
+            /**
+             * Fired when listening connection suffers an error.
+             *
+             * @event channelstream-listen-error
+             */
+
+            properties: {
+                isReady: Boolean,
+                /** List of channels user should be subscribed to. */
+                channels: {
+                    type: Array,
+                    value: function () {
+                        return []
+                    },
+                    notify: true
+                },
+                /** Username of connecting user. */
+                username: {
+                    type: String,
+                    value: 'Anonymous',
+                    reflectToAttribute: true
+                },
+                /** Connection identifier. */
+                connectionId: {
+                    type: String,
+                    reflectToAttribute: true
+                },
+                /** Websocket instance. */
+                websocket: {
+                    type: Object,
+                    value: null
+                },
+                /** Websocket connection url. */
+                websocketUrl: {
+                    type: String,
+                    value: ''
+                },
+                /** URL used in `connect()`. */
+                connectUrl: {
+                    type: String,
+                    value: ''
+                },
+                /** URL used in `disconnect()`. */
+                disconnectUrl: {
+                    type: String,
+                    value: ''
+                },
+                /** URL used in `subscribe()`. */
+                subscribeUrl: {
+                    type: String,
+                    value: ''
+                },
+                /** URL used in `unsubscribe()`. */
+                unsubscribeUrl: {
+                    type: String,
+                    value: ''
+                },
+                /** URL used in `message()`. */
+                messageUrl: {
+                    type: String,
+                    value: ''
+                },
+                /** Long-polling connection url. */
+                longPollUrl: {
+                    type: String,
+                    value: ''
+                },
+                /** Long-polling connection url. */
+                shouldReconnect: {
+                    type: Boolean,
+                    value: true
+                },
+                /** Should send heartbeats. */
+                heartbeats: {
+                    type: Boolean,
+                    value: true
+                },
+                /** How much should every retry interval increase (in milliseconds) */
+                increaseBounceIv: {
+                    type: Number,
+                    value: 2000
+                },
+                _currentBounceIv: {
+                    type: Number,
+                    reflectToAttribute: true,
+                    value: 0
+                },
+                /** Should use websockets or long-polling by default */
+                useWebsocket: {
+                    type: Boolean,
+                    reflectToAttribute: true,
+                    value: true
+                },
+                connected: {
+                    type: Boolean,
+                    reflectToAttribute: true,
+                    value: false
+                }
+            },
+
+            observers: [
+                '_handleChannelsChange(channels.splices)'
+            ],
+
+            listeners: {
+                'channelstream-connected': 'startListening',
+                'channelstream-connect-error': 'retryConnection',
+            },
+
+            /**
+             * Mutators hold functions that you can set locally to change the data
+             * that the client is sending to all endpoints
+             * you can call it like `elem.mutators('connect', yourFunc())`
+             * mutators will be executed in order they were pushed onto arrays
+             *
+             */
+            mutators: {
+                connect: function () {
+                    return []
+                }(),
+                message: function () {
+                    return []
+                }(),
+                subscribe: function () {
+                    return []
+                }(),
+                unsubscribe: function () {
+                    return []
+                }(),
+                disconnect: function () {
+                    return []
+                }()
+            },
+            ready: function () {
+                this.isReady = true;
+            },
+
+            /**
+             * Connects user and fetches connection id from the server.
+             *
+             */
+            connect: function () {
+                var request = this.$['ajaxConnect'];
+                request.url = this.connectUrl;
+                request.body = {
+                    username: this.username,
+                    channels: this.channels
+                };
+                for (var i = 0; i < this.mutators.connect.length; i++) {
+                    this.mutators.connect[i](request);
+                }
+                request.generateRequest()
+            },
+            /**
+             * Overwrite with custom function that will
+             */
+            addMutator: function (type, func) {
+                this.mutators[type].push(func);
+            },
+            /**
+             * Subscribes user to channels.
+             *
+             */
+            subscribe: function (channels) {
+                var request = this.$['ajaxSubscribe'];
+                request.url = this.subscribeUrl;
+                request.body = {
+                    channels: channels,
+                    conn_id: this.connectionId
+                };
+                for (var i = 0; i < this.mutators.subscribe.length; i++) {
+                    this.mutators.subscribe[i](request);
+                }
+                if (request.body.channels.length) {
+                    request.generateRequest();
+                }
+            },
+            /**
+             * Unsubscribes user from channels.
+             *
+             */
+            unsubscribe: function (unsubscribe) {
+                var request = this.$['ajaxUnsubscribe'];
+
+                request.url = this.unsubscribeUrl;
+                request.body = {
+                    channels: unsubscribe,
+                    conn_id: this.connectionId
+                };
+                for (var i = 0; i < this.mutators.unsubscribe.length; i++) {
+                    this.mutators.unsubscribe[i](request);
+                }
+                request.generateRequest()
+            },
+
+            /**
+             * calculates list of channels we should add user to based on difference
+             * between channels property and passed channel list
+             */
+            calculateSubscribe: function (channels) {
+                var currentlySubscribed = this.channels;
+                var toSubscribe = [];
+                for (var i = 0; i < channels.length; i++) {
+                    if (currentlySubscribed.indexOf(channels[i]) === -1) {
+                        toSubscribe.push(channels[i]);
+                    }
+                }
+                return toSubscribe
+            },
+            /**
+             * calculates list of channels we should remove user from based difference
+             * between channels property and passed channel list
+             */
+            calculateUnsubscribe: function (channels) {
+                var currentlySubscribed = this.channels;
+                var toUnsubscribe = [];
+                for (var i = 0; i < channels.length; i++) {
+                    if (currentlySubscribed.indexOf(channels[i]) !== -1) {
+                        toUnsubscribe.push(channels[i]);
+                    }
+                }
+                return toUnsubscribe
+            },
+            /**
+             * Marks the connection as expired.
+             *
+             */
+            disconnect: function () {
+                var request = this.$['ajaxDisconnect'];
+                request.url = this.disconnectUrl;
+                request.params = {
+                    conn_id: this.connectionId
+                };
+                for (var i = 0; i < this.mutators.disconnect.length; i++) {
+                    this.mutators.disconnect[i](request);
+                }
+                // mark connection as expired
+                request.generateRequest();
+                // disconnect existing connection
+                this.closeConnection();
+            },
+
+            /**
+             * Sends a message to the server.
+             *
+             */
+            message: function (message) {
+                var request = this.$['ajaxMessage'];
+                request.url = this.messageUrl;
+                request.body = message;
+                for (var i = 0; i < this.mutators.message.length; i++) {
+                    this.mutators.message[i](request)
+                }
+                request.generateRequest();
+            },
+            /**
+             * Opens "long lived" (websocket/longpoll) connection to the channelstream server.
+             *
+             */
+            startListening: function (event) {
+                this.fire('start-listening', {});
+                if (this.useWebsocket) {
+                    this.useWebsocket = window.WebSocket ? true : false;
+                }
+                if (this.useWebsocket) {
+                    this.openWebsocket();
+                }
+                else {
+                    this.openLongPoll();
+                }
+            },
+            /**
+             * Opens websocket connection.
+             *
+             */
+            openWebsocket: function () {
+                var url = this.websocketUrl + '?conn_id=' + this.connectionId;
+                this.websocket = new WebSocket(url);
+                this.websocket.onopen = this._handleListenOpen.bind(this);
+                this.websocket.onclose = this._handleListenCloseEvent.bind(this);
+                this.websocket.onerror = this._handleListenErrorEvent.bind(this);
+                this.websocket.onmessage = this._handleListenMessageEvent.bind(this);
+            },
+            /**
+             * Opens long-poll connection.
+             *
+             */
+            openLongPoll: function () {
+                var request = this.$['ajaxListen'];
+                request.url = this.longPollUrl + '?conn_id=' + this.connectionId;
+                request.generateRequest()
+            },
+            /**
+             * Retries `connect()` call while incrementing interval between tries up to 1 minute.
+             *
+             */
+            retryConnection: function () {
+                if (!this.shouldReconnect) {
+                    return;
+                }
+                if (this._currentBounceIv < 60000) {
+                    this._currentBounceIv = this._currentBounceIv + this.increaseBounceIv;
+                }
+                else {
+                    this._currentBounceIv = 60000;
+                }
+                setTimeout(this.connect.bind(this), this._currentBounceIv);
+            },
+            /**
+             * Closes listening connection.
+             *
+             */
+            closeConnection: function () {
+                var request = this.$['ajaxListen'];
+                if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
+                    this.websocket.onclose = null;
+                    this.websocket.onerror = null;
+                    this.websocket.close();
+                }
+                if (request.loading) {
+                    request.lastRequest.abort();
+                }
+                this.connected = false;
+            },
+
+            _handleChannelsChange: function (event) {
+                // do not fire the event if set() didn't mutate anything
+                // is this a reliable way to do it?
+                if (!this.isReady || event === undefined) {
+                    return
+                }
+                this.fire('channelstream-channels-changed', event)
+            },
+
+            _handleListenOpen: function (event) {
+                this.connected = true;
+                this.fire('channelstream-listen-opened', event);
+                this.createHeartBeats();
+            },
+
+            createHeartBeats: function () {
+                if (typeof self._heartbeat === 'undefined' && this.websocket !== null
+                    && this.heartbeats) {
+                    self._heartbeat = setInterval(this._sendHeartBeat.bind(this), 10000);
+                }
+            },
+
+            _sendHeartBeat: function () {
+                if (this.websocket.readyState === WebSocket.OPEN && this.heartbeats) {
+                    this.websocket.send(JSON.stringify({type: 'heartbeat'}));
+                }
+            },
+
+            _handleListenError: function (event) {
+                this.connected = false;
+                this.retryConnection();
+            },
+            _handleConnectError: function (event) {
+                this.connected = false;
+                this.fire('channelstream-connect-error', event.detail);
+            },
+
+            _handleListenMessageEvent: function (event) {
+                var data = null;
+                // comes from iron-ajax
+                if (event.detail) {
+                    data = JSON.parse(event.detail.response)
+                    // comes from websocket
+                    setTimeout(this.openLongPoll.bind(this), 0);
+                } else {
+                    data = JSON.parse(event.data)
+                }
+                this.fire('channelstream-listen-message', data);
+
+            },
+
+            _handleListenCloseEvent: function (event) {
+                this.connected = false;
+                this.fire('channelstream-listen-closed', event.detail);
+                this.retryConnection();
+            },
+
+            _handleListenErrorEvent: function (event) {
+                this.connected = false;
+                this.fire('channelstream-listen-error', {})
+            },
+
+            _handleConnect: function (event) {
+                this.currentBounceIv = 0;
+                this.connectionId = event.detail.response.conn_id;
+                this.fire('channelstream-connected', event.detail.response);
+            },
+
+            _handleDisconnect: function (event) {
+                this.connected = false;
+                this.fire('channelstream-disconnected', {});
+            },
+
+            _handleMessage: function (event) {
+                this.fire('channelstream-message-sent', event.detail.response);
+            },
+            _handleMessageError: function (event) {
+                this.fire('channelstream-message-error', event.detail);
+            },
+
+            _handleSubscribe: function (event) {
+                this.fire('channelstream-subscribed', event.detail.response);
+            },
+
+            _handleSubscribeError: function (event) {
+                this.fire('channelstream-subscribe-error', event.detail);
+            },
+
+            _handleUnsubscribe: function (event) {
+                this.fire('channelstream-unsubscribed', event.detail.response);
+            },
+
+            _handleUnsubscribeError: function (event) {
+                this.fire('channelstream-unsubscribe-error', event.detail);
+            }
+        });
+
+    </script>
 </dom-module>

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

@@ -13,5 +13,173 b''
         </channelstream-connection>
         <rhodecode-favicon></rhodecode-favicon>
     </template>
-    <script src="rhodecode-app.js"></script>
+    <script>
+        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-favicon/rhodecode-favicon.html

@@ -3,5 +3,27 b''
 <dom-module id="rhodecode-favicon">
     <template>
     </template>
-    <script src="rhodecode-favicon.js"></script>
+    <script>
+        Polymer({
+            is: 'rhodecode-favicon',
+            properties: {
+                favicon: Object,
+                counter: {
+                    type: Number,
+                    observer: '_handleCounter'
+                }
+            },
+
+            ready: function () {
+                this.favicon = new Favico({
+                    type: 'rectangle',
+                    animation: 'none'
+                });
+            },
+            _handleCounter: function (newVal, oldVal) {
+                this.favicon.badge(this.counter);
+            }
+        });
+
+    </script>
 </dom-module>

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

@@ -3,5 +3,9 b''
     <template>
         <script src="../../../scripts.js"></script>
     </template>
-    <script src="rhodecode-legacy-js.js"></script>
+    <script>
+        Polymer({
+            is: 'rhodecode-legacy-js',
+        });
+    </script>
 </dom-module>

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

@@ -19,5 +19,105 b''
         </template>
     </template>
 
-    <script src="rhodecode-toast.js"></script>
+    <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

@@ -17,5 +17,21 b''
         </div>
     </template>
 
-    <script src="rhodecode-toggle.js"></script>
-</dom-module>
  No newline at end of file
+    <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/rhodecode-unsafe-html/rhodecode-unsafe-html.html

@@ -5,5 +5,19 b''
         <style include="shared-styles"></style>
         <slot></slot>
     </template>
-    <script src="rhodecode-unsafe-html.js"></script>
+    <script>
+        Polymer({
+            is: 'rhodecode-unsafe-html',
+            properties: {
+                text: {
+                    type: String,
+                    observer: '_handleText'
+                }
+            },
+            _handleText: function(newVal, oldVal){
+                this.innerHTML = this.text;
+            }
+        })
+
+    </script>
 </dom-module>