7/11 master -> stable

Ace/Ace.html

@@ -4,7 +4,7 @@
 license that can be found in the LICENSE file.
 -->
 <script src="src-min-noconflict/ace.js"></script>
-<element name="ajaxorg-ace" attributes="theme mode value readonly wrap fontSize tabSize">
+<polymer-element name="ajaxorg-ace" attributes="theme mode value readonly wrap fontSize tabSize">
   <template>
     <style type="text/css" media="screen">
       @host {
@@ -17,7 +17,6 @@
           right: 0;
         }
       }
-
       .ajaxorg-ace {
           position: absolute;
           top: 0;
@@ -28,9 +27,8 @@
     </style>
     <div class="ajaxorg-ace" id="editor"></div>
   </template>
-
   <script>
-    Polymer.register(this, {
+    Polymer('ajaxorg-ace', {
       mode: 'javascript',
       theme: 'monokai',
       readonly: false,
@@ -109,7 +107,7 @@
       },
       editorBlur: function(event) {
         if (this._value !== null && this._value != this.editorValue) {
-          this.send('editor-change', {value: this.editorValue, oldValue: this._value});
+          this.fire('editor-change', {value: this.editorValue, oldValue: this._value});
         }
         this._value = this.editorValue;
       },
@@ -125,4 +123,4 @@
       }
     });
   </script>
-</element>
+</polymer-element>

Animation/animation-group.html

@@ -1,5 +1,5 @@
 <link rel="import" href="../../toolkit-ui/elements/animation/all.html">
-<element name="animation-group" extends="g-animation-group" on-click="clickHandler">
+<polymer-element name="animation-group" extends="g-animation-group" on-click="clickHandler">
   <template>
     <style>
       @host {
@@ -19,7 +19,7 @@
     </div>
   </template>
   <script>
-    Polymer.register(this, {
+    Polymer('animation-group', {
       publish: {
         type: 'seq'
       },
@@ -34,4 +34,4 @@
       }
     });
   </script>
-</element>
+</polymer-element>

Animation/animation-picker.html

@@ -1,5 +1,5 @@
 <link rel="import" href="../../toolkit-ui/elements/animation/all.html">
-<element name="animation-picker" on-click="clickHandler">
+<polymer-element name="animation-picker" on-click="clickHandler">
   <link rel="stylesheet" href="../../toolkit-ui/elements/css/g-flex-layout.css">
   <template>
     <style>
@@ -28,79 +28,81 @@
     </div>
   </template>
   <script>
-    var ANIMATIONS = {
-      blink: 'g-blink',
-      bounce: 'g-bounce',
-      fadein: 'g-fadein',
-      fadeout: 'g-fadeout',
-      flip: 'g-flip',
-      shake: 'g-shake'
-    };
-    Polymer.register(this, {
-      publish: {
-        animationType: 'shake',
-        client: null,
-        target: null,
-        targetLabel: 'no target',
-        // proxied animation properties
-        targetSelector: ''
-      },
-      ready: function() {
-        this.super();
-        this.animationTypeChanged();
-      },
-      targetChanged: function() {
-        this.client && (this.client.target = this.target);
-        this.targetLabel = this.target ? this.target.id : 'no target';
-      },
-      animationTypeChanged: function() {
-        var animation = this.createAnimation();
-        var target;
-        if (this.client) {
-          this.client.cancel();
-          this.client.remove();
-          target || (target = this.client.target);
-        };
-        animation.target = target;
-        this.appendChild(animation);
-        this.client = animation;
-      },
-      createAnimation: function() {
-        var tag = ANIMATIONS[this.animationType]
-        var animation = document.createElement(tag);
-        animation.textContent = '({{targetLabel}})';
-        HTMLTemplateElement.bindAllMustachesFrom_(animation, this);
-        animation.classList.add('animation');
-        animation.addEventListener('animationchange', this.animationchangeHandler.bind(this));
-        animation.addEventListener('click', this.clientClickHandler.bind(this));
-        return animation;
-      },
-      targetSelectorChanged: function() {
-        this.client && (this.client.targetSelector = this.targetSelector);
-      },
-      apply: function() {
-        this.client && this.client.apply();
-      },
-      completeApply: function() {
-        this.client && this.client.completeApply();
-      },
-      animationchangeHandler: function() {
-        this.targetLabel = (this.client && this.client.target) ? this.client.target.id : 'no target';
-      },
-      clientClickHandler: function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-      },
-      clickHandler: function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        if (this.parentNode && !this.parentNode.apply && this.client) {
-          setTimeout(this.client.play.bind(this.client));
+    (function() {
+      var ANIMATIONS = {
+        blink: 'g-blink',
+        bounce: 'g-bounce',
+        fadein: 'g-fadein',
+        fadeout: 'g-fadeout',
+        flip: 'g-flip',
+        shake: 'g-shake'
+      };
+      Polymer('animation-picker', {
+        publish: {
+          animationType: 'shake',
+          client: null,
+          target: null,
+          targetLabel: 'no target',
+          // proxied animation properties
+          targetSelector: ''
+        },
+        ready: function() {
+          this.super();
+          this.animationTypeChanged();
+        },
+        targetChanged: function() {
+          this.client && (this.client.target = this.target);
+          this.targetLabel = this.target ? this.target.id : 'no target';
+        },
+        animationTypeChanged: function() {
+          var animation = this.createAnimation();
+          var target;
+          if (this.client) {
+            this.client.cancel();
+            this.client.remove();
+            target || (target = this.client.target);
+          };
+          animation.target = target;
+          this.appendChild(animation);
+          this.client = animation;
+        },
+        createAnimation: function() {
+          var tag = ANIMATIONS[this.animationType]
+          var animation = document.createElement(tag);
+          animation.textContent = '({{targetLabel}})';
+          HTMLTemplateElement.bindAllMustachesFrom_(animation, this);
+          animation.classList.add('animation');
+          animation.addEventListener('animationchange', this.animationchangeHandler.bind(this));
+          animation.addEventListener('click', this.clientClickHandler.bind(this));
+          return animation;
+        },
+        targetSelectorChanged: function() {
+          this.client && (this.client.targetSelector = this.targetSelector);
+        },
+        apply: function() {
+          this.client && this.client.apply();
+        },
+        completeApply: function() {
+          this.client && this.client.completeApply();
+        },
+        animationchangeHandler: function() {
+          this.targetLabel = (this.client && this.client.target) ? this.client.target.id : 'no target';
+        },
+        clientClickHandler: function(e) {
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        clickHandler: function(e) {
+          e.preventDefault();
+          e.stopPropagation();
+          if (this.parentNode && !this.parentNode.apply && this.client) {
+            setTimeout(this.client.play.bind(this.client));
+          }
+        },
+        get animation() {
+          return this.client && this.client.animation;
         }
-      },
-      get animation() {
-        return this.client && this.client.animation;
-      }
-    });
+      });
+    })();
   </script>
-</element>
+</polymer-element>

Animation/tk-blink.html

@@ -1,6 +1,6 @@
 <link rel="import" href="../../toolkit-ui/elements/animation/g-blink.html">
 <script src="tk-proto.js"></script>
-<element name="tk-blink" extends="g-blink" on-click="clickHandler">
+<polymer-element name="tk-blink" extends="g-blink" on-click="clickHandler">
   <template>
     <style>
       @host {
@@ -16,6 +16,6 @@
     {{animationName}}:{{targetLabel}}
   </template>
   <script>
-    Polymer.register(this, tkAnimationProto('blink'));
+    Polymer('tk-blink', tkAnimationProto('blink'));
   </script>
-</element>
+</polymer-element>

Animation/tk-bounce.html

@@ -1,6 +1,6 @@
 <link rel="import" href="../../toolkit-ui/elements/animation/g-bounce.html">
 <script src="tk-proto.js"></script>
-<element name="tk-bounce" extends="g-bounce" on-click="clickHandler">
+<polymer-element name="tk-bounce" extends="g-bounce" on-click="clickHandler">
   <template>
     <style>
       @host {
@@ -16,6 +16,6 @@
     {{animationName}}:{{targetLabel}}
   </template>
   <script>
-    Polymer.register(this, tkAnimationProto('bounce'));
+    Polymer('tk-bounce', tkAnimationProto('bounce'));
   </script>
-</element>
+</polymer-element>

Animation/tk-flip.html

@@ -1,6 +1,6 @@
 <link rel="import" href="../../toolkit-ui/elements/animation/g-flip.html">
 <script src="tk-proto.js"></script>
-<element name="tk-flip" extends="g-flip" on-click="clickHandler">
+<polymer-element name="tk-flip" extends="g-flip" on-click="clickHandler">
   <template>
     <style>
       @host {
@@ -16,6 +16,6 @@
     {{animationName}}:{{targetLabel}}
   </template>
   <script>
-    Polymer.register(this, tkAnimationProto('flip'));
+    Polymer('tk-flip', tkAnimationProto('flip'));
   </script>
-</element>
+</polymer-element>

Animation/tk-shake.html

@@ -1,6 +1,6 @@
 <link rel="import" href="../../toolkit-ui/elements/animation/g-shake.html">
 <script src="tk-proto.js"></script>
-<element name="tk-shake" extends="g-shake" on-click="clickHandler">
+<polymer-element name="tk-shake" extends="g-shake" on-click="clickHandler">
   <template>
     <style>
       @host {
@@ -35,6 +35,6 @@
     {{animationName}}:{{targetLabel}}
   </template>
   <script>
-    Polymer.register(this, tkAnimationProto('shake'));
+    Polymer('tk-shake', tkAnimationProto('shake'));
   </script>
-</element>
+</polymer-element>

BuildBot/index.html

@@ -7,14 +7,14 @@
   </head>
   <body>
     <buildbot-polymer></buildbot-polymer>
-    <element name="buildbot-polymer">
+    <polymer-element name="buildbot-polymer">
       <template>
         <template repeat="{{builders}}">
           <p><tk-buildbot builder="{{name}}" inactive="{{inactive}}"></tk-buildbot></p>
         </template>
       </template>
       <script>
-        Polymer.register(this, {
+        Polymer('buildbot-polymer', {
           publish: {
             builders: [],
             platforms: ['Mac', 'Linux', 'Win'],
@@ -46,6 +46,6 @@
           }
         });
       </script>
-    </element>
+    </polymer-element>
   </body>
 </html>

BuildBot/tk-buildbot.html

@@ -1,5 +1,5 @@
 <link rel="import" href="../../toolkit-ui/elements/g-ajax.html">
-<element name="tk-buildbot">
+<polymer-element name="tk-buildbot">
   <template>
     <style>
       * {
@@ -86,7 +86,7 @@ <h3>
     </div>
   </template>
   <script>
-    Polymer.register(this, {
+    Polymer('tk-buildbot', {
       publish: {
         details: false,
         builder: null,
@@ -143,4 +143,4 @@ <h3>
       }
     });
   </script>
-</element>
+</polymer-element>

Chart.js/chart-js.html

@@ -4,7 +4,7 @@
 license that can be found in the LICENSE file.
 -->
 <script src="Chart.min.js"></script>
-<element name="chart-js" attributes="data dataString kind color options">
+<polymer-element name="chart-js" attributes="data dataString kind color options">
   <template>
     <style>
       @host {
@@ -18,7 +18,7 @@
     <canvas id="chart" width="100" height="100"></canvas> 
   </template>
   <script>
-    Polymer.register(this, {
+    Polymer('chart-js', {
       kind: '',
       data: null,
       options: null,
@@ -84,4 +84,4 @@
       }
     });
   </script>  
-</element>
+</polymer-element>

CoolClock/coolclock.html

@@ -5,12 +5,12 @@
 -->
 <script src="coolclock.js"></script>
 <script src="moreskins.js"></script>
-<element name="x-coolclock" attributes="skin">
+<polymer-element name="x-coolclock" attributes="skin">
   <template>
     <span id="clock"></span>
   </template>
   <script>
-    Polymer.register(this, {
+    Polymer('x-coolclock', {
       skin: '', //'Babosa',
       ready: function() {
         // TODO(sorvell): create the canvas element manually becase ios 
@@ -36,4 +36,4 @@
       }
     });    
   </script>
-</element>
+</polymer-element>