polymer: introduce webcomponents to rhodecode

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

@@ -0,0 +1,4 b''
+<link rel="import" href="../../../../../bower_components/paper-toggle-button/paper-toggle-button.html">
+<link rel="import" href="../../../../../bower_components/paper-toast/paper-toast.html">
+<link rel="import" href="../../../../../bower_components/paper-tooltip/paper-tooltip.html">
+<link rel="import" href="../../../../../bower_components/paper-button/paper-button.html">

.hgignore

@@ -23,6 +23,7 b' syntax: regexp'
 ^_dev
 ^._dev
 ^build/
+^bower_components/
 ^coverage\.xml$
 ^data$
 ^\.eggs/

Gruntfile.js

@@ -8,7 +8,14 b' module.exports = function(grunt) {'
         "dest": "rhodecode/public/js"
       }
     },
-
+    copy: {
+      main: {
+        expand: true,
+        cwd: 'bower_components',
+        src: 'webcomponentsjs/**',
+        dest: '<%= dirs.js.dest %>/vendors',
+      },
+    },
     concat: {
       dist: {
         src: [
@@ -120,7 +127,7 b' module.exports = function(grunt) {'
         tasks: ["less:production"]
       },
       js: {
-        files: ["<%= dirs.js.src %>/**/*.js"],
+        files: ["<%= dirs.js.src %>/**/*.js", "<%= dirs.js.src %>/components/*.*"],
         tasks: ["concat:dist"]
       }
     },
@@ -132,6 +139,19 b' module.exports = function(grunt) {'
           jshintrc: '.jshintrc'
         }
       }
+    },
+    vulcanize: {
+      default: {
+        options: {
+          abspath: '',
+          inlineScripts: true,
+          inlineCss: true,
+          stripComments: true
+        },
+        files: {
+          '<%= dirs.js.dest %>/rhodecode-components.html': '<%= dirs.js.src %>/components/shared-components.html'
+        }
+      }
     }
   });
 
@@ -139,6 +159,9 b' module.exports = function(grunt) {'
   grunt.loadNpmTasks('grunt-contrib-concat');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-vulcanize');
+  grunt.loadNpmTasks('grunt-crisper');
+  grunt.loadNpmTasks('grunt-contrib-copy');
 
-  grunt.registerTask('default', ['less:production', 'concat:dist']);
+  grunt.registerTask('default', ['copy','vulcanize', 'less:production', 'concat:dist']);
 };

package.json

@@ -3,10 +3,15 b''
   "version": "0.0.1",
   "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",
+    "grunt-crisper": "^1.0.1",
+    "grunt-vulcanize": "^1.0.0",
     "jshint": "^2.9.1-rc3"
   }
 }

rhodecode/templates/base/root.html

@@ -82,6 +82,25 b" c.template_context['visual']['default_re"
             <!--[if lt IE 9]>
             <script language="javascript" type="text/javascript" src="${h.asset('js/excanvas.min.js')}"></script>
             <![endif]-->
+            <script>
+                // setup Polymer options
+                window.Polymer = {lazyRegister: true, dom: 'shadow'};
+
+                // load webcomponents polyfills
+                (function() {
+                    if ('registerElement' in document
+                            && 'import' in document.createElement('link')
+                            && 'content' in document.createElement('template')) {
+                        // browser has web components
+                    } else {
+                        // polyfill web components
+                        var e = document.createElement('script');
+                        e.src = '${h.asset('js/vendors/webcomponentsjs/webcomponents-lite.min.js', ver=c.rhodecode_version_hash)}';
+                        document.head.appendChild(e);
+                    }
+                })();
+            </script>
+            <link rel="import" href="${h.asset('js/rhodecode-components.html', ver=c.rhodecode_version_hash)}">
             <script language="javascript" type="text/javascript" src="${h.asset('js/rhodecode/routes.js', ver=c.rhodecode_version_hash)}"></script>
             <script language="javascript" type="text/javascript" src="${h.asset('js/scripts.js', ver=c.rhodecode_version_hash)}"></script>
             ## avoide escaping the %N