Move zooming into its own component, imported via HTML Imports.

Also, start building our own polyfill library (polyfill.js) using Grunt and Bower.

Finally, refactor all the web pages so that the common header and footer material comes from templates.

BUG=skia:
R=mtklein@google.com

Author: jcgregorio@google.com

Review URL: https://codereview.chromium.org/292433002

git-svn-id: http://skia.googlecode.com/svn/trunk@14783 2bbb7eff-a529-9590-31e7-b0007b416f81

19 files changed, 506 insertions, 392 deletions

diff --git a/experimental/webtry/README.md b/experimental/webtry/README.md
index 2e670986a0..cba5388dfe 100644
--- a/experimental/webtry/README.md
+++ b/experimental/webtry/README.md
@@ -89,5 +89,6 @@ Do this step only once, but only after running webtry_setup.sh the first time
 Third Party Code
 ----------------
 
-  * res/js/pointerevents.min.js - obtained from https://github.com/components/pointerevents-polyfill
+  * res/js/polyfill.js - Various JS polyfill libraries. To rebuild or update
+    see polyfill/README.md.
 
diff --git a/experimental/webtry/poly/.bowerrc b/experimental/webtry/poly/.bowerrc
new file mode 100644
index 0000000000..628a9f788e
--- /dev/null
+++ b/experimental/webtry/poly/.bowerrc
@@ -0,0 +1,3 @@
+{
+  "directory": "../../../out/bower"
+}
diff --git a/experimental/webtry/poly/Gruntfile.js b/experimental/webtry/poly/Gruntfile.js
new file mode 100644
index 0000000000..cf70277872
--- /dev/null
+++ b/experimental/webtry/poly/Gruntfile.js
@@ -0,0 +1,64 @@
+module.exports = function(grunt) {
+
+  // Project configuration.
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    // Install all the packages listed in the bower.json file.
+    shell: {
+      bower_install: {
+         command: 'bower install'
+      }
+    },
+    // Copy all the bower files into a single directory.
+    bower: {
+      dev: {
+        dest: '../../../out/grunt/third_party'
+      }
+    },
+    // Concatenate all the files in third_party into a single file.
+    concat: {
+      dist: {
+        src: [
+          '../../../out/grunt/third_party/WeakMap.js',
+          '../../../out/grunt/third_party/classlist.js',
+          '../../../out/grunt/third_party/pointerevents-polyfill.js',
+          '../../../out/grunt/third_party/MutationObserver.js',
+          '../../../out/grunt/third_party/CustomElements.js',
+          '../../../out/grunt/third_party/HTMLImports.js',
+        ],
+        dest: '../../../out/grunt/src/<%= pkg.name %>.js'
+      }
+    },
+    // Uglify the one big file into one smaller file.
+    uglify: {
+      options: {
+        banner: '/*! <%= pkg.name %> built from /exerimental/webtry/poly <%= grunt.template.today("yyyy-mm-dd") %> */\n'
+      },
+      build: {
+        src: '../../../out/grunt/src/<%= pkg.name %>.js',
+        dest: '../res/js/<%= pkg.name %>.js'
+      }
+    },
+    copy: {
+      simple: {
+        src: '../../../out/grunt/src/<%= pkg.name %>.js',
+        dest: '../res/js/<%= pkg.name %>.js'
+      }
+    }
+  });
+
+  // Load the plugins for the above commands.
+  grunt.loadNpmTasks('grunt-bower');
+  grunt.loadNpmTasks('grunt-contrib-concat');
+  grunt.loadNpmTasks('grunt-contrib-copy');
+  grunt.loadNpmTasks('grunt-contrib-cssmin');
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-shell');
+
+  // By default run all the commands in the right sequence to build our custom minified polyfill.
+  grunt.registerTask('default', ['shell:bower_install', 'bower', 'concat', 'uglify']);
+
+  // A target to build an unminified version, for debugging.
+  grunt.registerTask('notmin', ['shell:bower_install', 'bower', 'concat', 'copy:simple']);
+
+};
diff --git a/experimental/webtry/poly/README.md b/experimental/webtry/poly/README.md
new file mode 100644
index 0000000000..a49d290a07
--- /dev/null
+++ b/experimental/webtry/poly/README.md
@@ -0,0 +1,18 @@
+polyfill.js
+===========
+
+To rebuild or update res/js/polyfill.js you will need to have
+[node.js](http://nodejs.org/) installed. Once you have it installed run the
+following:
+
+    cd polyfill
+    npm install
+    grunt
+
+If you want to create a verion of the polyfill.js that hasn't been minified,
+say for debugging purposes, then run:
+
+
+    cd polyfill
+    npm install
+    grunt notmin
diff --git a/experimental/webtry/poly/bower.json b/experimental/webtry/poly/bower.json
new file mode 100644
index 0000000000..01b2d2d2bb
--- /dev/null
+++ b/experimental/webtry/poly/bower.json
@@ -0,0 +1,22 @@
+{
+  "name": "polyfill",
+  "version": "0.0.1",
+  "authors": [
+    "Joe Gregorio <jcgregorio@google.com>"
+  ],
+  "description": "All the third party polyfills we use.",
+  "license": "MIT",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "pointerevents-polyfill": "~0.2.0",
+    "CustomElements": "~0.2.3",
+    "HTMLImports": "~0.2.3"
+  }
+}
diff --git a/experimental/webtry/poly/package.json b/experimental/webtry/poly/package.json
new file mode 100644
index 0000000000..2db172a1f1
--- /dev/null
+++ b/experimental/webtry/poly/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "polyfill",
+  "version": "0.0.1",
+  "description": "All the dependencies we need to run grunt and build our minified polyfill JS library.",
+  "main": "polyfill.js",
+  "author": "jcgregorio@google.com",
+  "license": "MIT",
+  "devDependencies": {
+    "grunt": "~0.4.5",
+    "grunt-contrib-uglify": "~0.4.0",
+    "grunt-bower": "~0.13.1",
+    "grunt-contrib-concat": "~0.4.0",
+    "grunt-shell": "~0.7.0",
+    "grunt-contrib-copy": "~0.5.0",
+    "grunt-contrib-cssmin": "~0.9.0"
+  }
+}
diff --git a/experimental/webtry/res/css/webtry.css b/experimental/webtry/res/css/webtry.css
index 1a1d611871..3b04d7dcbf 100644
--- a/experimental/webtry/res/css/webtry.css
+++ b/experimental/webtry/res/css/webtry.css
@@ -9,26 +9,6 @@ img {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAAXNSR0IArs4c6QAAAAJiS0dEAP+Hj8y/AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH3gUBEi4DGRAQYgAAAB1JREFUGNNjfMoAAVJQmokBDdBHgPE/lPFsYN0BABdaAwN6tehMAAAAAElFTkSuQmCC");
 }
 
-.zoom {
-  cursor: crosshair;
-}
-
-.zoomCanvas {
-  position: absolute;
-  width: vmin;
-  height: vmin;
-  top: 3em;
-  right: 1em;
-  z-index: -1;
-}
-
-#zoomCopy {
-  display: none;
-}
-
-#zoomHex {
-  text-shadow: 1px 1px #eee;
-}
 
 h1 {
   font-size: 18px;
diff --git a/experimental/webtry/res/imp/zoom.html b/experimental/webtry/res/imp/zoom.html
new file mode 100644
index 0000000000..33aab9b44c
--- /dev/null
+++ b/experimental/webtry/res/imp/zoom.html
@@ -0,0 +1,169 @@
+<script type="text/javascript" charset="utf-8">
+  /**
+   * A reusable HTML Import to enable zooming on images.
+   *
+   * To use, simply include this HTML Import and add the class 'zoom' to any
+   * images you want zoomable.
+   *
+   *     <link rel='import' type='text/html' href='/res/imp/zoom.html'>
+   *
+   *     <img src="http://..." class="zoom"/>
+   *
+   * Any number of images on a page can be zoomable.
+   *
+   * If you want to display the rgb colors of the pixel at the center of the
+   * zoom then add an id of 'zoomHex' to any element that supports
+   * textContent, such as a div, p, span, etc.
+   *
+   *     <p id=zoomHex></p>
+   *
+   * Note that HTML Imports need to be polyfilled in the near term.
+   */
+  (function () {
+    function onLoad() {
+      var PIXELS       = 20; // The number of pixels in width and height in a zoom.
+      var clientX      = 0;
+      var clientY      = 0;
+      var lastClientX  = 0;
+      var lastClientY  = 0;
+      var ctx          = null; // The 2D canvas context of the zoom.
+      var currentImage = null; // The img node we are zooming for, otherwise null.
+      var hex          = document.getElementById('zoomHex');
+      var canvasCopy   = null;
+      function zoomMove(e) {
+        clientX = e.clientX;
+        clientY = e.clientY;
+      }
+      function zoomMouseDown(e) {
+        e.preventDefault();
+        // Only do zooming on the primary mouse button.
+        if (e.button != 0) {
+          return
+        }
+        currentImage = e.target;
+        clientX = e.clientX;
+        clientY = e.clientY;
+        lastClientX = clientX-1;
+        lastClientY = clientY-1;
+        document.body.style.cursor = 'crosshair';
+        canvas = document.createElement('canvas');
+        canvas.width = 1024;
+        canvas.height = 1024;
+        canvas.classList.add('zoomCanvas');
+        ctx = canvas.getContext('2d');
+        ctx.imageSmoothingEnabled = false;
+        this.parentNode.insertBefore(canvas, this);
+        // Copy the image over to a canvas so we can read RGBA values for each point.
+        if (hex) {
+          canvasCopy = document.createElement('canvas');
+          canvasCopy.width = currentImage.width;
+          canvasCopy.height = currentImage.height;
+          canvasCopy.id = 'zoomCopy';
+          canvasCopy.getContext('2d').drawImage(currentImage, 0, 0, currentImage.width, currentImage.height);
+          this.parentNode.insertBefore(canvasCopy, this);
+        }
+        document.body.addEventListener('pointermove',   zoomMove,     true);
+        document.body.addEventListener('pointerup',     zoomFinished);
+        document.body.addEventListener('pointerleave',  zoomFinished);
+        // Kick off the drawing.
+        setTimeout(drawZoom, 1);
+      }
+      function hexify(i) {
+        var s = i.toString(16).toUpperCase();
+        // Pad out to two hex digits if necessary.
+        if (s.length < 2) {
+          s = '0' + s;
+        }
+        return s;
+      }
+      function drawZoom() {
+        if (currentImage) {
+          // Only draw if the mouse has moved from the last time we drew.
+          if (lastClientX != clientX || lastClientY != clientY) {
+            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+            var x = clientX - currentImage.x;
+            var y = clientY - currentImage.y;
+            var dx = Math.floor(ctx.canvas.width/PIXELS);
+            var dy = Math.floor(ctx.canvas.height/PIXELS);
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = '#000';
+            // Draw out each pixel as a rect on the target canvas, as this works around
+            // FireFox doing a blur as it copies from one canvas to another.
+            var colors = canvasCopy.getContext('2d').getImageData(x, y, PIXELS, PIXELS).data;
+            for (var i=0; i<PIXELS; i++) {
+              for (var j=0; j<PIXELS; j++) {
+                var offset = (j*PIXELS+i)*4; // Offset into the colors array.
+                ctx.fillStyle = 'rgba(' + colors[offset] + ', ' + colors[offset+1] + ', ' + colors[offset+2] + ', ' + colors[offset+3]/255.0 + ')';
+                ctx.fillRect(i*dx, j*dy, dx-1, dy-1);
+                // Box and label one selected pixel with its rgba values.
+                if (hex && i==PIXELS/2 && j == PIXELS/2) {
+                  ctx.strokeRect(i*dx, j*dy, dx-1, dy-1);
+                  hex.textContent = 'rgba('
+                    + colors[offset] + ', '
+                    + colors[offset+1] + ', '
+                    + colors[offset+2] + ', '
+                    + colors[offset+3] + ') '
+                    + hexify(colors[offset])
+                    + hexify(colors[offset+1])
+                    + hexify(colors[offset+2])
+                    + hexify(colors[offset+3]);
+                }
+              }
+            }
+            lastClientX = clientX;
+            lastClientY = clientY;
+          }
+          setTimeout(drawZoom, 1000/30);
+        }
+      }
+      function zoomFinished() {
+        currentImage = null;
+        if (hex) {
+          hex.textContent = '';
+        }
+        document.body.style.cursor = 'default';
+        ctx.canvas.parentNode.removeChild(ctx.canvas);
+        canvasCopy.parentNode.removeChild(canvasCopy);
+        document.body.removeEventListener('pointermove',  zoomMove,     true);
+        document.body.removeEventListener('pointerup',    zoomFinished);
+        document.body.removeEventListener('pointerleave', zoomFinished);
+      }
+
+      var zoomables = document.body.querySelectorAll('.zoom');
+      for (var i=0; i<zoomables.length; i++) {
+        zoomables[i].addEventListener('pointerdown', zoomMouseDown);
+      }
+    }
+
+    // If loaded via HTML Imports then DOMContentLoaded will be long done.
+    if (document.readyState != "loading") {
+      onLoad();
+    } else {
+      this.addEventListener('DOMContentLoaded', onLoad);
+    }
+  })();
+</script>
+
+<style type="text/css" media="screen">
+  .zoom {
+    cursor: crosshair;
+  }
+
+  .zoomCanvas {
+    position: absolute;
+    width: vmin;
+    height: vmin;
+    top: 3em;
+    right: 1em;
+    z-index: -1;
+  }
+
+  #zoomCopy {
+    display: none;
+  }
+
+  #zoomHex {
+    text-shadow: 1px 1px #eee;
+  }
+</style>
+
diff --git a/experimental/webtry/res/js/pointerevents.min.js b/experimental/webtry/res/js/pointerevents.min.js
deleted file mode 100644
index a5beb0808b..0000000000
--- a/experimental/webtry/res/js/pointerevents.min.js
+++ /dev/null
@@ -1,28 +0,0 @@
-// Copyright (c) 2013 The Polymer Authors. All rights reserved.
-//
-// Redistribution and use in source and binary forms, with or without
-// modification, are permitted provided that the following conditions are
-// met:
-//
-//    * Redistributions of source code must retain the above copyright
-// notice, this list of conditions and the following disclaimer.
-//    * Redistributions in binary form must reproduce the above
-// copyright notice, this list of conditions and the following disclaimer
-// in the documentation and/or other materials provided with the
-// distribution.
-//    * Neither the name of Google Inc. nor the names of its
-// contributors may be used to endorse or promote products derived from
-// this software without specific prior written permission.
-//
-// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-"undefined"==typeof WeakMap&&!function(){var a=Object.defineProperty,b=Date.now()%1e9,c=function(){this.name="__st"+(1e9*Math.random()>>>0)+(b++ +"__")};c.prototype={set:function(b,c){var d=b[this.name];d&&d[0]===b?d[1]=c:a(b,this.name,{value:[b,c],writable:!0})},get:function(a){var b;return(b=a[this.name])&&b[0]===a?b[1]:void 0},"delete":function(a){this.set(a,void 0)}},window.WeakMap=c}(),function(a){a=a||{},a.external=a.external||{};var b={shadow:function(a){return a?a.shadowRoot||a.webkitShadowRoot:void 0},canTarget:function(a){return a&&Boolean(a.elementFromPoint)},targetingShadow:function(a){var b=this.shadow(a);return this.canTarget(b)?b:void 0},olderShadow:function(a){var b=a.olderShadowRoot;if(!b){var c=a.querySelector("shadow");c&&(b=c.olderShadowRoot)}return b},allShadows:function(a){for(var b=[],c=this.shadow(a);c;)b.push(c),c=this.olderShadow(c);return b},searchRoot:function(a,b,c){if(a){var d,e,f=a.elementFromPoint(b,c);for(e=this.targetingShadow(f);e;){if(d=e.elementFromPoint(b,c)){var g=this.targetingShadow(d);return this.searchRoot(g,b,c)||d}e=this.olderShadow(e)}return f}},owner:function(a){for(var b=a;b.parentNode;)b=b.parentNode;return b.nodeType!=Node.DOCUMENT_NODE&&b.nodeType!=Node.DOCUMENT_FRAGMENT_NODE&&(b=document),b},findTarget:function(a){var b=a.clientX,c=a.clientY,d=this.owner(a.target);return d.elementFromPoint(b,c)||(d=document),this.searchRoot(d,b,c)}};a.targetFinding=b,a.findTarget=b.findTarget.bind(b),window.PointerEventsPolyfill=a}(window.PointerEventsPolyfill),function(){function a(a){return"body ^^ "+b(a)}function b(a){return'[touch-action="'+a+'"]'}function c(a){return"{ -ms-touch-action: "+a+"; touch-action: "+a+"; touch-action-delay: none; }"}var d=["none","auto","pan-x","pan-y",{rule:"pan-x pan-y",selectors:["pan-x pan-y","pan-y pan-x"]}],e="";d.forEach(function(d){String(d)===d?(e+=b(d)+c(d)+"\n",e+=a(d)+c(d)+"\n"):(e+=d.selectors.map(b)+c(d.rule)+"\n",e+=d.selectors.map(a)+c(d.rule)+"\n")});var f=document.createElement("style");f.textContent=e,document.head.appendChild(f)}(),function(a){function b(a,e){e=e||{};var f;if(e.buttons||d)f=e.buttons;else switch(e.which){case 1:f=1;break;case 2:f=4;break;case 3:f=2;break;default:f=0}var i;if(c)i=new MouseEvent(a,e);else{i=document.createEvent("MouseEvent");for(var j,k={},l=0;l<g.length;l++)j=g[l],k[j]=e[j]||h[l];i.initMouseEvent(a,k.bubbles,k.cancelable,k.view,k.detail,k.screenX,k.screenY,k.clientX,k.clientY,k.ctrlKey,k.altKey,k.shiftKey,k.metaKey,k.button,k.relatedTarget)}i.__proto__=b.prototype,d||Object.defineProperty(i,"buttons",{get:function(){return f},enumerable:!0});var m=0;return m=e.pressure?e.pressure:f?.5:0,Object.defineProperties(i,{pointerId:{value:e.pointerId||0,enumerable:!0},width:{value:e.width||0,enumerable:!0},height:{value:e.height||0,enumerable:!0},pressure:{value:m,enumerable:!0},tiltX:{value:e.tiltX||0,enumerable:!0},tiltY:{value:e.tiltY||0,enumerable:!0},pointerType:{value:e.pointerType||"",enumerable:!0},hwTimestamp:{value:e.hwTimestamp||0,enumerable:!0},isPrimary:{value:e.isPrimary||!1,enumerable:!0}}),i}var c=!1,d=!1;try{var e=new MouseEvent("click",{buttons:1});c=!0,d=1===e.buttons}catch(f){}var g=["bubbles","cancelable","view","detail","screenX","screenY","clientX","clientY","ctrlKey","altKey","shiftKey","metaKey","button","relatedTarget"],h=[!1,!1,null,null,0,0,0,0,!1,!1,!1,!1,0,null];b.prototype=Object.create(MouseEvent.prototype),a.PointerEvent||(a.PointerEvent=b)}(window),function(a){function b(){if(c){var a=new Map;return a.pointers=d,a}this.keys=[],this.values=[]}var c=window.Map&&window.Map.prototype.forEach,d=function(){return this.size};b.prototype={set:function(a,b){var c=this.keys.indexOf(a);c>-1?this.values[c]=b:(this.keys.push(a),this.values.push(b))},has:function(a){return this.keys.indexOf(a)>-1},"delete":function(a){var b=this.keys.indexOf(a);b>-1&&(this.keys.splice(b,1),this.values.splice(b,1))},get:function(a){var b=this.keys.indexOf(a);return this.values[b]},clear:function(){this.keys.length=0,this.values.length=0},forEach:function(a,b){this.values.forEach(function(c,d){a.call(b,c,this.keys[d],this)},this)},pointers:function(){return this.keys.length}},a.PointerMap=b}(window.PointerEventsPolyfill),function(a){var b=["bubbles","cancelable","view","detail","screenX","screenY","clientX","clientY","ctrlKey","altKey","shiftKey","metaKey","button","relatedTarget","buttons","pointerId","width","height","pressure","tiltX","tiltY","pointerType","hwTimestamp","isPrimary","type","target","currentTarget","which"],c=[!1,!1,null,null,0,0,0,0,!1,!1,!1,!1,0,null,0,0,0,0,0,0,0,"",0,!1,"",null,null,0],d="undefined"!=typeof SVGElementInstance,e={targets:new WeakMap,handledEvents:new WeakMap,pointermap:new a.PointerMap,eventMap:{},eventSources:{},eventSourceList:[],registerSource:function(a,b){var c=b,d=c.events;d&&(d.forEach(function(a){c[a]&&(this.eventMap[a]=c[a].bind(c))},this),this.eventSources[a]=c,this.eventSourceList.push(c))},register:function(a){for(var b,c=this.eventSourceList.length,d=0;c>d&&(b=this.eventSourceList[d]);d++)b.register.call(b,a)},unregister:function(a){for(var b,c=this.eventSourceList.length,d=0;c>d&&(b=this.eventSourceList[d]);d++)b.unregister.call(b,a)},contains:a.external.contains||function(a,b){return a.contains(b)},down:function(a){a.bubbles=!0,this.fireEvent("pointerdown",a)},move:function(a){a.bubbles=!0,this.fireEvent("pointermove",a)},up:function(a){a.bubbles=!0,this.fireEvent("pointerup",a)},enter:function(a){a.bubbles=!1,this.fireEvent("pointerenter",a)},leave:function(a){a.bubbles=!1,this.fireEvent("pointerleave",a)},over:function(a){a.bubbles=!0,this.fireEvent("pointerover",a)},out:function(a){a.bubbles=!0,this.fireEvent("pointerout",a)},cancel:function(a){a.bubbles=!0,this.fireEvent("pointercancel",a)},leaveOut:function(a){this.out(a),this.contains(a.target,a.relatedTarget)||this.leave(a)},enterOver:function(a){this.over(a),this.contains(a.target,a.relatedTarget)||this.enter(a)},eventHandler:function(a){if(!this.handledEvents.get(a)){var b=a.type,c=this.eventMap&&this.eventMap[b];c&&c(a),this.handledEvents.set(a,!0)}},listen:function(a,b){b.forEach(function(b){this.addEvent(a,b)},this)},unlisten:function(a,b){b.forEach(function(b){this.removeEvent(a,b)},this)},addEvent:a.external.addEvent||function(a,b){a.addEventListener(b,this.boundHandler)},removeEvent:a.external.removeEvent||function(a,b){a.removeEventListener(b,this.boundHandler)},makeEvent:function(a,b){this.captureInfo&&(b.relatedTarget=null);var c=new PointerEvent(a,b);return b.preventDefault&&(c.preventDefault=b.preventDefault),this.targets.set(c,this.targets.get(b)||b.target),c},fireEvent:function(a,b){var c=this.makeEvent(a,b);return this.dispatchEvent(c)},cloneEvent:function(a){for(var e,f={},g=0;g<b.length;g++)e=b[g],f[e]=a[e]||c[g],!d||"target"!==e&&"relatedTarget"!==e||f[e]instanceof SVGElementInstance&&(f[e]=f[e].correspondingUseElement);return a.preventDefault&&(f.preventDefault=function(){a.preventDefault()}),f},getTarget:function(a){return this.captureInfo&&this.captureInfo.id===a.pointerId?this.captureInfo.target:this.targets.get(a)},setCapture:function(a,b){this.captureInfo&&this.releaseCapture(this.captureInfo.id),this.captureInfo={id:a,target:b};var c=new PointerEvent("gotpointercapture",{bubbles:!0});this.implicitRelease=this.releaseCapture.bind(this,a),document.addEventListener("pointerup",this.implicitRelease),document.addEventListener("pointercancel",this.implicitRelease),this.targets.set(c,b),this.asyncDispatchEvent(c)},releaseCapture:function(a){if(this.captureInfo&&this.captureInfo.id===a){var b=new PointerEvent("lostpointercapture",{bubbles:!0}),c=this.captureInfo.target;this.captureInfo=null,document.removeEventListener("pointerup",this.implicitRelease),document.removeEventListener("pointercancel",this.implicitRelease),this.targets.set(b,c),this.asyncDispatchEvent(b)}},dispatchEvent:a.external.dispatchEvent||function(a){var b=this.getTarget(a);return b?b.dispatchEvent(a):void 0},asyncDispatchEvent:function(a){setTimeout(this.dispatchEvent.bind(this,a),0)}};e.boundHandler=e.eventHandler.bind(e),a.dispatcher=e,a.register=e.register.bind(e),a.unregister=e.unregister.bind(e)}(window.PointerEventsPolyfill),function(a){function b(a,b,c,d){this.addCallback=a.bind(d),this.removeCallback=b.bind(d),this.changedCallback=c.bind(d),g&&(this.observer=new g(this.mutationWatcher.bind(this)))}var c=Array.prototype.forEach.call.bind(Array.prototype.forEach),d=Array.prototype.map.call.bind(Array.prototype.map),e=Array.prototype.slice.call.bind(Array.prototype.slice),f=Array.prototype.filter.call.bind(Array.prototype.filter),g=window.MutationObserver||window.WebKitMutationObserver,h="[touch-action]",i={subtree:!0,childList:!0,attributes:!0,attributeOldValue:!0,attributeFilter:["touch-action"]};b.prototype={watchSubtree:function(b){a.targetFinding.canTarget(b)&&this.observer.observe(b,i)},enableOnSubtree:function(a){this.watchSubtree(a),a===document&&"complete"!==document.readyState?this.installOnLoad():this.installNewSubtree(a)},installNewSubtree:function(a){c(this.findElements(a),this.addElement,this)},findElements:function(a){return a.querySelectorAll?a.querySelectorAll(h):[]},removeElement:function(a){this.removeCallback(a)},addElement:function(a){this.addCallback(a)},elementChanged:function(a,b){this.changedCallback(a,b)},concatLists:function(a,b){return a.concat(e(b))},installOnLoad:function(){document.addEventListener("DOMContentLoaded",this.installNewSubtree.bind(this,document))},isElement:function(a){return a.nodeType===Node.ELEMENT_NODE},flattenMutationTree:function(a){var b=d(a,this.findElements,this);return b.push(f(a,this.isElement)),b.reduce(this.concatLists,[])},mutationWatcher:function(a){a.forEach(this.mutationHandler,this)},mutationHandler:function(a){if("childList"===a.type){var b=this.flattenMutationTree(a.addedNodes);b.forEach(this.addElement,this);var c=this.flattenMutationTree(a.removedNodes);c.forEach(this.removeElement,this)}else"attributes"===a.type&&this.elementChanged(a.target,a.oldValue)}},g||(b.prototype.watchSubtree=function(){console.warn("PointerEventsPolyfill: MutationObservers not found, touch-action will not be dynamically detected")}),a.Installer=b}(window.PointerEventsPolyfill),function(a){var b=a.dispatcher,c=b.pointermap,d=25,e={POINTER_ID:1,POINTER_TYPE:"mouse",events:["mousedown","mousemove","mouseup","mouseover","mouseout"],register:function(a){b.listen(a,this.events)},unregister:function(a){b.unlisten(a,this.events)},lastTouches:[],isEventSimulatedFromTouch:function(a){for(var b,c=this.lastTouches,e=a.clientX,f=a.clientY,g=0,h=c.length;h>g&&(b=c[g]);g++){var i=Math.abs(e-b.x),j=Math.abs(f-b.y);if(d>=i&&d>=j)return!0}},prepareEvent:function(a){var c=b.cloneEvent(a),d=c.preventDefault;return c.preventDefault=function(){a.preventDefault(),d()},c.pointerId=this.POINTER_ID,c.isPrimary=!0,c.pointerType=this.POINTER_TYPE,c},mousedown:function(a){if(!this.isEventSimulatedFromTouch(a)){var d=c.has(this.POINTER_ID);d&&this.cancel(a);var e=this.prepareEvent(a);c.set(this.POINTER_ID,a),b.down(e)}},mousemove:function(a){if(!this.isEventSimulatedFromTouch(a)){var c=this.prepareEvent(a);b.move(c)}},mouseup:function(a){if(!this.isEventSimulatedFromTouch(a)){var d=c.get(this.POINTER_ID);if(d&&d.button===a.button){var e=this.prepareEvent(a);b.up(e),this.cleanupMouse()}}},mouseover:function(a){if(!this.isEventSimulatedFromTouch(a)){var c=this.prepareEvent(a);b.enterOver(c)}},mouseout:function(a){if(!this.isEventSimulatedFromTouch(a)){var c=this.prepareEvent(a);b.leaveOut(c)}},cancel:function(a){var c=this.prepareEvent(a);b.cancel(c),this.cleanupMouse()},cleanupMouse:function(){c["delete"](this.POINTER_ID)}};a.mouseEvents=e}(window.PointerEventsPolyfill),function(a){var b,c=a.dispatcher,d=a.findTarget,e=a.targetFinding.allShadows.bind(a.targetFinding),f=c.pointermap,g=Array.prototype.map.call.bind(Array.prototype.map),h=2500,i=200,j="touch-action",k=!1,l={scrollType:new WeakMap,events:["touchstart","touchmove","touchend","touchcancel"],register:function(a){k?c.listen(a,this.events):b.enableOnSubtree(a)},unregister:function(a){k&&c.unlisten(a,this.events)},elementAdded:function(a){var b=a.getAttribute(j),d=this.touchActionToScrollType(b);d&&(this.scrollType.set(a,d),c.listen(a,this.events),e(a).forEach(function(a){this.scrollType.set(a,d),c.listen(a,this.events)},this))},elementRemoved:function(a){this.scrollType["delete"](a),c.unlisten(a,this.events),e(a).forEach(function(a){this.scrollType["delete"](a),c.unlisten(a,this.events)},this)},elementChanged:function(a,b){var c=a.getAttribute(j),d=this.touchActionToScrollType(c),f=this.touchActionToScrollType(b);d&&f?(this.scrollType.set(a,d),e(a).forEach(function(a){this.scrollType.set(a,d)},this)):f?this.elementRemoved(a):d&&this.elementAdded(a)},scrollTypes:{EMITTER:"none",XSCROLLER:"pan-x",YSCROLLER:"pan-y",SCROLLER:/^(?:pan-x pan-y)|(?:pan-y pan-x)|auto$/},touchActionToScrollType:function(a){var b=a,c=this.scrollTypes;return"none"===b?"none":b===c.XSCROLLER?"X":b===c.YSCROLLER?"Y":c.SCROLLER.exec(b)?"XY":void 0},POINTER_TYPE:"touch",firstTouch:null,isPrimaryTouch:function(a){return this.firstTouch===a.identifier},setPrimaryTouch:function(a){(0===f.pointers()||1===f.pointers()&&f.has(1))&&(this.firstTouch=a.identifier,this.firstXY={X:a.clientX,Y:a.clientY},this.scrolling=!1,this.cancelResetClickCount())},removePrimaryPointer:function(a){a.isPrimary&&(this.firstTouch=null,this.firstXY=null,this.resetClickCount())},clickCount:0,resetId:null,resetClickCount:function(){var a=function(){this.clickCount=0,this.resetId=null}.bind(this);this.resetId=setTimeout(a,i)},cancelResetClickCount:function(){this.resetId&&clearTimeout(this.resetId)},touchToPointer:function(a){var b=c.cloneEvent(a);return b.pointerId=a.identifier+2,b.target=d(b),b.bubbles=!0,b.cancelable=!0,b.detail=this.clickCount,b.button=0,b.buttons=1,b.width=a.webkitRadiusX||a.radiusX||0,b.height=a.webkitRadiusY||a.radiusY||0,b.pressure=a.webkitForce||a.force||.5,b.isPrimary=this.isPrimaryTouch(a),b.pointerType=this.POINTER_TYPE,b},processTouches:function(a,b){var c=a.changedTouches,d=g(c,this.touchToPointer,this);d.forEach(function(b){b.preventDefault=function(){this.scrolling=!1,this.firstXY=null,a.preventDefault()}},this),d.forEach(b,this)},shouldScroll:function(a){if(this.firstXY){var b,c=this.scrollType.get(a.currentTarget);if("none"===c)b=!1;else if("XY"===c)b=!0;else{var d=a.changedTouches[0],e=c,f="Y"===c?"X":"Y",g=Math.abs(d["client"+e]-this.firstXY[e]),h=Math.abs(d["client"+f]-this.firstXY[f]);b=g>=h}return this.firstXY=null,b}},findTouch:function(a,b){for(var c,d=0,e=a.length;e>d&&(c=a[d]);d++)if(c.identifier===b)return!0},vacuumTouches:function(a){var b=a.touches;if(f.pointers()>=b.length){var c=[];f.forEach(function(a,d){if(1!==d&&!this.findTouch(b,d-2)){var e=a.out;c.push(this.touchToPointer(e))}},this),c.forEach(this.cancelOut,this)}},touchstart:function(a){this.vacuumTouches(a),this.setPrimaryTouch(a.changedTouches[0]),this.dedupSynthMouse(a),this.scrolling||(this.clickCount++,this.processTouches(a,this.overDown))},overDown:function(a){f.set(a.pointerId,{target:a.target,out:a,outTarget:a.target});c.over(a),c.enter(a),c.down(a)},touchmove:function(a){this.scrolling||(this.shouldScroll(a)?(this.scrolling=!0,this.touchcancel(a)):(a.preventDefault(),this.processTouches(a,this.moveOverOut)))},moveOverOut:function(a){var b=a,d=f.get(b.pointerId);if(d){var e=d.out,g=d.outTarget;c.move(b),e&&g!==b.target&&(e.relatedTarget=b.target,b.relatedTarget=g,e.target=g,b.target?(c.leaveOut(e),c.enterOver(b)):(b.target=g,b.relatedTarget=null,this.cancelOut(b))),d.out=b,d.outTarget=b.target}},touchend:function(a){this.dedupSynthMouse(a),this.processTouches(a,this.upOut)},upOut:function(a){this.scrolling||(c.up(a),c.out(a),c.leave(a)),this.cleanUpPointer(a)},touchcancel:function(a){this.processTouches(a,this.cancelOut)},cancelOut:function(a){c.cancel(a),c.out(a),c.leave(a),this.cleanUpPointer(a)},cleanUpPointer:function(a){f["delete"](a.pointerId),this.removePrimaryPointer(a)},dedupSynthMouse:function(b){var c=a.mouseEvents.lastTouches,d=b.changedTouches[0];if(this.isPrimaryTouch(d)){var e={x:d.clientX,y:d.clientY};c.push(e);var f=function(a,b){var c=a.indexOf(b);c>-1&&a.splice(c,1)}.bind(null,c,e);setTimeout(f,h)}}};k||(b=new a.Installer(l.elementAdded,l.elementRemoved,l.elementChanged,l)),a.touchEvents=l}(window.PointerEventsPolyfill),function(a){var b=a.dispatcher,c=b.pointermap,d=window.MSPointerEvent&&"number"==typeof window.MSPointerEvent.MSPOINTER_TYPE_MOUSE,e={events:["MSPointerDown","MSPointerMove","MSPointerUp","MSPointerOut","MSPointerOver","MSPointerCancel","MSGotPointerCapture","MSLostPointerCapture"],register:function(a){b.listen(a,this.events)},unregister:function(a){b.unlisten(a,this.events)},POINTER_TYPES:["","unavailable","touch","pen","mouse"],prepareEvent:function(a){var c=a;return d&&(c=b.cloneEvent(a),c.pointerType=this.POINTER_TYPES[a.pointerType]),c},cleanup:function(a){c["delete"](a)},MSPointerDown:function(a){c.set(a.pointerId,a);var d=this.prepareEvent(a);b.down(d)},MSPointerMove:function(a){var c=this.prepareEvent(a);b.move(c)},MSPointerUp:function(a){var c=this.prepareEvent(a);b.up(c),this.cleanup(a.pointerId)},MSPointerOut:function(a){var c=this.prepareEvent(a);b.leaveOut(c)},MSPointerOver:function(a){var c=this.prepareEvent(a);b.enterOver(c)},MSPointerCancel:function(a){var c=this.prepareEvent(a);b.cancel(c),this.cleanup(a.pointerId)},MSLostPointerCapture:function(a){var c=b.makeEvent("lostpointercapture",a);b.dispatchEvent(c)},MSGotPointerCapture:function(a){var c=b.makeEvent("gotpointercapture",a);b.dispatchEvent(c)}};a.msEvents=e}(window.PointerEventsPolyfill),function(a){var b=a.dispatcher;if(void 0===window.navigator.pointerEnabled){if(Object.defineProperty(window.navigator,"pointerEnabled",{value:!0,enumerable:!0}),window.navigator.msPointerEnabled){var c=window.navigator.msMaxTouchPoints;Object.defineProperty(window.navigator,"maxTouchPoints",{value:c,enumerable:!0}),b.registerSource("ms",a.msEvents)}else b.registerSource("mouse",a.mouseEvents),void 0!==window.ontouchstart&&b.registerSource("touch",a.touchEvents);b.register(document)}}(window.PointerEventsPolyfill),function(a){function b(a){if(!e.pointermap.has(a))throw new Error("InvalidPointerId")}var c,d,e=a.dispatcher,f=window.navigator;f.msPointerEnabled?(c=function(a){b(a),this.msSetPointerCapture(a)},d=function(a){b(a),this.msReleasePointerCapture(a)}):(c=function(a){b(a),e.setCapture(a,this)},d=function(a){b(a),e.releaseCapture(a,this)}),window.Element&&!Element.prototype.setPointerCapture&&Object.defineProperties(Element.prototype,{setPointerCapture:{value:c},releasePointerCapture:{value:d}})}(window.PointerEventsPolyfill);
\ No newline at end of file
diff --git a/experimental/webtry/res/js/polyfill.js b/experimental/webtry/res/js/polyfill.js
new file mode 100644
index 0000000000..d431807313
--- /dev/null
+++ b/experimental/webtry/res/js/polyfill.js
@@ -0,0 +1,3 @@
+/*! polyfill built from /exerimental/webtry/poly 2014-05-19 */
+"undefined"==typeof WeakMap&&!function(){var a=Object.defineProperty,b=Date.now()%1e9,c=function(){this.name="__st"+(1e9*Math.random()>>>0)+(b++ +"__")};c.prototype={set:function(b,c){var d=b[this.name];d&&d[0]===b?d[1]=c:a(b,this.name,{value:[b,c],writable:!0})},get:function(a){var b;return(b=a[this.name])&&b[0]===a?b[1]:void 0},"delete":function(a){this.set(a,void 0)}},window.WeakMap=c}(),"undefined"==typeof document||"classList"in document.createElement("a")||!function(a){"use strict";if("HTMLElement"in a||"Element"in a){var b="classList",c="prototype",d=(a.HTMLElement||a.Element)[c],e=Object,f=String[c].trim||function(){return this.replace(/^\s+|\s+$/g,"")},g=Array[c].indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(b in this&&this[b]===a)return b;return-1},h=function(a,b){this.name=a,this.code=DOMException[a],this.message=b},i=function(a,b){if(""===b)throw new h("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(b))throw new h("INVALID_CHARACTER_ERR","String contains an invalid character");return g.call(a,b)},j=function(a){for(var b=f.call(a.className),c=b?b.split(/\s+/):[],d=0,e=c.length;e>d;d++)this.push(c[d]);this._updateClassName=function(){a.className=this.toString()}},k=j[c]=[],l=function(){return new j(this)};if(h[c]=Error[c],k.item=function(a){return this[a]||null},k.contains=function(a){return a+="",-1!==i(this,a)},k.add=function(){var a,b=arguments,c=0,d=b.length,e=!1;do a=b[c]+"",-1===i(this,a)&&(this.push(a),e=!0);while(++c<d);e&&this._updateClassName()},k.remove=function(){var a,b=arguments,c=0,d=b.length,e=!1;do{a=b[c]+"";var f=i(this,a);-1!==f&&(this.splice(f,1),e=!0)}while(++c<d);e&&this._updateClassName()},k.toggle=function(a,b){a+="";var c=this.contains(a),d=c?b!==!0&&"remove":b!==!1&&"add";return d&&this[d](a),!c},k.toString=function(){return this.join(" ")},e.defineProperty){var m={get:l,enumerable:!0,configurable:!0};try{e.defineProperty(d,b,m)}catch(n){-2146823252===n.number&&(m.enumerable=!1,e.defineProperty(d,b,m))}}else e[c].__defineGetter__&&d.__defineGetter__(b,l)}}(self),"undefined"==typeof WeakMap&&!function(){var a=Object.defineProperty,b=Date.now()%1e9,c=function(){this.name="__st"+(1e9*Math.random()>>>0)+(b++ +"__")};c.prototype={set:function(b,c){var d=b[this.name];d&&d[0]===b?d[1]=c:a(b,this.name,{value:[b,c],writable:!0})},get:function(a){var b;return(b=a[this.name])&&b[0]===a?b[1]:void 0},"delete":function(a){this.set(a,void 0)}},window.WeakMap=c}(),function(a){a=a||{},a.external=a.external||{};var b={shadow:function(a){return a?a.shadowRoot||a.webkitShadowRoot:void 0},canTarget:function(a){return a&&Boolean(a.elementFromPoint)},targetingShadow:function(a){var b=this.shadow(a);return this.canTarget(b)?b:void 0},olderShadow:function(a){var b=a.olderShadowRoot;if(!b){var c=a.querySelector("shadow");c&&(b=c.olderShadowRoot)}return b},allShadows:function(a){for(var b=[],c=this.shadow(a);c;)b.push(c),c=this.olderShadow(c);return b},searchRoot:function(a,b,c){if(a){var d,e,f=a.elementFromPoint(b,c);for(e=this.targetingShadow(f);e;){if(d=e.elementFromPoint(b,c)){var g=this.targetingShadow(d);return this.searchRoot(g,b,c)||d}e=this.olderShadow(e)}return f}},owner:function(a){for(var b=a;b.parentNode;)b=b.parentNode;return b.nodeType!=Node.DOCUMENT_NODE&&b.nodeType!=Node.DOCUMENT_FRAGMENT_NODE&&(b=document),b},findTarget:function(a){var b=a.clientX,c=a.clientY,d=this.owner(a.target);return d.elementFromPoint(b,c)||(d=document),this.searchRoot(d,b,c)}};a.targetFinding=b,a.findTarget=b.findTarget.bind(b),window.PointerEventsPolyfill=a}(window.PointerEventsPolyfill),function(){function a(a){return"body ^^ "+b(a)}function b(a){return'[touch-action="'+a+'"]'}function c(a){return"{ -ms-touch-action: "+a+"; touch-action: "+a+"; touch-action-delay: none; }"}var d=["none","auto","pan-x","pan-y",{rule:"pan-x pan-y",selectors:["pan-x pan-y","pan-y pan-x"]}],e="";d.forEach(function(d){String(d)===d?(e+=b(d)+c(d)+"\n",e+=a(d)+c(d)+"\n"):(e+=d.selectors.map(b)+c(d.rule)+"\n",e+=d.selectors.map(a)+c(d.rule)+"\n")});var f=document.createElement("style");f.textContent=e,document.head.appendChild(f)}(),function(a){function b(a,e){e=e||{};var f;if(e.buttons||d)f=e.buttons;else switch(e.which){case 1:f=1;break;case 2:f=4;break;case 3:f=2;break;default:f=0}var i;if(c)i=new MouseEvent(a,e);else{i=document.createEvent("MouseEvent");for(var j,k={},l=0;l<g.length;l++)j=g[l],k[j]=e[j]||h[l];i.initMouseEvent(a,k.bubbles,k.cancelable,k.view,k.detail,k.screenX,k.screenY,k.clientX,k.clientY,k.ctrlKey,k.altKey,k.shiftKey,k.metaKey,k.button,k.relatedTarget)}i.__proto__=b.prototype,d||Object.defineProperty(i,"buttons",{get:function(){return f},enumerable:!0});var m=0;return m=e.pressure?e.pressure:f?.5:0,Object.defineProperties(i,{pointerId:{value:e.pointerId||0,enumerable:!0},width:{value:e.width||0,enumerable:!0},height:{value:e.height||0,enumerable:!0},pressure:{value:m,enumerable:!0},tiltX:{value:e.tiltX||0,enumerable:!0},tiltY:{value:e.tiltY||0,enumerable:!0},pointerType:{value:e.pointerType||"",enumerable:!0},hwTimestamp:{value:e.hwTimestamp||0,enumerable:!0},isPrimary:{value:e.isPrimary||!1,enumerable:!0}}),i}var c=!1,d=!1;try{var e=new MouseEvent("click",{buttons:1});c=!0,d=1===e.buttons}catch(f){}var g=["bubbles","cancelable","view","detail","screenX","screenY","clientX","clientY","ctrlKey","altKey","shiftKey","metaKey","button","relatedTarget"],h=[!1,!1,null,null,0,0,0,0,!1,!1,!1,!1,0,null];b.prototype=Object.create(MouseEvent.prototype),a.PointerEvent||(a.PointerEvent=b)}(window),function(a){function b(){if(c){var a=new Map;return a.pointers=d,a}this.keys=[],this.values=[]}var c=window.Map&&window.Map.prototype.forEach,d=function(){return this.size};b.prototype={set:function(a,b){var c=this.keys.indexOf(a);c>-1?this.values[c]=b:(this.keys.push(a),this.values.push(b))},has:function(a){return this.keys.indexOf(a)>-1},"delete":function(a){var b=this.keys.indexOf(a);b>-1&&(this.keys.splice(b,1),this.values.splice(b,1))},get:function(a){var b=this.keys.indexOf(a);return this.values[b]},clear:function(){this.keys.length=0,this.values.length=0},forEach:function(a,b){this.values.forEach(function(c,d){a.call(b,c,this.keys[d],this)},this)},pointers:function(){return this.keys.length}},a.PointerMap=b}(window.PointerEventsPolyfill),function(a){var b=["bubbles","cancelable","view","detail","screenX","screenY","clientX","clientY","ctrlKey","altKey","shiftKey","metaKey","button","relatedTarget","buttons","pointerId","width","height","pressure","tiltX","tiltY","pointerType","hwTimestamp","isPrimary","type","target","currentTarget","which"],c=[!1,!1,null,null,0,0,0,0,!1,!1,!1,!1,0,null,0,0,0,0,0,0,0,"",0,!1,"",null,null,0],d="undefined"!=typeof SVGElementInstance,e={targets:new WeakMap,handledEvents:new WeakMap,pointermap:new a.PointerMap,eventMap:{},eventSources:{},eventSourceList:[],registerSource:function(a,b){var c=b,d=c.events;d&&(d.forEach(function(a){c[a]&&(this.eventMap[a]=c[a].bind(c))},this),this.eventSources[a]=c,this.eventSourceList.push(c))},register:function(a){for(var b,c=this.eventSourceList.length,d=0;c>d&&(b=this.eventSourceList[d]);d++)b.register.call(b,a)},unregister:function(a){for(var b,c=this.eventSourceList.length,d=0;c>d&&(b=this.eventSourceList[d]);d++)b.unregister.call(b,a)},contains:a.external.contains||function(a,b){return a.contains(b)},down:function(a){a.bubbles=!0,this.fireEvent("pointerdown",a)},move:function(a){a.bubbles=!0,this.fireEvent("pointermove",a)},up:function(a){a.bubbles=!0,this.fireEvent("pointerup",a)},enter:function(a){a.bubbles=!1,this.fireEvent("pointerenter",a)},leave:function(a){a.bubbles=!1,this.fireEvent("pointerleave",a)},over:function(a){a.bubbles=!0,this.fireEvent("pointerover",a)},out:function(a){a.bubbles=!0,this.fireEvent("pointerout",a)},cancel:function(a){a.bubbles=!0,this.fireEvent("pointercancel",a)},leaveOut:function(a){this.out(a),this.contains(a.target,a.relatedTarget)||this.leave(a)},enterOver:function(a){this.over(a),this.contains(a.target,a.relatedTarget)||this.enter(a)},eventHandler:function(a){if(!this.handledEvents.get(a)){var b=a.type,c=this.eventMap&&this.eventMap[b];c&&c(a),this.handledEvents.set(a,!0)}},listen:function(a,b){b.forEach(function(b){this.addEvent(a,b)},this)},unlisten:function(a,b){b.forEach(function(b){this.removeEvent(a,b)},this)},addEvent:a.external.addEvent||function(a,b){a.addEventListener(b,this.boundHandler)},removeEvent:a.external.removeEvent||function(a,b){a.removeEventListener(b,this.boundHandler)},makeEvent:function(a,b){this.captureInfo&&(b.relatedTarget=null);var c=new PointerEvent(a,b);return b.preventDefault&&(c.preventDefault=b.preventDefault),this.targets.set(c,this.targets.get(b)||b.target),c},fireEvent:function(a,b){var c=this.makeEvent(a,b);return this.dispatchEvent(c)},cloneEvent:function(a){for(var e,f={},g=0;g<b.length;g++)e=b[g],f[e]=a[e]||c[g],!d||"target"!==e&&"relatedTarget"!==e||f[e]instanceof SVGElementInstance&&(f[e]=f[e].correspondingUseElement);return a.preventDefault&&(f.preventDefault=function(){a.preventDefault()}),f},getTarget:function(a){return this.captureInfo&&this.captureInfo.id===a.pointerId?this.captureInfo.target:this.targets.get(a)},setCapture:function(a,b){this.captureInfo&&this.releaseCapture(this.captureInfo.id),this.captureInfo={id:a,target:b};var c=new PointerEvent("gotpointercapture",{bubbles:!0});this.implicitRelease=this.releaseCapture.bind(this,a),document.addEventListener("pointerup",this.implicitRelease),document.addEventListener("pointercancel",this.implicitRelease),this.targets.set(c,b),this.asyncDispatchEvent(c)},releaseCapture:function(a){if(this.captureInfo&&this.captureInfo.id===a){var b=new PointerEvent("lostpointercapture",{bubbles:!0}),c=this.captureInfo.target;this.captureInfo=null,document.removeEventListener("pointerup",this.implicitRelease),document.removeEventListener("pointercancel",this.implicitRelease),this.targets.set(b,c),this.asyncDispatchEvent(b)}},dispatchEvent:a.external.dispatchEvent||function(a){var b=this.getTarget(a);return b?b.dispatchEvent(a):void 0},asyncDispatchEvent:function(a){setTimeout(this.dispatchEvent.bind(this,a),0)}};e.boundHandler=e.eventHandler.bind(e),a.dispatcher=e,a.register=e.register.bind(e),a.unregister=e.unregister.bind(e)}(window.PointerEventsPolyfill),function(a){function b(a,b,c,d){this.addCallback=a.bind(d),this.removeCallback=b.bind(d),this.changedCallback=c.bind(d),g&&(this.observer=new g(this.mutationWatcher.bind(this)))}var c=Array.prototype.forEach.call.bind(Array.prototype.forEach),d=Array.prototype.map.call.bind(Array.prototype.map),e=Array.prototype.slice.call.bind(Array.prototype.slice),f=Array.prototype.filter.call.bind(Array.prototype.filter),g=window.MutationObserver||window.WebKitMutationObserver,h="[touch-action]",i={subtree:!0,childList:!0,attributes:!0,attributeOldValue:!0,attributeFilter:["touch-action"]};b.prototype={watchSubtree:function(b){a.targetFinding.canTarget(b)&&this.observer.observe(b,i)},enableOnSubtree:function(a){this.watchSubtree(a),a===document&&"complete"!==document.readyState?this.installOnLoad():this.installNewSubtree(a)},installNewSubtree:function(a){c(this.findElements(a),this.addElement,this)},findElements:function(a){return a.querySelectorAll?a.querySelectorAll(h):[]},removeElement:function(a){this.removeCallback(a)},addElement:function(a){this.addCallback(a)},elementChanged:function(a,b){this.changedCallback(a,b)},concatLists:function(a,b){return a.concat(e(b))},installOnLoad:function(){document.addEventListener("DOMContentLoaded",this.installNewSubtree.bind(this,document))},isElement:function(a){return a.nodeType===Node.ELEMENT_NODE},flattenMutationTree:function(a){var b=d(a,this.findElements,this);return b.push(f(a,this.isElement)),b.reduce(this.concatLists,[])},mutationWatcher:function(a){a.forEach(this.mutationHandler,this)},mutationHandler:function(a){if("childList"===a.type){var b=this.flattenMutationTree(a.addedNodes);b.forEach(this.addElement,this);var c=this.flattenMutationTree(a.removedNodes);c.forEach(this.removeElement,this)}else"attributes"===a.type&&this.elementChanged(a.target,a.oldValue)}},g||(b.prototype.watchSubtree=function(){console.warn("PointerEventsPolyfill: MutationObservers not found, touch-action will not be dynamically detected")}),a.Installer=b}(window.PointerEventsPolyfill),function(a){var b=a.dispatcher,c=b.pointermap,d=25,e={POINTER_ID:1,POINTER_TYPE:"mouse",events:["mousedown","mousemove","mouseup","mouseover","mouseout"],register:function(a){b.listen(a,this.events)},unregister:function(a){b.unlisten(a,this.events)},lastTouches:[],isEventSimulatedFromTouch:function(a){for(var b,c=this.lastTouches,e=a.clientX,f=a.clientY,g=0,h=c.length;h>g&&(b=c[g]);g++){var i=Math.abs(e-b.x),j=Math.abs(f-b.y);if(d>=i&&d>=j)return!0}},prepareEvent:function(a){var c=b.cloneEvent(a),d=c.preventDefault;return c.preventDefault=function(){a.preventDefault(),d()},c.pointerId=this.POINTER_ID,c.isPrimary=!0,c.pointerType=this.POINTER_TYPE,c},mousedown:function(a){if(!this.isEventSimulatedFromTouch(a)){var d=c.has(this.POINTER_ID);d&&this.cancel(a);var e=this.prepareEvent(a);c.set(this.POINTER_ID,a),b.down(e)}},mousemove:function(a){if(!this.isEventSimulatedFromTouch(a)){var c=this.prepareEvent(a);b.move(c)}},mouseup:function(a){if(!this.isEventSimulatedFromTouch(a)){var d=c.get(this.POINTER_ID);if(d&&d.button===a.button){var e=this.prepareEvent(a);b.up(e),this.cleanupMouse()}}},mouseover:function(a){if(!this.isEventSimulatedFromTouch(a)){var c=this.prepareEvent(a);b.enterOver(c)}},mouseout:function(a){if(!this.isEventSimulatedFromTouch(a)){var c=this.prepareEvent(a);b.leaveOut(c)}},cancel:function(a){var c=this.prepareEvent(a);b.cancel(c),this.cleanupMouse()},cleanupMouse:function(){c["delete"](this.POINTER_ID)}};a.mouseEvents=e}(window.PointerEventsPolyfill),function(a){var b,c=a.dispatcher,d=a.findTarget,e=a.targetFinding.allShadows.bind(a.targetFinding),f=c.pointermap,g=Array.prototype.map.call.bind(Array.prototype.map),h=2500,i=200,j="touch-action",k=!1,l={scrollType:new WeakMap,events:["touchstart","touchmove","touchend","touchcancel"],register:function(a){k?c.listen(a,this.events):b.enableOnSubtree(a)},unregister:function(a){k&&c.unlisten(a,this.events)},elementAdded:function(a){var b=a.getAttribute(j),d=this.touchActionToScrollType(b);d&&(this.scrollType.set(a,d),c.listen(a,this.events),e(a).forEach(function(a){this.scrollType.set(a,d),c.listen(a,this.events)},this))},elementRemoved:function(a){this.scrollType["delete"](a),c.unlisten(a,this.events),e(a).forEach(function(a){this.scrollType["delete"](a),c.unlisten(a,this.events)},this)},elementChanged:function(a,b){var c=a.getAttribute(j),d=this.touchActionToScrollType(c),f=this.touchActionToScrollType(b);d&&f?(this.scrollType.set(a,d),e(a).forEach(function(a){this.scrollType.set(a,d)},this)):f?this.elementRemoved(a):d&&this.elementAdded(a)},scrollTypes:{EMITTER:"none",XSCROLLER:"pan-x",YSCROLLER:"pan-y",SCROLLER:/^(?:pan-x pan-y)|(?:pan-y pan-x)|auto$/},touchActionToScrollType:function(a){var b=a,c=this.scrollTypes;return"none"===b?"none":b===c.XSCROLLER?"X":b===c.YSCROLLER?"Y":c.SCROLLER.exec(b)?"XY":void 0},POINTER_TYPE:"touch",firstTouch:null,isPrimaryTouch:function(a){return this.firstTouch===a.identifier},setPrimaryTouch:function(a){(0===f.pointers()||1===f.pointers()&&f.has(1))&&(this.firstTouch=a.identifier,this.firstXY={X:a.clientX,Y:a.clientY},this.scrolling=!1,this.cancelResetClickCount())},removePrimaryPointer:function(a){a.isPrimary&&(this.firstTouch=null,this.firstXY=null,this.resetClickCount())},clickCount:0,resetId:null,resetClickCount:function(){var a=function(){this.clickCount=0,this.resetId=null}.bind(this);this.resetId=setTimeout(a,i)},cancelResetClickCount:function(){this.resetId&&clearTimeout(this.resetId)},touchToPointer:function(a){var b=c.cloneEvent(a);return b.pointerId=a.identifier+2,b.target=d(b),b.bubbles=!0,b.cancelable=!0,b.detail=this.clickCount,b.button=0,b.buttons=1,b.width=a.webkitRadiusX||a.radiusX||0,b.height=a.webkitRadiusY||a.radiusY||0,b.pressure=a.webkitForce||a.force||.5,b.isPrimary=this.isPrimaryTouch(a),b.pointerType=this.POINTER_TYPE,b},processTouches:function(a,b){var c=a.changedTouches,d=g(c,this.touchToPointer,this);d.forEach(function(b){b.preventDefault=function(){this.scrolling=!1,this.firstXY=null,a.preventDefault()}},this),d.forEach(b,this)},shouldScroll:function(a){if(this.firstXY){var b,c=this.scrollType.get(a.currentTarget);if("none"===c)b=!1;else if("XY"===c)b=!0;else{var d=a.changedTouches[0],e=c,f="Y"===c?"X":"Y",g=Math.abs(d["client"+e]-this.firstXY[e]),h=Math.abs(d["client"+f]-this.firstXY[f]);b=g>=h}return this.firstXY=null,b}},findTouch:function(a,b){for(var c,d=0,e=a.length;e>d&&(c=a[d]);d++)if(c.identifier===b)return!0},vacuumTouches:function(a){var b=a.touches;if(f.pointers()>=b.length){var c=[];f.forEach(function(a,d){if(1!==d&&!this.findTouch(b,d-2)){var e=a.out;c.push(this.touchToPointer(e))}},this),c.forEach(this.cancelOut,this)}},touchstart:function(a){this.vacuumTouches(a),this.setPrimaryTouch(a.changedTouches[0]),this.dedupSynthMouse(a),this.scrolling||(this.clickCount++,this.processTouches(a,this.overDown))},overDown:function(a){f.set(a.pointerId,{target:a.target,out:a,outTarget:a.target}),c.over(a),c.enter(a),c.down(a)},touchmove:function(a){this.scrolling||(this.shouldScroll(a)?(this.scrolling=!0,this.touchcancel(a)):(a.preventDefault(),this.processTouches(a,this.moveOverOut)))},moveOverOut:function(a){var b=a,d=f.get(b.pointerId);if(d){var e=d.out,g=d.outTarget;c.move(b),e&&g!==b.target&&(e.relatedTarget=b.target,b.relatedTarget=g,e.target=g,b.target?(c.leaveOut(e),c.enterOver(b)):(b.target=g,b.relatedTarget=null,this.cancelOut(b))),d.out=b,d.outTarget=b.target}},touchend:function(a){this.dedupSynthMouse(a),this.processTouches(a,this.upOut)},upOut:function(a){this.scrolling||(c.up(a),c.out(a),c.leave(a)),this.cleanUpPointer(a)},touchcancel:function(a){this.processTouches(a,this.cancelOut)},cancelOut:function(a){c.cancel(a),c.out(a),c.leave(a),this.cleanUpPointer(a)},cleanUpPointer:function(a){f["delete"](a.pointerId),this.removePrimaryPointer(a)},dedupSynthMouse:function(b){var c=a.mouseEvents.lastTouches,d=b.changedTouches[0];if(this.isPrimaryTouch(d)){var e={x:d.clientX,y:d.clientY};c.push(e);var f=function(a,b){var c=a.indexOf(b);c>-1&&a.splice(c,1)}.bind(null,c,e);setTimeout(f,h)}}};k||(b=new a.Installer(l.elementAdded,l.elementRemoved,l.elementChanged,l)),a.touchEvents=l}(window.PointerEventsPolyfill),function(a){var b=a.dispatcher,c=b.pointermap,d=window.MSPointerEvent&&"number"==typeof window.MSPointerEvent.MSPOINTER_TYPE_MOUSE,e={events:["MSPointerDown","MSPointerMove","MSPointerUp","MSPointerOut","MSPointerOver","MSPointerCancel","MSGotPointerCapture","MSLostPointerCapture"],register:function(a){b.listen(a,this.events)},unregister:function(a){b.unlisten(a,this.events)},POINTER_TYPES:["","unavailable","touch","pen","mouse"],prepareEvent:function(a){var c=a;return d&&(c=b.cloneEvent(a),c.pointerType=this.POINTER_TYPES[a.pointerType]),c},cleanup:function(a){c["delete"](a)},MSPointerDown:function(a){c.set(a.pointerId,a);var d=this.prepareEvent(a);b.down(d)},MSPointerMove:function(a){var c=this.prepareEvent(a);b.move(c)},MSPointerUp:function(a){var c=this.prepareEvent(a);b.up(c),this.cleanup(a.pointerId)},MSPointerOut:function(a){var c=this.prepareEvent(a);b.leaveOut(c)},MSPointerOver:function(a){var c=this.prepareEvent(a);b.enterOver(c)},MSPointerCancel:function(a){var c=this.prepareEvent(a);b.cancel(c),this.cleanup(a.pointerId)},MSLostPointerCapture:function(a){var c=b.makeEvent("lostpointercapture",a);b.dispatchEvent(c)},MSGotPointerCapture:function(a){var c=b.makeEvent("gotpointercapture",a);b.dispatchEvent(c)}};a.msEvents=e}(window.PointerEventsPolyfill),function(a){var b=a.dispatcher;if(void 0===window.navigator.pointerEnabled){if(Object.defineProperty(window.navigator,"pointerEnabled",{value:!0,enumerable:!0}),window.navigator.msPointerEnabled){var c=window.navigator.msMaxTouchPoints;Object.defineProperty(window.navigator,"maxTouchPoints",{value:c,enumerable:!0}),b.registerSource("ms",a.msEvents)}else b.registerSource("mouse",a.mouseEvents),void 0!==window.ontouchstart&&b.registerSource("touch",a.touchEvents);b.register(document)}}(window.PointerEventsPolyfill),function(a){function b(a){if(!e.pointermap.has(a))throw new Error("InvalidPointerId")}var c,d,e=a.dispatcher,f=window.navigator;f.msPointerEnabled?(c=function(a){b(a),this.msSetPointerCapture(a)},d=function(a){b(a),this.msReleasePointerCapture(a)}):(c=function(a){b(a),e.setCapture(a,this)},d=function(a){b(a),e.releaseCapture(a,this)}),window.Element&&!Element.prototype.setPointerCapture&&Object.defineProperties(Element.prototype,{setPointerCapture:{value:c},releasePointerCapture:{value:d}})}(window.PointerEventsPolyfill),function(a){function b(a){u.push(a),t||(t=!0,q(d))}function c(a){return window.ShadowDOMPolyfill&&window.ShadowDOMPolyfill.wrapIfNeeded(a)||a}function d(){t=!1;var a=u;u=[],a.sort(function(a,b){return a.uid_-b.uid_});var b=!1;a.forEach(function(a){var c=a.takeRecords();e(a),c.length&&(a.callback_(c,a),b=!0)}),b&&d()}function e(a){a.nodes_.forEach(function(b){var c=p.get(b);c&&c.forEach(function(b){b.observer===a&&b.removeTransientObservers()})})}function f(a,b){for(var c=a;c;c=c.parentNode){var d=p.get(c);if(d)for(var e=0;e<d.length;e++){var f=d[e],g=f.options;if(c===a||g.subtree){var h=b(g);h&&f.enqueue(h)}}}}function g(a){this.callback_=a,this.nodes_=[],this.records_=[],this.uid_=++v}function h(a,b){this.type=a,this.target=b,this.addedNodes=[],this.removedNodes=[],this.previousSibling=null,this.nextSibling=null,this.attributeName=null,this.attributeNamespace=null,this.oldValue=null}function i(a){var b=new h(a.type,a.target);return b.addedNodes=a.addedNodes.slice(),b.removedNodes=a.removedNodes.slice(),b.previousSibling=a.previousSibling,b.nextSibling=a.nextSibling,b.attributeName=a.attributeName,b.attributeNamespace=a.attributeNamespace,b.oldValue=a.oldValue,b}function j(a,b){return w=new h(a,b)}function k(a){return x?x:(x=i(w),x.oldValue=a,x)}function l(){w=x=void 0}function m(a){return a===x||a===w}function n(a,b){return a===b?a:x&&m(a)?x:null}function o(a,b,c){this.observer=a,this.target=b,this.options=c,this.transientObservedNodes=[]}var p=new WeakMap,q=window.msSetImmediate;if(!q){var r=[],s=String(Math.random());window.addEventListener("message",function(a){if(a.data===s){var b=r;r=[],b.forEach(function(a){a()})}}),q=function(a){r.push(a),window.postMessage(s,"*")}}var t=!1,u=[],v=0;g.prototype={observe:function(a,b){if(a=c(a),!b.childList&&!b.attributes&&!b.characterData||b.attributeOldValue&&!b.attributes||b.attributeFilter&&b.attributeFilter.length&&!b.attributes||b.characterDataOldValue&&!b.characterData)throw new SyntaxError;var d=p.get(a);d||p.set(a,d=[]);for(var e,f=0;f<d.length;f++)if(d[f].observer===this){e=d[f],e.removeListeners(),e.options=b;break}e||(e=new o(this,a,b),d.push(e),this.nodes_.push(a)),e.addListeners()},disconnect:function(){this.nodes_.forEach(function(a){for(var b=p.get(a),c=0;c<b.length;c++){var d=b[c];if(d.observer===this){d.removeListeners(),b.splice(c,1);break}}},this),this.records_=[]},takeRecords:function(){var a=this.records_;return this.records_=[],a}};var w,x;o.prototype={enqueue:function(a){var c=this.observer.records_,d=c.length;if(c.length>0){var e=c[d-1],f=n(e,a);if(f)return void(c[d-1]=f)}else b(this.observer);c[d]=a},addListeners:function(){this.addListeners_(this.target)},addListeners_:function(a){var b=this.options;b.attributes&&a.addEventListener("DOMAttrModified",this,!0),b.characterData&&a.addEventListener("DOMCharacterDataModified",this,!0),b.childList&&a.addEventListener("DOMNodeInserted",this,!0),(b.childList||b.subtree)&&a.addEventListener("DOMNodeRemoved",this,!0)},removeListeners:function(){this.removeListeners_(this.target)},removeListeners_:function(a){var b=this.options;b.attributes&&a.removeEventListener("DOMAttrModified",this,!0),b.characterData&&a.removeEventListener("DOMCharacterDataModified",this,!0),b.childList&&a.removeEventListener("DOMNodeInserted",this,!0),(b.childList||b.subtree)&&a.removeEventListener("DOMNodeRemoved",this,!0)},addTransientObserver:function(a){if(a!==this.target){this.addListeners_(a),this.transientObservedNodes.push(a);var b=p.get(a);b||p.set(a,b=[]),b.push(this)}},removeTransientObservers:function(){var a=this.transientObservedNodes;this.transientObservedNodes=[],a.forEach(function(a){this.removeListeners_(a);for(var b=p.get(a),c=0;c<b.length;c++)if(b[c]===this){b.splice(c,1);break}},this)},handleEvent:function(a){switch(a.stopImmediatePropagation(),a.type){case"DOMAttrModified":var b=a.attrName,c=a.relatedNode.namespaceURI,d=a.target,e=new j("attributes",d);e.attributeName=b,e.attributeNamespace=c;var g=a.attrChange===MutationEvent.ADDITION?null:a.prevValue;f(d,function(a){return!a.attributes||a.attributeFilter&&a.attributeFilter.length&&-1===a.attributeFilter.indexOf(b)&&-1===a.attributeFilter.indexOf(c)?void 0:a.attributeOldValue?k(g):e});break;case"DOMCharacterDataModified":var d=a.target,e=j("characterData",d),g=a.prevValue;f(d,function(a){return a.characterData?a.characterDataOldValue?k(g):e:void 0});break;case"DOMNodeRemoved":this.addTransientObserver(a.target);case"DOMNodeInserted":var h,i,d=a.relatedNode,m=a.target;"DOMNodeInserted"===a.type?(h=[m],i=[]):(h=[],i=[m]);var n=m.previousSibling,o=m.nextSibling,e=j("childList",d);e.addedNodes=h,e.removedNodes=i,e.previousSibling=n,e.nextSibling=o,f(d,function(a){return a.childList?e:void 0})}l()}},a.JsMutationObserver=g,a.MutationObserver||(a.MutationObserver=g)}(this),window.CustomElements=window.CustomElements||{flags:{}},function(a){function b(a,c,d){var e=a.firstElementChild;if(!e)for(e=a.firstChild;e&&e.nodeType!==Node.ELEMENT_NODE;)e=e.nextSibling;for(;e;)c(e,d)!==!0&&b(e,c,d),e=e.nextElementSibling;return null}function c(a,b){for(var c=a.shadowRoot;c;)d(c,b),c=c.olderShadowRoot}function d(a,d){b(a,function(a){return d(a)?!0:void c(a,d)}),c(a,d)}function e(a){return h(a)?(i(a),!0):void l(a)}function f(a){d(a,function(a){return e(a)?!0:void 0})}function g(a){return e(a)||f(a)}function h(b){if(!b.__upgraded__&&b.nodeType===Node.ELEMENT_NODE){var c=b.getAttribute("is")||b.localName,d=a.registry[c];if(d)return A.dom&&console.group("upgrade:",b.localName),a.upgrade(b),A.dom&&console.groupEnd(),!0}}function i(a){l(a),r(a)&&d(a,function(a){l(a)})}function j(a){if(E.push(a),!D){D=!0;var b=window.Platform&&window.Platform.endOfMicrotask||setTimeout;b(k)}}function k(){D=!1;for(var a,b=E,c=0,d=b.length;d>c&&(a=b[c]);c++)a();E=[]}function l(a){C?j(function(){m(a)}):m(a)}function m(a){(a.attachedCallback||a.detachedCallback||a.__upgraded__&&A.dom)&&(A.dom&&console.group("inserted:",a.localName),r(a)&&(a.__inserted=(a.__inserted||0)+1,a.__inserted<1&&(a.__inserted=1),a.__inserted>1?A.dom&&console.warn("inserted:",a.localName,"insert/remove count:",a.__inserted):a.attachedCallback&&(A.dom&&console.log("inserted:",a.localName),a.attachedCallback())),A.dom&&console.groupEnd())}function n(a){o(a),d(a,function(a){o(a)})}function o(a){C?j(function(){p(a)}):p(a)}function p(a){(a.attachedCallback||a.detachedCallback||a.__upgraded__&&A.dom)&&(A.dom&&console.group("removed:",a.localName),r(a)||(a.__inserted=(a.__inserted||0)-1,a.__inserted>0&&(a.__inserted=0),a.__inserted<0?A.dom&&console.warn("removed:",a.localName,"insert/remove count:",a.__inserted):a.detachedCallback&&a.detachedCallback()),A.dom&&console.groupEnd())}function q(a){return window.ShadowDOMPolyfill?ShadowDOMPolyfill.wrapIfNeeded(a):a}function r(a){for(var b=a,c=q(document);b;){if(b==c)return!0;b=b.parentNode||b.host}}function s(a){if(a.shadowRoot&&!a.shadowRoot.__watched){A.dom&&console.log("watching shadow-root for: ",a.localName);for(var b=a.shadowRoot;b;)t(b),b=b.olderShadowRoot}}function t(a){a.__watched||(w(a),a.__watched=!0)}function u(a){if(A.dom){var b=a[0];if(b&&"childList"===b.type&&b.addedNodes&&b.addedNodes){for(var c=b.addedNodes[0];c&&c!==document&&!c.host;)c=c.parentNode;var d=c&&(c.URL||c._URL||c.host&&c.host.localName)||"";d=d.split("/?").shift().split("/").pop()}console.group("mutations (%d) [%s]",a.length,d||"")}a.forEach(function(a){"childList"===a.type&&(G(a.addedNodes,function(a){a.localName&&g(a)}),G(a.removedNodes,function(a){a.localName&&n(a)}))}),A.dom&&console.groupEnd()}function v(){u(F.takeRecords()),k()}function w(a){F.observe(a,{childList:!0,subtree:!0})}function x(a){w(a)}function y(a){A.dom&&console.group("upgradeDocument: ",a.baseURI.split("/").pop()),g(a),A.dom&&console.groupEnd()}function z(a){a=q(a);for(var b,c=a.querySelectorAll("link[rel="+B+"]"),d=0,e=c.length;e>d&&(b=c[d]);d++)b.import&&b.import.__parsed&&z(b.import);y(a)}var A=window.logFlags||{},B=window.HTMLImports?HTMLImports.IMPORT_LINK_TYPE:"none",C=!window.MutationObserver||window.MutationObserver===window.JsMutationObserver;a.hasPolyfillMutations=C;var D=!1,E=[],F=new MutationObserver(u),G=Array.prototype.forEach.call.bind(Array.prototype.forEach);a.IMPORT_LINK_TYPE=B,a.watchShadow=s,a.upgradeDocumentTree=z,a.upgradeAll=g,a.upgradeSubtree=f,a.insertedNode=i,a.observeDocument=x,a.upgradeDocument=y,a.takeRecords=v}(window.CustomElements),function(a){function b(b,g){var h=g||{};if(!b)throw new Error("document.registerElement: first argument `name` must not be empty");if(b.indexOf("-")<0)throw new Error("document.registerElement: first argument ('name') must contain a dash ('-'). Argument provided was '"+String(b)+"'.");if(c(b))throw new Error("Failed to execute 'registerElement' on 'Document': Registration failed for type '"+String(b)+"'. The type name is invalid.");if(n(b))throw new Error("DuplicateDefinitionError: a type with name '"+String(b)+"' is already registered");if(!h.prototype)throw new Error("Options missing required prototype property");return h.__name=b.toLowerCase(),h.lifecycle=h.lifecycle||{},h.ancestry=d(h.extends),e(h),f(h),l(h.prototype),o(h.__name,h),h.ctor=p(h),h.ctor.prototype=h.prototype,h.prototype.constructor=h.ctor,a.ready&&a.upgradeDocumentTree(document),h.ctor}function c(a){for(var b=0;b<y.length;b++)if(a===y[b])return!0}function d(a){var b=n(a);return b?d(b.extends).concat([b]):[]}function e(a){for(var b,c=a.extends,d=0;b=a.ancestry[d];d++)c=b.is&&b.tag;a.tag=c||a.__name,c&&(a.is=a.__name)}function f(a){if(!Object.__proto__){var b=HTMLElement.prototype;if(a.is){var c=document.createElement(a.tag);b=Object.getPrototypeOf(c)}for(var d,e=a.prototype;e&&e!==b;){var d=Object.getPrototypeOf(e);e.__proto__=d,e=d}}a.native=b}function g(a){return h(B(a.tag),a)}function h(b,c){return c.is&&b.setAttribute("is",c.is),b.removeAttribute("unresolved"),i(b,c),b.__upgraded__=!0,k(b),a.insertedNode(b),a.upgradeSubtree(b),b}function i(a,b){Object.__proto__?a.__proto__=b.prototype:(j(a,b.prototype,b.native),a.__proto__=b.prototype)}function j(a,b,c){for(var d={},e=b;e!==c&&e!==HTMLElement.prototype;){for(var f,g=Object.getOwnPropertyNames(e),h=0;f=g[h];h++)d[f]||(Object.defineProperty(a,f,Object.getOwnPropertyDescriptor(e,f)),d[f]=1);e=Object.getPrototypeOf(e)}}function k(a){a.createdCallback&&a.createdCallback()}function l(a){if(!a.setAttribute._polyfilled){var b=a.setAttribute;a.setAttribute=function(a,c){m.call(this,a,c,b)};var c=a.removeAttribute;a.removeAttribute=function(a){m.call(this,a,null,c)},a.setAttribute._polyfilled=!0}}function m(a,b,c){var d=this.getAttribute(a);c.apply(this,arguments);var e=this.getAttribute(a);this.attributeChangedCallback&&e!==d&&this.attributeChangedCallback(a,d,e)}function n(a){return a?z[a.toLowerCase()]:void 0}function o(a,b){z[a]=b}function p(a){return function(){return g(a)}}function q(a,b,c){return a===A?r(b,c):C(a,b)}function r(a,b){var c=n(b||a);if(c){if(a==c.tag&&b==c.is)return new c.ctor;if(!b&&!c.is)return new c.ctor}if(b){var d=r(a);return d.setAttribute("is",b),d}var d=B(a);return a.indexOf("-")>=0&&i(d,HTMLElement),d}function s(a){if(!a.__upgraded__&&a.nodeType===Node.ELEMENT_NODE){var b=a.getAttribute("is"),c=n(b||a.localName);if(c){if(b&&c.tag==a.localName)return h(a,c);
+if(!b&&!c.extends)return h(a,c)}}}function t(b){var c=D.call(this,b);return a.upgradeAll(c),c}a||(a=window.CustomElements={flags:{}});var u=a.flags,v=Boolean(document.registerElement),w=!u.register&&v&&!window.ShadowDOMPolyfill;if(w){var x=function(){};a.registry={},a.upgradeElement=x,a.watchShadow=x,a.upgrade=x,a.upgradeAll=x,a.upgradeSubtree=x,a.observeDocument=x,a.upgradeDocument=x,a.upgradeDocumentTree=x,a.takeRecords=x,a.reservedTagList=[]}else{var y=["annotation-xml","color-profile","font-face","font-face-src","font-face-uri","font-face-format","font-face-name","missing-glyph"],z={},A="http://www.w3.org/1999/xhtml",B=document.createElement.bind(document),C=document.createElementNS.bind(document),D=Node.prototype.cloneNode;document.registerElement=b,document.createElement=r,document.createElementNS=q,Node.prototype.cloneNode=t,a.registry=z,a.upgrade=s}var E;E=Object.__proto__||w?function(a,b){return a instanceof b}:function(a,b){for(var c=a;c;){if(c===b.prototype)return!0;c=c.__proto__}return!1},a.instanceof=E,a.reservedTagList=y,document.register=document.registerElement,a.hasNative=v,a.useNative=w}(window.CustomElements),function(a){function b(a){return"link"===a.localName&&a.getAttribute("rel")===c}var c=a.IMPORT_LINK_TYPE,d={selectors:["link[rel="+c+"]"],map:{link:"parseLink"},parse:function(a){if(!a.__parsed){a.__parsed=!0;var b=a.querySelectorAll(d.selectors);e(b,function(a){d[d.map[a.localName]](a)}),CustomElements.upgradeDocument(a),CustomElements.observeDocument(a)}},parseLink:function(a){b(a)&&this.parseImport(a)},parseImport:function(a){a.import&&d.parse(a.import)}},e=Array.prototype.forEach.call.bind(Array.prototype.forEach);a.parser=d,a.IMPORT_LINK_TYPE=c}(window.CustomElements),function(a){function b(){CustomElements.parser.parse(document),CustomElements.upgradeDocument(document);var a=window.Platform&&Platform.endOfMicrotask?Platform.endOfMicrotask:setTimeout;a(function(){CustomElements.ready=!0,CustomElements.readyTime=Date.now(),window.HTMLImports&&(CustomElements.elapsed=CustomElements.readyTime-HTMLImports.readyTime),document.dispatchEvent(new CustomEvent("WebComponentsReady",{bubbles:!0})),window.HTMLImports&&(HTMLImports.__importsParsingHook=function(a){CustomElements.parser.parse(a.import)})})}if("function"!=typeof window.CustomEvent&&(window.CustomEvent=function(a){var b=document.createEvent("HTMLEvents");return b.initEvent(a,!0,!0),b}),"complete"===document.readyState||a.flags.eager)b();else if("interactive"!==document.readyState||window.attachEvent||window.HTMLImports&&!window.HTMLImports.ready){var c=window.HTMLImports&&!HTMLImports.ready?"HTMLImportsLoaded":"DOMContentLoaded";window.addEventListener(c,b)}else b()}(window.CustomElements),window.HTMLImports=window.HTMLImports||{flags:{}},function(a){var b=(a.path,a.xhr),c=a.flags,d=function(a,b){this.cache={},this.onload=a,this.oncomplete=b,this.inflight=0,this.pending={}};d.prototype={addNodes:function(a){this.inflight+=a.length;for(var b,c=0,d=a.length;d>c&&(b=a[c]);c++)this.require(b);this.checkDone()},addNode:function(a){this.inflight++,this.require(a),this.checkDone()},require:function(a){var b=a.src||a.href;a.__nodeUrl=b,this.dedupe(b,a)||this.fetch(b,a)},dedupe:function(a,b){if(this.pending[a])return this.pending[a].push(b),!0;return this.cache[a]?(this.onload(a,b,this.cache[a]),this.tail(),!0):(this.pending[a]=[b],!1)},fetch:function(a,d){if(c.load&&console.log("fetch",a,d),a.match(/^data:/)){var e=a.split(","),f=e[0],g=e[1];g=f.indexOf(";base64")>-1?atob(g):decodeURIComponent(g),setTimeout(function(){this.receive(a,d,null,g)}.bind(this),0)}else{var h=function(b,c){this.receive(a,d,b,c)}.bind(this);b.load(a,h)}},receive:function(a,b,c,d){this.cache[a]=d;for(var e,f=this.pending[a],g=0,h=f.length;h>g&&(e=f[g]);g++)this.onload(a,e,d),this.tail();this.pending[a]=null},tail:function(){--this.inflight,this.checkDone()},checkDone:function(){this.inflight||this.oncomplete()}},b=b||{async:!0,ok:function(a){return a.status>=200&&a.status<300||304===a.status||0===a.status},load:function(c,d,e){var f=new XMLHttpRequest;return(a.flags.debug||a.flags.bust)&&(c+="?"+Math.random()),f.open("GET",c,b.async),f.addEventListener("readystatechange",function(){4===f.readyState&&d.call(e,!b.ok(f)&&f,f.response||f.responseText,c)}),f.send(),f},loadDocument:function(a,b,c){this.load(a,b,c).responseType="document"}},a.xhr=b,a.Loader=d}(window.HTMLImports),function(a){function b(a){return"link"===a.localName&&a.rel===g}function c(a){var b,c=d(a);try{b=btoa(c)}catch(e){b=btoa(unescape(encodeURIComponent(c))),console.warn("Script contained non-latin characters that were forced to latin. Some characters may be wrong.",a)}return"data:text/javascript;base64,"+b}function d(a){return a.textContent+e(a)}function e(a){var b=a.__nodeUrl;if(!b){b=a.ownerDocument.baseURI;var c="["+Math.floor(1e3*(Math.random()+1))+"]",d=a.textContent.match(/Polymer\(['"]([^'"]*)/);c=d&&d[1]||c,b+="/"+c+".js"}return"\n//# sourceURL="+b+"\n"}function f(a){var b=a.ownerDocument.createElement("style");return b.textContent=a.textContent,n.resolveUrlsInStyle(b),b}var g="import",h=a.flags,i=/Trident/.test(navigator.userAgent),j=window.ShadowDOMPolyfill?window.ShadowDOMPolyfill.wrapIfNeeded(document):document,k={documentSelectors:"link[rel="+g+"]",importsSelectors:["link[rel="+g+"]","link[rel=stylesheet]","style","script:not([type])",'script[type="text/javascript"]'].join(","),map:{link:"parseLink",script:"parseScript",style:"parseStyle"},parseNext:function(){var a=this.nextToParse();a&&this.parse(a)},parse:function(a){if(this.isParsed(a))return void(h.parse&&console.log("[%s] is already parsed",a.localName));var b=this[this.map[a.localName]];b&&(this.markParsing(a),b.call(this,a))},markParsing:function(a){h.parse&&console.log("parsing",a),this.parsingElement=a},markParsingComplete:function(a){a.__importParsed=!0,a.__importElement&&(a.__importElement.__importParsed=!0),this.parsingElement=null,h.parse&&console.log("completed",a),this.parseNext()},parseImport:function(a){if(a.import.__importParsed=!0,HTMLImports.__importsParsingHook&&HTMLImports.__importsParsingHook(a),a.dispatchEvent(a.__resource?new CustomEvent("load",{bubbles:!1}):new CustomEvent("error",{bubbles:!1})),a.__pending)for(var b;a.__pending.length;)b=a.__pending.shift(),b&&b({target:a});this.markParsingComplete(a)},parseLink:function(a){b(a)?this.parseImport(a):(a.href=a.href,this.parseGeneric(a))},parseStyle:function(a){var b=a;a=f(a),a.__importElement=b,this.parseGeneric(a)},parseGeneric:function(a){this.trackElement(a),document.head.appendChild(a)},trackElement:function(a,b){var c=this,d=function(d){b&&b(d),c.markParsingComplete(a)};if(a.addEventListener("load",d),a.addEventListener("error",d),i&&"style"===a.localName){var e=!1;if(-1==a.textContent.indexOf("@import"))e=!0;else if(a.sheet){e=!0;for(var f,g=a.sheet.cssRules,h=g?g.length:0,j=0;h>j&&(f=g[j]);j++)f.type===CSSRule.IMPORT_RULE&&(e=e&&Boolean(f.styleSheet))}e&&a.dispatchEvent(new CustomEvent("load",{bubbles:!1}))}},parseScript:function(b){var d=document.createElement("script");d.__importElement=b,d.src=b.src?b.src:c(b),a.currentScript=b,this.trackElement(d,function(){d.parentNode.removeChild(d),a.currentScript=null}),document.head.appendChild(d)},nextToParse:function(){return!this.parsingElement&&this.nextToParseInDoc(j)},nextToParseInDoc:function(a,c){for(var d,e=a.querySelectorAll(this.parseSelectorsForNode(a)),f=0,g=e.length;g>f&&(d=e[f]);f++)if(!this.isParsed(d))return this.hasResource(d)?b(d)?this.nextToParseInDoc(d.import,d):d:void 0;return c},parseSelectorsForNode:function(a){var b=a.ownerDocument||a;return b===j?this.documentSelectors:this.importsSelectors},isParsed:function(a){return a.__importParsed},hasResource:function(a){return b(a)&&!a.import?!1:!0}},l=/(url\()([^)]*)(\))/g,m=/(@import[\s]+(?!url\())([^;]*)(;)/g,n={resolveUrlsInStyle:function(a){var b=a.ownerDocument,c=b.createElement("a");return a.textContent=this.resolveUrlsInCssText(a.textContent,c),a},resolveUrlsInCssText:function(a,b){var c=this.replaceUrls(a,b,l);return c=this.replaceUrls(c,b,m)},replaceUrls:function(a,b,c){return a.replace(c,function(a,c,d,e){var f=d.replace(/["']/g,"");return b.href=f,f=b.href,c+"'"+f+"'"+e})}};a.parser=k,a.path=n,a.isIE=i}(HTMLImports),function(a){function b(a){return c(a,m)}function c(a,b){return"link"===a.localName&&a.getAttribute("rel")===b}function d(a,b){var c=a;c instanceof Document||(c=document.implementation.createHTMLDocument(m)),c._URL=b;var d=c.createElement("base");d.setAttribute("href",b),c.baseURI||(c.baseURI=b);var e=c.createElement("meta");return e.setAttribute("charset","utf-8"),c.head.appendChild(e),c.head.appendChild(d),a instanceof Document||(c.body.innerHTML=a),window.HTMLTemplateElement&&HTMLTemplateElement.bootstrap&&HTMLTemplateElement.bootstrap(c),c}function e(a,b){b=b||n,g(function(){h(a,b)},b)}function f(a){return"complete"===a.readyState||a.readyState===u}function g(a,b){if(f(b))a&&a();else{var c=function(){("complete"===b.readyState||b.readyState===u)&&(b.removeEventListener(v,c),g(a,b))};b.addEventListener(v,c)}}function h(a,b){function c(){f==g&&requestAnimationFrame(a)}function d(){f++,c()}var e=b.querySelectorAll("link[rel=import]"),f=0,g=e.length;if(g)for(var h,j=0;g>j&&(h=e[j]);j++)i(h)?d.call(h):(h.addEventListener("load",d),h.addEventListener("error",d));else c()}function i(a){return k?a.import&&"loading"!==a.import.readyState:a.__importParsed}var j="import"in document.createElement("link"),k=j,l=a.flags,m="import",n=window.ShadowDOMPolyfill?ShadowDOMPolyfill.wrapIfNeeded(document):document;if(k)var o={};else var p=(a.xhr,a.Loader),q=a.parser,o={documents:{},documentPreloadSelectors:"link[rel="+m+"]",importsPreloadSelectors:["link[rel="+m+"]"].join(","),loadNode:function(a){r.addNode(a)},loadSubtree:function(a){var b=this.marshalNodes(a);r.addNodes(b)},marshalNodes:function(a){return a.querySelectorAll(this.loadSelectorsForNode(a))},loadSelectorsForNode:function(a){var b=a.ownerDocument||a;return b===n?this.documentPreloadSelectors:this.importsPreloadSelectors},loaded:function(a,c,e){if(l.load&&console.log("loaded",a,c),c.__resource=e,b(c)){var f=this.documents[a];f||(f=d(e,a),f.__importLink=c,this.bootDocument(f),this.documents[a]=f),c.import=f}q.parseNext()},bootDocument:function(a){this.loadSubtree(a),this.observe(a),q.parseNext()},loadedAll:function(){q.parseNext()}},r=new p(o.loaded.bind(o),o.loadedAll.bind(o));var s={get:function(){return HTMLImports.currentScript||document.currentScript},configurable:!0};if(Object.defineProperty(document,"_currentScript",s),Object.defineProperty(n,"_currentScript",s),!document.baseURI){var t={get:function(){return window.location.href},configurable:!0};Object.defineProperty(document,"baseURI",t),Object.defineProperty(n,"baseURI",t)}var u=HTMLImports.isIE?"complete":"interactive",v="readystatechange";a.hasNative=j,a.useNative=k,a.importer=o,a.whenImportsReady=e,a.IMPORT_LINK_TYPE=m,a.isImportLoaded=i,a.importLoader=r}(window.HTMLImports),function(a){function b(a){for(var b,d=0,e=a.length;e>d&&(b=a[d]);d++)"childList"===b.type&&b.addedNodes.length&&c(b.addedNodes)}function c(a){for(var b,e=0,g=a.length;g>e&&(b=a[e]);e++)d(b)&&f.loadNode(b),b.children&&b.children.length&&c(b.children)}function d(a){return 1===a.nodeType&&g.call(a,f.loadSelectorsForNode(a))}function e(a){h.observe(a,{childList:!0,subtree:!0})}var f=(a.IMPORT_LINK_TYPE,a.importer),g=HTMLElement.prototype.matches||HTMLElement.prototype.matchesSelector||HTMLElement.prototype.webkitMatchesSelector||HTMLElement.prototype.mozMatchesSelector||HTMLElement.prototype.msMatchesSelector,h=new MutationObserver(b);a.observe=e,f.observe=e}(HTMLImports),function(){function a(){HTMLImports.importer.bootDocument(b)}"function"!=typeof window.CustomEvent&&(window.CustomEvent=function(a,b){var c=document.createEvent("HTMLEvents");return c.initEvent(a,b.bubbles===!1?!1:!0,b.cancelable===!1?!1:!0,b.detail),c});var b=window.ShadowDOMPolyfill?window.ShadowDOMPolyfill.wrapIfNeeded(document):document;HTMLImports.whenImportsReady(function(){HTMLImports.ready=!0,HTMLImports.readyTime=(new Date).getTime(),b.dispatchEvent(new CustomEvent("HTMLImportsLoaded",{bubbles:!0}))}),HTMLImports.useNative||("complete"===document.readyState||"interactive"===document.readyState&&!window.attachEvent?a():document.addEventListener("DOMContentLoaded",a))}();
\ No newline at end of file
diff --git a/experimental/webtry/res/js/webtry.js b/experimental/webtry/res/js/webtry.js
index f0a5bb5327..b1fe3dd806 100644
--- a/experimental/webtry/res/js/webtry.js
+++ b/experimental/webtry/res/js/webtry.js
@@ -3,157 +3,6 @@
  * the results.
  */
 
-/**
- * A polyfill for HTML Templates.
- *
- * This just adds in the content attribute, it doesn't stop scripts
- * from running nor does it stop other side-effects.
- */
-(function polyfillTemplates() {
-  if('content' in document.createElement('template')) {
-    return false;
-  }
-
-  var templates = document.getElementsByTagName('template');
-  for (var i=0; i<templates.length; i++) {
-    var content = document.createDocumentFragment();
-    while (templates[i].firstChild) {
-     content.appendChild(templates[i].firstChild);
-    }
-    templates[i].content = content;
-  }
-})();
-
-/**
- * Enable zooming for any images with a class of 'zoom'.
- */
-(function () {
-  var PIXELS       = 20; // The number of pixels in width and height in a zoom.
-  var clientX      = 0;
-  var clientY      = 0;
-  var lastClientX  = 0;
-  var lastClientY  = 0;
-  var ctx          = null; // The 2D canvas context of the zoom.
-  var currentImage = null; // The img node we are zooming for, otherwise null.
-  var hex          = document.getElementById('zoomHex');
-  var canvasCopy   = null;
-
-  function zoomMove(e) {
-    clientX = e.clientX;
-    clientY = e.clientY;
-  }
-
-  function zoomMouseDown(e) {
-    e.preventDefault();
-    // Only do zooming on the primary mouse button.
-    if (e.button != 0) {
-      return
-    }
-    currentImage = e.target;
-    clientX = e.clientX;
-    clientY = e.clientY;
-    lastClientX = clientX-1;
-    lastClientY = clientY-1;
-    document.body.style.cursor = 'crosshair';
-    canvas = document.createElement('canvas');
-    canvas.width = 1024;
-    canvas.height = 1024;
-    canvas.classList.add('zoomCanvas');
-    ctx = canvas.getContext('2d');
-    ctx.imageSmoothingEnabled = false;
-    this.parentNode.insertBefore(canvas, this);
-
-    // Copy the image over to a canvas so we can read RGBA values for each point.
-    if (hex) {
-      canvasCopy = document.createElement('canvas');
-      canvasCopy.width = currentImage.width;
-      canvasCopy.height = currentImage.height;
-      canvasCopy.id = 'zoomCopy';
-      canvasCopy.getContext('2d').drawImage(currentImage, 0, 0, currentImage.width, currentImage.height);
-      this.parentNode.insertBefore(canvasCopy, this);
-    }
-
-    document.body.addEventListener('pointermove',   zoomMove,     true);
-    document.body.addEventListener('pointerup',     zoomFinished);
-    document.body.addEventListener('pointerleave',  zoomFinished);
-
-    // Kick off the drawing.
-    setTimeout(drawZoom, 1);
-  }
-
-  function hexify(i) {
-    var s = i.toString(16).toUpperCase();
-    // Pad out to two hex digits if necessary.
-    if (s.length < 2) {
-      s = '0' + s;
-    }
-    return s;
-  }
-
-  function drawZoom() {
-    if (currentImage) {
-      // Only draw if the mouse has moved from the last time we drew.
-      if (lastClientX != clientX || lastClientY != clientY) {
-        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-        var x = clientX - currentImage.x;
-        var y = clientY - currentImage.y;
-        var dx = Math.floor(ctx.canvas.width/PIXELS);
-        var dy = Math.floor(ctx.canvas.height/PIXELS);
-
-        ctx.lineWidth = 1;
-        ctx.strokeStyle = '#000';
-
-        // Draw out each pixel as a rect on the target canvas, as this works around
-        // FireFox doing a blur as it copies from one canvas to another.
-        var colors = canvasCopy.getContext('2d').getImageData(x, y, PIXELS, PIXELS).data;
-        for (var i=0; i<PIXELS; i++) {
-          for (var j=0; j<PIXELS; j++) {
-            var offset = (j*PIXELS+i)*4; // Offset into the colors array.
-            ctx.fillStyle = 'rgba(' + colors[offset] + ', ' + colors[offset+1] + ', ' + colors[offset+2] + ', ' + colors[offset+3]/255.0 + ')';
-            ctx.fillRect(i*dx, j*dy, dx-1, dy-1);
-            // Box and label one selected pixel with its rgba values.
-            if (hex && i==PIXELS/2 && j == PIXELS/2) {
-              ctx.strokeRect(i*dx, j*dy, dx-1, dy-1);
-              hex.textContent = 'rgba('
-                + colors[offset] + ', '
-                + colors[offset+1] + ', '
-                + colors[offset+2] + ', '
-                + colors[offset+3] + ') '
-                + hexify(colors[offset])
-                + hexify(colors[offset+1])
-                + hexify(colors[offset+2])
-                + hexify(colors[offset+3]);
-            }
-          }
-        }
-        lastClientX = clientX;
-        lastClientY = clientY;
-      }
-      setTimeout(drawZoom, 1000/30);
-    }
-  }
-
-  function zoomFinished() {
-    currentImage = null;
-    if (hex) {
-      hex.textContent = '';
-    }
-    document.body.style.cursor = 'default';
-    ctx.canvas.parentNode.removeChild(ctx.canvas);
-    canvasCopy.parentNode.removeChild(canvasCopy);
-    document.body.removeEventListener('pointermove',  zoomMove,     true);
-    document.body.removeEventListener('pointerup',    zoomFinished);
-    document.body.removeEventListener('pointerleave', zoomFinished);
-  }
-
-  this.addEventListener('DOMContentLoaded', function() {
-    var zoomables = document.body.querySelectorAll('.zoom');
-    for (var i=0; i<zoomables.length; i++) {
-      zoomables[i].addEventListener('pointerdown', zoomMouseDown);
-    }
-  });
-})();
-
 
 /**
  * All the functionality is wrapped up in this anonymous closure, but we need
@@ -167,180 +16,188 @@
  * that are included in this workspace. That variable is used to
  * populate the history list.
  */
-(function(workspaceName) {
-    var run = document.getElementById('run');
-    var permalink = document.getElementById('permalink');
-    var embed = document.getElementById('embed');
-    var embedButton = document.getElementById('embedButton');
-    var code = document.getElementById('code');
-    var output = document.getElementById('output');
-    var stdout = document.getElementById('stdout');
-    var img = document.getElementById('img');
-    var tryHistory = document.getElementById('tryHistory');
-    var parser = new DOMParser();
-    var tryTemplate = document.getElementById('tryTemplate');
+(function() {
+    function onLoad() {
+      var run = document.getElementById('run');
+      var permalink = document.getElementById('permalink');
+      var embed = document.getElementById('embed');
+      var embedButton = document.getElementById('embedButton');
+      var code = document.getElementById('code');
+      var output = document.getElementById('output');
+      var stdout = document.getElementById('stdout');
+      var img = document.getElementById('img');
+      var tryHistory = document.getElementById('tryHistory');
+      var parser = new DOMParser();
+      var tryTemplate = document.getElementById('tryTemplate');
+
+      var editor = CodeMirror.fromTextArea(code, {
+        theme: "default",
+        lineNumbers: true,
+        matchBrackets: true,
+        mode: "text/x-c++src",
+        indentUnit: 4,
+      });
+
+      // Match the initial textarea size.
+      editor.setSize(editor.defaultCharWidth() * code.cols,
+                     editor.defaultTextHeight() * code.rows);
+
+      function beginWait() {
+        document.body.classList.add('waiting');
+        run.disabled = true;
+      }
 
-    var editor = CodeMirror.fromTextArea(code, {
-      theme: "default",
-      lineNumbers: true,
-      matchBrackets: true,
-      mode: "text/x-c++src",
-      indentUnit: 4,
-    });
 
-    // Match the initial textarea size.
-    editor.setSize(editor.defaultCharWidth() * code.cols,
-                   editor.defaultTextHeight() * code.rows);
+      function endWait() {
+        document.body.classList.remove('waiting');
+        run.disabled = false;
+      }
 
-    function beginWait() {
-      document.body.classList.add('waiting');
-      run.disabled = true;
-    }
 
+      /**
+       * Callback when there's an XHR error.
+       * @param e The callback event.
+       */
+      function xhrError(e) {
+        endWait();
+        alert('Something bad happened: ' + e);
+      }
 
-    function endWait() {
-      document.body.classList.remove('waiting');
-      run.disabled = false;
-    }
+      function clearOutput() {
+        output.textContent = "";
+        if (stdout) {
+          stdout.textContent = "";
+        }
+        embed.style.display='none';
+      }
 
+      /**
+       * Called when an image in the workspace history is clicked.
+       */
+      function historyClick() {
+        beginWait();
+        clearOutput();
+        var req = new XMLHttpRequest();
+        req.addEventListener('load', historyComplete);
+        req.addEventListener('error', xhrError);
+        req.overrideMimeType('application/json');
+        req.open('GET', this.getAttribute('data-try'), true);
+        req.send();
+      }
 
-    /**
-     * Callback when there's an XHR error.
-     * @param e The callback event.
-     */
-    function xhrError(e) {
-      endWait();
-      alert('Something bad happened: ' + e);
-    }
 
-    function clearOutput() {
-      output.textContent = "";
-      if (stdout) {
-        stdout.textContent = "";
+      /**
+       * Callback for when the XHR kicked off in historyClick() returns.
+       */
+      function historyComplete(e) {
+        // The response is JSON of the form:
+        // {
+        //   "hash": "unique id for a try",
+        //   "code": "source code for try"
+        // }
+        endWait();
+        body = JSON.parse(e.target.response);
+        code.value = body.code;
+        editor.setValue(body.code);
+        img.src = '/i/'+body.hash+'.png';
+        if (permalink) {
+          permalink.href = '/c/' + body.hash;
+        }
       }
-      embed.style.display='none';
-    }
-
-    /**
-     * Called when an image in the workspace history is clicked.
-     */
-    function historyClick() {
-      beginWait();
-      clearOutput();
-      var req = new XMLHttpRequest();
-      req.addEventListener('load', historyComplete);
-      req.addEventListener('error', xhrError);
-      req.overrideMimeType('application/json');
-      req.open('GET', this.getAttribute('data-try'), true);
-      req.send();
-    }
 
 
-    /**
-     * Callback for when the XHR kicked off in historyClick() returns.
-     */
-    function historyComplete(e) {
-      // The response is JSON of the form:
-      // {
-      //   "hash": "unique id for a try",
-      //   "code": "source code for try"
-      // }
-      endWait();
-      body = JSON.parse(e.target.response);
-      code.value = body.code;
-      editor.setValue(body.code);
-      img.src = '/i/'+body.hash+'.png';
-      if (permalink) {
-        permalink.href = '/c/' + body.hash;
+      /**
+       * Add the given try image to the history of a workspace.
+       */
+      function addToHistory(hash, imgUrl) {
+        var clone = tryTemplate.content.cloneNode(true);
+        clone.querySelector('img').src = imgUrl;
+        clone.querySelector('.tries').setAttribute('data-try', '/json/' + hash);
+        tryHistory.insertBefore(clone, tryHistory.firstChild);
+        tryHistory.querySelector('.tries').addEventListener('click', historyClick, true);
       }
-    }
 
 
-    /**
-     * Add the given try image to the history of a workspace.
-     */
-    function addToHistory(hash, imgUrl) {
-      var clone = tryTemplate.content.cloneNode(true);
-      clone.querySelector('img').src = imgUrl;
-      clone.querySelector('.tries').setAttribute('data-try', '/json/' + hash);
-      tryHistory.insertBefore(clone, tryHistory.firstChild);
-      tryHistory.querySelector('.tries').addEventListener('click', historyClick, true);
-    }
+      /**
+       * Callback for when the XHR returns after attempting to run the code.
+       * @param e The callback event.
+       */
+      function codeComplete(e) {
+        // The response is JSON of the form:
+        // {
+        //   "message": "you had an error...",
+        //   "img": "<base64 encoded image but only on success>"
+        // }
+        //
+        // The img is optional and only appears if there is a valid
+        // image to display.
+        endWait();
+        console.log(e.target.response);
+        body = JSON.parse(e.target.response);
+        output.textContent = body.message;
+        if (stdout) {
+          stdout.textContent = body.stdout;
+        }
+        if (body.hasOwnProperty('img')) {
+          img.src = 'data:image/png;base64,' + body.img;
+        } else {
+          img.src = '';
+        }
+        // Add the image to the history if we are on a workspace page.
+        if (tryHistory) {
+          addToHistory(body.hash, 'data:image/png;base64,' + body.img);
+        } else {
+          window.history.pushState(null, null, '/c/' + body.hash);
+        }
+        if (permalink) {
+          permalink.href = '/c/' + body.hash;
+        }
+        if (embed) {
+          var url = document.URL;
+          url = url.replace('/c/', '/iframe/');
+          embed.value = '<iframe src="' + url + '" width="740" height="550" style="border: solid #00a 5px; border-radius: 5px;"/>'
+        }
+        if (embedButton && embedButton.hasAttribute('disabled')) {
+          embedButton.removeAttribute('disabled');
+        }
+      }
 
 
-    /**
-     * Callback for when the XHR returns after attempting to run the code.
-     * @param e The callback event.
-     */
-    function codeComplete(e) {
-      // The response is JSON of the form:
-      // {
-      //   "message": "you had an error...",
-      //   "img": "<base64 encoded image but only on success>"
-      // }
-      //
-      // The img is optional and only appears if there is a valid
-      // image to display.
-      endWait();
-      console.log(e.target.response);
-      body = JSON.parse(e.target.response);
-      output.textContent = body.message;
-      if (stdout) {
-        stdout.textContent = body.stdout;
-      }
-      if (body.hasOwnProperty('img')) {
-        img.src = 'data:image/png;base64,' + body.img;
-      } else {
-        img.src = '';
-      }
-      // Add the image to the history if we are on a workspace page.
-      if (tryHistory) {
-        addToHistory(body.hash, 'data:image/png;base64,' + body.img);
-      } else {
-        window.history.pushState(null, null, '/c/' + body.hash);
-      }
-      if (permalink) {
-        permalink.href = '/c/' + body.hash;
-      }
-      if (embed) {
-        var url = document.URL;
-        url = url.replace('/c/', '/iframe/');
-        embed.value = '<iframe src="' + url + '" width="740" height="550" style="border: solid #00a 5px; border-radius: 5px;"/>'
+      function onSubmitCode() {
+        beginWait();
+        clearOutput();
+        var req = new XMLHttpRequest();
+        req.addEventListener('load', codeComplete);
+        req.addEventListener('error', xhrError);
+        req.overrideMimeType('application/json');
+        req.open('POST', '/', true);
+        req.setRequestHeader('content-type', 'application/json');
+        req.send(JSON.stringify({'code': editor.getValue(), 'name': workspaceName}));
       }
-      if (embedButton && embedButton.hasAttribute('disabled')) {
-        embedButton.removeAttribute('disabled');
-      }
-    }
+      run.addEventListener('click', onSubmitCode);
 
 
-    function onSubmitCode() {
-      beginWait();
-      clearOutput();
-      var req = new XMLHttpRequest();
-      req.addEventListener('load', codeComplete);
-      req.addEventListener('error', xhrError);
-      req.overrideMimeType('application/json');
-      req.open('POST', '/', true);
-      req.setRequestHeader('content-type', 'application/json');
-      req.send(JSON.stringify({'code': editor.getValue(), 'name': workspaceName}));
-    }
-    run.addEventListener('click', onSubmitCode);
-
+      function onEmbedClick() {
+        embed.style.display='inline';
+      }
 
-    function onEmbedClick() {
-      embed.style.display='inline';
-    }
+      if (embedButton) {
+        embedButton.addEventListener('click', onEmbedClick);
+      }
 
-    if (embedButton) {
-      embedButton.addEventListener('click', onEmbedClick);
+      // Add the images to the history if we are on a workspace page.
+      if (tryHistory && history) {
+        for (var i=0; i<history.length; i++) {
+          addToHistory(history[i].hash, '/i/'+history[i].hash+'.png');
+        }
+      }
     }
 
-
-    // Add the images to the history if we are on a workspace page.
-    if (tryHistory && history) {
-      for (var i=0; i<history.length; i++) {
-        addToHistory(history[i].hash, '/i/'+history[i].hash+'.png');
-      }
+    // If loaded via HTML Imports then DOMContentLoaded will be long done.
+    if (document.readyState != "loading") {
+      onLoad();
+    } else {
+      this.addEventListener('DOMContentLoaded', onLoad);
     }
 
-})(workspaceName);
+})();
diff --git a/experimental/webtry/templates/content.html b/experimental/webtry/templates/content.html
index ca5741fc6d..8638cf2bd1 100644
--- a/experimental/webtry/templates/content.html
+++ b/experimental/webtry/templates/content.html
@@ -1,8 +1,5 @@
 
 <section id=content>
-  <script src="/res/js/cm/codemirror.js"></script>
-  <script src="/res/js/cm/clike.js"></script>
-
   <pre>
     <textarea spellcheck=false name='code' id='code' rows='15' cols='100'>{{.Code}}</textarea>
   </pre>
diff --git a/experimental/webtry/templates/footercommon.html b/experimental/webtry/templates/footercommon.html
new file mode 100644
index 0000000000..47a27647ad
--- /dev/null
+++ b/experimental/webtry/templates/footercommon.html
@@ -0,0 +1,6 @@
+    <link rel='stylesheet' href='/res/css/webtry.css' type='text/css'>
+    <link rel='stylesheet' href='/res/css/cm/codemirror.css' type='text/css'>
+    <script src='/res/js/polyfill.js' type='text/javascript'></script>
+    <script src='/res/js/cm/codemirror.js' type='text/javascript'></script>
+    <script src='/res/js/cm/clike.js' type='text/javascript'></script>
+    <script src='/res/js/webtry.js' type='text/javascript'></script>
diff --git a/experimental/webtry/templates/headercommon.html b/experimental/webtry/templates/headercommon.html
new file mode 100644
index 0000000000..2c2102d82f
--- /dev/null
+++ b/experimental/webtry/templates/headercommon.html
@@ -0,0 +1,2 @@
+    <meta charset='utf-8' />
+    <meta name=viewport content='width=device-width, initial-scale=1'>
diff --git a/experimental/webtry/templates/iframe.html b/experimental/webtry/templates/iframe.html
index a0c08b17c6..47bfeecfb6 100644
--- a/experimental/webtry/templates/iframe.html
+++ b/experimental/webtry/templates/iframe.html
@@ -2,17 +2,15 @@
 <html>
 <head>
     <title>Skia WebTry</title>
-    <meta charset='utf-8' />
-    <script src="/res/js/pointerevents.min.js" type="text/javascript" charset="utf-8"></script>
-    <link rel='stylesheet' href='/res/css/webtry.css' type='text/css' media='screen'>
-    <link rel="stylesheet" href="/res/css/cm/codemirror.css" type="text/css" media="screen">
+    {{template "headercommon.html" .}}
+    <link rel='import' type='text/html' href='/res/imp/zoom.html'>
 </head>
 <body class=iframe>
   {{template "content.html" .}}
-  <script type='text/javascript' charset='utf-8'>
+  <script type='text/javascript'>
       // Not running in a workspace.
       var workspaceName = '';
   </script>
-  <script src="/res/js/webtry.js" type="text/javascript" charset="utf-8"></script>
+  {{template "footercommon.html" .}}
 </body>
 </html>
diff --git a/experimental/webtry/templates/index.html b/experimental/webtry/templates/index.html
index 11a0641ae2..58b7e3578d 100644
--- a/experimental/webtry/templates/index.html
+++ b/experimental/webtry/templates/index.html
@@ -2,19 +2,17 @@
 <html>
 <head>
     <title>Skia WebTry</title>
-    <meta charset='utf-8' />
-    <script src="/res/js/pointerevents.min.js" type="text/javascript" charset="utf-8"></script>
-    <link rel="stylesheet" href="/res/css/webtry.css" type="text/css" media="screen">
-    <link rel="stylesheet" href="/res/css/cm/codemirror.css" type="text/css" media="screen">
+    {{template "headercommon.html" .}}
+    <link rel='import' type='text/html' href='/res/imp/zoom.html'>
 </head>
 <body>
   {{template "titlebar.html" .}}
   {{template "content.html" .}}
 
-  <script type='text/javascript' charset='utf-8'>
+  <script type='text/javascript'>
       // Not running in a workspace.
-      var workspaceName = "";
+      var workspaceName = '';
   </script>
-  <script src="/res/js/webtry.js" type="text/javascript" charset="utf-8"></script>
+  {{template "footercommon.html" .}}
 </body>
 </html>
diff --git a/experimental/webtry/templates/recent.html b/experimental/webtry/templates/recent.html
index 645ad3480c..d5e4cc7259 100644
--- a/experimental/webtry/templates/recent.html
+++ b/experimental/webtry/templates/recent.html
@@ -3,22 +3,23 @@
 <head>
     <title>Recent SkFiddles</title>
     <meta charset='utf-8' />
-    <link rel="stylesheet" href="/res/css/webtry.css" type="text/css" media="screen">
+    {{template "headercommon.html" .}}
 </head>
 <body>
   {{template "titlebar.html" .}}
   <section id=content>
-  <h1>Recent Activity</h1>
-  <section>
-    {{range .Tries}}
-      <div class=tries>
-        <h2><a href="/c/{{.Hash}}">{{.CreateTS}}</a></h2>
-        <a href="/c/{{.Hash}}">
-          <img width=128 height=128 src="/i/{{.Hash}}.png">
-        </a>
-      </div>
-    {{end}}
-  </section>
+    <h1>Recent Activity</h1>
+    <section>
+      {{range .Tries}}
+        <div class=tries>
+          <h2><a href="/c/{{.Hash}}">{{.CreateTS}}</a></h2>
+          <a href="/c/{{.Hash}}">
+            <img width=128 height=128 src="/i/{{.Hash}}.png">
+          </a>
+        </div>
+      {{end}}
+    </section>
   </section>
+  {{template "footercommon.html" .}}
 </body>
 </html>
diff --git a/experimental/webtry/templates/workspace.html b/experimental/webtry/templates/workspace.html
index d7d581a48d..9694a357b1 100644
--- a/experimental/webtry/templates/workspace.html
+++ b/experimental/webtry/templates/workspace.html
@@ -2,15 +2,13 @@
 <html>
 <head>
     <title>Workspace</title>
-    <meta charset='utf-8' />
-    <script src="/res/js/pointerevents.min.js" type="text/javascript" charset="utf-8"></script>
-    <link rel='stylesheet' href='/res/css/webtry.css' type='text/css' media='screen'>
-    <link rel="stylesheet" href="/res/css/cm/codemirror.css" type="text/css" media="screen">
+    {{template "headercommon.html" .}}
+    <link rel='import' type='text/html' href='/res/imp/zoom.html'>
 </head>
 <body>
   <template id=tryTemplate>
-    <div class=tries data-try="">
-      <img width=64 height=64 src="">
+    <div class=tries data-try=''>
+      <img width=64 height=64 src=''>
     </div>
   </template>
   {{template "titlebar.html" .}}
@@ -20,22 +18,22 @@
   <section id=tryHistory>
   </section>
 
-  <script type="text/javascript" charset="utf-8">
+  <script type='text/javascript'>
     var history = {{.Tries}};
   </script>
-  <script type='text/javascript' charset='utf-8'>
+  <script type='text/javascript'>
       // Set the workspace name so run.js also updates the history.
-      var workspaceName = "{{.Name}}";
+      var workspaceName = '{{.Name}}';
   </script>
-  <script src="/res/js/webtry.js" type="text/javascript" charset="utf-8"></script>
 {{else}}
   <section id=content>
     <h1>Create</h1>
     Create a new workspace:
-    <form action="." method="POST" accept-charset="utf-8">
-      <p><input type="submit" value="Create"></p>
+    <form action='.' method='POST'>
+      <p><input type='submit' value='Create'></p>
     </form>
   </section>
 {{end}}
+  {{template "footercommon.html" .}}
 </body>
 </html>
diff --git a/experimental/webtry/webtry.go b/experimental/webtry/webtry.go
index bf352fb131..0c5186e32a 100644
--- a/experimental/webtry/webtry.go
+++ b/experimental/webtry/webtry.go
@@ -140,6 +140,8 @@ func init() {
 		filepath.Join(cwd, "templates/index.html"),
 		filepath.Join(cwd, "templates/titlebar.html"),
 		filepath.Join(cwd, "templates/content.html"),
+		filepath.Join(cwd, "templates/headercommon.html"),
+		filepath.Join(cwd, "templates/footercommon.html"),
 	)
 	if err != nil {
 		panic(err)
@@ -147,6 +149,8 @@ func init() {
 	iframeTemplate, err = htemplate.ParseFiles(
 		filepath.Join(cwd, "templates/iframe.html"),
 		filepath.Join(cwd, "templates/content.html"),
+		filepath.Join(cwd, "templates/headercommon.html"),
+		filepath.Join(cwd, "templates/footercommon.html"),
 	)
 	if err != nil {
 		panic(err)
@@ -154,6 +158,8 @@ func init() {
 	recentTemplate, err = htemplate.ParseFiles(
 		filepath.Join(cwd, "templates/recent.html"),
 		filepath.Join(cwd, "templates/titlebar.html"),
+		filepath.Join(cwd, "templates/headercommon.html"),
+		filepath.Join(cwd, "templates/footercommon.html"),
 	)
 	if err != nil {
 		panic(err)
@@ -162,6 +168,8 @@ func init() {
 		filepath.Join(cwd, "templates/workspace.html"),
 		filepath.Join(cwd, "templates/titlebar.html"),
 		filepath.Join(cwd, "templates/content.html"),
+		filepath.Join(cwd, "templates/headercommon.html"),
+		filepath.Join(cwd, "templates/footercommon.html"),
 	)
 	if err != nil {
 		panic(err)