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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: Source/devtools/front_end/TimelineView.js

Issue 137853005: TimelinePanel: introduce StackView and use it instead of _timelineMemorySplitter (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: comments addressed Created 6 years, 11 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
« Source/devtools/front_end/StackView.js ('K') | « Source/devtools/front_end/StackView.js ('k') | Source/devtools/front_end/inspector.html » ('j') | Source/devtools/scripts/frontend_modules.json » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: Source/devtools/front_end/TimelineView.js
diff --git a/Source/devtools/front_end/TimelineView.js b/Source/devtools/front_end/TimelineView.js
index 6ceb43eb8b51190761b774345d22b0798b6c43dc..4c790fd851367056f71eede88816af53a58c4dc2 100644
--- a/Source/devtools/front_end/TimelineView.js
+++ b/Source/devtools/front_end/TimelineView.js
@@ -67,8 +67,6 @@ WebInspector.TimelineView = function(panel, model, overviewPane, glueRecordsSett
// Create layout componets.
- // -------------------------------
- // | Overview |
// |-------------------------------|
// | | | |
// | | Records | |
@@ -96,67 +94,19 @@ WebInspector.TimelineView = function(panel, model, overviewPane, glueRecordsSett
this._searchableView = new WebInspector.SearchableView(this);
this._detailsSplitView.setMainView(this._searchableView);
- // Create records sidebar as a top memory splitter child.
- this._recordsView = new WebInspector.SidebarView(WebInspector.SidebarView.SidebarPosition.Start, "timeline-split");
- this._recordsView.addEventListener(WebInspector.SidebarView.EventTypes.Resized, this._sidebarResized, this);
- this._recordsView.setSecondIsSidebar(false);
- this._containerElement = this._recordsView.element;
- this._containerElement.tabIndex = 0;
- this._containerElement.id = "timeline-container";
- this._containerElement.addEventListener("scroll", this._onScroll.bind(this), false);
-
- // Create records list in the records sidebar.
- this._recordsView.sidebarElement().classList.add("vbox");
- this._recordsView.sidebarElement().createChild("div", "timeline-records-title").textContent = WebInspector.UIString("RECORDS");
- this._sidebarListElement = this._recordsView.sidebarElement().createChild("div", "timeline-records-list");
-
- // Create grid in the records main area.
- this._gridContainer = new WebInspector.ViewWithResizeCallback(this._onViewportResize.bind(this));
- this._gridContainer.element.classList.add("fill");
- this._gridContainer.element.id = "resources-container-content";
- this._recordsView.setMainView(this._gridContainer);
- this._timelineGrid = new WebInspector.TimelineGrid();
- this._itemsGraphsElement = this._timelineGrid.itemsGraphsElement;
- this._itemsGraphsElement.id = "timeline-graphs";
- this._gridContainer.element.appendChild(this._timelineGrid.element);
- this._timelineGrid.gridHeaderElement.id = "timeline-grid-header";
- this._timelineGrid.gridHeaderElement.classList.add("fill");
-
- // Create gap elements
- this._topGapElement = this._itemsGraphsElement.createChild("div", "timeline-gap");
- this._graphRowsElement = this._itemsGraphsElement.createChild("div");
- this._bottomGapElement = this._itemsGraphsElement.createChild("div", "timeline-gap");
- this._expandElements = this._itemsGraphsElement.createChild("div");
- this._expandElements.id = "orphan-expand-elements";
-
- // Create gpu tasks containers.
- this._mainThreadTasks = /** @type {!Array.<!TimelineAgent.TimelineEvent>} */ ([]);
- this._gpuTasks = /** @type {!Array.<!TimelineAgent.TimelineEvent>} */ ([]);
- var utilizationStripsElement = this._timelineGrid.gridHeaderElement.createChild("div", "timeline-utilization-strips vbox");
- this._cpuBarsElement = utilizationStripsElement.createChild("div", "timeline-utilization-strip");
- if (WebInspector.experimentsSettings.gpuTimeline.isEnabled())
- this._gpuBarsElement = utilizationStripsElement.createChild("div", "timeline-utilization-strip gpu");
-
- // Create memory splitter as a left child of properties.
- this._timelineMemorySplitter = new WebInspector.SplitView(false, "timeline-memory");
- this._timelineMemorySplitter.element.classList.remove("fill");
- this._timelineMemorySplitter.element.classList.add("timeline-memory-split");
- this._timelineMemorySplitter.show(this._searchableView.element);
- this._timelineMemorySplitter.setMainView(this._recordsView);
-
- // Create memory statistics as a bottom memory splitter child.
- this._memoryStatistics = new WebInspector.CountersGraph(this, this._model);
- this._timelineMemorySplitter.setSidebarView(this._memoryStatistics);
- this._timelineMemorySplitter.installResizer(this._memoryStatistics.resizeElement());
-
- this._memoryStatistics.setMainTimelineGrid(this._timelineGrid);
- this._timelineMemorySplitter.mainElement().appendChild(this._timelineGrid.gridHeaderElement);
- if (this._currentMode === WebInspector.TimelinePanel.Mode.Memory)
- this._timelineMemorySplitter.showBoth();
- else
- this._timelineMemorySplitter.showOnlyFirst();
-
- this._popoverHelper = new WebInspector.PopoverHelper(this.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
+ this._recordsView = this._createRecordsView();
+
+ this._stackView = new WebInspector.StackView(false);
+ this._stackView.show(this._searchableView.element);
+ this._recordsViewMainElement = this._stackView.appendView(this._recordsView, "timeline-records").mainElement();
+ this._recordsViewMainElement.appendChild(this._timelineGrid.gridHeaderElement);
+
+ if (this._currentMode === WebInspector.TimelinePanel.Mode.Memory) {
+ // Create memory statistics as a bottom memory splitter child.
+ this._memoryStatistics = new WebInspector.CountersGraph(this, this._model);
+ this._stackView.appendView(this._memoryStatistics, "timeline-memory");
+ this._memoryStatistics.setMainTimelineGrid(this._timelineGrid);
+ }
this.element.addEventListener("mousemove", this._mouseMove.bind(this), false);
this.element.addEventListener("mouseout", this._mouseOut.bind(this), false);
@@ -220,6 +170,57 @@ WebInspector.TimelineView.commonUIFilters = function()
WebInspector.TimelineView.prototype = {
/**
+ * @return {!WebInspector.SidebarView}
+ */
+ _createRecordsView: function()
+ {
+ // Create records sidebar as a top memory splitter child.
+ var recordsView = new WebInspector.SidebarView(WebInspector.SidebarView.SidebarPosition.Start, "timeline-split");
+ recordsView.addEventListener(WebInspector.SidebarView.EventTypes.Resized, this._sidebarResized, this);
+ recordsView.setSecondIsSidebar(false);
+ this._containerElement = recordsView.element;
+ this._containerElement.tabIndex = 0;
+ this._containerElement.id = "timeline-container";
+ this._containerElement.addEventListener("scroll", this._onScroll.bind(this), false);
+
+ // Create records list in the records sidebar.
+ recordsView.sidebarElement().classList.add("vbox");
+ recordsView.sidebarElement().createChild("div", "timeline-records-title").textContent = WebInspector.UIString("RECORDS");
+ this._sidebarListElement = recordsView.sidebarElement().createChild("div", "timeline-records-list");
+
+ // Create grid in the records main area.
+ this._gridContainer = new WebInspector.ViewWithResizeCallback(this._onViewportResize.bind(this));
+ this._gridContainer.element.classList.add("fill");
+ this._gridContainer.element.id = "resources-container-content";
+ recordsView.setMainView(this._gridContainer);
+ this._timelineGrid = new WebInspector.TimelineGrid();
+ this._itemsGraphsElement = this._timelineGrid.itemsGraphsElement;
+ this._itemsGraphsElement.id = "timeline-graphs";
+ this._gridContainer.element.appendChild(this._timelineGrid.element);
+ this._timelineGrid.gridHeaderElement.id = "timeline-grid-header";
+ this._timelineGrid.gridHeaderElement.classList.add("fill");
+
+ // Create gap elements
+ this._topGapElement = this._itemsGraphsElement.createChild("div", "timeline-gap");
+ this._graphRowsElement = this._itemsGraphsElement.createChild("div");
+ this._bottomGapElement = this._itemsGraphsElement.createChild("div", "timeline-gap");
+ this._expandElements = this._itemsGraphsElement.createChild("div");
+ this._expandElements.id = "orphan-expand-elements";
+
+ // Create gpu tasks containers.
+ /** @type {!Array.<!TimelineAgent.TimelineEvent>} */
+ this._mainThreadTasks = ([]);
+ /** @type {!Array.<!TimelineAgent.TimelineEvent>} */
+ this._gpuTasks = ([]);
+ var utilizationStripsElement = this._timelineGrid.gridHeaderElement.createChild("div", "timeline-utilization-strips vbox");
+ this._cpuBarsElement = utilizationStripsElement.createChild("div", "timeline-utilization-strip");
+ if (WebInspector.experimentsSettings.gpuTimeline.isEnabled())
+ this._gpuBarsElement = utilizationStripsElement.createChild("div", "timeline-utilization-strip gpu");
+
+ return recordsView;
+ },
+
+ /**
* @return {!WebInspector.SearchableView}
*/
searchableView: function()
@@ -548,7 +549,6 @@ WebInspector.TimelineView.prototype = {
*/
_resize: function(sidebarWidth)
{
- this._closeRecordDetails();
this._graphRowsElementWidth = this._graphRowsElement.offsetWidth;
this._containerElementHeight = this._containerElement.clientHeight;
this._timelineGrid.gridHeaderElement.style.width = this._itemsGraphsElement.offsetWidth + "px";
@@ -560,7 +560,6 @@ WebInspector.TimelineView.prototype = {
this._presentationModel.reset();
this._boundariesAreValid = false;
this._adjustScrollPosition(0);
- this._closeRecordDetails();
this._allRecordsCount = 0;
this._automaticallySizeWindow = true;
this._mainThreadTasks = [];
@@ -605,13 +604,11 @@ WebInspector.TimelineView.prototype = {
willHide: function()
{
- this._closeRecordDetails();
WebInspector.View.prototype.willHide.call(this);
},
_onScroll: function(event)
{
- this._closeRecordDetails();
this._scrollTop = this._containerElement.scrollTop;
var dividersTop = Math.max(0, this._scrollTop);
this._timelineGrid.setScrollAndDividerTop(this._scrollTop, dividersTop);
@@ -761,7 +758,6 @@ WebInspector.TimelineView.prototype = {
*/
_scheduleRefresh: function(preserveBoundaries, userGesture)
{
- this._closeRecordDetails();
this._boundariesAreValid &= preserveBoundaries;
if (!this.isShowing())
@@ -1212,11 +1208,6 @@ WebInspector.TimelineView.prototype = {
}
},
- _closeRecordDetails: function()
pfeldman 2014/01/15 11:44:37 Why did this go?
- {
- this._popoverHelper.hidePopover();
- },
-
_injectCategoryStyles: function()
{
var style = document.createElement("style");
« Source/devtools/front_end/StackView.js ('K') | « Source/devtools/front_end/StackView.js ('k') | Source/devtools/front_end/inspector.html » ('j') | Source/devtools/scripts/frontend_modules.json » ('J')

Powered by Google App Engine
This is Rietveld 408576698