give tabbed options clear browsing dialog a facelift

It should now match the mocks modulo the adobe flash settings link (not sure why the mocks show it as a checkbox; AFAIK making it a checkbox is outside our ability to do).

also make it work (the time period select dropdown was broken).

BUG=69163,63843
TEST=manual

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

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

11 files changed, 118 insertions, 112 deletions

diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index 56fd2b4..f97ba5f 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -5066,12 +5066,15 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_CLEAR_BROWSING_DATA_TITLE" desc="Dialog title">
         Clear Browsing Data
       </message>
-      <message name="IDS_CLEAR_BROWSING_DATA_LABEL" desc="Label at the top of the client area of the dialog">
-        Obliterate the following items:
+      <message name="IDS_CLEAR_BROWSING_DATA_SECTION_HEADER" desc="The section title for the clear browsing data dialog">
+        Browsing Data
       </message>
       <message name="IDS_CLEAR_BROWSING_DATA_TIME_LABEL" desc="Label before time period combo box">
         Clear data from this period:
       </message>
+      <message name="IDS_CLEAR_BROWSING_DATA_LABEL" desc="Label at the top of the client area of the dialog, preceding the period combo box">
+        Obliterate the following items from:
+      </message>
       <message name="IDS_DEL_BROWSING_HISTORY_CHKBOX" desc="Checkbox for deleting Browsing History">
         Clear browsing history
       </message>
@@ -5110,19 +5113,19 @@ Keep your key file in a safe place. You will need it to create new versions of y
         Adobe Flash Player storage settings...
       </message>
       <message name="IDS_CLEAR_DATA_HOUR" desc="deletion period combo box: hour">
-        Last hour
+        the past hour
       </message>
       <message name="IDS_CLEAR_DATA_DAY" desc="deletion period combo box: day">
-        Last day
+        the past day
       </message>
       <message name="IDS_CLEAR_DATA_WEEK" desc="deletion period combo box: week">
-        Last week
+        the past week
       </message>
       <message name="IDS_CLEAR_DATA_4WEEKS" desc="deletion period combo box: 4 weeks">
-        Last 4 weeks
+        the last 4 weeks
       </message>
       <message name="IDS_CLEAR_DATA_EVERYTHING" desc="deletion period combo box: everything">
-        Everything
+        the beginning of time
       </message>
       <message name="IDS_CLEAR_DATA_DELETING" desc="The progress message">
         Clearing...
diff --git a/chrome/browser/dom_ui/options/clear_browser_data_handler.cc b/chrome/browser/dom_ui/options/clear_browser_data_handler.cc
index 21f2121..e21f7a2 100644
--- a/chrome/browser/dom_ui/options/clear_browser_data_handler.cc
+++ b/chrome/browser/dom_ui/options/clear_browser_data_handler.cc
@@ -1,4 +1,4 @@
-// Copyright (c) 2010 The Chromium Authors. All rights reserved.
+// Copyright (c) 2011 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.
 
@@ -29,10 +29,10 @@ void ClearBrowserDataHandler::GetLocalizedValues(
   DCHECK(localized_strings);
   localized_strings->SetString("clearBrowsingDataTitle",
       l10n_util::GetStringUTF16(IDS_CLEAR_BROWSING_DATA_TITLE));
+  localized_strings->SetString("clearBrowsingDataSectionHeader",
+      l10n_util::GetStringUTF16(IDS_CLEAR_BROWSING_DATA_SECTION_HEADER));
   localized_strings->SetString("clearBrowsingDataLabel",
       l10n_util::GetStringUTF16(IDS_CLEAR_BROWSING_DATA_LABEL));
-  localized_strings->SetString("clearBrowsingDataTimeLabel",
-      l10n_util::GetStringUTF16(IDS_CLEAR_BROWSING_DATA_TIME_LABEL));
   localized_strings->SetString("deleteBrowsingHistoryCheckbox",
       l10n_util::GetStringUTF16(IDS_DEL_BROWSING_HISTORY_CHKBOX));
   localized_strings->SetString("deleteDownloadHistoryCheckbox",
@@ -90,8 +90,8 @@ void ClearBrowserDataHandler::RegisterMessages() {
 }
 
 void ClearBrowserDataHandler::HandleClearBrowserData(const ListValue* value) {
-  Profile *profile = dom_ui_->GetProfile();
-  PrefService *prefs = profile->GetPrefs();
+  Profile* profile = dom_ui_->GetProfile();
+  PrefService* prefs = profile->GetPrefs();
 
   int remove_mask = 0;
   if (prefs->GetBoolean(prefs::kDeleteBrowsingHistory))
diff --git a/chrome/browser/resources/options/advanced_options.js b/chrome/browser/resources/options/advanced_options.js
index 8133d7b..ddb8a20 100644
--- a/chrome/browser/resources/options/advanced_options.js
+++ b/chrome/browser/resources/options/advanced_options.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2010 The Chromium Authors. All rights reserved.
+// Copyright (c) 2011 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.
 
@@ -36,7 +36,7 @@ var OptionsPage = options.OptionsPage;
             ['Options_ContentSettings']);
       };
       $('privacyClearDataButton').onclick = function(event) {
-        OptionsPage.showOverlay('clearBrowserDataOverlay');
+        OptionsPage.showPageByName('clearBrowserDataPage');
         chrome.send('coreOptionsUserMetricsAction', ['Options_ClearData']);
       };
 
diff --git a/chrome/browser/resources/options/clear_browser_data.css b/chrome/browser/resources/options/clear_browser_data.css
new file mode 100644
index 0000000..7279f5d
--- /dev/null
+++ b/chrome/browser/resources/options/clear_browser_data.css
@@ -0,0 +1,18 @@
+/*
+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.
+*/
+
+#cbdThrobber {
+  background-image: url("../../../../app/resources/throbber.png");
+  width: 16px;
+  height: 16px;
+  margin: -3px 10px;
+  display: inline-block;
+  visibility: hidden;
+}
+
+#checkboxListData {
+  -webkit-margin-start: 1em;
+}
diff --git a/chrome/browser/resources/options/clear_browser_data.html b/chrome/browser/resources/options/clear_browser_data.html
new file mode 100644
index 0000000..d500dab
--- /dev/null
+++ b/chrome/browser/resources/options/clear_browser_data.html
@@ -0,0 +1,53 @@
+<div class="page hidden" id="clearBrowserDataPage">
+  <h1 i18n-content="clearBrowsingDataTitle"></h1>
+  <section>
+    <h3 i18n-content="clearBrowsingDataSectionHeader"></h3>
+    <div>
+      <span i18n-content="clearBrowsingDataLabel"></span>
+      <select id="clearBrowsingDataTimePeriod"
+          i18n-options="clearBrowsingDataTimeList"
+          pref="browser.clear_data.time_period"
+          dataType='number'>
+      </select>
+      <div id="checkboxListData">
+        <label class="checkbox">
+          <input id="deleteBrowsingHistoryCheckbox"
+              pref="browser.clear_data.browsing_history" type="checkbox">
+          <span i18n-content="deleteBrowsingHistoryCheckbox"></span>
+        </label>
+        <label class="checkbox">
+          <input id="deleteDownloadHistoryCheckbox"
+              pref="browser.clear_data.download_history" type="checkbox">
+          <span i18n-content="deleteDownloadHistoryCheckbox"></span>
+        </label>
+        <label class="checkbox">
+          <input id="deleteCacheCheckbox"
+              pref="browser.clear_data.cache" type="checkbox">
+          <span i18n-content="deleteCacheCheckbox"></span>
+        </label>
+        <label class="checkbox">
+          <input id="deleteCookiesCheckbox"
+              pref="browser.clear_data.cookies" type="checkbox">
+          <span i18n-content="deleteCookiesCheckbox"></span>
+        </label>
+        <label class="checkbox">
+          <input id="deletePasswordsCheckbox"
+              pref="browser.clear_data.passwords" type="checkbox">
+          <span i18n-content="deletePasswordsCheckbox"></span>
+        </label>
+        <label class="checkbox">
+          <input id="deleteFormDataCheckbox"
+              pref="browser.clear_data.form_data" type="checkbox">
+          <span i18n-content="deleteFormDataCheckbox"></span>
+        </label>
+      </div>
+      <button id="clearBrowsingDataCommit"
+              i18n-content="clearBrowsingDataCommit">
+      </button>
+      <span id="cbdThrobber"></span>
+      <hr>
+      <a target="_blank" i18n-content="flash_storage_settings"
+          i18n-values="href:flash_storage_url"></a>
+    </div>
+  </section>
+</div>
diff --git a/chrome/browser/resources/options/clear_browser_data_overlay.js b/chrome/browser/resources/options/clear_browser_data.js
index 6b1cf05..aeae33e 100644
--- a/chrome/browser/resources/options/clear_browser_data_overlay.js
+++ b/chrome/browser/resources/options/clear_browser_data.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2010 The Chromium Authors. All rights reserved.
+// Copyright (c) 2011 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.
 
@@ -11,18 +11,18 @@ cr.define('options', function() {
    * Encapsulated handling of the 'Clear Browser Data' overlay page.
    * @class
    */
-  function ClearBrowserDataOverlay() {
-    OptionsPage.call(this, 'clearBrowserDataOverlay',
+  function ClearBrowserDataPage() {
+    OptionsPage.call(this, 'clearBrowserDataPage',
                      templateData.clearBrowserDataTitle,
-                     'clearBrowserDataOverlay');
+                     'clearBrowserDataPage');
   }
 
-  ClearBrowserDataOverlay.throbIntervalId = 0;
+  ClearBrowserDataPage.throbIntervalId = 0;
 
-  cr.addSingletonGetter(ClearBrowserDataOverlay);
+  cr.addSingletonGetter(ClearBrowserDataPage);
 
-  ClearBrowserDataOverlay.prototype = {
-    // Inherit ClearBrowserDataOverlay from OptionsPage.
+  ClearBrowserDataPage.prototype = {
+    // Inherit ClearBrowserDataPage from OptionsPage.
     __proto__: OptionsPage.prototype,
 
     /**
@@ -32,6 +32,9 @@ cr.define('options', function() {
       // Call base class implementation to starts preference initialization.
       OptionsPage.prototype.initializePage.call(this);
 
+      // The time period is stored as a number.
+      $('clearBrowsingDataTimePeriod').dataType = 'number';
+
       var f = this.updateCommitButtonState_.bind(this);
       var types = ['browser.clear_data.browsing_history',
                    'browser.clear_data.download_history',
@@ -74,7 +77,7 @@ cr.define('options', function() {
   //
   // Chrome callbacks
   //
-  ClearBrowserDataOverlay.setClearingState = function(state) {
+  ClearBrowserDataPage.setClearingState = function(state) {
     $('deleteBrowsingHistoryCheckbox').disabled = state;
     $('deleteDownloadHistoryCheckbox').disabled = state;
     $('deleteCacheCheckbox').disabled = state;
@@ -82,13 +85,12 @@ cr.define('options', function() {
     $('deletePasswordsCheckbox').disabled = state;
     $('deleteFormDataCheckbox').disabled = state;
     $('clearBrowsingDataTimePeriod').disabled = state;
-    $('clearBrowsingDataDismiss').disabled = state;
     $('cbdThrobber').style.visibility = state ? 'visible' : 'hidden';
 
     if (state)
       $('clearBrowsingDataCommit').disabled = true;
     else
-      ClearBrowserDataOverlay.getInstance().updateCommitButtonState_();
+      ClearBrowserDataPage.getInstance().updateCommitButtonState_();
 
     function advanceThrobber() {
       var throbber = $('cbdThrobber');
@@ -98,21 +100,21 @@ cr.define('options', function() {
           576) + 'px';
     }
     if (state) {
-      ClearBrowserDataOverlay.throbIntervalId =
+      ClearBrowserDataPage.throbIntervalId =
           setInterval(advanceThrobber, 30);
     } else {
-      clearInterval(ClearBrowserDataOverlay.throbIntervalId);
+      clearInterval(ClearBrowserDataPage.throbIntervalId);
     }
   }
 
-  ClearBrowserDataOverlay.dismiss = function() {
+  ClearBrowserDataPage.dismiss = function() {
     OptionsPage.clearOverlays();
     this.setClearingState(false);
   }
 
   // Export
   return {
-    ClearBrowserDataOverlay: ClearBrowserDataOverlay
+    ClearBrowserDataPage: ClearBrowserDataPage
   };
 
 });
diff --git a/chrome/browser/resources/options/clear_browser_data_overlay.css b/chrome/browser/resources/options/clear_browser_data_overlay.css
deleted file mode 100644
index 4a274f2..0000000
--- a/chrome/browser/resources/options/clear_browser_data_overlay.css
+++ /dev/null
@@ -1,12 +0,0 @@
-#clearBrowserDataOverlay {
-  width: 300px;
-}
-
-#cbdThrobber {
-  background-image: url("../../../../app/resources/throbber.png");
-  width: 16px;
-  height: 16px;
-  margin: -3px 10px;
-  display: inline-block;
-  visibility: hidden;
-}
diff --git a/chrome/browser/resources/options/clear_browser_data_overlay.html b/chrome/browser/resources/options/clear_browser_data_overlay.html
deleted file mode 100644
index 66d3739..0000000
--- a/chrome/browser/resources/options/clear_browser_data_overlay.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<div class="page hidden" id="clearBrowserDataOverlay">
-  <h1 i18n-content="clearBrowsingDataTitle"></h1>
-  <h3 i18n-content="clearBrowsingDataLabel"></h3>
-  <div id="checkboxListData">
-    <div>
-      <input id="deleteBrowsingHistoryCheckbox"
-          pref="browser.clear_data.browsing_history" type="checkbox">
-      <label for="deleteBrowsingHistoryCheckbox"
-          i18n-content="deleteBrowsingHistoryCheckbox"></label>
-    </div>
-    <div>
-      <input id="deleteDownloadHistoryCheckbox"
-          pref="browser.clear_data.download_history" type="checkbox">
-      <label for="deleteDownloadHistoryCheckbox"
-          i18n-content="deleteDownloadHistoryCheckbox"></label>
-    </div>
-    <div>
-      <input id="deleteCacheCheckbox"
-          pref="browser.clear_data.cache" type="checkbox">
-      <label for="deleteCacheCheckbox"
-          i18n-content="deleteCacheCheckbox"></label>
-    </div>
-    <div>
-      <input id="deleteCookiesCheckbox"
-          pref="browser.clear_data.cookies" type="checkbox">
-      <label for="deleteCookiesCheckbox"
-          i18n-content="deleteCookiesCheckbox"></label>
-    </div>
-    <div>
-      <input id="deletePasswordsCheckbox"
-          pref="browser.clear_data.passwords" type="checkbox">
-      <label for="deletePasswordsCheckbox"
-          i18n-content="deletePasswordsCheckbox"></label>
-    </div>
-    <div>
-      <input id="deleteFormDataCheckbox"
-          pref="browser.clear_data.form_data" type="checkbox">
-      <label for="deleteFormDataCheckbox"
-          i18n-content="deleteFormDataCheckbox"></label>
-    </div>
-  </div>
-  <div>
-    <label for="" i18n-content="clearBrowsingDataTimeLabel"></label>
-    <select id="clearBrowsingDataTimePeriod"
-        i18n-options="clearBrowsingDataTimeList"
-        pref="browser.clear_data.time_period"></select>
-  </div>
-  <div class="action-area">
-    <span id="cbdThrobber"></span>
-    <div class="button-strip">
-      <button id="clearBrowsingDataDismiss" i18n-content="cancel"
-              onclick="ClearBrowserDataOverlay.dismiss();">
-      </button>
-      <button id="clearBrowsingDataCommit"
-              i18n-content="clearBrowsingDataCommit">
-      </button>
-    </div>
-  </div>
-  <hr>
-  <a target="_blank" i18n-content="flash_storage_settings"
-      i18n-values="href:flash_storage_url"></a>
-</div>
diff --git a/chrome/browser/resources/options/options.html b/chrome/browser/resources/options/options.html
index 30e0cb0..2885d51 100644
--- a/chrome/browser/resources/options/options.html
+++ b/chrome/browser/resources/options/options.html
@@ -19,7 +19,7 @@
 <link rel="stylesheet" href="autofill_edit_creditcard_overlay.css">
 <link rel="stylesheet" href="autofill_options.css">
 <link rel="stylesheet" href="browser_options_page.css">
-<link rel="stylesheet" href="clear_browser_data_overlay.css">
+<link rel="stylesheet" href="clear_browser_data.css">
 <link rel="stylesheet" href="content_settings.css">
 <link rel="stylesheet" href="cookies_view.css">
 <link rel="stylesheet" href="edit_search_engine_overlay.css">
@@ -110,7 +110,7 @@
 <script src="autofill_options.js"></script>
 <script src="browser_options.js"></script>
 <script src="browser_options_startup_page_list.js"></script>
-<script src="clear_browser_data_overlay.js"></script>
+<script src="clear_browser_data.js"></script>
 <script src="content_settings.js"></script>
 <script src="content_settings_exceptions_area.js"></script>
 <script src="content_settings_ui.js"></script>
@@ -139,7 +139,6 @@
   <include src="alert_overlay.html">
   <include src="autofill_edit_address_overlay.html">
   <include src="autofill_edit_creditcard_overlay.html">
-  <include src="clear_browser_data_overlay.html">
   <include src="edit_search_engine_overlay.html">
   <include src="import_data_overlay.html">
   <include src="instant_confirm_overlay.html">
@@ -204,6 +203,7 @@
            <include src="password_manager.html">
            <include src="search_engine_manager.html">
            <include src="startup_page_manager.html">
+           <include src="clear_browser_data.html">
          </div>
        </div>
        <div id="subpage-sheet-container-2"
diff --git a/chrome/browser/resources/options/options.js b/chrome/browser/resources/options/options.js
index b72f8b5..d7734703 100644
--- a/chrome/browser/resources/options/options.js
+++ b/chrome/browser/resources/options/options.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2010 The Chromium Authors. All rights reserved.
+// Copyright (c) 2011 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.
 
@@ -9,7 +9,7 @@ var AutoFillEditAddressOverlay = options.AutoFillEditAddressOverlay;
 var AutoFillEditCreditCardOverlay = options.AutoFillEditCreditCardOverlay;
 var AutoFillOptions = options.AutoFillOptions;
 var BrowserOptions = options.BrowserOptions;
-var ClearBrowserDataOverlay = options.ClearBrowserDataOverlay;
+var ClearBrowserDataPage = options.ClearBrowserDataPage;
 var ContentSettings = options.ContentSettings;
 var ContentSettingsExceptionsArea =
     options.contentSettings.ContentSettingsExceptionsArea;
@@ -108,6 +108,9 @@ function load() {
   OptionsPage.registerSubPage(FontSettings.getInstance(),
                               AdvancedOptions.getInstance(),
                               [$('fontSettingsCustomizeFontsButton')]);
+  OptionsPage.registerSubPage(ClearBrowserDataPage.getInstance(),
+                              AdvancedOptions.getInstance(),
+                              [$('privacyClearDataButton')]);
   if (!cr.isWindows && !cr.isMac) {
     OptionsPage.registerSubPage(CertificateManager.getInstance(),
                                 AdvancedOptions.getInstance(),
@@ -121,8 +124,6 @@ function load() {
   OptionsPage.registerOverlay(AlertOverlay.getInstance());
   OptionsPage.registerOverlay(AutoFillEditAddressOverlay.getInstance());
   OptionsPage.registerOverlay(AutoFillEditCreditCardOverlay.getInstance());
-  OptionsPage.registerOverlay(ClearBrowserDataOverlay.getInstance(),
-                              [$('privacyClearDataButton')]);
   OptionsPage.registerOverlay(EditSearchEngineOverlay.getInstance());
   OptionsPage.registerOverlay(ImportDataOverlay.getInstance());
   OptionsPage.registerOverlay(InstantConfirmOverlay.getInstance());
diff --git a/chrome/browser/resources/options/pref_ui.js b/chrome/browser/resources/options/pref_ui.js
index 0734b6b..6879770 100644
--- a/chrome/browser/resources/options/pref_ui.js
+++ b/chrome/browser/resources/options/pref_ui.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2010 The Chromium Authors. All rights reserved.
+// Copyright (c) 2011 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.
 
@@ -280,7 +280,7 @@ cr.define('options', function() {
   /////////////////////////////////////////////////////////////////////////////
   // PrefSelect class:
 
-  // Define a constructor that uses an select element as its underlying element.
+  // Define a constructor that uses a select element as its underlying element.
   var PrefSelect = cr.ui.define('select');
 
   PrefSelect.prototype = {
@@ -331,6 +331,9 @@ cr.define('options', function() {
       // Listen to user events.
       this.addEventListener('change',
           function(e) {
+            if (!self.dataType)
+              console.error('unknown data type for <select> pref');
+
             switch(self.dataType) {
               case 'number':
                 Preferences.setIntegerPref(self.pref,