Adds the cr-checkbox wrapper element around paper-checkbox. Sample in chrome://md-settings.

BUG=457513 Review URL: https://codereview.chromium.org/909313003 Cr-Commit-Position: refs/heads/master@{#317190}

Adds the cr-checkbox wrapper element around paper-checkbox. Sample in chrome://md-settings.
BUG=457513 Review URL: https://codereview.chromium.org/909313003 Cr-Commit-Position: refs/heads/master@{#317190}
1493ca1c · orenb · Commit bot · 502c6e98 · 1493ca1c · 1493ca1c
Commit 1493ca1c authored Feb 19, 2015 by orenb Committed by Commit bot Feb 20, 2015
6 changed files
--- a/chrome/browser/resources/md_settings/md_settings.html
+++ b/chrome/browser/resources/md_settings/md_settings.html
@@ -3,6 +3,8 @@
 <head>
  <meta charset="utf-8">
  <title>Settings</title>
+  <link rel="import"
+      href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
  <link rel="import"
      href="chrome://resources/cr_elements/cr_toggle_button/cr_toggle_button.html">
  <link rel="import"
@@ -15,6 +17,7 @@
  <div class="main">
    <paper-button id="manage-button" raised>Manage</paper-button>
    <cr-toggle-button checked></cr-toggle-button>
+    <cr-checkbox checked></cr-checkbox>
  </div>
 </body>
 </html>
--- a/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.css
+++ b/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.css
+/* 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. */
+
+:host {
+  display: inline-block;
+}
--- a/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.html
+++ b/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.html
+<link rel="import"
+    href="chrome://resources/polymer/paper-checkbox/paper-checkbox.html">
+<link rel="import"
+    href="chrome://resources/cr_elements/cr_events/cr_events.html">
+
+<polymer-element name="cr-checkbox">
+  <template>
+    <link rel="stylesheet" href="cr_checkbox.css">
+    <cr-events id="events"></cr-events>
+    <paper-checkbox id="checkbox"
+        checked?="{{checked}}" disabled?="{{disabled}}" label="{{label}}">
+    </paper-checkbox>
+  </template>
+  <script src="cr_checkbox.js"></script>
+</polymer-element>
--- a/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.js
+++ b/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.js
+/* 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
+ */
+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},
+
+    /**
+     * 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']);
+  },
+});
--- a/ui/webui/resources/cr_elements_resources.grdp
+++ b/ui/webui/resources/cr_elements_resources.grdp
 <?xml version="1.0" encoding="utf-8"?>
 <grit-part>
+  <structure name="IDR_CR_ELEMENTS_CR_CHECKBOX_CSS"
+             file="../../webui/resources/cr_elements/cr_checkbox/cr_checkbox.css"
+             type="chrome_html" />
+  <structure name="IDR_CR_ELEMENTS_CR_CHECKBOX_HTML"
+             file="../../webui/resources/cr_elements/cr_checkbox/cr_checkbox.html"
+             type="chrome_html" />
+  <structure name="IDR_CR_ELEMENTS_CR_CHECKBOX_JS"
+             file="../../webui/resources/cr_elements/cr_checkbox/cr_checkbox.js"
+             type="chrome_html" />
  <structure name="IDR_CR_ELEMENTS_CR_TOGGLE_BUTTON_CSS"
             file="../../webui/resources/cr_elements/cr_toggle_button/cr_toggle_button.css"
             type="chrome_html" />

--- a/ui/webui/resources/polymer_resources.grdp
+++ b/ui/webui/resources/polymer_resources.grdp
@@ -204,6 +204,15 @@
  <structure name="IDR_POLYMER_PAPER_BUTTON_PAPER_BUTTON_HTML"
             file="../../../third_party/polymer/components-chromium/paper-button/paper-button.html"
             type="chrome_html" />
+  <structure name="IDR_POLYMER_PAPER_CHECKBOX_PAPER_CHECKBOX_CSS"
+             file="../../../third_party/polymer/components-chromium/paper-checkbox/paper-checkbox.css"
+             type="chrome_html" />
+  <structure name="IDR_POLYMER_PAPER_CHECKBOX_PAPER_CHECKBOX_EXTRACTED_JS"
+             file="../../../third_party/polymer/components-chromium/paper-checkbox/paper-checkbox-extracted.js"
+             type="chrome_html" />
+  <structure name="IDR_POLYMER_PAPER_CHECKBOX_PAPER_CHECKBOX_HTML"
+             file="../../../third_party/polymer/components-chromium/paper-checkbox/paper-checkbox.html"
+             type="chrome_html" />
  <structure name="IDR_POLYMER_PAPER_DIALOG_PAPER_ACTION_DIALOG_EXTRACTED_JS"
             file="../../../third_party/polymer/components-chromium/paper-dialog/paper-action-dialog-extracted.js"
             type="chrome_html" />