MD Settings: change how tap is handled on custom toggle rows

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

[Dan Beam, 2017/02/08 23:12:04]

actionable or on-tap on the settings-box itself is a litttttle different than on
nearby <settings-toggle-box>

technically the closest would be if we made a wrapper <div> inside of <div
class="settings-box"> which would act similarly to <settings-toggle-button> as a
wrapper around <paper-toggle-button>, but I don't really see much benefit to
that

[dpapad, 2017/02/08 23:46:05]

Wrapping the <div> and the <paper-toggle-button> with another <div> would
probably break the effects of the "start" CSS class, no?

-          <div class="start">$i18n{safeBrowsingEnableExtendedReporting}</div>
+          <div class="start" on-tap="onSafeBrowsingExtendedReportingTap_"
+              actionable>
+            $i18n{safeBrowsingEnableExtendedReporting}
+          </div>
           <paper-toggle-button id="safeBrowsingExtendedReportingControl"
-              on-tap="onSafeBrowsingExtendedReportingControlTap_"
+              on-tap="onSafeBrowsingExtendedReportingTap_"
               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">

[Dan Beam, 2017/02/08 23:12:04]

in this case we really don't want on-tap on the settings-box or on a container
because it might affect the results as one is tapping the restart button (which
is a can of worms)

[dpapad, 2017/02/08 23:46:05]

I don't have a 100% understanding of our requirements. Here is the problem I see
with not having the tap handler on the settings-box: The click target is
narrower than the settings-box row, see http://imgur.com/a/eqOSI.

Q1: Is this Alan's original intention?
Q2: Regardless of yes/no, should we be consistent across all our settings-box
instances?

For example in settings-box instances that open a subpage the click target
covers the entire row, including the padding on the left, see
http://imgur.com/a/fO4bT.

If we want the entire row always be clickable, I don't see another option othen
than having the click/tap handler should be on settings-box, and any buttons
inside the row (like the 'restart' button), having to call stopPropagation().

[Dan Beam, 2017/02/09 00:27:40]

that's the same for all existing <settings-toggle-box>, afaik
unclear
yes, which is why I'm NOT using actionable on-top on the settings-box.
yes, understood, those are different that a majority of <settings-toggle-button>
I think we want consistency.

-          <div class="start">$i18n{enableLogging}</div>
+          <div class="start" on-tap="onMetricsReportingTap_"
+              actionable$="[[!metricsReporting_.managed]]">
+            $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-tap="onMetricsReportingTap_"
               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 324 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>