Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1453)

Unified Diff: chrome/browser/resources/net_internals/detailsview.js

Issue 1593009: Add extra views to the new net internals page. This adds tabs along the top f... (Closed) Base URL: svn://chrome-svn/chrome/trunk/src/
Patch Set: '' Created 10 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | chrome/browser/resources/net_internals/index.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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());
+};
« no previous file with comments | « no previous file | chrome/browser/resources/net_internals/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698