Add cr-checkbox to Chrome

ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.js

Index: ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.js
diff --git a/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.js b/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.js
new file mode 100644
index 0000000000000000000000000000000000000000..c84edac890b93a55748af36d06aa701ca36883c3
--- /dev/null
+++ b/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.js
@@ -0,0 +1,62 @@
+/* Copyright 2015 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+/**
+ * @fileoverview
+ * `cr-checkbox` is a button that can be either checked or unchecked. User
+ * can tap the checkbox to check or uncheck it. Usually you use checkboxes
+ * to allow user to select multiple options from a set. If you have a single
+ * ON/OFF option, avoid using a single checkbox and use `cr-toggle-button`
+ * instead.
+ *
+ * Example:
+ *     <cr-checkbox></cr-checkbox>
+ *     <cr-checkbox checked></cr-checkbox>
+ *
+ * @element cr-checkbox

[Dan Beam, 2015/02/19 22:47:56]

are we writing chrome JS or Polymer?  does this get ignored when compiled?

[Jeremy Klein, 2015/02/19 22:58:00]

Yes this will be ignored when compiled. It is here in case we want to generate
the documentation sites like the other Polymer elements have. Same goes for
"@attribute, @default, @event, etc.

+ */
+Polymer({
+  publish: {
+    /**
+     * Gets or sets the state. `true` is checked and `false` is unchecked.
+     *
+     * @attribute checked
+     * @type boolean
+     * @default false
+     */
+    checked: {
+      value: false,
+      reflect: true

[Dan Beam, 2015/02/19 22:47:56]

nit: , (we don't care about IE and this lessens diffs later and lets you sort
keys more easily)

[Oren Blasberg, 2015/02/19 23:38:02]

Ended up putting on one line.

+    },
+
+    /**
+     * The label for the checkbox.
+     *
+     * @attribute label
+     * @type string
+     * @default ''
+     */
+    label: '',
+
+    /**
+     * If true, the user cannot interact with this element.
+     *
+     * @attribute disabled
+     * @type boolean
+     * @default false
+     */
+    disabled: {
+      value: false,
+      reflect: true

[Dan Beam, 2015/02/19 22:47:56]

nit: if we're gonna copy this {value: false, relect: true} literal a lot, maybe
make a constant somewhere

[Jeremy Klein, 2015/02/19 22:58:00]

I don't expect that we'll copy this a whole lot so I think it's useful to be
explicit. I think it might be just as common to have {value: true, reflect:
true}. Maybe we can extract both to constants, but I don't really think the win
is too big.

By the way, is it OK from a style perspective to inline these objects?

[Dan Beam, 2015/02/19 23:09:49]

yes

[Oren Blasberg, 2015/02/19 23:38:02]

Done.

+    },
+  },
+
+  toggle: function() {

[Dan Beam, 2015/02/19 22:47:56]

nit: doc comment

[Oren Blasberg, 2015/02/19 23:38:02]

Done.

+    this.$.checkbox.toggle();
+  },
+

[Dan Beam, 2015/02/19 22:47:56]

same

[Oren Blasberg, 2015/02/19 23:38:02]

Done.

+  ready: function() {
+    this.$.events.forward(this.$.checkbox, ['change']);
+  },
+});