chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

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;
@@ -945,8 +951,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,
@@ -1185,10 +1193,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';
 }
@@ -2529,6 +2552,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
@@ -2622,6 +2690,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',
@@ -2750,6 +2821,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/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/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;
 

package/front_end/panels/animation/AnimationTimeline.ts

@@ -11,15 +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 {AnimationGroupPreviewUI} from './AnimationGroupPreviewUI.js';
-import {
-  type AnimationEffect,
-  type AnimationGroup,
-  type AnimationImpl,
-  AnimationModel,
-  Events,
-} from './AnimationModel.js';
 import {AnimationScreenshotPopover} from './AnimationScreenshotPopover.js';
 import animationTimelineStyles from './animationTimeline.css.js';
 import {AnimationUI} from './AnimationUI.js';
@@ -97,7 +89,8 @@ const MAX_TIMELINE_CONTROLS_WIDTH = 720;
 
 let animationTimelineInstance: AnimationTimeline;
 
-export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManager.SDKModelObserver<AnimationModel> {
+export class AnimationTimeline extends UI.Widget.VBox implements
+    SDK.TargetManager.SDKModelObserver<SDK.AnimationModel.AnimationModel> {
   #gridWrapper: HTMLElement;
   #grid: Element;
   #playbackRate: number;
@@ -109,16 +102,16 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
   #timelineScrubber!: HTMLElement;
   #currentTime!: HTMLElement;
   #clearButton!: UI.Toolbar.ToolbarButton;
-  #selectedGroup!: AnimationGroup|null;
+  #selectedGroup!: SDK.AnimationModel.AnimationGroup|null;
   #renderQueue!: AnimationUI[];
   #defaultDuration: number;
   #durationInternal: number;
   #timelineControlsWidth: number;
   readonly #nodesMap: Map<number, NodeUI>;
   #uiAnimations: AnimationUI[];
-  #groupBuffer: AnimationGroup[];
-  readonly #previewMap: Map<AnimationGroup, AnimationGroupPreviewUI>;
-  readonly #animationsMap: Map<string, AnimationImpl>;
+  #groupBuffer: SDK.AnimationModel.AnimationGroup[];
+  readonly #previewMap: Map<SDK.AnimationModel.AnimationGroup, AnimationGroupPreviewUI>;
+  readonly #animationsMap: Map<string, SDK.AnimationModel.AnimationImpl>;
   #timelineScrubberLine?: HTMLElement;
   #pauseButton?: UI.Toolbar.ToolbarToggle;
   #controlButton?: UI.Toolbar.ToolbarButton;
@@ -133,13 +126,10 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
   #timelineControlsResizer: HTMLElement;
   #gridHeader!: HTMLElement;
   #scrollListenerId?: number|null;
-  #collectedGroups: AnimationGroup[];
+  #collectedGroups: SDK.AnimationModel.AnimationGroup[];
   #createPreviewForCollectedGroupsThrottler: Common.Throttler.Throttler = new Common.Throttler.Throttler(10);
   #animationGroupUpdatedThrottler: Common.Throttler.Throttler = new Common.Throttler.Throttler(10);
 
-  // We're only adding event listeners to the animation model when the panel is first shown.
-  #initialized: boolean = false;
-
   private constructor() {
     super(true);
 
@@ -175,7 +165,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.DOMModel.DOMModel, SDK.DOMModel.Events.NodeRemoved, ev => this.markNodeAsRemoved(ev.data.node), this,
         {scoped: true});
-    SDK.TargetManager.TargetManager.instance().observeModels(AnimationModel, this, {scoped: true});
+    SDK.TargetManager.TargetManager.instance().observeModels(SDK.AnimationModel.AnimationModel, this, {scoped: true});
     UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.nodeChanged, this);
 
     this.#setupTimelineControlsResizer();
@@ -214,7 +204,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
         'ew-resize');
   }
 
-  get previewMap(): Map<AnimationGroup, AnimationGroupPreviewUI> {
+  get previewMap(): Map<SDK.AnimationModel.AnimationGroup, AnimationGroupPreviewUI> {
     return this.#previewMap;
   }
 
@@ -222,43 +212,75 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
     return this.#uiAnimations;
   }
 
-  get groupBuffer(): AnimationGroup[] {
+  get groupBuffer(): SDK.AnimationModel.AnimationGroup[] {
     return this.#groupBuffer;
   }
 
   override wasShown(): void {
-    if (this.#initialized) {
-      return;
-    }
-
-    for (const animationModel of SDK.TargetManager.TargetManager.instance().models(AnimationModel, {scoped: true})) {
+    for (const animationModel of SDK.TargetManager.TargetManager.instance().models(
+             SDK.AnimationModel.AnimationModel, {scoped: true})) {
+      this.#addExistingAnimationGroups(animationModel);
       this.addEventListeners(animationModel);
     }
     this.registerCSSFiles([animationTimelineStyles]);
-    this.#initialized = true;
   }
 
-  modelAdded(animationModel: AnimationModel): void {
+  override willHide(): void {
+    for (const animationModel of SDK.TargetManager.TargetManager.instance().models(
+             SDK.AnimationModel.AnimationModel, {scoped: true})) {
+      this.removeEventListeners(animationModel);
+    }
+  }
+
+  #addExistingAnimationGroups(animationModel: SDK.AnimationModel.AnimationModel): void {
+    for (const animationGroup of animationModel.animationGroups.values()) {
+      if (this.#previewMap.has(animationGroup)) {
+        continue;
+      }
+
+      void this.addAnimationGroup(animationGroup);
+    }
+  }
+
+  #showPanelInDrawer(): void {
+    const viewManager = UI.ViewManager.ViewManager.instance();
+    viewManager.moveView('animations', 'drawer-view', {
+      shouldSelectTab: true,
+      overrideSaving: true,
+    });
+  }
+
+  async revealAnimationGroup(animationGroup: SDK.AnimationModel.AnimationGroup): Promise<void> {
+    if (!this.#previewMap.has(animationGroup)) {
+      await this.addAnimationGroup(animationGroup);
+    }
+
+    this.#showPanelInDrawer();
+    return this.selectAnimationGroup(animationGroup);
+  }
+
+  modelAdded(animationModel: SDK.AnimationModel.AnimationModel): void {
     if (this.isShowing()) {
       this.addEventListeners(animationModel);
     }
   }
 
-  modelRemoved(animationModel: AnimationModel): void {
+  modelRemoved(animationModel: SDK.AnimationModel.AnimationModel): void {
     this.removeEventListeners(animationModel);
   }
 
-  private addEventListeners(animationModel: AnimationModel): void {
-    void animationModel.ensureEnabled();
-    animationModel.addEventListener(Events.AnimationGroupStarted, this.animationGroupStarted, this);
-    animationModel.addEventListener(Events.AnimationGroupUpdated, this.animationGroupUpdated, this);
-    animationModel.addEventListener(Events.ModelReset, this.reset, this);
+  private addEventListeners(animationModel: SDK.AnimationModel.AnimationModel): void {
+    animationModel.addEventListener(SDK.AnimationModel.Events.AnimationGroupStarted, this.animationGroupStarted, this);
+    animationModel.addEventListener(SDK.AnimationModel.Events.AnimationGroupUpdated, this.animationGroupUpdated, this);
+    animationModel.addEventListener(SDK.AnimationModel.Events.ModelReset, this.reset, this);
   }
 
-  private removeEventListeners(animationModel: AnimationModel): void {
-    animationModel.removeEventListener(Events.AnimationGroupStarted, this.animationGroupStarted, this);
-    animationModel.removeEventListener(Events.AnimationGroupUpdated, this.animationGroupUpdated, this);
-    animationModel.removeEventListener(Events.ModelReset, this.reset, this);
+  private removeEventListeners(animationModel: SDK.AnimationModel.AnimationModel): void {
+    animationModel.removeEventListener(
+        SDK.AnimationModel.Events.AnimationGroupStarted, this.animationGroupStarted, this);
+    animationModel.removeEventListener(
+        SDK.AnimationModel.Events.AnimationGroupUpdated, this.animationGroupUpdated, this);
+    animationModel.removeEventListener(SDK.AnimationModel.Events.ModelReset, this.reset, this);
   }
 
   private nodeChanged(): void {
@@ -401,7 +423,8 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
     }
 
     this.#playbackRate = playbackRate;
-    for (const animationModel of SDK.TargetManager.TargetManager.instance().models(AnimationModel, {scoped: true})) {
+    for (const animationModel of SDK.TargetManager.TargetManager.instance().models(
+             SDK.AnimationModel.AnimationModel, {scoped: true})) {
       animationModel.setPlaybackRate(this.#allPaused ? 0 : this.#playbackRate);
     }
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.AnimationsPlaybackRateChanged);
@@ -496,7 +519,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
 
   private clearTimeline(): void {
     if (this.#selectedGroup && this.#scrollListenerId) {
-      void this.#selectedGroup.scrollNode().then((node: AnimationDOMNode|null) => {
+      void this.#selectedGroup.scrollNode().then((node: SDK.AnimationModel.AnimationDOMNode|null) => {
         void node?.removeScrollEventListener(this.#scrollListenerId as number);
         this.#scrollListenerId = undefined;
       });
@@ -530,14 +553,16 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
     this.renderGrid();
   }
 
-  private animationGroupStarted({data}: Common.EventTarget.EventTargetEvent<AnimationGroup>): void {
-    this.addAnimationGroup(data);
+  private animationGroupStarted({data}: Common.EventTarget.EventTargetEvent<SDK.AnimationModel.AnimationGroup>): void {
+    void this.addAnimationGroup(data);
   }
 
   scheduledRedrawAfterAnimationGroupUpdatedForTest(): void {
   }
 
-  private animationGroupUpdated({data: group}: Common.EventTarget.EventTargetEvent<AnimationGroup>): void {
+  private animationGroupUpdated({
+    data: group,
+  }: Common.EventTarget.EventTargetEvent<SDK.AnimationModel.AnimationGroup>): void {
     void this.#animationGroupUpdatedThrottler.schedule(async () => {
       const preview = this.#previewMap.get(group);
       if (preview) {
@@ -586,7 +611,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
     this.#screenshotPopovers = [];
   }
 
-  private createPreview(group: AnimationGroup): void {
+  private createPreview(group: SDK.AnimationModel.AnimationGroup): void {
     const preview = new AnimationGroupPreviewUI(group);
 
     const previewUiContainer = document.createElement('div');
@@ -674,7 +699,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
     this.previewsCreatedForTest();
   }
 
-  private addAnimationGroup(group: AnimationGroup): void {
+  private addAnimationGroup(group: SDK.AnimationModel.AnimationGroup): Promise<void> {
     const previewGroup = this.#previewMap.get(group);
     if (previewGroup) {
       if (this.#selectedGroup === group) {
@@ -682,7 +707,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
       } else {
         previewGroup.replay();
       }
-      return;
+      return Promise.resolve();
     }
 
     this.#groupBuffer.sort((left, right) => left.startTime() - right.startTime());
@@ -707,11 +732,11 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
     // Batch creating preview for arrivals happening closely together to ensure
     // stable UI sorting in the preview container.
     this.#collectedGroups.push(group);
-    void this.#createPreviewForCollectedGroupsThrottler.schedule(
+    return this.#createPreviewForCollectedGroupsThrottler.schedule(
         () => Promise.resolve(this.createPreviewForCollectedGroups()));
   }
 
-  private handleAnimationGroupKeyDown(group: AnimationGroup, event: KeyboardEvent): void {
+  private handleAnimationGroupKeyDown(group: SDK.AnimationModel.AnimationGroup, event: KeyboardEvent): void {
     switch (event.key) {
       case 'Backspace':
       case 'Delete':
@@ -727,7 +752,8 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
     }
   }
 
-  private focusNextGroup(group: AnimationGroup, target: EventTarget|null, focusPrevious?: boolean): void {
+  private focusNextGroup(group: SDK.AnimationModel.AnimationGroup, target: EventTarget|null, focusPrevious?: boolean):
+      void {
     const currentGroupIndex = this.#groupBuffer.indexOf(group);
     const nextIndex = focusPrevious ? currentGroupIndex - 1 : currentGroupIndex + 1;
     if (nextIndex < 0 || nextIndex >= this.#groupBuffer.length) {
@@ -744,7 +770,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
     }
   }
 
-  private removeAnimationGroup(group: AnimationGroup, event: Event): void {
+  private removeAnimationGroup(group: SDK.AnimationModel.AnimationGroup, event: Event): void {
     const currentGroupIndex = this.#groupBuffer.indexOf(group);
 
     Platform.ArrayUtilities.removeElement(this.#groupBuffer, group);
@@ -789,7 +815,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
         this.#selectedGroup?.isScrollDriven() ? `${time.toFixed(0)}px` : i18n.TimeUtilities.millisToString(time);
   }
 
-  private async selectAnimationGroup(group: AnimationGroup): Promise<void> {
+  private async selectAnimationGroup(group: SDK.AnimationModel.AnimationGroup): Promise<void> {
     if (this.#selectedGroup === group) {
       this.togglePause(false);
       this.replay();
@@ -797,7 +823,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
     }
     this.clearTimeline();
     this.#selectedGroup = group;
-    this.#previewMap.forEach((previewUI: AnimationGroupPreviewUI, group: AnimationGroup) => {
+    this.#previewMap.forEach((previewUI: AnimationGroupPreviewUI, group: SDK.AnimationModel.AnimationGroup) => {
       previewUI.element.classList.toggle('selected', this.#selectedGroup === group);
     });
 
@@ -864,7 +890,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
   animationGroupSelectedForTest(): void {
   }
 
-  private async addAnimation(animation: AnimationImpl): Promise<void> {
+  private async addAnimation(animation: SDK.AnimationModel.AnimationImpl): Promise<void> {
     let nodeUI = this.#nodesMap.get(animation.source().backendNodeId());
     if (!nodeUI) {
       nodeUI = new NodeUI(animation.source());
@@ -1136,7 +1162,7 @@ export class NodeUI {
   #overlayElement?: HTMLElement;
   #node?: SDK.DOMModel.DOMNode|null;
 
-  constructor(_animationEffect: AnimationEffect) {
+  constructor(_animationEffect: SDK.AnimationModel.AnimationEffect) {
     this.element = document.createElement('div');
     this.element.classList.add('animation-node-row');
     this.#description = this.element.createChild('div', 'animation-node-description');
@@ -1213,3 +1239,9 @@ export class StepTimingFunction {
     return null;
   }
 }
+
+export class AnimationGroupRevealer implements Common.Revealer.Revealer<SDK.AnimationModel.AnimationGroup> {
+  async reveal(animationGroup: SDK.AnimationModel.AnimationGroup): Promise<void> {
+    await AnimationTimeline.instance().revealAnimationGroup(animationGroup);
+  }
+}