DevTools: move the "Capture *" checkboxes from timeline sidebar to the toolbar.

Review URL: https://codereview.chromium.org/423433004

git-svn-id: svn://svn.chromium.org/blink/trunk@179156 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/LayoutTests/inspector/timeline/timeline-window-filter-expected.txt

@@ -33,23 +33,23 @@ divider offsets: [0, 200, 400, 600, 800, 1000]. We are expecting round numbers.
 
 mode = Frames
 range = 0.25 - 0.75
-time range = 1390988669438.409 - 1390988670098.158
-records count: 47
-divider offsets: [400, 500, 600, 700, 800, 900, 1000]. We are expecting round numbers.
-
-mode = Frames
-range = 0.33 - 0.66
 time range = 1390988669535.377 - 1390988670098.158
 records count: 38
 divider offsets: [500, 600, 700, 800, 900, 1000]. We are expecting round numbers.
 
+mode = Frames
+range = 0.33 - 0.66
+time range = 1390988669683.1602 - 1390988670098.158
+records count: 25
+divider offsets: [600, 700, 800, 900, 1000]. We are expecting round numbers.
+
 --------------------------------------------------------
 mode = Frames
-time range = 1390988669264.497 - 1390988670098.158
+time range = 1390988669310.462 - 1390988670098.158
 
 mode = Events
-time range = 1390988669264.497 - 1390988670098.158
+time range = 1390988669310.462 - 1390988670098.158
 
 mode = Frames
-time range = 1390988669264.497 - 1390988670098.158
+time range = 1390988669310.462 - 1390988670098.158
 

third_party/WebKit/Source/devtools/front_end/inspectorStyle.css

@@ -436,8 +436,7 @@ body.undocked .toolbar-item .close-button {
 }
 
 .panel-status-bar label {
-    margin: auto 0;
-    margin-right: 20px;
+    margin: auto 0 auto 5px;
     display: flex;
     white-space: nowrap;
     overflow: hidden;

third_party/WebKit/Source/devtools/front_end/timeline/TimelineFrameOverview.js

@@ -136,6 +136,11 @@ WebInspector.TimelineFrameOverview.prototype = {
      */
     _computeTargetFrameLength: function(frames)
     {
+        const targetFPS = 20;
+        var result = 1000.0 / targetFPS;
+        if (!frames.length)
+            return result;
+
         var durations = [];
         for (var i = 0; i < frames.length; ++i) {
             if (frames[i])
@@ -145,8 +150,6 @@ WebInspector.TimelineFrameOverview.prototype = {
 
         // Optimize appearance for 30fps, but leave some space so it's evident when a frame overflows.
         // However, if at least half frames won't fit at this scale, fall back to using autoscale.
-        const targetFPS = 20;
-        var result = 1000.0 / targetFPS;
         if (result >= medianFrameLength)
             return result;
 

third_party/WebKit/Source/devtools/front_end/timeline/TimelineModel.js

@@ -283,6 +283,14 @@ WebInspector.TimelineModel.prototype = {
         return this._maximumRecordTime;
     },
 
+    /**
+     * @return {boolean}
+     */
+    isEmpty: function()
+    {
+        return this.minimumRecordTime() === 0 && this.maximumRecordTime() === 0;
+    },
+
     /**
      * @param {!WebInspector.TimelineModel.Record} record
      */

third_party/WebKit/Source/devtools/front_end/timeline/TimelineOverviewPane.js

@@ -43,12 +43,11 @@ WebInspector.TimelineOverviewPane = function(model, uiUtils)
     this._eventDividers = [];
 
     this._model = model;
+    this._overviewCalculator = new WebInspector.TimelineOverviewCalculator();
 
     this._overviewGrid = new WebInspector.OverviewGrid("timeline");
     this.element.appendChild(this._overviewGrid.element);
 
-    this._overviewCalculator = new WebInspector.TimelineOverviewCalculator();
-
     model.addEventListener(WebInspector.TimelineModel.Events.RecordsCleared, this._reset, this);
     this._overviewGrid.addEventListener(WebInspector.OverviewGrid.Events.WindowChanged, this._onWindowChanged, this);
     this._overviewControls = [];
@@ -92,7 +91,11 @@ WebInspector.TimelineOverviewPane.prototype = {
     {
         delete this._refreshTimeout;
 
+        if (this._model.isEmpty())
+            this._overviewCalculator._setWindow(0, 1000);
+        else
             this._overviewCalculator._setWindow(this._model.minimumRecordTime(), this._model.maximumRecordTime());
+
         this._overviewCalculator._setDisplayWindow(0, this._overviewGrid.clientWidth());
         for (var i = 0; i < this._overviewControls.length; ++i)
             this._overviewControls[i].update();

third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js

@@ -113,17 +113,13 @@ WebInspector.TimelinePanel = function()
     this._flameChartEnabledSetting = WebInspector.settings.createSetting("timelineFlameChartEnabled", false);
     this._createStatusBarItems();
 
-    this._topPane = new WebInspector.SplitView(true, false);
-    this._topPane.element.id = "timeline-overview-panel";
-    this._topPane.show(this.element);
-    this._topPane.addEventListener(WebInspector.SplitView.Events.SidebarSizeChanged, this._sidebarResized, this);
-    this._topPane.setResizable(false);
-    this._createRecordingOptions();
+    var topPaneElement = this.element.createChild("div", "hbox");
+    topPaneElement.id = "timeline-overview-panel";
 
     // Create top overview component.
     this._overviewPane = new WebInspector.TimelineOverviewPane(this._model, this._uiUtils);
     this._overviewPane.addEventListener(WebInspector.TimelineOverviewPane.Events.WindowChanged, this._onWindowChanged.bind(this));
-    this._overviewPane.show(this._topPane.mainElement());
+    this._overviewPane.show(topPaneElement);
 
     this._createFileSelector();
     this._registerShortcuts();
@@ -241,7 +237,6 @@ WebInspector.TimelinePanel.prototype = {
     _sidebarResized: function(event)
     {
         var width = /** @type {number} */ (event.data);
-        this._topPane.setSidebarSize(width);
         for (var i = 0; i < this._currentViews.length; ++i)
             this._currentViews[i].setSidebarSize(width);
     },
@@ -323,7 +318,6 @@ WebInspector.TimelinePanel.prototype = {
     {
         modeView.setWindowTimes(this.windowStartTime(), this.windowEndTime());
         modeView.refreshRecords(this._textFilter._regex);
-        modeView.view().setSidebarSize(this._topPane.sidebarSize());
         this._stackView.appendView(modeView.view(), "timelinePanelTimelineStackSplitViewState");
         modeView.view().addEventListener(WebInspector.SplitView.Events.SidebarSizeChanged, this._sidebarResized, this);
         this._currentViews.push(modeView);
@@ -356,36 +350,6 @@ WebInspector.TimelinePanel.prototype = {
         return labelElement;
     },
 
-    _createRecordingOptions: function()
-    {
-        var topPaneSidebarElement = this._topPane.sidebarElement();
-        this._captureStacksSetting = WebInspector.settings.createSetting("timelineCaptureStacks", true);
-        topPaneSidebarElement.appendChild(this._createSettingCheckbox(WebInspector.UIString("Capture stacks"),
-                                                                      this._captureStacksSetting,
-                                                                      WebInspector.UIString("Capture JavaScript stack on every timeline event")));
-
-        this._captureMemorySetting = WebInspector.settings.createSetting("timelineCaptureMemory", false);
-        topPaneSidebarElement.appendChild(this._createSettingCheckbox(WebInspector.UIString("Capture memory"),
-                                                                      this._captureMemorySetting,
-                                                                      WebInspector.UIString("Capture memory information on every timeline event")));
-        this._captureMemorySetting.addChangeListener(this._onModeChanged, this);
-
-        if (WebInspector.experimentsSettings.timelinePowerProfiler.isEnabled()) {
-            this._capturePowerSetting = WebInspector.settings.createSetting("timelineCapturePower", false);
-            topPaneSidebarElement.appendChild(this._createSettingCheckbox(WebInspector.UIString("Capture power"),
-                                                                          this._capturePowerSetting,
-                                                                          WebInspector.UIString("Capture power information")));
-            this._capturePowerSetting.addChangeListener(this._onModeChanged, this);
-        }
-
-        if (WebInspector.experimentsSettings.timelineOnTraceEvents.isEnabled()) {
-            this._captureLayersAndPicturesSetting = WebInspector.settings.createSetting("timelineCaptureLayersAndPictures", false);
-            topPaneSidebarElement.appendChild(this._createSettingCheckbox(WebInspector.UIString("Capture pictures"),
-                                                                          this._captureLayersAndPicturesSetting,
-                                                                          WebInspector.UIString("Capture graphics layer positions and painted pictures")));
-        }
-    },
-
     _createStatusBarItems: function()
     {
         var panelStatusBarElement = this.element.createChild("div", "panel-status-bar");
@@ -424,6 +388,29 @@ WebInspector.TimelinePanel.prototype = {
             panelStatusBarElement.appendChild(flameChartToggleButton.element);
         }
 
+        this._captureStacksSetting = WebInspector.settings.createSetting("timelineCaptureStacks", true);
+        panelStatusBarElement.appendChild(this._createSettingCheckbox(WebInspector.UIString("Stacks"),
+                                                                      this._captureStacksSetting,
+                                                                      WebInspector.UIString("Capture JavaScript stack on every timeline event")));
+        this._captureMemorySetting = WebInspector.settings.createSetting("timelineCaptureMemory", false);
+        panelStatusBarElement.appendChild(this._createSettingCheckbox(WebInspector.UIString("Memory"),
+                                                                      this._captureMemorySetting,
+                                                                      WebInspector.UIString("Capture memory information on every timeline event")));
+        this._captureMemorySetting.addChangeListener(this._onModeChanged, this);
+        if (WebInspector.experimentsSettings.timelinePowerProfiler.isEnabled()) {
+            this._capturePowerSetting = WebInspector.settings.createSetting("timelineCapturePower", false);
+            panelStatusBarElement.appendChild(this._createSettingCheckbox(WebInspector.UIString("Power"),
+                                                                          this._capturePowerSetting,
+                                                                          WebInspector.UIString("Capture power information")));
+            this._capturePowerSetting.addChangeListener(this._onModeChanged, this);
+        }
+        if (WebInspector.experimentsSettings.timelineOnTraceEvents.isEnabled()) {
+            this._captureLayersAndPicturesSetting = WebInspector.settings.createSetting("timelineCaptureLayersAndPictures", false);
+            panelStatusBarElement.appendChild(this._createSettingCheckbox(WebInspector.UIString("Paint"),
+                                                                          this._captureLayersAndPicturesSetting,
+                                                                          WebInspector.UIString("Capture graphics layer positions and painted pictures")));
+        }
+
         this._miscStatusBarItems = panelStatusBarElement.createChild("div", "status-bar-item");
 
         this._filtersContainer = this.element.createChild("div", "timeline-filters-header hidden");

third_party/WebKit/Source/devtools/front_end/timelinePanel.css

@@ -37,16 +37,6 @@
     pointer-events: none;
 }
 
-#timeline-overview-panel .split-view-sidebar > label {
-    margin: 6px 0 3px 5px;
-    height: auto;
-    display: flex;
-}
-
-#timeline-overview-panel .split-view-sidebar > label > input {
-    margin-right: 6px;
-}
-
 .timeline-records-title, .timeline-records-list {
     background-color: rgb(236, 236, 236);
 }
@@ -282,7 +272,7 @@
 }
 
 #timeline-overview-pane {
-    flex: none;
+    flex: auto;
     position: relative;
     overflow: hidden;
 }

third_party/WebKit/Source/devtools/front_end/ui/ShortcutRegistry.js

@@ -69,7 +69,7 @@ WebInspector.ShortcutRegistry.prototype = {
         for (var i = 0; i < actionIds.length; ++i) {
             var descriptors = this.shortcutDescriptorsForAction(actionIds[i]);
             for (var j = 0; j < descriptors.length; ++j)
-                result.push(descriptors[j]);
+                result.push(descriptors[j].key);
         }
         return result;
     },