Merge polybinding branch into master

src/g-icon.html

@@ -16,17 +16,21 @@
         opacity: 0.8;
       }
 
-      .icon {
+      #icon {
         width: 21px;
         height: 21px;
         cursor: pointer;
         background: no-repeat center;
         background-size: contain;
       }
     </style>
-    <div class="icon" style="background-image:url({{src}})"></div>
+    <div id="icon" style="background-image:url({{src}})"></div>
   </template>
-  <script>
+  <script>    
+    /**
+     * g-icon is a 21x21 glyph expressed as a background-image.
+     * @module g-icon
+     */
     this.component();
   </script>
 </element>

src/g-menu.html

@@ -5,7 +5,7 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<element name="g-menu" extends="g-selector" handlers="click: clickHandler">
+<element name="g-menu" extends="g-selector">
   <link rel="components" href="g-selector.html">
   <template>
     <style>

src/g-selection.html

@@ -5,11 +5,13 @@
 -->
 <element name="g-selection" attributes="multi">
   <link rel="components" href="g-component.html">
-  <style>
-    @host {
-      display: none;
-    }
-  </style>
+  <template>
+    <style>
+      @host {
+        display: none !important;
+      }
+    </style>
+  </template>
   <script>
     this.component({
       publish: {
@@ -33,7 +35,7 @@
           }
           // TODO(sjmiles): consider replacing with summary
           // notifications (asynchronous job)
-          this.fireEvent("select", {isSelected: inIsSelected, item: inItem});
+          this.asend("select", {isSelected: inIsSelected, item: inItem});
         },
         select: function(inItem) {
           if (this.multi) {

src/g-selector.html

@@ -5,7 +5,7 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<element name="g-selector" attributes="selected multi" handlers="click: clickHandler">
+<element name="g-selector" attributes="selected multi" on-mousedown="activateHandler">
   <link rel="components" href="g-selection.html">
   <template>
     <g-selection id="selection" multi="{{multi}}" on-select="selectionSelect"></g-selection>
@@ -22,18 +22,22 @@
           return this.$.selection.getSelection();
         }
       },
-      _valueToIndex: function(inValue) {
+      valueForNode: function(inNode) {
+        return inNode.getAttribute('name') || inNode.value;
+      },
+      valueToIndex: function(inValue) {
         // find an item with value == inValue and return it's index
         for (var i=0, items=this.items, c; c=items[i]; i++) {
-          if (c.value && c.value == inValue) {
+          //if ((c.value === inValue) || (c.getAttribute('name') === inValue)) {
+          if (this.valueForNode(c) == inValue) {
             return i;
           }
         }
-        // if no item found, the value is an index itself
+        // if no item found, the value itself is probably the index
         return inValue;
       },
       selectedChanged: function() {
-        var item = this.items[this._valueToIndex(this.selected)];
+        var item = this.items[this.valueToIndex(this.selected)];
         if (item) {
           this.$.selection.select(item);
         }
@@ -45,11 +49,11 @@
         }
       },
       // event fired from host
-      clickHandler: function(inEvent) {
+      activateHandler: function(inEvent) {
         var items = this.items;
         var i = this.findDistributedTarget(inEvent.target, items);
         if (i >= 0) {
-          this.node.selected = items[i].value || i;
+          this.selected = this.valueForNode(items[i]) || i; 
         }
       }
     });

src/g-tabs.html

@@ -5,10 +5,13 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<element name="g-tabs" extends="g-selector" attributes="selected, multi, vertical" handlers="click: clickHandler">
+<element name="g-tabs" extends="g-selector" attributes="selected multi vertical" on-click="clickHandler">
   <link rel="components" href="g-selector.html">
   <template>
     <style>
+      style {
+        display: none !important;
+      }
       @host {
         display: block;
         height: 28px;

src/g-togglebutton.html

@@ -5,7 +5,7 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<element name="g-togglebutton" attributes="value" handlers="click: toggle">
+<element name="g-togglebutton" attributes="value" on-click="toggle">
   <link rel="components" href="g-component.html">
   <link rel="stylesheet" href="css/g-togglebutton.css" />
   <template>
@@ -22,7 +22,7 @@
       },
       publish: {
         toggle: function() {
-          this.node.value = !this.node.value;
+          this.value = !this.value;
         }
       }
     });

src/panel-transitions/g-flow-panel-transition.html

@@ -30,7 +30,7 @@
       publish: {
         highlander: false,
         narrowMedia: '(max-width: 800px)',
-        setup: function(inPanels) {
+        setup: function() {
           this.$super(arguments);
           this.listenForMediaMatch();
           // TODO(sorvell): redo when reference combinators arrive

workbench/icon-button.html

@@ -6,17 +6,18 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta name="viewport" content="initial-scale=1.0">
   <title>Icon Button</title>
   <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../src/g-icon-button.html">
 </head>
 <body>
   <g-icon-button src="images/star_full.svg"></g-icon-button>
   <g-icon-button active="true" src="images/star_full.svg"></g-icon-button>
-  <g-icon-button id="dyn"></g-icon-button>
+  <g-icon-button id="dynamic"></g-icon-button>
   <script>
     window.addEventListener("WebComponentsReady", function() {
-      document.querySelector("#dyn").src = "images/star_full.svg";
+      document.querySelector("#dynamic").src = "images/star_full.svg";
     });
   </script>
 </body>

workbench/icon.html

@@ -6,6 +6,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta name="viewport" content="initial-scale=1.0">
   <title>Icon</title>
   <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../src/g-icon.html">

workbench/menu-button.html

@@ -4,9 +4,11 @@
 license that can be found in the LICENSE file.
 -->
 <!DOCTYPE html>
+<!doctype html>
 <html>
 <head>
-  <title>Dropdown Button</title>
+  <meta name="viewport" content="initial-scale=1.0">
+  <title>Menu Button</title>
   <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../src/g-menu-button.html">
   <link rel="components" href="../src/g-menu-item.html">
@@ -15,7 +17,11 @@
     html, body {
       font-family: 'Helvetica Neue', Helvetica, Arial, 'open sans', sans-serif;
       height: 100%;
+    }
+    body {
+      font-family: 'Helvetica Neue', Helvetica, Arial, 'open sans', sans-serif;
       margin: 0;
+      opacity: 0;
       overflow: hidden;
     }
   </style>

workbench/menu.html

@@ -6,6 +6,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta name="viewport" content="initial-scale=1.0">
   <title>Menu</title>
   <script src="../../polyfills/Components/components-polyfill.js"></script>
   <style>

workbench/overlay.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta name="viewport" content="initial-scale=1.0">
 	<title>Overlay</title>
   <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../src/g-overlay.html">

workbench/page.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta name="viewport" content="initial-scale=1.0">
 	<title>Page</title>
   <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../src/g-page.html">
@@ -13,7 +14,7 @@
     }
   </style>
 </head>
-<body>
+<body style="opacity: 0;">
   <g-page>
     <div class="content">Content...</div>
   </g-page>

workbench/panels.html

@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta name="viewport" content="initial-scale=1.0">
   <title>Panels</title>
-  <script src="../../polyfills/Components/components-polyfill.js" shadow="webkit"></script>
+  <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../src/g-panels.html">
   <link rel="stylesheet" href="../src/css/g-panels.css" />
 	<style>
@@ -63,7 +64,7 @@
 
 	</style>
 </head>
-<body>
+<body style="opacity: 0;">
   <div class="controls">
 		<button onclick="previous();">&laquo;</button>
 		<button onclick="next();">&raquo;</button>

workbench/ratings.html

@@ -6,11 +6,12 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta name="viewport" content="initial-scale=1.0">
   <title>Ratings</title>
   <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../../toolkit/src/g-ratings.html">
 </head>
-<body>
+<body style="opacity: 0">
   <g-ratings value="3"></g-ratings>
   <br>
   <g-ratings value="5" count="10"></g-ratings>

workbench/selection.html

@@ -8,6 +8,7 @@
 <head>
   <title>Selection</title>
   <script src="../../polyfills/Components/components-polyfill.js"></script>
+  <script src="../MDV/mdv-polyfill.js"></script>
   <link rel="components" href="../src/g-selection.html">
 </head>
 <body>

workbench/selector.html

@@ -24,7 +24,7 @@
 </head>
 <body>
   <h2>Single-select</h2>
-  <g-selector>
+  <g-selector id="selector">
     <div>Item 1</div>
     <div>Item 2</div>
     <div>Item 3</div>

workbench/tabs.html

@@ -1,11 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
 <head>
+  <meta name="viewport" content="initial-scale=1.0">
   <title>Tabs</title>
   <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../../toolkit/src/g-tabs.html">
 </head>
-<body>
+<body style="opacity: 0">
   <g-tabs selected="0">
     <span>One</span>
     <span>Two</span>

workbench/togglebutton.html

@@ -3,14 +3,15 @@
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 -->
-<!DOCTYPE html>
+<!doctype html>
 <html>
 <head>
+  <meta name="viewport" content="initial-scale=1.0">
   <title>Toggle Button</title>
   <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../../toolkit/src/g-togglebutton.html">
 </head>
-<body>
+<body style="opacity: 0">
   <g-togglebutton value="true"></g-togglebutton>
   <br>
   <g-togglebutton value="false"></g-togglebutton>

workbench/toolbar.html

@@ -3,20 +3,24 @@
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 -->
-<!DOCTYPE html>
+<!doctype html>
 <html>
 <head>
-  <title>Menu</title>
+  <meta name="viewport" content="initial-scale=1.0">
+  <title>Toolbar</title>
   <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../src/g-toolbar.html">
   <link rel="components" href="../src/g-icon-button.html">
   <style>
     html, body {
       font-family: 'Helvetica Neue', Helvetica, Arial, 'open sans', sans-serif;
       height: 100%;
+    }
+    body {
+      font-family: 'Helvetica Neue', Helvetica, Arial, 'open sans', sans-serif;
       margin: 0;
+      opacity: 0;
     }
-
   </style>
 </head>
 <body>