Change the overall appearance of about:net-internals:

- The main tabs are now organized vertically rather than horizontally. - Add a small bar at the top indicating if in capture mode, or file mode. Review URL: http://codereview.chromium.org/7482020 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@94471 0039d316-1c4b-4281-b951-d872f2087c98
author: eroman@chromium.org <eroman@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> 2011-07-28 16:13:32 +0000
committer: eroman@chromium.org <eroman@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> 2011-07-28 16:13:32 +0000
commit: 5333388fea438aaa9a797548f6e26c5105009b5a (patch)
tree: 175c6d9311d44019703cc7721dd1df5c46ffbc99 /chrome/browser
parent: aaa72e79db2cda858908164f9e7aec4dbc8e14de (diff)
download: chromium_src-5333388fea438aaa9a797548f6e26c5105009b5a.zip
chromium_src-5333388fea438aaa9a797548f6e26c5105009b5a.tar.gz
chromium_src-5333388fea438aaa9a797548f6e26c5105009b5a.tar.bz2
10 files changed, 167 insertions, 94 deletions
diff --git a/chrome/browser/resources/net_internals/dataview.js b/chrome/browser/resources/net_internals/dataview.js
index 14d7cd0..991364d 100644
--- a/chrome/browser/resources/net_internals/dataview.js
+++ b/chrome/browser/resources/net_internals/dataview.js
@@ -196,7 +196,7 @@ DataView.prototype.loadLogFile = function(logFile) {
     this.setLoadFileStatus('Loading log...', true);
     var fileReader = new FileReader();
 
-    fileReader.onload = this.onLoadLogFile.bind(this);
+    fileReader.onload = this.onLoadLogFile.bind(this, logFile);
     fileReader.onerror = this.onLoadLogFileError.bind(this);
 
     fileReader.readAsText(logFile);
@@ -210,13 +210,13 @@ DataView.prototype.loadLogFile = function(logFile) {
 DataView.prototype.onLoadLogFileError = function(event) {
   this.loadFileElement_.value = null;
   this.setLoadFileStatus(
-      'Error ' +  getKeyWithValue(FileError, event.target.error.code) +
+      'Error ' + getKeyWithValue(FileError, event.target.error.code) +
           '.  Unable to read file.',
       false);
 };
 
-DataView.prototype.onLoadLogFile = function(event) {
-  var result = loadLogFile(event.target.result);
+DataView.prototype.onLoadLogFile = function(logFile, event) {
+  var result = loadLogFile(event.target.result, logFile.fileName);
   this.setLoadFileStatus(result, false);
 };
 
diff --git a/chrome/browser/resources/net_internals/detailsview.js b/chrome/browser/resources/net_internals/detailsview.js
index a68a6b1..8244cec 100644
--- a/chrome/browser/resources/net_internals/detailsview.js
+++ b/chrome/browser/resources/net_internals/detailsview.js
@@ -14,19 +14,25 @@ function DetailsView(tabHandlesContainerId,
                      timelineTabId,
                      logBoxId,
                      timelineBoxId) {
-  TabSwitcherView.call(this, tabHandlesContainerId);
+  var tabSwitcher = new TabSwitcherView();
+
+  VerticalSplitView.call(this,
+                         new DivView(tabHandlesContainerId),
+                         tabSwitcher);
+
+  this.tabSwitcher_ = tabSwitcher;
 
   this.logView_ = new DetailsLogView(logBoxId);
   this.timelineView_ = new DetailsTimelineView(timelineBoxId);
 
-  this.addTab(logTabId, this.logView_, true, true);
-  this.addTab(timelineTabId, this.timelineView_, true, true);
+  this.tabSwitcher_.addTab(logTabId, this.logView_, true, true);
+  this.tabSwitcher_.addTab(timelineTabId, this.timelineView_, true, true);
 
   // Default to the log view.
-  this.switchToTab(logTabId, null);
+  this.tabSwitcher_.switchToTab(logTabId, null);
 };
 
-inherits(DetailsView, TabSwitcherView);
+inherits(DetailsView, VerticalSplitView);
 
 // The delay between updates to repaint.
 DetailsView.REPAINT_TIMEOUT_MS = 50;
@@ -39,8 +45,9 @@ DetailsView.prototype.setData = function(currentData) {
   // by the source ID.
   var sortedCurrentData = DetailsView.createSortedCopy_(currentData);
 
-  for (var i = 0; i < this.tabs_.length; ++i)
-    this.tabs_[i].contentView.setData(sortedCurrentData);
+  // TODO(eroman): Should not access private members of TabSwitcherView.
+  for (var i = 0; i < this.tabSwitcher_.tabs_.length; ++i)
+    this.tabSwitcher_.tabs_[i].contentView.setData(sortedCurrentData);
 };
 
 DetailsView.createSortedCopy_ = function(origArray) {
diff --git a/chrome/browser/resources/net_internals/index.html b/chrome/browser/resources/net_internals/index.html
index dda8a67..26a8ebb 100644
--- a/chrome/browser/resources/net_internals/index.html
+++ b/chrome/browser/resources/net_internals/index.html
@@ -15,26 +15,40 @@ found in the LICENSE file.
   </head>
   <body id=dataViewDropTarget>
 
+    <div id=statusViewId>
+      <!-- We use a different status bar when in capture mode vs file mode -->
+      <div id=statusViewForCapture>
+        <!-- TODO(eroman): Move the actively captured events count to here. -->
+        Recording...
+      </div>
+
+      <div id=statusViewForFile style="display:none">
+        Displaying log file (<span id='statusViewDumpFileName'></span>)
+      </div>
+    </div>
+
     <!-- Tab switcher for main categories. -->
-    <div id=categoryTabHandles>
-      <ul>
-        <li><a href="#data" id=dataTab>Data</a></li>
-        <li><a href="#proxy" id=proxyTab>Proxy</a></li>
-        <li><a href="#events" id=eventsTab>Events</a></li>
-        <li><a href="#dns" id=dnsTab>DNS</a></li>
-        <li><a href="#sockets" id=socketsTab>Sockets</a></li>
-        <li><a href="#spdy" id=spdyTab>SPDY</a></li>
-        <li><a href="#httpCache" id=httpCacheTab>HTTP Cache</a></li>
-        <li><a href="#httpThrottling" id=httpThrottlingTab>HTTP Throttling</a></li>
-        <!-- Tab is only shown on Windows -->
-        <li><a href="#serviceProviders" id=serviceProvidersTab style="display: none;">SPIs</a></li>
-        <li><a href="#tests" id=testTab>Tests</a></li>
-        <li><a href="#hsts" id=hstsTab>HSTS</a></li>
-        <li><a href="#logs" id=logsTab style="display: none;">Logs</a></li>
-        <li><a href="#prerender" id=prerenderTab>Prerender</a></li>
-      </ul>
-      <div style="clear: both;"></div>
+    <div id=categoryTabHandles class="tab-switcher-view">
+      <a href="#data" id=dataTab>Data</a>
+      <a href="#proxy" id=proxyTab>Proxy</a>
+      <a href="#events" id=eventsTab>Events</a>
+      <a href="#dns" id=dnsTab>DNS</a>
+      <a href="#sockets" id=socketsTab>Sockets</a>
+      <a href="#spdy" id=spdyTab>SPDY</a>
+      <a href="#httpCache" id=httpCacheTab>HTTP Cache</a>
+      <a href="#httpThrottling" id=httpThrottlingTab>HTTP Throttling</a>
+      <!-- Tab is only shown on Windows -->
+      <a href="#serviceProviders" id=serviceProvidersTab style="display: none;">SPIs</a>
+      <a href="#tests" id=testTab>Tests</a>
+      <a href="#hsts" id=hstsTab>HSTS</a>
+      <!-- Tab is only shown on ChromeOS -->
+      <a href="#logs" id=logsTab style="display: none;">Logs</a>
+      <a href="#prerender" id=prerenderTab>Prerender</a>
     </div>
+
+    <!-- Splitter Box: This is a handle to resize the vertical divider -->
+    <div id=splitterBoxForMainTabs class=splitterBox></div>
+
     <!-- Proxy info -->
     <div id=proxyTabContent>
       <h4>
@@ -413,7 +427,7 @@ found in the LICENSE file.
       <input type=button value="Delete all" id=deleteAll />
     </div>
     <!-- Splitter Box: This is a handle to resize the vertical divider -->
-    <div id=splitterBox></div>
+    <div id=splitterBoxForEventDetails class=splitterBox></div>
     <!-- Details box: This is the panel on the right which shows information -->
     <div id=detailsTabHandles>
       <table class=tabSwitcher cellspacing=0>
diff --git a/chrome/browser/resources/net_internals/logdumputil.js b/chrome/browser/resources/net_internals/logdumputil.js
index 94501eb..cb48c59 100644
--- a/chrome/browser/resources/net_internals/logdumputil.js
+++ b/chrome/browser/resources/net_internals/logdumputil.js
@@ -95,7 +95,7 @@ createLogDumpAsync = function(callback) {
  *     valid data for the tab, so the tab is hidden.  Otherwise, the tab is
  *     shown.
  */
-function loadLogDump(logDump) {
+function loadLogDump(logDump, fileName) {
   // Perform minimal validity check, and abort if it fails.
   if (typeof(logDump) != 'object')
     return 'Load failed.  Top level JSON data is not an object.';
@@ -130,7 +130,7 @@ function loadLogDump(logDump) {
   // Prevent communication with the browser.  Once the constants have been
   // loaded, it's safer to continue trying to load the log, even in the case of
   // bad data.
-  g_browser.onLoadLogFile();
+  g_browser.onLoadLogFile(fileName);
 
   // Delete all events.  This will also update all logObservers.
   g_browser.deleteAllEvents();
@@ -199,7 +199,7 @@ function loadLogDump(logDump) {
  * full net-internals dump, or a NetLog dump only.  Returns a string containing
  * a log of the load.
  */
-loadLogFile = function(logFileContents) {
+loadLogFile = function(logFileContents, fileName) {
   // Try and parse the log dump as a single JSON string.  If this succeeds,
   // it's most likely a full log dump.  Otherwise, it may be a dump created by
   // --log-net-log.
@@ -221,7 +221,7 @@ loadLogFile = function(logFileContents) {
 
   if (!parsedDump)
     return 'Unable to parse log dump as JSON file.';
-  return loadLogDump(parsedDump);
+  return loadLogDump(parsedDump, fileName);
 };
 
 // End of anonymous namespace.
diff --git a/chrome/browser/resources/net_internals/main.css b/chrome/browser/resources/net_internals/main.css
index c4c6b98..3bb30b6 100644
--- a/chrome/browser/resources/net_internals/main.css
+++ b/chrome/browser/resources/net_internals/main.css
@@ -45,7 +45,7 @@ body {
   overflow: auto;
 }
 
-#splitterBox {
+.splitterBox {
   background: #bfbfbf;
   border-left: 1px inset black;
   border-right: 1px solid black;
@@ -279,3 +279,15 @@ table.styledTable,
 .warningText {
   color: red;
 }
+
+#statusViewForCapture {
+  background: red;
+  color: #eee;
+  padding: 4px;
+}
+
+#statusViewForFile {
+  background: #88c;
+  color: #eee;
+  padding: 4px;
+}
diff --git a/chrome/browser/resources/net_internals/main.js b/chrome/browser/resources/net_internals/main.js
index bc25d88..82851fb 100644
--- a/chrome/browser/resources/net_internals/main.js
+++ b/chrome/browser/resources/net_internals/main.js
@@ -52,7 +52,7 @@ function onLoaded() {
                                   'filterBox',
                                   'eventsBox',
                                   'actionBox',
-                                  'splitterBox');
+                                  'splitterBoxForEventDetails');
 
   // Create a view which will display info on the proxy setup.
   var proxyView = new ProxyView('proxyTabContent',
@@ -142,7 +142,19 @@ function onLoaded() {
                                         'prerenderActiveDiv');
 
   // Create a view which lets you tab between the different sub-views.
-  var categoryTabSwitcher = new TabSwitcherView('categoryTabHandles');
+  // This view is a left (resizable) navigation bar.
+  var categoryTabSwitcher = new TabSwitcherView();
+  var tabSwitcherSplitView = new ResizableVerticalSplitView(
+      new DivView('categoryTabHandles'),
+      categoryTabSwitcher,
+      new DivView('splitterBoxForMainTabs'));
+
+  // By default the split for the left navbar will be at 50% of the entire
+  // width. This is not aesthetically pleasing, so we will shrink it.
+  // TODO(eroman): Should set this dynamically based on the largest tab
+  //               name rather than using a fixed width.
+  tabSwitcherSplitView.setLeftSplit(150);
+
   g_browser.setTabSwitcher(categoryTabSwitcher);
 
   // Populate the main tabs.  Even tabs that don't contain information for the
@@ -179,8 +191,14 @@ function onLoaded() {
   window.onhashchange = onUrlHashChange.bind(null, anchorMap,
                                              categoryTabSwitcher);
 
-  // Make this category tab widget the primary view, that fills the whole page.
-  var windowView = new WindowView(categoryTabSwitcher);
+  // Cut out a small vertical strip at the top of the window, to display
+  // a high level status (i.e. if we are capturing events, or displaying a
+  // log file). Below it we will position the main tabs and their content
+  // area.
+  var statusView = new DivView('statusViewId');
+  var verticalSplitView = new VerticalSplitView(statusView,
+                                                tabSwitcherSplitView);
+  var windowView = new WindowView(verticalSplitView);
 
   // Trigger initial layout.
   windowView.resetGeometry();
@@ -617,11 +635,21 @@ BrowserBridge.prototype.isViewingLogFile = function() {
  * not be mixed with current Chrome state.  Also hides any interactive HTML
  * elements that send messages to the browser.  Cannot be undone without
  * reloading the page.
+ *
+ * @param {String} fileName The name of the log file that has been loaded.
  */
-BrowserBridge.prototype.onLoadLogFile = function() {
+BrowserBridge.prototype.onLoadLogFile = function(fileName) {
   if (!this.isViewingLogFile_) {
     this.isViewingLogFile_ = true;
     this.setSecurityStripping(false);
+
+    // Swap out the status bar to indicate we have loaded from a file.
+    setNodeDisplay($('statusViewForCapture'), false);
+    setNodeDisplay($('statusViewForFile'), true);
+
+    // Indicate which file is being displayed.
+    $('statusViewDumpFileName').innerText = fileName;
+
     document.styleSheets[0].insertRule('.hideOnLoadLog { display: none; }');
   }
 };
diff --git a/chrome/browser/resources/net_internals/resizableverticalsplitview.js b/chrome/browser/resources/net_internals/resizableverticalsplitview.js
index ed77914..18b2566 100644
--- a/chrome/browser/resources/net_internals/resizableverticalsplitview.js
+++ b/chrome/browser/resources/net_internals/resizableverticalsplitview.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2010 The Chromium Authors. All rights reserved.
+// Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
@@ -44,6 +44,14 @@ inherits(ResizableVerticalSplitView, View);
 ResizableVerticalSplitView.MIN_PANEL_WIDTH = 50;
 
 /**
+ * Sets the width of the left view.
+ * @param {Integer} px The number of pixels
+ */
+ResizableVerticalSplitView.prototype.setLeftSplit = function(px) {
+  this.leftSplit_ = px;
+};
+
+/**
  * Repositions all of the elements to fit the window.
  */
 ResizableVerticalSplitView.prototype.setGeometry = function(
diff --git a/chrome/browser/resources/net_internals/tabswitcherview.css b/chrome/browser/resources/net_internals/tabswitcherview.css
index 5600bee..422309c 100644
--- a/chrome/browser/resources/net_internals/tabswitcherview.css
+++ b/chrome/browser/resources/net_internals/tabswitcherview.css
@@ -7,37 +7,19 @@ found in the LICENSE file.
   font-family: sans-serif;
 }
 
-.tab-switcher-view ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
 .tab-switcher-view {
-  border-bottom: 1px solid #555;
   background: #aaa;
-  overflow: hidden;
-}
-
-.tab-switcher-view li {
-  float: left;
-  -webkit-margin-start: 5px;
-}
-
-html[dir=rtl] .tab-switcher-view li {
-  float: right;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 .tab-switcher-view a {
   text-decoration: none;
-  text-align: center;
   display: inline-block;
-  margin-top: 4px;
+  margin-top: 2px;
   padding: 5px 10px 3px 10px;
-  border-top-right-radius: 8px;
-  border-top-left-radius: 8px;
-  background-clip: border-box;
   background: #ccc;
+  width: 100%;
 }
 
 .tab-switcher-view a:hover {
@@ -55,7 +37,5 @@ html[dir=rtl] .tab-switcher-view li {
 }
 
 .tab-switcher-view a.selected {
-  position: relative;
-  top: 3px;
   color: black;
-}
-\ No newline at end of file
+}
diff --git a/chrome/browser/resources/net_internals/tabswitcherview.js b/chrome/browser/resources/net_internals/tabswitcherview.js
index ad25052..2450b16 100644
--- a/chrome/browser/resources/net_internals/tabswitcherview.js
+++ b/chrome/browser/resources/net_internals/tabswitcherview.js
@@ -3,31 +3,18 @@
 // found in the LICENSE file.
 
 /**
- * TabSwitcher is an implementation of View that handles tab switching.
+ * TabSwitcherView is an implementation of View that handles tab switching.
  *
- *  +-----------------------------------+
- *  | Tab1 / Tab2 / Tab3 / ..           |  <- tab handle view
- *  +-----------------------------------+
- *  |                                   |
- *  |                                   |
- *  |                                   |
- *  |   stacked tab content areas       |
- *  |   (only 1 is visible at a time)   |
- *  |                                   |
- *  |                                   |
- *  |                                   |
- *  +-----------------------------------+
+ * It is comprised of many views (tabs), only one of which is visible at a
+ * time.
  *
- * @parameter {!View} tabHandleView the view that contains the tab handles.
+ * This view represents solely the selected tab's content area -- a separate
+ * view needs to be maintained for the tab handles.
  *
  * @constructor
  */
-function TabSwitcherView(tabHandleDivId) {
-  $(tabHandleDivId).classList.add('tab-switcher-view');
-  var tabHandleView = new DivView(tabHandleDivId);
-
+function TabSwitcherView() {
   View.call(this);
-  this.tabHandleView_ = tabHandleView;
   this.tabs_ = [];
 }
 
@@ -36,24 +23,16 @@ inherits(TabSwitcherView, View);
 TabSwitcherView.prototype.setGeometry = function(left, top, width, height) {
   TabSwitcherView.superClass_.setGeometry.call(this, left, top, width, height);
 
-  this.tabHandleView_.setGeometry(
-      left, top, width, this.tabHandleView_.getHeight());
-
-  var contentTop = this.tabHandleView_.getBottom();
-  var contentHeight = height - this.tabHandleView_.getHeight();
-
   // Position each of the tabs content areas.
   for (var i = 0; i < this.tabs_.length; ++i) {
     var tab = this.tabs_[i];
-    tab.contentView.setGeometry(left, contentTop, width, contentHeight);
+    tab.contentView.setGeometry(left, top, width, height);
   }
 };
 
 TabSwitcherView.prototype.show = function(isVisible) {
   TabSwitcherView.superClass_.show.call(this, isVisible);
 
-  this.tabHandleView_.show(isVisible);
-
   var activeTab = this.findActiveTab();
   if (activeTab)
     activeTab.contentView.show(isVisible);
diff --git a/chrome/browser/resources/net_internals/view.js b/chrome/browser/resources/net_internals/view.js
index 9e2773d..efc5431 100644
--- a/chrome/browser/resources/net_internals/view.js
+++ b/chrome/browser/resources/net_internals/view.js
@@ -158,3 +158,48 @@ WindowView.prototype.resetGeometry = function() {
   this.setGeometry(0, 0, window.innerWidth, window.innerHeight);
 };
 
+/**
+ * View that positions two views vertically. The top view should be
+ * fixed-height, and the bottom view will fill the remainder of the space.
+ *
+ *  +-----------------------------------+
+ *  |            top_view               |
+ *  +-----------------------------------+
+ *  |                                   |
+ *  |                                   |
+ *  |                                   |
+ *  |          bottom_view              |
+ *  |                                   |
+ *  |                                   |
+ *  |                                   |
+ *  |                                   |
+ *  +-----------------------------------+
+ *
+ * @constructor
+ */
+function VerticalSplitView(topView, bottomView) {
+  View.call(this);
+
+  this.topView_ = topView;
+  this.bottomView_ = bottomView;
+}
+
+inherits(VerticalSplitView, View);
+
+VerticalSplitView.prototype.setGeometry = function(left, top, width, height) {
+  VerticalSplitView.superClass_.setGeometry.call(
+      this, left, top, width, height);
+
+  var fixedHeight = this.topView_.getHeight();
+  this.topView_.setGeometry(left, top, width, fixedHeight);
+
+  this.bottomView_.setGeometry(
+      left, top + fixedHeight, width, height - fixedHeight);
+};
+
+VerticalSplitView.prototype.show = function(isVisible) {
+  VerticalSplitView.superClass_.show.call(this, isVisible);
+
+  this.topView_.show(isVisible);
+  this.bottomView_.show(isVisible);
+};
author	eroman@chromium.org <eroman@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>	2011-07-28 16:13:32 +0000
committer	eroman@chromium.org <eroman@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>	2011-07-28 16:13:32 +0000
commit	5333388fea438aaa9a797548f6e26c5105009b5a (patch)
tree	175c6d9311d44019703cc7721dd1df5c46ffbc99 /chrome/browser
parent	aaa72e79db2cda858908164f9e7aec4dbc8e14de (diff)
download	chromium_src-5333388fea438aaa9a797548f6e26c5105009b5a.zip chromium_src-5333388fea438aaa9a797548f6e26c5105009b5a.tar.gz chromium_src-5333388fea438aaa9a797548f6e26c5105009b5a.tar.bz2