chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

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);
   }
@@ -147,7 +426,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);
@@ -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/CPUProfilerModel.ts

@@ -28,15 +28,14 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import * as i18n from '../i18n/i18n.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import type * as Protocol from '../../generated/protocol.js';
+import * as i18n from '../i18n/i18n.js';
 
 import {DebuggerModel, Location} from './DebuggerModel.js';
-import {type RuntimeModel} from './RuntimeModel.js';
-
-import {Capability, type Target} from './Target.js';
+import type {RuntimeModel} from './RuntimeModel.js';
 import {SDKModel} from './SDKModel.js';
+import {Capability, type Target} from './Target.js';
 
 const UIStrings = {
   /**

package/front_end/core/sdk/CSSContainerQuery.ts

@@ -2,17 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import type * as Protocol from '../../generated/protocol.js';
+import * as TextUtils from '../../models/text_utils/text_utils.js';
 
-import {type CSSModel} from './CSSModel.js';
+import type {CSSModel} from './CSSModel.js';
 import {CSSQuery} from './CSSQuery.js';
-import {type DOMNode} from './DOMModel.js';
+import type {DOMNode} from './DOMModel.js';
 
 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/CSSLayer.ts

@@ -2,10 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import type * as Protocol from '../../generated/protocol.js';
+import * as TextUtils from '../../models/text_utils/text_utils.js';
 
-import {type CSSModel} from './CSSModel.js';
+import type {CSSModel} from './CSSModel.js';
 import {CSSQuery} from './CSSQuery.js';
 
 export class CSSLayer extends CSSQuery {

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

@@ -47,6 +47,7 @@ function createMatchedStyles(
     propertyRules: [],
     cssPropertyRegistrations: [],
     fontPaletteValuesRule: undefined,
+    activePositionFallbackIndex: -1,
     ...payload,
   });
 }
@@ -59,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'},
@@ -105,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 () => {

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -6,7 +6,7 @@ import * as Protocol from '../../generated/protocol.js';
 import * as Platform from '../platform/platform.js';
 
 import {CSSMetadata, cssMetadata, CSSWideKeyword} from './CSSMetadata.js';
-import {type CSSModel} from './CSSModel.js';
+import type {CSSModel} from './CSSModel.js';
 import {CSSProperty} from './CSSProperty.js';
 import * as PropertyParser from './CSSPropertyParser.js';
 import {
@@ -17,7 +17,7 @@ import {
   CSSStyleRule,
 } from './CSSRule.js';
 import {CSSStyleDeclaration, Type} from './CSSStyleDeclaration.js';
-import {type DOMNode} from './DOMModel.js';
+import type {DOMNode} from './DOMModel.js';
 
 function containsStyle(styles: CSSStyleDeclaration[]|Set<CSSStyleDeclaration>, query: CSSStyleDeclaration): boolean {
   if (!query.styleSheetId || !query.range) {
@@ -177,6 +177,7 @@ export interface CSSMatchedStylesPayload {
   propertyRules: Protocol.CSS.CSSPropertyRule[];
   cssPropertyRegistrations: Protocol.CSS.CSSPropertyRegistration[];
   fontPaletteValuesRule: Protocol.CSS.CSSFontPaletteValuesRule|undefined;
+  activePositionFallbackIndex: number;
 }
 
 export class CSSRegisteredProperty {
@@ -250,6 +251,7 @@ export class CSSMatchedStyles {
   #styleToDOMCascade: Map<CSSStyleDeclaration, DOMInheritanceCascade>;
   #parentLayoutNodeId: Protocol.DOM.NodeId|undefined;
   #positionTryRules: CSSPositionTryRule[];
+  #activePositionFallbackIndex: number;
   #mainDOMCascade?: DOMInheritanceCascade;
   #pseudoDOMCascades?: Map<Protocol.DOM.PseudoType, DOMInheritanceCascade>;
   #customHighlightPseudoDOMCascades?: Map<string, DOMInheritanceCascade>;
@@ -270,6 +272,7 @@ export class CSSMatchedStyles {
     propertyRules,
     cssPropertyRegistrations,
     fontPaletteValuesRule,
+    activePositionFallbackIndex,
   }: CSSMatchedStylesPayload) {
     this.#cssModelInternal = cssModel;
     this.#nodeInternal = node;
@@ -292,6 +295,7 @@ export class CSSMatchedStyles {
     this.#inheritedStyles = new Set();
     this.#styleToDOMCascade = new Map();
     this.#registeredPropertyMap = new Map();
+    this.#activePositionFallbackIndex = activePositionFallbackIndex;
   }
 
   private async init({
@@ -676,6 +680,10 @@ export class CSSMatchedStyles {
     return this.#positionTryRules;
   }
 
+  activePositionFallbackIndex(): number {
+    return this.#activePositionFallbackIndex;
+  }
+
   pseudoStyles(pseudoType: Protocol.DOM.PseudoType): CSSStyleDeclaration[] {
     Platform.assertNotNullOrUndefined(this.#pseudoDOMCascades);
     const domCascade = this.#pseudoDOMCascades.get(pseudoType);
@@ -1104,16 +1112,19 @@ class DOMInheritanceCascade {
               record.updateRoot(childRecord);
               return null;
             }
-          } else {
-            const cssVariableValue = this.innerComputeCSSVariable(nodeCascade, match.name, sccRecord);
-            // Variable reference is resolved, so return it.
-            const childRecord = sccRecord.get(nodeCascade, match.name);
-            // The SCC record for the referenced variable may not exist if the var was already computed in a previous
-            // iteration. That means it's in a different SCC.
-            childRecord && record.updateRoot(childRecord);
-            if (cssVariableValue?.value) {
-              return cssVariableValue?.value;
-            }
+
+            // We've seen the variable before, so we can look up the text directly.
+            return this.#computedCSSVariables.get(nodeCascade)?.get(match.name)?.value ?? null;
+          }
+
+          const cssVariableValue = this.innerComputeCSSVariable(nodeCascade, match.name, sccRecord);
+          // Variable reference is resolved, so return it.
+          const newChildRecord = sccRecord.get(nodeCascade, match.name);
+          // The SCC record for the referenced variable may not exist if the var was already computed in a previous
+          // iteration. That means it's in a different SCC.
+          newChildRecord && record.updateRoot(newChildRecord);
+          if (cssVariableValue?.value) {
+            return cssVariableValue?.value;
           }
 
           // Variable reference is not resolved, use the fallback.

package/front_end/core/sdk/CSSMedia.ts

@@ -2,10 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import type * as Protocol from '../../generated/protocol.js';
+import * as TextUtils from '../../models/text_utils/text_utils.js';
 
-import {type CSSModel} from './CSSModel.js';
+import type {CSSModel} from './CSSModel.js';
 import {CSSQuery} from './CSSQuery.js';
 
 export class CSSMediaQuery {