DevTools: reformat front-end code to match chromium style.

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

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  * Copyright (C) 2012 Intel Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
@@ skipping 10 matching lines @@
  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (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();
 
     this._cpuThrottlingManager = new WebInspector.CPUThrottlingManager();
 
     /** @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._panelToolbar = new WebInspector.Toolbar("", this.element);
+    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._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;
+  }
+
+  /**
+   * @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);
+  }
+
+  _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));
+    }
+
+    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() {
+    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() {
+    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();
+      }
+    });
+  }
+
+  /**
+   * @param {boolean} enabled
+   */
+  _setUIControlsEnabled(enabled) {
+    /**
+     * @param {!WebInspector.ToolbarButton} toolbarButton
+     */
+    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();
+
+    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;
+    }
+
+    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;
+    }
+
+    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;
+    }
+
+    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);
+    }
+
+    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);
+        }
+        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;
+    }
+
+    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;
+    }
+    /**
+     * @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.Perspectives = {
-    Load: "Load",
-    Responsiveness: "Responsiveness",
-    Custom: "Custom"
+  Load: 'Load',
+  Responsiveness: 'Responsiveness',
+  Custom: 'Custom'
 };
 
 /**
  * @enum {string}
  */
 WebInspector.TimelinePanel.DetailsTab = {
-    Details: "Details",
-    Events: "Events",
-    CallTree: "CallTree",
-    BottomUp: "BottomUp",
-    PaintProfiler: "PaintProfiler",
-    LayerViewer: "LayerViewer"
+  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")
+  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);
-    },
-
-    /**
-     * @param {!WebInspector.Event} event
-     */
-    _onOverviewSelectionChanged: function(event)
-    {
-        var selection = /** @type {!WebInspector.TimelineSelection} */ (event.data);
-        this.select(selection);
-    },
-
-    /**
-     * @override
-     * @param {number} windowStartTime
-     * @param {number} windowEndTime
-     */
-    requestWindowTimes: function(windowStartTime, windowEndTime)
-    {
-        this._overviewPane.requestWindowTimes(windowStartTime, windowEndTime);
-    },
-
-    /**
-     * @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;
-    },
-
-    /**
-     * @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);
-    },
-
-    _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();
-    },
-
-    /**
-     * @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
-     */
-    _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;
-        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);
-    },
-
-    /**
-     * @override
-     * @param {number=} progress
-     */
-    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);
-        }
-
-        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: function()
-    {
-        this._clearHighlight();
-        delete this._searchResults;
-        delete this._selectedSearchResult;
-        delete this._searchRegex;
-    },
-
-    /**
-     * @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;
-        }
-
-        this._detailsView.updateContents(this._selection);
-    },
-
-    /**
-     * @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;
-        }
-    },
-
-    /**
-     * @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));
-    },
-
-    /**
-     * @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();
-    },
-
-    /**
-     * @override
-     * @param {number} time
-     */
-    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;
-            }
-        }
-        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);
-    },
-
-    /**
-     * @override
-     * @param {!Node} node
-     */
-    showInDetails: function(node)
-    {
-        this._detailsView.setContent(node);
-    },
-
-    /**
-     * @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);
-    },
-
-    __proto__: WebInspector.Panel.prototype
-};
-
 /**
  * @interface
  */
-WebInspector.TimelineLifecycleDelegate = function()
-{
+WebInspector.TimelineLifecycleDelegate = function() {};
+
+WebInspector.TimelineLifecycleDelegate.prototype = {
+  recordingStarted: function() {},
+
+  /**
+   * @param {number} usage
+   */
+  recordingProgress: function(usage) {},
+
+  loadingStarted: function() {},
+
+  /**
+   * @param {number=} progress
+   */
+  loadingProgress: function(progress) {},
+
+  /**
+   * @param {boolean} success
+   */
+  loadingComplete: function(success) {},
 };
 
-WebInspector.TimelineLifecycleDelegate.prototype = {
-    recordingStarted: function() {},
-
-    /**
-     * @param {number} usage
-     */
-    recordingProgress: function(usage) {},
-
-    loadingStarted: function() {},
-
-    /**
-     * @param {number=} progress
-     */
-    loadingProgress: function(progress) {},
-
-    /**
-     * @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);
+  }
+
+  /**
+   * @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);
+  }
 };
 
-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
-};
-
 /**
- * @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;
+  }
+
+  /**
+   * @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}
+   */
+  static fromNetworkRequest(request) {
+    return new WebInspector.TimelineSelection(
+        WebInspector.TimelineSelection.Type.NetworkRequest, request.startTime, request.endTime || request.startTime,
+        request);
+  }
+
+  /**
+   * @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);
+  }
+
+  /**
+   * @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;
+  }
 };
 
 /**
  * @enum {string}
  */
 WebInspector.TimelineSelection.Type = {
-    Frame: "Frame",
-    NetworkRequest: "NetworkRequest",
-    TraceEvent: "TraceEvent",
-    Range: "Range"
+  Frame: 'Frame',
+  NetworkRequest: 'NetworkRequest',
+  TraceEvent: 'TraceEvent',
+  Range: 'Range'
 };
 
-/**
- * @param {!WebInspector.TimelineFrame} frame
- * @return {!WebInspector.TimelineSelection}
- */
-WebInspector.TimelineSelection.fromFrame = function(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)
-{
-    return new WebInspector.TimelineSelection(
-        WebInspector.TimelineSelection.Type.NetworkRequest,
-        request.startTime, request.endTime || request.startTime,
-        request);
-};
-
-/**
- * @param {!WebInspector.TracingModel.Event} event
- * @return {!WebInspector.TimelineSelection}
- */
-WebInspector.TimelineSelection.fromTraceEvent = function(event)
-{
-    return new WebInspector.TimelineSelection(
-        WebInspector.TimelineSelection.Type.TraceEvent,
-        event.startTime, event.endTime || (event.startTime + 1),
-        event);
-};
-
-/**
- * @param {number} startTime
- * @param {number} endTime
- * @return {!WebInspector.TimelineSelection}
- */
-WebInspector.TimelineSelection.fromRange = function(startTime, endTime)
-{
-    return new WebInspector.TimelineSelection(
-        WebInspector.TimelineSelection.Type.Range,
-        startTime, endTime);
-};
-
-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) {}
 };
 
-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) { }
-};
-
 /**
  * @interface
  */
 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) {}
-};
-
-/**
- * @constructor
- * @extends {WebInspector.TimelineModel.Filter}
- */
-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
-};
-
-/**
- * @constructor
- * @extends {WebInspector.TimelineModel.Filter}
- */
-WebInspector.TimelineIsLongFilter = function()
-{
-    WebInspector.TimelineModel.Filter.call(this);
+  /**
+   * @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) {}
+};
+
+/**
+ * @unrestricted
+ */
+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;
+  }
+};
+
+/**
+ * @unrestricted
+ */
+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
-
-};
-
-/**
- * @constructor
- * @extends {WebInspector.TimelineModel.Filter}
- * @param {!RegExp=} regExp
- */
-WebInspector.TimelineTextFilter = function(regExp)
-{
-    WebInspector.TimelineModel.Filter.call(this);
+  }
+
+  /**
+   * @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;
+  }
+};
+
+/**
+ * @unrestricted
+ */
+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
-};
-
-/**
- * @constructor
- * @extends {WebInspector.VBox}
- * @param {boolean} showTimer
- * @param {function()} stopCallback
- */
-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");
+  }
+
+  /**
+   * @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);
+  }
+};
+
+/**
+ * @unrestricted
+ */
+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);
-};
-
-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
+    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));
+  }
+};
+
+
+/**
  * @implements {WebInspector.QueryParamHandler}
- */
-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));
-        });
+ * @unrestricted
+ */
+WebInspector.LoadTimelineHandler = class {
+  /**
+   * @override
+   * @param {string} value
+   */
+  handleQueryParam(value) {
+    WebInspector.viewManager.showView('timeline').then(() => {
+      WebInspector.TimelinePanel.instance()._loadFromURL(window.decodeURIComponent(value));
+    });
+  }
+};
+
+/**
+ * @implements {WebInspector.ActionDelegate}
+ * @unrestricted
+ */
+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;
     }
-};
-
-/**
- * @constructor
- * @implements {WebInspector.ActionDelegate}
- */
-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;
-    }
-};
-
-/**
- * @constructor
- * @extends {WebInspector.Object}
- */
-WebInspector.TimelineFilters = function()
-{
-    WebInspector.Object.call(this);
+    return false;
+  }
+};
+
+/**
+ * @unrestricted
+ */
+WebInspector.TimelineFilters = class extends WebInspector.Object {
+  constructor() {
+    super();
 
     this._categoryFilter = new WebInspector.TimelineCategoryFilter();
     this._durationFilter = new WebInspector.TimelineIsLongFilter();
     this._textFilter = new WebInspector.TimelineTextFilter();
     this._filters = [this._categoryFilter, this._durationFilter, this._textFilter];
 
     this._createFilterBar();
+  }
+
+  /**
+   * @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;
+
+    /**
+     * @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();
+    }
+  }
+
+  _notifyFiltersChanged() {
+    this.dispatchEventToListeners(WebInspector.TimelineFilters.Events.FilterChanged);
+  }
 };
 
 /** @enum {symbol} */
 WebInspector.TimelineFilters.Events = {
-    FilterChanged: Symbol("FilterChanged")
+  FilterChanged: Symbol('FilterChanged')
 };
 
 WebInspector.TimelineFilters._durationFilterPresetsMs = [0, 1, 15];
 
-WebInspector.TimelineFilters.prototype = {
-    /**
-     * @return {!Array<!WebInspector.TimelineModel.Filter>}
-     */
-    filters: function()
-    {
-        return this._filters;
-    },
-
-    /**
-     * @return {?RegExp}
-     */
-    searchRegExp: function()
-    {
-        return this._textFilter._regExp;
-    },
-
-    /**
-     * @return {!WebInspector.ToolbarItem}
-     */
-    filterButton: function()
-    {
-        return this._filterBar.filterButton();
-    },
-
-    /**
-     * @return {!WebInspector.Widget}
-     */
-    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();
-        }
-    },
-
-    _notifyFiltersChanged: function()
-    {
-        this.dispatchEventToListeners(WebInspector.TimelineFilters.Events.FilterChanged);
-    },
-
-    __proto__: WebInspector.Object.prototype
-};
-
 /**
- * @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: ");
-
-    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);
+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);
+
+    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));
-};
-
-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
-};
+  }
+
+  /**
+   * @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();
+    }
+  }
+};
+
+