[Animations] Auto start animation model

For adding an animation link swatch from styles tab to the animations
panel, we need to have a source of truth regarding captured animations
between styles tab and the animations panel so that we show the
links only for the animations that are captured.

Automatically starting AnimationModel enables us to capture animations
& store them even before the animations panel is opened.
That way, in the styles tab, we know the captured animations and
can link to them in the Animations tab.

Bug: 349566091
Change-Id: I1c2d7bbc811a4d6bef2b0a7a9bb1738da23db30c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5966113
Reviewed-by: Simon Zünd <[email protected]>
Commit-Queue: Ergün Erdoğmuş <[email protected]>

Author: ergunsh

front_end/core/sdk/AnimationModel.ts

@@ -293,7 +293,6 @@ export class AnimationModel extends SDKModel<EventTypes> {
   #pendingAnimations: Set<string>;
   playbackRate: number;
   readonly #screenshotCapture?: ScreenshotCapture;
-  #enabled?: boolean;
   #flushPendingAnimations: () => void;
 
   constructor(target: Target) {
@@ -307,7 +306,7 @@ export class AnimationModel extends SDKModel<EventTypes> {
     this.playbackRate = 1;
 
     if (!target.suspended()) {
-      void this.ensureEnabled();
+      void this.agent.invoke_enable();
     }
 
     const resourceTreeModel = (target.model(ResourceTreeModel) as ResourceTreeModel);
@@ -448,23 +447,11 @@ export class AnimationModel extends SDKModel<EventTypes> {
   }
 
   override async suspendModel(): Promise<void> {
-    this.reset();
-    await this.agent.invoke_disable();
+    await this.agent.invoke_disable().then(() => this.reset());
   }
 
   override async resumeModel(): Promise<void> {
-    if (!this.#enabled) {
-      return;
-    }
-    await this.agent.invoke_enable();
-  }
-
-  async ensureEnabled(): Promise<void> {
-    if (this.#enabled) {
-      return;
-    }
     await this.agent.invoke_enable();
-    this.#enabled = true;
   }
 }
 
@@ -1124,7 +1111,7 @@ export class ScreenshotCapture {
   }
 }
 
-SDKModel.register(AnimationModel, {capabilities: Capability.DOM, autostart: false});
+SDKModel.register(AnimationModel, {capabilities: Capability.DOM, autostart: true});
 export interface Request {
   endTime: number;
   screenshots: string[];

front_end/core/sdk/DebuggerModel.test.ts

@@ -29,6 +29,7 @@ describeWithMockConnection('DebuggerModel', () => {
       setMockConnectionResponseHandler('DOM.disable', () => ({}));
       setMockConnectionResponseHandler('CSS.disable', () => ({}));
       setMockConnectionResponseHandler('Overlay.disable', () => ({}));
+      setMockConnectionResponseHandler('Animation.disable', () => ({}));
       setMockConnectionResponseHandler('Overlay.setShowGridOverlays', () => ({}));
       setMockConnectionResponseHandler('Overlay.setShowFlexOverlays', () => ({}));
       setMockConnectionResponseHandler('Overlay.setShowScrollSnapOverlays', () => ({}));
@@ -43,6 +44,7 @@ describeWithMockConnection('DebuggerModel', () => {
       setMockConnectionResponseHandler('DOM.enable', () => ({}));
       setMockConnectionResponseHandler('Overlay.enable', () => ({}));
       setMockConnectionResponseHandler('CSS.enable', () => ({}));
+      setMockConnectionResponseHandler('Animation.enable', () => ({}));
     });
 
     it('deactivates breakpoints on construction with inactive breakpoints', async () => {

front_end/panels/animation/AnimationTimeline.ts

@@ -130,9 +130,6 @@ export class AnimationTimeline extends UI.Widget.VBox implements
   #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);
 
@@ -220,16 +217,29 @@ export class AnimationTimeline extends UI.Widget.VBox implements
   }
 
   override wasShown(): void {
-    if (this.#initialized) {
-      return;
-    }
-
     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;
+  }
+
+  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;
+      }
+
+      this.addAnimationGroup(animationGroup);
+    }
   }
 
   modelAdded(animationModel: SDK.AnimationModel.AnimationModel): void {
@@ -243,7 +253,6 @@ export class AnimationTimeline extends UI.Widget.VBox implements
   }
 
   private addEventListeners(animationModel: SDK.AnimationModel.AnimationModel): void {
-    void animationModel.ensureEnabled();
     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);