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..044a0c633c09c5a000b56fcbb84cb2c065eb7ce6
--- /dev/null
+++ b/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.js
@@ -0,0 +1,64 @@
+/* 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

[Dan Beam, 2015/02/13 21:56:50]

nit: \s\s -> \s

[michaelpg, 2015/02/13 23:27:57]

I'd encourage this to be more than a nit, as double-spacing after a period
represents less than 10% of our JS comments.

                                .\s       .\s\s
third_party/polymer/components: 1162      99
chrome:                         57304     4503

Source (imperfect):
    find . -type f -name "*.js" -o -name "*.html" | xargs sed "s/\.\s/\. \n/g" |
grep -c "\.\s$"
minus
    find . -type f -name "*.js" -o -name "*.html" | xargs sed "s/\.\s\s/\. 
\n/g" | grep -c "\.\s\s$"

[Oren Blasberg, 2015/02/17 18:23:38]

Done.

+ * 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
+ */
+Polymer({
+  publish: {
+    /**
+     * Gets or sets the state. `true` is checked and `false` is unchecked.
+     *
+     * @attribute checked
+     * @type boolean
+     * @default false

[Dan Beam, 2015/02/13 21:56:50]

^ what syntax is this?

[michaelpg, 2015/02/14 05:51:17]

Polymer-flavored jsdoc:
https://www.polymer-project.org/docs/start/reusableelements.html#publishing-a...
and
https://github.com/Polymer/context-free-parser/blob/master/context-free-parse...

We haven't 100% decided what if any of these attributes we'll use, but these are
used by Polymer's core-doc-viewer to generate doc pages for its elements, and
Polymer suggests that others do the same. example:
http://polymerlabs.github.io/seed-element/components/seed-element/

Note that the Google Web Components style guide (which is intended for
public-facing Google components, so not 100% relevant in Chromium) mandates
@attribute, @property, @method, @event, and @default and @required when
applicable: https://github.com/GoogleWebComponents/style-guide

+     */
+    checked: {
+      value: false,
+      reflect: true
+    },
+

[Dan Beam, 2015/02/13 21:56:50]

why so spacious?

[Oren Blasberg, 2015/02/17 18:23:38]

Done.

+
+    /**
+     * 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
+    },
+  },
+
+  toggle: function() {
+    this.$.checkbox.toggle();
+  },
+
+  ready: function() {
+    this.$.events.forward(this.$.checkbox, ['change']);
+  },
+});