MD Settings: Migrate settings-toggle-button to use cr-toggle.

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

chrome/browser/resources/settings/controls/compiled_resources2.gyp

@@ -101,6 +101,7 @@
     {
       'target_name': 'settings_toggle_button',
       'dependencies': [
+        '<(DEPTH)/ui/webui/resources/cr_elements/cr_toggle/compiled_resources2.gyp:cr_toggle',
         'settings_boolean_control_behavior',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],

chrome/browser/resources/settings/controls/settings_toggle_button.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="settings_boolean_control_behavior.html">
 <link rel="import" href="../settings_shared_css.html">
@@ -62,13 +62,12 @@
         <cr-policy-pref-indicator pref="[[pref]]" icon-aria-label="[[label]]">
         </cr-policy-pref-indicator>
       </template>
-      <paper-toggle-button id="control" checked="{{checked}}"
-          on-change="notifyChangedByUserInteraction"
+      <cr-toggle id="control" checked="{{checked}}"
+          on-change="onChange_"
           aria-label$="[[getAriaLabel_(label, ariaLabel)]]"
-          aria-describedby="subLabel" on-up="resetTrackLock_"
-          disabled="[[controlDisabled_(disabled, pref)]]"
-          on-tap="onToggleTap_">
-      </paper-toggle-button>
+          aria-describedby="subLabel"
+          disabled="[[controlDisabled_(disabled, pref)]]">
+      </cr-toggle>
     </div>
   </template>
   <script src="settings_toggle_button.js"></script>

chrome/browser/resources/settings/controls/settings_toggle_button.js

@@ -58,17 +58,6 @@ Polymer({
     return this.label || this.ariaLabel;
   },
 
-  /**
-   * Handle taps directly on the toggle (see: onLabelWrapperTap_ for non-toggle
-   * taps).
-   * @param {!Event} e
-   * @private
-   */
-  onToggleTap_: function(e) {
-    // Stop the event from propagating to avoid firing two 'changed' events.
-    e.stopPropagation();
-  },
-
   /** @private */
   onDisableOrPrefChange_: function() {
     if (this.controlDisabled_()) {
@@ -79,28 +68,34 @@ Polymer({
   },
 
   /**
-   * Handle non-toggle button taps (see: onToggleTap_ for toggle taps).
+   * Handles non cr-toggle button taps (cr-toggle handles its own tap events
+   * which don't bubble).
    * @param {!Event} e
    * @private
    */
   onHostTap_: function(e) {
-    // Stop the event from propagating to avoid firing two 'changed' events.
     e.stopPropagation();
     if (this.controlDisabled_())
       return;
 
+    // Ignore this |tap| event, if the interaction sequence
+    // (pointerdown+pointerup) began within the cr-toggle itself.
+    if (/** @type {!CrToggleElement} */ (this.$.control)
+            .shouldIgnoreHostTap(e)) {
+      return;
+    }
+
     this.checked = !this.checked;
     this.notifyChangedByUserInteraction();
     this.fire('change');
   },
 
   /**
-   * TODO(scottchen): temporary fix until polymer gesture bug resolved. See:
-   * https://github.com/PolymerElements/paper-slider/issues/186
+   * @param {!CustomEvent} e
    * @private
    */
-  resetTrackLock_: function() {
-    // Run tap.reset in next run-loop to avoid reversing the current tap event.
-    setTimeout(() => Polymer.Gestures.gestures.tap.reset());
+  onChange_: function(e) {
+    this.checked = /** @type {boolean} */ (e.detail);
+    this.notifyChangedByUserInteraction();
   },
 });

ui/webui/resources/cr_elements/cr_toggle/cr_toggle.js

@@ -55,6 +55,9 @@ Polymer({
   /** @private {boolean} */
   pointerMoveFired_: false,
 
+  /** @private {number} */
+  lastPointerUpTime_: 0,
+
   /** @override */
   attached: function() {
     // Note: Doing the same in ready instead of attached produces incorrect
@@ -101,7 +104,8 @@ Polymer({
   },
 
   /** @private */
-  onPointerUp_: function() {
+  onPointerUp_: function(e) {
+    this.lastPointerUpTime_ = e.timeStamp;
     this.removeEventListener('pointermove', this.boundPointerMove_);
   },
 
@@ -114,7 +118,7 @@ Polymer({
     if (e.button != 0)
       return;
 
-    // This is necessary to have follow up events fire on |this|, even
+    // This is necessary to have follow up pointer events fire on |this|, even
     // if they occur outside of its bounds.
     this.setPointerCapture(e.pointerId);
     this.pointerDownX_ = e.clientX;
@@ -123,7 +127,11 @@ Polymer({
   },
 
   /** @private */
-  onTap_: function() {
+  onTap_: function(e) {
+    // Prevent |tap| event from bubbling. It can cause parents of this elements
+    // to erroneously re-toggle this control.
+    e.stopPropagation();
+
     // If pointermove fired it means that user tried to drag the toggle button,
     // and therefore its state has already been handled within the pointermove
     // handler. Do nothing here.
@@ -135,6 +143,21 @@ Polymer({
     this.toggleState_(false);
   },
 
+  /**
+   * Whether the host of this element should handle a 'tap' event it received,
+   * to be used when tapping on the parent is supposed to toggle the cr-toggle.
+   *
+   * This is necessary to avoid a corner case when pointerdown is initiated
+   * in cr-toggle, but pointerup happens outside the bounds of cr-toggle, which
+   * ends up firing a 'tap' event on the parent (see context at crbug.com/689158
+   * and crbug.com/768555).
+   * @param {!Event} e
+   * @return {boolean}
+   */
+  shouldIgnoreHostTap: function(e) {
+    return e.detail.sourceEvent.timeStamp == this.lastPointerUpTime_;
+  },
+
   /**
    * @param {boolean} fromKeyboard
    * @private