Make it possible to switch between views of the new net-internals page by using #fragments in the URL.

(This way you can link to the DNS tab for example).

BUG=37421

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

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

4 files changed, 52 insertions, 23 deletions

diff --git a/chrome/browser/resources/net_internals/detailsview.js b/chrome/browser/resources/net_internals/detailsview.js
index 847d94b..2521e46 100644
--- a/chrome/browser/resources/net_internals/detailsview.js
+++ b/chrome/browser/resources/net_internals/detailsview.js
@@ -19,8 +19,8 @@ function DetailsView(tabHandlesContainerId,
   this.logView_ = new DetailsLogView(logBoxId);
   this.timelineView_ = new DetailsTimelineView(timelineBoxId);
 
-  this.addTab(logTabId, this.logView_);
-  this.addTab(timelineTabId, this.timelineView_);
+  this.addTab(logTabId, this.logView_, true);
+  this.addTab(timelineTabId, this.timelineView_, true);
 
   // Default to the log view.
   this.switchToTab(logTabId);
diff --git a/chrome/browser/resources/net_internals/index.html b/chrome/browser/resources/net_internals/index.html
index f6df28d..d8c9046 100644
--- a/chrome/browser/resources/net_internals/index.html
+++ b/chrome/browser/resources/net_internals/index.html
@@ -24,11 +24,11 @@ found in the LICENSE file.
     <!-- Tab switcher for main categories. -->
     <div id=categoryTabHandles>
       <ul>
-        <li><a href="#" id=proxyTab>Proxy</a></li>
-        <li><a href="#" id=requestsTab>Requests</a></li>
-        <li><a href="#" id=dnsTab>DNS</a></li>
-        <li><a href="#" id=socketsTab>Sockets</a></li>
-        <li><a href="#" id=httpCacheTab>HTTP Cache</a></li>
+        <li><a href="#proxy" id=proxyTab>Proxy</a></li>
+        <li><a href="#requests" id=requestsTab>Requests</a></li>
+        <li><a href="#dns" id=dnsTab>DNS</a></li>
+        <li><a href="#sockets" id=socketsTab>Sockets</a></li>
+        <li><a href="#httpCache" id=httpCacheTab>HTTP Cache</a></li>
       </ul>
       <div style="clear: both;"></div>
     </div>
@@ -46,8 +46,10 @@ found in the LICENSE file.
       </h4>
       <table border=1>
         <thead>
-          <th>Bad proxy server</th>
-          <th>Time for next retry</th>
+          <tr>
+            <th>Bad proxy server</th>
+            <th>Time for next retry</th>
+          </tr>
         </thead>
         <tbody id=badProxiesTableBody></tbody>
       </table>
diff --git a/chrome/browser/resources/net_internals/main.js b/chrome/browser/resources/net_internals/main.js
index c9bf433..d4c0c11 100644
--- a/chrome/browser/resources/net_internals/main.js
+++ b/chrome/browser/resources/net_internals/main.js
@@ -55,15 +55,30 @@ function onLoaded() {
       new TabSwitcherView(new DivView('categoryTabHandles'));
 
   // Populate the main tabs.
-  categoryTabSwitcher.addTab('requestsTab', requestsView);
-  categoryTabSwitcher.addTab('proxyTab', proxyView);
-  categoryTabSwitcher.addTab('dnsTab', new DivView('dnsTabContent'));
-  categoryTabSwitcher.addTab('socketsTab', new DivView('socketsTabContent'));
+  categoryTabSwitcher.addTab('requestsTab', requestsView, false);
+  categoryTabSwitcher.addTab('proxyTab', proxyView, false);
+  categoryTabSwitcher.addTab('dnsTab', new DivView('dnsTabContent'), false);
+  categoryTabSwitcher.addTab('socketsTab', new DivView('socketsTabContent'),
+                             false);
   categoryTabSwitcher.addTab('httpCacheTab',
-                             new DivView('httpCacheTabContent'));
-
-  // Select the requests tab as the default.
-  categoryTabSwitcher.switchToTab('requestsTab');
+                             new DivView('httpCacheTabContent'), false);
+
+  // Build a map from the anchor name of each tab handle to its "tab ID".
+  // We will consider navigations to the #hash as a switch tab request.
+  var anchorMap = {};
+  var tabIds = categoryTabSwitcher.getAllTabIds();
+  for (var i = 0; i < tabIds.length; ++i) {
+    var aNode = document.getElementById(tabIds[i]);
+    anchorMap[aNode.hash] = tabIds[i];
+  }
+  // Default the empty hash to the requests tab.
+  anchorMap['#'] = anchorMap[''] = 'requestsTab';
+
+  window.onhashchange = function() {
+    var tabId = anchorMap[window.location.hash];
+    if (tabId)
+      categoryTabSwitcher.switchToTab(tabId);
+  };
 
   // Make this category tab widget the primary view, that fills the whole page.
   var windowView = new WindowView(categoryTabSwitcher);
@@ -71,6 +86,9 @@ function onLoaded() {
   // Trigger initial layout.
   windowView.resetGeometry();
 
+  // Select the initial view based on the current URL.
+  window.onhashchange();
+
   // Tell the browser that we are ready to start receiving log events.
   g_browser.sendReady();
 }
diff --git a/chrome/browser/resources/net_internals/tabswitcherview.js b/chrome/browser/resources/net_internals/tabswitcherview.js
index b712edc..1734ba1 100644
--- a/chrome/browser/resources/net_internals/tabswitcherview.js
+++ b/chrome/browser/resources/net_internals/tabswitcherview.js
@@ -64,15 +64,17 @@ TabSwitcherView.prototype.show = function(isVisible) {
  *                    "tab".
  * @param {!View} view The tab's actual contents.
  */
-TabSwitcherView.prototype.addTab = function(id, contentView) {
+TabSwitcherView.prototype.addTab = function(id, contentView, switchOnClick) {
   var tab = new TabEntry(id, contentView);
   this.tabs_.push(tab);
 
-  // Attach a click handler, used to switch to the tab.
-  var self = this;
-  tab.getTabHandleNode().onclick = function() {
-    self.switchToTab(id);
-  };
+  if (switchOnClick) {
+    // Attach a click handler, used to switch to the tab.
+    var self = this;
+    tab.getTabHandleNode().onclick = function() {
+      self.switchToTab(id);
+    };
+  }
 
   // Start tabs off as hidden.
   tab.contentView.show(false);
@@ -116,6 +118,13 @@ TabSwitcherView.prototype.switchToTab = function(id) {
   newTab.setSelected(true);
 };
 
+TabSwitcherView.prototype.getAllTabIds = function() {
+  var ids = [];
+  for (var i = 0; i < this.tabs_.length; ++i)
+    ids.push(this.tabs_[i].id);
+  return ids;
+};
+
 //-----------------------------------------------------------------------------
 
 /**