TimelinePanel: introduce StackView and use it instead of _timelineMemorySplitter

Source/devtools/front_end/TimelineView.js

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  * Copyright (C) 2012 Intel Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
@@ skipping 49 matching lines @@
     this._presentationModel.addFilter(this._windowFilter);
     this._presentationModel.addFilter(new WebInspector.TimelineCategoryFilter());
     this._presentationModel.addFilter(this._durationFilter);
 
     this._frameMode = mode === WebInspector.TimelinePanel.Mode.Frames;
     this._boundariesAreValid = true;
     this._scrollTop = 0;
 
     // Create layout componets.
 
-    //  -------------------------------
-    // |            Overview           |
     // |-------------------------------|
     // |    |           |              |
     // |    |  Records  |              |
     // |    |           |    Details   |
     // |----------------|              |
     // |    |  Memory   |              |
     //  -------------------------------
 
     // Create top level properties splitter.
     this._detailsSplitView = new WebInspector.SplitView(false, "timeline-details");
     this._detailsSplitView.element.classList.remove("fill");
     this._detailsSplitView.element.classList.add("timeline-details-split");
     this._detailsSplitView.sidebarElement().classList.add("timeline-details");
     this._detailsSplitView.show(this.element);
     this._detailsSplitView.mainElement().classList.add("vbox");
     this._detailsSplitView.setMainElementConstraints(undefined, 40);
     this._detailsView = new WebInspector.TimelineDetailsView();
     this._detailsSplitView.setSidebarView(this._detailsView);
     this._detailsSplitView.installResizer(this._detailsView.titleElement());
 
     WebInspector.dockController.addEventListener(WebInspector.DockController.Events.DockSideChanged, this._dockSideChanged.bind(this));
     WebInspector.settings.splitVerticallyWhenDockedToRight.addChangeListener(this._dockSideChanged.bind(this));
     this._dockSideChanged();
 
     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);
+    this._recordsView = this._createRecordsView();
 
-    // 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");
+    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);
 
-    // 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));
+    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);
     this.element.addEventListener("keydown", this._keyDown.bind(this), false);
 
     this._expandOffset = 15;
 
     this._windowStartTime = 0;
     this._windowEndTime = Infinity;
 
@@ skipping 42 matching lines @@
         if (category.overviewStripGroupIndex < 0)
             continue;
         var filter = new WebInspector.CheckboxFilterUI(category.name, category.title);
         filters._categoryFiltersUI[category.name] = filter;
     }
     WebInspector.TimelineView._commonUIFilters = filters;
     return filters;
 }
 
 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}
      */
     searchableView: function()
     {
         return this._searchableView;
     },
 
     /**
      * @return {boolean}
@@ skipping 309 matching lines @@
     _onViewportResize: function()
     {
         this._resize(this._recordsView.sidebarWidth());
     },
 
     /**
      * @param {number} sidebarWidth
      */
     _resize: function(sidebarWidth)
     {
-        this._closeRecordDetails();
         this._graphRowsElementWidth = this._graphRowsElement.offsetWidth;
         this._containerElementHeight = this._containerElement.clientHeight;
         this._timelineGrid.gridHeaderElement.style.width = this._itemsGraphsElement.offsetWidth + "px";
         this._scheduleRefresh(false, true);
     },
 
     _resetView: function()
     {
         this._presentationModel.reset();
         this._boundariesAreValid = false;
         this._adjustScrollPosition(0);
-        this._closeRecordDetails();
         this._allRecordsCount = 0;
         this._automaticallySizeWindow = true;
         this._mainThreadTasks = [];
         this._gpuTasks = [];
     },
 
     _onRecordsCleared: function()
     {
         this._windowStartTime = 0;
         this._windowEndTime = Infinity;
@@ skipping 24 matching lines @@
         if (!WebInspector.TimelinePanel._categoryStylesInitialized) {
             WebInspector.TimelinePanel._categoryStylesInitialized = true;
             this._injectCategoryStyles();
         }
         this._onViewportResize();
         this._refresh();
     },
 
     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);
         this._scheduleRefresh(true, true);
     },
 
     /**
      * @param {boolean} preserveBoundaries
      * @param {boolean} userGesture
      */
@@ skipping 129 matching lines @@
         this._invalidateAndScheduleRefresh(false, true);
         this._selectRecord(null);
     },
 
     /**
      * @param {boolean} preserveBoundaries
      * @param {boolean} userGesture
      */
     _scheduleRefresh: function(preserveBoundaries, userGesture)
     {
-        this._closeRecordDetails();
         this._boundariesAreValid &= preserveBoundaries;
 
         if (!this.isShowing())
             return;
 
         if (preserveBoundaries || userGesture)
             this._refresh();
         else {
             if (!this._refreshTimeout)
                 this._refreshTimeout = setTimeout(this._refresh.bind(this), 300);
@@ skipping 430 matching lines @@
             else if (anchor._tasksInfo)
                 popover.show(this._presentationModel.generateMainThreadBarPopupContent(anchor._tasksInfo), anchor, null, null, WebInspector.Popover.Orientation.Bottom);
         }
 
         function showCallback(popupContent)
         {
             popover.show(popupContent, anchor);
         }
     },
 
-    _closeRecordDetails: function()
-    {
-        this._popoverHelper.hidePopover();
-    },
-
     _injectCategoryStyles: function()
     {
         var style = document.createElement("style");
         var categories = WebInspector.TimelinePresentationModel.categories();
 
         style.textContent = Object.values(categories).map(WebInspector.TimelinePresentationModel.createStyleRuleForCategory).join("\n");
         document.head.appendChild(style);
     },
 
     jumpToNextSearchResult: function()
@@ skipping 655 matching lines @@
      * @param {boolean} vertical
      */
     setVertical: function(vertical)
     {
         this._contentElement.enableStyleClass("hbox", !vertical);
         this._contentElement.enableStyleClass("vbox", vertical);
     },
 
     __proto__: WebInspector.View.prototype
 }