Fix up history state in tabbed options.

I need to write a test for this once dtseng's DOMUI testing framework is in.

Manual tests:
1. open settings page via wrench menu. The back stack should be empty.
2. click on nav links on left. back and forward should work as expected.
3. open a subpage (such as passwords management). Then click on a different nav link, like advanced. Back should take you directly back to the passwords management subpage.
4. Close a subpage via the top right (x). Pressing back should reopen it.
5. search for "auto". Click on content settings, then close it. The original search page should show again (not "under the hood").

BUG=71452
TEST=see above

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

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

9 files changed, 65 insertions, 33 deletions

diff --git a/chrome/browser/resources/options/advanced_options.js b/chrome/browser/resources/options/advanced_options.js
index 0c8697c..cb7f534 100644
--- a/chrome/browser/resources/options/advanced_options.js
+++ b/chrome/browser/resources/options/advanced_options.js
@@ -30,7 +30,7 @@ var OptionsPage = options.OptionsPage;
 
       // Set up click handlers for buttons.
       $('privacyContentSettingsButton').onclick = function(event) {
-        OptionsPage.showPageByName('content');
+        OptionsPage.navigateToPage('content');
         OptionsPage.showTab($('cookies-nav-tab'));
         chrome.send('coreOptionsUserMetricsAction',
             ['Options_ContentSettings']);
@@ -56,7 +56,7 @@ var OptionsPage = options.OptionsPage;
       }
 
       $('fontSettingsCustomizeFontsButton').onclick = function(event) {
-        OptionsPage.showPageByName('fontSettings');
+        OptionsPage.navigateToPage('fontSettings');
         chrome.send('coreOptionsUserMetricsAction', ['Options_FontSettings']);
       };
       $('defaultFontSize').onchange = function(event) {
@@ -64,7 +64,7 @@ var OptionsPage = options.OptionsPage;
             [String(event.target.options[event.target.selectedIndex].value)]);
       };
       $('language-button').onclick = function(event) {
-        OptionsPage.showPageByName('language');
+        OptionsPage.navigateToPage('language');
         chrome.send('coreOptionsUserMetricsAction',
             ['Options_LanuageAndSpellCheckSettings']);
       };
@@ -75,7 +75,7 @@ var OptionsPage = options.OptionsPage;
         };
       } else {
         $('certificatesManageButton').onclick = function(event) {
-          OptionsPage.showPageByName('certificateManager');
+          OptionsPage.navigateToPage('certificateManager');
           OptionsPage.showTab($('personal-certs-nav-tab'));
           chrome.send('coreOptionsUserMetricsAction',
                       ['Options_ManageSSLCertificates']);
@@ -98,7 +98,7 @@ var OptionsPage = options.OptionsPage;
                 'downloadLocationChangeButton');
       } else {
         $('proxiesConfigureButton').onclick = function(event) {
-          OptionsPage.showPageByName('proxy');
+          OptionsPage.navigateToPage('proxy');
           chrome.send('coreOptionsUserMetricsAction',
               ['Options_ShowProxySettings']);
         };
@@ -253,7 +253,8 @@ var OptionsPage = options.OptionsPage;
   AdvancedOptions.RemoveCloudPrintProxySection = function() {
     if (!cr.isChromeOS) {
       var proxySectionElm = $('cloud-print-proxy-section');
-      proxySectionElm.parentNode.removeChild(proxySectionElm);
+      if (proxySectionElm)
+        proxySectionElm.parentNode.removeChild(proxySectionElm);
     }
   };
 
diff --git a/chrome/browser/resources/options/browser_options.js b/chrome/browser/resources/options/browser_options.js
index 9d70454..4bdf82c 100644
--- a/chrome/browser/resources/options/browser_options.js
+++ b/chrome/browser/resources/options/browser_options.js
@@ -48,7 +48,7 @@ cr.define('options', function() {
         OptionsPage.showOverlay('addStartupPageOverlay');
       };
       $('defaultSearchManageEnginesButton').onclick = function(event) {
-        OptionsPage.showPageByName('searchEngines');
+        OptionsPage.navigateToPage('searchEngines');
         chrome.send('coreOptionsUserMetricsAction',
             ['Options_ManageSearchEngines']);
       };
diff --git a/chrome/browser/resources/options/chromeos_system_options.js b/chrome/browser/resources/options/chromeos_system_options.js
index 8f5494e..0def523 100644
--- a/chrome/browser/resources/options/chromeos_system_options.js
+++ b/chrome/browser/resources/options/chromeos_system_options.js
@@ -38,7 +38,7 @@ cr.define('options', function() {
       }
 
       $('language-button').onclick = function(event) {
-        OptionsPage.showPageByName('language');
+        OptionsPage.navigateToPage('language');
       };
       $('modifier-keys-button').onclick = function(event) {
         OptionsPage.showOverlay('languageCustomizeModifierKeysOverlay');
diff --git a/chrome/browser/resources/options/content_settings.js b/chrome/browser/resources/options/content_settings.js
index 1b53509..5f95184 100644
--- a/chrome/browser/resources/options/content_settings.js
+++ b/chrome/browser/resources/options/content_settings.js
@@ -35,7 +35,7 @@ cr.define('options', function() {
         exceptionsButtons[i].onclick = function(event) {
           ContentSettingsExceptionsArea.getInstance().showList(
               event.target.getAttribute('contentType'));
-          OptionsPage.showPageByName('contentExceptions');
+          OptionsPage.navigateToPage('contentExceptions');
         };
       }
 
@@ -47,7 +47,7 @@ cr.define('options', function() {
 
       $('show-cookies-button').onclick = function(event) {
         chrome.send('coreOptionsUserMetricsAction', ['Options_ShowCookies']);
-        OptionsPage.showPageByName('cookiesView');
+        OptionsPage.navigateToPage('cookiesView');
       };
 
       if (!templateData.enable_click_to_play)
@@ -61,7 +61,7 @@ cr.define('options', function() {
      */
     handleHash: function(hash) {
       ContentSettingsExceptionsArea.getInstance().showList(hash);
-      OptionsPage.showPageByName('contentExceptions');
+      OptionsPage.navigateToPage('contentExceptions');
     },
   };
 
diff --git a/chrome/browser/resources/options/language_options.js b/chrome/browser/resources/options/language_options.js
index 13a1d52..268d3be 100644
--- a/chrome/browser/resources/options/language_options.js
+++ b/chrome/browser/resources/options/language_options.js
@@ -173,7 +173,7 @@ cr.define('options', function() {
         // as checkbox click.
         e.preventDefault();
         chrome.send('inputMethodOptionsOpen', [inputMethodId]);
-        OptionsPage.showPageByName(pageName);
+        OptionsPage.navigateToPage(pageName);
       }
       return button;
     },
diff --git a/chrome/browser/resources/options/options.js b/chrome/browser/resources/options/options.js
index 7d24ac83..38a9722 100644
--- a/chrome/browser/resources/options/options.js
+++ b/chrome/browser/resources/options/options.js
@@ -150,7 +150,7 @@ function load() {
 
   if (path.length > 1) {
     var pageName = path.slice(1);
-    OptionsPage.showPageByName(pageName);
+    OptionsPage.navigateToPage(pageName);
     if (hash.length > 1)
       OptionsPage.handleHashForPage(pageName, hash.slice(1));
   } else {
@@ -180,7 +180,7 @@ function load() {
 
   // Clicking on the Settings title brings up the 'Basics' page.
   $('settings-title').onclick = function() {
-    OptionsPage.showPageByName(BrowserOptions.getInstance().name);
+    OptionsPage.navigateToPage(BrowserOptions.getInstance().name);
   };
 }
 
diff --git a/chrome/browser/resources/options/options_page.js b/chrome/browser/resources/options/options_page.js
index f879ced..e241be5 100644
--- a/chrome/browser/resources/options/options_page.js
+++ b/chrome/browser/resources/options/options_page.js
@@ -46,15 +46,35 @@ cr.define('options', function() {
    * Shows the default page.
    */
   OptionsPage.showDefaultPage = function() {
-    // TODO(csilv): Persist the current page.
-    this.showPageByName(BrowserOptions.getInstance().name);
+    var page = BrowserOptions.getInstance();
+    this.showPageByName_(page.name);
+
+    // We show the default page on load. Use replaceState instead of pushState
+    // so that we don't get a superfluous chrome://settings entry in addition
+    // to the desired chrome://settings/browser entry.
+    window.history.replaceState({pageName: page.name}, page.title,
+                                '/' + page.name);
+  };
+
+  /**
+   * "Navigates" to a page, meaning that the page will be shown and the
+   * appropriate entry is placed in the history.
+   * @param {string} pageName Page name.
+   */
+  OptionsPage.navigateToPage = function(pageName) {
+    var visiblePage = this.getTopmostVisiblePage();
+    this.showPageByName_(pageName);
+
+    if (visiblePage.name != pageName)
+      this.pushHistoryState_();
   };
 
   /**
    * Shows a registered page. This handles both top-level pages and sub-pages.
    * @param {string} pageName Page name.
+   * @private
    */
-  OptionsPage.showPageByName = function(pageName) {
+  OptionsPage.showPageByName_ = function(pageName) {
     var targetPage = this.registeredPages[pageName];
 
     // Determine if the root page is 'sticky', meaning that it
@@ -103,6 +123,17 @@ cr.define('options', function() {
   };
 
   /**
+   * Pushes the currently showing page onto the history stack.
+   * @private
+   */
+  OptionsPage.pushHistoryState_ = function() {
+    var page = this.getTopmostVisiblePage();
+    window.history.pushState({pageName: page.name}, page.title,
+                             '/' + page.name);
+
+  };
+
+  /**
    * Called on load. Dispatch the URL hash to the given page's handleHash
    * function.
    * @param {string} pageName The string name of the (registered) options page.
@@ -177,6 +208,8 @@ cr.define('options', function() {
     var topPage = this.getTopmostVisiblePage();
     if (topPage && topPage.parentPage)
       topPage.visible = false;
+
+    this.pushHistoryState_();
   };
 
   /**
@@ -189,6 +222,8 @@ cr.define('options', function() {
       topPage.visible = false;
       topPage = topPage.parentPage;
     }
+
+    this.pushHistoryState_();
   };
 
   /**
@@ -241,12 +276,12 @@ cr.define('options', function() {
     pageNav.textContent = page.title;
     pageNav.tabIndex = 0;
     pageNav.onclick = function(event) {
-      OptionsPage.showPageByName(this.getAttribute('pageName'));
+      OptionsPage.navigateToPage(this.getAttribute('pageName'));
     };
     pageNav.onkeypress = function(event) {
       // Enter or space
       if (event.keyCode == 13 || event.keyCode == 32) {
-        OptionsPage.showPageByName(this.getAttribute('pageName'));
+        OptionsPage.navigateToPage(this.getAttribute('pageName'));
       }
     };
     var navbar = $('navbar');
@@ -320,7 +355,7 @@ cr.define('options', function() {
    */
   OptionsPage.setState = function(data) {
     if (data && data.pageName) {
-      this.showPageByName(data.pageName);
+      this.showPageByName_(data.pageName);
     }
   };
 
@@ -422,6 +457,10 @@ cr.define('options', function() {
     if (!(topPage && topPage.parentPage))
       return;
 
+    // Don't interfere with navbar clicks.
+    if ($('navbar').contains(event.target))
+      return;
+
     // If an overlay is currently visible, do nothing.
     if (this.isOverlayVisible_())
       return;
@@ -436,12 +475,8 @@ cr.define('options', function() {
     if (event.type == 'click')
       this.closeSubPagesToLevel(0);
 
-    // Events should not fall through to the main view,
-    // but they can fall through for the sidebar.
-    if ($('mainview-content').contains(event.target)) {
-      event.stopPropagation();
-      event.preventDefault();
-    }
+    event.stopPropagation();
+    event.preventDefault();
   };
 
   /**
@@ -567,10 +602,6 @@ cr.define('options', function() {
             if (nestingLevel == 1)
               $('subpage-backdrop').classList.remove('hidden');
           }
-
-          // Recent webkit change no longer allows url change from "chrome://".
-          window.history.pushState({pageName: this.name}, this.title,
-                                   '/' + this.name);
         }
 
         if (this.tab) {
diff --git a/chrome/browser/resources/options/personal_options.js b/chrome/browser/resources/options/personal_options.js
index 72dcb48..6e62372 100644
--- a/chrome/browser/resources/options/personal_options.js
+++ b/chrome/browser/resources/options/personal_options.js
@@ -47,13 +47,13 @@ cr.define('options', function() {
         chrome.send('openPrivacyDashboardTabAndActivate');
       };
       $('manage-passwords').onclick = function(event) {
-        OptionsPage.showPageByName('passwordManager');
+        OptionsPage.navigateToPage('passwordManager');
         OptionsPage.showTab($('passwords-nav-tab'));
         chrome.send('coreOptionsUserMetricsAction',
             ['Options_ShowPasswordManager']);
       };
       $('autofill-settings').onclick = function(event) {
-        OptionsPage.showPageByName('autoFillOptions');
+        OptionsPage.navigateToPage('autoFillOptions');
         chrome.send('coreOptionsUserMetricsAction',
             ['Options_ShowAutoFillSettings']);
       };
diff --git a/chrome/browser/resources/options/search_page.js b/chrome/browser/resources/options/search_page.js
index e02ebdb..85a7ac7 100644
--- a/chrome/browser/resources/options/search_page.js
+++ b/chrome/browser/resources/options/search_page.js
@@ -220,7 +220,7 @@ cr.define('options', function() {
       // Toggle the search page if necessary.
       if (text.length) {
         if (!this.searchActive_)
-          OptionsPage.showPageByName(this.name);
+          OptionsPage.navigateToPage(this.name);
       } else {
         if (this.searchActive_)
           OptionsPage.showDefaultPage();