MD Settings: Privacy: Show dialog when changing do-not-track

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/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_vars_css.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.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 90 matching lines @@
               <paper-button on-tap="onRestartTap_" id="restart"
                   class="more-actions">
                 $i18n{restart}
               </paper-button>
             </template>
           </settings-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}">
+          <settings-toggle-button id="doNotTrack" class="start"
+              pref="{{prefs.enable_do_not_track}}" label="$i18n{doNotTrack}"
+              on-change="onDoNotTrackChange_" no-set-pref>
           </settings-toggle-button>
         </div>
 <if expr="chromeos">
         <div class="settings-box">
           <settings-toggle-button class="start"
               pref="{{prefs.cros.device.attestation_for_content_protection_enabled}}"
               label="$i18n{enableContentProtectionAttestation}">
           </settings-toggle-button>
         </div>
         <div class="settings-box">
@@ skipping 325 matching lines @@
           <template is="dom-if"
               if="[[prefs.settings.privacy.drm_enabled.value]]">
             <category-setting-exceptions
                 category="{{ContentSettingsTypes.PROTECTED_CONTENT}}">
             </category-setting-exceptions>
           </template>
 </if>
         </settings-subpage>
       </template>
     </settings-animated-pages>
+
+    <!-- Confirm doNotTrack dialog -->
+    <dialog is="cr-dialog" id="confirmDoNotTrackDialog"
+        close-text="$i18n{close}" on-cancel="onDoNotTrackDialogCancel_">
+      <div class="title">$i18n{doNotTrackDialogTitle}</div>
+      <div class="body">$i18n{doNotTrackDialogMessage}</div>
+      <div class="button-container">
+        <paper-button class="cancel-button"
+            on-tap="onDoNotTrackDialogCancel_">
+          $i18n{cancel}
+        </paper-button>
+        <paper-button class="action-button"
+            on-tap="onDoNotTrackDialogConfirm_">
+          $i18n{confirm}
+        </paper-button>
+      </div>
+    </dialog>

[Dan Beam, 2017/03/07 23:08:46]

please put in a dom-if, and possibly closer to the original toggle button so
focus works more correctly

[stevenjb, 2017/03/07 23:19:02]

Could you explain "focus works more correctly"? I wasn't aware that the location
of the dialog was significant. (I have another similar use case that I may want
to fix also).

[stevenjb, 2017/03/07 23:24:53]

I just noticed a clear-browsing-data-dialog at the top of the file (outside of
settings-animated-pages). Is that better, or should that be moved also?

[Dan Beam, 2017/03/08 00:00:50]

when the dialog hides, focus is kept where it was in the DOM.  we haven't yet
fully audited this, but you get weird focus results the first time you press tab
after dialogs close because they're not placed right by the component that
triggers them.

ultimately the focus stuff will have to be cleaned up globally.

i'm more interested in dom-if because this is an uncommon dialog.

[stevenjb, 2017/03/08 01:15:21]

Understood WRT dom-if.

So, it sounds like the dialog should ideally be placed before the toggle, so
that the toggle receives focus when 'tab' is pressed after closing the dialog?
That seems to more-or-less work, although the focus outline after closing the
dialog is a bit odd. Still, the behavior is more important, so done.

+
   </template>
   <script src="privacy_page.js"></script>
 </dom-module>