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_"
               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_"

[Dan Beam, 2017/02/10 07:11:36]

this changes the clickable area (compared to other rows implemented with
<settings-toggle-button>)

[Dan Beam, 2017/02/10 07:11:36]

when you tap the box, you want to invert the value

+            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_"

[Dan Beam, 2017/02/10 07:11:36]

but when this changes, you DON'T want to invert the value (it just changed)

[Dan Beam, 2017/02/10 07:11:36]

this doesn't work when you drag the toggle

[Dan Beam, 2017/02/10 07:14:51]

allllso, when you tap on the toggle, you get double events

first, you get this change event

THEN, you get the on-tap of the parent.

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

Acknowledged. Fixed with a later patch.

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

on-tap doesn't fire, but on-change seems to fire when dragged.

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

depends on which value. You don't wanna invert .checked, but you do wanna invert
metricsReporting_.enabled; based on my experiment, changing the checkbox value
doesn't change metricsReporting_.enabled unless the handler says to do so
(assuming checked= is one-way bounded). This is also why if you just have
on-tap, dragging doesn't work in two windows.

               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>