chrome-devtools-frontend 1.0.1040337 → 1.0.1070764

package/front_end/panels/js_profiler/js_profiler-meta.ts

@@ -6,6 +6,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type * as Profiler from '../profiler/profiler.js';
+import type * as Timeline from '../timeline/timeline.js';
 
 const UIStrings = {
   /**
@@ -17,13 +18,38 @@ const UIStrings = {
   */
   showProfiler: 'Show Profiler',
   /**
+  *@description Text for the performance of something
+  */
+  performance: 'Performance',
+  /**
+  *@description Command for showing the 'Performance' tool
+  */
+  showPerformance: 'Show Performance',
+  /**
   *@description Text in the Shortcuts page to explain a keyboard shortcut (start/stop recording performance)
   */
   startStopRecording: 'Start/stop recording',
+  /**
+  *@description Title of an action in the timeline tool to show history
+  */
+  showRecentTimelineSessions: 'Show recent timeline sessions',
+  /**
+  *@description Text to record a series of actions for analysis
+  */
+  record: 'Record',
+  /**
+  *@description Text of an item that stops the running task
+  */
+  stop: 'Stop',
+  /**
+  *@description Title of an action in the timeline tool to record reload
+  */
+  startProfilingAndReloadPage: 'Start profiling and reload page',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/js_profiler/js_profiler-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
+let loadedTimelineModule: (typeof Timeline|undefined);
 let loadedProfilerModule: (typeof Profiler|undefined);
 
 async function loadProfilerModule(): Promise<typeof Profiler> {
@@ -33,6 +59,13 @@ async function loadProfilerModule(): Promise<typeof Profiler> {
   return loadedProfilerModule;
 }
 
+async function loadTimelineModule(): Promise<typeof Timeline> {
+  if (!loadedTimelineModule) {
+    loadedTimelineModule = await import('../timeline/timeline.js');
+  }
+  return loadedTimelineModule;
+}
+
 function maybeRetrieveContextTypes<T = unknown>(getClassCallBack: (profilerModule: typeof Profiler) => T[]): T[] {
   if (loadedProfilerModule === undefined) {
     return [];
@@ -40,6 +73,14 @@ function maybeRetrieveContextTypes<T = unknown>(getClassCallBack: (profilerModul
   return getClassCallBack(loadedProfilerModule);
 }
 
+function maybeRetrieveTimelineContextTypes<T = unknown>(getClassCallBack: (timelineModule: typeof Timeline) => T[]):
+    T[] {
+  if (loadedTimelineModule === undefined) {
+    return [];
+  }
+  return getClassCallBack(loadedTimelineModule);
+}
+
 UI.ViewManager.registerViewExtension({
   location: UI.ViewManager.ViewLocationValues.PANEL,
   id: 'js_profiler',
@@ -52,6 +93,21 @@ UI.ViewManager.registerViewExtension({
   },
 });
 
+UI.ViewManager.registerViewExtension({
+  location: UI.ViewManager.ViewLocationValues.PANEL,
+  id: 'timeline',
+  title: i18nLazyString(UIStrings.performance),
+  commandPrompt: i18nLazyString(UIStrings.showPerformance),
+  order: 66,
+  persistence: UI.ViewManager.ViewPersistence.CLOSEABLE,
+  hasToolbar: false,
+  isPreviewFeature: true,
+  async loadView() {
+    const Timeline = await loadTimelineModule();
+    return Timeline.TimelinePanel.TimelinePanel.instance({forceNew: null, isNode: true});
+  },
+});
+
 UI.ActionRegistration.registerActionExtension({
   actionId: 'profiler.js-toggle-recording',
   category: UI.ActionRegistration.ActionCategory.JAVASCRIPT_PROFILER,
@@ -78,3 +134,86 @@ UI.ActionRegistration.registerActionExtension({
     },
   ],
 });
+
+UI.ActionRegistration.registerActionExtension({
+  actionId: 'timeline.show-history',
+  async loadActionDelegate() {
+    const Timeline = await loadTimelineModule();
+    return Timeline.TimelinePanel.ActionDelegate.instance();
+  },
+  category: UI.ActionRegistration.ActionCategory.PERFORMANCE,
+  title: i18nLazyString(UIStrings.showRecentTimelineSessions),
+  contextTypes() {
+    return maybeRetrieveTimelineContextTypes(Timeline => [Timeline.TimelinePanel.TimelinePanel]);
+  },
+  bindings: [
+    {
+      platform: UI.ActionRegistration.Platforms.WindowsLinux,
+      shortcut: 'Ctrl+H',
+    },
+    {
+      platform: UI.ActionRegistration.Platforms.Mac,
+      shortcut: 'Meta+Y',
+    },
+  ],
+});
+
+UI.ActionRegistration.registerActionExtension({
+  actionId: 'timeline.toggle-recording',
+  category: UI.ActionRegistration.ActionCategory.PERFORMANCE,
+  iconClass: UI.ActionRegistration.IconClass.LARGEICON_START_RECORDING,
+  toggleable: true,
+  toggledIconClass: UI.ActionRegistration.IconClass.LARGEICON_STOP_RECORDING,
+  toggleWithRedColor: true,
+  contextTypes() {
+    return maybeRetrieveTimelineContextTypes(Timeline => [Timeline.TimelinePanel.TimelinePanel]);
+  },
+  async loadActionDelegate() {
+    const Timeline = await loadTimelineModule();
+    return Timeline.TimelinePanel.ActionDelegate.instance();
+  },
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.record),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.stop),
+    },
+  ],
+  bindings: [
+    {
+      platform: UI.ActionRegistration.Platforms.WindowsLinux,
+      shortcut: 'Ctrl+E',
+    },
+    {
+      platform: UI.ActionRegistration.Platforms.Mac,
+      shortcut: 'Meta+E',
+    },
+  ],
+});
+
+UI.ActionRegistration.registerActionExtension({
+  actionId: 'timeline.record-reload',
+  iconClass: UI.ActionRegistration.IconClass.LARGEICON_REFRESH,
+  contextTypes() {
+    return maybeRetrieveTimelineContextTypes(Timeline => [Timeline.TimelinePanel.TimelinePanel]);
+  },
+  category: UI.ActionRegistration.ActionCategory.PERFORMANCE,
+  title: i18nLazyString(UIStrings.startProfilingAndReloadPage),
+  async loadActionDelegate() {
+    const Timeline = await loadTimelineModule();
+    return Timeline.TimelinePanel.ActionDelegate.instance();
+  },
+  bindings: [
+    {
+      platform: UI.ActionRegistration.Platforms.WindowsLinux,
+      shortcut: 'Ctrl+Shift+E',
+    },
+    {
+      platform: UI.ActionRegistration.Platforms.Mac,
+      shortcut: 'Meta+Shift+E',
+    },
+  ],
+});

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -346,21 +346,16 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
   }
 
   getFlags(): {
-    internalDisableDeviceScreenEmulation: boolean,
-    emulatedFormFactor: (string|undefined),
+    formFactor: (string|undefined),
     legacyNavigation: boolean,
     mode: string,
   } {
-    const flags = {
-      // DevTools handles all the emulation. This tells Lighthouse to not bother with emulation.
-      internalDisableDeviceScreenEmulation: true,
-    };
+    const flags = {};
     for (const runtimeSetting of RuntimeSettings) {
       runtimeSetting.setFlags(flags, runtimeSetting.setting.get());
     }
     return flags as {
-      internalDisableDeviceScreenEmulation: boolean,
-      emulatedFormFactor: (string | undefined),
+      formFactor: (string | undefined),
       legacyNavigation: boolean,
       mode: string,
     };
@@ -487,7 +482,7 @@ export const RuntimeSettings: RuntimeSetting[] = [
     description: i18nLazyString(UIStrings.applyMobileEmulationDuring),
     setFlags: (flags: Flags, value: string|boolean): void => {
       // See Audits.AuditsPanel._setupEmulationAndProtocolConnection()
-      flags.emulatedFormFactor = value;
+      flags.formFactor = value;
     },
     options: [
       {label: i18nLazyString(UIStrings.mobile), value: 'mobile'},

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -5,7 +5,6 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as EmulationModel from '../../models/emulation/emulation.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -27,7 +26,6 @@ import * as LighthouseReport from '../../third_party/lighthouse/report/report.js
 import {LighthouseReportRenderer, LighthouseReportUIFeatures} from './LighthouseReportRenderer.js';
 import {Item, ReportSelector} from './LighthouseReportSelector.js';
 import {StartView} from './LighthouseStartView.js';
-import {StartViewFR} from './LighthouseStartViewFR.js';
 import {StatusView} from './LighthouseStatusView.js';
 import {TimespanView} from './LighthouseTimespanView.js';
 
@@ -72,7 +70,7 @@ export class LighthousePanel extends UI.Panel.Panel {
   private readonly controller: LighthouseController;
   private readonly startView: StartView;
   private readonly statusView: StatusView;
-  private readonly timespanView: TimespanView|null;
+  private readonly timespanView: TimespanView;
   private warningText: Nullable<string>;
   private unauditableExplanation: Nullable<string>;
   private readonly cachedRenderedReports: Map<ReportJSON, HTMLElement>;
@@ -99,18 +97,16 @@ export class LighthousePanel extends UI.Panel.Panel {
   private isLHAttached?: boolean;
   private currentLighthouseRun?: LighthouseRun;
 
-  private constructor() {
+  private constructor(
+      protocolService: ProtocolService,
+      controller: LighthouseController,
+  ) {
     super('lighthouse');
 
-    this.protocolService = new ProtocolService();
-    this.controller = new LighthouseController(this.protocolService);
-    if (Root.Runtime.experiments.isEnabled('lighthousePanelFR')) {
-      this.startView = new StartViewFR(this.controller);
-      this.timespanView = new TimespanView(this.controller);
-    } else {
-      this.startView = new StartView(this.controller);
-      this.timespanView = null;
-    }
+    this.protocolService = protocolService;
+    this.controller = controller;
+    this.startView = new StartView(this.controller);
+    this.timespanView = new TimespanView(this.controller);
     this.statusView = new StatusView(this.controller);
 
     this.warningText = null;
@@ -136,10 +132,13 @@ export class LighthousePanel extends UI.Panel.Panel {
     this.controller.recomputePageAuditability();
   }
 
-  static instance(opts = {forceNew: null}): LighthousePanel {
-    const {forceNew} = opts;
-    if (!lighthousePanelInstace || forceNew) {
-      lighthousePanelInstace = new LighthousePanel();
+  static instance(opts?: {forceNew: boolean, protocolService: ProtocolService, controller: LighthouseController}):
+      LighthousePanel {
+    if (!lighthousePanelInstace || opts?.forceNew) {
+      const protocolService = opts?.protocolService ?? new ProtocolService();
+      const controller = opts?.controller ?? new LighthouseController(protocolService);
+
+      lighthousePanelInstace = new LighthousePanel(protocolService, controller);
     }
 
     return lighthousePanelInstace;
@@ -150,13 +149,13 @@ export class LighthousePanel extends UI.Panel.Panel {
   }
 
   private async onLighthouseTimespanStart(): Promise<void> {
-    this.timespanView?.show(this.contentElement);
+    this.timespanView.show(this.contentElement);
     await this.startLighthouse();
-    this.timespanView?.ready();
+    this.timespanView.ready();
   }
 
   private async onLighthouseTimespanEnd(): Promise<void> {
-    this.timespanView?.hide();
+    this.timespanView.hide();
     await this.collectLighthouseResults();
   }
 
@@ -166,7 +165,7 @@ export class LighthousePanel extends UI.Panel.Panel {
   }
 
   private async onLighthouseCancel(): Promise<void> {
-    this.timespanView?.hide();
+    this.timespanView.hide();
     void this.cancelLighthouse();
   }
 
@@ -324,8 +323,12 @@ export class LighthousePanel extends UI.Panel.Panel {
     });
     LighthouseReportRenderer.handleDarkMode(el);
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const features = new LighthouseReportUIFeatures(dom) as any;
+    const features = new LighthouseReportUIFeatures(dom, {
+                       getStandaloneReportHTML(): string {
+                         return features.getReportHtml();
+                       },
+                       // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                     }) as any;
     features.setBeforePrint(this.beforePrint.bind(this));
     features.setAfterPrint(this.afterPrint.bind(this));
     LighthouseReportRenderer.addViewTraceButton(el, features, artifacts);
@@ -335,7 +338,7 @@ export class LighthousePanel extends UI.Panel.Panel {
   }
 
   private async waitForMainTargetLoad(): Promise<void> {
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainFrameTarget();
     if (!mainTarget) {
       return;
     }
@@ -454,8 +457,6 @@ export class LighthousePanel extends UI.Panel.Panel {
    * We set the device emulation on the DevTools-side for two reasons:
    * 1. To workaround some odd device metrics emulation bugs like occuluding viewports
    * 2. To get the attractive device outline
-   *
-   * We also set flags.internalDisableDeviceScreenEmulation = true to let LH only apply UA emulation
    */
   private async setupEmulationAndProtocolConnection(): Promise<void> {
     const flags = this.controller.getFlags();
@@ -475,10 +476,10 @@ export class LighthousePanel extends UI.Panel.Panel {
     };
 
     emulationModel.toolbarControlsEnabledSetting().set(false);
-    if ('emulatedFormFactor' in flags && flags.emulatedFormFactor === 'desktop') {
+    if ('formFactor' in flags && flags.formFactor === 'desktop') {
       emulationModel.enabledSetting().set(false);
       emulationModel.emulate(EmulationModel.DeviceModeModel.Type.None, null, null);
-    } else if (flags.emulatedFormFactor === 'mobile') {
+    } else if (flags.formFactor === 'mobile') {
       emulationModel.enabledSetting().set(true);
       emulationModel.deviceOutlineSetting().set(true);
 
@@ -528,7 +529,7 @@ export class LighthousePanel extends UI.Panel.Panel {
 
     Emulation.InspectedPagePlaceholder.InspectedPagePlaceholder.instance().update(true);
 
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainFrameTarget();
     if (!mainTarget) {
       return;
     }
@@ -536,9 +537,14 @@ export class LighthousePanel extends UI.Panel.Panel {
     if (!resourceTreeModel) {
       return;
     }
-    // reload to reset the page state
-    const inspectedURL = await this.controller.getInspectedURL();
-    await resourceTreeModel.navigate(inspectedURL);
+
+    // Reload to reset page state after a navigation.
+    // We want to retain page state for timespan and snapshot modes.
+    const mode = this.currentLighthouseRun?.flags.mode;
+    if (mode === 'navigation') {
+      const inspectedURL = await this.controller.getInspectedURL();
+      await resourceTreeModel.navigate(inspectedURL);
+    }
   }
 
   wasShown(): void {

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -8,6 +8,7 @@ import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 
 import type * as ReportRenderer from './LighthouseReporterTypes.js';
+import type * as Protocol from '../../generated/protocol.js';
 
 /**
  * @overview
@@ -55,11 +56,9 @@ export interface LighthouseRun {
  * ProtocolService manages a connection between the frontend (Lighthouse panel) and the Lighthouse worker.
  */
 export class ProtocolService {
-  private targetInfo?: {
-    mainSessionId: string,
-    mainTargetId: string,
-    mainFrameId: string,
-  };
+  private mainSessionId?: string;
+  private mainFrameId?: string;
+  private targetInfos?: Protocol.Target.TargetInfo[];
   private parallelConnection?: ProtocolClient.InspectorBackend.Connection;
   private lighthouseWorkerPromise?: Promise<Worker>;
   private lighthouseMessageUpdateCallback?: ((arg0: string) => void);
@@ -67,7 +66,7 @@ export class ProtocolService {
 
   async attach(): Promise<void> {
     await SDK.TargetManager.TargetManager.instance().suspendAllTargets();
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainFrameTarget();
     if (!mainTarget) {
       throw new Error('Unable to find main target required for Lighthouse');
     }
@@ -92,11 +91,9 @@ export class ProtocolService {
     });
 
     this.parallelConnection = connection;
-    this.targetInfo = {
-      mainTargetId: await childTargetManager.getParentTargetId(),
-      mainFrameId: mainFrame.id,
-      mainSessionId: sessionId,
-    };
+    this.targetInfos = childTargetManager.targetInfos();
+    this.mainFrameId = mainFrame.id;
+    this.mainSessionId = sessionId;
   }
 
   getLocales(): readonly string[] {
@@ -106,7 +103,7 @@ export class ProtocolService {
   async startTimespan(currentLighthouseRun: LighthouseRun): Promise<void> {
     const {inspectedURL, categoryIDs, flags} = currentLighthouseRun;
 
-    if (!this.targetInfo) {
+    if (!this.mainFrameId || !this.mainSessionId || !this.targetInfos) {
       throw new Error('Unable to get target info required for Lighthouse');
     }
 
@@ -116,14 +113,16 @@ export class ProtocolService {
       flags,
       config: this.configForTesting,
       locales: this.getLocales(),
-      target: this.targetInfo,
+      mainSessionId: this.mainSessionId,
+      mainFrameId: this.mainFrameId,
+      targetInfos: this.targetInfos,
     });
   }
 
   async collectLighthouseResults(currentLighthouseRun: LighthouseRun): Promise<ReportRenderer.RunnerResult> {
     const {inspectedURL, categoryIDs, flags} = currentLighthouseRun;
 
-    if (!this.targetInfo) {
+    if (!this.mainFrameId || !this.mainSessionId || !this.targetInfos) {
       throw new Error('Unable to get target info required for Lighthouse');
     }
 
@@ -138,7 +137,9 @@ export class ProtocolService {
       flags,
       config: this.configForTesting,
       locales: this.getLocales(),
-      target: this.targetInfo,
+      mainSessionId: this.mainSessionId,
+      mainFrameId: this.mainFrameId,
+      targetInfos: this.targetInfos,
     });
   }
 

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -76,7 +76,7 @@ export class LighthouseReportRenderer extends LighthouseReport.ReportRenderer {
   }
 
   static async linkifyNodeDetails(el: Element): Promise<void> {
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainFrameTarget();
     if (!mainTarget) {
       return;
     }
@@ -153,8 +153,8 @@ export class LighthouseReportUIFeatures extends LighthouseReport.ReportUIFeature
   private beforePrint: (() => void)|null;
   private afterPrint: (() => void)|null;
 
-  constructor(dom: LighthouseReport.DOM) {
-    super(dom);
+  constructor(dom: LighthouseReport.DOM, opts: {}) {
+    super(dom, opts);
     this.beforePrint = null;
     this.afterPrint = null;
     this._topbar._print = this._print.bind(this);

package/front_end/panels/lighthouse/LighthouseReportSelector.ts

@@ -113,7 +113,12 @@ export class Item {
     this.renderReport = renderReport;
     this.showLandingCallback = showLandingCallback;
 
-    const url = new Common.ParsedURL.ParsedURL(lighthouseResult.finalUrl);
+    // In Lighthouse 10.0, `finalUrl` is not provided on snapshot or timespan reports.
+    // `finalDisplayedUrl` is the new preferred URL to use for cosmetic identification.
+    // TODO: Remove the `finalUrl` backport once Lighthouse 10.0 is rolled into DevTools.
+    const finalDisplayedUrl = lighthouseResult.finalDisplayedUrl || lighthouseResult.finalUrl || '';
+
+    const url = new Common.ParsedURL.ParsedURL(finalDisplayedUrl);
     const timestamp = lighthouseResult.fetchTime;
     this.element = document.createElement('option');
     this.element.label = `${new Date(timestamp).toLocaleTimeString()} - ${url.domain()}`;

package/front_end/panels/lighthouse/LighthouseReporterTypes.ts

@@ -47,8 +47,9 @@ export interface ReportJSON {
   userAgent: string;
   fetchTime: string;
   timing: {total: number};
-  requestedUrl: string;
-  finalUrl: string;
+  requestedUrl?: string;
+  finalDisplayedUrl: string;
+  finalUrl?: string;
   runWarnings?: string[];
   artifacts: {traces: {defaultPass: {traceEvents: Array<unknown>}}};
   audits: {[x: string]: AuditResultJSON};