Add extra views to the new net internals page. This adds tabs along the top f...

chrome/browser/resources/net_internals/detailsview.js

Index: chrome/browser/resources/net_internals/detailsview.js
===================================================================
--- chrome/browser/resources/net_internals/detailsview.js	(revision 43430)
+++ chrome/browser/resources/net_internals/detailsview.js	(working copy)
@@ -9,85 +9,118 @@
  *
  * @constructor
  */
-function DetailsView(logTabHandleId,
-                     timelineTabHandleId,
-                     detailsTabContentId) {
-  // The DOM nodes that which contain the tab title.
-  this.tabHandles_ = {};
+function DetailsView(tabHandlesContainerId,
+                     logTabId,
+                     timelineTabId,
+                     logBoxId,
+                     timelineBoxId) {
+  TabSwitcherView.call(this, new DivView(tabHandlesContainerId));
 
-  this.tabHandles_['timeline'] = document.getElementById(timelineTabHandleId);
-  this.tabHandles_['log'] = document.getElementById(logTabHandleId);
+  this.logView_ = new DetailsLogView(logBoxId);
+  this.timelineView_ = new DetailsTimelineView(timelineBoxId);
 
-  // The DOM node that contains the currently active tab sheet.
-  this.contentArea_ = document.getElementById(detailsTabContentId);
+  this.addTab(logTabId, this.logView_);
+  this.addTab(timelineTabId, this.timelineView_);
 
-  // Attach listeners to the "tab handles" so when you click them, it switches
-  // active view.
-
-  var self = this;
-
-  this.tabHandles_['timeline'].onclick = function() {
-    self.switchToView_('timeline');
-  };
-
-  this.tabHandles_['log'].onclick = function() {
-    self.switchToView_('log');
-  };
-
-  this.currentData_ = [];
-
   // Default to the log view.
-  this.switchToView_('log');
+  this.switchToTab(logTabId);
 };
 
+inherits(DetailsView, TabSwitcherView);
+
 // The delay between updates to repaint.
 DetailsView.REPAINT_TIMEOUT_MS = 50;
 
 /**
- * Switches to the tab with name |viewName|. (Either 'log' or 'timeline'.
+ * Updates the data this view is using.
  */
-DetailsView.prototype.switchToView_ = function(viewName) {
-  if (this.currentView_) {
-    // Remove the selected styling on currently selected tab.
-    changeClassName(this.tabHandles_[this.currentView_], 'selected', false);
-  }
+DetailsView.prototype.setData = function(currentData) {
+  // Make a copy of the array (in case the caller mutates it), and sort it
+  // by the source ID.
+  var sortedCurrentData = DetailsView.createSortedCopy_(currentData);
 
-  this.currentView_ = viewName;
-  changeClassName(this.tabHandles_[this.currentView_], 'selected', true);
-  this.repaint_();
+  for (var i = 0; i < this.tabs_.length; ++i)
+    this.tabs_[i].contentView.setData(sortedCurrentData);
 };
 
+DetailsView.createSortedCopy_ = function(origArray) {
+  var sortedArray = origArray.slice(0);
+  sortedArray.sort(function(a, b) {
+    return a.getSourceId() - b.getSourceId();
+  });
+  return sortedArray;
+};
+
+//-----------------------------------------------------------------------------
+
 /**
- * Updates the data this view is using.
+ * Base class for the Log view and Timeline view.
+ *
+ * @constructor
  */
-DetailsView.prototype.setData = function(currentData) {
-  // Make a copy of the array (in case the caller mutates it), and sort it
-  // by the source ID.
-  this.currentData_ = DetailsView.createSortedCopy_(currentData);
+function DetailsSubView(boxId) {
+  DivView.call(this, boxId);
+  this.sourceEntries_ = [];
+}
 
-  // Invalidate the view.
-  if (!this.outstandingRepaint_) {
+inherits(DetailsSubView, DivView);
+
+DetailsSubView.prototype.setData = function(sourceEntries) {
+  this.sourceEntries_ = sourceEntries;
+
+  // Repaint the view.
+  if (this.isVisible() && !this.outstandingRepaint_) {
     this.outstandingRepaint_ = true;
-    window.setTimeout(this.repaint_.bind(this),
+    window.setTimeout(this.repaint.bind(this),
                       DetailsView.REPAINT_TIMEOUT_MS);
   }
 };
 
-DetailsView.prototype.repaint_ = function() {
+DetailsSubView.prototype.repaint = function() {
   this.outstandingRepaint_ = false;
-  this.contentArea_.innerHTML = '';
+  this.getNode().innerHTML = '';
+};
 
-  if (this.currentView_ == 'log') {
-    PaintLogView(this.currentData_, this.contentArea_);
+DetailsSubView.prototype.show = function(isVisible) {
+  DetailsSubView.superClass_.show.call(this, isVisible);
+  if (isVisible) {
+    this.repaint();
   } else {
-    PaintTimelineView(this.currentData_, this.contentArea_);
+    this.getNode().innerHTML = '';
   }
 };
 
-DetailsView.createSortedCopy_ = function(origArray) {
-  var sortedArray = origArray.slice(0);
-  sortedArray.sort(function(a, b) {
-    return a.getSourceId() - b.getSourceId();
-  });
-  return sortedArray;
+//-----------------------------------------------------------------------------
+
+
+/**
+ * Subview that is displayed in the log tab.
+ * @constructor
+ */
+function DetailsLogView(boxId) {
+  DetailsSubView.call(this, boxId);
+}
+
+inherits(DetailsLogView, DetailsSubView);
+
+DetailsLogView.prototype.repaint = function() {
+  DetailsLogView.superClass_.repaint.call(this);
+  PaintLogView(this.sourceEntries_, this.getNode());
 };
+
+//-----------------------------------------------------------------------------
+
+/**
+ * Subview that is displayed in the timeline tab.
+ * @constructor
+ */
+function DetailsTimelineView(boxId) {
+  DetailsSubView.call(this, boxId);
+}
+
+inherits(DetailsTimelineView, DetailsSubView);
+
+DetailsTimelineView.prototype.repaint = function() {
+  DetailsTimelineView.superClass_.repaint.call(this);
+  PaintTimelineView(this.sourceEntries_, this.getNode());
+};