[tabbed options] add instant confirm dialog.

When the user clicks enable for the first time, it shows the dialog. After the user accepts for the first time, it should never show again.

BUG=61042
TEST=manual

Review URL: http://codereview.chromium.org/4524001

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@65267 0039d316-1c4b-4281-b951-d872f2087c98

8 files changed, 98 insertions, 14 deletions

diff --git a/chrome/browser/resources/options.html b/chrome/browser/resources/options.html
index e811c3b..f28de4f 100644
--- a/chrome/browser/resources/options.html
+++ b/chrome/browser/resources/options.html
@@ -117,6 +117,7 @@
 <script src="options/font_settings.js"></script>
 <script src="options/font_settings_ui.js"></script>
 <script src="options/import_data_overlay.js"></script>
+<script src="options/instant_confirm_overlay.js"></script>
 <script src="options/passwords_exceptions.js"></script>
 <script src="options/passwords_exceptions_list.js"></script>
 <script src="options/personal_options.js"></script>
@@ -139,6 +140,7 @@ var CookiesView = options.CookiesView;
 var EditSearchEngineOverlay = options.EditSearchEngineOverlay;
 var FontSettings = options.FontSettings;
 var ImportDataOverlay = options.ImportDataOverlay;
+var InstantConfirmOverlay = options.InstantConfirmOverlay;
 var OptionsPage = options.OptionsPage;
 var PasswordsExceptions = options.PasswordsExceptions;
 var PersonalOptions = options.PersonalOptions;
@@ -189,6 +191,7 @@ function load() {
   OptionsPage.registerOverlay(ClearBrowserDataOverlay.getInstance());
   OptionsPage.registerOverlay(EditSearchEngineOverlay.getInstance());
   OptionsPage.registerOverlay(ImportDataOverlay.getInstance());
+  OptionsPage.registerOverlay(InstantConfirmOverlay.getInstance());
 
   if (cr.isChromeOS) {
     OptionsPage.register(AccountsOptions.getInstance());
@@ -283,6 +286,7 @@ window.onpopstate = function(e) {
   <include src="options/clear_browser_data_overlay.html">
   <include src="options/edit_search_engine_overlay.html">
   <include src="options/import_data_overlay.html">
+  <include src="options/instant_confirm_overlay.html">
   <if expr="pp_ifdef('chromeos')">
      <include src="options/chromeos_language_add_language_overlay.html">
      <include
diff --git a/chrome/browser/resources/options/browser_options.html b/chrome/browser/resources/options/browser_options.html
index 2e8c650..ec1a30b 100644
--- a/chrome/browser/resources/options/browser_options.html
+++ b/chrome/browser/resources/options/browser_options.html
@@ -72,12 +72,15 @@
           <button id="defaultSearchManageEnginesButton"
               i18n-content="defaultSearchManageEnginesLink"></button>
         </div>
-        <!-- TODO(estade): toggling this needs to launch the warning dialog -->
         <label class="checkbox" id="instantOption">
           <!-- TODO(estade): metric? -->
           <input type="checkbox" id="instantEnableCheckbox"
                  pref="instant.enabled">
           <span i18n-content="instantName"></span>
+          <!-- This hidden checkbox allows us to get/set the state of the
+               confirm_dialog_shown pref -->
+          <input type="checkbox" class="hidden" id="instantDialogShown"
+                 pref="instant.confirm_dialog_shown">
         </label>
         <div class="suboption">
           <span i18n-content="instantWarningText"></span>
diff --git a/chrome/browser/resources/options/browser_options.js b/chrome/browser/resources/options/browser_options.js
index 04b8b50..df4b55e 100644
--- a/chrome/browser/resources/options/browser_options.js
+++ b/chrome/browser/resources/options/browser_options.js
@@ -54,6 +54,16 @@ cr.define('options', function() {
         chrome.send('coreOptionsUserMetricsAction',
             ['Options_ManageSearchEngines']);
       };
+      $('instantEnableCheckbox').onclick = function(event) {
+        var alreadyConfirmed = $('instantDialogShown').checked;
+
+        if (this.checked && !alreadyConfirmed) {
+          // Leave disabled for now. The PrefCheckbox handler already set it to
+          // true so undo that.
+          Preferences.setBooleanPref(this.pref, false, this.metric);
+          OptionsPage.showOverlay('instantConfirmOverlay');
+        }
+      };
 
       var homepageField = $('homepageURL');
       $('homepageUseNTPButton').onchange =
diff --git a/chrome/browser/resources/options/browser_options_page.css b/chrome/browser/resources/options/browser_options_page.css
index a68cf78..640554f 100644
--- a/chrome/browser/resources/options/browser_options_page.css
+++ b/chrome/browser/resources/options/browser_options_page.css
@@ -38,3 +38,14 @@
 #defaultBrowserState.current {
   color: #008800;
 }
+
+#instantConfirmText {
+  font-family: inherit;
+  white-space: pre-wrap;
+  width: 500px;
+}
+
+#instantConfirmLearnMore {
+  position: absolute;
+  bottom: 18px;
+}
diff --git a/chrome/browser/resources/options/import_data_overlay.js b/chrome/browser/resources/options/import_data_overlay.js
index 6acbbdb..82b495c 100644
--- a/chrome/browser/resources/options/import_data_overlay.js
+++ b/chrome/browser/resources/options/import_data_overlay.js
@@ -17,12 +17,12 @@ cr.define('options', function() {
                      'importDataOverlay');
   }
 
-  ImportDataOverlay.throbIntervalId = 0
+  ImportDataOverlay.throbIntervalId = 0;
 
   cr.addSingletonGetter(ImportDataOverlay);
 
   ImportDataOverlay.prototype = {
-    // Inherit ImportDataOverlay from OptionsPage.
+    // Inherit from OptionsPage.
     __proto__: OptionsPage.prototype,
 
     /**
diff --git a/chrome/browser/resources/options/instant_confirm_overlay.html b/chrome/browser/resources/options/instant_confirm_overlay.html
new file mode 100644
index 0000000..fe0b8b1
--- /dev/null
+++ b/chrome/browser/resources/options/instant_confirm_overlay.html
@@ -0,0 +1,12 @@
+<div class="page hidden" id="instantConfirmOverlay">
+  <h1 i18n-content="instantConfirmTitle"></h1>
+  <!-- The text has line breaks, so we must use a pre. -->
+  <pre id="instantConfirmText" i18n-content="instantConfirmMessage"></pre>
+  <a target="_blank" i18n-values="href:instantLearnMoreLink"
+     i18n-content="learnMore" id="instantConfirmLearnMore"></a>
+  <div class="action-area button-strip">
+    <button id="instantConfirmCancel" i18n-content="cancel"
+            class="cancel-button"></button>
+    <button id="instantConfirmOk" i18n-content="ok"></button>
+  </div>
+</div>
diff --git a/chrome/browser/resources/options/instant_confirm_overlay.js b/chrome/browser/resources/options/instant_confirm_overlay.js
new file mode 100644
index 0000000..53d0542
--- /dev/null
+++ b/chrome/browser/resources/options/instant_confirm_overlay.js
@@ -0,0 +1,44 @@
+// Copyright (c) 2010 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+cr.define('options', function() {
+
+  var OptionsPage = options.OptionsPage;
+
+  function InstantConfirmOverlay() {
+    OptionsPage.call(this, 'instantConfirmOverlay',
+                     templateData.instantConfirmTitle,
+                     'instantConfirmOverlay');
+  };
+
+  cr.addSingletonGetter(InstantConfirmOverlay);
+
+  InstantConfirmOverlay.prototype = {
+    // Inherit from OptionsPage.
+    __proto__: OptionsPage.prototype,
+
+    initializePage: function() {
+      OptionsPage.prototype.initializePage.call(this);
+
+      $('instantConfirmCancel').onclick = function() {
+        OptionsPage.clearOverlays();
+      };
+      $('instantConfirmOk').onclick = function() {
+        OptionsPage.clearOverlays();
+        var instantDialogShown = $('instantDialogShown');
+        Preferences.setBooleanPref(instantDialogShown.pref, true,
+                                   instantDialogShown.metric);
+        var instantEnabledCheckbox = $('instantEnableCheckbox');
+        Preferences.setBooleanPref(instantEnableCheckbox.pref, true,
+                                   instantEnableCheckbox.metric);
+      };
+    },
+  };
+
+  // Export
+  return {
+    InstantConfirmOverlay: InstantConfirmOverlay
+  };
+
+});
diff --git a/chrome/browser/resources/options/pref_ui.js b/chrome/browser/resources/options/pref_ui.js
index aba90a3..4f76bc9 100644
--- a/chrome/browser/resources/options/pref_ui.js
+++ b/chrome/browser/resources/options/pref_ui.js
@@ -25,10 +25,10 @@ cr.define('options', function() {
       // Listen to pref changes.
       Preferences.getInstance().addEventListener(this.pref,
           function(event) {
-            var value = (event.value && event.value['value'] != undefined) ?
+            var value = event.value && event.value['value'] != undefined ?
                 event.value['value'] : event.value;
             self.checked = Boolean(value);
-            self.managed = (event.value && event.value['managed'] != undefined) ?
+            self.managed = event.value && event.value['managed'] != undefined ?
                 event.value['managed'] : false;
             self.disabled = self.managed;
           });
@@ -42,7 +42,7 @@ cr.define('options', function() {
                     Number(self.checked), self.metric);
                 break;
               case 'boolean':
-                Preferences.setBooleanPref(self.pref, self.checked,
+                Preferences.setBooleanPref(self.pref,
                     self.checked, self.metric);
                 break;
             }
@@ -96,9 +96,9 @@ cr.define('options', function() {
       // Listen to pref changes.
       Preferences.getInstance().addEventListener(this.pref,
           function(event) {
-            var value = (event.value && event.value['value'] != undefined) ?
+            var value = event.value && event.value['value'] != undefined ?
                 event.value['value'] : event.value;
-            self.managed = (event.value && event.value['managed'] != undefined) ?
+            self.managed = event.value && event.value['managed'] != undefined ?
                 event.value['managed'] : false;
             self.checked = String(value) == self.value;
             self.disabled = self.managed;
@@ -156,9 +156,9 @@ cr.define('options', function() {
       // Listen to pref changes.
       Preferences.getInstance().addEventListener(this.pref,
           function(event) {
-            self.value = (event.value && event.value['value'] != undefined) ?
+            self.value = event.value && event.value['value'] != undefined ?
                 event.value['value'] : event.value;
-            self.managed = (event.value && event.value['managed'] != undefined) ?
+            self.managed = event.value && event.value['managed'] != undefined ?
                 event.value['managed'] : false;
             self.disabled = self.managed;
           });
@@ -268,9 +268,9 @@ cr.define('options', function() {
       // Listen to pref changes.
       Preferences.getInstance().addEventListener(this.pref,
           function(event) {
-            var value = (event.value && event.value['value'] != undefined) ?
+            var value = event.value && event.value['value'] != undefined ?
                 event.value['value'] : event.value;
-            self.managed = (event.value && event.value['managed'] != undefined) ?
+            self.managed = event.value && event.value['managed'] != undefined ?
                 event.value['managed'] : false;
             self.disabled = self.managed;
             // Honor manually_disabled property, so options pages can
@@ -365,9 +365,9 @@ cr.define('options', function() {
       // Listen to pref changes.
       Preferences.getInstance().addEventListener(this.pref,
           function(event) {
-            self.value = (event.value && event.value['value'] != undefined) ?
+            self.value = event.value && event.value['value'] != undefined ?
                 event.value['value'] : event.value;
-            self.managed = (event.value && event.value['managed'] != undefined) ?
+            self.managed = event.value && event.value['managed'] != undefined ?
                 event.value['managed'] : false;
             self.disabled = self.managed;
           });