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

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 3e2e0de7d61dfd29822b855f83f6444b4bcca30f..7504c5525d422017f3fe06321bb119faad2d036b 100644
--- a/chrome/browser/resources/settings/privacy_page/privacy_page.html
+++ b/chrome/browser/resources/settings/privacy_page/privacy_page.html
@@ -1,4 +1,5 @@
 <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">
@@ -109,9 +110,9 @@
 </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">
@@ -457,6 +458,24 @@
         </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>