WebUI[MD refresh]: add label to md-refreshed cr-checkbox.

this CL adds styling to make cr-checkbox looks like the md-refresh mock.

Also added a slot to cr-checkbox for allowing labels.

Also replaced one checkbox in reset-profile-dialog as a pilot demo. There
will be a follow-up CL to replace all paper-checkbox to cr-checkbox.

Bug: 836391

Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Ia55925bc91c95407abe5b775758f1b9b4ef97b05
Reviewed-on: https://chromium-review.googlesource.com/1033346
Commit-Queue: Scott Chen <scottchen@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#555617}

chrome/browser/resources/md_history/history_item.html

@@ -175,9 +175,8 @@
           on-mousedown="onItemMousedown_"
           on-click="onItemClick_">
         <cr-checkbox id="checkbox" checked="[[selected]]" unresolved
-            on-mousedown="onCheckboxClick_"
-            on-keydown="onCheckboxClick_"
-            on-change="onCheckboxChange_"
+            on-mousedown="onCheckboxClick_" on-keydown="onCheckboxClick_"
+            on-change="onCheckboxChange_" class="no-label"
             hidden="[[selectionNotAllowed_]]"
             disabled="[[selectionNotAllowed_]]"
             aria-label$="[[getEntrySummary_(item)]]"></cr-checkbox>

chrome/browser/resources/settings/reset_page/reset_profile_dialog.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/html/action_link.html">
 <link rel="import" href="chrome://resources/html/action_link_css.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">
 <link rel="import" href="reset_browser_proxy.html">
 <link rel="import" href="../i18n_setup.html">
@@ -45,8 +45,8 @@
         </paper-button>
       </div>
       <div slot="footer">
-        <paper-checkbox id="sendSettings" checked>
-          $i18nRaw{resetPageFeedback}</paper-checkbox>
+        <cr-checkbox id="sendSettings" checked>
+          $i18nRaw{resetPageFeedback}</cr-checkbox>
       </div>
     </cr-dialog>
   </template>

chrome/browser/resources/settings/reset_page/reset_profile_dialog.js

@@ -76,13 +76,8 @@ Polymer({
       this.browserProxy_.onHideResetProfileDialog();
     });
 
-    this.$$('paper-checkbox a')
+    this.$$('cr-checkbox a')
         .addEventListener('click', this.onShowReportedSettingsTap_.bind(this));
-    // Prevent toggling of the checkbox when hitting the "Enter" key on the
-    // link.
-    this.$$('paper-checkbox a').addEventListener('keydown', function(e) {
-      e.stopPropagation();
-    });
   },
 
   /** @private */

chrome/test/data/webui/cr_elements/cr_checkbox_test.js

@@ -7,8 +7,15 @@ suite('cr-checkbox', function() {
 
   setup(function() {
     PolymerTest.clearBody();
-    checkbox = document.createElement('cr-checkbox');
-    document.body.appendChild(checkbox);
+    document.body.innerHTML = `
+      <cr-checkbox id="checkbox">
+        <div id="label">label
+          <a id="link">link</a>
+        </div>
+      </cr-checkbox>
+    `;
+
+    checkbox = document.getElementById('checkbox');
     assertNotChecked();
   });
 
@@ -39,13 +46,17 @@ suite('cr-checkbox', function() {
     assertEquals('false', checkbox.getAttribute('aria-disabled'));
   }
 
-  /** @param {string} keyName The name of the key to trigger. */
-  function triggerKeyPressEvent(keyName) {
+  /**
+   * @param {string} keyName The name of the key to trigger.
+   * @param {HTMLElement=} element
+   */
+  function triggerKeyPressEvent(keyName, element) {
+    element = element || checkbox;
     // Note: MockInteractions incorrectly populates |keyCode| and |code| with
     // the same value. Since the prod code only cares about |code| being 'Enter'
     // or 'Space', passing a string as a 2nd param, instead of a number.
     MockInteractions.keyEventOn(
-        checkbox, 'keypress', keyName, undefined, keyName);
+        element, 'keypress', keyName, undefined, keyName);
   }
 
   // Test that the control is checked when the user taps on it (no movement
@@ -80,6 +91,7 @@ suite('cr-checkbox', function() {
     checkbox.checked = false;
     assertNotChecked();
 
+    // Wait 1 cycle to make sure change-event was not fired.
     setTimeout(done);
   });
 
@@ -111,6 +123,34 @@ suite('cr-checkbox', function() {
 
     checkbox.click();
     triggerKeyPressEvent('Enter');
+
+    // Wait 1 cycle to make sure change-event was not fired.
+    setTimeout(done);
+  });
+
+  test('LabelDisplay', function() {
+    const labelContainer = checkbox.$['label-container'];
+    // Test that there's actually a label that's more than just the padding.
+    assertTrue(labelContainer.offsetWidth > 20);
+
+    checkbox.classList.add('no-label');
+    assertEquals('none', getComputedStyle(labelContainer).display);
+  });
+
+  test('ClickedOnLinkDoesNotToggleCheckbox', function(done) {
+    test_util.eventToPromise('change', checkbox).then(function() {
+      assertFalse(true);
+    });
+
+    assertNotChecked();
+    link = document.getElementById('link');
+    link.click();
+    assertNotChecked();
+
+    triggerKeyPressEvent('Enter', link);
+    assertNotChecked();
+
+    // Wait 1 cycle to make sure change-event was not fired.
     setTimeout(done);
   });
 });

chrome/test/data/webui/settings/reset_page_test.js

@@ -97,7 +97,7 @@ cr.define('settings_reset_page', function() {
         const dialog = resetPage.$$('settings-reset-profile-dialog');
         assertTrue(!!dialog);
 
-        const checkbox = dialog.$$('[slot=footer] paper-checkbox');
+        const checkbox = dialog.$$('[slot=footer] cr-checkbox');
         assertTrue(checkbox.checked);
         const showReportedSettingsLink = dialog.$$('[slot=footer] a');
         assertTrue(!!showReportedSettingsLink);

ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-behaviors/paper-ripple-behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 
@@ -7,14 +8,16 @@
   <template>
     <style>
       :host {
+        align-items: center;
         cursor: pointer;
-        line-height: 0;
+        display: flex;
         outline: none;
         user-select: none;
       }
 
       :host([disabled]) {
         cursor: initial;
+        opacity: 0.38;
         pointer-events: none;
       }
 
@@ -22,19 +25,17 @@
         background: none;
         border: none;
         cursor: pointer;
-        display: inline-block;
         height: 16px;
         margin: 0;
         outline: none;
         padding: 0;
         position: relative;
         transform: none;  /* Checkboxes shouldn't flip even in RTL. */
-        vertical-align: middle;
         width: 16px;
       }
 
       #checkmark {
-        border: 2px solid var(--secondary-text-color);
+        border: 2px solid var(--google-grey-700);
         border-radius: 2px;
         display: block;
         height: 12px;
@@ -58,8 +59,8 @@
       }
 
       :host([checked]) #checkmark {
-        background: var(--google-blue-500);
-        border-color: var(--google-blue-500);
+        background: var(--google-blue-600);
+        border-color: var(--google-blue-600);
       }
 
       :host([checked]) #checkmark::after {
@@ -70,10 +71,13 @@
       }
 
       paper-ripple {
-        color: var(--primary-text-color);
+        color: var(--cr-controls-background-grey);
         height: 40px;
         left: -12px;
-        opacity: 0.5;
+        /* TODO(scottchen): this depends on opacity: 0.4 to compound with
+           paper-ripple's internal opacity: 0.25 to become 0.1. Use custom
+           property instead once paper-ripple supports it. */
+        opacity: 0.4;
         pointer-events: none;
         top: -12px;
         transition: color linear 80ms;
@@ -81,13 +85,21 @@
       }
 
       :host([checked]) paper-ripple {
-        color: var(--primary-color);
+        color: var(--google-blue-600);
       }
 
       :host-context([dir=rtl]) paper-ripple {
         left: auto;
         right: -12px;
       }
+
+      #label-container {
+        -webkit-padding-start: 20px;
+      }
+
+      :host(.no-label) #label-container {
+        display: none;
+      }
     </style>
     <!-- Mousing down then moving cursor out of this element should not trigger
          click on the parent. With <button> this works as expected, while <div>
@@ -95,6 +107,7 @@
     <button id="checkbox" tabindex="-1">
       <span id="checkmark"></span>
     </button>
+    <div id="label-container"><slot></slot></div>
   </template>
   <script src="cr_checkbox.js"></script>
 </dom-module>

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

@@ -5,7 +5,9 @@
 /**
  * @fileoverview 'cr-checkbox' is a component similar to native checkbox. It
  * fires a 'change' event *only* when its state changes as a result of a user
- * interaction.
+ * interaction. By default it assumes there will be child(ren) passed in to be
+ * used as labels. If no label will be provided, a .no-label class should be
+ * added to hide the spacing between the checkbox and the label container.
  */
 Polymer({
   is: 'cr-checkbox',
@@ -71,9 +73,21 @@ Polymer({
     this.$$('paper-ripple').holdDown = false;
   },
 
-  /** @private */
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  shouldHandleEvent_: function(e) {
+    // Actions on a link within the label should not change checkbox state.
+    return !this.disabled && e.target.tagName != 'A';
+  },
+
+  /**
+   * @param {!Event} e
+   * @private
+   */
   onClick_: function(e) {
-    if (this.disabled)
+    if (!this.shouldHandleEvent_(e))
       return;
 
     // Prevent |click| event from bubbling. It can cause parents of this
@@ -104,13 +118,11 @@ Polymer({
    * @private
    */
   onKeyPress_: function(e) {
-    if (this.disabled)
+    if (!this.shouldHandleEvent_(e) || (e.code != 'Space' && e.code != 'Enter'))
       return;
 
-    if (e.code == 'Space' || e.code == 'Enter') {
-      e.preventDefault();
-      this.toggleState_(true);
-    }
+    e.preventDefault();
+    this.toggleState_(true);
   },
 
   // customize the element's ripple

ui/webui/resources/cr_elements/paper_button_style_css.html

@@ -13,7 +13,8 @@
         --disabled-color: rgb(241, 243, 244);
         /* Blue-ish color used either as a background or as a text color,
            depending on the type of button. */
-        --text-or-bg-color: rgb(26, 115, 232);
+        --text-or-bg-color: var(--google-blue-600);
+        --paper-button-ink-color: var(--paper-grey-600);
 
         border: 1px solid rgb(218, 220, 224);
         border-radius: 4px;

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -117,5 +117,9 @@
     }
 
     --cr-container-shadow-max-opacity: 1;
+
+    /** MD Refresh Styles */
+    --google-blue-600: #1A73E8;
+    --cr-controls-background-grey: #2A3146;
   }
 </style>