TimelinePanel: introduce StackView and use it instead of _timelineMemorySplitter

Source/devtools/front_end/TimelineView.js

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..6bf64dd920e23d0168d8b319ed7ba6ab728dbd6d 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();
+    this._stackView.show(this._searchableView.element);
+    this._recordsViewMainElement = this._stackView.appendView(this._recordsView, false, "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, false, "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);
@@ -219,6 +169,52 @@ WebInspector.TimelineView.commonUIFilters = function()
 }
 
 WebInspector.TimelineView.prototype = {
+    _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.
+        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");
+
+        return recordsView;
+    },
+
     /**
      * @return {!WebInspector.SearchableView}
      */
@@ -548,7 +544,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 +555,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 +599,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 +753,6 @@ WebInspector.TimelineView.prototype = {
      */
     _scheduleRefresh: function(preserveBoundaries, userGesture)
     {
-        this._closeRecordDetails();
         this._boundariesAreValid &= preserveBoundaries;
 
         if (!this.isShowing())
@@ -1212,11 +1203,6 @@ WebInspector.TimelineView.prototype = {
         }
     },
 
-    _closeRecordDetails: function()
-    {
-        this._popoverHelper.hidePopover();
-    },
-
     _injectCategoryStyles: function()
     {
         var style = document.createElement("style");