Content settings lists moved to sub-sub pages.

BUG=64153
TEST=manual

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

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

11 files changed, 300 insertions, 176 deletions

diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index af7346e..4e7d546 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -5133,6 +5133,9 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_COOKIES_TAB_LABEL" desc="Label for Cookies tab on Content Settings dialog">
         Cookies
       </message>
+      <message name="IDS_COOKIES_HEADER" desc="Header for cookie exception management page on Content Settings dialog">
+        Cookie and Site Data Exceptions
+      </message>
       <message name="IDS_MODIFY_COOKIE_STORING_LABEL" desc="Label at the top of Cookies tab of Content Settings dialog">
         Cookie Settings:
       </message>
@@ -5170,6 +5173,9 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_IMAGES_TAB_LABEL" desc="Label for Images tab on Content Settings dialog">
         Images
       </message>
+      <message name="IDS_IMAGES_HEADER" desc="Header for image exception management page on Content Settings dialog">
+        Image Exceptions
+      </message>
       <message name="IDS_IMAGES_SETTING_LABEL" desc="A label on top of images tab on Content Settings dialog">
         Image Settings:
       </message>
@@ -5182,6 +5188,9 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_POPUP_TAB_LABEL" desc="Label for Pop-up Windows tab on Content Settings dialog">
         Pop-ups
       </message>
+      <message name="IDS_POPUP_HEADER" desc="Header for popup exception management page on Content Settings dialog">
+        Pop-up Exceptions
+      </message>
       <message name="IDS_POPUP_SETTING_LABEL" desc="A label on top of Pop-up Windows tab on Content Settings dialog">
         Pop-up Settings:
       </message>
@@ -5194,6 +5203,9 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_PLUGIN_TAB_LABEL" desc="Label for Plug-ins tab on Content Settings dialog">
         Plug-ins
       </message>
+      <message name="IDS_PLUGIN_HEADER" desc="Header for plugin exception management page on Content Settings dialog">
+        Plug-in Exceptions
+      </message>
       <message name="IDS_PLUGIN_SETTING_LABEL" desc="A label on top of Plug-Ins tab on Content Settings dialog">
         When I encounter plug-ins on a site:
       </message>
@@ -5212,6 +5224,9 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_JAVASCRIPT_TAB_LABEL" desc="Label for JavaScript tab on Content Settings dialog">
         JavaScript
       </message>
+      <message name="IDS_JAVASCRIPT_HEADER" desc="Label for JavaScript exception management page on Content Settings dialog">
+        JavaScript Exceptions
+      </message>
       <message name="IDS_JS_SETTING_LABEL" desc="A label on top of JavaScript tab on Content Settings dialog">
         JavaScript Settings:
       </message>
@@ -5224,6 +5239,9 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_GEOLOCATION_TAB_LABEL" desc="Label for Geolocation tab on Content Settings dialog">
         Location
       </message>
+      <message name="IDS_GEOLOCATION_HEADER" desc="Label for Geolocation exception management page on Content Settings dialog">
+        Geolocation Exceptions
+      </message>
       <message name="IDS_GEOLOCATION_SETTING_LABEL" desc="A label on top of Geolocation tab on Content Settings dialog">
         Location Settings:
       </message>
@@ -5239,6 +5257,9 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_NOTIFICATIONS_TAB_LABEL" desc="Label for Notifications tab on Content Settings dialog">
         Notifications
       </message>
+      <message name="IDS_NOTIFICATIONS_HEADER" desc="Label for Notifications exception management page on Content Settings dialog">
+        Notifications Exceptions
+      </message>
       <message name="IDS_NOTIFICATIONS_SETTINGS_BUTTON" desc="Label for the Settings button for Notifications tab of Content Settings dialog.">
         Settings...
       </message>
@@ -5323,6 +5344,9 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_EXCEPTIONS_OTR_LABEL" desc="A label informing the user that the table below the label shows incognito-only exceptions">
         Exceptions below only apply to the current incognito session.
       </message>
+      <message name="IDS_EXCEPTIONS_MANAGE" desc="The label on the button that launches the exceptions management page for a given content type">
+        Manage exceptions...
+      </message>
       <message translateable="false" name="IDS_EXCEPTIONS_PATTERN_EXAMPLE" desc="Example pattern when the user is adding a new exception" >
         [*.]example.com
       </message>
diff --git a/chrome/browser/dom_ui/options/content_settings_handler.cc b/chrome/browser/dom_ui/options/content_settings_handler.cc
index af1b063..837afb6 100644
--- a/chrome/browser/dom_ui/options/content_settings_handler.cc
+++ b/chrome/browser/dom_ui/options/content_settings_handler.cc
@@ -200,10 +200,14 @@ void ContentSettingsHandler::GetLocalizedValues(
       l10n_util::GetStringUTF16(IDS_EXCEPTIONS_PATTERN_EXAMPLE));
   localized_strings->SetString("addNewExceptionInstructions",
       l10n_util::GetStringUTF16(IDS_EXCEPTIONS_ADD_NEW_INSTRUCTIONS));
+  localized_strings->SetString("manage_exceptions",
+      l10n_util::GetStringUTF16(IDS_EXCEPTIONS_MANAGE));
 
   // Cookies filter.
   localized_strings->SetString("cookies_tab_label",
       l10n_util::GetStringUTF16(IDS_COOKIES_TAB_LABEL));
+  localized_strings->SetString("cookies_header",
+      l10n_util::GetStringUTF16(IDS_COOKIES_HEADER));
   localized_strings->SetString("cookies_allow",
       l10n_util::GetStringUTF16(IDS_COOKIES_ALLOW_RADIO));
   localized_strings->SetString("cookies_ask",
@@ -224,6 +228,8 @@ void ContentSettingsHandler::GetLocalizedValues(
   // Image filter.
   localized_strings->SetString("images_tab_label",
       l10n_util::GetStringUTF16(IDS_IMAGES_TAB_LABEL));
+  localized_strings->SetString("images_header",
+      l10n_util::GetStringUTF16(IDS_IMAGES_HEADER));
   localized_strings->SetString("images_allow",
       l10n_util::GetStringUTF16(IDS_IMAGES_LOAD_RADIO));
   localized_strings->SetString("images_block",
@@ -232,6 +238,8 @@ void ContentSettingsHandler::GetLocalizedValues(
   // JavaScript filter.
   localized_strings->SetString("javascript_tab_label",
       l10n_util::GetStringUTF16(IDS_JAVASCRIPT_TAB_LABEL));
+  localized_strings->SetString("javascript_header",
+      l10n_util::GetStringUTF16(IDS_JAVASCRIPT_HEADER));
   localized_strings->SetString("javascript_allow",
       l10n_util::GetStringUTF16(IDS_JS_ALLOW_RADIO));
   localized_strings->SetString("javascript_block",
@@ -240,6 +248,8 @@ void ContentSettingsHandler::GetLocalizedValues(
   // Plug-ins filter.
   localized_strings->SetString("plugins_tab_label",
       l10n_util::GetStringUTF16(IDS_PLUGIN_TAB_LABEL));
+  localized_strings->SetString("plugins_header",
+      l10n_util::GetStringUTF16(IDS_PLUGIN_HEADER));
   localized_strings->SetString("plugins_ask",
       l10n_util::GetStringUTF16(IDS_PLUGIN_ASK_RADIO));
   localized_strings->SetString("plugins_allow",
@@ -252,10 +262,11 @@ void ContentSettingsHandler::GetLocalizedValues(
       CommandLine::ForCurrentProcess()->HasSwitch(
           switches::kEnableClickToPlay));
 
-
   // Pop-ups filter.
   localized_strings->SetString("popups_tab_label",
       l10n_util::GetStringUTF16(IDS_POPUP_TAB_LABEL));
+  localized_strings->SetString("popups_header",
+      l10n_util::GetStringUTF16(IDS_POPUP_HEADER));
   localized_strings->SetString("popups_allow",
       l10n_util::GetStringUTF16(IDS_POPUP_ALLOW_RADIO));
   localized_strings->SetString("popups_block",
@@ -264,6 +275,8 @@ void ContentSettingsHandler::GetLocalizedValues(
   // Location filter.
   localized_strings->SetString("location_tab_label",
       l10n_util::GetStringUTF16(IDS_GEOLOCATION_TAB_LABEL));
+  localized_strings->SetString("location_header",
+      l10n_util::GetStringUTF16(IDS_GEOLOCATION_HEADER));
   localized_strings->SetString("location_allow",
       l10n_util::GetStringUTF16(IDS_GEOLOCATION_ALLOW_RADIO));
   localized_strings->SetString("location_ask",
@@ -274,6 +287,8 @@ void ContentSettingsHandler::GetLocalizedValues(
   // Notifications filter.
   localized_strings->SetString("notifications_tab_label",
       l10n_util::GetStringUTF16(IDS_NOTIFICATIONS_TAB_LABEL));
+  localized_strings->SetString("notifications_header",
+      l10n_util::GetStringUTF16(IDS_NOTIFICATIONS_HEADER));
   localized_strings->SetString("notifications_allow",
       l10n_util::GetStringUTF16(IDS_NOTIFICATIONS_ALLOW_RADIO));
   localized_strings->SetString("notifications_ask",
@@ -319,8 +334,10 @@ void ContentSettingsHandler::Observe(NotificationType type,
   switch (type.value) {
     case NotificationType::PROFILE_DESTROYED: {
       Profile* profile = static_cast<Source<Profile> >(source).ptr();
-      if (profile->IsOffTheRecord())
-        dom_ui_->CallJavascriptFunction(L"ContentSettings.OTRProfileDestroyed");
+      if (profile->IsOffTheRecord()) {
+        dom_ui_->CallJavascriptFunction(
+            L"ContentSettingsExceptionsArea.OTRProfileDestroyed");
+      }
       break;
     }
 
@@ -555,9 +572,9 @@ void ContentSettingsHandler::RegisterMessages() {
   dom_ui_->RegisterMessageCallback("setAllowThirdPartyCookies",
       NewCallback(this,
                   &ContentSettingsHandler::SetAllowThirdPartyCookies));
-  dom_ui_->RegisterMessageCallback("removeExceptions",
+  dom_ui_->RegisterMessageCallback("removeException",
       NewCallback(this,
-                  &ContentSettingsHandler::RemoveExceptions));
+                  &ContentSettingsHandler::RemoveException));
   dom_ui_->RegisterMessageCallback("setException",
       NewCallback(this,
                   &ContentSettingsHandler::SetException));
@@ -598,62 +615,60 @@ void ContentSettingsHandler::SetAllowThirdPartyCookies(const ListValue* args) {
   GetContentSettingsMap()->SetBlockThirdPartyCookies(allow == L"true");
 }
 
-void ContentSettingsHandler::RemoveExceptions(const ListValue* args) {
+void ContentSettingsHandler::RemoveException(const ListValue* args) {
   size_t arg_i = 0;
   std::string type_string;
   CHECK(args->GetString(arg_i++, &type_string));
 
   ContentSettingsType type = ContentSettingsTypeFromGroupName(type_string);
-  while (arg_i < args->GetSize()) {
-    if (type == CONTENT_SETTINGS_TYPE_GEOLOCATION) {
-      std::string origin;
-      std::string embedding_origin;
-      bool rv = args->GetString(arg_i++, &origin);
-      DCHECK(rv);
-      rv = args->GetString(arg_i++, &embedding_origin);
-      DCHECK(rv);
-
-      dom_ui_->GetProfile()->GetGeolocationContentSettingsMap()->
-          SetContentSetting(GURL(origin),
-                            GURL(embedding_origin),
-                            CONTENT_SETTING_DEFAULT);
-    } else if (type == CONTENT_SETTINGS_TYPE_NOTIFICATIONS) {
-      std::string origin;
-      std::string setting;
-      bool rv = args->GetString(arg_i++, &origin);
-      DCHECK(rv);
-      rv = args->GetString(arg_i++, &setting);
-      DCHECK(rv);
-      ContentSetting content_setting = ContentSettingFromString(setting);
-      if (content_setting == CONTENT_SETTING_ALLOW) {
-        dom_ui_->GetProfile()->GetDesktopNotificationService()->
-            ResetAllowedOrigin(GURL(origin));
-      } else {
-        DCHECK_EQ(content_setting, CONTENT_SETTING_BLOCK);
-        dom_ui_->GetProfile()->GetDesktopNotificationService()->
-            ResetBlockedOrigin(GURL(origin));
-      }
+  if (type == CONTENT_SETTINGS_TYPE_GEOLOCATION) {
+    std::string origin;
+    std::string embedding_origin;
+    bool rv = args->GetString(arg_i++, &origin);
+    DCHECK(rv);
+    rv = args->GetString(arg_i++, &embedding_origin);
+    DCHECK(rv);
+
+    dom_ui_->GetProfile()->GetGeolocationContentSettingsMap()->
+        SetContentSetting(GURL(origin),
+                          GURL(embedding_origin),
+                          CONTENT_SETTING_DEFAULT);
+  } else if (type == CONTENT_SETTINGS_TYPE_NOTIFICATIONS) {
+    std::string origin;
+    std::string setting;
+    bool rv = args->GetString(arg_i++, &origin);
+    DCHECK(rv);
+    rv = args->GetString(arg_i++, &setting);
+    DCHECK(rv);
+    ContentSetting content_setting = ContentSettingFromString(setting);
+    if (content_setting == CONTENT_SETTING_ALLOW) {
+      dom_ui_->GetProfile()->GetDesktopNotificationService()->
+          ResetAllowedOrigin(GURL(origin));
     } else {
-      std::string mode;
-      bool rv = args->GetString(arg_i++, &mode);
-      DCHECK(rv);
-
-      std::string pattern;
-      rv = args->GetString(arg_i++, &pattern);
-      DCHECK(rv);
-
-      HostContentSettingsMap* settings_map =
-          mode == "normal" ? GetContentSettingsMap() :
-                             GetOTRContentSettingsMap();
-      // The settings map could be null if the mode was OTR but the OTR profile
-      // got destroyed before we received this message.
-      if (settings_map) {
-        settings_map->SetContentSetting(
-            ContentSettingsPattern(pattern),
-            ContentSettingsTypeFromGroupName(type_string),
-            "",
-            CONTENT_SETTING_DEFAULT);
-      }
+      DCHECK_EQ(content_setting, CONTENT_SETTING_BLOCK);
+      dom_ui_->GetProfile()->GetDesktopNotificationService()->
+          ResetBlockedOrigin(GURL(origin));
+    }
+  } else {
+    std::string mode;
+    bool rv = args->GetString(arg_i++, &mode);
+    DCHECK(rv);
+
+    std::string pattern;
+    rv = args->GetString(arg_i++, &pattern);
+    DCHECK(rv);
+
+    HostContentSettingsMap* settings_map =
+        mode == "normal" ? GetContentSettingsMap() :
+                           GetOTRContentSettingsMap();
+    // The settings map could be null if the mode was OTR but the OTR profile
+    // got destroyed before we received this message.
+    if (settings_map) {
+      settings_map->SetContentSetting(
+          ContentSettingsPattern(pattern),
+          ContentSettingsTypeFromGroupName(type_string),
+          "",
+          CONTENT_SETTING_DEFAULT);
     }
   }
 }
diff --git a/chrome/browser/dom_ui/options/content_settings_handler.h b/chrome/browser/dom_ui/options/content_settings_handler.h
index a67f89e..1542539 100644
--- a/chrome/browser/dom_ui/options/content_settings_handler.h
+++ b/chrome/browser/dom_ui/options/content_settings_handler.h
@@ -65,10 +65,10 @@ class ContentSettingsHandler : public OptionsPageUIHandler {
   // chosen.
   void SetContentFilter(const ListValue* args);
 
-  // Removes the given rows from the table. The first entry in |args| is the
-  // content type, and the rest of the arguments describe individual exceptions
+  // Removes the given row from the table. The first entry in |args| is the
+  // content type, and the rest of the arguments depend on the content type
   // to be removed.
-  void RemoveExceptions(const ListValue* args);
+  void RemoveException(const ListValue* args);
 
   // Changes the value of an exception. Called after the user is done editing an
   // exception.
diff --git a/chrome/browser/resources/options/content_settings.css b/chrome/browser/resources/options/content_settings.css
index f2168a2..eea0c30 100644
--- a/chrome/browser/resources/options/content_settings.css
+++ b/chrome/browser/resources/options/content_settings.css
@@ -16,3 +16,22 @@ found in the LICENSE file.
   width: 100px;
   margin-right: 20px;
 }
+
+#exceptionColumnHeaders {
+  display: -webkit-box;
+  margin-bottom: 4px;
+  margin-top: 17px;
+  -webkit-margin-start: 3px;
+}
+
+#exceptionColumnHeaders > div {
+  font-weight: bold;
+}
+
+#exceptionPatternColumn {
+  -webkit-box-flex: 1;
+}
+
+#exceptionBehaviorColumn {
+  width: 140px;
+}
diff --git a/chrome/browser/resources/options/content_settings.html b/chrome/browser/resources/options/content_settings.html
index fa6c26e..9c48996 100644
--- a/chrome/browser/resources/options/content_settings.html
+++ b/chrome/browser/resources/options/content_settings.html
@@ -28,14 +28,8 @@
       <a i18n-values="href:flash_storage_url"
           i18n-content="flash_storage_settings" target="_blank"></a>
 
-      <!-- TODO(estade): put this in a sub-sub-page. -->
-      <div contentType="cookies">
-        <list mode="normal" class="settings-list"></list>
-        <div>
-          <span i18n-content="otr_exceptions_explanation"></span>
-          <list mode="otr" class="settings-list"></list>
-        </div>
-      </div>
+      <button class="exceptionsListButton" contentType="cookies"
+              i18n-content="manage_exceptions"></button>
    </div>
   </section>
 
@@ -43,23 +37,17 @@
   <section>
     <h3 i18n-content="images_tab_label"></h3>
     <div>
-        <label class="radio">
-          <input type="radio" name="images" value="allow">
-          <span i18n-content="images_allow"></span>
-        </label>
-        <label class="radio">
-          <input type="radio" name="images" value="block">
-          <span i18n-content="images_block"></span>
-        </label>
+      <label class="radio">
+        <input type="radio" name="images" value="allow">
+        <span i18n-content="images_allow"></span>
+      </label>
+      <label class="radio">
+        <input type="radio" name="images" value="block">
+        <span i18n-content="images_block"></span>
+      </label>
 
-      <!-- TODO(estade): put this in a sub-sub-page. -->
-      <div contentType="images">
-        <list mode="normal" class="settings-list"></list>
-        <div>
-          <span i18n-content="otr_exceptions_explanation"></span>
-          <list mode="otr" class="settings-list"></list>
-        </div>
-      </div>
+      <button class="exceptionsListButton" contentType="images"
+              i18n-content="manage_exceptions"></button>
     </div>
   </section>
 
@@ -76,14 +64,8 @@
         <span i18n-content="javascript_block"></span>
       </label>
 
-      <!-- TODO(estade): put this in a sub-sub-page. -->
-      <div contentType="javascript">
-        <list mode="normal" class="settings-list"></list>
-        <div>
-          <span i18n-content="otr_exceptions_explanation"></span>
-          <list mode="otr" class="settings-list"></list>
-        </div>
-      </div>
+      <button class="exceptionsListButton" contentType="javascript"
+              i18n-content="manage_exceptions"></button>
     </div>
   </section>
 
@@ -104,14 +86,8 @@
         <span i18n-content="plugins_block"></span>
       </label>
 
-      <!-- TODO(estade): put this in a sub-sub-page. -->
-      <div contentType="plugins">
-        <list mode="normal" class="settings-list"></list>
-        <div>
-          <span i18n-content="otr_exceptions_explanation"></span>
-          <list mode="otr" class="settings-list"></list>
-        </div>
-      </div>
+      <button class="exceptionsListButton" contentType="plugins"
+              i18n-content="manage_exceptions"></button>
 
       <a i18n-content="disable_individual_plugins" id="plugins-tab" href="#"></a>
     </div>
@@ -130,14 +106,8 @@
         <span i18n-content="popups_block"></span>
       </label>
 
-      <!-- TODO(estade): put this in a sub-sub-page. -->
-      <div contentType="popups">
-        <list mode="normal" class="settings-list"></list>
-        <div>
-          <span i18n-content="otr_exceptions_explanation"></span>
-          <list mode="otr" class="settings-list"></list>
-        </div>
-      </div>
+      <button class="exceptionsListButton" contentType="popups"
+              i18n-content="manage_exceptions"></button>
     </div>
   </section>
 
@@ -158,10 +128,8 @@
         <span i18n-content="location_block"></span>
       </label>
 
-      <!-- TODO(estade): put this in a sub-sub-page. -->
-      <div contentType="location">
-        <list mode="normal" class="settings-list"></list>
-      </div>
+      <button class="exceptionsListButton" contentType="location"
+              i18n-content="manage_exceptions"></button>
     </div>
   </section>
 
@@ -182,10 +150,8 @@
         <span i18n-content="notifications_block"></span>
       </label>
 
-      <!-- TODO(estade): put this in a sub-sub-page. -->
-      <div contentType="notifications">
-        <list mode="normal" class="settings-list"></list>
-      </div>
+      <button class="exceptionsListButton" contentType="notifications"
+              i18n-content="manage_exceptions"></button>
     </div>
   </section>
 </div>
diff --git a/chrome/browser/resources/options/content_settings.js b/chrome/browser/resources/options/content_settings.js
index ed8c4a4..787386e 100644
--- a/chrome/browser/resources/options/content_settings.js
+++ b/chrome/browser/resources/options/content_settings.js
@@ -29,17 +29,15 @@ cr.define('options', function() {
 
       chrome.send('getContentFilterSettings');
 
-      var exceptionsLists = this.pageDiv.querySelectorAll('list');
-      for (var i = 0; i < exceptionsLists.length; i++) {
-        options.contentSettings.ExceptionsList.decorate(exceptionsLists[i]);
+      var exceptionsButtons =
+          this.pageDiv.querySelectorAll('.exceptionsListButton');
+      for (var i = 0; i < exceptionsButtons.length; i++) {
+        exceptionsButtons[i].onclick = function(event) {
+          ContentSettingsExceptionsArea.getInstance().showList(
+              event.target.getAttribute('contentType'));
+          OptionsPage.showPageByName('contentExceptions');
+        };
       }
-      ContentSettings.hideOTRLists();
-
-      this.addEventListener('visibleChange', function(event) {
-        for (var i = 0; i < exceptionsLists.length; i++) {
-          exceptionsLists[i].redraw();
-        }
-      });
 
       // Cookies filter page ---------------------------------------------------
       $('block-third-party-cookies').onclick = function(event) {
@@ -63,12 +61,12 @@ cr.define('options', function() {
 
     /**
      * Handles a hash value in the URL (such as bar in
-     * chrome://options/foo#bar). Overrides the default action of showing an
-     * overlay by instead navigating to a particular subtab.
+     * chrome://options/foo#bar).
      * @param {string} hash The hash value.
      */
     handleHash: function(hash) {
-      // TODO(estade): show subpage for hash.
+      ContentSettingsExceptionsArea.getInstance().showList(hash);
+      OptionsPage.showPageByName('contentExceptions');
     },
   };
 
@@ -110,7 +108,7 @@ cr.define('options', function() {
   ContentSettings.setOTRExceptions = function(type, list) {
     var exceptionsList =
         document.querySelector('div[contentType=' + type + ']' +
-                               ' div list[mode=normal]');
+                               ' list[mode=otr]');
 
     exceptionsList.parentNode.classList.remove('hidden');
 
@@ -122,25 +120,6 @@ cr.define('options', function() {
   };
 
   /**
-   * Called when the last incognito window is closed.
-   */
-  ContentSettings.OTRProfileDestroyed = function() {
-    this.hideOTRLists();
-  };
-
-  /**
-   * Clears and hides the incognito exceptions lists.
-   */
-  ContentSettings.hideOTRLists = function() {
-    var otrLists = document.querySelectorAll('list[mode=otr]');
-
-    for (var i = 0; i < otrLists.length; i++) {
-      otrLists[i].reset();
-      otrLists[i].parentNode.classList.add('hidden');
-    }
-  };
-
-  /**
    * Sets the initial value for the Third Party Cookies checkbox.
    * @param {boolean=} block True if we are blocking third party cookies.
    */
diff --git a/chrome/browser/resources/options/content_settings_exceptions_area.html b/chrome/browser/resources/options/content_settings_exceptions_area.html
new file mode 100644
index 0000000..ac47793
--- /dev/null
+++ b/chrome/browser/resources/options/content_settings_exceptions_area.html
@@ -0,0 +1,56 @@
+<div class="page hidden" id="contentSettingsExceptionsArea">
+  <h1></h1>
+
+  <div id="exceptionColumnHeaders">
+    <div id="exceptionPatternColumn">Pattern</div>
+    <div id="exceptionBehaviorColumn">Behavior</div>
+  </div>
+
+  <div contentType="cookies">
+    <list mode="normal"></list>
+    <div>
+      <span i18n-content="otr_exceptions_explanation"></span>
+      <list mode="otr"></list>
+    </div>
+  </div>
+
+  <div contentType="images">
+    <list mode="normal"></list>
+    <div>
+      <span i18n-content="otr_exceptions_explanation"></span>
+      <list mode="otr"></list>
+    </div>
+  </div>
+
+  <div contentType="javascript">
+    <list mode="normal"></list>
+    <div>
+      <span i18n-content="otr_exceptions_explanation"></span>
+      <list mode="otr"></list>
+    </div>
+  </div>
+
+  <div contentType="plugins">
+    <list mode="normal"></list>
+    <div>
+      <span i18n-content="otr_exceptions_explanation"></span>
+      <list mode="otr"></list>
+    </div>
+  </div>
+
+  <div contentType="popups">
+    <list mode="normal"></list>
+    <div>
+      <span i18n-content="otr_exceptions_explanation"></span>
+      <list mode="otr"></list>
+    </div>
+  </div>
+
+  <div contentType="location">
+    <list mode="normal"></list>
+  </div>
+
+  <div contentType="notifications">
+    <list mode="normal"></list>
+  </div>
+</div>
diff --git a/chrome/browser/resources/options/content_settings_exceptions_area.js b/chrome/browser/resources/options/content_settings_exceptions_area.js
index ac20705..ddc85a0 100644
--- a/chrome/browser/resources/options/content_settings_exceptions_area.js
+++ b/chrome/browser/resources/options/content_settings_exceptions_area.js
@@ -308,8 +308,10 @@ cr.define('options.contentSettings', function() {
       this.pattern = newPattern;
       this.setting = newSetting;
 
+      // TODO(estade): this will need to be updated if geolocation/notifications
+      // become editable.
       if (oldPattern != newPattern) {
-        chrome.send('removeExceptions',
+        chrome.send('removeException',
                     [this.contentType, this.mode, oldPattern]);
       }
 
@@ -400,7 +402,16 @@ cr.define('options.contentSettings', function() {
     decorate: function() {
       DeletableItemList.prototype.decorate.call(this);
 
-      this.contentType = this.parentNode.getAttribute('contentType');
+      this.classList.add('settings-list');
+
+      for (var parentNode = this.parentNode; parentNode;
+           parentNode = parentNode.parentNode) {
+        if (parentNode.hasAttribute('contentType')) {
+          this.contentType = parentNode.getAttribute('contentType');
+          break;
+        }
+      }
+
       this.mode = this.getAttribute('mode');
 
       var exceptionList = this;
@@ -505,33 +516,17 @@ cr.define('options.contentSettings', function() {
         console.log('Tried to delete an undeletable row.');
         return;
       }
-      chrome.send(
-          'removeExceptions',
-          [listItem.contentType, listItem.mode, listItem.pattern]);
-    },
 
-    /**
-     * Removes all selected rows from browser's model.
-     */
-    removeSelectedRows: function() {
-      // The first member is the content type; the rest of the values describe
-      // the patterns we are removing.
-      var args = [this.contentType];
-      var selectedItems = this.selectedItems;
-      for (var i = 0; i < selectedItems.length; i++) {
-        if (this.contentType == 'location') {
-          args.push(selectedItems[i]['origin']);
-          args.push(selectedItems[i]['embeddingOrigin']);
-        } else if (this.contentType == 'notifications') {
-          args.push(selectedItems[i]['origin']);
-          args.push(selectedItems[i]['setting']);
-        } else {
-          args.push(this.mode);
-          args.push(selectedItems[i]['displayPattern']);
-        }
-      }
+      var dataItem = listItem.dataItem;
+      var args = [listItem.contentType];
+      if (listItem.contentType == 'location')
+        args.push(dataItem['origin'], dataItem['embeddingOrigin']);
+      else if (listItem.contentType == 'notifications')
+        args.push(dataItem['origin'], dataItem['setting']);
+      else
+        args.push(listItem.mode, listItem.pattern);
 
-      chrome.send('removeExceptions', args);
+      chrome.send('removeException', args);
     },
 
     /**
@@ -544,9 +539,74 @@ cr.define('options.contentSettings', function() {
     }
   };
 
+  var OptionsPage = options.OptionsPage;
+
+  /**
+   * Encapsulated handling of content settings list subpage.
+   * @constructor
+   */
+  function ContentSettingsExceptionsArea() {
+    OptionsPage.call(this, 'contentExceptions',
+                     '', 'contentSettingsExceptionsArea');
+  }
+
+  cr.addSingletonGetter(ContentSettingsExceptionsArea);
+
+  ContentSettingsExceptionsArea.prototype = {
+    __proto__: OptionsPage.prototype,
+
+    initializePage: function() {
+      OptionsPage.prototype.initializePage.call(this);
+
+      var exceptionsLists = this.pageDiv.querySelectorAll('list');
+      for (var i = 0; i < exceptionsLists.length; i++) {
+        options.contentSettings.ExceptionsList.decorate(exceptionsLists[i]);
+      }
+
+      ContentSettingsExceptionsArea.hideOTRLists();
+    },
+
+    /**
+     * Shows one list and hides all others.
+     * @param {string} type The content type.
+     */
+    showList: function(type) {
+      var header = this.pageDiv.querySelector('h1');
+      header.textContent = templateData[type + '_header'];
+
+      var divs = this.pageDiv.querySelectorAll('div[contentType]');
+      for (var i = 0; i < divs.length; i++) {
+        if (divs[i].getAttribute('contentType') == type)
+          divs[i].classList.remove('hidden');
+        else
+          divs[i].classList.add('hidden');
+      }
+    },
+  };
+
+  /**
+   * Called when the last incognito window is closed.
+   */
+  ContentSettingsExceptionsArea.OTRProfileDestroyed = function() {
+    this.hideOTRLists();
+  };
+
+  /**
+   * Clears and hides the incognito exceptions lists.
+   */
+  ContentSettingsExceptionsArea.hideOTRLists = function() {
+    var otrLists = document.querySelectorAll('list[mode=otr]');
+
+    for (var i = 0; i < otrLists.length; i++) {
+      otrLists[i].reset();
+      otrLists[i].parentNode.classList.add('hidden');
+    }
+  };
+
   return {
     ExceptionsListItem: ExceptionsListItem,
     ExceptionsAddRowListItem: ExceptionsAddRowListItem,
     ExceptionsList: ExceptionsList,
+    ContentSettingsExceptionsArea: ContentSettingsExceptionsArea,
   };
 });
diff --git a/chrome/browser/resources/options/options.html b/chrome/browser/resources/options/options.html
index 1e70761..8b8e155 100644
--- a/chrome/browser/resources/options/options.html
+++ b/chrome/browser/resources/options/options.html
@@ -210,6 +210,7 @@
          <div id="subpage-sheet-2" class="subpage-sheet">
            <button class="close-subpage"></button>
            <include src="cookies_view.html">
+           <include src="content_settings_exceptions_area.html">
          </div>
        </div>
      </div>
diff --git a/chrome/browser/resources/options/options.js b/chrome/browser/resources/options/options.js
index 7e1812f..4235eb5 100644
--- a/chrome/browser/resources/options/options.js
+++ b/chrome/browser/resources/options/options.js
@@ -11,6 +11,8 @@ var AutoFillOptions = options.AutoFillOptions;
 var BrowserOptions = options.BrowserOptions;
 var ClearBrowserDataOverlay = options.ClearBrowserDataOverlay;
 var ContentSettings = options.ContentSettings;
+var ContentSettingsExceptionsArea =
+    options.contentSettings.ContentSettingsExceptionsArea;
 var CookiesView = options.CookiesView;
 var EditSearchEngineOverlay = options.EditSearchEngineOverlay;
 var FontSettings = options.FontSettings;
@@ -91,6 +93,8 @@ function load() {
   OptionsPage.register(AdvancedOptions.getInstance());
   OptionsPage.registerSubPage(ContentSettings.getInstance(),
                               AdvancedOptions.getInstance());
+  OptionsPage.registerSubPage(ContentSettingsExceptionsArea.getInstance(),
+                              ContentSettings.getInstance());
   OptionsPage.registerSubPage(CookiesView.getInstance(),
                               ContentSettings.getInstance());
   OptionsPage.registerSubPage(FontSettings.getInstance(),
diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index 4a4a800..091f91f 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -282,7 +282,7 @@ html[hide-menu=true] #mainview {
   vertical-align: middle;
 }
 
-.page > h1 {
+.page h1 {
   -webkit-padding-end: 24px;
   border-bottom: 1px solid #eeeeee;
   color: #53637d;
@@ -293,7 +293,7 @@ html[hide-menu=true] #mainview {
   padding-top: 13px;
 }
 
-.subpage-sheet .page > h1 {
+.subpage-sheet .page h1 {
   padding-top: 4px;
 }