chrome-devtools-frontend 1.0.1040337 → 1.0.1070764

package/front_end/panels/timeline/TimelineLoader.ts

@@ -63,46 +63,63 @@ export class TimelineLoader implements Common.StringOutputStream.OutputStream {
     this.jsonTokenizer = new TextUtils.TextUtils.BalancedJSONTokenizer(this.writeBalancedJSON.bind(this), true);
   }
 
-  static loadFromFile(file: File, client: Client): TimelineLoader {
+  static async loadFromFile(file: File, client: Client): Promise<TimelineLoader> {
     const loader = new TimelineLoader(client);
     const fileReader = new Bindings.FileUtils.ChunkedFileReader(file, TransferChunkLengthBytes);
     loader.canceledCallback = fileReader.cancel.bind(fileReader);
     loader.totalSize = file.size;
-    void fileReader.read(loader).then(success => {
-      if (!success && fileReader.error()) {
-        // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        loader.reportErrorAndCancelLoading((fileReader.error() as any).message);
-      }
-    });
+    const success = await fileReader.read(loader);
+    if (!success && fileReader.error()) {
+      // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      loader.reportErrorAndCancelLoading((fileReader.error() as any).message);
+    }
     return loader;
   }
 
   static loadFromEvents(events: SDK.TracingManager.EventPayload[], client: Client): TimelineLoader {
     const loader = new TimelineLoader(client);
-
     window.setTimeout(async () => {
-      const eventsPerChunk = 5000;
-      client.loadingStarted();
-      for (let i = 0; i < events.length; i += eventsPerChunk) {
-        const chunk = events.slice(i, i + eventsPerChunk);
-        (loader.tracingModel as SDK.TracingModel.TracingModel).addEvents(chunk);
-        client.loadingProgress((i + chunk.length) / events.length);
-        await new Promise(r => window.setTimeout(r));  // Yield event loop to paint.
-      }
-      void loader.close();
+      void loader.addEvents(events);
     });
-
     return loader;
   }
 
   static loadFromURL(url: Platform.DevToolsPath.UrlString, client: Client): TimelineLoader {
     const loader = new TimelineLoader(client);
-    const allowFileUNCPaths = Common.Settings.Settings.instance().moduleSetting('network.enable-unc-loading').get();
-    Host.ResourceLoader.loadAsStream(url, null, loader, undefined, allowFileUNCPaths);
+    const stream = new Common.StringOutputStream.StringOutputStream();
+    client.loadingStarted();
+
+    const allowRemoteFilePaths =
+        Common.Settings.Settings.instance().moduleSetting('network.enable-remote-file-loading').get();
+    Host.ResourceLoader.loadAsStream(url, null, stream, finishedCallback, allowRemoteFilePaths);
+
+    function finishedCallback(
+        success: boolean, _headers: {[x: string]: string},
+        errorDescription: Host.ResourceLoader.LoadErrorDescription): void {
+      if (!success) {
+        return loader.reportErrorAndCancelLoading(errorDescription.message);
+      }
+      const txt = stream.data();
+      const events = JSON.parse(txt);
+      void loader.addEvents(events);
+    }
+
     return loader;
   }
 
+  async addEvents(events: SDK.TracingManager.EventPayload[]): Promise<void> {
+    this.client?.loadingStarted();
+    const eventsPerChunk = 5000;
+    for (let i = 0; i < events.length; i += eventsPerChunk) {
+      const chunk = events.slice(i, i + eventsPerChunk);
+      (this.tracingModel as SDK.TracingModel.TracingModel).addEvents(chunk);
+      this.client?.loadingProgress((i + chunk.length) / events.length);
+      await new Promise(r => window.setTimeout(r));  // Yield event loop to paint.
+    }
+    void this.close();
+  }
+
   cancel(): void {
     this.tracingModel = null;
     this.backingStorage.reset();
@@ -230,16 +247,16 @@ export class TimelineLoader implements Common.StringOutputStream.OutputStream {
       return;
     }
     this.client.processingStarted();
-    window.setTimeout(() => this.finalizeTrace(), 0);
+    await this.finalizeTrace();
   }
 
-  private finalizeTrace(): void {
+  private async finalizeTrace(): Promise<void> {
     if (this.state === State.LoadingCPUProfileFormat) {
       this.parseCPUProfileFormat(this.buffer);
       this.buffer = '';
     }
     (this.tracingModel as SDK.TracingModel.TracingModel).tracingComplete();
-    (this.client as Client).loadingComplete(this.tracingModel);
+    await (this.client as Client).loadingComplete(this.tracingModel);
   }
 
   private parseCPUProfileFormat(text: string): void {

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();