Commit 359e4aa0 authored by pfeldman@chromium.org's avatar pfeldman@chromium.org

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
parent 42deb87f
......@@ -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
......@@ -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;
......
......@@ -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;
......
......@@ -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
*/
......
......@@ -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;
this._overviewCalculator._setWindow(this._model.minimumRecordTime(), this._model.maximumRecordTime());
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();
......
......@@ -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");
......
......@@ -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;
}
......
......@@ -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;
},
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment