MD Settings: For rows containing paper-toggle-buttons, make entire row clickable.

chrome/browser/resources/settings/privacy_page/privacy_page.html

Index: chrome/browser/resources/settings/privacy_page/privacy_page.html
diff --git a/chrome/browser/resources/settings/privacy_page/privacy_page.html b/chrome/browser/resources/settings/privacy_page/privacy_page.html
index 4bf462434a60e6f650baab76ea9c82b6e52718f2..ec79c623ae370e14fcdbf596ae800f544c47d369 100644
--- a/chrome/browser/resources/settings/privacy_page/privacy_page.html
+++ b/chrome/browser/resources/settings/privacy_page/privacy_page.html
@@ -81,10 +81,12 @@
               label="$i18n{networkPredictionEnabled}">
           </settings-toggle-button>
         </div>
-        <div class="settings-box">
+        <div class="settings-box" actionable
+            on-tap="onSafeBrowsingExtendedReportingControlTap_">
           <div class="start">$i18n{safeBrowsingEnableExtendedReporting}</div>
           <paper-toggle-button id="safeBrowsingExtendedReportingControl"
-              on-tap="onSafeBrowsingExtendedReportingControlTap_"
+              on-change="onSafeBrowsingExtendedReportingControlTap_"

[Dan Beam, 2017/02/10 17:20:36]

while your mouse is down dragging, other toggles change their value at each
edge.

starting here:

0==

grabbing the knob and moving to here without letting go

==0

should change the effective value.  without letting go, moving between

0==
==0

should continue to change the effective value.

does that work with your CL?  i'd guess not, because 'change' is only dispatched
at the end of this madness, whereas iron-change occurs the whole time.

[scottchen, 2017/02/10 18:49:57]

it does - see https://drive.google.com/open?id=0ByIc0PEad7DmWndyR3dUOVAxRFU

+              on-tap="doNothing_"

[Dan Beam, 2017/02/10 17:20:36]

this is very similar to
https://codereview.chromium.org/2684853003/diff/20001/chrome/browser/resource...

which has a stopPropagation() branch for taps

it's a little nicer but of on-tap was ever changed to on-click on the parent or
on the child, this would potentially still have double events.  which is why i
pushed them both through the same method and asserted they're the same e.type
(event type).

[scottchen, 2017/02/10 18:49:57]

I think this can be handled if we encapsulate it in a is="contained-toggle" and
just do something like...

html:
<div is=contained-toggle handler="[[onThisTriggered_]]">
    <paper-toggle-button checked="[[value]]" ...(other attr EXCEPT any on-x
handler)/>
</div>


contained-toggle.js (pseudo-code):
     var eventName = "tap"; //if you ever think we would listen to click instead
of tap
     this.root.addEventListener(eventName, handler);

     var toggle = this.root.querySelector("paper-button-toggle");
     toggle.addEventListener("change",handler);
     toggle.addEventListener(eventName, doNothing_);

I believe the above solution would solve your concern, and this'll also help us
reduce the boilerplate code we need to type up each time we want to use a
"custom toggle element".

               checked="[[safeBrowsingExtendedReportingEnabled_]]">
           </paper-toggle-button>
         </div>
@@ -104,7 +106,8 @@
         </div>
 </if><!-- chromeos -->
 <if expr="not chromeos">
-        <div class="settings-box">
+        <div class="settings-box" on-tap="onMetricsReportingControlTap_"
+            actionable$="[[!metricsReporting_.managed]]">
           <div class="start">$i18n{enableLogging}</div>
           <template is="dom-if" if="[[showRestart_]]" restamp>
             <paper-button on-tap="onRestartTap_" id="restart">
@@ -119,7 +122,7 @@
             </paper-tooltip>
           </template>
           <paper-toggle-button id="metricsReportingControl"
-              on-tap="onMetricsReportingControlTap_"
+              on-change="onMetricsReportingControlTap_" on-tap="doNothing_"
               checked="[[metricsReporting_.enabled]]"
               disabled="[[metricsReporting_.managed]]">
           </paper-toggle-button>