Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(494)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js

Issue 2466123002: DevTools: reformat front-end code to match chromium style. (Closed)
Patch Set: all done Created 4 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « third_party/WebKit/Source/devtools/front_end/timeline/TimelinePaintProfilerView.js ('k') | third_party/WebKit/Source/devtools/front_end/timeline/TimelineTreeView.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js b/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
index 4eba6ced8090252ada88093c5c18b8188ffa6fb3..2bfacb47cb4437074bfbef9edf766b7de3be6296 100644
--- a/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
@@ -28,41 +28,43 @@
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-
/**
- * @constructor
- * @extends {WebInspector.Panel}
* @implements {WebInspector.TimelineLifecycleDelegate}
* @implements {WebInspector.TimelineModeViewDelegate}
* @implements {WebInspector.Searchable}
+ * @unrestricted
*/
-WebInspector.TimelinePanel = function()
-{
- WebInspector.Panel.call(this, "timeline");
- this.registerRequiredCSS("timeline/timelinePanel.css");
- this.element.addEventListener("contextmenu", this._contextMenu.bind(this), false);
- this._dropTarget = new WebInspector.DropTarget(this.element, [WebInspector.DropTarget.Types.Files, WebInspector.DropTarget.Types.URIList], WebInspector.UIString("Drop timeline file or URL here"), this._handleDrop.bind(this));
+WebInspector.TimelinePanel = class extends WebInspector.Panel {
+ constructor() {
+ super('timeline');
+ this.registerRequiredCSS('timeline/timelinePanel.css');
+ this.element.addEventListener('contextmenu', this._contextMenu.bind(this), false);
+ this._dropTarget = new WebInspector.DropTarget(
+ this.element, [WebInspector.DropTarget.Types.Files, WebInspector.DropTarget.Types.URIList],
+ WebInspector.UIString('Drop timeline file or URL here'), this._handleDrop.bind(this));
this._state = WebInspector.TimelinePanel.State.Idle;
this._detailsLinkifier = new WebInspector.Linkifier();
this._windowStartTime = 0;
this._windowEndTime = Infinity;
this._millisecondsToRecordAfterLoadEvent = 3000;
- this._toggleRecordAction = /** @type {!WebInspector.Action }*/ (WebInspector.actionRegistry.action("timeline.toggle-recording"));
+ this._toggleRecordAction =
+ /** @type {!WebInspector.Action }*/ (WebInspector.actionRegistry.action('timeline.toggle-recording'));
this._customCPUThrottlingRate = 0;
/** @type {!Array<!WebInspector.TimelineModel.Filter>} */
this._filters = [];
- if (!Runtime.experiments.isEnabled("timelineShowAllEvents")) {
- this._filters.push(WebInspector.TimelineUIUtils.visibleEventsFilter());
- this._filters.push(new WebInspector.ExcludeTopLevelFilter());
+ if (!Runtime.experiments.isEnabled('timelineShowAllEvents')) {
+ this._filters.push(WebInspector.TimelineUIUtils.visibleEventsFilter());
+ this._filters.push(new WebInspector.ExcludeTopLevelFilter());
}
// Create models.
- this._tracingModelBackingStorage = new WebInspector.TempFileBackingStorage("tracing");
+ this._tracingModelBackingStorage = new WebInspector.TempFileBackingStorage('tracing');
this._tracingModel = new WebInspector.TracingModel(this._tracingModelBackingStorage);
this._model = new WebInspector.TimelineModel(WebInspector.TimelineUIUtils.visibleEventsFilter());
- this._frameModel = new WebInspector.TimelineFrameModel(event => WebInspector.TimelineUIUtils.eventStyle(event).category.name);
+ this._frameModel =
+ new WebInspector.TimelineFrameModel(event => WebInspector.TimelineUIUtils.eventStyle(event).category.name);
this._filmStripModel = new WebInspector.FilmStripModel(this._tracingModel);
this._irModel = new WebInspector.TimelineIRModel();
@@ -71,1501 +73,1451 @@ WebInspector.TimelinePanel = function()
/** @type {!Array.<!WebInspector.TimelineModeView>} */
this._currentViews = [];
- this._captureNetworkSetting = WebInspector.settings.createSetting("timelineCaptureNetwork", false);
- this._captureJSProfileSetting = WebInspector.settings.createSetting("timelineEnableJSSampling", true);
- this._captureMemorySetting = WebInspector.settings.createSetting("timelineCaptureMemory", false);
- this._captureLayersAndPicturesSetting = WebInspector.settings.createSetting("timelineCaptureLayersAndPictures", false);
- this._captureFilmStripSetting = WebInspector.settings.createSetting("timelineCaptureFilmStrip", false);
+ this._captureNetworkSetting = WebInspector.settings.createSetting('timelineCaptureNetwork', false);
+ this._captureJSProfileSetting = WebInspector.settings.createSetting('timelineEnableJSSampling', true);
+ this._captureMemorySetting = WebInspector.settings.createSetting('timelineCaptureMemory', false);
+ this._captureLayersAndPicturesSetting =
+ WebInspector.settings.createSetting('timelineCaptureLayersAndPictures', false);
+ this._captureFilmStripSetting = WebInspector.settings.createSetting('timelineCaptureFilmStrip', false);
- this._panelToolbar = new WebInspector.Toolbar("", this.element);
+ this._panelToolbar = new WebInspector.Toolbar('', this.element);
this._createToolbarItems();
var timelinePane = new WebInspector.VBox();
timelinePane.show(this.element);
- var topPaneElement = timelinePane.element.createChild("div", "hbox");
- topPaneElement.id = "timeline-overview-panel";
+ var topPaneElement = timelinePane.element.createChild('div', 'hbox');
+ topPaneElement.id = 'timeline-overview-panel';
// Create top overview component.
- this._overviewPane = new WebInspector.TimelineOverviewPane("timeline");
- this._overviewPane.addEventListener(WebInspector.TimelineOverviewPane.Events.WindowChanged, this._onWindowChanged.bind(this));
+ this._overviewPane = new WebInspector.TimelineOverviewPane('timeline');
+ this._overviewPane.addEventListener(
+ WebInspector.TimelineOverviewPane.Events.WindowChanged, this._onWindowChanged.bind(this));
this._overviewPane.show(topPaneElement);
- this._statusPaneContainer = timelinePane.element.createChild("div", "status-pane-container fill");
+ this._statusPaneContainer = timelinePane.element.createChild('div', 'status-pane-container fill');
this._createFileSelector();
- WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Events.PageReloadRequested, this._pageReloadRequested, this);
+ WebInspector.targetManager.addEventListener(
+ WebInspector.TargetManager.Events.PageReloadRequested, this._pageReloadRequested, this);
WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Events.Load, this._loadEventFired, this);
// Create top level properties splitter.
- this._detailsSplitWidget = new WebInspector.SplitWidget(false, true, "timelinePanelDetailsSplitViewState");
- this._detailsSplitWidget.element.classList.add("timeline-details-split");
+ this._detailsSplitWidget = new WebInspector.SplitWidget(false, true, 'timelinePanelDetailsSplitViewState');
+ this._detailsSplitWidget.element.classList.add('timeline-details-split');
this._detailsView = new WebInspector.TimelineDetailsView(this._model, this._filters, this);
this._detailsSplitWidget.installResizer(this._detailsView.headerElement());
this._detailsSplitWidget.setSidebarWidget(this._detailsView);
this._searchableView = new WebInspector.SearchableView(this);
this._searchableView.setMinimumSize(0, 100);
- this._searchableView.element.classList.add("searchable-view");
+ this._searchableView.element.classList.add('searchable-view');
this._detailsSplitWidget.setMainWidget(this._searchableView);
this._stackView = new WebInspector.StackView(false);
- this._stackView.element.classList.add("timeline-view-stack");
+ this._stackView.element.classList.add('timeline-view-stack');
this._stackView.show(this._searchableView.element);
this._onModeChanged();
this._detailsSplitWidget.show(timelinePane.element);
this._detailsSplitWidget.hideSidebar();
- WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Events.SuspendStateChanged, this._onSuspendStateChanged, this);
+ WebInspector.targetManager.addEventListener(
+ WebInspector.TargetManager.Events.SuspendStateChanged, this._onSuspendStateChanged, this);
this._showRecordingHelpMessage();
/** @type {!WebInspector.TracingModel.Event}|undefined */
this._selectedSearchResult;
/** @type {!Array<!WebInspector.TracingModel.Event>}|undefined */
this._searchResults;
-};
-
-/**
- * @enum {string}
- */
-WebInspector.TimelinePanel.Perspectives = {
- Load: "Load",
- Responsiveness: "Responsiveness",
- Custom: "Custom"
-};
-
-/**
- * @enum {string}
- */
-WebInspector.TimelinePanel.DetailsTab = {
- Details: "Details",
- Events: "Events",
- CallTree: "CallTree",
- BottomUp: "BottomUp",
- PaintProfiler: "PaintProfiler",
- LayerViewer: "LayerViewer"
-};
-
-/**
- * @enum {symbol}
- */
-WebInspector.TimelinePanel.State = {
- Idle: Symbol("Idle"),
- StartPending: Symbol("StartPending"),
- Recording: Symbol("Recording"),
- StopPending: Symbol("StopPending"),
- Loading: Symbol("Loading")
-};
-
-// Define row and header height, should be in sync with styles for timeline graphs.
-WebInspector.TimelinePanel.rowHeight = 18;
-WebInspector.TimelinePanel.headerHeight = 20;
-
-WebInspector.TimelinePanel.prototype = {
- /**
- * @override
- * @return {?WebInspector.SearchableView}
- */
- searchableView: function()
- {
- return this._searchableView;
- },
-
- wasShown: function()
- {
- WebInspector.context.setFlavor(WebInspector.TimelinePanel, this);
- },
+ }
- willHide: function()
- {
- WebInspector.context.setFlavor(WebInspector.TimelinePanel, null);
- },
-
- /**
- * @return {number}
- */
- windowStartTime: function()
- {
- if (this._windowStartTime)
- return this._windowStartTime;
- return this._model.minimumRecordTime();
- },
-
- /**
- * @return {number}
- */
- windowEndTime: function()
- {
- if (this._windowEndTime < Infinity)
- return this._windowEndTime;
- return this._model.maximumRecordTime() || Infinity;
- },
-
- /**
- * @param {!WebInspector.Event} event
- */
- _onWindowChanged: function(event)
- {
- this._windowStartTime = event.data.startTime;
- this._windowEndTime = event.data.endTime;
-
- for (var i = 0; i < this._currentViews.length; ++i)
- this._currentViews[i].setWindowTimes(this._windowStartTime, this._windowEndTime);
-
- if (!this._selection || this._selection.type() === WebInspector.TimelineSelection.Type.Range)
- this.select(null);
- },
+ /**
+ * @return {!WebInspector.TimelinePanel}
+ */
+ static instance() {
+ return /** @type {!WebInspector.TimelinePanel} */ (self.runtime.sharedInstance(WebInspector.TimelinePanel));
+ }
+
+ /**
+ * @override
+ * @return {?WebInspector.SearchableView}
+ */
+ searchableView() {
+ return this._searchableView;
+ }
+
+ /**
+ * @override
+ */
+ wasShown() {
+ WebInspector.context.setFlavor(WebInspector.TimelinePanel, this);
+ }
+
+ /**
+ * @override
+ */
+ willHide() {
+ WebInspector.context.setFlavor(WebInspector.TimelinePanel, null);
+ }
+
+ /**
+ * @return {number}
+ */
+ windowStartTime() {
+ if (this._windowStartTime)
+ return this._windowStartTime;
+ return this._model.minimumRecordTime();
+ }
+
+ /**
+ * @return {number}
+ */
+ windowEndTime() {
+ if (this._windowEndTime < Infinity)
+ return this._windowEndTime;
+ return this._model.maximumRecordTime() || Infinity;
+ }
+
+ /**
+ * @param {!WebInspector.Event} event
+ */
+ _onWindowChanged(event) {
+ this._windowStartTime = event.data.startTime;
+ this._windowEndTime = event.data.endTime;
+
+ for (var i = 0; i < this._currentViews.length; ++i)
+ this._currentViews[i].setWindowTimes(this._windowStartTime, this._windowEndTime);
+
+ if (!this._selection || this._selection.type() === WebInspector.TimelineSelection.Type.Range)
+ this.select(null);
+ }
+
+ /**
+ * @param {!WebInspector.Event} event
+ */
+ _onOverviewSelectionChanged(event) {
+ var selection = /** @type {!WebInspector.TimelineSelection} */ (event.data);
+ this.select(selection);
+ }
+
+ /**
+ * @override
+ * @param {number} windowStartTime
+ * @param {number} windowEndTime
+ */
+ requestWindowTimes(windowStartTime, windowEndTime) {
+ this._overviewPane.requestWindowTimes(windowStartTime, windowEndTime);
+ }
+
+ /**
+ * @return {!WebInspector.Widget}
+ */
+ _layersView() {
+ if (this._lazyLayersView)
+ return this._lazyLayersView;
+ this._lazyLayersView =
+ new WebInspector.TimelineLayersView(this._model, this._showSnapshotInPaintProfiler.bind(this));
+ return this._lazyLayersView;
+ }
+
+ _paintProfilerView() {
+ if (this._lazyPaintProfilerView)
+ return this._lazyPaintProfilerView;
+ this._lazyPaintProfilerView = new WebInspector.TimelinePaintProfilerView(this._frameModel);
+ return this._lazyPaintProfilerView;
+ }
+
+ /**
+ * @param {!WebInspector.TimelineModeView} modeView
+ */
+ _addModeView(modeView) {
+ modeView.setWindowTimes(this.windowStartTime(), this.windowEndTime());
+ modeView.refreshRecords();
+ 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);
+ }
- /**
- * @param {!WebInspector.Event} event
- */
- _onOverviewSelectionChanged: function(event)
- {
- var selection = /** @type {!WebInspector.TimelineSelection} */ (event.data);
- this.select(selection);
- },
+ _removeAllModeViews() {
+ this._currentViews.forEach(view => view.dispose());
+ this._currentViews = [];
+ this._stackView.detachChildWidgets();
+ }
+
+ /**
+ * @param {!WebInspector.TimelinePanel.State} state
+ */
+ _setState(state) {
+ this._state = state;
+ this._updateTimelineControls();
+ }
+
+ /**
+ * @param {string} name
+ * @param {!WebInspector.Setting} setting
+ * @param {string} tooltip
+ * @return {!WebInspector.ToolbarItem}
+ */
+ _createSettingCheckbox(name, setting, tooltip) {
+ if (!this._recordingOptionUIControls)
+ this._recordingOptionUIControls = [];
+ var checkboxItem = new WebInspector.ToolbarCheckbox(name, tooltip, setting);
+ this._recordingOptionUIControls.push(checkboxItem);
+ return checkboxItem;
+ }
+
+ _createToolbarItems() {
+ this._panelToolbar.removeToolbarItems();
+
+ var perspectiveSetting =
+ WebInspector.settings.createSetting('timelinePerspective', WebInspector.TimelinePanel.Perspectives.Load);
+ if (Runtime.experiments.isEnabled('timelineRecordingPerspectives')) {
+ /**
+ * @this {!WebInspector.TimelinePanel}
+ */
+ function onPerspectiveChanged() {
+ perspectiveSetting.set(perspectiveCombobox.selectElement().value);
+ this._createToolbarItems();
+ }
+
+ /**
+ * @param {string} id
+ * @param {string} title
+ */
+ function addPerspectiveOption(id, title) {
+ var option = perspectiveCombobox.createOption(title, '', id);
+ perspectiveCombobox.addOption(option);
+ if (id === perspectiveSetting.get())
+ perspectiveCombobox.select(option);
+ }
+
+ var perspectiveCombobox = new WebInspector.ToolbarComboBox(onPerspectiveChanged.bind(this));
+ addPerspectiveOption(WebInspector.TimelinePanel.Perspectives.Load, WebInspector.UIString('Page Load'));
+ addPerspectiveOption(
+ WebInspector.TimelinePanel.Perspectives.Responsiveness, WebInspector.UIString('Responsiveness'));
+ addPerspectiveOption(WebInspector.TimelinePanel.Perspectives.Custom, WebInspector.UIString('Custom'));
+ this._panelToolbar.appendToolbarItem(perspectiveCombobox);
+
+ switch (perspectiveSetting.get()) {
+ case WebInspector.TimelinePanel.Perspectives.Load:
+ this._captureNetworkSetting.set(true);
+ this._captureJSProfileSetting.set(true);
+ this._captureMemorySetting.set(false);
+ this._captureLayersAndPicturesSetting.set(false);
+ this._captureFilmStripSetting.set(true);
+ break;
+ case WebInspector.TimelinePanel.Perspectives.Responsiveness:
+ this._captureNetworkSetting.set(true);
+ this._captureJSProfileSetting.set(true);
+ this._captureMemorySetting.set(false);
+ this._captureLayersAndPicturesSetting.set(false);
+ this._captureFilmStripSetting.set(false);
+ break;
+ }
+ }
+ if (Runtime.experiments.isEnabled('timelineRecordingPerspectives') &&
+ perspectiveSetting.get() === WebInspector.TimelinePanel.Perspectives.Load) {
+ this._reloadButton =
+ new WebInspector.ToolbarButton(WebInspector.UIString('Record & Reload'), 'refresh-toolbar-item');
+ this._reloadButton.addEventListener('click', () => WebInspector.targetManager.reloadPage());
+ this._panelToolbar.appendToolbarItem(this._reloadButton);
+ } else {
+ this._panelToolbar.appendToolbarItem(WebInspector.Toolbar.createActionButton(this._toggleRecordAction));
+ }
- /**
- * @override
- * @param {number} windowStartTime
- * @param {number} windowEndTime
- */
- requestWindowTimes: function(windowStartTime, windowEndTime)
- {
- this._overviewPane.requestWindowTimes(windowStartTime, windowEndTime);
- },
+ this._updateTimelineControls();
+ var clearButton = new WebInspector.ToolbarButton(WebInspector.UIString('Clear recording'), 'clear-toolbar-item');
+ clearButton.addEventListener('click', this._clear, this);
+ this._panelToolbar.appendToolbarItem(clearButton);
+
+ this._panelToolbar.appendSeparator();
+
+ this._panelToolbar.appendText(WebInspector.UIString('Capture:'));
+
+ var screenshotCheckbox = this._createSettingCheckbox(
+ WebInspector.UIString('Screenshots'), this._captureFilmStripSetting,
+ WebInspector.UIString('Capture screenshots while recording. (Has small performance overhead)'));
+
+ if (!Runtime.experiments.isEnabled('timelineRecordingPerspectives') ||
+ perspectiveSetting.get() === WebInspector.TimelinePanel.Perspectives.Custom) {
+ this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(
+ WebInspector.UIString('Network'), this._captureNetworkSetting,
+ WebInspector.UIString('Show network requests information')));
+ this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(
+ WebInspector.UIString('JS Profile'), this._captureJSProfileSetting,
+ WebInspector.UIString('Capture JavaScript stacks with sampling profiler. (Has small performance overhead)')));
+ this._panelToolbar.appendToolbarItem(screenshotCheckbox);
+ this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(
+ WebInspector.UIString('Memory'), this._captureMemorySetting,
+ WebInspector.UIString('Capture memory information on every timeline event.')));
+ this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(
+ WebInspector.UIString('Paint'), this._captureLayersAndPicturesSetting,
+ WebInspector.UIString(
+ 'Capture graphics layer positions and rasterization draw calls. (Has large performance overhead)')));
+ } else {
+ this._panelToolbar.appendToolbarItem(screenshotCheckbox);
+ }
- /**
- * @return {!WebInspector.Widget}
- */
- _layersView: function()
- {
- if (this._lazyLayersView)
- return this._lazyLayersView;
- this._lazyLayersView = new WebInspector.TimelineLayersView(this._model, this._showSnapshotInPaintProfiler.bind(this));
- return this._lazyLayersView;
- },
-
- _paintProfilerView: function()
- {
- if (this._lazyPaintProfilerView)
- return this._lazyPaintProfilerView;
- this._lazyPaintProfilerView = new WebInspector.TimelinePaintProfilerView(this._frameModel);
- return this._lazyPaintProfilerView;
- },
+ this._captureNetworkSetting.addChangeListener(this._onNetworkChanged, this);
+ this._captureMemorySetting.addChangeListener(this._onModeChanged, this);
+ this._captureFilmStripSetting.addChangeListener(this._onModeChanged, this);
- /**
- * @param {!WebInspector.TimelineModeView} modeView
- */
- _addModeView: function(modeView)
- {
- modeView.setWindowTimes(this.windowStartTime(), this.windowEndTime());
- modeView.refreshRecords();
- 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);
- },
+ this._panelToolbar.appendSeparator();
+ var garbageCollectButton =
+ new WebInspector.ToolbarButton(WebInspector.UIString('Collect garbage'), 'garbage-collect-toolbar-item');
+ garbageCollectButton.addEventListener('click', this._garbageCollectButtonClicked, this);
+ this._panelToolbar.appendToolbarItem(garbageCollectButton);
- _removeAllModeViews: function()
- {
- this._currentViews.forEach(view => view.dispose());
- this._currentViews = [];
- this._stackView.detachChildWidgets();
- },
-
- /**
- * @param {!WebInspector.TimelinePanel.State} state
- */
- _setState: function(state)
- {
- this._state = state;
- this._updateTimelineControls();
- },
+ this._panelToolbar.appendSeparator();
+ this._cpuThrottlingCombobox = new WebInspector.ToolbarComboBox(this._onCPUThrottlingChanged.bind(this));
+ this._panelToolbar.appendToolbarItem(this._cpuThrottlingCombobox);
+ this._populateCPUThrottingCombobox();
+ }
+ _populateCPUThrottingCombobox() {
+ var cpuThrottlingCombobox = this._cpuThrottlingCombobox;
+ cpuThrottlingCombobox.removeOptions();
+ var currentRate = this._cpuThrottlingManager.rate();
+ var hasSelection = false;
/**
* @param {string} name
- * @param {!WebInspector.Setting} setting
- * @param {string} tooltip
- * @return {!WebInspector.ToolbarItem}
- */
- _createSettingCheckbox: function(name, setting, tooltip)
- {
- if (!this._recordingOptionUIControls)
- this._recordingOptionUIControls = [];
- var checkboxItem = new WebInspector.ToolbarCheckbox(name, tooltip, setting);
- this._recordingOptionUIControls.push(checkboxItem);
- return checkboxItem;
- },
-
- _createToolbarItems: function()
- {
- this._panelToolbar.removeToolbarItems();
-
- var perspectiveSetting = WebInspector.settings.createSetting("timelinePerspective", WebInspector.TimelinePanel.Perspectives.Load);
- if (Runtime.experiments.isEnabled("timelineRecordingPerspectives")) {
- /**
- * @this {!WebInspector.TimelinePanel}
- */
- function onPerspectiveChanged()
- {
- perspectiveSetting.set(perspectiveCombobox.selectElement().value);
- this._createToolbarItems();
- }
-
- /**
- * @param {string} id
- * @param {string} title
- */
- function addPerspectiveOption(id, title)
- {
- var option = perspectiveCombobox.createOption(title, "", id);
- perspectiveCombobox.addOption(option);
- if (id === perspectiveSetting.get())
- perspectiveCombobox.select(option);
- }
-
- var perspectiveCombobox = new WebInspector.ToolbarComboBox(onPerspectiveChanged.bind(this));
- addPerspectiveOption(WebInspector.TimelinePanel.Perspectives.Load, WebInspector.UIString("Page Load"));
- addPerspectiveOption(WebInspector.TimelinePanel.Perspectives.Responsiveness, WebInspector.UIString("Responsiveness"));
- addPerspectiveOption(WebInspector.TimelinePanel.Perspectives.Custom, WebInspector.UIString("Custom"));
- this._panelToolbar.appendToolbarItem(perspectiveCombobox);
-
- switch (perspectiveSetting.get()) {
- case WebInspector.TimelinePanel.Perspectives.Load:
- this._captureNetworkSetting.set(true);
- this._captureJSProfileSetting.set(true);
- this._captureMemorySetting.set(false);
- this._captureLayersAndPicturesSetting.set(false);
- this._captureFilmStripSetting.set(true);
- break;
- case WebInspector.TimelinePanel.Perspectives.Responsiveness:
- this._captureNetworkSetting.set(true);
- this._captureJSProfileSetting.set(true);
- this._captureMemorySetting.set(false);
- this._captureLayersAndPicturesSetting.set(false);
- this._captureFilmStripSetting.set(false);
- break;
- }
- }
- if (Runtime.experiments.isEnabled("timelineRecordingPerspectives") && perspectiveSetting.get() === WebInspector.TimelinePanel.Perspectives.Load) {
- this._reloadButton = new WebInspector.ToolbarButton(WebInspector.UIString("Record & Reload"), "refresh-toolbar-item");
- this._reloadButton.addEventListener("click", () => WebInspector.targetManager.reloadPage());
- this._panelToolbar.appendToolbarItem(this._reloadButton);
- } else {
- this._panelToolbar.appendToolbarItem(WebInspector.Toolbar.createActionButton(this._toggleRecordAction));
- }
-
- this._updateTimelineControls();
- var clearButton = new WebInspector.ToolbarButton(WebInspector.UIString("Clear recording"), "clear-toolbar-item");
- clearButton.addEventListener("click", this._clear, this);
- this._panelToolbar.appendToolbarItem(clearButton);
-
- this._panelToolbar.appendSeparator();
-
- this._panelToolbar.appendText(WebInspector.UIString("Capture:"));
-
- var screenshotCheckbox = this._createSettingCheckbox(
- WebInspector.UIString("Screenshots"), this._captureFilmStripSetting, WebInspector.UIString("Capture screenshots while recording. (Has small performance overhead)"));
-
- if (!Runtime.experiments.isEnabled("timelineRecordingPerspectives") || perspectiveSetting.get() === WebInspector.TimelinePanel.Perspectives.Custom) {
- this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(
- WebInspector.UIString("Network"), this._captureNetworkSetting, WebInspector.UIString("Show network requests information")));
- this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(
- WebInspector.UIString("JS Profile"), this._captureJSProfileSetting, WebInspector.UIString("Capture JavaScript stacks with sampling profiler. (Has small performance overhead)")));
- this._panelToolbar.appendToolbarItem(screenshotCheckbox);
- this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(
- WebInspector.UIString("Memory"), this._captureMemorySetting, WebInspector.UIString("Capture memory information on every timeline event.")));
- this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(
- WebInspector.UIString("Paint"), this._captureLayersAndPicturesSetting, WebInspector.UIString("Capture graphics layer positions and rasterization draw calls. (Has large performance overhead)")));
- } else {
- this._panelToolbar.appendToolbarItem(screenshotCheckbox);
- }
-
- this._captureNetworkSetting.addChangeListener(this._onNetworkChanged, this);
- this._captureMemorySetting.addChangeListener(this._onModeChanged, this);
- this._captureFilmStripSetting.addChangeListener(this._onModeChanged, this);
-
- this._panelToolbar.appendSeparator();
- var garbageCollectButton = new WebInspector.ToolbarButton(WebInspector.UIString("Collect garbage"), "garbage-collect-toolbar-item");
- garbageCollectButton.addEventListener("click", this._garbageCollectButtonClicked, this);
- this._panelToolbar.appendToolbarItem(garbageCollectButton);
-
- this._panelToolbar.appendSeparator();
- this._cpuThrottlingCombobox = new WebInspector.ToolbarComboBox(this._onCPUThrottlingChanged.bind(this));
- this._panelToolbar.appendToolbarItem(this._cpuThrottlingCombobox);
- this._populateCPUThrottingCombobox();
- },
-
- _populateCPUThrottingCombobox: function()
- {
- var cpuThrottlingCombobox = this._cpuThrottlingCombobox;
- cpuThrottlingCombobox.removeOptions();
- var currentRate = this._cpuThrottlingManager.rate();
- var hasSelection = false;
- /**
- * @param {string} name
- * @param {number} value
- */
- function addGroupingOption(name, value)
- {
- var option = cpuThrottlingCombobox.createOption(name, "", String(value));
- cpuThrottlingCombobox.addOption(option);
- if (hasSelection || (value && value !== currentRate))
- return;
- cpuThrottlingCombobox.select(option);
- hasSelection = true;
- }
- var predefinedRates = new Map([
- [1, WebInspector.UIString("No CPU throttling")],
- [2, WebInspector.UIString("High end device (2\xD7 slowdown)")],
- [5, WebInspector.UIString("Low end device (5\xD7 slowdown)")]
- ]);
- for (var rate of predefinedRates)
- addGroupingOption(rate[1], rate[0]);
- if (this._customCPUThrottlingRate && !predefinedRates.has(this._customCPUThrottlingRate))
- addGroupingOption(WebInspector.UIString("Custom rate (%d\xD7 slowdown)", this._customCPUThrottlingRate), this._customCPUThrottlingRate);
- addGroupingOption(WebInspector.UIString("Set custom rate\u2026"), 0);
- },
-
- _prepareToLoadTimeline: function()
- {
- console.assert(this._state === WebInspector.TimelinePanel.State.Idle);
- this._setState(WebInspector.TimelinePanel.State.Loading);
- },
-
- _createFileSelector: function()
- {
- if (this._fileSelectorElement)
- this._fileSelectorElement.remove();
- this._fileSelectorElement = WebInspector.createFileSelectorElement(this._loadFromFile.bind(this));
- this.element.appendChild(this._fileSelectorElement);
- },
-
- /**
- * @param {!Event} event
- */
- _contextMenu: function(event)
- {
- var contextMenu = new WebInspector.ContextMenu(event);
- contextMenu.appendItemsAtLocation("timelineMenu");
- contextMenu.show();
- },
-
- /**
- * @return {boolean}
- */
- _saveToFile: function()
- {
- if (this._state !== WebInspector.TimelinePanel.State.Idle)
- return true;
- if (this._model.isEmpty())
- return true;
-
- var now = new Date();
- var fileName = "TimelineRawData-" + now.toISO8601Compact() + ".json";
- var stream = new WebInspector.FileOutputStream();
-
- /**
- * @param {boolean} accepted
- * @this {WebInspector.TimelinePanel}
- */
- function callback(accepted)
- {
- if (!accepted)
- return;
- var saver = new WebInspector.TracingTimelineSaver();
- this._tracingModelBackingStorage.writeToStream(stream, saver);
- }
- stream.open(fileName, callback.bind(this));
- return true;
- },
-
- /**
- * @return {boolean}
- */
- _selectFileToLoad: function()
- {
- this._fileSelectorElement.click();
- return true;
- },
-
- /**
- * @param {!File} file
- */
- _loadFromFile: function(file)
- {
- if (this._state !== WebInspector.TimelinePanel.State.Idle)
- return;
- this._prepareToLoadTimeline();
- this._loader = WebInspector.TimelineLoader.loadFromFile(this._tracingModel, file, this);
- this._createFileSelector();
- },
-
- /**
- * @param {string} url
+ * @param {number} value
*/
- _loadFromURL: function(url)
- {
- if (this._state !== WebInspector.TimelinePanel.State.Idle)
- return;
- this._prepareToLoadTimeline();
- this._loader = WebInspector.TimelineLoader.loadFromURL(this._tracingModel, url, this);
- },
-
- _refreshViews: function()
- {
- for (var i = 0; i < this._currentViews.length; ++i) {
- var view = this._currentViews[i];
- view.refreshRecords();
- }
- this._updateSelectionDetails();
- },
-
- _onModeChanged: function()
- {
- // Set up overview controls.
- this._overviewControls = [];
- this._overviewControls.push(new WebInspector.TimelineEventOverview.Responsiveness(this._model, this._frameModel));
- if (Runtime.experiments.isEnabled("inputEventsOnTimelineOverview"))
- this._overviewControls.push(new WebInspector.TimelineEventOverview.Input(this._model));
- this._overviewControls.push(new WebInspector.TimelineEventOverview.Frames(this._model, this._frameModel));
- this._overviewControls.push(new WebInspector.TimelineEventOverview.CPUActivity(this._model));
- this._overviewControls.push(new WebInspector.TimelineEventOverview.Network(this._model));
- if (this._captureFilmStripSetting.get())
- this._overviewControls.push(new WebInspector.TimelineFilmStripOverview(this._model, this._filmStripModel));
- if (this._captureMemorySetting.get())
- this._overviewControls.push(new WebInspector.TimelineEventOverview.Memory(this._model));
- this._overviewPane.setOverviewControls(this._overviewControls);
-
- // Set up the main view.
- this._removeAllModeViews();
- this._flameChart = new WebInspector.TimelineFlameChartView(this, this._model, this._frameModel, this._irModel, this._filters);
- this._flameChart.enableNetworkPane(this._captureNetworkSetting.get());
- this._addModeView(this._flameChart);
-
- if (this._captureMemorySetting.get())
- this._addModeView(new WebInspector.MemoryCountersGraph(this, this._model, [WebInspector.TimelineUIUtils.visibleEventsFilter()]));
-
- this.doResize();
- this.select(null);
- },
-
- _onNetworkChanged: function()
- {
- if (this._flameChart)
- this._flameChart.enableNetworkPane(this._captureNetworkSetting.get(), true);
- },
-
- _onCPUThrottlingChanged: function()
- {
- if (!this._cpuThrottlingManager)
- return;
- var value = this._cpuThrottlingCombobox.selectedOption().value;
- var isLastOption = this._cpuThrottlingCombobox.selectedIndex() === this._cpuThrottlingCombobox.size() - 1;
+ function addGroupingOption(name, value) {
+ var option = cpuThrottlingCombobox.createOption(name, '', String(value));
+ cpuThrottlingCombobox.addOption(option);
+ if (hasSelection || (value && value !== currentRate))
+ return;
+ cpuThrottlingCombobox.select(option);
+ hasSelection = true;
+ }
+ var predefinedRates = new Map([
+ [1, WebInspector.UIString('No CPU throttling')], [2, WebInspector.UIString('High end device (2\xD7 slowdown)')],
+ [5, WebInspector.UIString('Low end device (5\xD7 slowdown)')]
+ ]);
+ for (var rate of predefinedRates)
+ addGroupingOption(rate[1], rate[0]);
+ if (this._customCPUThrottlingRate && !predefinedRates.has(this._customCPUThrottlingRate))
+ addGroupingOption(
+ WebInspector.UIString('Custom rate (%d\xD7 slowdown)', this._customCPUThrottlingRate),
+ this._customCPUThrottlingRate);
+ addGroupingOption(WebInspector.UIString('Set custom rate\u2026'), 0);
+ }
+
+ _prepareToLoadTimeline() {
+ console.assert(this._state === WebInspector.TimelinePanel.State.Idle);
+ this._setState(WebInspector.TimelinePanel.State.Loading);
+ }
+
+ _createFileSelector() {
+ if (this._fileSelectorElement)
+ this._fileSelectorElement.remove();
+ this._fileSelectorElement = WebInspector.createFileSelectorElement(this._loadFromFile.bind(this));
+ this.element.appendChild(this._fileSelectorElement);
+ }
+
+ /**
+ * @param {!Event} event
+ */
+ _contextMenu(event) {
+ var contextMenu = new WebInspector.ContextMenu(event);
+ contextMenu.appendItemsAtLocation('timelineMenu');
+ contextMenu.show();
+ }
+
+ /**
+ * @return {boolean}
+ */
+ _saveToFile() {
+ if (this._state !== WebInspector.TimelinePanel.State.Idle)
+ return true;
+ if (this._model.isEmpty())
+ return true;
+
+ var now = new Date();
+ var fileName = 'TimelineRawData-' + now.toISO8601Compact() + '.json';
+ var stream = new WebInspector.FileOutputStream();
+
+ /**
+ * @param {boolean} accepted
+ * @this {WebInspector.TimelinePanel}
+ */
+ function callback(accepted) {
+ if (!accepted)
+ return;
+ var saver = new WebInspector.TracingTimelineSaver();
+ this._tracingModelBackingStorage.writeToStream(stream, saver);
+ }
+ stream.open(fileName, callback.bind(this));
+ return true;
+ }
+
+ /**
+ * @return {boolean}
+ */
+ _selectFileToLoad() {
+ this._fileSelectorElement.click();
+ return true;
+ }
+
+ /**
+ * @param {!File} file
+ */
+ _loadFromFile(file) {
+ if (this._state !== WebInspector.TimelinePanel.State.Idle)
+ return;
+ this._prepareToLoadTimeline();
+ this._loader = WebInspector.TimelineLoader.loadFromFile(this._tracingModel, file, this);
+ this._createFileSelector();
+ }
+
+ /**
+ * @param {string} url
+ */
+ _loadFromURL(url) {
+ if (this._state !== WebInspector.TimelinePanel.State.Idle)
+ return;
+ this._prepareToLoadTimeline();
+ this._loader = WebInspector.TimelineLoader.loadFromURL(this._tracingModel, url, this);
+ }
+
+ _refreshViews() {
+ for (var i = 0; i < this._currentViews.length; ++i) {
+ var view = this._currentViews[i];
+ view.refreshRecords();
+ }
+ this._updateSelectionDetails();
+ }
+
+ _onModeChanged() {
+ // Set up overview controls.
+ this._overviewControls = [];
+ this._overviewControls.push(new WebInspector.TimelineEventOverviewResponsiveness(this._model, this._frameModel));
+ if (Runtime.experiments.isEnabled('inputEventsOnTimelineOverview'))
+ this._overviewControls.push(new WebInspector.TimelineEventOverviewInput(this._model));
+ this._overviewControls.push(new WebInspector.TimelineEventOverviewFrames(this._model, this._frameModel));
+ this._overviewControls.push(new WebInspector.TimelineEventOverviewCPUActivity(this._model));
+ this._overviewControls.push(new WebInspector.TimelineEventOverviewNetwork(this._model));
+ if (this._captureFilmStripSetting.get())
+ this._overviewControls.push(new WebInspector.TimelineFilmStripOverview(this._model, this._filmStripModel));
+ if (this._captureMemorySetting.get())
+ this._overviewControls.push(new WebInspector.TimelineEventOverviewMemory(this._model));
+ this._overviewPane.setOverviewControls(this._overviewControls);
+
+ // Set up the main view.
+ this._removeAllModeViews();
+ this._flameChart =
+ new WebInspector.TimelineFlameChartView(this, this._model, this._frameModel, this._irModel, this._filters);
+ this._flameChart.enableNetworkPane(this._captureNetworkSetting.get());
+ this._addModeView(this._flameChart);
+
+ if (this._captureMemorySetting.get())
+ this._addModeView(new WebInspector.MemoryCountersGraph(
+ this, this._model, [WebInspector.TimelineUIUtils.visibleEventsFilter()]));
+
+ this.doResize();
+ this.select(null);
+ }
+
+ _onNetworkChanged() {
+ if (this._flameChart)
+ this._flameChart.enableNetworkPane(this._captureNetworkSetting.get(), true);
+ }
+
+ _onCPUThrottlingChanged() {
+ if (!this._cpuThrottlingManager)
+ return;
+ var value = this._cpuThrottlingCombobox.selectedOption().value;
+ var isLastOption = this._cpuThrottlingCombobox.selectedIndex() === this._cpuThrottlingCombobox.size() - 1;
+ this._populateCPUThrottingCombobox();
+ var resultPromise = isLastOption ?
+ WebInspector.TimelinePanel.CustomCPUThrottlingRateDialog.show(this._cpuThrottlingCombobox.element) :
+ Promise.resolve(value);
+ resultPromise.then(text => {
+ var value = Number.parseFloat(text);
+ if (value >= 1) {
+ if (isLastOption)
+ this._customCPUThrottlingRate = value;
+ this._cpuThrottlingManager.setRate(value);
this._populateCPUThrottingCombobox();
- var resultPromise = isLastOption
- ? WebInspector.TimelinePanel.CustomCPUThrottlingRateDialog.show(this._cpuThrottlingCombobox.element)
- : Promise.resolve(value);
- resultPromise.then(text => {
- var value = Number.parseFloat(text);
- if (value >= 1) {
- if (isLastOption)
- this._customCPUThrottlingRate = value;
- this._cpuThrottlingManager.setRate(value);
- this._populateCPUThrottingCombobox();
- }
- });
- },
-
- /**
- * @param {boolean} enabled
- */
- _setUIControlsEnabled: function(enabled)
- {
- /**
- * @param {!WebInspector.ToolbarButton} toolbarButton
- */
- function handler(toolbarButton)
- {
- toolbarButton.setEnabled(enabled);
- }
- this._recordingOptionUIControls.forEach(handler);
- },
-
- /**
- * @param {boolean} userInitiated
- */
- _startRecording: function(userInitiated)
- {
- console.assert(!this._statusPane, "Status pane is already opened.");
- var mainTarget = WebInspector.targetManager.mainTarget();
- if (!mainTarget)
- return;
- this._setState(WebInspector.TimelinePanel.State.StartPending);
- this._showRecordingStarted();
-
- this._autoRecordGeneration = userInitiated ? null : Symbol("Generation");
- this._controller = new WebInspector.TimelineController(mainTarget, this, this._tracingModel);
- this._controller.startRecording(true, this._captureJSProfileSetting.get(), this._captureMemorySetting.get(), this._captureLayersAndPicturesSetting.get(), this._captureFilmStripSetting && this._captureFilmStripSetting.get());
-
- for (var i = 0; i < this._overviewControls.length; ++i)
- this._overviewControls[i].timelineStarted();
-
- if (userInitiated)
- WebInspector.userMetrics.actionTaken(WebInspector.UserMetrics.Action.TimelineStarted);
- this._setUIControlsEnabled(false);
- this._hideRecordingHelpMessage();
- },
-
- _stopRecording: function()
- {
- if (this._statusPane) {
- this._statusPane.finish();
- this._statusPane.updateStatus(WebInspector.UIString("Stopping timeline\u2026"));
- this._statusPane.updateProgressBar(WebInspector.UIString("Received"), 0);
- }
- this._setState(WebInspector.TimelinePanel.State.StopPending);
- this._autoRecordGeneration = null;
- this._controller.stopRecording();
- this._controller = null;
- this._setUIControlsEnabled(true);
- },
-
- _onSuspendStateChanged: function()
- {
- this._updateTimelineControls();
- },
-
- _updateTimelineControls: function()
- {
- var state = WebInspector.TimelinePanel.State;
- this._toggleRecordAction.setToggled(this._state === state.Recording);
- this._toggleRecordAction.setEnabled(this._state === state.Recording || this._state === state.Idle);
- this._panelToolbar.setEnabled(this._state !== state.Loading);
- this._dropTarget.setEnabled(this._state === state.Idle);
- },
-
- _toggleRecording: function()
- {
- if (this._state === WebInspector.TimelinePanel.State.Idle)
- this._startRecording(true);
- else if (this._state === WebInspector.TimelinePanel.State.Recording)
- this._stopRecording();
- },
-
- _garbageCollectButtonClicked: function()
- {
- var targets = WebInspector.targetManager.targets();
- for (var i = 0; i < targets.length; ++i)
- targets[i].heapProfilerAgent().collectGarbage();
- },
-
- _clear: function()
- {
- WebInspector.LineLevelProfile.instance().reset();
- this._tracingModel.reset();
- this._model.reset();
- this._showRecordingHelpMessage();
-
- this.requestWindowTimes(0, Infinity);
- delete this._selection;
- this._frameModel.reset();
- this._filmStripModel.reset(this._tracingModel);
- this._overviewPane.reset();
- for (var i = 0; i < this._currentViews.length; ++i)
- this._currentViews[i].reset();
- for (var i = 0; i < this._overviewControls.length; ++i)
- this._overviewControls[i].reset();
- this.select(null);
- this._detailsSplitWidget.hideSidebar();
- },
-
- /**
- * @override
- */
- recordingStarted: function()
- {
- this._clear();
- this._setState(WebInspector.TimelinePanel.State.Recording);
- this._showRecordingStarted();
- this._statusPane.updateStatus(WebInspector.UIString("Recording\u2026"));
- this._statusPane.updateProgressBar(WebInspector.UIString("Buffer usage"), 0);
- this._statusPane.startTimer();
- this._hideRecordingHelpMessage();
- },
-
- /**
- * @override
- * @param {number} usage
- */
- recordingProgress: function(usage)
- {
- this._statusPane.updateProgressBar(WebInspector.UIString("Buffer usage"), usage * 100);
- },
-
- _showRecordingHelpMessage: function()
- {
- /**
- * @param {string} tagName
- * @param {string} contents
- * @return {!Element}
- */
- function encloseWithTag(tagName, contents)
- {
- var e = createElement(tagName);
- e.textContent = contents;
- return e;
- }
-
- var recordNode = encloseWithTag("b", WebInspector.shortcutRegistry.shortcutDescriptorsForAction("timeline.toggle-recording")[0].name);
- var reloadNode = encloseWithTag("b", WebInspector.shortcutRegistry.shortcutDescriptorsForAction("main.reload")[0].name);
- var navigateNode = encloseWithTag("b", WebInspector.UIString("WASD (ZQSD)"));
- var hintText = createElementWithClass("div");
- hintText.appendChild(WebInspector.formatLocalized("To capture a new timeline, click the record toolbar button or hit %s.", [recordNode]));
- hintText.createChild("br");
- hintText.appendChild(WebInspector.formatLocalized("To evaluate page load performance, hit %s to record the reload.", [reloadNode]));
- hintText.createChild("p");
- hintText.appendChild(WebInspector.formatLocalized("After recording, select an area of interest in the overview by dragging.", []));
- hintText.createChild("br");
- hintText.appendChild(WebInspector.formatLocalized("Then, zoom and pan the timeline with the mousewheel and %s keys.", [navigateNode]));
- this._hideRecordingHelpMessage();
- this._helpMessageElement = this._searchableView.element.createChild("div", "full-widget-dimmed-banner timeline-status-pane");
- this._helpMessageElement.appendChild(hintText);
- },
-
- _hideRecordingHelpMessage: function()
- {
- if (this._helpMessageElement)
- this._helpMessageElement.remove();
- delete this._helpMessageElement;
- },
-
- /**
- * @override
- */
- loadingStarted: function()
- {
- this._hideRecordingHelpMessage();
-
- if (this._statusPane)
- this._statusPane.hide();
- this._statusPane = new WebInspector.TimelinePanel.StatusPane(false, this._cancelLoading.bind(this));
- this._statusPane.showPane(this._statusPaneContainer);
- this._statusPane.updateStatus(WebInspector.UIString("Loading timeline\u2026"));
- // FIXME: make loading from backend cancelable as well.
- if (!this._loader)
- this._statusPane.finish();
- this.loadingProgress(0);
- },
+ }
+ });
+ }
+ /**
+ * @param {boolean} enabled
+ */
+ _setUIControlsEnabled(enabled) {
/**
- * @override
- * @param {number=} progress
+ * @param {!WebInspector.ToolbarButton} toolbarButton
*/
- loadingProgress: function(progress)
- {
- if (typeof progress === "number")
- this._statusPane.updateProgressBar(WebInspector.UIString("Received"), progress * 100);
- },
-
- /**
- * @override
- * @param {boolean} success
- */
- loadingComplete: function(success)
- {
- var loadedFromFile = !!this._loader;
- delete this._loader;
- this._setState(WebInspector.TimelinePanel.State.Idle);
-
- if (!success) {
- this._statusPane.hide();
- delete this._statusPane;
- this._clear();
- return;
- }
-
- if (this._statusPane)
- this._statusPane.updateStatus(WebInspector.UIString("Processing timeline\u2026"));
- this._model.setEvents(this._tracingModel, loadedFromFile);
- this._frameModel.reset();
- this._frameModel.addTraceEvents(WebInspector.targetManager.mainTarget(), this._model.inspectedTargetEvents(), this._model.sessionId() || "");
- this._filmStripModel.reset(this._tracingModel);
- var groups = WebInspector.TimelineModel.AsyncEventGroup;
- var asyncEventsByGroup = this._model.mainThreadAsyncEvents();
- this._irModel.populate(asyncEventsByGroup.get(groups.input), asyncEventsByGroup.get(groups.animation));
- this._model.cpuProfiles().forEach(profile => WebInspector.LineLevelProfile.instance().appendCPUProfile(profile));
- if (this._statusPane)
- this._statusPane.hide();
- delete this._statusPane;
- this._overviewPane.reset();
- this._overviewPane.setBounds(this._model.minimumRecordTime(), this._model.maximumRecordTime());
- this._setAutoWindowTimes();
- this._refreshViews();
- for (var i = 0; i < this._overviewControls.length; ++i)
- this._overviewControls[i].timelineStopped();
- this._setMarkers();
- this._overviewPane.scheduleUpdate();
- this._updateSearchHighlight(false, true);
- this._detailsSplitWidget.showBoth();
- },
-
- _showRecordingStarted: function()
- {
- if (this._statusPane)
- return;
- this._statusPane = new WebInspector.TimelinePanel.StatusPane(true, this._stopRecording.bind(this));
- this._statusPane.showPane(this._statusPaneContainer);
- this._statusPane.updateStatus(WebInspector.UIString("Initializing recording\u2026"));
- },
-
- _cancelLoading: function()
- {
- if (this._loader)
- this._loader.cancel();
- },
-
- _setMarkers: function()
- {
- var markers = new Map();
- var recordTypes = WebInspector.TimelineModel.RecordType;
- var zeroTime = this._model.minimumRecordTime();
- for (var record of this._model.eventDividerRecords()) {
- if (record.type() === recordTypes.TimeStamp || record.type() === recordTypes.ConsoleTime)
- continue;
- markers.set(record.startTime(), WebInspector.TimelineUIUtils.createDividerForRecord(record, zeroTime, 0));
- }
- this._overviewPane.setMarkers(markers);
- },
-
- /**
- * @param {!WebInspector.Event} event
- */
- _pageReloadRequested: function(event)
- {
- if (this._state !== WebInspector.TimelinePanel.State.Idle || !this.isShowing())
- return;
- this._startRecording(false);
- },
-
- /**
- * @param {!WebInspector.Event} event
- */
- _loadEventFired: function(event)
- {
- if (this._state !== WebInspector.TimelinePanel.State.Recording || !this._autoRecordGeneration)
- return;
- setTimeout(stopRecordingOnReload.bind(this, this._autoRecordGeneration), this._millisecondsToRecordAfterLoadEvent);
-
- /**
- * @this {WebInspector.TimelinePanel}
- * @param {!Object} recordGeneration
- */
- function stopRecordingOnReload(recordGeneration)
- {
- // Check if we're still in the same recording session.
- if (this._state !== WebInspector.TimelinePanel.State.Recording || this._autoRecordGeneration !== recordGeneration)
- return;
- this._stopRecording();
- }
- },
-
- // WebInspector.Searchable implementation
-
- /**
- * @override
- */
- jumpToNextSearchResult: function()
- {
- if (!this._searchResults || !this._searchResults.length)
- return;
- var index = this._selectedSearchResult ? this._searchResults.indexOf(this._selectedSearchResult) : -1;
- this._jumpToSearchResult(index + 1);
- },
-
- /**
- * @override
- */
- jumpToPreviousSearchResult: function()
- {
- if (!this._searchResults || !this._searchResults.length)
- return;
- var index = this._selectedSearchResult ? this._searchResults.indexOf(this._selectedSearchResult) : 0;
- this._jumpToSearchResult(index - 1);
- },
-
- /**
- * @override
- * @return {boolean}
- */
- supportsCaseSensitiveSearch: function()
- {
- return false;
- },
-
- /**
- * @override
- * @return {boolean}
- */
- supportsRegexSearch: function()
- {
- return false;
- },
-
- /**
- * @param {number} index
- */
- _jumpToSearchResult: function(index)
- {
- this._selectSearchResult((index + this._searchResults.length) % this._searchResults.length);
- this._currentViews[0].highlightSearchResult(this._selectedSearchResult, this._searchRegex, true);
- },
-
- /**
- * @param {number} index
- */
- _selectSearchResult: function(index)
- {
- this._selectedSearchResult = this._searchResults[index];
- this._searchableView.updateCurrentMatchIndex(index);
- },
-
- _clearHighlight: function()
- {
- this._currentViews[0].highlightSearchResult(null);
- },
-
- /**
- * @param {boolean} revealRecord
- * @param {boolean} shouldJump
- * @param {boolean=} jumpBackwards
- */
- _updateSearchHighlight: function(revealRecord, shouldJump, jumpBackwards)
- {
- if (!this._searchRegex) {
- this._clearHighlight();
- return;
- }
-
- if (!this._searchResults)
- this._updateSearchResults(shouldJump, jumpBackwards);
- this._currentViews[0].highlightSearchResult(this._selectedSearchResult, this._searchRegex, revealRecord);
- },
-
- /**
- * @param {boolean} shouldJump
- * @param {boolean=} jumpBackwards
- */
- _updateSearchResults: function(shouldJump, jumpBackwards)
- {
- if (!this._searchRegex)
- return;
-
- // FIXME: search on all threads.
- var events = this._model.mainThreadEvents();
- var filters = this._filters.concat([new WebInspector.TimelineTextFilter(this._searchRegex)]);
- var matches = [];
- for (var index = events.lowerBound(this._windowStartTime, (time, event) => time - event.startTime); index < events.length; ++index) {
- var event = events[index];
- if (event.startTime > this._windowEndTime)
- break;
- if (WebInspector.TimelineModel.isVisible(filters, event))
- matches.push(event);
- }
+ function handler(toolbarButton) {
+ toolbarButton.setEnabled(enabled);
+ }
+ this._recordingOptionUIControls.forEach(handler);
+ }
+
+ /**
+ * @param {boolean} userInitiated
+ */
+ _startRecording(userInitiated) {
+ console.assert(!this._statusPane, 'Status pane is already opened.');
+ var mainTarget = WebInspector.targetManager.mainTarget();
+ if (!mainTarget)
+ return;
+ this._setState(WebInspector.TimelinePanel.State.StartPending);
+ this._showRecordingStarted();
+
+ this._autoRecordGeneration = userInitiated ? null : Symbol('Generation');
+ this._controller = new WebInspector.TimelineController(mainTarget, this, this._tracingModel);
+ this._controller.startRecording(
+ true, this._captureJSProfileSetting.get(), this._captureMemorySetting.get(),
+ this._captureLayersAndPicturesSetting.get(),
+ this._captureFilmStripSetting && this._captureFilmStripSetting.get());
+
+ for (var i = 0; i < this._overviewControls.length; ++i)
+ this._overviewControls[i].timelineStarted();
+
+ if (userInitiated)
+ WebInspector.userMetrics.actionTaken(WebInspector.UserMetrics.Action.TimelineStarted);
+ this._setUIControlsEnabled(false);
+ this._hideRecordingHelpMessage();
+ }
+
+ _stopRecording() {
+ if (this._statusPane) {
+ this._statusPane.finish();
+ this._statusPane.updateStatus(WebInspector.UIString('Stopping timeline\u2026'));
+ this._statusPane.updateProgressBar(WebInspector.UIString('Received'), 0);
+ }
+ this._setState(WebInspector.TimelinePanel.State.StopPending);
+ this._autoRecordGeneration = null;
+ this._controller.stopRecording();
+ this._controller = null;
+ this._setUIControlsEnabled(true);
+ }
+
+ _onSuspendStateChanged() {
+ this._updateTimelineControls();
+ }
+
+ _updateTimelineControls() {
+ var state = WebInspector.TimelinePanel.State;
+ this._toggleRecordAction.setToggled(this._state === state.Recording);
+ this._toggleRecordAction.setEnabled(this._state === state.Recording || this._state === state.Idle);
+ this._panelToolbar.setEnabled(this._state !== state.Loading);
+ this._dropTarget.setEnabled(this._state === state.Idle);
+ }
+
+ _toggleRecording() {
+ if (this._state === WebInspector.TimelinePanel.State.Idle)
+ this._startRecording(true);
+ else if (this._state === WebInspector.TimelinePanel.State.Recording)
+ this._stopRecording();
+ }
+
+ _garbageCollectButtonClicked() {
+ var targets = WebInspector.targetManager.targets();
+ for (var i = 0; i < targets.length; ++i)
+ targets[i].heapProfilerAgent().collectGarbage();
+ }
+
+ _clear() {
+ WebInspector.LineLevelProfile.instance().reset();
+ this._tracingModel.reset();
+ this._model.reset();
+ this._showRecordingHelpMessage();
- var matchesCount = matches.length;
- if (matchesCount) {
- this._searchResults = matches;
- this._searchableView.updateSearchMatchesCount(matchesCount);
-
- var selectedIndex = matches.indexOf(this._selectedSearchResult);
- if (shouldJump && selectedIndex === -1)
- selectedIndex = jumpBackwards ? this._searchResults.length - 1 : 0;
- this._selectSearchResult(selectedIndex);
- } else {
- this._searchableView.updateSearchMatchesCount(0);
- delete this._selectedSearchResult;
- }
- },
+ this.requestWindowTimes(0, Infinity);
+ delete this._selection;
+ this._frameModel.reset();
+ this._filmStripModel.reset(this._tracingModel);
+ this._overviewPane.reset();
+ for (var i = 0; i < this._currentViews.length; ++i)
+ this._currentViews[i].reset();
+ for (var i = 0; i < this._overviewControls.length; ++i)
+ this._overviewControls[i].reset();
+ this.select(null);
+ this._detailsSplitWidget.hideSidebar();
+ }
+
+ /**
+ * @override
+ */
+ recordingStarted() {
+ this._clear();
+ this._setState(WebInspector.TimelinePanel.State.Recording);
+ this._showRecordingStarted();
+ this._statusPane.updateStatus(WebInspector.UIString('Recording\u2026'));
+ this._statusPane.updateProgressBar(WebInspector.UIString('Buffer usage'), 0);
+ this._statusPane.startTimer();
+ this._hideRecordingHelpMessage();
+ }
+
+ /**
+ * @override
+ * @param {number} usage
+ */
+ recordingProgress(usage) {
+ this._statusPane.updateProgressBar(WebInspector.UIString('Buffer usage'), usage * 100);
+ }
+
+ _showRecordingHelpMessage() {
+ /**
+ * @param {string} tagName
+ * @param {string} contents
+ * @return {!Element}
+ */
+ function encloseWithTag(tagName, contents) {
+ var e = createElement(tagName);
+ e.textContent = contents;
+ return e;
+ }
- /**
- * @override
- */
- searchCanceled: function()
- {
- this._clearHighlight();
- delete this._searchResults;
- delete this._selectedSearchResult;
- delete this._searchRegex;
- },
+ var recordNode = encloseWithTag(
+ 'b', WebInspector.shortcutRegistry.shortcutDescriptorsForAction('timeline.toggle-recording')[0].name);
+ var reloadNode =
+ encloseWithTag('b', WebInspector.shortcutRegistry.shortcutDescriptorsForAction('main.reload')[0].name);
+ var navigateNode = encloseWithTag('b', WebInspector.UIString('WASD (ZQSD)'));
+ var hintText = createElementWithClass('div');
+ hintText.appendChild(WebInspector.formatLocalized(
+ 'To capture a new timeline, click the record toolbar button or hit %s.', [recordNode]));
+ hintText.createChild('br');
+ hintText.appendChild(
+ WebInspector.formatLocalized('To evaluate page load performance, hit %s to record the reload.', [reloadNode]));
+ hintText.createChild('p');
+ hintText.appendChild(
+ WebInspector.formatLocalized('After recording, select an area of interest in the overview by dragging.', []));
+ hintText.createChild('br');
+ hintText.appendChild(WebInspector.formatLocalized(
+ 'Then, zoom and pan the timeline with the mousewheel and %s keys.', [navigateNode]));
+ this._hideRecordingHelpMessage();
+ this._helpMessageElement =
+ this._searchableView.element.createChild('div', 'full-widget-dimmed-banner timeline-status-pane');
+ this._helpMessageElement.appendChild(hintText);
+ }
+
+ _hideRecordingHelpMessage() {
+ if (this._helpMessageElement)
+ this._helpMessageElement.remove();
+ delete this._helpMessageElement;
+ }
+
+ /**
+ * @override
+ */
+ loadingStarted() {
+ this._hideRecordingHelpMessage();
+
+ if (this._statusPane)
+ this._statusPane.hide();
+ this._statusPane = new WebInspector.TimelinePanel.StatusPane(false, this._cancelLoading.bind(this));
+ this._statusPane.showPane(this._statusPaneContainer);
+ this._statusPane.updateStatus(WebInspector.UIString('Loading timeline\u2026'));
+ // FIXME: make loading from backend cancelable as well.
+ if (!this._loader)
+ this._statusPane.finish();
+ this.loadingProgress(0);
+ }
+
+ /**
+ * @override
+ * @param {number=} progress
+ */
+ loadingProgress(progress) {
+ if (typeof progress === 'number')
+ this._statusPane.updateProgressBar(WebInspector.UIString('Received'), progress * 100);
+ }
+
+ /**
+ * @override
+ * @param {boolean} success
+ */
+ loadingComplete(success) {
+ var loadedFromFile = !!this._loader;
+ delete this._loader;
+ this._setState(WebInspector.TimelinePanel.State.Idle);
+
+ if (!success) {
+ this._statusPane.hide();
+ delete this._statusPane;
+ this._clear();
+ return;
+ }
- /**
- * @override
- * @param {!WebInspector.SearchableView.SearchConfig} searchConfig
- * @param {boolean} shouldJump
- * @param {boolean=} jumpBackwards
- */
- performSearch: function(searchConfig, shouldJump, jumpBackwards)
- {
- var query = searchConfig.query;
- this._searchRegex = createPlainTextSearchRegex(query, "i");
- delete this._searchResults;
- this._updateSearchHighlight(true, shouldJump, jumpBackwards);
- },
-
- _updateSelectionDetails: function()
- {
- switch (this._selection.type()) {
- case WebInspector.TimelineSelection.Type.TraceEvent:
- var event = /** @type {!WebInspector.TracingModel.Event} */ (this._selection.object());
- WebInspector.TimelineUIUtils.buildTraceEventDetails(event, this._model, this._detailsLinkifier, true, this._appendDetailsTabsForTraceEventAndShowDetails.bind(this, event));
- break;
- case WebInspector.TimelineSelection.Type.Frame:
- var frame = /** @type {!WebInspector.TimelineFrame} */ (this._selection.object());
- var screenshotTime = frame.idle ? frame.startTime : frame.endTime; // For idle frames, look at the state at the beginning of the frame.
- var filmStripFrame = filmStripFrame = this._filmStripModel.frameByTimestamp(screenshotTime);
- if (filmStripFrame && filmStripFrame.timestamp - frame.endTime > 10)
- filmStripFrame = null;
- this.showInDetails(WebInspector.TimelineUIUtils.generateDetailsContentForFrame(this._frameModel, frame, filmStripFrame));
- if (frame.layerTree) {
- var layersView = this._layersView();
- layersView.showLayerTree(frame.layerTree);
- if (!this._detailsView.hasTab(WebInspector.TimelinePanel.DetailsTab.LayerViewer))
- this._detailsView.appendTab(WebInspector.TimelinePanel.DetailsTab.LayerViewer, WebInspector.UIString("Layers"), layersView);
- }
- break;
- case WebInspector.TimelineSelection.Type.NetworkRequest:
- var request = /** @type {!WebInspector.TimelineModel.NetworkRequest} */ (this._selection.object());
- WebInspector.TimelineUIUtils.buildNetworkRequestDetails(request, this._model, this._detailsLinkifier)
- .then(this.showInDetails.bind(this));
- break;
- case WebInspector.TimelineSelection.Type.Range:
- this._updateSelectedRangeStats(this._selection._startTime, this._selection._endTime);
- break;
- }
+ if (this._statusPane)
+ this._statusPane.updateStatus(WebInspector.UIString('Processing timeline\u2026'));
+ this._model.setEvents(this._tracingModel, loadedFromFile);
+ this._frameModel.reset();
+ this._frameModel.addTraceEvents(
+ WebInspector.targetManager.mainTarget(), this._model.inspectedTargetEvents(), this._model.sessionId() || '');
+ this._filmStripModel.reset(this._tracingModel);
+ var groups = WebInspector.TimelineModel.AsyncEventGroup;
+ var asyncEventsByGroup = this._model.mainThreadAsyncEvents();
+ this._irModel.populate(asyncEventsByGroup.get(groups.input), asyncEventsByGroup.get(groups.animation));
+ this._model.cpuProfiles().forEach(profile => WebInspector.LineLevelProfile.instance().appendCPUProfile(profile));
+ if (this._statusPane)
+ this._statusPane.hide();
+ delete this._statusPane;
+ this._overviewPane.reset();
+ this._overviewPane.setBounds(this._model.minimumRecordTime(), this._model.maximumRecordTime());
+ this._setAutoWindowTimes();
+ this._refreshViews();
+ for (var i = 0; i < this._overviewControls.length; ++i)
+ this._overviewControls[i].timelineStopped();
+ this._setMarkers();
+ this._overviewPane.scheduleUpdate();
+ this._updateSearchHighlight(false, true);
+ this._detailsSplitWidget.showBoth();
+ }
+
+ _showRecordingStarted() {
+ if (this._statusPane)
+ return;
+ this._statusPane = new WebInspector.TimelinePanel.StatusPane(true, this._stopRecording.bind(this));
+ this._statusPane.showPane(this._statusPaneContainer);
+ this._statusPane.updateStatus(WebInspector.UIString('Initializing recording\u2026'));
+ }
+
+ _cancelLoading() {
+ if (this._loader)
+ this._loader.cancel();
+ }
+
+ _setMarkers() {
+ var markers = new Map();
+ var recordTypes = WebInspector.TimelineModel.RecordType;
+ var zeroTime = this._model.minimumRecordTime();
+ for (var record of this._model.eventDividerRecords()) {
+ if (record.type() === recordTypes.TimeStamp || record.type() === recordTypes.ConsoleTime)
+ continue;
+ markers.set(record.startTime(), WebInspector.TimelineUIUtils.createDividerForRecord(record, zeroTime, 0));
+ }
+ this._overviewPane.setMarkers(markers);
+ }
+
+ /**
+ * @param {!WebInspector.Event} event
+ */
+ _pageReloadRequested(event) {
+ if (this._state !== WebInspector.TimelinePanel.State.Idle || !this.isShowing())
+ return;
+ this._startRecording(false);
+ }
+
+ /**
+ * @param {!WebInspector.Event} event
+ */
+ _loadEventFired(event) {
+ if (this._state !== WebInspector.TimelinePanel.State.Recording || !this._autoRecordGeneration)
+ return;
+ setTimeout(stopRecordingOnReload.bind(this, this._autoRecordGeneration), this._millisecondsToRecordAfterLoadEvent);
+
+ /**
+ * @this {WebInspector.TimelinePanel}
+ * @param {!Object} recordGeneration
+ */
+ function stopRecordingOnReload(recordGeneration) {
+ // Check if we're still in the same recording session.
+ if (this._state !== WebInspector.TimelinePanel.State.Recording || this._autoRecordGeneration !== recordGeneration)
+ return;
+ this._stopRecording();
+ }
+ }
+
+ // WebInspector.Searchable implementation
+
+ /**
+ * @override
+ */
+ jumpToNextSearchResult() {
+ if (!this._searchResults || !this._searchResults.length)
+ return;
+ var index = this._selectedSearchResult ? this._searchResults.indexOf(this._selectedSearchResult) : -1;
+ this._jumpToSearchResult(index + 1);
+ }
+
+ /**
+ * @override
+ */
+ jumpToPreviousSearchResult() {
+ if (!this._searchResults || !this._searchResults.length)
+ return;
+ var index = this._selectedSearchResult ? this._searchResults.indexOf(this._selectedSearchResult) : 0;
+ this._jumpToSearchResult(index - 1);
+ }
+
+ /**
+ * @override
+ * @return {boolean}
+ */
+ supportsCaseSensitiveSearch() {
+ return false;
+ }
+
+ /**
+ * @override
+ * @return {boolean}
+ */
+ supportsRegexSearch() {
+ return false;
+ }
+
+ /**
+ * @param {number} index
+ */
+ _jumpToSearchResult(index) {
+ this._selectSearchResult((index + this._searchResults.length) % this._searchResults.length);
+ this._currentViews[0].highlightSearchResult(this._selectedSearchResult, this._searchRegex, true);
+ }
+
+ /**
+ * @param {number} index
+ */
+ _selectSearchResult(index) {
+ this._selectedSearchResult = this._searchResults[index];
+ this._searchableView.updateCurrentMatchIndex(index);
+ }
+
+ _clearHighlight() {
+ this._currentViews[0].highlightSearchResult(null);
+ }
+
+ /**
+ * @param {boolean} revealRecord
+ * @param {boolean} shouldJump
+ * @param {boolean=} jumpBackwards
+ */
+ _updateSearchHighlight(revealRecord, shouldJump, jumpBackwards) {
+ if (!this._searchRegex) {
+ this._clearHighlight();
+ return;
+ }
- this._detailsView.updateContents(this._selection);
- },
+ if (!this._searchResults)
+ this._updateSearchResults(shouldJump, jumpBackwards);
+ this._currentViews[0].highlightSearchResult(this._selectedSearchResult, this._searchRegex, revealRecord);
+ }
+
+ /**
+ * @param {boolean} shouldJump
+ * @param {boolean=} jumpBackwards
+ */
+ _updateSearchResults(shouldJump, jumpBackwards) {
+ if (!this._searchRegex)
+ return;
+
+ // FIXME: search on all threads.
+ var events = this._model.mainThreadEvents();
+ var filters = this._filters.concat([new WebInspector.TimelineTextFilter(this._searchRegex)]);
+ var matches = [];
+ for (var index = events.lowerBound(this._windowStartTime, (time, event) => time - event.startTime);
+ index < events.length; ++index) {
+ var event = events[index];
+ if (event.startTime > this._windowEndTime)
+ break;
+ if (WebInspector.TimelineModel.isVisible(filters, event))
+ matches.push(event);
+ }
- /**
- * @param {!WebInspector.TimelineSelection} selection
- * @return {?WebInspector.TimelineFrame}
- */
- _frameForSelection: function(selection)
- {
- switch (selection.type()) {
- case WebInspector.TimelineSelection.Type.Frame:
- return /** @type {!WebInspector.TimelineFrame} */ (selection.object());
- case WebInspector.TimelineSelection.Type.Range:
- return null;
- case WebInspector.TimelineSelection.Type.TraceEvent:
- return this._frameModel.filteredFrames(selection._endTime, selection._endTime)[0];
- default:
- console.assert(false, "Should never be reached");
- return null;
+ var matchesCount = matches.length;
+ if (matchesCount) {
+ this._searchResults = matches;
+ this._searchableView.updateSearchMatchesCount(matchesCount);
+
+ var selectedIndex = matches.indexOf(this._selectedSearchResult);
+ if (shouldJump && selectedIndex === -1)
+ selectedIndex = jumpBackwards ? this._searchResults.length - 1 : 0;
+ this._selectSearchResult(selectedIndex);
+ } else {
+ this._searchableView.updateSearchMatchesCount(0);
+ delete this._selectedSearchResult;
+ }
+ }
+
+ /**
+ * @override
+ */
+ searchCanceled() {
+ this._clearHighlight();
+ delete this._searchResults;
+ delete this._selectedSearchResult;
+ delete this._searchRegex;
+ }
+
+ /**
+ * @override
+ * @param {!WebInspector.SearchableView.SearchConfig} searchConfig
+ * @param {boolean} shouldJump
+ * @param {boolean=} jumpBackwards
+ */
+ performSearch(searchConfig, shouldJump, jumpBackwards) {
+ var query = searchConfig.query;
+ this._searchRegex = createPlainTextSearchRegex(query, 'i');
+ delete this._searchResults;
+ this._updateSearchHighlight(true, shouldJump, jumpBackwards);
+ }
+
+ _updateSelectionDetails() {
+ switch (this._selection.type()) {
+ case WebInspector.TimelineSelection.Type.TraceEvent:
+ var event = /** @type {!WebInspector.TracingModel.Event} */ (this._selection.object());
+ WebInspector.TimelineUIUtils.buildTraceEventDetails(
+ event, this._model, this._detailsLinkifier, true,
+ this._appendDetailsTabsForTraceEventAndShowDetails.bind(this, event));
+ break;
+ case WebInspector.TimelineSelection.Type.Frame:
+ var frame = /** @type {!WebInspector.TimelineFrame} */ (this._selection.object());
+ var screenshotTime = frame.idle ?
+ frame.startTime :
+ frame.endTime; // For idle frames, look at the state at the beginning of the frame.
+ var filmStripFrame = filmStripFrame = this._filmStripModel.frameByTimestamp(screenshotTime);
+ if (filmStripFrame && filmStripFrame.timestamp - frame.endTime > 10)
+ filmStripFrame = null;
+ this.showInDetails(
+ WebInspector.TimelineUIUtils.generateDetailsContentForFrame(this._frameModel, frame, filmStripFrame));
+ if (frame.layerTree) {
+ var layersView = this._layersView();
+ layersView.showLayerTree(frame.layerTree);
+ if (!this._detailsView.hasTab(WebInspector.TimelinePanel.DetailsTab.LayerViewer))
+ this._detailsView.appendTab(
+ WebInspector.TimelinePanel.DetailsTab.LayerViewer, WebInspector.UIString('Layers'), layersView);
}
- },
-
- /**
- * @param {number} offset
- */
- _jumpToFrame: function(offset)
- {
- var currentFrame = this._frameForSelection(this._selection);
- if (!currentFrame)
- return;
- var frames = this._frameModel.frames();
- var index = frames.indexOf(currentFrame);
- console.assert(index >= 0, "Can't find current frame in the frame list");
- index = Number.constrain(index + offset, 0, frames.length - 1);
- var frame = frames[index];
- this._revealTimeRange(frame.startTime, frame.endTime);
- this.select(WebInspector.TimelineSelection.fromFrame(frame));
- return true;
- },
-
- /**
- * @param {!WebInspector.PaintProfilerSnapshot} snapshot
- */
- _showSnapshotInPaintProfiler: function(snapshot)
- {
- var paintProfilerView = this._paintProfilerView();
- var hasProfileData = paintProfilerView.setSnapshot(snapshot);
- if (!this._detailsView.hasTab(WebInspector.TimelinePanel.DetailsTab.PaintProfiler))
- this._detailsView.appendTab(WebInspector.TimelinePanel.DetailsTab.PaintProfiler, WebInspector.UIString("Paint Profiler"), paintProfilerView, undefined, undefined, true);
- this._detailsView.selectTab(WebInspector.TimelinePanel.DetailsTab.PaintProfiler, true);
- },
-
- /**
- * @param {!WebInspector.TracingModel.Event} event
- * @param {!Node} content
- */
- _appendDetailsTabsForTraceEventAndShowDetails: function(event, content)
- {
- this.showInDetails(content);
- if (event.name === WebInspector.TimelineModel.RecordType.Paint || event.name === WebInspector.TimelineModel.RecordType.RasterTask)
- this._showEventInPaintProfiler(event);
- },
-
- /**
- * @param {!WebInspector.TracingModel.Event} event
- */
- _showEventInPaintProfiler: function(event)
- {
- var target = WebInspector.targetManager.mainTarget();
- if (!target)
- return;
- var paintProfilerView = this._paintProfilerView();
- var hasProfileData = paintProfilerView.setEvent(target, event);
- if (!hasProfileData)
- return;
- if (!this._detailsView.hasTab(WebInspector.TimelinePanel.DetailsTab.PaintProfiler))
- this._detailsView.appendTab(WebInspector.TimelinePanel.DetailsTab.PaintProfiler, WebInspector.UIString("Paint Profiler"), paintProfilerView, undefined, undefined, false);
- },
-
- /**
- * @param {number} startTime
- * @param {number} endTime
- */
- _updateSelectedRangeStats: function(startTime, endTime)
- {
- this.showInDetails(WebInspector.TimelineUIUtils.buildRangeStats(this._model, startTime, endTime));
- },
+ break;
+ case WebInspector.TimelineSelection.Type.NetworkRequest:
+ var request = /** @type {!WebInspector.TimelineModel.NetworkRequest} */ (this._selection.object());
+ WebInspector.TimelineUIUtils.buildNetworkRequestDetails(request, this._model, this._detailsLinkifier)
+ .then(this.showInDetails.bind(this));
+ break;
+ case WebInspector.TimelineSelection.Type.Range:
+ this._updateSelectedRangeStats(this._selection._startTime, this._selection._endTime);
+ break;
+ }
- /**
- * @override
- * @param {?WebInspector.TimelineSelection} selection
- * @param {!WebInspector.TimelinePanel.DetailsTab=} preferredTab
- */
- select: function(selection, preferredTab)
- {
- if (!selection)
- selection = WebInspector.TimelineSelection.fromRange(this._windowStartTime, this._windowEndTime);
- this._selection = selection;
- this._detailsLinkifier.reset();
- if (preferredTab)
- this._detailsView.setPreferredTab(preferredTab);
-
- for (var view of this._currentViews)
- view.setSelection(selection);
- this._updateSelectionDetails();
- },
+ this._detailsView.updateContents(this._selection);
+ }
+
+ /**
+ * @param {!WebInspector.TimelineSelection} selection
+ * @return {?WebInspector.TimelineFrame}
+ */
+ _frameForSelection(selection) {
+ switch (selection.type()) {
+ case WebInspector.TimelineSelection.Type.Frame:
+ return /** @type {!WebInspector.TimelineFrame} */ (selection.object());
+ case WebInspector.TimelineSelection.Type.Range:
+ return null;
+ case WebInspector.TimelineSelection.Type.TraceEvent:
+ return this._frameModel.filteredFrames(selection._endTime, selection._endTime)[0];
+ default:
+ console.assert(false, 'Should never be reached');
+ return null;
+ }
+ }
+
+ /**
+ * @param {number} offset
+ */
+ _jumpToFrame(offset) {
+ var currentFrame = this._frameForSelection(this._selection);
+ if (!currentFrame)
+ return;
+ var frames = this._frameModel.frames();
+ var index = frames.indexOf(currentFrame);
+ console.assert(index >= 0, 'Can\'t find current frame in the frame list');
+ index = Number.constrain(index + offset, 0, frames.length - 1);
+ var frame = frames[index];
+ this._revealTimeRange(frame.startTime, frame.endTime);
+ this.select(WebInspector.TimelineSelection.fromFrame(frame));
+ return true;
+ }
+
+ /**
+ * @param {!WebInspector.PaintProfilerSnapshot} snapshot
+ */
+ _showSnapshotInPaintProfiler(snapshot) {
+ var paintProfilerView = this._paintProfilerView();
+ var hasProfileData = paintProfilerView.setSnapshot(snapshot);
+ if (!this._detailsView.hasTab(WebInspector.TimelinePanel.DetailsTab.PaintProfiler))
+ this._detailsView.appendTab(
+ WebInspector.TimelinePanel.DetailsTab.PaintProfiler, WebInspector.UIString('Paint Profiler'),
+ paintProfilerView, undefined, undefined, true);
+ this._detailsView.selectTab(WebInspector.TimelinePanel.DetailsTab.PaintProfiler, true);
+ }
+
+ /**
+ * @param {!WebInspector.TracingModel.Event} event
+ * @param {!Node} content
+ */
+ _appendDetailsTabsForTraceEventAndShowDetails(event, content) {
+ this.showInDetails(content);
+ if (event.name === WebInspector.TimelineModel.RecordType.Paint ||
+ event.name === WebInspector.TimelineModel.RecordType.RasterTask)
+ this._showEventInPaintProfiler(event);
+ }
+
+ /**
+ * @param {!WebInspector.TracingModel.Event} event
+ */
+ _showEventInPaintProfiler(event) {
+ var target = WebInspector.targetManager.mainTarget();
+ if (!target)
+ return;
+ var paintProfilerView = this._paintProfilerView();
+ var hasProfileData = paintProfilerView.setEvent(target, event);
+ if (!hasProfileData)
+ return;
+ if (!this._detailsView.hasTab(WebInspector.TimelinePanel.DetailsTab.PaintProfiler))
+ this._detailsView.appendTab(
+ WebInspector.TimelinePanel.DetailsTab.PaintProfiler, WebInspector.UIString('Paint Profiler'),
+ paintProfilerView, undefined, undefined, false);
+ }
+
+ /**
+ * @param {number} startTime
+ * @param {number} endTime
+ */
+ _updateSelectedRangeStats(startTime, endTime) {
+ this.showInDetails(WebInspector.TimelineUIUtils.buildRangeStats(this._model, startTime, endTime));
+ }
+
+ /**
+ * @override
+ * @param {?WebInspector.TimelineSelection} selection
+ * @param {!WebInspector.TimelinePanel.DetailsTab=} preferredTab
+ */
+ select(selection, preferredTab) {
+ if (!selection)
+ selection = WebInspector.TimelineSelection.fromRange(this._windowStartTime, this._windowEndTime);
+ this._selection = selection;
+ this._detailsLinkifier.reset();
+ if (preferredTab)
+ this._detailsView.setPreferredTab(preferredTab);
+
+ for (var view of this._currentViews)
+ view.setSelection(selection);
+ this._updateSelectionDetails();
+ }
+
+ /**
+ * @override
+ * @param {number} time
+ */
+ selectEntryAtTime(time) {
+ var events = this._model.mainThreadEvents();
+ // Find best match, then backtrack to the first visible entry.
+ for (var index = events.upperBound(time, (time, event) => time - event.startTime) - 1; index >= 0; --index) {
+ var event = events[index];
+ var endTime = event.endTime || event.startTime;
+ if (WebInspector.TracingModel.isTopLevelEvent(event) && endTime < time)
+ break;
+ if (WebInspector.TimelineModel.isVisible(this._filters, event) && endTime >= time) {
+ this.select(WebInspector.TimelineSelection.fromTraceEvent(event));
+ return;
+ }
+ }
+ this.select(null);
+ }
+
+ /**
+ * @override
+ * @param {?WebInspector.TracingModel.Event} event
+ */
+ highlightEvent(event) {
+ for (var view of this._currentViews)
+ view.highlightEvent(event);
+ }
+
+ /**
+ * @param {number} startTime
+ * @param {number} endTime
+ */
+ _revealTimeRange(startTime, endTime) {
+ var timeShift = 0;
+ if (this._windowEndTime < endTime)
+ timeShift = endTime - this._windowEndTime;
+ else if (this._windowStartTime > startTime)
+ timeShift = startTime - this._windowStartTime;
+ if (timeShift)
+ this.requestWindowTimes(this._windowStartTime + timeShift, this._windowEndTime + timeShift);
+ }
+
+ /**
+ * @override
+ * @param {!Node} node
+ */
+ showInDetails(node) {
+ this._detailsView.setContent(node);
+ }
+
+ /**
+ * @param {!DataTransfer} dataTransfer
+ */
+ _handleDrop(dataTransfer) {
+ var items = dataTransfer.items;
+ if (!items.length)
+ return;
+ var item = items[0];
+ if (item.kind === 'string') {
+ var url = dataTransfer.getData('text/uri-list');
+ if (new WebInspector.ParsedURL(url).isValid)
+ this._loadFromURL(url);
+ } else if (item.kind === 'file') {
+ var entry = items[0].webkitGetAsEntry();
+ if (!entry.isFile)
+ return;
+ entry.file(this._loadFromFile.bind(this));
+ }
+ }
+ _setAutoWindowTimes() {
+ var tasks = this._model.mainThreadTasks();
+ if (!tasks.length) {
+ this.requestWindowTimes(this._tracingModel.minimumRecordTime(), this._tracingModel.maximumRecordTime());
+ return;
+ }
/**
- * @override
- * @param {number} time
+ * @param {number} startIndex
+ * @param {number} stopIndex
+ * @return {number}
*/
- selectEntryAtTime: function(time)
- {
- var events = this._model.mainThreadEvents();
- // Find best match, then backtrack to the first visible entry.
- for (var index = events.upperBound(time, (time, event) => time - event.startTime) - 1; index >= 0; --index) {
- var event = events[index];
- var endTime = event.endTime || event.startTime;
- if (WebInspector.TracingModel.isTopLevelEvent(event) && endTime < time)
- break;
- if (WebInspector.TimelineModel.isVisible(this._filters, event) && endTime >= time) {
- this.select(WebInspector.TimelineSelection.fromTraceEvent(event));
- return;
- }
+ function findLowUtilizationRegion(startIndex, stopIndex) {
+ var /** @const */ threshold = 0.1;
+ var cutIndex = startIndex;
+ var cutTime = (tasks[cutIndex].startTime() + tasks[cutIndex].endTime()) / 2;
+ var usedTime = 0;
+ var step = Math.sign(stopIndex - startIndex);
+ for (var i = startIndex; i !== stopIndex; i += step) {
+ var task = tasks[i];
+ var taskTime = (task.startTime() + task.endTime()) / 2;
+ var interval = Math.abs(cutTime - taskTime);
+ if (usedTime < threshold * interval) {
+ cutIndex = i;
+ cutTime = taskTime;
+ usedTime = 0;
}
- this.select(null);
- },
-
- /**
- * @override
- * @param {?WebInspector.TracingModel.Event} event
- */
- highlightEvent: function(event)
- {
- for (var view of this._currentViews)
- view.highlightEvent(event);
- },
-
- /**
- * @param {number} startTime
- * @param {number} endTime
- */
- _revealTimeRange: function(startTime, endTime)
- {
- var timeShift = 0;
- if (this._windowEndTime < endTime)
- timeShift = endTime - this._windowEndTime;
- else if (this._windowStartTime > startTime)
- timeShift = startTime - this._windowStartTime;
- if (timeShift)
- this.requestWindowTimes(this._windowStartTime + timeShift, this._windowEndTime + timeShift);
- },
+ usedTime += task.endTime() - task.startTime();
+ }
+ return cutIndex;
+ }
+ var rightIndex = findLowUtilizationRegion(tasks.length - 1, 0);
+ var leftIndex = findLowUtilizationRegion(0, rightIndex);
+ var leftTime = tasks[leftIndex].startTime();
+ var rightTime = tasks[rightIndex].endTime();
+ var span = rightTime - leftTime;
+ var totalSpan = this._tracingModel.maximumRecordTime() - this._tracingModel.minimumRecordTime();
+ if (span < totalSpan * 0.1) {
+ leftTime = this._tracingModel.minimumRecordTime();
+ rightTime = this._tracingModel.maximumRecordTime();
+ } else {
+ leftTime = Math.max(leftTime - 0.05 * span, this._tracingModel.minimumRecordTime());
+ rightTime = Math.min(rightTime + 0.05 * span, this._tracingModel.maximumRecordTime());
+ }
+ this.requestWindowTimes(leftTime, rightTime);
+ }
+};
- /**
- * @override
- * @param {!Node} node
- */
- showInDetails: function(node)
- {
- this._detailsView.setContent(node);
- },
+/**
+ * @enum {string}
+ */
+WebInspector.TimelinePanel.Perspectives = {
+ Load: 'Load',
+ Responsiveness: 'Responsiveness',
+ Custom: 'Custom'
+};
- /**
- * @param {!DataTransfer} dataTransfer
- */
- _handleDrop: function(dataTransfer)
- {
- var items = dataTransfer.items;
- if (!items.length)
- return;
- var item = items[0];
- if (item.kind === "string") {
- var url = dataTransfer.getData("text/uri-list");
- if (new WebInspector.ParsedURL(url).isValid)
- this._loadFromURL(url);
- } else if (item.kind === "file") {
- var entry = items[0].webkitGetAsEntry();
- if (!entry.isFile)
- return;
- entry.file(this._loadFromFile.bind(this));
- }
- },
-
- _setAutoWindowTimes: function()
- {
- var tasks = this._model.mainThreadTasks();
- if (!tasks.length) {
- this.requestWindowTimes(this._tracingModel.minimumRecordTime(), this._tracingModel.maximumRecordTime());
- return;
- }
- /**
- * @param {number} startIndex
- * @param {number} stopIndex
- * @return {number}
- */
- function findLowUtilizationRegion(startIndex, stopIndex)
- {
- var /** @const */ threshold = 0.1;
- var cutIndex = startIndex;
- var cutTime = (tasks[cutIndex].startTime() + tasks[cutIndex].endTime()) / 2;
- var usedTime = 0;
- var step = Math.sign(stopIndex - startIndex);
- for (var i = startIndex; i !== stopIndex; i += step) {
- var task = tasks[i];
- var taskTime = (task.startTime() + task.endTime()) / 2;
- var interval = Math.abs(cutTime - taskTime);
- if (usedTime < threshold * interval) {
- cutIndex = i;
- cutTime = taskTime;
- usedTime = 0;
- }
- usedTime += task.endTime() - task.startTime();
- }
- return cutIndex;
- }
- var rightIndex = findLowUtilizationRegion(tasks.length - 1, 0);
- var leftIndex = findLowUtilizationRegion(0, rightIndex);
- var leftTime = tasks[leftIndex].startTime();
- var rightTime = tasks[rightIndex].endTime();
- var span = rightTime - leftTime;
- var totalSpan = this._tracingModel.maximumRecordTime() - this._tracingModel.minimumRecordTime();
- if (span < totalSpan * 0.1) {
- leftTime = this._tracingModel.minimumRecordTime();
- rightTime = this._tracingModel.maximumRecordTime();
- } else {
- leftTime = Math.max(leftTime - 0.05 * span, this._tracingModel.minimumRecordTime());
- rightTime = Math.min(rightTime + 0.05 * span, this._tracingModel.maximumRecordTime());
- }
- this.requestWindowTimes(leftTime, rightTime);
- },
+/**
+ * @enum {string}
+ */
+WebInspector.TimelinePanel.DetailsTab = {
+ Details: 'Details',
+ Events: 'Events',
+ CallTree: 'CallTree',
+ BottomUp: 'BottomUp',
+ PaintProfiler: 'PaintProfiler',
+ LayerViewer: 'LayerViewer'
+};
- __proto__: WebInspector.Panel.prototype
+/**
+ * @enum {symbol}
+ */
+WebInspector.TimelinePanel.State = {
+ Idle: Symbol('Idle'),
+ StartPending: Symbol('StartPending'),
+ Recording: Symbol('Recording'),
+ StopPending: Symbol('StopPending'),
+ Loading: Symbol('Loading')
};
+// Define row and header height, should be in sync with styles for timeline graphs.
+WebInspector.TimelinePanel.rowHeight = 18;
+WebInspector.TimelinePanel.headerHeight = 20;
+
/**
* @interface
*/
-WebInspector.TimelineLifecycleDelegate = function()
-{
-};
+WebInspector.TimelineLifecycleDelegate = function() {};
WebInspector.TimelineLifecycleDelegate.prototype = {
- recordingStarted: function() {},
+ recordingStarted: function() {},
- /**
- * @param {number} usage
- */
- recordingProgress: function(usage) {},
+ /**
+ * @param {number} usage
+ */
+ recordingProgress: function(usage) {},
- loadingStarted: function() {},
+ loadingStarted: function() {},
- /**
- * @param {number=} progress
- */
- loadingProgress: function(progress) {},
+ /**
+ * @param {number=} progress
+ */
+ loadingProgress: function(progress) {},
- /**
- * @param {boolean} success
- */
- loadingComplete: function(success) {},
+ /**
+ * @param {boolean} success
+ */
+ loadingComplete: function(success) {},
};
-
/**
- * @constructor
- * @extends {WebInspector.TabbedPane}
- * @param {!WebInspector.TimelineModel} timelineModel
- * @param {!Array<!WebInspector.TimelineModel.Filter>} filters
- * @param {!WebInspector.TimelineModeViewDelegate} delegate
+ * @unrestricted
*/
-WebInspector.TimelineDetailsView = function(timelineModel, filters, delegate)
-{
- WebInspector.TabbedPane.call(this);
- this.element.classList.add("timeline-details");
+WebInspector.TimelineDetailsView = class extends WebInspector.TabbedPane {
+ /**
+ * @param {!WebInspector.TimelineModel} timelineModel
+ * @param {!Array<!WebInspector.TimelineModel.Filter>} filters
+ * @param {!WebInspector.TimelineModeViewDelegate} delegate
+ */
+ constructor(timelineModel, filters, delegate) {
+ super();
+ this.element.classList.add('timeline-details');
var tabIds = WebInspector.TimelinePanel.DetailsTab;
this._defaultDetailsWidget = new WebInspector.VBox();
- this._defaultDetailsWidget.element.classList.add("timeline-details-view");
- this._defaultDetailsContentElement = this._defaultDetailsWidget.element.createChild("div", "timeline-details-view-body vbox");
- this.appendTab(tabIds.Details, WebInspector.UIString("Summary"), this._defaultDetailsWidget);
+ this._defaultDetailsWidget.element.classList.add('timeline-details-view');
+ this._defaultDetailsContentElement =
+ this._defaultDetailsWidget.element.createChild('div', 'timeline-details-view-body vbox');
+ this.appendTab(tabIds.Details, WebInspector.UIString('Summary'), this._defaultDetailsWidget);
this.setPreferredTab(tabIds.Details);
/** @type Map<string, WebInspector.TimelineTreeView> */
this._rangeDetailViews = new Map();
var bottomUpView = new WebInspector.BottomUpTimelineTreeView(timelineModel, filters);
- this.appendTab(tabIds.BottomUp, WebInspector.UIString("Bottom-Up"), bottomUpView);
+ this.appendTab(tabIds.BottomUp, WebInspector.UIString('Bottom-Up'), bottomUpView);
this._rangeDetailViews.set(tabIds.BottomUp, bottomUpView);
var callTreeView = new WebInspector.CallTreeTimelineTreeView(timelineModel, filters);
- this.appendTab(tabIds.CallTree, WebInspector.UIString("Call Tree"), callTreeView);
+ this.appendTab(tabIds.CallTree, WebInspector.UIString('Call Tree'), callTreeView);
this._rangeDetailViews.set(tabIds.CallTree, callTreeView);
var eventsView = new WebInspector.EventsTimelineTreeView(timelineModel, filters, delegate);
- this.appendTab(tabIds.Events, WebInspector.UIString("Event Log"), eventsView);
+ this.appendTab(tabIds.Events, WebInspector.UIString('Event Log'), eventsView);
this._rangeDetailViews.set(tabIds.Events, eventsView);
this.addEventListener(WebInspector.TabbedPane.Events.TabSelected, this._tabSelected, this);
-};
-
-WebInspector.TimelineDetailsView.prototype = {
- /**
- * @param {!Node} node
- */
- setContent: function(node)
- {
- var allTabs = this.otherTabs(WebInspector.TimelinePanel.DetailsTab.Details);
- for (var i = 0; i < allTabs.length; ++i) {
- if (!this._rangeDetailViews.has(allTabs[i]))
- this.closeTab(allTabs[i]);
- }
- this._defaultDetailsContentElement.removeChildren();
- this._defaultDetailsContentElement.appendChild(node);
- },
-
- /**
- * @param {!WebInspector.TimelineSelection} selection
- */
- updateContents: function(selection)
- {
- this._selection = selection;
- var view = this.selectedTabId ? this._rangeDetailViews.get(this.selectedTabId) : null;
- if (view)
- view.updateContents(selection);
- },
-
- /**
- * @override
- * @param {string} id
- * @param {string} tabTitle
- * @param {!WebInspector.Widget} view
- * @param {string=} tabTooltip
- * @param {boolean=} userGesture
- * @param {boolean=} isCloseable
- */
- appendTab: function(id, tabTitle, view, tabTooltip, userGesture, isCloseable)
- {
- WebInspector.TabbedPane.prototype.appendTab.call(this, id, tabTitle, view, tabTooltip, userGesture, isCloseable);
- if (this._preferredTabId !== this.selectedTabId)
- this.selectTab(id);
- },
-
- /**
- * @param {string} tabId
- */
- setPreferredTab: function(tabId)
- {
- this._preferredTabId = tabId;
- },
-
- /**
- * @param {!WebInspector.Event} event
- */
- _tabSelected: function(event)
- {
- if (!event.data.isUserGesture)
- return;
- this.setPreferredTab(event.data.tabId);
- this.updateContents(this._selection);
- },
-
- __proto__: WebInspector.TabbedPane.prototype
+ }
+
+ /**
+ * @param {!Node} node
+ */
+ setContent(node) {
+ var allTabs = this.otherTabs(WebInspector.TimelinePanel.DetailsTab.Details);
+ for (var i = 0; i < allTabs.length; ++i) {
+ if (!this._rangeDetailViews.has(allTabs[i]))
+ this.closeTab(allTabs[i]);
+ }
+ this._defaultDetailsContentElement.removeChildren();
+ this._defaultDetailsContentElement.appendChild(node);
+ }
+
+ /**
+ * @param {!WebInspector.TimelineSelection} selection
+ */
+ updateContents(selection) {
+ this._selection = selection;
+ var view = this.selectedTabId ? this._rangeDetailViews.get(this.selectedTabId) : null;
+ if (view)
+ view.updateContents(selection);
+ }
+
+ /**
+ * @override
+ * @param {string} id
+ * @param {string} tabTitle
+ * @param {!WebInspector.Widget} view
+ * @param {string=} tabTooltip
+ * @param {boolean=} userGesture
+ * @param {boolean=} isCloseable
+ */
+ appendTab(id, tabTitle, view, tabTooltip, userGesture, isCloseable) {
+ super.appendTab(id, tabTitle, view, tabTooltip, userGesture, isCloseable);
+ if (this._preferredTabId !== this.selectedTabId)
+ this.selectTab(id);
+ }
+
+ /**
+ * @param {string} tabId
+ */
+ setPreferredTab(tabId) {
+ this._preferredTabId = tabId;
+ }
+
+ /**
+ * @param {!WebInspector.Event} event
+ */
+ _tabSelected(event) {
+ if (!event.data.isUserGesture)
+ return;
+ this.setPreferredTab(event.data.tabId);
+ this.updateContents(this._selection);
+ }
};
/**
- * @constructor
- * @param {!WebInspector.TimelineSelection.Type} type
- * @param {number} startTime
- * @param {number} endTime
- * @param {!Object=} object
+ * @unrestricted
*/
-WebInspector.TimelineSelection = function(type, startTime, endTime, object)
-{
+WebInspector.TimelineSelection = class {
+ /**
+ * @param {!WebInspector.TimelineSelection.Type} type
+ * @param {number} startTime
+ * @param {number} endTime
+ * @param {!Object=} object
+ */
+ constructor(type, startTime, endTime, object) {
this._type = type;
this._startTime = startTime;
this._endTime = endTime;
this._object = object || null;
-};
+ }
-/**
- * @enum {string}
- */
-WebInspector.TimelineSelection.Type = {
- Frame: "Frame",
- NetworkRequest: "NetworkRequest",
- TraceEvent: "TraceEvent",
- Range: "Range"
-};
-
-/**
- * @param {!WebInspector.TimelineFrame} frame
- * @return {!WebInspector.TimelineSelection}
- */
-WebInspector.TimelineSelection.fromFrame = function(frame)
-{
+ /**
+ * @param {!WebInspector.TimelineFrame} frame
+ * @return {!WebInspector.TimelineSelection}
+ */
+ static fromFrame(frame) {
return new WebInspector.TimelineSelection(
- WebInspector.TimelineSelection.Type.Frame,
- frame.startTime, frame.endTime,
- frame);
-};
-
-/**
- * @param {!WebInspector.TimelineModel.NetworkRequest} request
- * @return {!WebInspector.TimelineSelection}
- */
-WebInspector.TimelineSelection.fromNetworkRequest = function(request)
-{
+ WebInspector.TimelineSelection.Type.Frame, frame.startTime, frame.endTime, frame);
+ }
+
+ /**
+ * @param {!WebInspector.TimelineModel.NetworkRequest} request
+ * @return {!WebInspector.TimelineSelection}
+ */
+ static fromNetworkRequest(request) {
return new WebInspector.TimelineSelection(
- WebInspector.TimelineSelection.Type.NetworkRequest,
- request.startTime, request.endTime || request.startTime,
+ WebInspector.TimelineSelection.Type.NetworkRequest, request.startTime, request.endTime || request.startTime,
request);
-};
+ }
-/**
- * @param {!WebInspector.TracingModel.Event} event
- * @return {!WebInspector.TimelineSelection}
- */
-WebInspector.TimelineSelection.fromTraceEvent = function(event)
-{
+ /**
+ * @param {!WebInspector.TracingModel.Event} event
+ * @return {!WebInspector.TimelineSelection}
+ */
+ static fromTraceEvent(event) {
return new WebInspector.TimelineSelection(
- WebInspector.TimelineSelection.Type.TraceEvent,
- event.startTime, event.endTime || (event.startTime + 1),
- event);
+ WebInspector.TimelineSelection.Type.TraceEvent, event.startTime, event.endTime || (event.startTime + 1), event);
+ }
+
+ /**
+ * @param {number} startTime
+ * @param {number} endTime
+ * @return {!WebInspector.TimelineSelection}
+ */
+ static fromRange(startTime, endTime) {
+ return new WebInspector.TimelineSelection(WebInspector.TimelineSelection.Type.Range, startTime, endTime);
+ }
+
+ /**
+ * @return {!WebInspector.TimelineSelection.Type}
+ */
+ type() {
+ return this._type;
+ }
+
+ /**
+ * @return {?Object}
+ */
+ object() {
+ return this._object;
+ }
+
+ /**
+ * @return {number}
+ */
+ startTime() {
+ return this._startTime;
+ }
+
+ /**
+ * @return {number}
+ */
+ endTime() {
+ return this._endTime;
+ }
};
/**
- * @param {number} startTime
- * @param {number} endTime
- * @return {!WebInspector.TimelineSelection}
+ * @enum {string}
*/
-WebInspector.TimelineSelection.fromRange = function(startTime, endTime)
-{
- return new WebInspector.TimelineSelection(
- WebInspector.TimelineSelection.Type.Range,
- startTime, endTime);
+WebInspector.TimelineSelection.Type = {
+ Frame: 'Frame',
+ NetworkRequest: 'NetworkRequest',
+ TraceEvent: 'TraceEvent',
+ Range: 'Range'
};
-WebInspector.TimelineSelection.prototype = {
- /**
- * @return {!WebInspector.TimelineSelection.Type}
- */
- type: function()
- {
- return this._type;
- },
-
- /**
- * @return {?Object}
- */
- object: function()
- {
- return this._object;
- },
-
- /**
- * @return {number}
- */
- startTime: function()
- {
- return this._startTime;
- },
-
- /**
- * @return {number}
- */
- endTime: function()
- {
- return this._endTime;
- }
-};
/**
* @interface
* @extends {WebInspector.EventTarget}
*/
-WebInspector.TimelineModeView = function()
-{
-};
+WebInspector.TimelineModeView = function() {};
WebInspector.TimelineModeView.prototype = {
- /**
- * @return {!WebInspector.Widget}
- */
- view: function() {},
-
- dispose: function() {},
-
- /**
- * @return {?Element}
- */
- resizerElement: function() {},
-
- reset: function() {},
-
- refreshRecords: function() {},
-
- /**
- * @param {?WebInspector.TracingModel.Event} event
- * @param {string=} regex
- * @param {boolean=} select
- */
- highlightSearchResult: function(event, regex, select) {},
-
- /**
- * @param {number} startTime
- * @param {number} endTime
- */
- setWindowTimes: function(startTime, endTime) {},
-
- /**
- * @param {?WebInspector.TimelineSelection} selection
- */
- setSelection: function(selection) {},
-
- /**
- * @param {?WebInspector.TracingModel.Event} event
- */
- highlightEvent: function(event) { }
+ /**
+ * @return {!WebInspector.Widget}
+ */
+ view: function() {},
+
+ dispose: function() {},
+
+ /**
+ * @return {?Element}
+ */
+ resizerElement: function() {},
+
+ reset: function() {},
+
+ refreshRecords: function() {},
+
+ /**
+ * @param {?WebInspector.TracingModel.Event} event
+ * @param {string=} regex
+ * @param {boolean=} select
+ */
+ highlightSearchResult: function(event, regex, select) {},
+
+ /**
+ * @param {number} startTime
+ * @param {number} endTime
+ */
+ setWindowTimes: function(startTime, endTime) {},
+
+ /**
+ * @param {?WebInspector.TimelineSelection} selection
+ */
+ setSelection: function(selection) {},
+
+ /**
+ * @param {?WebInspector.TracingModel.Event} event
+ */
+ highlightEvent: function(event) {}
};
/**
@@ -1574,300 +1526,256 @@ WebInspector.TimelineModeView.prototype = {
WebInspector.TimelineModeViewDelegate = function() {};
WebInspector.TimelineModeViewDelegate.prototype = {
- /**
- * @param {number} startTime
- * @param {number} endTime
- */
- requestWindowTimes: function(startTime, endTime) {},
-
- /**
- * @param {?WebInspector.TimelineSelection} selection
- * @param {!WebInspector.TimelinePanel.DetailsTab=} preferredTab
- */
- select: function(selection, preferredTab) {},
-
- /**
- * @param {number} time
- */
- selectEntryAtTime: function(time) {},
-
- /**
- * @param {!Node} node
- */
- showInDetails: function(node) {},
-
- /**
- * @param {?WebInspector.TracingModel.Event} event
- */
- highlightEvent: function(event) {}
+ /**
+ * @param {number} startTime
+ * @param {number} endTime
+ */
+ requestWindowTimes: function(startTime, endTime) {},
+
+ /**
+ * @param {?WebInspector.TimelineSelection} selection
+ * @param {!WebInspector.TimelinePanel.DetailsTab=} preferredTab
+ */
+ select: function(selection, preferredTab) {},
+
+ /**
+ * @param {number} time
+ */
+ selectEntryAtTime: function(time) {},
+
+ /**
+ * @param {!Node} node
+ */
+ showInDetails: function(node) {},
+
+ /**
+ * @param {?WebInspector.TracingModel.Event} event
+ */
+ highlightEvent: function(event) {}
};
/**
- * @constructor
- * @extends {WebInspector.TimelineModel.Filter}
+ * @unrestricted
*/
-WebInspector.TimelineCategoryFilter = function()
-{
- WebInspector.TimelineModel.Filter.call(this);
-};
-
-WebInspector.TimelineCategoryFilter.prototype = {
- /**
- * @override
- * @param {!WebInspector.TracingModel.Event} event
- * @return {boolean}
- */
- accept: function(event)
- {
- return !WebInspector.TimelineUIUtils.eventStyle(event).category.hidden;
- },
-
- __proto__: WebInspector.TimelineModel.Filter.prototype
+WebInspector.TimelineCategoryFilter = class extends WebInspector.TimelineModel.Filter {
+ constructor() {
+ super();
+ }
+
+ /**
+ * @override
+ * @param {!WebInspector.TracingModel.Event} event
+ * @return {boolean}
+ */
+ accept(event) {
+ return !WebInspector.TimelineUIUtils.eventStyle(event).category.hidden;
+ }
};
/**
- * @constructor
- * @extends {WebInspector.TimelineModel.Filter}
+ * @unrestricted
*/
-WebInspector.TimelineIsLongFilter = function()
-{
- WebInspector.TimelineModel.Filter.call(this);
+WebInspector.TimelineIsLongFilter = class extends WebInspector.TimelineModel.Filter {
+ constructor() {
+ super();
this._minimumRecordDuration = 0;
-};
-
-WebInspector.TimelineIsLongFilter.prototype = {
- /**
- * @param {number} value
- */
- setMinimumRecordDuration: function(value)
- {
- this._minimumRecordDuration = value;
- },
-
- /**
- * @override
- * @param {!WebInspector.TracingModel.Event} event
- * @return {boolean}
- */
- accept: function(event)
- {
- var duration = event.endTime ? event.endTime - event.startTime : 0;
- return duration >= this._minimumRecordDuration;
- },
-
- __proto__: WebInspector.TimelineModel.Filter.prototype
-
+ }
+
+ /**
+ * @param {number} value
+ */
+ setMinimumRecordDuration(value) {
+ this._minimumRecordDuration = value;
+ }
+
+ /**
+ * @override
+ * @param {!WebInspector.TracingModel.Event} event
+ * @return {boolean}
+ */
+ accept(event) {
+ var duration = event.endTime ? event.endTime - event.startTime : 0;
+ return duration >= this._minimumRecordDuration;
+ }
};
/**
- * @constructor
- * @extends {WebInspector.TimelineModel.Filter}
- * @param {!RegExp=} regExp
+ * @unrestricted
*/
-WebInspector.TimelineTextFilter = function(regExp)
-{
- WebInspector.TimelineModel.Filter.call(this);
+WebInspector.TimelineTextFilter = class extends WebInspector.TimelineModel.Filter {
+ /**
+ * @param {!RegExp=} regExp
+ */
+ constructor(regExp) {
+ super();
this._setRegExp(regExp || null);
-};
-
-WebInspector.TimelineTextFilter.prototype = {
- /**
- * @param {?RegExp} regExp
- */
- _setRegExp: function(regExp)
- {
- this._regExp = regExp;
- },
-
- /**
- * @override
- * @param {!WebInspector.TracingModel.Event} event
- * @return {boolean}
- */
- accept: function(event)
- {
- return !this._regExp || WebInspector.TimelineUIUtils.testContentMatching(event, this._regExp);
- },
-
- __proto__: WebInspector.TimelineModel.Filter.prototype
+ }
+
+ /**
+ * @param {?RegExp} regExp
+ */
+ _setRegExp(regExp) {
+ this._regExp = regExp;
+ }
+
+ /**
+ * @override
+ * @param {!WebInspector.TracingModel.Event} event
+ * @return {boolean}
+ */
+ accept(event) {
+ return !this._regExp || WebInspector.TimelineUIUtils.testContentMatching(event, this._regExp);
+ }
};
/**
- * @constructor
- * @extends {WebInspector.VBox}
- * @param {boolean} showTimer
- * @param {function()} stopCallback
+ * @unrestricted
*/
-WebInspector.TimelinePanel.StatusPane = function(showTimer, stopCallback)
-{
- WebInspector.VBox.call(this, true);
- this.registerRequiredCSS("timeline/timelineStatusDialog.css");
- this.contentElement.classList.add("timeline-status-dialog");
-
- var statusLine = this.contentElement.createChild("div", "status-dialog-line status");
- statusLine.createChild("div", "label").textContent = WebInspector.UIString("Status");
- this._status = statusLine.createChild("div", "content");
+WebInspector.TimelinePanel.StatusPane = class extends WebInspector.VBox {
+ /**
+ * @param {boolean} showTimer
+ * @param {function()} stopCallback
+ */
+ constructor(showTimer, stopCallback) {
+ super(true);
+ this.registerRequiredCSS('timeline/timelineStatusDialog.css');
+ this.contentElement.classList.add('timeline-status-dialog');
+
+ var statusLine = this.contentElement.createChild('div', 'status-dialog-line status');
+ statusLine.createChild('div', 'label').textContent = WebInspector.UIString('Status');
+ this._status = statusLine.createChild('div', 'content');
if (showTimer) {
- var timeLine = this.contentElement.createChild("div", "status-dialog-line time");
- timeLine.createChild("div", "label").textContent = WebInspector.UIString("Time");
- this._time = timeLine.createChild("div", "content");
+ var timeLine = this.contentElement.createChild('div', 'status-dialog-line time');
+ timeLine.createChild('div', 'label').textContent = WebInspector.UIString('Time');
+ this._time = timeLine.createChild('div', 'content');
}
- var progressLine = this.contentElement.createChild("div", "status-dialog-line progress");
- this._progressLabel = progressLine.createChild("div", "label");
- this._progressBar = progressLine.createChild("div", "indicator-container").createChild("div", "indicator");
-
- this._stopButton = createTextButton(WebInspector.UIString("Stop"), stopCallback);
- this.contentElement.createChild("div", "stop-button").appendChild(this._stopButton);
+ var progressLine = this.contentElement.createChild('div', 'status-dialog-line progress');
+ this._progressLabel = progressLine.createChild('div', 'label');
+ this._progressBar = progressLine.createChild('div', 'indicator-container').createChild('div', 'indicator');
+
+ this._stopButton = createTextButton(WebInspector.UIString('Stop'), stopCallback);
+ this.contentElement.createChild('div', 'stop-button').appendChild(this._stopButton);
+ }
+
+ finish() {
+ this._stopTimer();
+ this._stopButton.disabled = true;
+ }
+
+ hide() {
+ this.element.parentNode.classList.remove('tinted');
+ this.element.remove();
+ }
+
+ /**
+ * @param {!Element} parent
+ */
+ showPane(parent) {
+ this.show(parent);
+ parent.classList.add('tinted');
+ }
+
+ /**
+ * @param {string} text
+ */
+ updateStatus(text) {
+ this._status.textContent = text;
+ }
+
+ /**
+ * @param {string} activity
+ * @param {number} percent
+ */
+ updateProgressBar(activity, percent) {
+ this._progressLabel.textContent = activity;
+ this._progressBar.style.width = percent.toFixed(1) + '%';
+ this._updateTimer();
+ }
+
+ startTimer() {
+ this._startTime = Date.now();
+ this._timeUpdateTimer = setInterval(this._updateTimer.bind(this, false), 1000);
+ this._updateTimer();
+ }
+
+ _stopTimer() {
+ if (!this._timeUpdateTimer)
+ return;
+ clearInterval(this._timeUpdateTimer);
+ this._updateTimer(true);
+ delete this._timeUpdateTimer;
+ }
+
+ /**
+ * @param {boolean=} precise
+ */
+ _updateTimer(precise) {
+ if (!this._timeUpdateTimer)
+ return;
+ var elapsed = (Date.now() - this._startTime) / 1000;
+ this._time.textContent = WebInspector.UIString('%s\u2009sec', elapsed.toFixed(precise ? 1 : 0));
+ }
};
-WebInspector.TimelinePanel.StatusPane.prototype = {
- finish: function()
- {
- this._stopTimer();
- this._stopButton.disabled = true;
- },
-
- hide: function()
- {
- this.element.parentNode.classList.remove("tinted");
- this.element.remove();
- },
-
- /**
- * @param {!Element} parent
- */
- showPane: function(parent)
- {
- this.show(parent);
- parent.classList.add("tinted");
- },
-
- /**
- * @param {string} text
- */
- updateStatus: function(text)
- {
- this._status.textContent = text;
- },
-
- /**
- * @param {string} activity
- * @param {number} percent
- */
- updateProgressBar: function(activity, percent)
- {
- this._progressLabel.textContent = activity;
- this._progressBar.style.width = percent.toFixed(1) + "%";
- this._updateTimer();
- },
-
- startTimer: function()
- {
- this._startTime = Date.now();
- this._timeUpdateTimer = setInterval(this._updateTimer.bind(this, false), 1000);
- this._updateTimer();
- },
-
- _stopTimer: function()
- {
- if (!this._timeUpdateTimer)
- return;
- clearInterval(this._timeUpdateTimer);
- this._updateTimer(true);
- delete this._timeUpdateTimer;
- },
-
- /**
- * @param {boolean=} precise
- */
- _updateTimer: function(precise)
- {
- if (!this._timeUpdateTimer)
- return;
- var elapsed = (Date.now() - this._startTime) / 1000;
- this._time.textContent = WebInspector.UIString("%s\u2009sec", elapsed.toFixed(precise ? 1 : 0));
- },
-
- __proto__: WebInspector.VBox.prototype
-};
-
-/**
- * @return {!WebInspector.TimelinePanel}
- */
-WebInspector.TimelinePanel.instance = function()
-{
- return /** @type {!WebInspector.TimelinePanel} */ (self.runtime.sharedInstance(WebInspector.TimelinePanel));
-};
/**
- * @constructor
* @implements {WebInspector.QueryParamHandler}
+ * @unrestricted
*/
-WebInspector.LoadTimelineHandler = function()
-{
-};
-
-WebInspector.LoadTimelineHandler.prototype = {
- /**
- * @override
- * @param {string} value
- */
- handleQueryParam: function(value)
- {
- WebInspector.viewManager.showView("timeline").then(() => {
- WebInspector.TimelinePanel.instance()._loadFromURL(window.decodeURIComponent(value));
- });
- }
+WebInspector.LoadTimelineHandler = class {
+ /**
+ * @override
+ * @param {string} value
+ */
+ handleQueryParam(value) {
+ WebInspector.viewManager.showView('timeline').then(() => {
+ WebInspector.TimelinePanel.instance()._loadFromURL(window.decodeURIComponent(value));
+ });
+ }
};
/**
- * @constructor
* @implements {WebInspector.ActionDelegate}
+ * @unrestricted
*/
-WebInspector.TimelinePanel.ActionDelegate = function()
-{
-};
-
-WebInspector.TimelinePanel.ActionDelegate.prototype = {
- /**
- * @override
- * @param {!WebInspector.Context} context
- * @param {string} actionId
- * @return {boolean}
- */
- handleAction: function(context, actionId)
- {
- var panel = WebInspector.context.flavor(WebInspector.TimelinePanel);
- console.assert(panel && panel instanceof WebInspector.TimelinePanel);
- switch (actionId) {
- case "timeline.toggle-recording":
- panel._toggleRecording();
- return true;
- case "timeline.save-to-file":
- panel._saveToFile();
- return true;
- case "timeline.load-from-file":
- panel._selectFileToLoad();
- return true;
- case "timeline.jump-to-previous-frame":
- panel._jumpToFrame(-1);
- return true;
- case "timeline.jump-to-next-frame":
- panel._jumpToFrame(1);
- return true;
- }
- return false;
+WebInspector.TimelinePanel.ActionDelegate = class {
+ /**
+ * @override
+ * @param {!WebInspector.Context} context
+ * @param {string} actionId
+ * @return {boolean}
+ */
+ handleAction(context, actionId) {
+ var panel = WebInspector.context.flavor(WebInspector.TimelinePanel);
+ console.assert(panel && panel instanceof WebInspector.TimelinePanel);
+ switch (actionId) {
+ case 'timeline.toggle-recording':
+ panel._toggleRecording();
+ return true;
+ case 'timeline.save-to-file':
+ panel._saveToFile();
+ return true;
+ case 'timeline.load-from-file':
+ panel._selectFileToLoad();
+ return true;
+ case 'timeline.jump-to-previous-frame':
+ panel._jumpToFrame(-1);
+ return true;
+ case 'timeline.jump-to-next-frame':
+ panel._jumpToFrame(1);
+ return true;
}
+ return false;
+ }
};
/**
- * @constructor
- * @extends {WebInspector.Object}
+ * @unrestricted
*/
-WebInspector.TimelineFilters = function()
-{
- WebInspector.Object.call(this);
+WebInspector.TimelineFilters = class extends WebInspector.Object {
+ constructor() {
+ super();
this._categoryFilter = new WebInspector.TimelineCategoryFilter();
this._durationFilter = new WebInspector.TimelineIsLongFilter();
@@ -1875,248 +1783,225 @@ WebInspector.TimelineFilters = function()
this._filters = [this._categoryFilter, this._durationFilter, this._textFilter];
this._createFilterBar();
-};
-
-/** @enum {symbol} */
-WebInspector.TimelineFilters.Events = {
- FilterChanged: Symbol("FilterChanged")
-};
-
-WebInspector.TimelineFilters._durationFilterPresetsMs = [0, 1, 15];
-
-WebInspector.TimelineFilters.prototype = {
- /**
- * @return {!Array<!WebInspector.TimelineModel.Filter>}
- */
- filters: function()
- {
- return this._filters;
- },
+ }
+
+ /**
+ * @return {!Array<!WebInspector.TimelineModel.Filter>}
+ */
+ filters() {
+ return this._filters;
+ }
+
+ /**
+ * @return {?RegExp}
+ */
+ searchRegExp() {
+ return this._textFilter._regExp;
+ }
+
+ /**
+ * @return {!WebInspector.ToolbarItem}
+ */
+ filterButton() {
+ return this._filterBar.filterButton();
+ }
+
+ /**
+ * @return {!WebInspector.Widget}
+ */
+ filtersWidget() {
+ return this._filterBar;
+ }
+
+ _createFilterBar() {
+ this._filterBar = new WebInspector.FilterBar('timelinePanel');
+
+ this._textFilterUI = new WebInspector.TextFilterUI();
+ this._textFilterUI.addEventListener(WebInspector.FilterUI.Events.FilterChanged, textFilterChanged, this);
+ this._filterBar.addFilter(this._textFilterUI);
+
+ var durationOptions = [];
+ for (var durationMs of WebInspector.TimelineFilters._durationFilterPresetsMs) {
+ var durationOption = {};
+ if (!durationMs) {
+ durationOption.label = WebInspector.UIString('All');
+ durationOption.title = WebInspector.UIString('Show all records');
+ } else {
+ durationOption.label = WebInspector.UIString('\u2265 %dms', durationMs);
+ durationOption.title = WebInspector.UIString('Hide records shorter than %dms', durationMs);
+ }
+ durationOption.value = durationMs;
+ durationOptions.push(durationOption);
+ }
+ var durationFilterUI = new WebInspector.ComboBoxFilterUI(durationOptions);
+ durationFilterUI.addEventListener(WebInspector.FilterUI.Events.FilterChanged, durationFilterChanged, this);
+ this._filterBar.addFilter(durationFilterUI);
+
+ var categoryFiltersUI = {};
+ var categories = WebInspector.TimelineUIUtils.categories();
+ for (var categoryName in categories) {
+ var category = categories[categoryName];
+ if (!category.visible)
+ continue;
+ var filter = new WebInspector.CheckboxFilterUI(category.name, category.title);
+ filter.setColor(category.color, 'rgba(0, 0, 0, 0.2)');
+ categoryFiltersUI[category.name] = filter;
+ filter.addEventListener(
+ WebInspector.FilterUI.Events.FilterChanged, categoriesFilterChanged.bind(this, categoryName));
+ this._filterBar.addFilter(filter);
+ }
+ return this._filterBar;
/**
- * @return {?RegExp}
+ * @this {WebInspector.TimelineFilters}
*/
- searchRegExp: function()
- {
- return this._textFilter._regExp;
- },
+ function textFilterChanged() {
+ var searchQuery = this._textFilterUI.value();
+ this._textFilter._setRegExp(searchQuery ? createPlainTextSearchRegex(searchQuery, 'i') : null);
+ this._notifyFiltersChanged();
+ }
/**
- * @return {!WebInspector.ToolbarItem}
+ * @this {WebInspector.TimelineFilters}
*/
- filterButton: function()
- {
- return this._filterBar.filterButton();
- },
+ function durationFilterChanged() {
+ var duration = durationFilterUI.value();
+ var minimumRecordDuration = parseInt(duration, 10);
+ this._durationFilter.setMinimumRecordDuration(minimumRecordDuration);
+ this._notifyFiltersChanged();
+ }
/**
- * @return {!WebInspector.Widget}
+ * @param {string} name
+ * @this {WebInspector.TimelineFilters}
*/
- filtersWidget: function()
- {
- return this._filterBar;
- },
-
- _createFilterBar: function()
- {
- this._filterBar = new WebInspector.FilterBar("timelinePanel");
-
- this._textFilterUI = new WebInspector.TextFilterUI();
- this._textFilterUI.addEventListener(WebInspector.FilterUI.Events.FilterChanged, textFilterChanged, this);
- this._filterBar.addFilter(this._textFilterUI);
-
- var durationOptions = [];
- for (var durationMs of WebInspector.TimelineFilters._durationFilterPresetsMs) {
- var durationOption = {};
- if (!durationMs) {
- durationOption.label = WebInspector.UIString("All");
- durationOption.title = WebInspector.UIString("Show all records");
- } else {
- durationOption.label = WebInspector.UIString("\u2265 %dms", durationMs);
- durationOption.title = WebInspector.UIString("Hide records shorter than %dms", durationMs);
- }
- durationOption.value = durationMs;
- durationOptions.push(durationOption);
- }
- var durationFilterUI = new WebInspector.ComboBoxFilterUI(durationOptions);
- durationFilterUI.addEventListener(WebInspector.FilterUI.Events.FilterChanged, durationFilterChanged, this);
- this._filterBar.addFilter(durationFilterUI);
-
- var categoryFiltersUI = {};
- var categories = WebInspector.TimelineUIUtils.categories();
- for (var categoryName in categories) {
- var category = categories[categoryName];
- if (!category.visible)
- continue;
- var filter = new WebInspector.CheckboxFilterUI(category.name, category.title);
- filter.setColor(category.color, "rgba(0, 0, 0, 0.2)");
- categoryFiltersUI[category.name] = filter;
- filter.addEventListener(WebInspector.FilterUI.Events.FilterChanged, categoriesFilterChanged.bind(this, categoryName));
- this._filterBar.addFilter(filter);
- }
- return this._filterBar;
-
- /**
- * @this {WebInspector.TimelineFilters}
- */
- function textFilterChanged()
- {
- var searchQuery = this._textFilterUI.value();
- this._textFilter._setRegExp(searchQuery ? createPlainTextSearchRegex(searchQuery, "i") : null);
- this._notifyFiltersChanged();
- }
-
- /**
- * @this {WebInspector.TimelineFilters}
- */
- function durationFilterChanged()
- {
- var duration = durationFilterUI.value();
- var minimumRecordDuration = parseInt(duration, 10);
- this._durationFilter.setMinimumRecordDuration(minimumRecordDuration);
- this._notifyFiltersChanged();
- }
-
- /**
- * @param {string} name
- * @this {WebInspector.TimelineFilters}
- */
- function categoriesFilterChanged(name)
- {
- var categories = WebInspector.TimelineUIUtils.categories();
- categories[name].hidden = !categoryFiltersUI[name].checked();
- this._notifyFiltersChanged();
- }
- },
+ function categoriesFilterChanged(name) {
+ var categories = WebInspector.TimelineUIUtils.categories();
+ categories[name].hidden = !categoryFiltersUI[name].checked();
+ this._notifyFiltersChanged();
+ }
+ }
- _notifyFiltersChanged: function()
- {
- this.dispatchEventToListeners(WebInspector.TimelineFilters.Events.FilterChanged);
- },
+ _notifyFiltersChanged() {
+ this.dispatchEventToListeners(WebInspector.TimelineFilters.Events.FilterChanged);
+ }
+};
- __proto__: WebInspector.Object.prototype
+/** @enum {symbol} */
+WebInspector.TimelineFilters.Events = {
+ FilterChanged: Symbol('FilterChanged')
};
+WebInspector.TimelineFilters._durationFilterPresetsMs = [0, 1, 15];
+
/**
- * @constructor
- * @extends {WebInspector.Object}
* @implements {WebInspector.TargetManager.Observer}
+ * @unrestricted
*/
-WebInspector.CPUThrottlingManager = function()
-{
+WebInspector.CPUThrottlingManager = class extends WebInspector.Object {
+ constructor() {
+ super();
this._targets = [];
- this._throttlingRate = 1.; // No throttling
+ this._throttlingRate = 1.; // No throttling
WebInspector.targetManager.observeTargets(this, WebInspector.Target.Capability.Browser);
-};
-
-WebInspector.CPUThrottlingManager.prototype = {
- /**
- * @param {number} value
- */
- setRate: function(value)
- {
- this._throttlingRate = value;
- this._targets.forEach(target => target.emulationAgent().setCPUThrottlingRate(value));
- if (value !== 1)
- WebInspector.inspectorView.setPanelIcon("timeline", "warning-icon", WebInspector.UIString("CPU throttling is enabled"));
- else
- WebInspector.inspectorView.setPanelIcon("timeline", "", "");
- },
-
- /**
- * @return {number}
- */
- rate: function()
- {
- return this._throttlingRate;
- },
-
- /**
- * @override
- * @param {!WebInspector.Target} target
- */
- targetAdded: function(target)
- {
- this._targets.push(target);
- target.emulationAgent().setCPUThrottlingRate(this._throttlingRate);
- },
-
- /**
- * @override
- * @param {!WebInspector.Target} target
- */
- targetRemoved: function(target)
- {
- this._targets.remove(target, true);
- },
-
- __proto__: WebInspector.Object.prototype
+ }
+
+ /**
+ * @param {number} value
+ */
+ setRate(value) {
+ this._throttlingRate = value;
+ this._targets.forEach(target => target.emulationAgent().setCPUThrottlingRate(value));
+ if (value !== 1)
+ WebInspector.inspectorView.setPanelIcon(
+ 'timeline', 'warning-icon', WebInspector.UIString('CPU throttling is enabled'));
+ else
+ WebInspector.inspectorView.setPanelIcon('timeline', '', '');
+ }
+
+ /**
+ * @return {number}
+ */
+ rate() {
+ return this._throttlingRate;
+ }
+
+ /**
+ * @override
+ * @param {!WebInspector.Target} target
+ */
+ targetAdded(target) {
+ this._targets.push(target);
+ target.emulationAgent().setCPUThrottlingRate(this._throttlingRate);
+ }
+
+ /**
+ * @override
+ * @param {!WebInspector.Target} target
+ */
+ targetRemoved(target) {
+ this._targets.remove(target, true);
+ }
};
/**
- * @constructor
- * @extends {WebInspector.HBox}
+ * @unrestricted
*/
-WebInspector.TimelinePanel.CustomCPUThrottlingRateDialog = function()
-{
- WebInspector.HBox.call(this, true);
- this.registerRequiredCSS("ui_lazy/dialog.css");
- this.contentElement.createChild("label").textContent = WebInspector.UIString("CPU Slowdown Rate: ");
+WebInspector.TimelinePanel.CustomCPUThrottlingRateDialog = class extends WebInspector.HBox {
+ constructor() {
+ super(true);
+ this.registerRequiredCSS('ui_lazy/dialog.css');
+ this.contentElement.createChild('label').textContent = WebInspector.UIString('CPU Slowdown Rate: ');
- this._input = this.contentElement.createChild("input");
- this._input.setAttribute("type", "text");
- this._input.style.width = "64px";
- this._input.addEventListener("keydown", this._onKeyDown.bind(this), false);
+ this._input = this.contentElement.createChild('input');
+ this._input.setAttribute('type', 'text');
+ this._input.style.width = '64px';
+ this._input.addEventListener('keydown', this._onKeyDown.bind(this), false);
- var addButton = this.contentElement.createChild("button");
- addButton.textContent = WebInspector.UIString("Set");
- addButton.addEventListener("click", this._apply.bind(this), false);
+ var addButton = this.contentElement.createChild('button');
+ addButton.textContent = WebInspector.UIString('Set');
+ addButton.addEventListener('click', this._apply.bind(this), false);
this.setDefaultFocusedElement(this._input);
this.contentElement.tabIndex = 0;
this._resultPromise = new Promise(fulfill => this._callback = fulfill);
-};
+ }
-/**
- * @param {!Element=} anchor
- * @return {!Promise<string>}
- */
-WebInspector.TimelinePanel.CustomCPUThrottlingRateDialog.show = function(anchor)
-{
+ /**
+ * @param {!Element=} anchor
+ * @return {!Promise<string>}
+ */
+ static show(anchor) {
var dialog = new WebInspector.Dialog();
var dialogContent = new WebInspector.TimelinePanel.CustomCPUThrottlingRateDialog();
dialogContent.show(dialog.element);
dialog.setWrapsContent(true);
if (anchor)
- dialog.setPosition(anchor.totalOffsetLeft() - 32, anchor.totalOffsetTop() + anchor.offsetHeight);
+ dialog.setPosition(anchor.totalOffsetLeft() - 32, anchor.totalOffsetTop() + anchor.offsetHeight);
dialog.show();
return dialogContent.result().then(value => (dialog.detach(), value));
+ }
+
+ /**
+ * @return {!Promise<string>}
+ */
+ result() {
+ return this._resultPromise;
+ }
+
+ _apply() {
+ this._callback(this._input.value);
+ }
+
+ /**
+ * @param {!Event} event
+ */
+ _onKeyDown(event) {
+ if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Enter.code) {
+ event.preventDefault();
+ this._apply();
+ }
+ }
};
-WebInspector.TimelinePanel.CustomCPUThrottlingRateDialog.prototype = {
- /**
- * @return {!Promise<string>}
- */
- result: function()
- {
- return this._resultPromise;
- },
- _apply: function()
- {
- this._callback(this._input.value);
- },
-
- /**
- * @param {!Event} event
- */
- _onKeyDown: function(event)
- {
- if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Enter.code) {
- event.preventDefault();
- this._apply();
- }
- },
-
- __proto__: WebInspector.HBox.prototype
-};
« no previous file with comments | « third_party/WebKit/Source/devtools/front_end/timeline/TimelinePaintProfilerView.js ('k') | third_party/WebKit/Source/devtools/front_end/timeline/TimelineTreeView.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698