Revert "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 4c790fd851367056f71eede88816af53a58c4dc2..6ceb43eb8b51190761b774345d22b0798b6c43dc 100644
--- a/Source/devtools/front_end/TimelineView.js
+++ b/Source/devtools/front_end/TimelineView.js
@@ -67,6 +67,8 @@ WebInspector.TimelineView = function(panel, model, overviewPane, glueRecordsSett
 
     // Create layout componets.
 
+    //  -------------------------------
+    // |            Overview           |
     // |-------------------------------|
     // |    |           |              |
     // |    |  Records  |              |
@@ -94,19 +96,67 @@ WebInspector.TimelineView = function(panel, model, overviewPane, glueRecordsSett
     this._searchableView = new WebInspector.SearchableView(this);
     this._detailsSplitView.setMainView(this._searchableView);
 
-    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);
-    }
+    // 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.element.addEventListener("mousemove", this._mouseMove.bind(this), false);
     this.element.addEventListener("mouseout", this._mouseOut.bind(this), false);
@@ -170,57 +220,6 @@ 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()
@@ -549,6 +548,7 @@ 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,6 +560,7 @@ WebInspector.TimelineView.prototype = {
         this._presentationModel.reset();
         this._boundariesAreValid = false;
         this._adjustScrollPosition(0);
+        this._closeRecordDetails();
         this._allRecordsCount = 0;
         this._automaticallySizeWindow = true;
         this._mainThreadTasks = [];
@@ -604,11 +605,13 @@ 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);
@@ -758,6 +761,7 @@ WebInspector.TimelineView.prototype = {
      */
     _scheduleRefresh: function(preserveBoundaries, userGesture)
     {
+        this._closeRecordDetails();
         this._boundariesAreValid &= preserveBoundaries;
 
         if (!this.isShowing())
@@ -1208,6 +1212,11 @@ WebInspector.TimelineView.prototype = {
         }
     },
 
+    _closeRecordDetails: function()
+    {
+        this._popoverHelper.hidePopover();
+    },
+
     _injectCategoryStyles: function()
     {
         var style = document.createElement("style");