Reland r55881: 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/3143012

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

chrome/browser/resources/options/clear_browser_data_overlay.css

@@ -6,3 +6,7 @@
   display: inline-block;
   visibility: hidden;
 }
+
+#checkboxListData > label {
+  display: block;
+}

chrome/browser/resources/options/clear_browser_data_overlay.html

 <div class="page hidden" id="clearBrowserDataOverlay">
   <h1 i18n-content="clearBrowsingDataTitle"></h1>
   <h3 i18n-content="clearBrowsingDataLabel"></h3>
-  <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>
+  <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>
+  <div>
+    <div>
+      <label>
+        <span i18n-content="clearBrowsingDataTimeLabel"></span>
         <select id="clearBrowsingDataTimePeriod"
-            pref="browser.clear_data.time_period"></select></label>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <span id="cbdThrobber"></span>
-        <button id="clearBrowsingDataCommit"
-            i18n-content="clearBrowsingDataCommit"></button>
-        <button id="clearBrowsingDataDismiss" i18n-content="cancel"
+                pref="browser.clear_data.time_period"></select>
+      </label>
+    </div>
+    <span id="cbdThrobber"></span>
+    <if expr="os == 'win32'">
+      <button id="clearBrowsingDataCommit"
+              i18n-content="clearBrowsingDataCommit"></button>
+    </if>
+    <button id="clearBrowsingDataDismiss" i18n-content="cancel"
             onclick="ClearBrowserDataOverlay.dismiss();">
-        </button>
-      </td>
-    </tr>
-  </table>
+    </button>
+    <if expr="os != 'win32'">
+      <button id="clearBrowsingDataCommit"
+              i18n-content="clearBrowsingDataCommit"></button>
+    </if>
+  </div>
   <hr>
   <a target="_blank" i18n-content="flash_storage_settings"
       i18n-values="href:flash_storage_url"></a>

chrome/browser/resources/options/clear_browser_data_overlay.js

@@ -34,13 +34,44 @@ cr.define('options', function() {
 
       // Setup option values for the time period select control.
       $('clearBrowsingDataTimePeriod').initializeValues(
-          templateData.clearBrowsingDataTimeList)
+          templateData.clearBrowsingDataTimeList);
+
+      var f = cr.bind(this.updateButtonState_, 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);
+      });
+
+      var checkboxes = document.querySelectorAll(
+          '#checkboxListData input[type=checkbox]');
+      for (var i = 0; i < checkboxes.length; i++) {
+        checkboxes[i].onclick = f;
+      }
+      this.updateButtonState_();
 
       // Setup click handler for the clear(Ok) button.
       $('clearBrowsingDataCommit').onclick = function(event) {
         chrome.send('performClearBrowserData');
       };
-    }
+    },
+
+    updateButtonState_: function() {
+      var checkboxes = document.querySelectorAll(
+          '#checkboxListData input[type=checkbox]');
+      var isChecked = false;
+      for (var i = 0; i < checkboxes.length; i++) {
+        if (checkboxes[i].checked) {
+          isChecked = true;
+          break;
+        }
+      }
+      $('clearBrowsingDataCommit').disabled = !isChecked;
+    },
   };
 
   //

chrome/browser/resources/options/import_data_overlay.html

@@ -23,8 +23,13 @@
       <span i18n-content="import_history">
     </label><br>
   </div>
-  <button id="import-data-cancel" i18n-content="cancel"
-      onclick="ImportDataOverlay.dismiss();"></button>
-  <button id="import-data-commit" i18n-content="import_commit"></button>
+  <if expr="os == 'win32'">
+    <button id="import-data-commit" i18n-content="import_commit"></button>
+  </if>
+    <button id="import-data-cancel" i18n-content="cancel"
+            onclick="ImportDataOverlay.dismiss();"></button>
+  <if expr="os != 'win32'">
+    <button id="import-data-commit" i18n-content="import_commit"></button>
+  </if>
   <span id="import-throbber"></span>
 </div>