Add tabs to passwords and exceptions subpage.

BUG=None
TEST=None

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

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

12 files changed, 94 insertions, 50 deletions

diff --git a/chrome/browser/dom_ui/passwords_exceptions_handler.cc b/chrome/browser/dom_ui/passwords_exceptions_handler.cc
index dfb87e8..0fd3ffd 100644
--- a/chrome/browser/dom_ui/passwords_exceptions_handler.cc
+++ b/chrome/browser/dom_ui/passwords_exceptions_handler.cc
@@ -24,6 +24,10 @@ void PasswordsExceptionsHandler::GetLocalizedValues(
 
   localized_strings->SetString(L"passwordsExceptionsTitle",
       l10n_util::GetString(IDS_PASSWORDS_EXCEPTIONS_WINDOW_TITLE));
+  localized_strings->SetString(L"passwordsTabTitle",
+      l10n_util::GetString(IDS_PASSWORDS_SHOW_PASSWORDS_TAB_TITLE));
+  localized_strings->SetString(L"exceptionsTabTitle",
+      l10n_util::GetString(IDS_PASSWORDS_EXCEPTIONS_TAB_TITLE));
 }
 
 void PasswordsExceptionsHandler::RegisterMessages() {
diff --git a/chrome/browser/resources/options.html b/chrome/browser/resources/options.html
index e8e36c9..0ff31d4 100644
--- a/chrome/browser/resources/options.html
+++ b/chrome/browser/resources/options.html
@@ -138,6 +138,13 @@ function load() {
   } else {
     OptionsPage.showPageByName(BrowserOptions.getInstance().name);
   }
+
+  var subpagesNavTabs = document.querySelectorAll('.subpages-nav-tabs');
+  for(var i = 0; i < subpagesNavTabs.length; i++) {
+    subpagesNavTabs[i].onclick = function(event) {
+      OptionsPage.showTab(event.srcElement);
+    }
+  }
 }
 
 document.addEventListener('DOMContentLoaded', load);
@@ -150,10 +157,10 @@ window.onpopstate = function(e) {
 <link rel="stylesheet" href="dom_ui.css">
 <link rel="stylesheet" href="options/options_page.css">
 <link rel="stylesheet" href="options/browser_options_page.css">
-<link rel="stylesheet" href="options/content_settings_page.css">
 <link rel="stylesheet" href="options/content_settings_exceptions_area.css">
 <link rel="stylesheet" href="options/clear_browser_data_overlay.css">
 <link rel="stylesheet" href="options/import_data_overlay.css">
+<link rel="stylesheet" href="options/subpages_tab_controls.css">
 <if expr="pp_ifdef('chromeos')">
   <link rel="stylesheet" href="options/chromeos_accounts_options_page.css">
   <link rel="stylesheet" href="options/chromeos_internet_options_page.css">
diff --git a/chrome/browser/resources/options/advanced_options.js b/chrome/browser/resources/options/advanced_options.js
index 09f7c32..7f88b3b 100644
--- a/chrome/browser/resources/options/advanced_options.js
+++ b/chrome/browser/resources/options/advanced_options.js
@@ -29,6 +29,7 @@ var OptionsPage = options.OptionsPage;
       // Setup click handlers for buttons.
       $('privacyContentSettingsButton').onclick = function(event) {
         OptionsPage.showPageByName('content');
+        OptionsPage.showTab($('cookies-nav-tab'));
       };
       $('privacyClearDataButton').onclick = function(event) {
         OptionsPage.showOverlay('clearBrowserDataOverlay');
diff --git a/chrome/browser/resources/options/content_settings.html b/chrome/browser/resources/options/content_settings.html
index c5911b7..e3a550c 100644
--- a/chrome/browser/resources/options/content_settings.html
+++ b/chrome/browser/resources/options/content_settings.html
@@ -6,7 +6,7 @@
   </h1>
 
   <!-- Navigation tabs -->
-  <div id="content-settings-nav-tabs">
+  <div class="subpages-nav-tabs">
     <span i18n-content="cookies_tab_label" id="cookies-nav-tab"
           class="inactive-tab" tab-contents="cookiesFilterTab"></span><span
           i18n-content="images_tab_label" id="images-nav-tab"
@@ -25,7 +25,7 @@
   <br>
 
   <!-- Cookie filter tab contents -->
-  <div id="cookiesFilterTab" class="content-settings-tab-contents">
+  <div id="cookiesFilterTab" class="subpages-tab-contents">
     <span i18n-content="cookies_modify"></span>
     <table class="option-control-table">
     <tr>
@@ -75,7 +75,7 @@
   </div>
 
   <!-- Image filter tab contents -->
-  <div id="imagesFilterTab" class="content-settings-tab-contents">
+  <div id="imagesFilterTab" class="subpages-tab-contents">
     <span i18n-content="images_setting"></span>
     <table class="option-control-table">
     <tr>
@@ -103,7 +103,7 @@
   </div>
 
   <!-- JavaScript filter tab contents -->
-  <div id="javascriptFilterTab" class="content-settings-tab-contents">
+  <div id="javascriptFilterTab" class="subpages-tab-contents">
     <span i18n-content="javascript_setting"></span>
     <table class="option-control-table">
     <tr>
@@ -127,7 +127,7 @@
   </div>
 
   <!-- Plug-ins filter tab contents -->
-  <div id="pluginsFilterTab" class="content-settings-tab-contents">
+  <div id="pluginsFilterTab" class="subpages-tab-contents">
     <span i18n-content="plugins_setting"></span>
     <table class="option-control-table">
     <tr>
@@ -156,7 +156,7 @@
   </div>
 
   <!-- Pop-ups filter tab contents -->
-  <div id="popupsFilterTab" class="content-settings-tab-contents">
+  <div id="popupsFilterTab" class="subpages-tab-contents">
     <span i18n-content="popups_setting"></span>
     <table class="option-control-table">
     <tr>
@@ -180,7 +180,7 @@
   </div>
 
   <!-- Location filter tab contents -->
-  <div id="locationFilterTab" class="content-settings-tab-contents">
+  <div id="locationFilterTab" class="subpages-tab-contents">
     <span i18n-content="location_setting"></span>
     <table class="option-control-table">
     <tr>
@@ -210,7 +210,7 @@
   </div>
 
   <!-- Notifications filter tab contents -->
-  <div id="notificationsFilterTab" class="content-settings-tab-contents">
+  <div id="notificationsFilterTab" class="subpages-tab-contents">
     <span i18n-content="notifications_setting"></span>
     <table class="option-control-table">
     <tr>
diff --git a/chrome/browser/resources/options/content_settings.js b/chrome/browser/resources/options/content_settings.js
index 079a9a7..f4640bf 100644
--- a/chrome/browser/resources/options/content_settings.js
+++ b/chrome/browser/resources/options/content_settings.js
@@ -28,12 +28,6 @@ cr.define('options', function() {
       OptionsPage.prototype.initializePage.call(this);
 
       chrome.send('getContentFilterSettings');
-      this.showTab($('cookies-nav-tab'));
-
-      var self = this;
-      $('content-settings-nav-tabs').onclick = function(event) {
-        self.showTab(event.srcElement);
-      };
 
       // Cookies filter page ---------------------------------------------------
       $('cookies-exceptions-button').onclick = function(event) {
@@ -59,25 +53,6 @@ cr.define('options', function() {
       options.contentSettings.ExceptionsArea.decorate(
           $('imagesExceptionsArea'));
     },
-
-    /**
-     * Shows the tab contents for the given navigation tab.
-     * @param {!Element} tab The tab that the user clicked.
-     */
-    showTab: function(tab) {
-      if (!tab.classList.contains('inactive-tab'))
-        return;
-
-      if (this.activeNavTab != null) {
-        this.activeNavTab.classList.remove('active-tab');
-        $(this.activeNavTab.getAttribute('tab-contents')).classList.
-            remove('active-tab-contents');
-      }
-
-      tab.classList.add('active-tab');
-      $(tab.getAttribute('tab-contents')).classList.add('active-tab-contents');
-      this.activeNavTab = tab;
-    }
   };
 
   /**
diff --git a/chrome/browser/resources/options/import_data_overlay.html b/chrome/browser/resources/options/import_data_overlay.html
index 4b65410..45dee1d 100644
--- a/chrome/browser/resources/options/import_data_overlay.html
+++ b/chrome/browser/resources/options/import_data_overlay.html
@@ -5,7 +5,7 @@
     <select id="supported-browsers"></select>
   </div>
   <div id="checkboxList">
-    <span i18n-content="import_description"></span><br>
+    <div i18n-content="import_description"></div>
     <label>
       <input id="import-favorites" type="checkbox">
       <span i18n-content="import_favorites">
@@ -24,7 +24,7 @@
     </label><br>
   </div>
   <button id="import-data-cancel" i18n-content="cancel"
-    onclick="ImportDataOverlay.dismiss();"></button>
+      onclick="ImportDataOverlay.dismiss();"></button>
   <button id="import-data-commit" i18n-content="import_commit"></button>
   <span id="import-throbber"></span>
 </div>
diff --git a/chrome/browser/resources/options/import_data_overlay.js b/chrome/browser/resources/options/import_data_overlay.js
index 66eb594..8bca170 100644
--- a/chrome/browser/resources/options/import_data_overlay.js
+++ b/chrome/browser/resources/options/import_data_overlay.js
@@ -18,7 +18,7 @@ cr.define('options', function() {
   }
 
   ImportDataOverlay.throbIntervalId = 0
-  ImportDataOverlay.checkboxMask = "";
+  ImportDataOverlay.checkboxMask = '';
 
   cr.addSingletonGetter(ImportDataOverlay);
 
@@ -34,8 +34,9 @@ cr.define('options', function() {
       OptionsPage.prototype.initializePage.call(this);
 
       var self = this;
-      var checkboxList = $('checkboxList').getElementsByTagName('input');
-      for (var i = 0; i < checkboxList.length; ++i) {
+      var checkboxList =
+          document.querySelectorAll('#checkboxList input[type=checkbox]');
+      for (var i = 0; i < checkboxList.length; i++) {
         if(checkboxList[i].type == 'checkbox')
           checkboxList[i].onchange = function(e) {
             self.countCheckboxes_();
@@ -56,8 +57,9 @@ cr.define('options', function() {
 
     countCheckboxes_: function() {
       ImportDataOverlay.checkboxMask = "";
-      var checkboxList = $('checkboxList').getElementsByTagName('input');
-      for (var i = 0; i < checkboxList.length; ++i) {
+      var checkboxList =
+          document.querySelectorAll('#checkboxList input[type=checkbox]');
+      for (var i = 0; i < checkboxList.length; i++) {
         if (checkboxList[i].type == 'checkbox') {
           if(checkboxList[i].checked)
             ImportDataOverlay.checkboxMask += "1";
diff --git a/chrome/browser/resources/options/options_page.js b/chrome/browser/resources/options/options_page.js
index 868729e..62af762 100644
--- a/chrome/browser/resources/options/options_page.js
+++ b/chrome/browser/resources/options/options_page.js
@@ -65,6 +65,25 @@ cr.define('options', function() {
   };
 
   /**
+  * Shows the tab contents for the given navigation tab.
+  * @param {!Element} tab The tab that the user clicked.
+  */
+  OptionsPage.showTab = function(tab) {
+    if (!tab.classList.contains('inactive-tab'))
+      return;
+
+    if (this.activeNavTab != null) {
+      this.activeNavTab.classList.remove('active-tab');
+      $(this.activeNavTab.getAttribute('tab-contents')).classList.
+          remove('active-tab-contents');
+    }
+
+    tab.classList.add('active-tab');
+    $(tab.getAttribute('tab-contents')).classList.add('active-tab-contents');
+    this.activeNavTab = tab;
+  }
+
+  /**
    * Registers new options page.
    * @param {OptionsPage} page Page to register.
    */
diff --git a/chrome/browser/resources/options/passwords_exceptions.html b/chrome/browser/resources/options/passwords_exceptions.html
index 6db421d..b70a0a7 100644
--- a/chrome/browser/resources/options/passwords_exceptions.html
+++ b/chrome/browser/resources/options/passwords_exceptions.html
@@ -4,4 +4,28 @@
     &gt;
     <span i18n-content="passwordsExceptionsTitle"></span>
   </h1>
+
+  <!-- Navigation tabls -->
+  <div class="subpages-nav-tabs">
+    <span i18n-content="passwordsTabTitle" id="passwords-nav-tab"
+        class="inactive-tab" tab-contents="passwordsFilterTab"></span>
+    <span i18n-content="exceptionsTabTitle" id="exceptions-nav-tab"
+        class="inactive-tab" tab-contents="exceptionsFilterTab"></span>
+  </div>
+
+  <!-- Passwords filter tab contents -->
+  <div id="passwordsFilterTab" class="subpages-tab-contents">
+    <section>
+      <div id="passwordsArea">
+      </div>
+    </section>
+  </div>
+
+  <!-- Exceptions filter tab contents -->
+  <div id="exceptionsFilterTab" class="subpages-tab-contents">
+    <section>
+      <div id="exceptionsArea">
+      </div>
+    </section>
+  </div>
 </div>
diff --git a/chrome/browser/resources/options/passwords_exceptions.js b/chrome/browser/resources/options/passwords_exceptions.js
index bf5b867..313a6dd5 100644
--- a/chrome/browser/resources/options/passwords_exceptions.js
+++ b/chrome/browser/resources/options/passwords_exceptions.js
@@ -14,6 +14,7 @@ cr.define('options', function() {
    * @constructor
    */
   function PasswordsExceptions() {
+    this.activeNavTab = null;
     OptionsPage.call(this, 'passwordsExceptions',
                      templateData.passwordsExceptionsTitle,
                      'passwordsExceptionsPage');
@@ -27,8 +28,11 @@ cr.define('options', function() {
     initializePage: function() {
       OptionsPage.prototype.initializePage.call(this);
 
-      // TODO(sargrass): Add initialization here.
-    }
+      // TODO(sargrass): Passwords filter page --------------------------
+
+      // TODO(sargrass): Exceptions filter page -------------------------
+
+    },
   };
 
   // Export
diff --git a/chrome/browser/resources/options/personal_options.js b/chrome/browser/resources/options/personal_options.js
index 33811bf..98a4a27 100644
--- a/chrome/browser/resources/options/personal_options.js
+++ b/chrome/browser/resources/options/personal_options.js
@@ -50,9 +50,17 @@ cr.define('options', function() {
           });
 
 
-      $('showpasswords').onclick = function(event) {
-        OptionsPage.showPageByName('passwordsExceptions');
-      };
+      if(cr.isMac) {
+        $('showpasswords').onclick = function(event) {
+          //TODO(sargrass): Add the Mac implementation
+        }
+      }
+      else {
+        $('showpasswords').onclick = function(event) {
+          OptionsPage.showPageByName('passwordsExceptions');
+          OptionsPage.showTab($('passwords-nav-tab'));
+        };
+      }
 
       $('autofill_options').onclick = function(event) {
         OptionsPage.showPageByName('autoFillOptions');
diff --git a/chrome/browser/resources/options/content_settings_page.css b/chrome/browser/resources/options/subpages_tab_controls.css
index 08facfb..e0e73e2 100644
--- a/chrome/browser/resources/options/content_settings_page.css
+++ b/chrome/browser/resources/options/subpages_tab_controls.css
@@ -4,7 +4,7 @@ Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file.
 */
 
-#content-settings-nav-tabs .inactive-tab {
+.subpages-nav-tabs .inactive-tab {
   background: -webkit-gradient(linear,
                                left top,
                                left bottom,
@@ -14,7 +14,7 @@ found in the LICENSE file.
   padding: 4px 8px;
 }
 
-#content-settings-nav-tabs .active-tab {
+.subpages-nav-tabs .active-tab {
   background: white;
   border: 1px solid #a0a0a0;
   border-bottom: 0;
@@ -23,11 +23,11 @@ found in the LICENSE file.
   font-weight: bold;
 }
 
-#content-settings-nav-tabs {
+.subpages-nav-tabs {
   margin-bottom: 15px;
 }
 
-.content-settings-tab-contents {
+.subpages-tab-contents {
   display: none;
    -webkit-padding-start: 10px;
 }