Content settings: show/hide exceptions list when the exceptions link is clicked.

TODO: need to show a little triangle
TODO: need to animate the show/hide
TODO: need to remove ellipsis from end of "Exceptions..." text

BUG=51375
TEST=manual

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

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

5 files changed, 39 insertions, 66 deletions

diff --git a/chrome/browser/resources/options.html b/chrome/browser/resources/options.html
index e1228de..5dfe1b7 100644
--- a/chrome/browser/resources/options.html
+++ b/chrome/browser/resources/options.html
@@ -171,6 +171,7 @@ window.onpopstate = function(e) {
 <link rel="stylesheet" href="options/autofill_options_page.css">
 <link rel="stylesheet" href="options/browser_options_page.css">
 <link rel="stylesheet" href="options/clear_browser_data_overlay.css">
+<link rel="stylesheet" href="options/content_settings.css">
 <link rel="stylesheet" href="options/content_settings_exceptions_area.css">
 <link rel="stylesheet" href="options/passwords_exceptions_list.css">
 <link rel="stylesheet" href="options/import_data_overlay.css">
diff --git a/chrome/browser/resources/options/content_settings.html b/chrome/browser/resources/options/content_settings.html
index 9f2f451..777262f2 100644
--- a/chrome/browser/resources/options/content_settings.html
+++ b/chrome/browser/resources/options/content_settings.html
@@ -26,7 +26,7 @@
 
   <!-- Cookie filter tab contents -->
   <div id="cookiesFilterTab" class="subpages-tab-contents">
-    <span i18n-content="cookies_modify"></span>
+    <h4 i18n-content="cookies_modify" class="contentSettingsHeader"></h4>
     <table class="option-control-table">
     <tr>
       <td class="option-name"><label>
@@ -40,13 +40,9 @@
          <span i18n-content="cookies_block"></span>
       </label></td>
     </tr>
-    <tr>
-      <td class="option-name"><button id="cookies-exceptions-button"
-          i18n-content="content_exceptions"></button>
-      </td>
-    </tr>
     </table>
 
+    <div class="exceptionsLink" i18n-content="content_exceptions"></div>
     <div id="cookiesExceptionsArea" contentType="cookies">
       <list id="cookiesExceptionsList"></list>
     </div>
@@ -71,8 +67,8 @@
       </td>
     </tr>
     <tr>
-      <td><a i18n-values="href:flash_storage_url">
-        <span i18n-content="flash_storage_settings"></span></a>
+      <td><a i18n-values="href:flash_storage_url"
+             i18n-content="flash_storage_settings"></a>
       </td>
     </tr>
     </table>
@@ -80,7 +76,7 @@
 
   <!-- Image filter tab contents -->
   <div id="imagesFilterTab" class="subpages-tab-contents">
-    <span i18n-content="images_setting"></span>
+    <h4 i18n-content="images_setting" class="contentSettingsHeader"></h4>
     <table class="option-control-table">
     <tr>
       <td class="option-name"><label>
@@ -88,19 +84,9 @@
           <span i18n-content="images_allow"></span>
       </label></td>
     </tr>
-    <tr>
-      <td class="option-name"><label>
-        <input type="radio" name="images" value="block">
-          <span i18n-content="images_block"></span>
-      </label></td>
-    </tr>
-    <tr>
-      <td class="option-name"><button id="images-exceptions-button"
-          i18n-content="content_exceptions"></button>
-      </td>
-    </tr>
     </table>
 
+    <div class="exceptionsLink" i18n-content="content_exceptions"></div>
     <div id="imagesExceptionsArea" contentType="images">
       <list id="imagesExceptionsList"></list>
     </div>
@@ -116,19 +102,9 @@
            <span i18n-content="javascript_allow"></span>
        </label></td>
     </tr>
-    <tr>
-       <td class="option-name"><label>
-         <input type="radio" name="javascript" value="block">
-           <span i18n-content="javascript_block"></span>
-       </label></td>
-    </tr>
-    <tr>
-       <td class="option-name"><button id="javascript-exceptions-button"
-           i18n-content="content_exceptions"></button>
-       </td>
-    </tr>
     </table>
 
+    <div class="exceptionsLink" i18n-content="content_exceptions"></div>
     <div id="javascriptExceptionsArea" contentType="javascript">
       <list id="javascriptExceptionsList"></list>
     </div>
@@ -136,7 +112,7 @@
 
   <!-- Plug-ins filter tab contents -->
   <div id="pluginsFilterTab" class="subpages-tab-contents">
-    <span i18n-content="plugins_setting"></span>
+    <h4 i18n-content="plugins_setting" class="contentSettingsHeader"></h4>
     <table class="option-control-table">
     <tr>
        <td class="option-name"><label>
@@ -150,26 +126,19 @@
            <span i18n-content="plugins_block"></span>
        </label></td>
     </tr>
-    <tr>
-       <td class="option-name"><button id="plugins-exceptions-button"
-           i18n-content="content_exceptions"></button>
-       </td>
-    </tr>
-    <tr>
-       <td><a i18n-values="href:chrome_plugin_url">
-         <span i18n-content="disable_individual_plugins"></span></a>
-       </td>
-    </tr>
     </table>
 
+    <div class="exceptionsLink" i18n-content="content_exceptions"></div>
     <div id="pluginsExceptionsArea" contentType="plugins">
       <list id="pluginsExceptionsList"></list>
     </div>
+    <a i18n-values="href:chrome_plugin_url"
+       i18n-content="disable_individual_plugins"></a>
   </div>
 
   <!-- Pop-ups filter tab contents -->
   <div id="popupsFilterTab" class="subpages-tab-contents">
-    <span i18n-content="popups_setting"></span>
+    <h4 i18n-content="popups_setting" class="contentSettingsHeader"></h4>
     <table class="option-control-table">
     <tr>
        <td class="option-name"><label>
@@ -190,6 +159,7 @@
     </tr>
     </table>
 
+    <div class="exceptionsLink" i18n-content="content_exceptions"></div>
     <div id="popupsExceptionsArea" contentType="popups">
       <list id="popupsExceptionsList"></list>
     </div>
@@ -197,7 +167,7 @@
 
   <!-- Location filter tab contents -->
   <div id="locationFilterTab" class="subpages-tab-contents">
-    <span i18n-content="location_setting"></span>
+    <h4 i18n-content="location_setting" class="contentSettingsHeader"></h4>
     <table class="option-control-table">
     <tr>
        <td class="option-name"><label>
@@ -224,6 +194,7 @@
     </tr>
     </table>
 
+    <div class="exceptionsLink" i18n-content="content_exceptions"></div>
     <div id="locationExceptionsArea" contentType="location">
       <list id="locationExceptionsList"></list>
     </div>
@@ -231,7 +202,7 @@
 
   <!-- Notifications filter tab contents -->
   <div id="notificationsFilterTab" class="subpages-tab-contents">
-    <span i18n-content="notifications_setting"></span>
+    <h4 i18n-content="notifications_setting" class="contentSettingsHeader"></h4>
     <table class="option-control-table">
     <tr>
        <td class="option-name"><label>
@@ -258,6 +229,7 @@
     </tr>
     </table>
 
+    <div class="exceptionsLink" i18n-content="content_exceptions"></div>
     <div id="notificationsExceptionsArea" contentType="notifications">
       <list id="notificationsExceptionsList"></list>
     </div>
diff --git a/chrome/browser/resources/options/content_settings.js b/chrome/browser/resources/options/content_settings.js
index 523feda..f6a6873 100644
--- a/chrome/browser/resources/options/content_settings.js
+++ b/chrome/browser/resources/options/content_settings.js
@@ -29,11 +29,26 @@ cr.define('options', function() {
 
       chrome.send('getContentFilterSettings');
 
-      // Cookies filter page ---------------------------------------------------
-      $('cookies-exceptions-button').onclick = function(event) {
-        // TODO(estade): show exceptions page.
-      };
+      // Exceptions lists. -----------------------------------------------------
+      function handleExceptionsLinkClickEvent(event) {
+        var exceptionsArea = event.target.parentNode.
+            querySelector('div[contentType]');
+        exceptionsArea.classList.toggle('hidden');
+        exceptionsArea.querySelector('list').redraw();
+        return false;
+      }
+      var exceptionsLinks =
+          this.pageDiv.querySelectorAll('.exceptionsLink');
+      for (var i = 0; i < exceptionsLinks.length; i++) {
+        exceptionsLinks[i].onclick = handleExceptionsLinkClickEvent;
+      }
+
+      var exceptionsAreas = this.pageDiv.querySelectorAll('div[contentType]');
+      for (var i = 0; i < exceptionsAreas.length; i++) {
+        options.contentSettings.ExceptionsArea.decorate(exceptionsAreas[i]);
+      }
 
+      // Cookies filter page ---------------------------------------------------
       $('block-third-party-cookies').onclick = function(event) {
         chrome.send('setAllowThirdPartyCookies',
                     [String($('block-third-party-cookies').checked)]);
@@ -42,19 +57,6 @@ cr.define('options', function() {
       $('show-cookies-button').onclick = function(event) {
         // TODO(estade): show cookies and other site data page.
       };
-
-      // Images filter page ----------------------------------------------------
-      $('images-exceptions-button').onclick = function(event) {
-        // TODO(estade): show a dialog.
-        // TODO(estade): remove this hack.
-        imagesExceptionsList.redraw();
-      };
-
-      var exceptionsAreas =
-          document.querySelectorAll('#contentSettingsPage div[contentType]');
-      for (var i = 0; i < exceptionsAreas.length; i++) {
-        options.contentSettings.ExceptionsArea.decorate(exceptionsAreas[i]);
-      }
     },
   };
 
diff --git a/chrome/browser/resources/options/content_settings_exceptions_area.css b/chrome/browser/resources/options/content_settings_exceptions_area.css
index effa089..0ddc2a5 100644
--- a/chrome/browser/resources/options/content_settings_exceptions_area.css
+++ b/chrome/browser/resources/options/content_settings_exceptions_area.css
@@ -11,7 +11,3 @@ found in the LICENSE file.
 .exceptionSetting {
   float: right;
 }
-
-#imagesExceptionsArea :invalid {
-  background-color: pink;
-}
diff --git a/chrome/browser/resources/options/content_settings_exceptions_area.js b/chrome/browser/resources/options/content_settings_exceptions_area.js
index 4ccd3e5..a51a0ca 100644
--- a/chrome/browser/resources/options/content_settings_exceptions_area.js
+++ b/chrome/browser/resources/options/content_settings_exceptions_area.js
@@ -427,6 +427,8 @@ cr.define('options.contentSettings', function() {
       };
 
       this.updateButtonSensitivity();
+
+      this.classList.add('hidden');
     },
 
     /**