chrome-devtools-frontend 1.0.1040857 → 1.0.1070764

package/front_end/panels/timeline/TimelinePanel.ts

@@ -270,6 +270,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelinePanel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let timelinePanelInstance: TimelinePanel;
+let isNode: boolean;
 
 export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineModeViewDelegate {
   private readonly dropTarget: UI.DropTarget.DropTarget;
@@ -314,6 +315,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   private showSettingsPaneSetting!: Common.Settings.Setting<boolean>;
   private settingsPane!: UI.Widget.Widget;
   private controller!: TimelineController|null;
+  private cpuProfilers!: SDK.CPUProfilerModel.CPUProfilerModel[]|null;
   private clearButton!: UI.Toolbar.ToolbarButton;
   private loadButton!: UI.Toolbar.ToolbarButton;
   private saveButton!: UI.Toolbar.ToolbarButton;
@@ -358,7 +360,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
         Common.Settings.Settings.instance().createSetting('timelineCaptureLayersAndPictures', false);
     this.captureLayersAndPicturesSetting.setTitle(i18nString(UIStrings.enableAdvancedPaint));
 
-    this.showScreenshotsSetting = Common.Settings.Settings.instance().createSetting('timelineShowScreenshots', true);
+    this.showScreenshotsSetting =
+        Common.Settings.Settings.instance().createSetting('timelineShowScreenshots', isNode ? false : true);
     this.showScreenshotsSetting.setTitle(i18nString(UIStrings.screenshots));
     this.showScreenshotsSetting.addChangeListener(this.updateOverviewControls, this);
 
@@ -381,9 +384,10 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.panelToolbar = new UI.Toolbar.Toolbar('timeline-main-toolbar', timelineToolbarContainer);
     this.panelToolbar.makeWrappable(true);
     this.panelRightToolbar = new UI.Toolbar.Toolbar('', timelineToolbarContainer);
-    this.createSettingsPane();
-    this.updateShowSettingsToolbarButton();
-
+    if (!isNode) {
+      this.createSettingsPane();
+      this.updateShowSettingsToolbarButton();
+    }
     this.timelinePane = new UI.Widget.VBox();
     this.timelinePane.show(this.element);
     const topPaneElement = this.timelinePane.element.createChild('div', 'hbox');
@@ -422,12 +426,27 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
         Extensions.ExtensionServer.Events.TraceProviderAdded, this.appendExtensionsToToolbar, this);
     SDK.TargetManager.TargetManager.instance().addEventListener(
         SDK.TargetManager.Events.SuspendStateChanged, this.onSuspendStateChanged, this);
+    if (Root.Runtime.experiments.isEnabled('timelineAsConsoleProfileResultPanel')) {
+      const profilerModels = SDK.TargetManager.TargetManager.instance().models(SDK.CPUProfilerModel.CPUProfilerModel);
+      for (const model of profilerModels) {
+        for (const message of model.registeredConsoleProfileMessages) {
+          this.consoleProfileFinished(message);
+        }
+      }
+
+      SDK.TargetManager.TargetManager.instance().addModelListener(
+          SDK.CPUProfilerModel.CPUProfilerModel, SDK.CPUProfilerModel.Events.ConsoleProfileFinished,
+          event => this.consoleProfileFinished(event.data), this);
+    }
   }
 
   static instance(opts: {
     forceNew: boolean|null,
-  }|undefined = {forceNew: null}): TimelinePanel {
-    const {forceNew} = opts;
+    isNode: boolean,
+  }|undefined = {forceNew: null, isNode: false}): TimelinePanel {
+    const {forceNew, isNode: isNodeMode} = opts;
+    isNode = isNodeMode;
+
     if (!timelinePanelInstance || forceNew) {
       timelinePanelInstance = new TimelinePanel();
     }
@@ -519,17 +538,21 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
     // View
     this.panelToolbar.appendSeparator();
-    this.showScreenshotsToolbarCheckbox =
-        this.createSettingCheckbox(this.showScreenshotsSetting, i18nString(UIStrings.captureScreenshots));
-    this.panelToolbar.appendToolbarItem(this.showScreenshotsToolbarCheckbox);
+    if (!isNode) {
+      this.showScreenshotsToolbarCheckbox =
+          this.createSettingCheckbox(this.showScreenshotsSetting, i18nString(UIStrings.captureScreenshots));
+      this.panelToolbar.appendToolbarItem(this.showScreenshotsToolbarCheckbox);
+    }
 
     this.showMemoryToolbarCheckbox =
         this.createSettingCheckbox(this.showMemorySetting, i18nString(UIStrings.showMemoryTimeline));
     this.panelToolbar.appendToolbarItem(this.showMemoryToolbarCheckbox);
 
-    this.showWebVitalsToolbarCheckbox =
-        this.createSettingCheckbox(this.showWebVitalsSetting, i18nString(UIStrings.showWebVitals));
-    this.panelToolbar.appendToolbarItem(this.showWebVitalsToolbarCheckbox);
+    if (!isNode) {
+      this.showWebVitalsToolbarCheckbox =
+          this.createSettingCheckbox(this.showWebVitalsSetting, i18nString(UIStrings.showWebVitals));
+      this.panelToolbar.appendToolbarItem(this.showWebVitalsToolbarCheckbox);
+    }
 
     if (Root.Runtime.experiments.isEnabled('recordCoverageWithPerformanceTracing')) {
       this.startCoverageCheckbox =
@@ -541,8 +564,10 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.panelToolbar.appendToolbarItem(UI.Toolbar.Toolbar.createActionButtonForId('components.collect-garbage'));
 
     // Settings
-    this.panelRightToolbar.appendSeparator();
-    this.panelRightToolbar.appendToolbarItem(this.showSettingsPaneButton);
+    if (!isNode) {
+      this.panelRightToolbar.appendSeparator();
+      this.panelRightToolbar.appendToolbarItem(this.showSettingsPaneButton);
+    }
   }
 
   private createSettingsPane(): void {
@@ -706,12 +731,12 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     }
   }
 
-  private loadFromFile(file: File): void {
+  private async loadFromFile(file: File): Promise<void> {
     if (this.state !== State.Idle) {
       return;
     }
     this.prepareToLoadTimeline();
-    this.loader = TimelineLoader.loadFromFile(file, this);
+    this.loader = await TimelineLoader.loadFromFile(file, this);
     this.createFileSelector();
   }
 
@@ -810,42 +835,55 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     console.assert(!this.statusPane, 'Status pane is already opened.');
     this.setState(State.StartPending);
 
-    const recordingOptions = {
-      enableJSSampling: !this.disableCaptureJSProfileSetting.get(),
-      capturePictures: this.captureLayersAndPicturesSetting.get(),
-      captureFilmStrip: this.showScreenshotsSetting.get(),
-      startCoverage: this.startCoverage.get(),
-    };
-
-    if (recordingOptions.startCoverage) {
-      await UI.ViewManager.ViewManager.instance()
-          .showView('coverage')
-          .then(() => this.getCoverageViewWidget())
-          .then(widget => widget.ensureRecordingStarted());
-    }
+    if (!isNode) {
+      const recordingOptions = {
+        enableJSSampling: !this.disableCaptureJSProfileSetting.get(),
+        capturePictures: this.captureLayersAndPicturesSetting.get(),
+        captureFilmStrip: this.showScreenshotsSetting.get(),
+        startCoverage: this.startCoverage.get(),
+      };
+
+      if (recordingOptions.startCoverage) {
+        await UI.ViewManager.ViewManager.instance()
+            .showView('coverage')
+            .then(() => this.getCoverageViewWidget())
+            .then(widget => widget.ensureRecordingStarted());
+      }
 
-    this.showRecordingStarted();
+      this.showRecordingStarted();
 
-    const enabledTraceProviders = Extensions.ExtensionServer.ExtensionServer.instance().traceProviders().filter(
-        provider => TimelinePanel.settingForTraceProvider(provider).get());
+      const enabledTraceProviders = Extensions.ExtensionServer.ExtensionServer.instance().traceProviders().filter(
+          provider => TimelinePanel.settingForTraceProvider(provider).get());
 
-    const mainTarget = (SDK.TargetManager.TargetManager.instance().mainTarget() as SDK.Target.Target);
-    if (UIDevtoolsUtils.isUiDevTools()) {
-      this.controller = new UIDevtoolsController(mainTarget, this);
-    } else {
-      this.controller = new TimelineController(mainTarget, this);
-    }
-    this.setUIControlsEnabled(false);
-    this.hideLandingPage();
-    try {
-      const response = await this.controller.startRecording(recordingOptions, enabledTraceProviders);
-      if (response.getError()) {
-        throw new Error(response.getError());
+      const mainTarget = (SDK.TargetManager.TargetManager.instance().mainFrameTarget() as SDK.Target.Target);
+      if (UIDevtoolsUtils.isUiDevTools()) {
+        this.controller = new UIDevtoolsController(mainTarget, this);
       } else {
-        this.recordingStarted();
+        this.controller = new TimelineController(mainTarget, this);
       }
-    } catch (e) {
-      this.recordingFailed(e.message);
+      this.setUIControlsEnabled(false);
+      this.hideLandingPage();
+      try {
+        const response = await this.controller.startRecording(recordingOptions, enabledTraceProviders);
+        if (response.getError()) {
+          throw new Error(response.getError());
+        } else {
+          this.recordingStarted();
+        }
+      } catch (e) {
+        this.recordingFailed(e.message);
+      }
+    } else {
+      this.showRecordingStarted();
+
+      this.cpuProfilers = SDK.TargetManager.TargetManager.instance().models(SDK.CPUProfilerModel.CPUProfilerModel);
+      this.setUIControlsEnabled(false);
+      this.hideLandingPage();
+
+      await SDK.TargetManager.TargetManager.instance().suspendAllTargets('performance-timeline');
+      await Promise.all(this.cpuProfilers.map(model => model.startRecording()));
+
+      this.recordingStarted();
     }
   }
 
@@ -863,11 +901,34 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
           .then(widget => widget.stopRecording());
     }
     if (this.controller) {
-      const model = await this.controller.stopRecording();
-      this.performanceModel = model;
+      this.performanceModel = this.controller.getPerformanceModel();
+      await this.controller.stopRecording();
       this.setUIControlsEnabled(true);
       this.controller.dispose();
       this.controller = null;
+      return;
+    }
+    if (this.cpuProfilers) {
+      const profiles = await Promise.all(this.cpuProfilers.map(model => model.stopRecording()));
+      let traceEvents: SDK.TracingManager.EventPayload[] = [];
+      try {
+        for (const profile of profiles) {
+          const traceEvent = TimelineModel.TimelineJSProfile.TimelineJSProfileProcessor.buildTraceProfileFromCpuProfile(
+              profile, /* tid */ 1, /* injectPageEvent */ true);
+          traceEvents = traceEvents.concat(traceEvent);
+        }
+      } catch (e) {
+        console.error(e.stack);
+        return;
+      }
+      this.setState(State.Idle);
+      this.loadFromEvents(traceEvents);
+
+      this.setUIControlsEnabled(true);
+      this.cpuProfilers.map(model => model.dispose());
+      this.cpuProfilers = null;
+
+      await SDK.TargetManager.TargetManager.instance().resumeAllTargets();
     }
   }
 
@@ -900,11 +961,27 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.updateTimelineControls();
   }
 
+  private consoleProfileFinished(data: SDK.CPUProfilerModel.ProfileFinishedData): void {
+    if (!isNode) {
+      return;
+    }
+
+    try {
+      const traceEvent = TimelineModel.TimelineJSProfile.TimelineJSProfileProcessor.buildTraceProfileFromCpuProfile(
+          data.cpuProfile, /* tid */ 1, /* injectPageEvent */ true);
+      this.loadFromEvents(traceEvent);
+    } catch (e) {
+      console.error(e.stack);
+      return;
+    }
+    void UI.InspectorView.InspectorView.instance().showPanel('timeline');
+  }
+
   private updateTimelineControls(): void {
     const state = State;
     this.toggleRecordAction.setToggled(this.state === state.Recording);
     this.toggleRecordAction.setEnabled(this.state === state.Recording || this.state === state.Idle);
-    this.recordReloadAction.setEnabled(this.state === state.Idle);
+    this.recordReloadAction.setEnabled(isNode ? false : this.state === state.Idle);
     this.historyManager.setEnabled(this.state === state.Idle);
     this.clearButton.setEnabled(this.state === state.Idle);
     this.panelToolbar.setEnabled(this.state !== state.Loading);
@@ -914,13 +991,13 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.saveButton.setEnabled(this.state === state.Idle && Boolean(this.performanceModel));
   }
 
-  toggleRecording(): void {
+  async toggleRecording(): Promise<void> {
     if (this.state === State.Idle) {
       this.recordingPageReload = false;
-      void this.startRecording();
+      await this.startRecording();
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.TimelineStarted);
     } else if (this.state === State.Recording) {
-      void this.stopRecording();
+      await this.stopRecording();
     }
   }
 
@@ -945,6 +1022,9 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
   private reset(): void {
     PerfUI.LineLevelProfile.Performance.instance().reset();
+    if (this.performanceModel) {
+      this.performanceModel.removeEventListener(Events.NamesResolved, this.updateModelAndFlameChart, this);
+    }
     this.setModel(null);
   }
 
@@ -1099,7 +1179,15 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     }
   }
 
-  loadingComplete(tracingModel: SDK.TracingModel.TracingModel|null): void {
+  updateModelAndFlameChart(): void {
+    if (!this.performanceModel) {
+      return;
+    }
+    this.setModel(this.performanceModel);
+    this.flameChart.updateColorMapper();
+  }
+
+  async loadingComplete(tracingModel: SDK.TracingModel.TracingModel|null): Promise<void> {
     delete this.loader;
     this.setState(State.Idle);
 
@@ -1116,8 +1204,14 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     if (!this.performanceModel) {
       this.performanceModel = new PerformanceModel();
     }
-    this.performanceModel.setTracingModel(tracingModel);
+
+    await this.performanceModel.setTracingModel(tracingModel);
     this.setModel(this.performanceModel);
+
+    if (!this.performanceModel.hasEventListeners(Events.NamesResolved)) {
+      this.performanceModel.addEventListener(Events.NamesResolved, this.updateModelAndFlameChart, this);
+    }
+
     this.historyManager.addRecording(this.performanceModel);
 
     if (this.startCoverage.get()) {
@@ -1129,6 +1223,10 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     }
   }
 
+  loadingCompleteForTest(): void {
+    // Not implemented, added only for allowing the TimelineTestRunner
+    // to be in sync when a trace load is finished.
+  }
   private showRecordingStarted(): void {
     if (this.statusPane) {
       return;
@@ -1281,7 +1379,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       if (!file) {
         return;
       }
-      this.loadFromFile(file);
+      void this.loadFromFile(file);
     }
   }
 }
@@ -1539,7 +1637,7 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
     console.assert(panel && panel instanceof TimelinePanel);
     switch (actionId) {
       case 'timeline.toggle-recording':
-        panel.toggleRecording();
+        void panel.toggleRecording();
         return true;
       case 'timeline.record-reload':
         panel.recordReload();

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -473,110 +473,6 @@ const UIStrings = {
   /**
   *@description Text in Timeline UIUtils of the Performance panel
   */
-  keyCharacter: 'Key — Character',
-  /**
-  *@description Text in Timeline UIUtils of the Performance panel
-  */
-  keyDown: 'Key Down',
-  /**
-  *@description Noun for the end keyboard key event in the Performance panel. 'Up' refers to the keyboard key bouncing back up after being pushed down.
-  */
-  keyUp: 'Key Up',
-  /**
-  *@description Noun for a mouse click event in the Performance panel.
-  */
-  click: 'Click',
-  /**
-  *@description Text in Timeline UIUtils of the Performance panel
-  */
-  contextMenu: 'Context Menu',
-  /**
-  *@description Noun for the start of a mouse event in the Performance panel. Down refers to the button on the mouse being pressed down.
-  */
-  mouseDown: 'Mouse Down',
-  /**
-  *@description Noun for a mouse move event in the Performance panel.
-  */
-  mouseMove: 'Mouse Move',
-  /**
-  *@description Noun for the end of a mouse event in the Performance panel. Up refers to the button on the mouse being released.
-  */
-  mouseUp: 'Mouse Up',
-  /**
-  *@description Text in Timeline UIUtils of the Performance panel
-  */
-  mouseWheel: 'Mouse Wheel',
-  /**
-  *@description Noun for the beginning of a mouse scroll wheel event in the Performance panel.
-  */
-  scrollBegin: 'Scroll Begin',
-  /**
-  *@description Text in Timeline UIUtils of the Performance panel
-  */
-  scrollEnd: 'Scroll End',
-  /**
-  *@description Noun for an update of a mouse scroll wheel event in the Performance panel.
-  */
-  scrollUpdate: 'Scroll Update',
-  /**
-  *@description Noun for the beginning of a fling gesture event in the Performance panel.
-  */
-  flingStart: 'Fling Start',
-  /**
-  *@description Noun for the end of a fling gesture event in the Performance panel.
-  */
-  flingHalt: 'Fling Halt',
-  /**
-  *@description Noun for a tap event (tap on a touch screen device) in the Performance panel.
-  */
-  tap: 'Tap',
-  /**
-  *@description Noun for the end of a tap event (tap on a touch screen device) in the Performance panel.
-  */
-  tapHalt: 'Tap Halt',
-  /**
-  *@description Noun for the start of a tap event (tap on a touch screen device) in the Performance panel.
-  */
-  tapBegin: 'Tap Begin',
-  /**
-  *@description Noun for the beginning of a tap gesture event in the Performance
-  *panel. 'Down' refers to the start (downward tap direction), as opposed to up
-  *(finger leaving the touch surface).
-  */
-  tapDown: 'Tap Down',
-  /**
-   * @description Noun for the cancelation of an input touch event in the Performance panel.
-   * For example this can happen when the user touches the surface with too many fingers.
-   * This is opposed to a "Touch End" event, where the user lifts the finger from the surface.
-   */
-  touchCancel: 'Touch Cancel',
-  /**
-  *@description Noun for the end of an input touch event in the Performance panel.
-  */
-  touchEnd: 'Touch End',
-  /**
-  *@description Noun for an input touch event in the Performance panel.
-  */
-  touchMove: 'Touch Move',
-  /**
-  *@description Noun for the start of an input touch event in the Performance panel.
-  */
-  touchStart: 'Touch Start',
-  /**
-  *@description Noun for the beginning of a pinch gesture event in the Performance panel.
-  */
-  pinchBegin: 'Pinch Begin',
-  /**
-  *@description Text in Timeline UIUtils of the Performance panel
-  */
-  pinchEnd: 'Pinch End',
-  /**
-  *@description Text in Timeline UIUtils of the Performance panel
-  */
-  pinchUpdate: 'Pinch Update',
-  /**
-  *@description Text in Timeline UIUtils of the Performance panel
-  */
   compile: 'Compile',
   /**
   *@description Text to parse something
@@ -595,23 +491,6 @@ const UIStrings = {
   */
   sS: '{PH1}: {PH2}',
   /**
-  *@description Label of a field in a timeline. A Network response refers to the act of acknowledging a
-  network request. Should not be confused with answer.
-  */
-  response: 'Response',
-  /**
-  *@description Text in Timeline UIUtils of the Performance panel
-  */
-  fling: 'Fling',
-  /**
-  *@description Text in Timeline UIUtils of the Performance panel
-  */
-  drag: 'Drag',
-  /**
-  *@description Text in Timeline UIUtils of the Performance panel
-  */
-  uncategorized: 'Uncategorized',
-  /**
   *@description Details text in Timeline UIUtils of the Performance panel
   *@example {30 MB} PH1
   */
@@ -1233,13 +1112,6 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 let eventStylesMap: EventStylesMap;
 
-let inputEventToDisplayName: Map<TimelineModel.TimelineIRModel.InputEvents, string>;
-
-let interactionPhaseStylesMap: Map<TimelineModel.TimelineIRModel.Phases, {
-  color: string,
-  label: string,
-}>;
-
 let categories: {
   [x: string]: TimelineCategory,
 };
@@ -1404,42 +1276,6 @@ export class TimelineUIUtils {
     eventStylesMap = eventStyles;
   }
 
-  static inputEventDisplayName(inputEventType: TimelineModel.TimelineIRModel.InputEvents): string|null {
-    if (!inputEventToDisplayName) {
-      const inputEvent = TimelineModel.TimelineIRModel.InputEvents;
-
-      inputEventToDisplayName = new Map([
-        [inputEvent.Char, i18nString(UIStrings.keyCharacter)],
-        [inputEvent.KeyDown, i18nString(UIStrings.keyDown)],
-        [inputEvent.KeyDownRaw, i18nString(UIStrings.keyDown)],
-        [inputEvent.KeyUp, i18nString(UIStrings.keyUp)],
-        [inputEvent.Click, i18nString(UIStrings.click)],
-        [inputEvent.ContextMenu, i18nString(UIStrings.contextMenu)],
-        [inputEvent.MouseDown, i18nString(UIStrings.mouseDown)],
-        [inputEvent.MouseMove, i18nString(UIStrings.mouseMove)],
-        [inputEvent.MouseUp, i18nString(UIStrings.mouseUp)],
-        [inputEvent.MouseWheel, i18nString(UIStrings.mouseWheel)],
-        [inputEvent.ScrollBegin, i18nString(UIStrings.scrollBegin)],
-        [inputEvent.ScrollEnd, i18nString(UIStrings.scrollEnd)],
-        [inputEvent.ScrollUpdate, i18nString(UIStrings.scrollUpdate)],
-        [inputEvent.FlingStart, i18nString(UIStrings.flingStart)],
-        [inputEvent.FlingCancel, i18nString(UIStrings.flingHalt)],
-        [inputEvent.Tap, i18nString(UIStrings.tap)],
-        [inputEvent.TapCancel, i18nString(UIStrings.tapHalt)],
-        [inputEvent.ShowPress, i18nString(UIStrings.tapBegin)],
-        [inputEvent.TapDown, i18nString(UIStrings.tapDown)],
-        [inputEvent.TouchCancel, i18nString(UIStrings.touchCancel)],
-        [inputEvent.TouchEnd, i18nString(UIStrings.touchEnd)],
-        [inputEvent.TouchMove, i18nString(UIStrings.touchMove)],
-        [inputEvent.TouchStart, i18nString(UIStrings.touchStart)],
-        [inputEvent.PinchBegin, i18nString(UIStrings.pinchBegin)],
-        [inputEvent.PinchEnd, i18nString(UIStrings.pinchEnd)],
-        [inputEvent.PinchUpdate, i18nString(UIStrings.pinchUpdate)],
-      ]);
-    }
-    return inputEventToDisplayName.get(inputEventType) || null;
-  }
-
   static frameDisplayName(frame: Protocol.Runtime.CallFrame): string {
     if (!TimelineModel.TimelineJSProfile.TimelineJSProfileProcessor.isNativeRuntimeFrame(frame)) {
       return UI.UIUtils.beautifyFunctionName(frame.functionName);
@@ -1504,14 +1340,6 @@ export class TimelineUIUtils {
       return new TimelineRecordStyle(event.name, TimelineUIUtils.categories()['scripting']);
     }
 
-    if (event.hasCategory(TimelineModel.TimelineModel.TimelineModelImpl.Category.LatencyInfo)) {
-      /** @const */
-      const prefix = 'InputLatency::';
-      const inputEventType = event.name.startsWith(prefix) ? event.name.substr(prefix.length) : event.name;
-      const displayName =
-          TimelineUIUtils.inputEventDisplayName((inputEventType as TimelineModel.TimelineIRModel.InputEvents));
-      return new TimelineRecordStyle(displayName || inputEventType, TimelineUIUtils.categories()['scripting']);
-    }
     let result: TimelineRecordStyle = eventStyles[event.name];
     if (!result) {
       result = new TimelineRecordStyle(event.name, TimelineUIUtils.categories()['other'], true);
@@ -1542,31 +1370,6 @@ export class TimelineUIUtils {
     return color;
   }
 
-  static eventColorByProduct(
-      model: TimelineModel.TimelineModel.TimelineModelImpl, urlToColorCache: Map<string, string>,
-      event: SDK.TracingModel.Event): string {
-    const url = TimelineUIUtils.eventURL(event) || Platform.DevToolsPath.EmptyUrlString;
-    let color = urlToColorCache.get(url);
-    if (color) {
-      return color;
-    }
-    const defaultColor = '#f2ecdc';
-    const parsedURL = Common.ParsedURL.ParsedURL.fromString(url);
-    if (!parsedURL) {
-      return defaultColor;
-    }
-    const name = parsedURL.host;
-    const rootFrames = model.rootFrames();
-    if (rootFrames.some(pageFrame => new Common.ParsedURL.ParsedURL(pageFrame.url).host === name)) {
-      color = defaultColor;
-    }
-    if (!color) {
-      color = defaultColor;
-    }
-    urlToColorCache.set(url, color);
-    return color;
-  }
-
   static eventTitle(event: SDK.TracingModel.Event): string {
     const recordType = TimelineModel.TimelineModel.RecordType;
     const eventData = event.args['data'];
@@ -1593,60 +1396,6 @@ export class TimelineUIUtils {
     return title;
   }
 
-  private static interactionPhaseStyles(): Map<TimelineModel.TimelineIRModel.Phases, {
-    color: string,
-    label: string,
-  }> {
-    let map: Map<TimelineModel.TimelineIRModel.Phases, {
-      color: string,
-      label: string,
-    }>|Map<TimelineModel.TimelineIRModel.Phases, {
-      color: string,
-      label: string,
-    }> = interactionPhaseStylesMap;
-    if (!map) {
-      map = new Map([
-        [TimelineModel.TimelineIRModel.Phases.Idle, {color: 'white', label: 'Idle'}],
-        [
-          TimelineModel.TimelineIRModel.Phases.Response,
-          {color: 'hsl(43, 83%, 64%)', label: i18nString(UIStrings.response)},
-        ],
-        [
-          TimelineModel.TimelineIRModel.Phases.Scroll,
-          {color: 'hsl(256, 67%, 70%)', label: i18nString(UIStrings.scroll)},
-        ],
-        [TimelineModel.TimelineIRModel.Phases.Fling, {color: 'hsl(256, 67%, 70%)', label: i18nString(UIStrings.fling)}],
-        [TimelineModel.TimelineIRModel.Phases.Drag, {color: 'hsl(256, 67%, 70%)', label: i18nString(UIStrings.drag)}],
-        [
-          TimelineModel.TimelineIRModel.Phases.Animation,
-          {color: 'hsl(256, 67%, 70%)', label: i18nString(UIStrings.animation)},
-        ],
-        [
-          TimelineModel.TimelineIRModel.Phases.Uncategorized,
-          {color: 'hsl(0, 0%, 87%)', label: i18nString(UIStrings.uncategorized)},
-        ],
-      ]);
-      interactionPhaseStylesMap = map;
-    }
-    return map;
-  }
-
-  static interactionPhaseColor(phase: TimelineModel.TimelineIRModel.Phases): string {
-    const interactionPhase = TimelineUIUtils.interactionPhaseStyles().get(phase);
-    if (!interactionPhase) {
-      throw new Error(`Unknown phase ${phase}`);
-    }
-    return interactionPhase.color;
-  }
-
-  static interactionPhaseLabel(phase: TimelineModel.TimelineIRModel.Phases): string {
-    const interactionPhase = TimelineUIUtils.interactionPhaseStyles().get(phase);
-    if (!interactionPhase) {
-      throw new Error(`Unknown phase ${phase}`);
-    }
-    return interactionPhase.label;
-  }
-
   static isUserFrame(frame: Protocol.Runtime.CallFrame): boolean {
     return frame.scriptId !== '0' && !(frame.url && frame.url.startsWith('native '));
   }
@@ -3263,17 +3012,6 @@ export class TimelineUIUtils {
     };
   }
 
-  static markerStyleForFrame(): TimelineMarkerStyle {
-    return {
-      title: i18nString(UIStrings.frame),
-      color: 'rgba(100, 100, 100, 0.4)',
-      lineWidth: 3,
-      dashStyle: [3],
-      tall: true,
-      lowPriority: true,
-    };
-  }
-
   static colorForId(id: string): string {
     if (!colorGenerator) {
       colorGenerator =
@@ -3325,7 +3063,7 @@ export class TimelineUIUtils {
 
       case warnings.LongTask: {
         const longTaskLink =
-            UI.XLink.XLink.create('https://web.dev/rail/#goals-and-guidelines', i18nString(UIStrings.longTask));
+            UI.XLink.XLink.create('https://web.dev/optimize-long-tasks/', i18nString(UIStrings.longTask));
         span.appendChild(i18n.i18n.getFormatLocalizedString(
             str_, UIStrings.sTookS,
             {PH1: longTaskLink, PH2: i18n.TimeUtilities.millisToString((event.duration || 0), true)}));