chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

package/front_end/core/root/Runtime.ts

@@ -103,7 +103,9 @@ export class Runtime {
   }
 
   loadLegacyModule(modulePath: string): Promise<void> {
-    return import(`../../${modulePath}`);
+    const importPath =
+        `../../${modulePath}`;  // Extracted as a variable so esbuild doesn't attempt to bundle all the things.
+    return import(importPath);
   }
 }
 
@@ -300,6 +302,9 @@ export const enum ExperimentName {
   EXTENSION_STORAGE_VIEWER = 'extension-storage-viewer',
   FLOATING_ENTRY_POINTS_FOR_AI_ASSISTANCE = 'floating-entry-points-for-ai-assistance',
   TIMELINE_EXPERIMENTAL_INSIGHTS = 'timeline-experimental-insights',
+  TIMELINE_DIM_UNRELATED_EVENTS = 'timeline-dim-unrelated-events',
+  TIMELINE_ALTERNATIVE_NAVIGATION = 'timeline-alternative-navigation',
+  // when adding to this enum, you'll need to also add to REGISTERED_EXPERIMENTS in EnvironmentHelpers.ts
 }
 
 export interface AidaAvailability {
@@ -330,21 +335,21 @@ export interface HostConfigFreestyler {
   executionMode?: HostConfigFreestylerExecutionMode;
 }
 
-export interface HostConfigExplainThisResourceDogfood {
+export interface HostConfigAiAssistanceNetworkAgent {
   modelId: string;
   temperature: number;
   enabled: boolean;
   userTier: string;
 }
 
-export interface HostConfigAiAssistancePerformanceAgentDogfood {
+export interface HostConfigAiAssistancePerformanceAgent {
   modelId: string;
   temperature: number;
   enabled: boolean;
   userTier: string;
 }
 
-export interface HostConfigAiAssistanceFileAgentDogfood {
+export interface HostConfigAiAssistanceFileAgent {
   modelId: string;
   temperature: number;
   enabled: boolean;
@@ -371,9 +376,12 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   aidaAvailability: AidaAvailability,
   devToolsConsoleInsights: HostConfigConsoleInsights,
   devToolsFreestyler: HostConfigFreestyler,
-  devToolsExplainThisResourceDogfood: HostConfigExplainThisResourceDogfood,
-  devToolsAiAssistancePerformanceAgentDogfood: HostConfigAiAssistancePerformanceAgentDogfood,
-  devToolsAiAssistanceFileAgentDogfood: HostConfigAiAssistanceFileAgentDogfood,
+  devToolsExplainThisResourceDogfood: HostConfigAiAssistanceNetworkAgent,
+  devToolsAiAssistanceNetworkAgent: HostConfigAiAssistanceNetworkAgent,
+  devToolsAiAssistancePerformanceAgentDogfood: HostConfigAiAssistancePerformanceAgent,
+  devToolsAiAssistanceFileAgent: HostConfigAiAssistanceFileAgent,
+  devToolsAiAssistanceFileAgentDogfood: HostConfigAiAssistanceFileAgent,
+  devToolsAiAssistancePerformanceAgent: HostConfigAiAssistancePerformanceAgent,
   devToolsVeLogging: HostConfigVeLogging,
   devToolsPrivacyUI: HostConfigPrivacyUI,
   /**

package/front_end/{panels/animation → core/sdk}/AnimationModel.test.ts

@@ -10,7 +10,33 @@ import {
   setMockConnectionResponseHandler,
 } from '../../testing/MockConnection.js';
 
-import * as Animation from './animation.js';
+import * as SDK from './sdk.js';
+
+function createAnimationPayload(payload: Partial<Protocol.Animation.Animation>): Protocol.Animation.Animation {
+  return {
+    id: '1',
+    name: 'animation-name',
+    pausedState: false,
+    playbackRate: 1,
+    startTime: 0,
+    currentTime: 0,
+    type: Protocol.Animation.AnimationType.CSSAnimation,
+    playState: 'running',
+    ...payload,
+    source: {
+      backendNodeId: 1 as Protocol.DOM.BackendNodeId,
+      delay: 0,
+      endDelay: 0,
+      iterationStart: 0,
+      iterations: 1,
+      duration: 100,
+      direction: 'forward',
+      fill: 'forwards',
+      easing: 'linear',
+      ...(payload.source ? payload.source : null),
+    },
+  };
+}
 
 describeWithMockConnection('AnimationModel', () => {
   afterEach(() => {
@@ -20,7 +46,60 @@ describeWithMockConnection('AnimationModel', () => {
   it('can be instantiated', () => {
     assert.doesNotThrow(() => {
       const target = createTarget();
-      new Animation.AnimationModel.AnimationModel(target);
+      new SDK.AnimationModel.AnimationModel(target);
+    });
+  });
+
+  describe('getAnimationGroupForAnimation', () => {
+    const NODE_ID = 1 as Protocol.DOM.NodeId;
+    beforeEach(() => {
+      const stubDOMNode = sinon.createStubInstance(SDK.DOMModel.DOMNode);
+      stubDOMNode.id = NODE_ID;
+      sinon.stub(SDK.AnimationModel.AnimationEffect.prototype, 'node').resolves(stubDOMNode);
+    });
+
+    it('should resolve the containing animation group if the animation with given name and node id exists in the group',
+       async () => {
+         const target = createTarget();
+         const model = new SDK.AnimationModel.AnimationModel(target);
+         const animationGroupStartedPromiseWithResolvers = Promise.withResolvers<void>();
+         model.addEventListener(SDK.AnimationModel.Events.AnimationGroupStarted, () => {
+           animationGroupStartedPromiseWithResolvers.resolve();
+         });
+         void model.animationStarted(createAnimationPayload({name: 'animation-name'}));
+         await animationGroupStartedPromiseWithResolvers.promise;
+
+         const receivedAnimationGroup = await model.getAnimationGroupForAnimation('animation-name', NODE_ID);
+         assert.isNotNull(receivedAnimationGroup);
+       });
+
+    it('should resolve null if there is no animations with matching name', async () => {
+      const target = createTarget();
+      const model = new SDK.AnimationModel.AnimationModel(target);
+      const animationGroupStartedPromiseWithResolvers = Promise.withResolvers<void>();
+      model.addEventListener(SDK.AnimationModel.Events.AnimationGroupStarted, () => {
+        animationGroupStartedPromiseWithResolvers.resolve();
+      });
+      void model.animationStarted(createAnimationPayload({name: 'animation-name'}));
+      await animationGroupStartedPromiseWithResolvers.promise;
+
+      const receivedAnimationGroup = await model.getAnimationGroupForAnimation('not-a-matching-name', NODE_ID);
+      assert.isNull(receivedAnimationGroup);
+    });
+
+    it('should resolve null if there is an animation with the same name but for a different node id', async () => {
+      const target = createTarget();
+      const model = new SDK.AnimationModel.AnimationModel(target);
+      const animationGroupStartedPromiseWithResolvers = Promise.withResolvers<void>();
+      model.addEventListener(SDK.AnimationModel.Events.AnimationGroupStarted, () => {
+        animationGroupStartedPromiseWithResolvers.resolve();
+      });
+      void model.animationStarted(createAnimationPayload({name: 'animation-name'}));
+      await animationGroupStartedPromiseWithResolvers.promise;
+
+      const receivedAnimationGroup =
+          await model.getAnimationGroupForAnimation('animation-name', 9999 as Protocol.DOM.NodeId);
+      assert.isNull(receivedAnimationGroup);
     });
   });
 
@@ -28,8 +107,8 @@ describeWithMockConnection('AnimationModel', () => {
     it('setPayload should update values returned from the relevant value functions for time based animations',
        async () => {
          const target = createTarget();
-         const model = new Animation.AnimationModel.AnimationModel(target);
-         const animationImpl = await Animation.AnimationModel.AnimationImpl.parsePayload(model, {
+         const model = new SDK.AnimationModel.AnimationModel(target);
+         const animationImpl = await SDK.AnimationModel.AnimationImpl.parsePayload(model, {
            id: '1',
            name: 'animation-name',
            pausedState: false,
@@ -102,8 +181,8 @@ describeWithMockConnection('AnimationModel', () => {
            };
          });
          const target = createTarget();
-         const model = new Animation.AnimationModel.AnimationModel(target);
-         const animationImpl = await Animation.AnimationModel.AnimationImpl.parsePayload(model, {
+         const model = new SDK.AnimationModel.AnimationModel(target);
+         const animationImpl = await SDK.AnimationModel.AnimationImpl.parsePayload(model, {
            id: '1',
            name: 'animation-name',
            pausedState: false,

package/front_end/{panels/animation → core/sdk}/AnimationModel.ts

@@ -3,11 +3,272 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import * as SDK from '../../core/sdk/sdk.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import * as Protocol from '../../generated/protocol.js';
 
-import {AnimationDOMNode} from './AnimationDOMNode.js';
+import {DeferredDOMNode, type DOMNode} from './DOMModel.js';
+import {RemoteObject} from './RemoteObject.js';
+import {Events as ResourceTreeModelEvents, ResourceTreeModel} from './ResourceTreeModel.js';
+import {Events as RuntimeModelEvents, type EventTypes as RuntimeModelEventTypes, RuntimeModel} from './RuntimeModel.js';
+import {ScreenCaptureModel} from './ScreenCaptureModel.js';
+import {SDKModel} from './SDKModel.js';
+import {Capability, type Target} from './Target.js';
+
+const DEVTOOLS_ANIMATIONS_WORLD_NAME = 'devtools_animations';
+const REPORT_SCROLL_POSITION_BINDING_NAME = '__devtools_report_scroll_position__';
+
+const getScrollListenerNameInPage = (id: number): string => `__devtools_scroll_listener_${id}__`;
+
+type ScrollListener = (param: {scrollLeft: number, scrollTop: number}) => void;
+type BindingListener =
+    (ev: Common.EventTarget.EventTargetEvent<Protocol.Runtime.BindingCalledEvent, RuntimeModelEventTypes>) => void;
+
+async function resolveToObjectInWorld(domNode: DOMNode, worldName: string): Promise<RemoteObject|null> {
+  const resourceTreeModel = domNode.domModel().target().model(ResourceTreeModel) as ResourceTreeModel;
+  const pageAgent = domNode.domModel().target().pageAgent();
+  for (const frame of resourceTreeModel.frames()) {
+    // This returns previously created world if it exists for the frame.
+    const {executionContextId} = await pageAgent.invoke_createIsolatedWorld({frameId: frame.id, worldName});
+    const object = await domNode.resolveToObject(undefined, executionContextId);
+    if (object) {
+      return object;
+    }
+  }
+  return null;
+}
+
+/**
+ * Provides an extension over `DOMNode` that gives it additional
+ * capabilities for animation debugging, mainly:
+ * - getting a node's scroll information (scroll offsets and scroll range).
+ * - updating a node's scroll offset.
+ * - tracking the node's scroll offsets with event listeners.
+ *
+ * It works by running functions on the target page, see `DOMNode`s `callFunction` method
+ * for more details on how a function is called on the target page.
+ *
+ * For listening to events on the target page and getting notified on the devtools frontend
+ * side, we're adding a binding to the page `__devtools_report_scroll_position__` in a world `devtools_animation`
+ * we've created. Then, we're setting scroll listeners of the `node` in the same world which calls the binding
+ * itself with the scroll offsets.
+ */
+export class AnimationDOMNode {
+  #domNode: DOMNode;
+  #scrollListenersById: Map<number, ScrollListener>;
+  #scrollBindingListener?: BindingListener;
+
+  static lastAddedListenerId: number = 0;
+
+  constructor(domNode: DOMNode) {
+    this.#domNode = domNode;
+    this.#scrollListenersById = new Map();
+  }
+
+  async #addReportScrollPositionBinding(): Promise<void> {
+    // The binding is already added so we don't need to add it again.
+    if (this.#scrollBindingListener) {
+      return;
+    }
+
+    this.#scrollBindingListener = ev => {
+      const {name, payload} = ev.data;
+      if (name !== REPORT_SCROLL_POSITION_BINDING_NAME) {
+        return;
+      }
+
+      const {scrollTop, scrollLeft, id} = JSON.parse(payload) as {scrollTop: number, scrollLeft: number, id: number};
+      const scrollListener = this.#scrollListenersById.get(id);
+      if (!scrollListener) {
+        return;
+      }
+
+      scrollListener({scrollTop, scrollLeft});
+    };
+
+    const runtimeModel = this.#domNode.domModel().target().model(RuntimeModel) as RuntimeModel;
+    await runtimeModel.addBinding({
+      name: REPORT_SCROLL_POSITION_BINDING_NAME,
+      executionContextName: DEVTOOLS_ANIMATIONS_WORLD_NAME,
+    });
+    runtimeModel.addEventListener(RuntimeModelEvents.BindingCalled, this.#scrollBindingListener);
+  }
+
+  async #removeReportScrollPositionBinding(): Promise<void> {
+    // There isn't any binding added yet.
+    if (!this.#scrollBindingListener) {
+      return;
+    }
+
+    const runtimeModel = this.#domNode.domModel().target().model(RuntimeModel) as RuntimeModel;
+    await runtimeModel.removeBinding({
+      name: REPORT_SCROLL_POSITION_BINDING_NAME,
+    });
+    runtimeModel.removeEventListener(RuntimeModelEvents.BindingCalled, this.#scrollBindingListener);
+    this.#scrollBindingListener = undefined;
+  }
+
+  async addScrollEventListener(onScroll: ({scrollLeft, scrollTop}: {scrollLeft: number, scrollTop: number}) => void):
+      Promise<number|null> {
+    AnimationDOMNode.lastAddedListenerId++;
+    const id = AnimationDOMNode.lastAddedListenerId;
+    this.#scrollListenersById.set(id, onScroll);
+    // Add the binding for reporting scroll events from the page if it doesn't exist.
+    if (!this.#scrollBindingListener) {
+      await this.#addReportScrollPositionBinding();
+    }
+
+    const object = await resolveToObjectInWorld(this.#domNode, DEVTOOLS_ANIMATIONS_WORLD_NAME);
+    if (!object) {
+      return null;
+    }
+
+    await object.callFunction(scrollListenerInPage, [
+      id,
+      REPORT_SCROLL_POSITION_BINDING_NAME,
+      getScrollListenerNameInPage(id),
+    ].map(arg => RemoteObject.toCallArgument(arg)));
+    object.release();
+    return id;
+
+    function scrollListenerInPage(
+        this: HTMLElement|Document, id: number, reportScrollPositionBindingName: string,
+        scrollListenerNameInPage: string): void {
+      if ('scrollingElement' in this && !this.scrollingElement) {
+        return;
+      }
+
+      const scrollingElement = ('scrollingElement' in this ? this.scrollingElement : this) as HTMLElement;
+      // @ts-ignore We're setting a custom field on `Element` or `Document` for retaining the function on the page.
+      this[scrollListenerNameInPage] = () => {
+        // @ts-ignore `reportScrollPosition` binding is injected to the page before calling the function.
+        globalThis[reportScrollPositionBindingName](
+            JSON.stringify({scrollTop: scrollingElement.scrollTop, scrollLeft: scrollingElement.scrollLeft, id}));
+      };
+
+      // @ts-ignore We've already defined the function used below.
+      this.addEventListener('scroll', this[scrollListenerNameInPage], true);
+    }
+  }
+
+  async removeScrollEventListener(id: number): Promise<void> {
+    const object = await resolveToObjectInWorld(this.#domNode, DEVTOOLS_ANIMATIONS_WORLD_NAME);
+    if (!object) {
+      return;
+    }
+
+    await object.callFunction(
+        removeScrollListenerInPage, [getScrollListenerNameInPage(id)].map(arg => RemoteObject.toCallArgument(arg)));
+    object.release();
+
+    this.#scrollListenersById.delete(id);
+    // There aren't any scroll listeners remained on the page
+    // so we remove the binding.
+    if (this.#scrollListenersById.size === 0) {
+      await this.#removeReportScrollPositionBinding();
+    }
+
+    function removeScrollListenerInPage(this: HTMLElement|Document, scrollListenerNameInPage: string): void {
+      // @ts-ignore We've already set this custom field while adding scroll listener.
+      this.removeEventListener('scroll', this[scrollListenerNameInPage]);
+      // @ts-ignore We've already set this custom field while adding scroll listener.
+      delete this[scrollListenerNameInPage];
+    }
+  }
+
+  async scrollTop(): Promise<number|null> {
+    return this.#domNode.callFunction(scrollTopInPage).then(res => res?.value ?? null);
+
+    function scrollTopInPage(this: Element|Document): number {
+      if ('scrollingElement' in this) {
+        if (!this.scrollingElement) {
+          return 0;
+        }
+
+        return this.scrollingElement.scrollTop;
+      }
+      return this.scrollTop;
+    }
+  }
+
+  async scrollLeft(): Promise<number|null> {
+    return this.#domNode.callFunction(scrollLeftInPage).then(res => res?.value ?? null);
+
+    function scrollLeftInPage(this: Element|Document): number {
+      if ('scrollingElement' in this) {
+        if (!this.scrollingElement) {
+          return 0;
+        }
+
+        return this.scrollingElement.scrollLeft;
+      }
+      return this.scrollLeft;
+    }
+  }
+
+  async setScrollTop(offset: number): Promise<void> {
+    await this.#domNode.callFunction(setScrollTopInPage, [offset]);
+
+    function setScrollTopInPage(this: Element|Document, offsetInPage: number): void {
+      if ('scrollingElement' in this) {
+        if (!this.scrollingElement) {
+          return;
+        }
+
+        this.scrollingElement.scrollTop = offsetInPage;
+      } else {
+        this.scrollTop = offsetInPage;
+      }
+    }
+  }
+
+  async setScrollLeft(offset: number): Promise<void> {
+    await this.#domNode.callFunction(setScrollLeftInPage, [offset]);
+
+    function setScrollLeftInPage(this: Element|Document, offsetInPage: number): void {
+      if ('scrollingElement' in this) {
+        if (!this.scrollingElement) {
+          return;
+        }
+
+        this.scrollingElement.scrollLeft = offsetInPage;
+      } else {
+        this.scrollLeft = offsetInPage;
+      }
+    }
+  }
+
+  async verticalScrollRange(): Promise<number|null> {
+    return this.#domNode.callFunction(verticalScrollRangeInPage).then(res => res?.value ?? null);
+
+    function verticalScrollRangeInPage(this: Element|Document): number {
+      if ('scrollingElement' in this) {
+        if (!this.scrollingElement) {
+          return 0;
+        }
+
+        return this.scrollingElement.scrollHeight - this.scrollingElement.clientHeight;
+      }
+
+      return this.scrollHeight - this.clientHeight;
+    }
+  }
+
+  async horizontalScrollRange(): Promise<number|null> {
+    return this.#domNode.callFunction(horizontalScrollRangeInPage).then(res => res?.value ?? null);
+
+    function horizontalScrollRangeInPage(this: Element|Document): number {
+      if ('scrollingElement' in this) {
+        if (!this.scrollingElement) {
+          return 0;
+        }
+
+        return this.scrollingElement.scrollWidth - this.scrollingElement.clientWidth;
+      }
+
+      return this.scrollWidth - this.clientWidth;
+    }
+  }
+}
 
 function shouldGroupAnimations(firstAnimation: AnimationImpl, anim: AnimationImpl): boolean {
   const firstAnimationTimeline = firstAnimation.viewOrScrollTimeline();
@@ -24,30 +285,33 @@ function shouldGroupAnimations(firstAnimation: AnimationImpl, anim: AnimationImp
   return !animationTimeline && firstAnimation.startTime() === anim.startTime();
 }
 
-export class AnimationModel extends SDK.SDKModel.SDKModel<EventTypes> {
-  readonly runtimeModel: SDK.RuntimeModel.RuntimeModel;
+export class AnimationModel extends SDKModel<EventTypes> {
+  readonly runtimeModel: RuntimeModel;
   readonly agent: ProtocolProxyApi.AnimationApi;
   #animationsById: Map<string, AnimationImpl>;
   readonly animationGroups: Map<string, AnimationGroup>;
   #pendingAnimations: Set<string>;
   playbackRate: number;
   readonly #screenshotCapture?: ScreenshotCapture;
-  #enabled?: boolean;
   #flushPendingAnimations: () => void;
 
-  constructor(target: SDK.Target.Target) {
+  constructor(target: Target) {
     super(target);
-    this.runtimeModel = (target.model(SDK.RuntimeModel.RuntimeModel) as SDK.RuntimeModel.RuntimeModel);
+    this.runtimeModel = (target.model(RuntimeModel) as RuntimeModel);
     this.agent = target.animationAgent();
     target.registerAnimationDispatcher(new AnimationDispatcher(this));
     this.#animationsById = new Map();
     this.animationGroups = new Map();
     this.#pendingAnimations = new Set();
     this.playbackRate = 1;
-    const resourceTreeModel =
-        (target.model(SDK.ResourceTreeModel.ResourceTreeModel) as SDK.ResourceTreeModel.ResourceTreeModel);
-    resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.PrimaryPageChanged, this.reset, this);
-    const screenCaptureModel = target.model(SDK.ScreenCaptureModel.ScreenCaptureModel);
+
+    if (!target.suspended()) {
+      void this.agent.invoke_enable();
+    }
+
+    const resourceTreeModel = (target.model(ResourceTreeModel) as ResourceTreeModel);
+    resourceTreeModel.addEventListener(ResourceTreeModelEvents.PrimaryPageChanged, this.reset, this);
+    const screenCaptureModel = target.model(ScreenCaptureModel);
     if (screenCaptureModel) {
       this.#screenshotCapture = new ScreenshotCapture(this, screenCaptureModel);
     }
@@ -75,6 +339,21 @@ export class AnimationModel extends SDK.SDKModel.SDKModel<EventTypes> {
     return 1;
   }
 
+  async getAnimationGroupForAnimation(name: string, nodeId: Protocol.DOM.NodeId): Promise<AnimationGroup|null> {
+    for (const animationGroup of this.animationGroups.values()) {
+      for (const animation of animationGroup.animations()) {
+        if (animation.name() === name) {
+          const animationNode = await animation.source().node();
+          if (animationNode?.id === nodeId) {
+            return animationGroup;
+          }
+        }
+      }
+    }
+
+    return null;
+  }
+
   animationCanceled(id: string): void {
     this.#pendingAnimations.delete(id);
   }
@@ -183,23 +462,11 @@ export class AnimationModel extends SDK.SDKModel.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;
   }
 }
 
@@ -408,7 +675,7 @@ export class AnimationImpl {
     void this.#animationModel.agent.invoke_setTiming({animationId: this.id(), duration, delay});
   }
 
-  private updateNodeStyle(duration: number, delay: number, node: SDK.DOMModel.DOMNode): void {
+  private updateNodeStyle(duration: number, delay: number, node: DOMNode): void {
     let animationPrefix;
     if (this.type() === Protocol.Animation.AnimationType.CSSTransition) {
       animationPrefix = 'transition-';
@@ -427,7 +694,7 @@ export class AnimationImpl {
     cssModel.setEffectivePropertyValueForNode(node.id, animationPrefix + 'delay', delay + 'ms');
   }
 
-  async remoteObjectPromise(): Promise<SDK.RemoteObject.RemoteObject|null> {
+  async remoteObjectPromise(): Promise<RemoteObject|null> {
     const payload = await this.#animationModel.agent.invoke_resolveAnimation({animationId: this.id()});
     if (!payload) {
       return null;
@@ -448,7 +715,7 @@ export class AnimationEffect {
   delayInternal!: number;     // Assertion is safe because `setPayload` call in `constructor` sets the value.
   durationInternal!: number;  // Assertion is safe because `setPayload` call in `constructor` sets the value.
   #keyframesRuleInternal: KeyframesRule|undefined;
-  #deferredNodeInternal?: SDK.DOMModel.DeferredDOMNode;
+  #deferredNodeInternal?: DeferredDOMNode;
   constructor(animationModel: AnimationModel, payload: Protocol.Animation.AnimationEffect) {
     this.#animationModel = animationModel;
     this.setPayload(payload);
@@ -494,16 +761,15 @@ export class AnimationEffect {
     return this.#payload.fill;
   }
 
-  node(): Promise<SDK.DOMModel.DOMNode|null> {
+  node(): Promise<DOMNode|null> {
     if (!this.#deferredNodeInternal) {
-      this.#deferredNodeInternal =
-          new SDK.DOMModel.DeferredDOMNode(this.#animationModel.target(), this.backendNodeId());
+      this.#deferredNodeInternal = new DeferredDOMNode(this.#animationModel.target(), this.backendNodeId());
     }
     return this.#deferredNodeInternal.resolvePromise();
   }
 
-  deferredNode(): SDK.DOMModel.DeferredDOMNode {
-    return new SDK.DOMModel.DeferredDOMNode(this.#animationModel.target(), this.backendNodeId());
+  deferredNode(): DeferredDOMNode {
+    return new DeferredDOMNode(this.#animationModel.target(), this.backendNodeId());
   }
 
   backendNodeId(): Protocol.DOM.BackendNodeId {
@@ -668,7 +934,7 @@ export class AnimationGroup {
       return null;
     }
 
-    const deferredScrollNode = new SDK.DOMModel.DeferredDOMNode(this.#animationModel.target(), sourceNodeId);
+    const deferredScrollNode = new DeferredDOMNode(this.#animationModel.target(), sourceNodeId);
     const scrollNode = await deferredScrollNode.resolvePromise();
     if (!scrollNode) {
       return null;
@@ -799,12 +1065,12 @@ export class AnimationDispatcher implements ProtocolProxyApi.AnimationDispatcher
 
 export class ScreenshotCapture {
   #requests: Request[];
-  readonly #screenCaptureModel: SDK.ScreenCaptureModel.ScreenCaptureModel;
+  readonly #screenCaptureModel: ScreenCaptureModel;
   readonly #animationModel: AnimationModel;
   #stopTimer?: number;
   #endTime?: number;
   #capturing?: boolean;
-  constructor(animationModel: AnimationModel, screenCaptureModel: SDK.ScreenCaptureModel.ScreenCaptureModel) {
+  constructor(animationModel: AnimationModel, screenCaptureModel: ScreenCaptureModel) {
     this.#requests = [];
     this.#screenCaptureModel = screenCaptureModel;
     this.#animationModel = animationModel;
@@ -860,7 +1126,7 @@ export class ScreenshotCapture {
   }
 }
 
-SDK.SDKModel.SDKModel.register(AnimationModel, {capabilities: SDK.Target.Capability.DOM, autostart: false});
+SDKModel.register(AnimationModel, {capabilities: Capability.DOM, autostart: true});
 export interface Request {
   endTime: number;
   screenshots: string[];

package/front_end/core/sdk/CSSContainerQuery.ts

@@ -13,6 +13,7 @@ export class CSSContainerQuery extends CSSQuery {
   name?: string;
   physicalAxes?: Protocol.DOM.PhysicalAxes;
   logicalAxes?: Protocol.DOM.LogicalAxes;
+  queriesScrollState?: boolean;
 
   static parseContainerQueriesPayload(cssModel: CSSModel, payload: Protocol.CSS.CSSContainerQuery[]):
       CSSContainerQuery[] {
@@ -31,6 +32,7 @@ export class CSSContainerQuery extends CSSQuery {
     this.name = payload.name;
     this.physicalAxes = payload.physicalAxes;
     this.logicalAxes = payload.logicalAxes;
+    this.queriesScrollState = payload.queriesScrollState;
   }
 
   active(): boolean {
@@ -38,8 +40,8 @@ export class CSSContainerQuery extends CSSQuery {
   }
 
   async getContainerForNode(nodeId: Protocol.DOM.NodeId): Promise<CSSContainerQueryContainer|undefined> {
-    const containerNode =
-        await this.cssModel.domModel().getContainerForNode(nodeId, this.name, this.physicalAxes, this.logicalAxes);
+    const containerNode = await this.cssModel.domModel().getContainerForNode(
+        nodeId, this.name, this.physicalAxes, this.logicalAxes, this.queriesScrollState);
     if (!containerNode) {
       return;
     }

package/front_end/core/sdk/CSSMatchedStyles.test.ts

@@ -60,6 +60,9 @@ describe('CSSMatchedStyles', () => {
           ruleMatch(
               'div',
               [
+                {name: '--diamond', value: 'var(--diamond-a) var(--diamond-b)'},
+                {name: '--diamond-a', value: 'var(--foo)'},
+                {name: '--diamond-b', value: 'var(--foo)'},
                 {name: '--foo', value: 'active-foo'},
                 {name: '--baz', value: 'active-baz !important', important: true},
                 {name: '--baz', value: 'passive-baz'},
@@ -106,6 +109,7 @@ describe('CSSMatchedStyles', () => {
       await testCssValueEquals('--theme', 'darkgrey');
       await testCssValueEquals('--shadow', '1px darkgrey');
       await testCssValueEquals('--width', '1px');
+      await testCssValueEquals('--diamond', 'active-foo active-foo');
     });
 
     it('correctly resolves the declaration', async () => {