chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/front_end/models/trace/insights/Viewport.ts

@@ -48,6 +48,7 @@ export function generateInsight(
       return {
         mobileOptimized: false,
         viewportEvent,
+        metricSavings: {INP: 300 as Types.Timing.MilliSeconds},
       };
     }
   }

package/front_end/models/trace/insights/types.ts

@@ -43,17 +43,20 @@ export enum InsightWarning {
   NO_LAYOUT = 'NO_LAYOUT',
 }
 
+export interface MetricSavings {
+  /* eslint-disable @typescript-eslint/naming-convention */
+  FCP?: Types.Timing.MilliSeconds;
+  LCP?: Types.Timing.MilliSeconds;
+  TBT?: Types.Timing.MilliSeconds;
+  CLS?: number;
+  INP?: Types.Timing.MilliSeconds;
+  /* eslint-enable @typescript-eslint/naming-convention */
+}
+
 export type InsightResult<R extends Record<string, unknown>> = R&{
+  relatedEvents?: Types.Events.Event[],
   warnings?: InsightWarning[],
-  metricSavings?: {
-    /* eslint-disable @typescript-eslint/naming-convention */
-    FCP?: number,
-    LCP?: number,
-    TBT?: number,
-    CLS?: number,
-    INP?: number,
-    /* eslint-enable @typescript-eslint/naming-convention */
-  },
+  metricSavings?: MetricSavings,
 };
 
 /**
@@ -64,8 +67,8 @@ export type InsightResult<R extends Record<string, unknown>> = R&{
 export type InsightSets = {
   /** If for a navigation, this is the navigationId. Else it is Trace.Types.Events.NO_NAVIGATION. */
   id: Types.Events.NavigationId,
-  /** The URL. Shown in the accordion list. */
-  label: string,
+  /** The URL to show in the accordion list. */
+  url: URL,
   frameId: string,
   bounds: Types.Timing.TraceWindowMicroSeconds,
   data: InsightResults,

package/front_end/models/trace/lantern/graph/BaseNode.ts

@@ -5,8 +5,8 @@
 import * as Core from '../core/core.js';
 import type * as Lantern from '../types/types.js';
 
-import {type CPUNode} from './CPUNode.js';
-import {type NetworkNode} from './NetworkNode.js';
+import type {CPUNode} from './CPUNode.js';
+import type {NetworkNode} from './NetworkNode.js';
 
 /**
  * A union of all types derived from BaseNode, allowing type check discrimination

package/front_end/models/trace/lantern/graph/PageDependencyGraph.ts

@@ -2,12 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {type Node} from './BaseNode.js';
-import {CPUNode} from './CPUNode.js';
-import {NetworkNode} from './NetworkNode.js';
 import * as Core from '../core/core.js';
 import type * as Lantern from '../types/types.js';
 
+import type {Node} from './BaseNode.js';
+import {CPUNode} from './CPUNode.js';
+import {NetworkNode} from './NetworkNode.js';
+
 // COMPAT: m71+ We added RunTask to `disabled-by-default-lighthouse`
 const SCHEDULABLE_TASK_TITLE_LH = 'RunTask';
 // m69-70 DoWork is different and we now need RunTask, see https://bugs.chromium.org/p/chromium/issues/detail?id=871204#c11

package/front_end/models/trace/lantern/simulation/TCPConnection.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {type ConnectionTiming} from './SimulationTimingMap.js';
+import type {ConnectionTiming} from './SimulationTimingMap.js';
 
 interface DownloadOptions {
   dnsResolutionTime?: number;

package/front_end/models/trace/lantern/testing/MetricTestUtils.ts

@@ -13,7 +13,7 @@ function toLanternTrace(traceEvents: readonly Trace.Types.Events.Event[]): Lante
 
 async function runTrace(trace: Lantern.Types.Trace) {
   const processor = Trace.Processor.TraceProcessor.createWithAllHandlers();
-  await processor.parse(trace.traceEvents as Trace.Types.Events.Event[]);
+  await processor.parse(trace.traceEvents as Trace.Types.Events.Event[], {isCPUProfile: false, isFreshRecording: true});
   if (!processor.parsedTrace) {
     throw new Error('No data');
   }

package/front_end/models/trace/root-causes/LayoutShift.ts

@@ -4,11 +4,11 @@
 
 import * as Platform from '../../../core/platform/platform.js';
 import type * as Protocol from '../../../generated/protocol.js';
-import {type ParsedTrace} from '../handlers/types.js';
+import type {ParsedTrace} from '../handlers/types.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import {type RootCauseProtocolInterface} from './RootCauses.js';
+import type {RootCauseProtocolInterface} from './RootCauses.js';
 
 export type CSSDimensions = {
   width?: string,
@@ -61,25 +61,8 @@ function setDefaultValue(
   });
 }
 
-// Important: we purposefully treat `potentially_blocking` as
-// non-render-blocking here because:
-// 1. An async script can run on the main thread at any point, including before
-//    the page is loaded
-// 2. An async script will never block the parsing and rendering process of the
-//    browser.
-// 3. Therefore, from a developer's point of view, there is nothing more they
-//    can do if they've put `async` on, and within the context of Insights, we
-//    shouldn't report an async script as render blocking.
-// In the future we may want to consider suggesting the use of `defer` over
-// `async`, as it doesn't have this concern, but for now we'll allow `async`
-// and not report it as an issue.
-const NON_RENDER_BLOCKING_VALUES = new Set<Types.Events.RenderBlocking>([
-  'non_blocking',
-  'potentially_blocking',
-]);
 function networkRequestIsRenderBlockingInFrame(event: Types.Events.SyntheticNetworkRequest, frameId: string): boolean {
-  const isRenderBlocking = !NON_RENDER_BLOCKING_VALUES.has(event.args.data.renderBlocking);
-  return isRenderBlocking && event.args.data.frame === frameId;
+  return event.args.data.frame === frameId && Helpers.Network.isSyntheticNetworkRequestEventRenderBlocking(event);
 }
 
 interface Options {

package/front_end/models/trace/types/Extensions.ts

@@ -2,16 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {
-  type Args,
-  type Event,
-  type Phase,
-  type SyntheticBased,
-} from './TraceEvents.js';
+import type {Args, Event, Phase, SyntheticBased} from './TraceEvents.js';
 
 export type ExtensionEntryType = 'track-entry'|'marker';
 
-const extensionPalette = [
+export const extensionPalette = [
   'primary',
   'primary-light',
   'primary-dark',
@@ -22,6 +17,7 @@ const extensionPalette = [
   'tertiary-light',
   'tertiary-dark',
   'error',
+  'warning',
 ] as const;
 
 export type ExtensionColorFromPalette = typeof extensionPalette[number];

package/front_end/models/trace/types/File.ts

@@ -3,14 +3,8 @@
 // found in the LICENSE file.
 import type * as Protocol from '../../../generated/protocol.js';
 
-import {type TraceWindowMicroSeconds} from './Timing.js';
-import {
-  type Event,
-  type LegacyTimelineFrame,
-  type ProcessID,
-  type SampleIndex,
-  type ThreadID,
-} from './TraceEvents.js';
+import type {TraceWindowMicroSeconds} from './Timing.js';
+import type {Event, LegacyTimelineFrame, ProcessID, SampleIndex, ThreadID} from './TraceEvents.js';
 
 export type TraceFile = {
   traceEvents: readonly Event[],

package/front_end/models/trace/types/TraceEvents.ts

@@ -5,7 +5,7 @@
 /* eslint-disable no-unused-private-class-members */
 import type * as Protocol from '../../../generated/protocol.js';
 
-import {type MicroSeconds, type MilliSeconds, type Seconds, type TraceWindowMicroSeconds} from './Timing.js';
+import type {MicroSeconds, MilliSeconds, Seconds, TraceWindowMicroSeconds} from './Timing.js';
 
 // Trace Events.
 export const enum Phase {
@@ -333,6 +333,7 @@ interface SyntheticArgsData {
   ssl: MicroSeconds;
   stalled: MicroSeconds;
   totalTime: MicroSeconds;
+  /** Server response time (receiveHeadersEnd - sendEnd) */
   waiting: MicroSeconds;
 }
 
@@ -775,6 +776,8 @@ export interface MainFrameViewport extends Instant {
     data: ArgsData&{
       // eslint-disable-next-line @typescript-eslint/naming-convention
       viewport_rect: number[],
+      /** Device Pixel Ratio. Added in m128 */
+      dpr: number,
     },
   };
 }
@@ -842,12 +845,13 @@ type LayoutShiftData = ArgsData&{
   is_main_frame: boolean,
   overall_max_distance: number,
   region_rects: TraceRect[],
+  /** @deprecated This value will incorrectly overreport for shifts within an iframe. */
   score: number,
+  /** This is the preferred "score", used for CLS. If `is_main_frame` is true, `score` and `weighted_score_delta` will be equal. But if the shift is from an iframe, `weighted_score_delta` will be appropriately reduced to account for the viewport size of that iframe. https://wicg.github.io/layout-instability/#subframe-weighting-factor and b/275509162 */
   weighted_score_delta: number,
   navigationId?: string,
   /* eslint-enable @typescript-eslint/naming-convention */
 };
-// These keys come from the trace data, so we have to use underscores.
 export interface LayoutShift extends Instant {
   name: 'LayoutShift';
   normalized?: boolean;
@@ -866,7 +870,8 @@ interface LayoutShiftSessionWindowData {
   id: number;
 }
 export interface LayoutShiftParsedData {
-  screenshotSource?: string;
+  /** screenshot taken before and after this shift. Before *should* always exist, but after might not at the end of a trace. */
+  screenshots: {before: SyntheticScreenshot|null, after: SyntheticScreenshot|null};
   timeFromNavigation?: MicroSeconds;
   // The sum of the weighted scores of the shifts that
   // belong to a session window up until this shift
@@ -927,7 +932,8 @@ export interface SyntheticLayoutShiftCluster {
 }
 
 export type FetchPriorityHint = 'low'|'high'|'auto';
-export type RenderBlocking = 'blocking'|'non_blocking'|'in_body_parser_blocking'|'potentially_blocking';
+export type RenderBlocking =
+    'blocking'|'non_blocking'|'in_body_parser_blocking'|'potentially_blocking'|'dynamically_injected_non_blocking';
 
 export interface Initiator {
   type: Protocol.Network.InitiatorType;

package/front_end/models/workspace/UISourceCode.test.ts

@@ -340,11 +340,11 @@ describe('UISourceCode', () => {
 
     sutObject.sut.addLineMessage(Workspace.UISourceCode.Message.Level.ERROR, 'Example Message', 5);
     const messagesSet = sutObject.sut.messages();
-    const addedMessage = messagesSet.values().next().value;
+    const addedMessage = messagesSet.values().next().value!;
 
     assert.strictEqual(messagesSet.size, 1);
-    assert.strictEqual(addedMessage.levelInternal, 'Error');
-    assert.strictEqual(addedMessage.textInternal, 'Example Message');
+    assert.strictEqual(addedMessage.level(), 'Error');
+    assert.strictEqual(addedMessage.text(), 'Example Message');
     assert.strictEqual(addedMessage.range.startLine, 5);
     assert.strictEqual(addedMessage.range.endLine, 5);
   });

package/front_end/models/workspace/WorkspaceImpl.ts

@@ -32,8 +32,8 @@ import * as Common from '../../core/common/common.js';
 import type * as Platform from '../../core/platform/platform.js';
 import type * as TextUtils from '../text_utils/text_utils.js';
 
+import type {SearchConfig} from './SearchConfig.js';
 import {UISourceCode, type UISourceCodeMetadata} from './UISourceCode.js';
-import {type SearchConfig} from './SearchConfig.js';
 
 export interface Project {
   workspace(): WorkspaceImpl;

package/front_end/panels/accessibility/AXBreadcrumbsPane.ts

@@ -12,7 +12,7 @@ import * as Feedback from '../../ui/components/panel_feedback/panel_feedback.js'
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import {type AccessibilitySidebarView} from './AccessibilitySidebarView.js';
+import type {AccessibilitySidebarView} from './AccessibilitySidebarView.js';
 import {AccessibilitySubPane} from './AccessibilitySubPane.js';
 import axBreadcrumbsStyles from './axBreadcrumbs.css.js';
 

package/front_end/panels/animation/AnimationGroupPreviewUI.ts

@@ -6,7 +6,7 @@ import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import {type AnimationGroup} from './AnimationModel.js';
+import type {AnimationGroup} from './AnimationModel.js';
 import {AnimationUI} from './AnimationUI.js';
 
 export class AnimationGroupPreviewUI {

package/front_end/panels/animation/AnimationModel.ts

@@ -147,7 +147,7 @@ export class AnimationModel extends SDK.SDKModel.SDKModel<EventTypes> {
 
   private createGroupFromPendingAnimations(): AnimationGroup {
     console.assert(this.#pendingAnimations.size > 0);
-    const firstAnimationId = this.#pendingAnimations.values().next().value;
+    const firstAnimationId = this.#pendingAnimations.values().next().value as string;
     this.#pendingAnimations.delete(firstAnimationId);
 
     const firstAnimation = this.#animationsById.get(firstAnimationId);

package/front_end/panels/animation/AnimationTimeline.ts

@@ -11,7 +11,7 @@ import * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import {type AnimationDOMNode} from './AnimationDOMNode.js';
+import type {AnimationDOMNode} from './AnimationDOMNode.js';
 import {AnimationGroupPreviewUI} from './AnimationGroupPreviewUI.js';
 import {
   type AnimationEffect,

package/front_end/panels/animation/AnimationUI.ts

@@ -11,7 +11,7 @@ import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_e
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import {type AnimationImpl, type KeyframeStyle} from './AnimationModel.js';
+import type {AnimationImpl, KeyframeStyle} from './AnimationModel.js';
 import {type AnimationTimeline, StepTimingFunction} from './AnimationTimeline.js';
 
 const UIStrings = {

package/front_end/panels/application/ApplicationPanelSidebar.test.ts

@@ -4,6 +4,7 @@
 
 import type * as Common from '../../core/common/common.js';
 import type * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import {createTarget, stubNoopSettings} from '../../testing/EnvironmentHelpers.js';
@@ -59,6 +60,8 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
   const TEST_ORIGIN_B = 'http://www.example.org/';
   const TEST_ORIGIN_C = 'http://www.example.net/';
 
+  const TEST_EXTENSION_NAME = 'Test Extension';
+
   const ID = 'AA' as Protocol.Page.FrameId;
 
   const EVENTS = [
@@ -192,6 +195,93 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
     assert.deepEqual(sidebar.sharedStorageListTreeElement.view.getEventsForTesting(), EVENTS);
   });
 
+  it('shows extension storage based on added models', async () => {
+    Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.EXTENSION_STORAGE_VIEWER);
+
+    for (const useTreeView of [false, true]) {
+      Application.ResourcesPanel.ResourcesPanel.instance({forceNew: true});
+      const sidebar = await Application.ResourcesPanel.ResourcesPanel.showAndGetSidebar();
+
+      // Cast to any allows overriding private method.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      sinon.stub(sidebar, 'useTreeViewForExtensionStorage' as any).returns(useTreeView);
+
+      const extensionStorageModel = target.model(Application.ExtensionStorageModel.ExtensionStorageModel);
+      assert.exists(extensionStorageModel);
+
+      const makeFakeExtensionStorage = (storageArea: Protocol.Extensions.StorageArea) =>
+          new Application.ExtensionStorageModel.ExtensionStorage(
+              extensionStorageModel, '', TEST_EXTENSION_NAME, storageArea);
+
+      const fakeModelLocal = makeFakeExtensionStorage(Protocol.Extensions.StorageArea.Local);
+      const fakeModelSession = makeFakeExtensionStorage(Protocol.Extensions.StorageArea.Session);
+
+      extensionStorageModel.dispatchEventToListeners(
+          Application.ExtensionStorageModel.Events.EXTENSION_STORAGE_ADDED, fakeModelLocal);
+      extensionStorageModel.dispatchEventToListeners(
+          Application.ExtensionStorageModel.Events.EXTENSION_STORAGE_ADDED, fakeModelSession);
+
+      if (useTreeView) {
+        assert.strictEqual(sidebar.extensionStorageListTreeElement!.childCount(), 1);
+        assert.strictEqual(sidebar.extensionStorageListTreeElement!.children()[0].title, TEST_EXTENSION_NAME);
+        assert.deepStrictEqual(
+            sidebar.extensionStorageListTreeElement!.children()[0].children().map(e => e.title), ['Session', 'Local']);
+      } else {
+        assert.strictEqual(sidebar.extensionStorageListTreeElement!.childCount(), 2);
+        assert.deepStrictEqual(
+            sidebar.extensionStorageListTreeElement!.children().map(e => e.title), ['Session', 'Local']);
+      }
+
+      extensionStorageModel.dispatchEventToListeners(
+          Application.ExtensionStorageModel.Events.EXTENSION_STORAGE_REMOVED, fakeModelLocal);
+      extensionStorageModel.dispatchEventToListeners(
+          Application.ExtensionStorageModel.Events.EXTENSION_STORAGE_REMOVED, fakeModelSession);
+      assert.strictEqual(sidebar.extensionStorageListTreeElement!.childCount(), 0);
+    }
+  });
+
+  it('does not add extension storage if already added by another model', async () => {
+    Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.EXTENSION_STORAGE_VIEWER);
+
+    Application.ResourcesPanel.ResourcesPanel.instance({forceNew: true});
+    const sidebar = await Application.ResourcesPanel.ResourcesPanel.showAndGetSidebar();
+
+    // Fakes adding an ExtensionStorage to the ExtensionStorageModel for
+    // `target`. Returns a function that can be used to trigger a removal.
+    const addFakeExtensionStorage = (target: SDK.Target.Target): () => void => {
+      const model = target.model(Application.ExtensionStorageModel.ExtensionStorageModel);
+      assert.exists(model);
+
+      const extensionStorage = new Application.ExtensionStorageModel.ExtensionStorage(
+          model, '', TEST_EXTENSION_NAME, Protocol.Extensions.StorageArea.Local);
+
+      const stub = sinon.stub(model, 'storageForIdAndArea').returns(extensionStorage);
+      model.dispatchEventToListeners(
+          Application.ExtensionStorageModel.Events.EXTENSION_STORAGE_ADDED, extensionStorage);
+
+      return () => {
+        stub.restore();
+        model.dispatchEventToListeners(
+            Application.ExtensionStorageModel.Events.EXTENSION_STORAGE_REMOVED, extensionStorage);
+      };
+    };
+
+    // Add a fake extension storage to the main target. The UI should be updated.
+    addFakeExtensionStorage(target);
+    assert.strictEqual(sidebar.extensionStorageListTreeElement!.children()[0].childCount(), 1);
+
+    // Add a fake extension storage using a non-main target (e.g, an iframe).
+    // Make sure we don't add a second entry to the UI.
+    const removeFrameStorage =
+        addFakeExtensionStorage(createTarget({type: SDK.Target.Type.FRAME, parentTarget: target}));
+    assert.strictEqual(sidebar.extensionStorageListTreeElement!.children()[0].childCount(), 1);
+
+    // Removing the frame also shouldn't do anything, since the main frame
+    // still exists.
+    removeFrameStorage();
+    assert.strictEqual(sidebar.extensionStorageListTreeElement!.children()[0].childCount(), 1);
+  });
+
   async function getExpectedCall(expectedCall: string): Promise<sinon.SinonSpy> {
     Application.ResourcesPanel.ResourcesPanel.instance({forceNew: true});
     const sidebar = await Application.ResourcesPanel.ResourcesPanel.showAndGetSidebar();