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

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_vars_css.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.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-icon-button/paper-icon-button-light.html">
 <link rel="import" href="../clear_browsing_data_dialog/clear_browsing_data_dialog.html">
 <link rel="import" href="../controls/settings_toggle_button.html">
 <link rel="import" href="../lifetime_browser_proxy.html">
@@ skipping 63 matching lines @@
               label="$i18n{searchSuggestPref}">
           </settings-toggle-button>
         </div>
         <div class="settings-box"
             hidden="[[!pageVisibility.networkPrediction]]">
           <settings-toggle-button class="start"
               pref="{{prefs.net.network_prediction_options}}"
               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>
         <div class="settings-box">
           <settings-toggle-button class="start"
               pref="{{prefs.safebrowsing.enabled}}"
               label="$i18n{safeBrowsingEnableProtection}">
           </settings-toggle-button>
         </div>
 <if expr="_google_chrome">
 <if expr="chromeos">
         <div class="settings-box">
           <settings-toggle-button class="start"
               pref="{{prefs.cros.metrics.reportingEnabled}}"
               label="$i18n{enableLogging}">
           </settings-toggle-button>
         </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">
               $i18n{restart}
             </paper-button>
           </template>
           <template is="dom-if" if="[[metricsReporting_.managed]]" restamp>
             <iron-icon id="indicator" tabindex=0 icon="cr:domain"></iron-icon>
             <paper-tooltip for="indicator" position="top"
                 fit-to-visible-bounds>
               $i18n{controlledSettingPolicy}
             </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>
         </div>
 </if><!-- not chromeos -->
 </if><!-- _google_chrome -->
         <div class="settings-box">
           <settings-toggle-button class="start"
               pref="{{prefs.enable_do_not_track}}"
               label="$i18n{doNotTrack}">
@@ skipping 302 matching lines @@
           <category-setting-exceptions
               category="{{ContentSettingsTypes.PROTECTED_CONTENT}}">
           </category-setting-exceptions>
 </if>
         </settings-subpage>
       </template>
     </settings-animated-pages>
   </template>
   <script src="privacy_page.js"></script>
 </dom-module>