Added TodoMVC startup benchmarks.

samples/third_party/todomvc_performance/js_todomvc/elements/td-todos.html

Index: samples/third_party/todomvc_performance/js_todomvc/elements/td-todos.html
diff --git a/samples/third_party/todomvc_performance/js_todomvc/elements/td-todos.html b/samples/third_party/todomvc_performance/js_todomvc/elements/td-todos.html
new file mode 100755
index 0000000000000000000000000000000000000000..2dc1ce5d92942fab325bc21b75153e291eaad4f1
--- /dev/null
+++ b/samples/third_party/todomvc_performance/js_todomvc/elements/td-todos.html
@@ -0,0 +1,79 @@
+
+<link rel="import" href="../components/polymer/polymer.html">
+<link rel="import" href="../components/polymer-selector/polymer-selector.html">
+<link rel="import" href="../components/flatiron-director/flatiron-director.html">
+<link rel="import" href="td-input.html">
+<link rel="import" href="td-item.html">
+
+<polymer-element name="td-todos" attributes="route modelId">
+	<template>
+		<link rel="stylesheet" href="td-todos.css">
+		<flatiron-director route="{{route}}"></flatiron-director>
+		<section id="todoapp">
+			<header id="header">
+				<input is="td-input" id="new-todo" placeholder="What needs to be done?" autofocus on-td-input-commit="{{addTodoAction}}" on-td-input-cancel="{{cancelAddTodoAction}}">
+			</header>
+			<section id="main" hidden?="{{model.items.length == 0}}">
+				<input id="toggle-all" type="checkbox" on-change="{{toggleAllCompletedAction}}" checked="{{model.allCompleted}}">
+				<label for="toggle-all">Mark all as complete</label>
+				<ul id="todo-list" on-td-item-changed="{{itemChangedAction}}" on-td-destroy-item="{{destroyItemAction}}">
+					<template repeat="{{model.filtered}}">
+						<li is="td-item" item="{{}}"></li>
+					</template>
+				</ul>
+			</section>
+			<footer id="footer" hidden?="{{model.items.length == 0}}">
+				<span id="todo-count"><strong>{{model.activeCount}}</strong> {{model.activeCount == 1 ? 'item' : 'items'}} left</span>
+				<polymer-selector id="filters" selected="{{route || 'all'}}">
+					<li name="all">
+						<a href="../#/">All</a>
+					</li>
+					<li name="active">
+						<a href="../#/active">Active</a>
+					</li>
+					<li name="completed">
+						<a href="../#/completed">Completed</a>
+					</li>
+				</polymer-selector>
+				<button hidden?="{{model.completedCount == 0}}" id="clear-completed" on-click="{{clearCompletedAction}}">Clear completed ({{model.completedCount}})</button>
+			</footer>
+		</section>
+	</template>
+
+	<script>
+		(function() {
+			var ENTER_KEY = 13;
+			var ESC_KEY = 27;
+			Polymer('td-todos', {
+				modelIdChanged: function() {
+					this.model = document.querySelector('#' + this.modelId);
+				},
+				routeChanged: function() {
+					this.model && (this.model.filter = this.route);
+				},
+				addTodoAction: function() {
+					this.model.newItem(this.$['new-todo'].value);
+					// when polyfilling Object.observe, make sure we update immediately
+					Platform.flush();
+					this.$['new-todo'].value = '';
+				},
+				cancelAddTodoAction: function() {
+					this.$['new-todo'].value = '';
+				},
+				itemChangedAction: function() {
+					this.model && this.model.itemsChanged();
+				},
+				destroyItemAction: function(e, detail) {
+					this.model.destroyItem(detail);
+				},
+				toggleAllCompletedAction: function(e, detail, sender) {
+					this.model.setItemsCompleted(sender.checked);
+				},
+				clearCompletedAction: function() {
+					this.model.clearItems();
+				}
+			});
+		})();
+	</script>
+
+</polymer-element>