frontend: Use Polymer 2.0

bower.json

@@ -1,17 +1,17 b''
 {
   "name": "rhodecode-elements",
   "description": "User interface for elements for rhodecode",
   "main": "index.html",
   "dependencies": {
-    "webcomponentsjs": "^0.7.22",
-    "polymer": "Polymer/polymer#^1.6.1",
-    "paper-button": "PolymerElements/paper-button#^1.0.13",
-    "paper-spinner": "PolymerElements/paper-spinner#^1.2.0",
-    "paper-tooltip": "PolymerElements/paper-tooltip#^1.1.2",
-    "paper-toast": "PolymerElements/paper-toast#^1.3.0",
-    "paper-toggle-button": "PolymerElements/paper-toggle-button#^1.2.0",
-    "iron-ajax": "PolymerElements/iron-ajax#^1.4.4",
-    "iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^1.0.13",
-    "iron-a11y-keys": "PolymerElements/iron-a11y-keys#^1.0.6"
+    "webcomponentsjs": "^1.2.3",
+    "polymer": "Polymer/polymer#^2.6.0",
+    "paper-button": "PolymerElements/paper-button#^2.1.2",
+    "paper-spinner": "PolymerElements/paper-spinner#^2.1.0",
+    "paper-tooltip": "PolymerElements/paper-tooltip#^2.1.1",
+    "paper-toast": "PolymerElements/paper-toast#^2.1.2",
+    "paper-toggle-button": "PolymerElements/paper-toggle-button#^2.1.1",
+    "iron-ajax": "PolymerElements/iron-ajax#^2.1.3",
+    "iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^2.2.0",
+    "iron-a11y-keys": "PolymerElements/iron-a11y-keys#^2.1.2"
   }
 }

package.json

@@ -1,32 +1,32 b''
 {
   "name": "rhodecode-enterprise",
   "version": "1.0.0",
   "private": true,
   "description" : "RhodeCode JS packaged",
   "license": "SEE LICENSE IN LICENSE.txt",
   "repository" : {
     "type" : "hg",
     "url" : "https://code.rhodecode.com/rhodecode-enterprise-ce"
   },
   "devDependencies": {
     "grunt": "^0.4.5",
     "grunt-contrib-copy": "^1.0.0",
     "grunt-contrib-concat": "^0.5.1",
     "grunt-contrib-jshint": "^0.12.0",
     "grunt-contrib-less": "^1.1.0",
     "grunt-contrib-watch": "^0.6.1",
-    "crisper": "^2.0.2",
-    "vulcanize": "^1.14.8",
+    "crisper": "^2.1.1",
+    "vulcanize": "^1.16.0",
     "grunt-crisper": "^1.0.1",
     "grunt-vulcanize": "^1.0.0",
     "node2nix": "^1.0.0",
     "jshint": "^2.9.1-rc3",
     "bower": "^1.8.4",
     "jquery": "1.11.3",
     "favico.js": "^0.3.10",
     "clipboard": "^1.7.1",
     "moment": "^2.18.1",
     "mousetrap": "^1.6.1",
     "appenlight-client": "git+https://[e-mail]/AppEnlight/appenlight-client-js.git#0.5.1"
   }
 }

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

@@ -1,150 +1,150 b''
 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.kickoffChannelstreamPlugin();
     },
 
     /** 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.$$('rhodecode-favicon').counter = data.count;
+        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]}
             );
         }
     }
 });

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

@@ -1,24 +1,23 b''
 <link rel="import" href="../../../../../../bower_components/paper-button/paper-button.html">
-<link rel="import" href="../../../../../../bower_components/paper-toast/paper-toast.html">
 <link rel="import" href="../../../../../../bower_components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
 <link rel="import" href="../rhodecode-unsafe-html/rhodecode-unsafe-html.html">
 <dom-module id="rhodecode-toast">
     <template>
         <style include="shared-styles"></style>
         <link rel="stylesheet" href="rhodecode-toast.css">
         <template is="dom-if" if="[[hasToasts]]">
             <div class$="container toast-message-holder [[conditionalClass(isFixed)]]">
                 <template is="dom-repeat" items="[[toasts]]">
                     <div class$="alert alert-[[item.level]]">
                         <div on-tap="dismissNotification" class="toast-close"  index-pos="[[index]]">
                             <span>[[_gettext('Close')]]</span>
                         </div>
                         <rhodecode-unsafe-html text="[[item.message]]"></rhodecode-unsafe-html>
                     </div>
                 </template>
             </div>
         </template>
     </template>
 
     <script src="rhodecode-toast.js"></script>
 </dom-module>

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

@@ -1,9 +1,9 b''
 <link rel="import" href="../../../../../../bower_components/polymer/polymer.html">
 
 <dom-module id="rhodecode-unsafe-html">
     <template>
         <style include="shared-styles"></style>
-        <content></content>
+        <slot></slot>
     </template>
     <script src="rhodecode-unsafe-html.js"></script>
 </dom-module>

rhodecode/templates/admin/my_account/my_account_notifications.mako

@@ -1,130 +1,133 b''
-<template is="dom-bind" id="notificationsPage">
+<dom-bind id="notificationsPage">
+<template>
 <iron-ajax id="toggleNotifications"
            method="post"
            url="${h.route_path('my_account_notifications_toggle_visibility')}"
            content-type="application/json"
            loading="{{changeNotificationsLoading}}"
            on-response="handleNotifications"
            handle-as="json">
 </iron-ajax>
 
 <iron-ajax id="sendTestNotification"
            method="post"
            url="${h.route_path('my_account_notifications_test_channelstream')}"
            content-type="application/json"
            on-response="handleTestNotification"
            handle-as="json">
 </iron-ajax>
 
 <div class="panel panel-default">
   <div class="panel-heading">
     <h3 class="panel-title">${_('Your Live Notification Settings')}</h3>
   </div>
   <div class="panel-body">
 
         <p><strong>IMPORTANT:</strong> This feature requires enabled channelstream websocket server to function correctly.</p>
 
         <p class="hidden">Status of browser notifications permission: <strong id="browser-notification-status"></strong></p>
 
         <div class="form">
             <div class="fields">
                 <div class="field">
                     <div class="label">
                         <label for="new_email">${_('Notifications Status')}:</label>
                     </div>
                     <div class="checkboxes">
                         <rhodecode-toggle id="live-notifications" active="[[changeNotificationsLoading]]" on-change="toggleNotifications" ${'checked' if c.rhodecode_user.get_instance().user_data.get('notification_status') else ''}></rhodecode-toggle>
                     </div>
                 </div>
             </div>
         </div>
   </div>
 </div>
 
 <div class="panel panel-default">
   <div class="panel-heading">
     <h3 class="panel-title">${_('Test Notifications')}</h3>
   </div>
   <div class="panel-body">
 
 
         <div style="padding: 0px 0px 20px 0px">
             <button class="btn" id="test-notification" on-tap="testNotifications">Test flash message</button>
             <button class="btn" id="test-notification-live" on-tap="testNotificationsLive">Test live notification</button>
         </div>
             <h4 id="test-response"></h4>
 
   </div>
 
 
 
 </div>
 
+
+</template>
+</dom-bind>
+
 <script type="text/javascript">
     /** because im not creating a custom element for this page
      * we need to push the function onto the dom-template
      * ideally we turn this into notification-settings elements
      * then it will be cleaner
      */
     var ctrlr = $('#notificationsPage')[0];
     ctrlr.toggleNotifications = function(event){
         var ajax = $('#toggleNotifications')[0];
         ajax.headers = {"X-CSRF-Token": CSRF_TOKEN};
         ajax.body = {notification_status:event.target.active};
         ajax.generateRequest();
     };
     ctrlr.handleNotifications = function(event){
         $('#live-notifications')[0].checked = event.detail.response;
     };
 
     ctrlr.testNotifications = function(event){
         var levels = ['info', 'error', 'warning', 'success'];
         var level = levels[Math.floor(Math.random()*levels.length)];
         function getRandomArbitrary(min, max) {
-          return parseInt(Math.random() * (max - min) + min);
+            return parseInt(Math.random() * (max - min) + min);
         }
         function shuffle(a) {
             var j, x, i;
             for (i = a.length; i; i--) {
                 j = Math.floor(Math.random() * i);
                 x = a[i - 1];
                 a[i - 1] = a[j];
                 a[j] = x;
             }
         }
         var wordDb = [
             "Leela,", "Bender,", "we are", "going", "grave", "robbing.",
             "Oh,", "I", "think", "we", "should", "just", "stay", "friends.",
             "got", "to", "find", "a", "way", "to", "escape", "the", "horrible",
             "ravages", "of", "youth.", "Suddenly,", "going", "to",
             "the", "bathroom", "like", "clockwork,", "every", "three",
             "hours.", "And", "those", "jerks", "at", "Social", "Security",
             "stopped", "sending", "me", "checks.", "Now", "have", "to", "pay"
         ];
         shuffle(wordDb);
         wordDb = wordDb.slice(0, getRandomArbitrary(3, wordDb.length));
         var randomMessage = wordDb.join(" ");
         var payload = {
             message: {
                 message: randomMessage + " " + new Date(),
                 level: level,
                 force: true
             }
         };
         $.Topic('/notifications').publish(payload);
     };
     ctrlr.testNotificationsLive = function(event){
         var ajax = $('#sendTestNotification')[0];
         ajax.headers = {"X-CSRF-Token": CSRF_TOKEN};
         ajax.body = {test_msg: 'Hello !'};
         ajax.generateRequest();
     };
     ctrlr.handleTestNotification = function(event){
         var reply = event.detail.response.response;
         reply = reply || 'no reply form server';
         $('#test-response').html(reply);
     };
 
 </script>
-
-</template>

rhodecode/templates/base/root.mako

@@ -1,188 +1,161 b''
 ## -*- coding: utf-8 -*-
 <!DOCTYPE html>
 
 <%
 c.template_context['repo_name'] = getattr(c, 'repo_name', '')
 go_import_header = ''
 if hasattr(c, 'rhodecode_db_repo'):
     c.template_context['repo_type'] = c.rhodecode_db_repo.repo_type
     c.template_context['repo_landing_commit'] = c.rhodecode_db_repo.landing_rev[1]
 
 if getattr(c, 'repo_group', None):
     c.template_context['repo_group_id'] = c.repo_group.group_id
 
 if getattr(c, 'rhodecode_user', None) and c.rhodecode_user.user_id:
     c.template_context['rhodecode_user']['username'] = c.rhodecode_user.username
     c.template_context['rhodecode_user']['email'] = c.rhodecode_user.email
     c.template_context['rhodecode_user']['notification_status'] = c.rhodecode_user.get_instance().user_data.get('notification_status', True)
     c.template_context['rhodecode_user']['first_name'] = c.rhodecode_user.first_name
     c.template_context['rhodecode_user']['last_name'] = c.rhodecode_user.last_name
 
 c.template_context['visual']['default_renderer'] = h.get_visual_attr(c, 'default_renderer')
 c.template_context['default_user'] = {
     'username': h.DEFAULT_USER,
     'user_id': 1
 }
 
 %>
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
-        <script src="${h.asset('js/vendors/webcomponentsjs/webcomponents-lite.min.js', ver=c.rhodecode_version_hash)}"></script>
+        <script src="${h.asset('js/vendors/webcomponentsjs/webcomponents-lite.js', ver=c.rhodecode_version_hash)}"></script>
         <link rel="import" href="${h.asset('js/rhodecode-components.html', ver=c.rhodecode_version_hash)}">
         <title>${self.title()}</title>
         <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 
         ${h.go_import_header(request, getattr(c, 'rhodecode_db_repo', None))}
 
         % if 'safari' in (request.user_agent or '').lower():
             <meta name="referrer" content="origin">
         % else:
             <meta name="referrer" content="origin-when-cross-origin">
         % endif
 
         <%def name="robots()">
             <meta name="robots" content="index, nofollow"/>
         </%def>
         ${self.robots()}
         <link rel="icon" href="${h.asset('images/favicon.ico', ver=c.rhodecode_version_hash)}" sizes="16x16 32x32" type="image/png" />
 
         ## CSS definitions
         <%def name="css()">
             <link rel="stylesheet" type="text/css" href="${h.asset('css/style.css', ver=c.rhodecode_version_hash)}" media="screen"/>
             <!--[if lt IE 9]>
                 <link rel="stylesheet" type="text/css" href="${h.asset('css/ie.css', ver=c.rhodecode_version_hash)}" media="screen"/>
             <![endif]-->
             ## EXTRA FOR CSS
             ${self.css_extra()}
         </%def>
         ## CSS EXTRA - optionally inject some extra CSS stuff needed for specific websites
         <%def name="css_extra()">
         </%def>
 
         ${self.css()}
 
         ## JAVASCRIPT
         <%def name="js()">
-            <script>
-                // setup Polymer options
-                window.Polymer = {lazyRegister: true, dom: 'shadow'};
-
-                // Load webcomponentsjs polyfill if browser does not support native Web Components
-                (function() {
-                    'use strict';
-                    var onload = function() {
-                        // For native Imports, manually fire WebComponentsReady so user code
-                        // can use the same code path for native and polyfill'd imports.
-                        if (!window.HTMLImports) {
-                            document.dispatchEvent(
-                                    new CustomEvent('WebComponentsReady', {bubbles: true})
-                            );
-                        }
-                    };
-                    var webComponentsSupported = (
-                            'registerElement' in document
-                            && 'import' in document.createElement('link')
-                            && 'content' in document.createElement('template')
-                    );
-                    if (!webComponentsSupported) {
-                    } else {
-                        onload();
-                    }
-                })();
-            </script>
 
             <script src="${h.asset('js/rhodecode/i18n/%s.js' % c.language, ver=c.rhodecode_version_hash)}"></script>
             <script type="text/javascript">
             // register templateContext to pass template variables to JS
             var templateContext = ${h.json.dumps(c.template_context)|n};
 
             var APPLICATION_URL = "${h.route_path('home').rstrip('/')}";
             var ASSET_URL = "${h.asset('')}";
             var DEFAULT_RENDERER = "${h.get_visual_attr(c, 'default_renderer')}";
             var CSRF_TOKEN = "${getattr(c, 'csrf_token', '')}";
 
             var APPENLIGHT = {
               enabled: ${'true' if getattr(c, 'appenlight_enabled', False) else 'false'},
               key: '${getattr(c, "appenlight_api_public_key", "")}',
               % if getattr(c, 'appenlight_server_url', None):
                   serverUrl: '${getattr(c, "appenlight_server_url", "")}',
               % endif
               requestInfo: {
               % if getattr(c, 'rhodecode_user', None):
                   ip: '${c.rhodecode_user.ip_addr}',
                   username: '${c.rhodecode_user.username}'
               % endif
               },
               tags: {
                   rhodecode_version: '${c.rhodecode_version}',
                   rhodecode_edition: '${c.rhodecode_edition}'
               }
             };
 
             </script>
             <%include file="/base/plugins_base.mako"/>
             <!--[if lt IE 9]>
             <script language="javascript" type="text/javascript" src="${h.asset('js/src/excanvas.min.js')}"></script>
             <![endif]-->
             <script language="javascript" type="text/javascript" src="${h.asset('js/rhodecode/routes.js', ver=c.rhodecode_version_hash)}"></script>
             <script> var alertMessagePayloads = ${h.flash.json_alerts(request=request)|n}; </script>
             ## avoide escaping the %N
             <script language="javascript" type="text/javascript" src="${h.asset('js/rhodecode-components.js', ver=c.rhodecode_version_hash)}"></script>
             <script>CodeMirror.modeURL = "${h.asset('') + 'js/mode/%N/%N.js?ver='+c.rhodecode_version_hash}";</script>
 
 
             ## JAVASCRIPT EXTRA - optionally inject some extra JS for specificed templates
             ${self.js_extra()}
 
             <script type="text/javascript">
             Rhodecode = (function() {
                 function _Rhodecode() {
                   this.comments = new CommentsController();
                 }
                 return new _Rhodecode();
             })();
 
             $(document).ready(function(){
               show_more_event();
               timeagoActivate();
               clipboardActivate();
             })
             </script>
 
         </%def>
 
         ## JAVASCRIPT EXTRA - optionally inject some extra JS for specificed templates
         <%def name="js_extra()"></%def>
         ${self.js()}
 
         <%def name="head_extra()"></%def>
         ${self.head_extra()}
         ## extra stuff
         %if c.pre_code:
             ${c.pre_code|n}
         %endif
     </head>
     <body id="body">
         <noscript>
             <div class="noscript-error">
                 ${_('Please enable JavaScript to use RhodeCode Enterprise')}
             </div>
         </noscript>
      ## IE hacks
       <!--[if IE 7]>
       <script>$(document.body).addClass('ie7')</script>
       <![endif]-->
       <!--[if IE 8]>
       <script>$(document.body).addClass('ie8')</script>
       <![endif]-->
       <!--[if IE 9]>
       <script>$(document.body).addClass('ie9')</script>
       <![endif]-->
 
       ${next.body()}
       %if c.post_code:
         ${c.post_code|n}
       %endif
     <rhodecode-app></rhodecode-app>
     </body>
 </html>