DOM-UI Options: Disable the 'Clear browsing Data' button when no checkboxes are checked.

BUG=49037
TEST=out/Debug/chrome --enable-tabbed-options. Go to 'Under the Hood' tab, open the
dialog, check some checkbox, the button should become enabled, uncheck all the
checkboxes, the button should become disabled.

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

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

4 files changed, 62 insertions, 34 deletions

diff --git a/chrome/browser/resources/options/clear_browser_data_overlay.css b/chrome/browser/resources/options/clear_browser_data_overlay.css
index 1787a0e..1a27f42 100644
--- a/chrome/browser/resources/options/clear_browser_data_overlay.css
+++ b/chrome/browser/resources/options/clear_browser_data_overlay.css
@@ -1,3 +1,8 @@
+/* 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;
@@ -6,3 +11,7 @@
   display: inline-block;
   visibility: hidden;
 }
+
+#checkboxListData > label {
+  display: block;
+}
diff --git a/chrome/browser/resources/options/clear_browser_data_overlay.html b/chrome/browser/resources/options/clear_browser_data_overlay.html
index 2e5e3ba..f29f3f6 100644
--- a/chrome/browser/resources/options/clear_browser_data_overlay.html
+++ b/chrome/browser/resources/options/clear_browser_data_overlay.html
@@ -1,39 +1,40 @@
 <div class="page hidden" id="clearBrowserDataOverlay">
   <h1 i18n-content="clearBrowsingDataTitle"></h1>
   <h3 i18n-content="clearBrowsingDataLabel"></h3>
+    <div id="checkboxListData">
+      <label>
+        <input id="deleteBrowsingHistoryCheckbox"
+               pref="browser.clear_data.browsing_history" type="checkbox">
+        <span i18n-content="deleteBrowsingHistoryCheckbox"></span>
+      </label>
+      <label>
+        <input id="deleteDownloadHistoryCheckbox"
+               pref="browser.clear_data.download_history" type="checkbox">
+        <span i18n-content="deleteDownloadHistoryCheckbox"></span>
+      </label>
+      <label>
+        <input id="deleteCacheCheckbox"
+               pref="browser.clear_data.cache" type="checkbox">
+        <span i18n-content="deleteCacheCheckbox"></span>
+      </label>
+      <label>
+        <input id="deleteCookiesCheckbox"
+               pref="browser.clear_data.cookies" type="checkbox">
+        <span i18n-content="deleteCookiesCheckbox"></span>
+      </label>
+      <label>
+        <input id="deletePasswordsCheckbox"
+               pref="browser.clear_data.passwords" type="checkbox">
+        <span i18n-content="deletePasswordsCheckbox"></span>
+      </label>
+      <label>
+        <input id="deleteFormDataCheckbox"
+               pref="browser.clear_data.form_data" type="checkbox">
+        <span i18n-content="deleteFormDataCheckbox"></span>
+      </label>
+    </div>
   <table class="option-control-table">
     <tr>
-      <td class="option-name"><label><input id="deleteBrowsingHistoryCheckbox"
-          pref="browser.clear_data.browsing_history" type="checkbox"><span
-          i18n-content="deleteBrowsingHistoryCheckbox"></span></label></td>
-    </tr>
-    <tr>
-      <td class="option-name"><label><input id="deleteDownloadHistoryCheckbox"
-          pref="browser.clear_data.download_history" type="checkbox"><span
-          i18n-content="deleteDownloadHistoryCheckbox"></span></label></td>
-    </tr>
-    <tr>
-      <td class="option-name"><label><input id="deleteCacheCheckbox"
-          pref="browser.clear_data.cache" type="checkbox"><span
-          i18n-content="deleteCacheCheckbox"></span></label>
-      </td>
-    </tr>
-    <tr>
-      <td class="option-name"><label><input id="deleteCookiesCheckbox"
-          pref="browser.clear_data.cookies" type="checkbox"><span
-          i18n-content="deleteCookiesCheckbox"></span></label></td>
-    </tr>
-    <tr>
-      <td class="option-name"><label><input id="deletePasswordsCheckbox"
-          pref="browser.clear_data.passwords" type="checkbox"><span
-          i18n-content="deletePasswordsCheckbox"></span></label></td>
-    </tr>
-    <tr>
-      <td class="option-name"><label><input id="deleteFormDataCheckbox"
-          pref="browser.clear_data.form_data" type="checkbox"><span
-          i18n-content="deleteFormDataCheckbox"></span></label></td>
-    </tr>
-    <tr>
       <td>
         <label><span i18n-content="clearBrowsingDataTimeLabel"></span>
         <select id="clearBrowsingDataTimePeriod"
diff --git a/chrome/browser/resources/options/clear_browser_data_overlay.js b/chrome/browser/resources/options/clear_browser_data_overlay.js
index 21ae083..6513f43 100644
--- a/chrome/browser/resources/options/clear_browser_data_overlay.js
+++ b/chrome/browser/resources/options/clear_browser_data_overlay.js
@@ -34,13 +34,31 @@ cr.define('options', function() {
 
       // Setup option values for the time period select control.
       $('clearBrowsingDataTimePeriod').initializeValues(
-          templateData.clearBrowsingDataTimeList)
+          templateData.clearBrowsingDataTimeList);
+
+      var checkboxes = document.querySelectorAll(
+          '#checkboxListData input[type=checkbox]');
+      var handler = cr.bind(this.updateButtonState_, this);
+      for (var i = 0; i < checkboxes.length; i++) {
+        checkboxes[i].onclick = handler;
+      }
+      self.updateButtonState_();
 
       // Setup click handler for the clear(Ok) button.
       $('clearBrowsingDataCommit').onclick = function(event) {
         chrome.send('performClearBrowserData');
       };
-    }
+    },
+
+    updateButtonState_: function() {
+      var checkboxMask = '';
+      var checkboxes = document.querySelectorAll(
+          '#checkboxListData input[type=checkbox]');
+      for (var i = 0; i < checkboxes.length; i++) {
+        checkboxMask += checkboxes[i].checked ? '1' : '0';
+      }
+      $('clearBrowsingDataCommit').disabled = checkboxMask.indexOf('1') == -1;
+    },
   };
 
   //
diff --git a/chrome/browser/resources/options/import_data_overlay.html b/chrome/browser/resources/options/import_data_overlay.html
index 45dee1d..4d39bb0 100644
--- a/chrome/browser/resources/options/import_data_overlay.html
+++ b/chrome/browser/resources/options/import_data_overlay.html
@@ -23,8 +23,8 @@
       <span i18n-content="import_history">
     </label><br>
   </div>
+  <button id="import-data-commit" i18n-content="import_commit"></button>
   <button id="import-data-cancel" i18n-content="cancel"
       onclick="ImportDataOverlay.dismiss();"></button>
-  <button id="import-data-commit" i18n-content="import_commit"></button>
   <span id="import-throbber"></span>
 </div>