Reapply "Merge pull request !2870 from rhodecode-enterprise-ce Polymer-lit-migration-1"

This reverts commit 2aebe6862d.

.babelrc

@@ -4,10 +4,9 @@
       "env",
       {
         "targets": {
-          "browsers": [
+          "esmodules": true
-            "last 2 versions"
+        },
-          ]
+        "exclude": ["transform-es2015-classes"]
-        }
       }
     ]
   ],

Gruntfile.js

@@ -13,10 +13,10 @@ module.exports = function(grunt) {
 
   grunt.loadNpmTasks('grunt-contrib-less');
   grunt.loadNpmTasks('grunt-contrib-concat');
-  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-terser');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-jshint');
   grunt.loadNpmTasks('grunt-contrib-copy');
   grunt.loadNpmTasks('grunt-webpack');
-  grunt.registerTask('default', ['less:production', 'less:components', 'copy', 'webpack', 'concat:dist', 'uglify:dist']);
+  grunt.registerTask('default', ['less:production', 'less:components', 'copy', 'webpack', 'concat:dist', 'terser:dist']);
 };

configs/development.ini

@@ -667,13 +667,14 @@ search.location = %(here)s/data/index
 channelstream.enabled = true
 
 ; server address for channelstream server on the backend
-channelstream.server = channelstream:9800
+channelstream.server = channelstream:8000
 
 ; location of the channelstream server from outside world
 ; use ws:// for http or wss:// for https. This address needs to be handled
 ; by external HTTP server such as Nginx or Apache
 ; see Nginx/Apache configuration examples in our docs
-channelstream.ws_url = ws://rhodecode.yourserver.com/_channelstream
+; For development, comment this out to use auto-generated proxy URL
+;channelstream.ws_url = ws://rhodecode.yourserver.com/_channelstream
 channelstream.secret = ENV_GENERATED
 channelstream.history.location = /var/opt/rhodecode_data/channelstream_history
 

configs/production.ini

@@ -629,7 +629,7 @@ search.location = %(here)s/data/index
 channelstream.enabled = true
 
 ; server address for channelstream server on the backend
-channelstream.server = channelstream:9800
+channelstream.server = channelstream:8000
 
 ; location of the channelstream server from outside world
 ; use ws:// for http or wss:// for https. This address needs to be handled

docs/admin/system-overview.rst

@@ -52,10 +52,12 @@ Supported Databases
 Supported Browsers
 ------------------
 
-* Chrome
+* Chrome 67+
-* Safari
+* Firefox 63+
-* Firefox
+* Safari 11.1+
-* Internet Explorer 10 & 11
+* Edge 79+
+
+Note: Internet Explorer is no longer supported
 
 System Requirements
 -------------------

grunt_config.json

@@ -102,10 +102,23 @@
       "nonull": true
     }
   },
-  "uglify": {
+  "terser": {
     "dist": {
-      "src": "<%= dirs.js.dest %>/scripts.js",
+      "options": {
-      "dest": "<%= dirs.js.dest %>/scripts.min.js"
+        "compress": {
+          "ecma": 6
+        },
+        "mangle": {
+          "keep_classnames": true,
+          "keep_fnames": false
+        },
+        "output": {
+          "ecma": 6
+        }
+      },
+      "files": {
+        "<%= dirs.js.dest %>/scripts.min.js": "<%= dirs.js.dest %>/scripts.js"
+      }
     }
   },
   "less": {
@@ -156,7 +169,6 @@
       "tasks": [
         "less:development",
         "less:components",
-        "concat:polymercss",
         "webpack",
         "concat:dist"
       ]
@@ -169,7 +181,6 @@
       ],
       "tasks": [
         "less:components",
-        "concat:polymercss",
         "webpack",
         "concat:dist"
       ]

package.json

@@ -21,6 +21,8 @@
     "@webcomponents/webcomponentsjs": "^2.0.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.2",
+    "babel-plugin-syntax-class-properties": "^6.13.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.0",
     "clipboard": "^2.0.1",
@@ -35,7 +37,7 @@
     "grunt-contrib-copy": "^1.0.0",
     "grunt-contrib-jshint": "^0.12.0",
     "grunt-contrib-less": "^1.1.0",
-    "grunt-contrib-uglify": "^4.0.1",
+    "grunt-terser": "^1.0.0",
     "grunt-contrib-watch": "^0.6.1",
     "grunt-webpack": "^3.1.3",
     "html-loader": "^0.4.4",
@@ -57,5 +59,9 @@
     "webpack": "4.23.1",
     "webpack-cli": "3.1.2",
     "webpack-uglify-js-plugin": "^1.1.9"
+  },
+  "dependencies": {
+    "lit": "^2.8.0",
+    "regenerator-runtime": "^0.13.9"
   }
 }

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

@@ -1,577 +1,446 @@
-import {Polymer, html} from '@polymer/polymer/polymer-legacy';
+import {LitElement} from 'lit';
-import '@polymer/iron-ajax/iron-ajax.js';
 
-const elemTemplate =  html`
+/**
-    <iron-ajax
+ * Simplified Lit version of channelstream-connection
-            id="ajaxConnect"
+ * Replaces iron-ajax with native fetch()
-            url=""
+ */
-            handle-as="json"
+export class ChannelstreamConnection extends LitElement {
-            method="post"
+    static properties = {
-            content-type="application/json"
+        channels: {type: Array},
-            loading="{{loadingConnect}}"
+        username: {type: String},
-            last-response="{{connectLastResponse}}"
+        connectionId: {type: String},
-            on-response="_handleConnect"
+        websocket: {type: Object},
-            on-error="_handleConnectError"
+        websocketUrl: {type: String},
-            debounce-duration="100"></iron-ajax>
+        connectUrl: {type: String},
+        disconnectUrl: {type: String},
+        subscribeUrl: {type: String},
+        unsubscribeUrl: {type: String},
+        messageUrl: {type: String},
+        longPollUrl: {type: String},
+        shouldReconnect: {type: Boolean},
+        heartbeats: {type: Boolean},
+        increaseBounceIv: {type: Number},
+        _currentBounceIv: {type: Number},
+        useWebsocket: {type: Boolean},
+        connected: {type: Boolean},
+        channelsState: {type: Object},
+        userState: {type: Object}
+    };
 
-    <iron-ajax
+    constructor() {
-            id="ajaxDisconnect"
+        super();
-            url=""
+        this.channels = [];
-            handle-as="json"
+        this.username = 'Anonymous';
-            method="post"
+        this.connectionId = '';
-            content-type="application/json"
+        this.websocket = null;
-            loading="{{loadingDisconnect}}"
+        this.websocketUrl = '';
-            last-response="{{_disconnectLastResponse}}"
+        this.connectUrl = '';
-            on-response="_handleDisconnect"
+        this.disconnectUrl = '';
-            debounce-duration="100"></iron-ajax>
+        this.subscribeUrl = '';
+        this.unsubscribeUrl = '';
+        this.messageUrl = '';
+        this.longPollUrl = '';
+        this.shouldReconnect = true;
+        this.heartbeats = true;
+        this.increaseBounceIv = 2000;
+        this._currentBounceIv = 0;
+        this.useWebsocket = true;
+        this.connected = false;
+        this.channelsState = {};
+        this.userState = {};
 
-    <iron-ajax
+        // Mutators - simplified to just arrays
-            id="ajaxSubscribe"
+        this.mutators = {
-            url=""
+            connect: [],
-            handle-as="json"
+            message: [],
-            method="post"
+            subscribe: [],
-            content-type="application/json"
+            unsubscribe: [],
-            loading="{{loadingSubscribe}}"
+            disconnect: []
-            last-response="{{subscribeLastResponse}}"
+        };
-            on-response="_handleSubscribe"
-            debounce-duration="100"></iron-ajax>
 
-    <iron-ajax
+        this._heartbeatInterval = null;
-            id="ajaxUnsubscribe"
+    }
-            url=""
-            handle-as="json"
-            method="post"
-            content-type="application/json"
-            loading="{{loadingUnsubscribe}}"
-            last-response="{{unsubscribeLastResponse}}"
-            on-response="_handleUnsubscribe"
-            debounce-duration="100"></iron-ajax>
 
-    <iron-ajax
+    // No render needed - this component has no template
-            id="ajaxMessage"
+    render() {
-            url=""
+        return null;
-            handle-as="json"
+    }
-            method="post"
-            content-type="application/json"
-            loading="{{loadingMessage}}"
-            last-response="{{messageLastResponse}}"
-            on-response="_handleMessage"
-            on-error="_handleMessageError"
-            debounce-duration="100"></iron-ajax>
 
-    <iron-ajax
+    updated(changedProperties) {
-            id="ajaxListen"
+        if (changedProperties.has('channels')) {
-            url=""
+            this.dispatchEvent(new CustomEvent('channelstream-channels-changed', {
-            handle-as="text"
+                detail: {value: this.channels}
-            loading="{{loadingListen}}"
+            }));
-            last-response="{{listenLastResponse}}"
-            on-request="_handleListenOpen"
-            on-error="_handleListenError"
-            on-response="_handleListenMessageEvent"
-            debounce-duration="100"></iron-ajax>
-`
-
-Polymer({
-    is: 'channelstream-connection',
-
-    _template: elemTemplate,
-
-    /**
-     * 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: [
+    connectedCallback() {
-        '_handleChannelsChange(channels.splices)'
+        super.connectedCallback();
-    ],
 
-    listeners: {
+        // Set up self-event listeners (replaces Polymer's 'listeners' property)
-        'channelstream-connected': 'startListening',
+        this.addEventListener('channelstream-connected', this.startListening.bind(this));
-        'channelstream-connect-error': 'retryConnection',
+        this.addEventListener('channelstream-connect-error', this.retryConnection.bind(this));
-    },
+    }
 
     /**
-     * Mutators hold functions that you can set locally to change the data
+     * Helper method for fetch requests
-     * 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: {
+    async _fetchJSON(url, options = {}) {
-        connect: function () {
+        const {body, headers, ...fetchOptions} = options;
-            return []
+
-        }(),
+        const response = await fetch(url, {
-        message: function () {
+            method: 'POST',
-            return []
+            headers: {
-        }(),
+                'Content-Type': 'application/json',
-        subscribe: function () {
+                ...headers
-            return []
+            },
-        }(),
+            body: body ? JSON.stringify(body) : undefined,
-        unsubscribe: function () {
+            ...fetchOptions
-            return []
+        });
-        }(),
+
-        disconnect: function () {
+        if (!response.ok) {
-            return []
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-        }()
+        }
-    },
+
-    ready: function () {
+        return response.json();
-        this.isReady = true;
+    }
-    },
 
     /**
-     * Connects user and fetches connection id from the server.
+     * Connects user and fetches connection id from the server
-     *
      */
-    connect: function () {
+    async connect() {
-        var request = this.$['ajaxConnect'];
+        const body = {
-        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);
+        // Apply mutators
+        for (let mutator of this.mutators.connect) {
+            mutator({body});
         }
-        request.generateRequest()
+
-    },
+        try {
+            const response = await this._fetchJSON(this.connectUrl, {body});
+            this._handleConnect({detail: {response}});
+        } catch (error) {
+            this._handleConnectError({detail: {error}});
+        }
+    }
+
     /**
-     * Overwrite with custom function that will
+     * Subscribes user to channels
      */
-    addMutator: function (type, func) {
+    async subscribe(channels) {
-        this.mutators[type].push(func);
+        const body = {
-    },
-    /**
-     * 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;
+        // Apply mutators
-        request.body = {
+        for (let mutator of this.mutators.subscribe) {
-            channels: unsubscribe,
+            mutator({body});
+        }
+
+        if (body.channels.length) {
+            try {
+                const response = await this._fetchJSON(this.subscribeUrl, {body});
+                this._handleSubscribe({detail: {response}});
+            } catch (error) {
+                this.dispatchEvent(new CustomEvent('channelstream-subscribe-error', {detail: error}));
+            }
+        }
+    }
+
+    /**
+     * Unsubscribes user from channels
+     */
+    async unsubscribe(channels) {
+        const body = {
+            channels: channels,
             conn_id: this.connectionId
         };
-        for (var i = 0; i < this.mutators.unsubscribe.length; i++) {
+
-            this.mutators.unsubscribe[i](request);
+        // Apply mutators
+        for (let mutator of this.mutators.unsubscribe) {
+            mutator({body});
         }
-        request.generateRequest()
+
-    },
+        try {
+            const response = await this._fetchJSON(this.unsubscribeUrl, {body});
+            this._handleUnsubscribe({detail: {response}});
+        } catch (error) {
+            this.dispatchEvent(new CustomEvent('channelstream-unsubscribe-error', {detail: error}));
+        }
+    }
 
     /**
-     * calculates list of channels we should add user to based on difference
+     * Calculates list of channels to add user to
-     * between channels property and passed channel list
      */
-    calculateSubscribe: function (channels) {
+    calculateSubscribe(channels) {
-        var currentlySubscribed = this.channels;
+        const currentlySubscribed = this.channels;
-        var toSubscribe = [];
+        const toSubscribe = [];
-        for (var i = 0; i < channels.length; i++) {
+        for (let i = 0; i < channels.length; i++) {
             if (currentlySubscribed.indexOf(channels[i]) === -1) {
                 toSubscribe.push(channels[i]);
             }
         }
-        return toSubscribe
+        return toSubscribe;
-    },
+    }
+
     /**
-     * calculates list of channels we should remove user from based difference
+     * Calculates list of channels to remove user from
-     * between channels property and passed channel list
      */
-    calculateUnsubscribe: function (channels) {
+    calculateUnsubscribe(channels) {
-        var currentlySubscribed = this.channels;
+        const currentlySubscribed = this.channels;
-        var toUnsubscribe = [];
+        const toUnsubscribe = [];
-        for (var i = 0; i < channels.length; i++) {
+        for (let i = 0; i < channels.length; i++) {
             if (currentlySubscribed.indexOf(channels[i]) !== -1) {
                 toUnsubscribe.push(channels[i]);
             }
         }
-        return toUnsubscribe
+        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.
+     * Marks the connection as expired
-     *
      */
-    message: function (message) {
+    async disconnect() {
-        var request = this.$['ajaxMessage'];
+        const params = new URLSearchParams({conn_id: this.connectionId});
-        request.url = this.messageUrl;
+
-        request.body = message;
+        // Apply mutators
-        for (var i = 0; i < this.mutators.message.length; i++) {
+        for (let mutator of this.mutators.disconnect) {
-            this.mutators.message[i](request)
+            mutator({params});
         }
-        request.generateRequest();
+
-    },
+        try {
+            const response = await fetch(`${this.disconnectUrl}?${params}`);
+            const data = await response.json();
+            this._handleDisconnect({detail: {response: data}});
+        } catch (error) {
+            console.error('Disconnect error:', error);
+        }
+
+        // Disconnect existing connection
+        this.closeConnection();
+    }
+
     /**
-     * Opens "long lived" (websocket/longpoll) connection to the channelstream server.
+     * Sends a message to the server
-     *
      */
-    startListening: function (event) {
+    async message(messageData) {
-        this.fire('start-listening', {});
+        const body = messageData;
+
+        // Apply mutators
+        for (let mutator of this.mutators.message) {
+            mutator({body});
+        }
+
+        try {
+            const response = await this._fetchJSON(this.messageUrl, {body});
+            this._handleMessage({detail: {response}});
+        } catch (error) {
+            this._handleMessageError({detail: {error}});
+        }
+    }
+
+    /**
+     * Opens long lived connection (websocket/longpoll)
+     */
+    startListening(event) {
+        this.dispatchEvent(new CustomEvent('start-listening', {detail: {}}));
+
         if (this.useWebsocket) {
             this.useWebsocket = window.WebSocket ? true : false;
         }
+
         if (this.useWebsocket) {
             this.openWebsocket();
-        }
+        } else {
-        else {
             this.openLongPoll();
         }
-    },
+    }
+
     /**
-     * Opens websocket connection.
+     * Opens websocket connection
-     *
      */
-    openWebsocket: function () {
+    openWebsocket() {
-        var url = this.websocketUrl + '?conn_id=' + this.connectionId;
+        const 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.
+     * Opens long-poll connection
-     *
      */
-    openLongPoll: function () {
+    async openLongPoll() {
-        var request = this.$['ajaxListen'];
+        const url = this.longPollUrl + '?conn_id=' + this.connectionId;
-        request.url = this.longPollUrl + '?conn_id=' + this.connectionId;
+
-        request.generateRequest()
+        try {
-    },
+            this._handleListenOpen();
+            const response = await fetch(url);
+            const text = await response.text();
+            this._handleListenMessageEvent({data: text});
+        } catch (error) {
+            this._handleListenError({detail: {error}});
+        }
+    }
+
     /**
-     * Retries `connect()` call while incrementing interval between tries up to 1 minute.
+     * Retries connect() call with increasing interval
-     *
      */
-    retryConnection: function () {
+    retryConnection() {
         if (!this.shouldReconnect) {
             return;
         }
+
         if (this._currentBounceIv < 60000) {
             this._currentBounceIv = this._currentBounceIv + this.increaseBounceIv;
-        }
+        } else {
-        else {
             this._currentBounceIv = 60000;
         }
+
         setTimeout(this.connect.bind(this), this._currentBounceIv);
-    },
+    }
+
     /**
-     * Closes listening connection.
+     * Closes listening connection
-     *
      */
-    closeConnection: function () {
+    closeConnection() {
-        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();
+        if (this._heartbeatInterval) {
+            clearInterval(this._heartbeatInterval);
+            this._heartbeatInterval = null;
         }
+
         this.connected = false;
-    },
+    }
 
-    _handleChannelsChange: function (event) {
+    /**
-        // do not fire the event if set() didn't mutate anything
+     * Add mutator function
-        // is this a reliable way to do it?
+     */
-        if (!this.isReady || event === undefined) {
+    addMutator(type, func) {
-            return
+        this.mutators[type].push(func);
+    }
+
+    /**
+     * Create heartbeat interval
+     */
+    createHeartBeats() {
+        if (!this._heartbeatInterval && this.websocket !== null && this.heartbeats) {
+            this._heartbeatInterval = setInterval(this._sendHeartBeat.bind(this), 10000);
         }
-        this.fire('channelstream-channels-changed', event)
+    }
-    },
 
-    _handleListenOpen: function (event) {
+    /**
-        this.connected = true;
+     * Send heartbeat
-        this.fire('channelstream-listen-opened', event);
+     */
-        this.createHeartBeats();
+    _sendHeartBeat() {
-    },
+        if (this.websocket && this.websocket.readyState === WebSocket.OPEN && this.heartbeats) {
-
-    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);
     }
-});
+
+    // Event handlers
+    _handleListenOpen(event) {
+        this.connected = true;
+        this.dispatchEvent(new CustomEvent('channelstream-listen-opened', {detail: event}));
+        this.createHeartBeats();
+    }
+
+    _handleListenError(event) {
+        this.connected = false;
+        this.retryConnection();
+    }
+
+    _handleConnectError(event) {
+        this.connected = false;
+        this.dispatchEvent(new CustomEvent('channelstream-connect-error', {detail: event.detail}));
+    }
+
+    _handleListenMessageEvent(event) {
+        let data = null;
+
+        // From long-poll (fetch)
+        if (event.detail && event.detail.response) {
+            data = JSON.parse(event.detail.response);
+            setTimeout(this.openLongPoll.bind(this), 0);
+        }
+        // From websocket
+        else if (event.data) {
+            data = JSON.parse(event.data);
+        }
+
+        if (data) {
+            this.dispatchEvent(new CustomEvent('channelstream-listen-message', {detail: data}));
+        }
+    }
+
+    _handleListenCloseEvent(event) {
+        this.connected = false;
+        this.dispatchEvent(new CustomEvent('channelstream-listen-closed', {detail: event}));
+        this.retryConnection();
+    }
+
+    _handleListenErrorEvent(event) {
+        this.connected = false;
+        this.dispatchEvent(new CustomEvent('channelstream-listen-error', {detail: {}}));
+    }
+
+    _handleConnect(event) {
+        this._currentBounceIv = 0;
+        this.connectionId = event.detail.response.conn_id;
+        this.dispatchEvent(new CustomEvent('channelstream-connected', {detail: event.detail.response}));
+    }
+
+    _handleDisconnect(event) {
+        this.connected = false;
+        this.dispatchEvent(new CustomEvent('channelstream-disconnected', {detail: {}}));
+    }
+
+    _handleMessage(event) {
+        this.dispatchEvent(new CustomEvent('channelstream-message-sent', {detail: event.detail.response}));
+    }
+
+    _handleMessageError(event) {
+        this.dispatchEvent(new CustomEvent('channelstream-message-error', {detail: event.detail}));
+    }
+
+    _handleSubscribe(event) {
+        this.dispatchEvent(new CustomEvent('channelstream-subscribed', {detail: event.detail.response}));
+    }
+
+    _handleUnsubscribe(event) {
+        this.dispatchEvent(new CustomEvent('channelstream-unsubscribed', {detail: event.detail.response}));
+    }
+
+    // Polymer compatibility methods - keep these for rhodecode-app
+    push(path, value) {
+        if (path === 'channels') {
+            this.channels = [...this.channels, value];
+        }
+    }
+
+    set(path, value) {
+        if (typeof path === 'string') {
+            this[path] = value;
+            this.requestUpdate(path);
+        } else if (Array.isArray(path)) {
+            // Handle nested paths like ['channelsState', key] or ['userState', key]
+            if (path.length === 2 && path[0] === 'channelsState') {
+                this.channelsState = {...this.channelsState, [path[1]]: value};
+            } else if (path.length === 2 && path[0] === 'userState') {
+                this.userState = {...this.userState, [path[1]]: value};
+            }
+        }
+    }
+}
+
+customElements.define('channelstream-connection', ChannelstreamConnection);

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

@@ -1,3 +1,4 @@
+import 'regenerator-runtime/runtime.js';
 import '@polymer/iron-ajax/iron-ajax.js';
 import './shared-styles.js';
 import './channelstream-connection/channelstream-connection.js';

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

@@ -1,211 +1,219 @@
-import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
+import { html, LitElement, css } from "lit";
-import '../channelstream-connection/channelstream-connection.js';
-import '../rhodecode-toast/rhodecode-toast.js';
-import '../rhodecode-favicon/rhodecode-favicon.js';
 
-var ccLog = Logger.get('RhodeCodeApp');
+import "../channelstream-connection/channelstream-connection.js";
+import "../rhodecode-toast/rhodecode-toast.js";
+import "../rhodecode-favicon/rhodecode-favicon.js";
+
+var ccLog = Logger.get("RhodeCodeApp");
 ccLog.setLevel(Logger.OFF);
 
-export class RhodecodeApp extends PolymerElement {
+export class RhodecodeApp extends LitElement {
+  static get is() {
+    return "rhodecode-app";
+  }
 
-    static get is() {
+  render() {
-        return 'rhodecode-app';
+    return html`
+      <channelstream-connection
+        id="channelstream-connection"
+        @channelstream-listen-message="${this.receivedMessage}"
+        @channelstream-connected="${this.handleConnected}"
+        @channelstream-subscribed="${this.handleSubscribed}"
+      >
+      </channelstream-connection>
+      <rhodecode-favicon></rhodecode-favicon>
+    `;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    ccLog.debug("rhodeCodeApp created");
+    $.Topic("/notifications").subscribe(this.handleNotifications.bind(this));
+    $.Topic("/comment").subscribe(this.handleComment.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),
+    );
+  }
 
-    static get template(){
+  initPlugins() {
-        return html`
+    for (var i = 0; i < window.APPLICATION_PLUGINS.length; i++) {
-        <channelstream-connection
+      var pluginDef = window.APPLICATION_PLUGINS[i];
-                id="channelstream-connection"
+      if (pluginDef.component) {
-                on-channelstream-listen-message="receivedMessage"
+        var pluginElem = document.createElement(pluginDef.component);
-                on-channelstream-connected="handleConnected"
+        this.shadowRoot.appendChild(pluginElem);
-                on-channelstream-subscribed="handleSubscribed">
+        if (typeof pluginElem.init !== "undefined") {
-        </channelstream-connection>
+          pluginElem.init();
-        <rhodecode-favicon></rhodecode-favicon>
-        `
-    }
-
-    connectedCallback() {
-        super.connectedCallback();
-        ccLog.debug('rhodeCodeApp created');
-        $.Topic('/notifications').subscribe(this.handleNotifications.bind(this));
-        $.Topic('/comment').subscribe(this.handleComment.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));
+  /** proxy to channelstream connection */
+  getChannelStreamConnection() {
+    return this.renderRoot.querySelector("#channelstream-connection");
+  }
+
+  handleNotifications(data) {
+    var elem = document.getElementById("notifications");
+    if (elem) {
+      elem.handleNotification(data);
+    }
+  }
+
+  handleComment(data) {
+    if (data.message.comment_data.length !== 0) {
+      if (window.refreshAllComments !== undefined) {
+        refreshAllComments();
+      }
+      var json_data = data.message.comment_data;
+
+      if (window.commentsController !== undefined) {
+        window.commentsController.attachComment(json_data);
+      }
+    }
+  }
+
+  faviconUpdate(data) {
+    this.shadowRoot.querySelector("rhodecode-favicon").counter = data.count;
+  }
+
+  /** opens connection to ws server */
+  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) {
+      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";
+      channelstreamConnection.username =
+        window.templateContext.rhodecode_user.username;
+      // 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() {
+    // 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);
     }
 
-    initPlugins() {
+    if (templateContext.commit_data.commit_id) {
-        for (var i = 0; i < window.APPLICATION_PLUGINS.length; i++) {
+      var channelName =
-            var pluginDef = window.APPLICATION_PLUGINS[i];
+        "/repo$" +
-            if (pluginDef.component) {
+        templateContext.repo_name +
-                var pluginElem = document.createElement(pluginDef.component);
+        "$/commit/" +
-                this.shadowRoot.appendChild(pluginElem);
+        String(templateContext.commit_data.commit_id);
-                if (typeof pluginElem.init !== 'undefined') {
+      channels.push(channelName);
-                    pluginElem.init();
+    }
-                }
+
-            }
+    return channels;
+  }
+
+  /** subscribes users from channels in channelstream */
+  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]);
         }
+      }
     }
+  }
 
-    /** proxy to channelstream connection */
+  /** publish received messages into correct topic */
-    getChannelStreamConnection() {
+  receivedMessage(event) {
-        return this.$['channelstream-connection'];
+    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);
+      }
     }
+  }
 
-    handleNotifications(data) {
+  handleConnected(event) {
-        var elem = document.getElementById('notifications');
+    var channelstreamConnection = this.getChannelStreamConnection();
-        if (elem) {
+    channelstreamConnection.set("channelsState", event.detail.channels_info);
-            elem.handleNotification(data);
+    channelstreamConnection.set("userState", event.detail.state);
-        }
+    channelstreamConnection.set("channels", event.detail.channels);
+    this.propagageChannelsState();
+  }
+
+  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();
+  }
 
-    handleComment(data) {
+  /** propagates channel states on topics */
-
+  propagageChannelsState(event) {
-        if (data.message.comment_data.length !== 0) {
+    var channelstreamConnection = this.getChannelStreamConnection();
-          if (window.refreshAllComments !== undefined) {
+    var channel_data = channelstreamConnection.channelsState;
-              refreshAllComments()
+    var channels = channelstreamConnection.channels;
-          }
+    for (var i = 0; i < channels.length; i++) {
-          var json_data = data.message.comment_data;
+      var key = channels[i];
-
+      $.Topic("/connection_controller/channel_update").publish({
-          if (window.commentsController !== undefined) {
+        channel: key,
-
+        state: channel_data[key],
-            window.commentsController.attachComment(json_data)
+      });
-          }
-        }
     }
-
+  }
-    faviconUpdate(data) {
-        this.shadowRoot.querySelector('rhodecode-favicon').counter = data.count;
-    }
-
-    /** opens connection to ws server */
-    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) {
-            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() {
-        // 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(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(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(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(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(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);

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

@@ -1,33 +1,30 @@
-import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
+import {LitElement} from 'lit';
 
-export class RhodecodeFavicon extends PolymerElement {
+export class RhodecodeFavicon extends LitElement {
+  static properties = {
+    favicon: {type: Object},
+    counter: {type: Number}
+  };
 
-    static get is() {
+  constructor() {
-        return 'rhodecode-favicon';
+    super();
+    this.favicon = null;
+    this.counter = 0;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.favicon = new Favico({
+      type: 'rectangle',
+      animation: 'none'
+    });
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('counter') && this.favicon) {
+      this.favicon.badge(this.counter);
     }
-
+  }
-    static get properties() {
-        return {
-            favicon: Object,
-            counter: {
-                type: Number,
-                observer: '_handleCounter'
-            }
-        }
-    }
-
-    connectedCallback() {
-        super.connectedCallback();
-        this.favicon = new Favico({
-            type: 'rectangle',
-            animation: 'none'
-        });
-    }
-
-    _handleCounter(newVal, oldVal) {
-        this.favicon.badge(this.counter);
-    }
-
 }
 
-customElements.define(RhodecodeFavicon.is, RhodecodeFavicon);
+customElements.define('rhodecode-favicon', RhodecodeFavicon);

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

@@ -1,231 +1,241 @@
-import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
+import {LitElement, html, css} from 'lit';
-import '@polymer/paper-toggle-button/paper-toggle-button.js';
+import {classMap} from 'lit/directives/class-map.js';
-import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
-import {IronA11yKeysBehavior} from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
 import '../rhodecode-unsafe-html/rhodecode-unsafe-html.js';
 
-export class RhodecodeToast extends mixinBehaviors([IronA11yKeysBehavior], PolymerElement) {
+export class RhodecodeToast extends LitElement {
-
+  static styles = css`
-    static get is() {
+    .absolute-center {
-        return 'rhodecode-toast';
+      margin: auto;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
     }
 
-    static get template(){
+    .top-left-rounded-corner {
-        return html`
+      -webkit-border-top-left-radius: 2px;
-        <style include="shared-styles">
+      -khtml-border-radius-topleft: 2px;
-            /* inset border for buttons - does not work in ie */
+      border-top-left-radius: 2px;
-            /* 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 {
+    .top-right-rounded-corner {
-                -webkit-border-top-left-radius: 2px;
+      -webkit-border-top-right-radius: 2px;
-                -khtml-border-radius-topleft: 2px;
+      -khtml-border-radius-topright: 2px;
-                border-top-left-radius: 2px;
+      border-top-right-radius: 2px;
-            }
+    }
 
-            .top-right-rounded-corner {
+    .bottom-left-rounded-corner {
-                -webkit-border-top-right-radius: 2px;
+      -webkit-border-bottom-left-radius: 2px;
-                -khtml-border-radius-topright: 2px;
+      -khtml-border-radius-bottomleft: 2px;
-                border-top-right-radius: 2px;
+      border-bottom-left-radius: 2px;
-            }
+    }
 
-            .bottom-left-rounded-corner {
+    .bottom-right-rounded-corner {
-                -webkit-border-bottom-left-radius: 2px;
+      -webkit-border-bottom-right-radius: 2px;
-                -khtml-border-radius-bottomleft: 2px;
+      -khtml-border-radius-bottomright: 2px;
-                border-bottom-left-radius: 2px;
+      border-bottom-right-radius: 2px;
-            }
+    }
 
-            .bottom-right-rounded-corner {
+    .top-left-rounded-corner-mid {
-                -webkit-border-bottom-right-radius: 2px;
+      -webkit-border-top-left-radius: 2px;
-                -khtml-border-radius-bottomright: 2px;
+      -khtml-border-radius-topleft: 2px;
-                border-bottom-right-radius: 2px;
+      border-top-left-radius: 2px;
-            }
+    }
 
-            .top-left-rounded-corner-mid {
+    .top-right-rounded-corner-mid {
-                -webkit-border-top-left-radius: 2px;
+      -webkit-border-top-right-radius: 2px;
-                -khtml-border-radius-topleft: 2px;
+      -khtml-border-radius-topright: 2px;
-                border-top-left-radius: 2px;
+      border-top-right-radius: 2px;
-            }
+    }
 
-            .top-right-rounded-corner-mid {
+    .bottom-left-rounded-corner-mid {
-                -webkit-border-top-right-radius: 2px;
+      -webkit-border-bottom-left-radius: 2px;
-                -khtml-border-radius-topright: 2px;
+      -khtml-border-radius-bottomleft: 2px;
-                border-top-right-radius: 2px;
+      border-bottom-left-radius: 2px;
-            }
+    }
 
-            .bottom-left-rounded-corner-mid {
+    .bottom-right-rounded-corner-mid {
-                -webkit-border-bottom-left-radius: 2px;
+      -webkit-border-bottom-right-radius: 2px;
-                -khtml-border-radius-bottomleft: 2px;
+      -khtml-border-radius-bottomright: 2px;
-                border-bottom-left-radius: 2px;
+      border-bottom-right-radius: 2px;
-            }
+    }
 
-            .bottom-right-rounded-corner-mid {
+    .alert {
-                -webkit-border-bottom-right-radius: 2px;
+      clear: both;
-                -khtml-border-radius-bottomright: 2px;
+      padding: 15px;
-                border-bottom-right-radius: 2px;
+      margin: 10px 0;
-            }
+      border: 1px solid;
+      border-radius: 2px;
+      color: #7E7F7F;
+      border-color: #84a5d2;
+      background-color: #e6edf6;
+    }
 
-            .alert {
+    .alert-success {
-                margin: 10px 0;
+      border-color: #0ac878;
-            }
+      background-color: #daf7eb;
+    }
 
-            .toast-close {
+    .alert-error {
-                margin: 0;
+      border-color: #e85e4d;
-                float: right;
+      background-color: #fbdfdb;
-                cursor: pointer;
+    }
-            }
 
-            .toast-message-holder {
+    .alert-warning {
-                background: rgba(255, 255, 255, 0.25);
+      border-color: #ffc854;
-            }
+      background-color: #fff4dd;
+    }
 
-            .toast-message-holder.fixed {
+    .alert-info {
-                position: fixed;
+      border-color: #84a5d2;
-                padding: 10px 0;
+      background-color: #e6edf6;
-                margin-left: 10px;
+    }
-                margin-right: 10px;
-                top: 0;
-                left: 0;
-                right: 0;
-                z-index: 100;
-            }
-        </style>
 
-        <template is="dom-if" if="[[hasToasts]]">
+    .toast-close {
-            <div class$="container toast-message-holder [[conditionalClass(isFixed)]]">
+      margin: 0;
-                <template is="dom-repeat" items="[[toasts]]">
+      float: right;
-                    <div class$="alert alert-[[item.level]]">
+      cursor: pointer;
-                        <div on-click="dismissNotification" class="toast-close" index-pos="[[index]]">
+    }
-                            <span>[[_gettext('Close')]]</span>
+
-                        </div>
+    .toast-message-holder {
-                        <rhodecode-unsafe-html text="[[item.message]]"></rhodecode-unsafe-html>
+      background: rgba(255, 255, 255, 0.25);
-                    </div>
+    }
-                </template>
+
+    .toast-message-holder.fixed {
+      position: fixed;
+      padding: 10px 0;
+      margin-left: 10px;
+      margin-right: 10px;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 100;
+    }
+  `;
+
+  static properties = {
+    toasts: {type: Array},
+    isFixed: {type: Boolean}
+  };
+
+  constructor() {
+    super();
+    this.toasts = [];
+    this.isFixed = false;
+    this._headerNode = null;
+    this._debouncedCalcBound = this._debouncedCalc.bind(this);
+    this._handleKeyupBound = this._handleKeyup.bind(this);
+    this._debounceTimeout = null;
+  }
+
+  get hasToasts() {
+    return this.toasts && this.toasts.length > 0;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._headerNode = document.querySelector('.header');
+    window.addEventListener('scroll', this._debouncedCalcBound);
+    window.addEventListener('resize', this._debouncedCalcBound);
+    window.addEventListener('keyup', this._handleKeyupBound);
+    this._debouncedCalc();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener('scroll', this._debouncedCalcBound);
+    window.removeEventListener('resize', this._debouncedCalcBound);
+    window.removeEventListener('keyup', this._handleKeyupBound);
+    if (this._debounceTimeout) {
+      clearTimeout(this._debounceTimeout);
+    }
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('toasts')) {
+      $.Topic('/favicon/update').publish({count: this.toasts.length});
+    }
+  }
+
+  render() {
+    if (!this.hasToasts) {
+      return html``;
+    }
+
+    return html`
+      <div class=${classMap({
+        'container': true,
+        'toast-message-holder': true,
+        'fixed': this.isFixed
+      })}>
+        ${this.toasts.map((item, index) => html`
+          <div class="alert alert-${item.level}">
+            <div class="toast-close" @click=${() => this.dismissNotification(index)}>
+              <span>${this._gettext('Close')}</span>
             </div>
-        </template>
+            <rhodecode-unsafe-html .text=${item.message}></rhodecode-unsafe-html>
-        `
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
+  _handleKeyup(event) {
+    if (event.key === 'Escape') {
+      this.dismissNotifications();
     }
+  }
 
-    static get properties() {
+  _debouncedCalc() {
-        return {
+    if (this._debounceTimeout) {
-            toasts: {
+      clearTimeout(this._debounceTimeout);
-                type: Array,
-                value() {
-                    return []
-                }
-            },
-            isFixed: {
-                type: Boolean,
-                value: false
-            },
-            hasToasts: {
-                type: Boolean,
-                computed: '_computeHasToasts(toasts.*)'
-            },
-            keyEventTarget: {
-                type: Object,
-                value() {
-                    return document.body;
-                }
-            }
-        }
     }
+    this._debounceTimeout = setTimeout(() => {
+      this.toastInWindow();
+    }, 25);
+  }
 
-    get keyBindings() {
+  toastInWindow() {
-        return {
+    if (!this._headerNode) {
-            'esc:keyup': '_hideOnEsc'
+      return true;
-        }
     }
+    const headerHeight = this._headerNode.offsetHeight;
+    const scrollPosition = window.scrollY;
 
-    static get observers() {
+    if (this.isFixed) {
-        return [
+      this.isFixed = 1 <= scrollPosition;
-            '_changedToasts(toasts.splices)'
+    } else {
-        ]
+      this.isFixed = headerHeight <= scrollPosition;
     }
+  }
 
-    _hideOnEsc(event) {
+  dismissNotification(index) {
-        return this.dismissNotifications();
+    $.Topic('/favicon/update').publish({count: this.toasts.length - 1});
-    }
+    this.toasts = [
-
+      ...this.toasts.slice(0, index),
-    _computeHasToasts() {
+      ...this.toasts.slice(index + 1)
-        return this.toasts.length > 0;
+    ];
-    }
+  }
-
+
-    _debouncedCalc() {
+  dismissNotifications() {
-        // calculate once in a while
+    $.Topic('/favicon/update').publish({count: 0});
-        this.debounce('debouncedCalc', this.toastInWindow, 25);
+    this.toasts = [];
-    }
+  }
-
+
-    conditionalClass() {
+  handleNotification(data) {
-        return this.isFixed ? 'fixed' : '';
+    if (!templateContext.rhodecode_user.notification_status && !data.message.force) {
-    }
+      return;
-
-    toastInWindow() {
-        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;
-        }
-    }
-
-    connectedCallback() {
-        super.connectedCallback();
-        this._headerNode = document.querySelector('.header', document);
-        this.listen(window, 'scroll', '_debouncedCalc');
-        this.listen(window, 'resize', '_debouncedCalc');
-        this._debouncedCalc();
-    }
-
-    _changedToasts(newValue, oldValue) {
-        $.Topic('/favicon/update').publish({count: this.toasts.length});
-    }
-
-    dismissNotification(e) {
-        $.Topic('/favicon/update').publish({count: this.toasts.length - 1});
-        var idx = e.target.parentNode.indexPos
-        this.splice('toasts', idx, 1);
-
-    }
-
-    dismissNotifications() {
-        $.Topic('/favicon/update').publish({count: 0});
-        this.splice('toasts', 0);
-    }
-
-    handleNotification(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(x){
-        return _gettext(x)
     }
+    this.toasts = [...this.toasts, {
+      level: data.message.level,
+      message: data.message.message
+    }];
+  }
 
+  _gettext(x) {
+    return _gettext(x);
+  }
 }
 
-customElements.define(RhodecodeToast.is, RhodecodeToast);
+customElements.define('rhodecode-toast', RhodecodeToast);

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

@@ -1,30 +1,24 @@
-import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
+import {LitElement, html} from 'lit';
 
-export class RhodecodeUnsafeHtml extends PolymerElement {
+export class RhodecodeUnsafeHtml extends LitElement {
+  static properties = {
+    text: {type: String}
+  };
 
-    static get is() {
+  constructor() {
-        return 'rhodecode-unsafe-html';
+    super();
-    }
+    this.text = '';
-
+  }
-    static get template() {
+
-        return html`
+  render() {
-        <style include="shared-styles"></style>
+    return html`<slot></slot>`;
-        <slot></slot>
+  }
-    `;
+
-    }
+  updated(changedProperties) {
-
+    if (changedProperties.has('text')) {
-    static get properties() {
+      this.innerHTML = this.text;
-        return {
-            text: {
-                type: String,
-                observer: '_handleText'
-            }
-        }
-    }
-
-    _handleText(newVal, oldVal) {
-        this.innerHTML = this.text;
     }
+  }
 }
 
-customElements.define(RhodecodeUnsafeHtml.is, RhodecodeUnsafeHtml);
+customElements.define('rhodecode-unsafe-html', RhodecodeUnsafeHtml);

rhodecode/templates/base/root.mako

@@ -58,7 +58,6 @@ c.template_context['attachment_store'] = {
         </%def>
         ${self.robots()}
         <link rel="icon" href="${h.asset('images/favicon.ico', ver=c.rhodecode_version_hash)}" sizes="16x16 32x32" type="image/png" />
-        <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-bundle.js', ver=c.rhodecode_version_hash)}"></script>
 
         ## CSS definitions

rhodecode/tests/rhodecode.ini

@@ -588,7 +588,7 @@ search.location = %(here)s/.rc-test-data/data/index
 channelstream.enabled = false
 
 ; server address for channelstream server on the backend
-channelstream.server = channelstream:9800
+channelstream.server = channelstream:8000
 
 ; location of the channelstream server from outside world
 ; use ws:// for http or wss:// for https. This address needs to be handled

webpack.config.js

@@ -15,11 +15,19 @@ let babelRCOptions = {
     "presets": [
         ["env", {
             "targets": {
-                "browsers": ["last 2 versions"]
+                "esmodules": true
-            }
+            },
+            "exclude": [
+                "transform-es2015-classes",
+                "transform-regenerator",
+                "transform-async-to-generator"
+            ]
         }]
     ],
-    "plugins": ["transform-object-rest-spread"]
+    "plugins": [
+        ["transform-class-properties", { "loose": true }],
+        "transform-object-rest-spread"
+    ]
 };
 
 module.exports = {
@@ -67,9 +75,10 @@ module.exports = {
             {
                 // If you see a file that ends in .js, just send it to the babel-loader.
                 test: /\.js$/,
+                // Exclude node_modules, but process our Lit components
+                // Babel is configured to NOT transpile ES6 classes (see babelRCOptions exclude)
+                exclude: /node_modules/,
                 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