chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/models/trace/lantern/core/NetworkAnalyzer.ts

@@ -412,7 +412,7 @@ class NetworkAnalyzer {
       function collectEstimates(estimator: (e: RequestInfo) => number[] | number | undefined, multiplier = 1): void {
         for (const request of originRequests) {
           const timing = request.timing;
-          if (!timing) {
+          if (!timing || !request.transferSize) {
             continue;
           }
 
@@ -489,9 +489,9 @@ class NetworkAnalyzer {
   /**
    * Computes the average throughput for the given requests in bits/second.
    * Excludes data URI, failed or otherwise incomplete, and cached requests.
-   * Returns Infinity if there were no analyzable network requests.
+   * Returns null if there were no analyzable network requests.
    */
-  static estimateThroughput(records: Lantern.NetworkRequest[]): number {
+  static estimateThroughput(records: Lantern.NetworkRequest[]): number|null {
     let totalBytes = 0;
 
     // We will measure throughput by summing the total bytes downloaded by the total time spent
@@ -518,7 +518,7 @@ class NetworkAnalyzer {
                                .sort((a, b) => a.time - b.time);
 
     if (!timeBoundaries.length) {
-      return Infinity;
+      return null;
     }
 
     let inflight = 0;
@@ -576,8 +576,12 @@ class NetworkAnalyzer {
     };
   }
 
-  static analyze(records: Lantern.NetworkRequest[]): Lantern.Simulation.Settings['networkAnalysis'] {
+  static analyze(records: Lantern.NetworkRequest[]): Lantern.Simulation.Settings['networkAnalysis']|null {
     const throughput = NetworkAnalyzer.estimateThroughput(records);
+    if (throughput === null) {
+      return null;
+    }
+
     return {
       throughput,
       ...NetworkAnalyzer.computeRTTAndServerResponseTime(records),

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

@@ -143,7 +143,7 @@ class Simulator<T = Lantern.AnyNetworkObject> {
       throw new Core.LanternError(`Invalid rtt ${this._rtt}`);
     }
     if (!Number.isFinite(this.throughput)) {
-      throw new Core.LanternError(`Invalid rtt ${this.throughput}`);
+      throw new Core.LanternError(`Invalid throughput ${this.throughput}`);
     }
   }
 

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

@@ -32,6 +32,10 @@ async function getComputationDataFromFixture({trace, settings, url}: {
   const parsedTrace = await runTrace(trace);
   const requests = Trace.LanternComputationData.createNetworkRequests(trace, parsedTrace);
   const networkAnalysis = Lantern.Core.NetworkAnalyzer.analyze(requests);
+  if (!networkAnalysis) {
+    throw new Error('no networkAnalysis');
+  }
+
   const frameId = parsedTrace.Meta.mainFrameId;
   const navigationId = parsedTrace.Meta.mainFrameNavigations[0].args.data?.navigationId;
   if (!navigationId) {

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

@@ -52,6 +52,8 @@ export const enum Phase {
   CLOCK_SYNC = 'c',
 }
 
+export type NonEmptyString = string&{_tag: 'NonEmptyString'};
+
 export function isNestableAsyncPhase(phase: Phase): boolean {
   return phase === Phase.ASYNC_NESTABLE_START || phase === Phase.ASYNC_NESTABLE_END ||
       phase === Phase.ASYNC_NESTABLE_INSTANT;
@@ -266,28 +268,38 @@ export interface End extends Event {
  */
 export type SyntheticComplete = Complete;
 
-export interface EventTiming extends Event {
-  ph: Phase.ASYNC_NESTABLE_START|Phase.ASYNC_NESTABLE_END;
+// TODO(paulirish): Migrate to the new (Sept 2024) EventTiming trace events.
+// See https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/timing/window_performance.cc;l=900-901;drc=b503c262e425eae59ced4a80d59d176ed07152c7
+export type EventTimingBeginOrEnd = EventTimingBegin|EventTimingEnd;
+
+export interface EventTimingBegin extends Event {
+  ph: Phase.ASYNC_NESTABLE_START;
   name: Name.EVENT_TIMING;
   id: string;
   args: Args&{
-    frame: string,
-    data?: ArgsData&{
+    // https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/timing/performance_event_timing.cc;l=297;drc=4f00803ca25c0d0480ed14844d6406933c21e80e
+    data: ArgsData & {
       cancelable: boolean,
       duration: MilliSeconds,
-      processingEnd: MilliSeconds,
-      processingStart: MilliSeconds,
-      timeStamp: MilliSeconds,
-      interactionId?: number, type: string,
+      type: string,
+      interactionId: number,
+      interactionOffset: number,
+      nodeId: Protocol.DOM.BackendNodeId,
+      frame?: string,  // From May 2022 onwards, this is where frame is located. https://chromium-review.googlesource.com/c/chromium/src/+/3632661
+      processingEnd?: MilliSeconds,
+      processingStart?: MilliSeconds,
+      timeStamp?: MilliSeconds,
+      enqueuedToMainThreadTime?: MilliSeconds,
+      commitFinishTime?: MilliSeconds,
     },
+    frame?: string,  // Prior to May 2022, `frame` was here in args.
   };
 }
-
-export interface EventTimingBegin extends EventTiming {
-  ph: Phase.ASYNC_NESTABLE_START;
-}
-export interface EventTimingEnd extends EventTiming {
+export interface EventTimingEnd extends Event {
   ph: Phase.ASYNC_NESTABLE_END;
+  name: Name.EVENT_TIMING;
+  id: string;
+  args: Args;
 }
 
 export interface GPUTask extends Complete {
@@ -584,11 +596,13 @@ export interface Mark extends Event {
   ph: Phase.MARK;
 }
 
-export interface NavigationStart extends Mark {
+// An unreliable and non-legit navigationStart. See NavigationStartWithUrl
+export interface NavigationStartUnreliable extends Mark {
   name: 'navigationStart';
   args: Args&{
     data?: ArgsData & {
-      documentLoaderURL: string,
+      /** An empty documentLoaderURL means this navigationStart is unreliable noise and can be ignored. */
+      documentLoaderURL: never,
       isLoadingMainFrame: boolean,
       // isOutermostMainFrame was introduced in crrev.com/c/3625434 and exists
       // because of Fenced Frames
@@ -613,6 +627,16 @@ export interface NavigationStart extends Mark {
   };
 }
 
+// NavigationStart but definitely has a populated documentLoaderURL
+export interface NavigationStart extends NavigationStartUnreliable {
+  args: NavigationStartUnreliable['args']&{
+    data: NavigationStartUnreliable['args']['data'] & {
+      /** This navigationStart is valid, as the documentLoaderURL isn't empty. */
+      documentLoaderURL: NonEmptyString,
+    },
+  };
+}
+
 export interface FirstContentfulPaint extends Mark {
   name: Name.MARK_FCP;
   args: Args&{
@@ -951,8 +975,10 @@ export interface ResourceSendRequest extends Instant {
       requestId: string,
       url: string,
       priority: Protocol.Network.ResourcePriority,
-      resourceType: Protocol.Network.ResourceType,
-      fetchPriorityHint: FetchPriorityHint,
+      /** Added Feb 2024. https://crrev.com/c/5277583 */
+      resourceType?: Protocol.Network.ResourceType,
+      /** Added Feb 2024. https://crrev.com/c/5297615 */
+      fetchPriorityHint?: FetchPriorityHint,
       // TODO(crbug.com/1457985): change requestMethod to enum when confirm in the backend code.
       requestMethod?: string,
       renderBlocking?: RenderBlocking,
@@ -972,8 +998,9 @@ export interface ResourceChangePriority extends Instant {
   };
 }
 
+/** Only sent for navigations. https://source.chromium.org/chromium/chromium/src/+/main:content/browser/devtools/devtools_instrumentation.cc;l=1612-1647;drc=ec7daf93d0479b758610c75f4e146fd4d2d6ed2b */
 export interface ResourceWillSendRequest extends Instant {
-  name: 'ResourceWillSendRequest';
+  name: Name.RESOURCE_WILL_SEND_REQUEST;
   args: Args&{
     data: ArgsData & {
       requestId: string,
@@ -1005,6 +1032,7 @@ export interface ResourceReceivedData extends Instant {
   };
 }
 
+/** See https://mdn.github.io/shared-assets/images/diagrams/api/performance/timestamp-diagram.svg  */
 interface ResourceReceiveResponseTimingData {
   connectEnd: MilliSeconds;
   connectStart: MilliSeconds;
@@ -1016,6 +1044,7 @@ interface ResourceReceiveResponseTimingData {
   pushStart: MilliSeconds;
   receiveHeadersEnd: MilliSeconds;
   receiveHeadersStart: MilliSeconds;
+  /** When the network service is about to handle a request, ie. just before going to the HTTP cache or going to the network for DNS/connection setup. */
   requestTime: Seconds;
   sendEnd: MilliSeconds;
   sendStart: MilliSeconds;
@@ -1191,10 +1220,25 @@ export interface RenderFrameImplCreateChildFrame extends Event {
     frame_token: string,
   };
 }
+
 export function isRenderFrameImplCreateChildFrame(event: Event): event is RenderFrameImplCreateChildFrame {
   return event.name === Name.RENDER_FRAME_IMPL_CREATE_CHILD_FRAME;
 }
 
+export interface LayoutImageUnsized extends Event {
+  name: Name.LAYOUT_IMAGE_UNSIZED;
+  args: Args&{
+    data: {
+      nodeId: Protocol.DOM.BackendNodeId,
+      frameId: string,
+    },
+  };
+}
+
+export function isLayoutImageUnsized(event: Event): event is LayoutImageUnsized {
+  return event.name === Name.LAYOUT_IMAGE_UNSIZED;
+}
+
 export interface PrePaint extends Complete {
   name: 'PrePaint';
 }
@@ -1432,7 +1476,7 @@ export type SyntheticConsoleTimingPair = SyntheticEventPair<ConsoleTime>;
 
 export type SyntheticAnimationPair = SyntheticEventPair<Animation>;
 
-export interface SyntheticInteractionPair extends SyntheticEventPair<EventTiming> {
+export interface SyntheticInteractionPair extends SyntheticEventPair<EventTimingBeginOrEnd> {
   // InteractionID and type are available within the beginEvent's data, but we
   // put them on the top level for ease of access.
   interactionId: number;
@@ -1906,9 +1950,10 @@ export function isCommitLoad(
   return event.name === 'CommitLoad';
 }
 
-export function isNavigationStart(
+/** @deprecated You probably want `isNavigationStart` instead. */
+export function isNavigationStartUnreliable(
     event: Event,
-    ): event is NavigationStart {
+    ): event is NavigationStartUnreliable {
   return event.name === 'navigationStart';
 }
 
@@ -1972,7 +2017,7 @@ export function isInteractiveTime(event: Event): event is InteractiveTime {
   return event.name === 'InteractiveTime';
 }
 
-export function isEventTiming(event: Event): event is EventTiming {
+export function isEventTiming(event: Event): event is EventTimingBeginOrEnd {
   return event.name === Name.EVENT_TIMING;
 }
 
@@ -2063,8 +2108,9 @@ export function isPrePaint(
   return event.name === 'PrePaint';
 }
 
-export function isNavigationStartWithURL(event: Event): event is NavigationStart {
-  return Boolean(isNavigationStart(event) && event.args.data && event.args.data.documentLoaderURL !== '');
+/** A VALID navigation start (as it has a populated documentLoaderURL) */
+export function isNavigationStart(event: Event): event is NavigationStart {
+  return Boolean(isNavigationStartUnreliable(event) && event.args.data && event.args.data.documentLoaderURL !== '');
 }
 
 export function isMainFrameViewport(
@@ -2535,6 +2581,51 @@ export function isSyntheticServerTiming(event: Event): event is SyntheticServerT
   return event.cat === 'devtools.server-timing';
 }
 
+export interface SchedulePostTaskCallback extends Instant {
+  name: Name.SCHEDULE_POST_TASK_CALLBACK;
+  args: Args&{
+    data: {
+      taskId: number,
+      priority: 'user-blocking'|'user-visible'|'background',
+      delay: MilliSeconds,
+      frame?: string,
+      stackTrace?: CallFrame,
+    },
+  };
+}
+export function isSchedulePostTaskCallback(event: Event): event is SchedulePostTaskCallback {
+  return event.name === Name.SCHEDULE_POST_TASK_CALLBACK;
+}
+
+export interface RunPostTaskCallback extends Complete {
+  name: Name.RUN_POST_TASK_CALLBACK;
+  args: Args&{
+    data: {
+      taskId: number,
+      priority: 'user-blocking'|'user-visible'|'background',
+      delay: MilliSeconds,
+      frame?: string,
+    },
+  };
+}
+export function isRunPostTaskCallback(event: Event): event is RunPostTaskCallback {
+  return event.name === Name.RUN_POST_TASK_CALLBACK;
+}
+
+export interface AbortPostTaskCallback extends Complete {
+  name: Name.ABORT_POST_TASK_CALLBACK;
+  args: Args&{
+    data: {
+      taskId: number,
+      frame?: string,
+      stackTrace?: CallFrame,
+    },
+  };
+}
+export function isAbortPostTaskCallback(event: Event): event is RunPostTaskCallback {
+  return event.name === Name.ABORT_POST_TASK_CALLBACK;
+}
+
 /**
  * Generally, before JS is executed, a trace event is dispatched that
  * parents the JS calls. These we call "invocation" events. This
@@ -2628,6 +2719,9 @@ export const enum Name {
   CRYPTO_DO_VERIFY = 'DoVerify',
   CRYPTO_DO_VERIFY_REPLY = 'DoVerifyReply',
   V8_EXECUTE = 'V8.Execute',
+  SCHEDULE_POST_TASK_CALLBACK = 'SchedulePostTaskCallback',
+  RUN_POST_TASK_CALLBACK = 'RunPostTaskCallback',
+  ABORT_POST_TASK_CALLBACK = 'AbortPostTaskCallback',
 
   /* Gc */
   GC = 'GCEvent',
@@ -2756,6 +2850,7 @@ export const enum Name {
   HANDLE_POST_MESSAGE = 'HandlePostMessage',
 
   RENDER_FRAME_IMPL_CREATE_CHILD_FRAME = 'RenderFrameImpl::createChildFrame',
+  LAYOUT_IMAGE_UNSIZED = 'LayoutImageUnsized',
 
   DOM_LOADING = 'domLoading',
   BEGIN_REMOTE_FONT_LOAD = 'BeginRemoteFontLoad',

package/front_end/panels/accessibility/AccessibilitySidebarView.ts

@@ -24,7 +24,7 @@ export class AccessibilitySidebarView extends UI.ThrottledWidget.ThrottledWidget
   private readonly axNodeSubPane: AXNodeSubPane;
   private readonly sourceOrderSubPane: SourceOrderPane;
   private constructor(throttlingTimeout?: number) {
-    super(false /* isWebComponent */, throttlingTimeout);
+    super(false /* useShadowDom */, throttlingTimeout);
     this.nodeInternal = null;
     this.axNodeInternal = null;
     this.skipNextPullNode = false;

package/front_end/panels/animation/AnimationGroupPreviewUI.ts

@@ -2,22 +2,22 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * as SDK from '../../core/sdk/sdk.js';
 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 {AnimationUI} from './AnimationUI.js';
 
 export class AnimationGroupPreviewUI {
-  #model: AnimationGroup;
+  #model: SDK.AnimationModel.AnimationGroup;
   element: HTMLButtonElement;
   readonly #removeButtonInternal: HTMLElement;
   readonly #replayOverlayElement: HTMLElement;
   readonly #svg: Element;
   readonly #viewBoxHeight: number;
 
-  constructor(model: AnimationGroup) {
+  constructor(model: SDK.AnimationModel.AnimationGroup) {
     this.#model = model;
     this.element = document.createElement('button');
     this.element.setAttribute(

package/front_end/panels/animation/AnimationTimeline.test.ts

@@ -92,21 +92,21 @@ const cancelAllPendingRaf = () => {
 };
 
 const stubAnimationGroup = () => {
-  sinon.stub(Animation.AnimationModel.AnimationGroup.prototype, 'scrollNode')
-      .resolves(new Animation.AnimationDOMNode.AnimationDOMNode(null as unknown as SDK.DOMModel.DOMNode));
+  sinon.stub(SDK.AnimationModel.AnimationGroup.prototype, 'scrollNode')
+      .resolves(new SDK.AnimationModel.AnimationDOMNode(null as unknown as SDK.DOMModel.DOMNode));
 };
 
 const stubAnimationDOMNode = (): AnimationDOMNodeStubs => {
   const verticalScrollRange =
-      sinon.stub(Animation.AnimationDOMNode.AnimationDOMNode.prototype, 'verticalScrollRange').resolves(100);
+      sinon.stub(SDK.AnimationModel.AnimationDOMNode.prototype, 'verticalScrollRange').resolves(100);
   const horizontalScrollRange =
-      sinon.stub(Animation.AnimationDOMNode.AnimationDOMNode.prototype, 'horizontalScrollRange').resolves(100);
-  const scrollLeft = sinon.stub(Animation.AnimationDOMNode.AnimationDOMNode.prototype, 'scrollLeft').resolves(10);
-  const scrollTop = sinon.stub(Animation.AnimationDOMNode.AnimationDOMNode.prototype, 'scrollTop').resolves(10);
+      sinon.stub(SDK.AnimationModel.AnimationDOMNode.prototype, 'horizontalScrollRange').resolves(100);
+  const scrollLeft = sinon.stub(SDK.AnimationModel.AnimationDOMNode.prototype, 'scrollLeft').resolves(10);
+  const scrollTop = sinon.stub(SDK.AnimationModel.AnimationDOMNode.prototype, 'scrollTop').resolves(10);
   const addScrollEventListener =
-      sinon.stub(Animation.AnimationDOMNode.AnimationDOMNode.prototype, 'addScrollEventListener').resolves();
+      sinon.stub(SDK.AnimationModel.AnimationDOMNode.prototype, 'addScrollEventListener').resolves();
   const removeScrollEventListener =
-      sinon.stub(Animation.AnimationDOMNode.AnimationDOMNode.prototype, 'removeScrollEventListener').resolves();
+      sinon.stub(SDK.AnimationModel.AnimationDOMNode.prototype, 'removeScrollEventListener').resolves();
   return {
     verticalScrollRange,
     horizontalScrollRange,
@@ -159,7 +159,7 @@ describeWithMockConnection('AnimationTimeline', () => {
 
   const updatesUiOnEvent = (inScope: boolean) => async () => {
     SDK.TargetManager.TargetManager.instance().setScopeTarget(inScope ? target : null);
-    const model = target.model(Animation.AnimationModel.AnimationModel);
+    const model = target.model(SDK.AnimationModel.AnimationModel);
     assert.exists(model);
 
     view = Animation.AnimationTimeline.AnimationTimeline.instance({forceNew: true});
@@ -239,7 +239,7 @@ describeWithMockConnection('AnimationTimeline', () => {
     const waitForAnimationGroupSelectedPromise = new ManualPromise();
 
     let domModel: SDK.DOMModel.DOMModel;
-    let animationModel: Animation.AnimationModel.AnimationModel;
+    let animationModel: SDK.AnimationModel.AnimationModel;
     let contentDocument: SDK.DOMModel.DOMDocument;
     beforeEach(async () => {
       view = Animation.AnimationTimeline.AnimationTimeline.instance({forceNew: true});
@@ -253,7 +253,7 @@ describeWithMockConnection('AnimationTimeline', () => {
         waitForPreviewsManualPromise.resolve();
       });
 
-      const model = target.model(Animation.AnimationModel.AnimationModel);
+      const model = target.model(SDK.AnimationModel.AnimationModel);
       assert.exists(model);
       animationModel = model;
 
@@ -389,7 +389,7 @@ describeWithMockConnection('AnimationTimeline', () => {
     const waitForScheduleRedrawAfterAnimationGroupUpdated = new ManualPromise();
 
     let domModel: SDK.DOMModel.DOMModel;
-    let animationModel: Animation.AnimationModel.AnimationModel;
+    let animationModel: SDK.AnimationModel.AnimationModel;
     let contentDocument: SDK.DOMModel.DOMDocument;
     beforeEach(async () => {
       view = Animation.AnimationTimeline.AnimationTimeline.instance({forceNew: true});
@@ -406,7 +406,7 @@ describeWithMockConnection('AnimationTimeline', () => {
         waitForScheduleRedrawAfterAnimationGroupUpdated.resolve();
       });
 
-      const model = target.model(Animation.AnimationModel.AnimationModel);
+      const model = target.model(SDK.AnimationModel.AnimationModel);
       assert.isNotNull(model);
       animationModel = model;
 
@@ -481,7 +481,7 @@ describeWithMockConnection('AnimationTimeline', () => {
     const waitForScheduleRedrawAfterAnimationGroupUpdated = new ManualPromise();
 
     let domModel: SDK.DOMModel.DOMModel;
-    let animationModel: Animation.AnimationModel.AnimationModel;
+    let animationModel: SDK.AnimationModel.AnimationModel;
     let contentDocument: SDK.DOMModel.DOMDocument;
     beforeEach(async () => {
       stubbedAnimationDOMNode = stubAnimationDOMNode();
@@ -501,7 +501,7 @@ describeWithMockConnection('AnimationTimeline', () => {
         waitForScheduleRedrawAfterAnimationGroupUpdated.resolve();
       });
 
-      const model = target.model(Animation.AnimationModel.AnimationModel);
+      const model = target.model(SDK.AnimationModel.AnimationModel);
       assert.exists(model);
       animationModel = model;