DevTools: Make timeline memory pane resizable with its header.

Review URL: https://codereview.chromium.org/1675333003 Cr-Commit-Position: refs/heads/master@{#374475}
binaryage · Feb 9, 2016 · 778934e · 778934e
1 parent dd95126
commit 778934e
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 4 deletions.
diff --git a/front_end/timeline/CountersGraph.js b/front_end/timeline/CountersGraph.js
@@ -49,7 +49,7 @@ WebInspector.CountersGraph = function(delegate, model, filters)
 
     // Create selectors
     this._infoWidget = new WebInspector.HBox();
-    this._infoWidget.element.classList.add("memory-counter-selector-swatches");
+    this._infoWidget.element.classList.add("memory-counter-selector-swatches", "timeline-toolbar-resizer");
     this._infoWidget.show(this.element);
 
     this._graphsContainer = new WebInspector.VBox();
@@ -132,6 +132,15 @@ WebInspector.CountersGraph.prototype = {
         this.refresh();
     },
 
+    /**
+     * @override
+     * @return {?Element}
+     */
+    resizerElement: function()
+    {
+        return this._infoWidget.element;
+    },
+
     _resize: function()
     {
         var parentElement = this._canvas.parentElement;

diff --git a/front_end/timeline/TimelineFlameChart.js b/front_end/timeline/TimelineFlameChart.js
@@ -1270,6 +1270,15 @@ WebInspector.TimelineFlameChartView.prototype = {
         WebInspector.BlackboxSupport.removeChangeListener(this.refreshRecords, this);
     },
 
+    /**
+     * @override
+     * @return {?Element}
+     */
+    resizerElement: function()
+    {
+        return null;
+    },
+
     /**
      * @override
      * @param {number} windowStartTime

diff --git a/front_end/timeline/TimelinePanel.js b/front_end/timeline/TimelinePanel.js
@@ -288,7 +288,12 @@ WebInspector.TimelinePanel.prototype = {
     {
         modeView.setWindowTimes(this.windowStartTime(), this.windowEndTime());
         modeView.refreshRecords();
-        this._stackView.appendView(modeView.view(), "timelinePanelTimelineStackSplitViewState", undefined, 112);
+        var splitWidget = this._stackView.appendView(modeView.view(), "timelinePanelTimelineStackSplitViewState", undefined, 112);
+        var resizer = modeView.resizerElement();
+        if (splitWidget && resizer) {
+            splitWidget.hideDefaultResizer();
+            splitWidget.installResizer(resizer);
+        }
         this._currentViews.push(modeView);
     },
 
@@ -1261,6 +1266,15 @@ WebInspector.TimelineTreeModeView.prototype = {
     {
     },
 
+    /**
+     * @override
+     * @return {?Element}
+     */
+    resizerElement: function()
+    {
+        return null;
+    },
+
     /**
      * @override
      */
@@ -1543,6 +1557,11 @@ WebInspector.TimelineModeView.prototype = {
 
     dispose: function() {},
 
+    /**
+     * @return {?Element}
+     */
+    resizerElement: function() {},
+
     reset: function() {},
 
     refreshRecords: function() {},

diff --git a/front_end/timeline/timelinePanel.css b/front_end/timeline/timelinePanel.css
@@ -229,6 +229,12 @@
     min-height: 100%;
 }
 
+.timeline-toolbar-resizer {
+    background-image: url(Images/toolbarResizerVertical.png);
+    background-repeat: no-repeat;
+    background-position: right center, center;
+}
+
 .memory-graph-label {
     position: absolute;
     right: 0;

diff --git a/front_end/ui/StackView.js b/front_end/ui/StackView.js
@@ -44,7 +44,7 @@ WebInspector.StackView.prototype = {
      * @param {string=} sidebarSizeSettingName
      * @param {number=} defaultSidebarWidth
      * @param {number=} defaultSidebarHeight
-     * @return {!WebInspector.SplitWidget}
+     * @return {?WebInspector.SplitWidget}
      */
     appendView: function(view, sidebarSizeSettingName, defaultSidebarWidth, defaultSidebarHeight)
     {
@@ -59,8 +59,9 @@ WebInspector.StackView.prototype = {
             this._currentSplitWidget.showBoth();
         }
 
+        var lastSplitWidget = this._currentSplitWidget;
         this._currentSplitWidget = splitWidget;
-        return splitWidget;
+        return lastSplitWidget;
     },
 
     detachChildWidgets: function()