give tabbed options clear browsing dialog a facelift

chrome/browser/resources/options/clear_browser_data.js

 // 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;
 
   /**
    * ClearBrowserData class
    * 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,
 
     /**
      * Initialize the page.
      */
     initializePage: 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',
                    'browser.clear_data.cache',
                    'browser.clear_data.cookies',
                    'browser.clear_data.passwords',
                    'browser.clear_data.form_data'];
       types.forEach(function(type) {
           Preferences.getInstance().addEventListener(type, f);
       });
@@ skipping 22 matching lines @@
           break;
         }
       }
       $('clearBrowsingDataCommit').disabled = !isChecked;
     },
   };
 
   //
   // Chrome callbacks
   //
-  ClearBrowserDataOverlay.setClearingState = function(state) {
+  ClearBrowserDataPage.setClearingState = function(state) {
     $('deleteBrowsingHistoryCheckbox').disabled = state;
     $('deleteDownloadHistoryCheckbox').disabled = state;
     $('deleteCacheCheckbox').disabled = state;
     $('deleteCookiesCheckbox').disabled = state;
     $('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');
       // TODO(csilv): make this smoother using time-based animation?
       throbber.style.backgroundPositionX =
           ((parseInt(getComputedStyle(throbber).backgroundPositionX, 10) - 16) %
           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
   };
 
 });