chrome-devtools-frontend 1.0.1665921 → 1.0.1667564

package/front_end/panels/common/AiCodeCompletionSummaryToolbar.ts

@@ -6,6 +6,7 @@ import '../../ui/components/spinners/spinners.js';
 import '../../ui/components/tooltips/tooltips.js';
 import '../../ui/kit/kit.js';
 
+import type * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
@@ -116,7 +117,8 @@ export class AiCodeCompletionSummaryToolbar extends UI.Widget.Widget {
   #panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
 
   #aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
-  #boundOnAidaAvailabilityChange: () => Promise<void>;
+  #boundOnAidaAvailabilityChange:
+      (ev: Common.EventTarget.EventTargetEvent<Host.AidaClient.AidaAccessPreconditions>) => void;
 
   constructor(props: AiCodeCompletionSummaryToolbarProps, view?: View) {
     super();
@@ -130,14 +132,17 @@ export class AiCodeCompletionSummaryToolbar extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
-  async #onAidaAvailabilityChange(): Promise<void> {
-    const currentAidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
-    if (currentAidaAvailability !== this.#aidaAvailability) {
-      this.#aidaAvailability = currentAidaAvailability;
+  #updateAidaAvailability(aidaAvailability: Host.AidaClient.AidaAccessPreconditions): void {
+    if (aidaAvailability !== this.#aidaAvailability) {
+      this.#aidaAvailability = aidaAvailability;
       this.requestUpdate();
     }
   }
 
+  #onAidaAvailabilityChange(ev: Common.EventTarget.EventTargetEvent<Host.AidaClient.AidaAccessPreconditions>): void {
+    this.#updateAidaAvailability(ev.data);
+  }
+
   setLoading(loading: boolean): void {
     this.#loading = loading;
     this.requestUpdate();
@@ -172,7 +177,10 @@ export class AiCodeCompletionSummaryToolbar extends UI.Widget.Widget {
     super.wasShown();
     Host.AidaClient.HostConfigTracker.instance().addEventListener(
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
-    void this.#onAidaAvailabilityChange();
+    const initialAvailability = Host.AidaClient.HostConfigTracker.instance().aidaAvailability;
+    if (initialAvailability !== undefined) {
+      this.#updateAidaAvailability(initialAvailability);
+    }
   }
 
   override willHide(): void {

package/front_end/panels/common/AiCodeCompletionTeaser.ts

@@ -171,7 +171,8 @@ export class AiCodeCompletionTeaser extends UI.Widget.Widget {
   readonly #view: View;
 
   #aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
-  #boundOnAidaAvailabilityChange: () => Promise<void>;
+  #boundOnAidaAvailabilityChange:
+      (ev: Common.EventTarget.EventTargetEvent<Host.AidaClient.AidaAccessPreconditions>) => void;
   #boundOnAiCodeCompletionSettingChanged: () => void;
   #onDetach: () => void;
   #panel?: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
@@ -211,14 +212,17 @@ export class AiCodeCompletionTeaser extends UI.Widget.Widget {
     });
   }
 
-  async #onAidaAvailabilityChange(): Promise<void> {
-    const currentAidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
-    if (currentAidaAvailability !== this.#aidaAvailability) {
-      this.#aidaAvailability = currentAidaAvailability;
+  #updateAidaAvailability(aidaAvailability: Host.AidaClient.AidaAccessPreconditions): void {
+    if (aidaAvailability !== this.#aidaAvailability) {
+      this.#aidaAvailability = aidaAvailability;
       this.requestUpdate();
     }
   }
 
+  #onAidaAvailabilityChange(ev: Common.EventTarget.EventTargetEvent<Host.AidaClient.AidaAccessPreconditions>): void {
+    this.#updateAidaAvailability(ev.data);
+  }
+
   #onAiCodeCompletionSettingChanged(): void {
     if (this.#aiCodeCompletionFreCompletedSetting.get() || this.#aiCodeCompletionTeaserDismissedSetting.get()) {
       this.detach();
@@ -322,7 +326,10 @@ export class AiCodeCompletionTeaser extends UI.Widget.Widget {
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
     this.#aiCodeCompletionFreCompletedSetting.addChangeListener(this.#boundOnAiCodeCompletionSettingChanged);
     this.#aiCodeCompletionTeaserDismissedSetting.addChangeListener(this.#boundOnAiCodeCompletionSettingChanged);
-    void this.#onAidaAvailabilityChange();
+    const initialAvailability = Host.AidaClient.HostConfigTracker.instance().aidaAvailability;
+    if (initialAvailability !== undefined) {
+      this.#updateAidaAvailability(initialAvailability);
+    }
   }
 
   override willHide(): void {

package/front_end/panels/common/GeminiRebrandPromoDialog.ts

@@ -177,7 +177,7 @@ export class GeminiRebrandPromoDialog extends UI.Widget.VBox {
       return;
     }
 
-    const currentAidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
+    const currentAidaAvailability = Host.AidaClient.HostConfigTracker.instance().aidaAvailability;
     if (currentAidaAvailability !== Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
       return;
     }

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -409,7 +409,8 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
   #isSlow = false;
   #timeoutId: ReturnType<typeof setTimeout>|null = null;
   #aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
-  #boundOnAidaAvailabilityChange: () => Promise<void>;
+  #boundOnAidaAvailabilityChange:
+      (ev: Common.EventTarget.EventTargetEvent<Host.AidaClient.AidaAccessPreconditions>) => void;
   #boundOnDownloadProgressChange: (event: Common.EventTarget.EventTargetEvent<number>) => void;
   #boundOnSessionCreation: () => void;
   #downloadProgress: number|null = null;
@@ -448,14 +449,17 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     return Common.Settings.Settings.instance().createLocalSetting('console-insights-onboarding-finished', true);
   }
 
-  async #onAidaAvailabilityChange(): Promise<void> {
-    const currentAidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
-    if (currentAidaAvailability !== this.#aidaAvailability) {
-      this.#aidaAvailability = currentAidaAvailability;
+  #updateAidaAvailability(aidaAvailability: Host.AidaClient.AidaAccessPreconditions): void {
+    if (aidaAvailability !== this.#aidaAvailability) {
+      this.#aidaAvailability = aidaAvailability;
       this.requestUpdate();
     }
   }
 
+  #onAidaAvailabilityChange(ev: Common.EventTarget.EventTargetEvent<Host.AidaClient.AidaAccessPreconditions>): void {
+    this.#updateAidaAvailability(ev.data);
+  }
+
   #executeConsoleInsightAction(): void {
     UI.Context.Context.instance().setFlavor(ConsoleViewMessage, this.#consoleViewMessage);
     const action = UI.ActionRegistry.ActionRegistry.instance().getAction(EXPLAIN_TEASER_ACTION_ID);
@@ -731,7 +735,10 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     super.wasShown();
     Host.AidaClient.HostConfigTracker.instance().addEventListener(
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
-    void this.#onAidaAvailabilityChange();
+    const initialAvailability = Host.AidaClient.HostConfigTracker.instance().aidaAvailability;
+    if (initialAvailability !== undefined) {
+      this.#updateAidaAvailability(initialAvailability);
+    }
   }
 
   override willHide(): void {

package/front_end/panels/console/ConsoleView.ts

@@ -196,9 +196,9 @@ const UIStrings = {
    */
   copyVisibleStyledSelection: 'Copy visible styled selection',
   /**
-   * @description Text to replay an XHR request.
+   * @description Text to resend a network request.
    */
-  replayXhr: 'Replay XHR',
+  resend: 'Resend',
   /**
    * @description Text to indicate DevTools is writing to a file.
    */
@@ -1338,10 +1338,10 @@ export class ConsoleView extends UI.Widget.VBox implements
 
     if (consoleMessage) {
       const request = Logs.NetworkLog.NetworkLog.requestForConsoleMessage(consoleMessage);
-      if (request && SDK.NetworkManager.NetworkManager.canReplayRequest(request)) {
-        contextMenu.debugSection().appendItem(
-            i18nString(UIStrings.replayXhr), SDK.NetworkManager.NetworkManager.replayRequest.bind(null, request),
-            {jslogContext: 'replay-xhr'});
+      if (request && SDK.NetworkManager.NetworkManager.canResendRequest(request)) {
+        contextMenu.debugSection().appendItem(i18nString(UIStrings.resend),
+                                              SDK.NetworkManager.NetworkManager.replayRequest.bind(null, request),
+                                              {jslogContext: 'resend'});
       }
     }
 

package/front_end/panels/console_counters/WarningErrorCounter.ts

@@ -19,20 +19,20 @@ const {html, nothing, render} = Lit;
 
 const UIStrings = {
   /**
-   * @description The console error count in the Warning Error Counter shown in the main toolbar (top-left in DevTools). The error count refers to the number of errors currently present in the JavaScript console.
+   * @description The console error count in the Warning Error Counter shown in the main toolbar (top-left in DevTools). The error count refers to the number of errors currently present in the Console.
    */
   sErrors: '{n, plural, =1 {# error} other {# errors}}',
   /**
-   * @description The console warning count in the Warning Error Counter shown in the main toolbar (top-left in DevTools). The warning count refers to the number of warnings currently present in the JavaScript console.
+   * @description The console warning count in the Warning Error Counter shown in the main toolbar (top-left in DevTools). The warning count refers to the number of warnings currently present in the Console.
    */
   sWarnings: '{n, plural, =1 {# warning} other {# warnings}}',
   /**
-   * @description Tooltip shown for a main toolbar button that opens the Console panel
+   * @description Tooltip shown for a main toolbar button that opens the Console panel.
    * @example {2 errors, 1 warning} PH1
    */
   openConsoleToViewS: 'Open Console to view {PH1}',
   /**
-   * @description Title for the issues count in the Issues Error Counter shown in the main toolbar (top-left in DevTools). The issues count refers to the number of issues in the issues tab.
+   * @description Title for the issues count in the Issues Error Counter shown in the main toolbar (top-left in DevTools). The issues count refers to the number of issues in the Issues tab.
    */
   openIssuesToView: '{n, plural, =1 {Open Issues to view # issue:} other {Open Issues to view # issues:}}',
 } as const;

package/front_end/panels/coverage/CoverageModel.ts

@@ -61,6 +61,7 @@ export class CoverageModel extends SDK.SDKModel.SDKModel<EventTypes> {
   private sourceMapManager: SDK.SourceMapManager.SourceMapManager<SDK.Script.Script>|null;
   private willResolveSourceMaps: boolean;
   private processSourceMapBacklog: SourceMapObject[];
+  private isPolling: boolean;
 
   constructor(target: SDK.Target.Target) {
     super(target);
@@ -88,6 +89,7 @@ export class CoverageModel extends SDK.SDKModel.SDKModel<EventTypes> {
     this.performanceTraceRecording = false;
     this.willResolveSourceMaps = false;
     this.processSourceMapBacklog = [];
+    this.isPolling = false;
   }
 
   async start(jsCoveragePerBlock: boolean): Promise<boolean> {
@@ -184,22 +186,30 @@ export class CoverageModel extends SDK.SDKModel.SDKModel<EventTypes> {
   }
 
   async startPolling(): Promise<void> {
-    if (this.currentPollPromise || this.suspensionState !== SuspensionState.ACTIVE) {
+    if (this.isPolling || this.suspensionState !== SuspensionState.ACTIVE) {
       return;
     }
+    this.isPolling = true;
     await this.pollLoop();
   }
 
   private async pollLoop(): Promise<void> {
     this.clearTimer();
+    if (!this.isPolling) {
+      return;
+    }
     this.currentPollPromise = this.pollAndCallback();
     await this.currentPollPromise;
+    if (!this.isPolling) {
+      return;
+    }
     if (this.suspensionState === SuspensionState.ACTIVE || this.performanceTraceRecording) {
       this.pollTimer = window.setTimeout(() => this.pollLoop(), COVERAGE_POLLING_PERIOD_MS);
     }
   }
 
   async stopPolling(): Promise<void> {
+    this.isPolling = false;
     this.clearTimer();
     await this.currentPollPromise;
     this.currentPollPromise = null;

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -154,7 +154,7 @@ export class StylePropertiesSection {
   private parentsComputedStyles: Map<string, string>|null;
   private computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null;
   editable: boolean;
-  private hoverTimer: number|null = null;
+  private hoverTimer: ReturnType<typeof setTimeout>|null = null;
   private willCauseCancelEditing = false;
   private forceShowAll = false;
   private readonly originalPropertiesCount: number;
@@ -275,7 +275,11 @@ export class StylePropertiesSection {
     this.selectorElement.classList.add('selector');
     this.selectorElement.textContent = headerText;
     selectorContainer.appendChild(this.selectorElement);
-    this.selectorElement.addEventListener('mouseenter', this.onMouseEnterSelector.bind(this), false);
+    this.selectorElement.addEventListener('mouseenter', () => {
+      if (this.styleInternal.parentRule instanceof SDK.CSSRule.CSSStyleRule) {
+        this.onMouseEnterSelector(this.styleInternal.parentRule);
+      }
+    }, false);
     this.selectorElement.addEventListener('mouseleave', this.onMouseOutSelector.bind(this), false);
     this.#specificityTooltips = selectorContainer.createChild('span');
 
@@ -679,23 +683,31 @@ export class StylePropertiesSection {
     SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
   }
 
-  private onMouseEnterSelector(): void {
+  private onMouseEnterSelector(rule: SDK.CSSRule.CSSStyleRule, nestingIndex?: number): void {
     if (this.hoverTimer) {
       clearTimeout(this.hoverTimer);
     }
-    this.hoverTimer = window.setTimeout(this.highlight.bind(this), 300);
+    const selectorList = constructResolvedSelector(rule, nestingIndex);
+    if (!selectorList) {
+      return;
+    }
+    this.hoverTimer = setTimeout(this.highlight.bind(this, undefined, selectorList), 300);
   }
 
-  highlight(mode: string|undefined = 'all'): void {
+  /**
+   * Highlights the DOM node associated with this style section in the page overlay.
+   * Use `selectorList` to highlight elements matching a specific parent/ancestor
+   * rule or selector.
+   *
+   * @param mode Highlight mode (defaults to `'all'`).
+   * @param selectorList Parent selector string to highlight.
+   */
+  highlight(mode: string|undefined = 'all', selectorList: string): void {
     SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
     const node = this.stylesContainer.node();
     if (!node) {
       return;
     }
-    const selectorList =
-        this.styleInternal.parentRule && this.styleInternal.parentRule instanceof SDK.CSSRule.CSSStyleRule ?
-        this.styleInternal.parentRule.selectorText() :
-        undefined;
     node.domModel().overlayModel().highlightInOverlay({node, selectorList}, mode);
   }
 
@@ -1140,6 +1152,8 @@ export class StylePropertiesSection {
       }
 
       const selectorElement = container.createChild('span', 'selector');
+      selectorElement.addEventListener('mouseenter', () => this.onMouseEnterSelector(parentRule), false);
+      selectorElement.addEventListener('mouseleave', this.onMouseOutSelector.bind(this), false);
       const specificityContainer = container.createChild('span');
       this.renderSelectorsToElement(parentRule.selectors, matchingSelectors, this.elementToSelectorIndex,
                                     selectorElement, specificityContainer);
@@ -1150,6 +1164,8 @@ export class StylePropertiesSection {
     }
 
     const nestingElement = document.createElement('div');
+    nestingElement.addEventListener('mouseenter', () => this.onMouseEnterSelector(rule, nestingIndex), false);
+    nestingElement.addEventListener('mouseleave', this.onMouseOutSelector.bind(this), false);
     nestingElement.textContent = `${nestingSelector} {`;
     return nestingElement;
   }
@@ -1502,7 +1518,7 @@ export class StylePropertiesSection {
   }
 
   markSelectorHighlights(): void {
-    const selectors = this.selectorElement.getElementsByClassName('simple-selector');
+    const selectors = this.element.getElementsByClassName('simple-selector');
     const regex = this.stylesContainer.filterRegex();
     for (let i = 0; i < selectors.length; ++i) {
       const selectorMatchesFilter = regex?.test(selectors[i].textContent || '');
@@ -2257,3 +2273,36 @@ export class HighlightPseudoStylePropertiesSection extends StylePropertiesSectio
 interface TreeElementParent {
   appendChild(child: UI.TreeOutline.TreeElement): void;
 }
+
+export function constructResolvedSelector(rule: SDK.CSSRule.CSSRule|null, nestingIndex?: number): string|undefined {
+  if (!(rule instanceof SDK.CSSRule.CSSStyleRule)) {
+    return undefined;
+  }
+
+  const nestingSelectors = rule.nestingSelectors;
+  if (!nestingSelectors) {
+    return nestingIndex === undefined ? rule.selectorText() : undefined;
+  }
+
+  if (nestingIndex !== undefined && (nestingIndex < 0 || nestingIndex >= nestingSelectors.length)) {
+    return undefined;
+  }
+
+  const selectorText = nestingIndex !== undefined ? nestingSelectors[nestingIndex] : rule.selectorText();
+
+  const parentIndex = nestingIndex !== undefined ? nestingIndex + 1 : 0;
+  const parentSelector = constructResolvedSelector(rule, parentIndex);
+
+  if (!parentSelector) {
+    return selectorText;
+  }
+
+  // Strip pseudo-elements (e.g. ::before) because pseudo-elements are invalid inside CSS :is(...).
+  const sanitizedParent = parentSelector.replace(/::[a-zA-Z-]+/g, '').trim();
+
+  if (selectorText.includes('&')) {
+    return selectorText.replaceAll('&', `:is(${sanitizedParent})`);
+  }
+
+  return `:is(${sanitizedParent}) ${selectorText.trim()}`;
+}

package/front_end/panels/elements/StylesAiCodeCompletionProvider.ts

@@ -29,17 +29,29 @@ export class StylesAiCodeCompletionProvider {
     sampleId?: number,
   }|null) => void;
 
-  #boundOnUpdateAiCodeCompletionState = this.#updateAiCodeCompletionState.bind(this);
+  #boundOnAidaAvailabilityChange =
+      (ev: Common.EventTarget.EventTargetEvent<Host.AidaClient.AidaAccessPreconditions>): void => {
+        this.#updateAiCodeCompletionStateWithAvailability(ev.data);
+      };
+  #boundOnSettingChange = (): void => {
+    const aidaAvailability = Host.AidaClient.HostConfigTracker.instance().aidaAvailability;
+    if (aidaAvailability !== undefined) {
+      this.#updateAiCodeCompletionStateWithAvailability(aidaAvailability);
+    }
+  };
 
   private constructor(aiCodeCompletionConfig: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig) {
     if (!AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesAvailable()) {
       throw new Error('AI code completion feature in Styles is not available.');
     }
     this.#aiCodeCompletionConfig = aiCodeCompletionConfig;
-    Host.AidaClient.HostConfigTracker.instance().addEventListener(
-        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnUpdateAiCodeCompletionState);
-    this.#aiCodeCompletionSetting.addChangeListener(this.#boundOnUpdateAiCodeCompletionState);
-    void this.#updateAiCodeCompletionState();
+    Host.AidaClient.HostConfigTracker.instance().addEventListener(Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED,
+                                                                  this.#boundOnAidaAvailabilityChange);
+    this.#aiCodeCompletionSetting.addChangeListener(this.#boundOnSettingChange);
+    const initialAvailability = Host.AidaClient.HostConfigTracker.instance().aidaAvailability;
+    if (initialAvailability !== undefined) {
+      this.#updateAiCodeCompletionStateWithAvailability(initialAvailability);
+    }
   }
 
   static createInstance(aiCodeCompletionConfig: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig):
@@ -78,8 +90,7 @@ export class StylesAiCodeCompletionProvider {
     this.#aiCodeCompletionConfig?.onFeatureDisabled();
   }
 
-  async #updateAiCodeCompletionState(): Promise<void> {
-    const aidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
+  #updateAiCodeCompletionStateWithAvailability(aidaAvailability: Host.AidaClient.AidaAccessPreconditions): void {
     const isAvailable = aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE;
     const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance().locale;
     const isEnabled =

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -235,6 +235,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   #shouldRenderLazily = false;
   #lazyRenderObserver?: IntersectionObserver;
   #lazyRenderCallbacks = new WeakMap<Element, () => void>();
+  #elementsForSyncViewportCheck: Element[] = [];
   #updateId = 0;
 
   constructor(computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel) {
@@ -990,6 +991,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
     const focusedIndex = this.focusedSectionIndex();
 
+    this.#elementsForSyncViewportCheck = [];
     this.linkifier.reset();
     const prevSections = this.sectionBlocks.map(block => block.sections).flat();
 
@@ -1047,6 +1049,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }
 
     this.sectionsContainer.contentElement.appendChild(fragment);
+    this.#performSyncViewportCheck();
 
     if (elementToFocus) {
       elementToFocus.focus();
@@ -1655,9 +1658,54 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       }, {rootMargin: '100px'});
     }
     this.#lazyRenderCallbacks.set(element, callback);
+    this.#elementsForSyncViewportCheck.push(element);
     this.#lazyRenderObserver.observe(element);
   }
 
+  #performSyncViewportCheck(): void {
+    if (!this.#shouldRenderLazily || this.#elementsForSyncViewportCheck.length === 0) {
+      this.#elementsForSyncViewportCheck = [];
+      return;
+    }
+    const scrollContainer = this.contentElement.parentElement;
+    if (!scrollContainer) {
+      this.#elementsForSyncViewportCheck = [];
+      return;
+    }
+    const {top, bottom} = scrollContainer.getBoundingClientRect();
+    if (bottom === top) {
+      this.#elementsForSyncViewportCheck = [];
+      return;
+    }
+    // Expand the bounding calculation by ±100px to accurately match the {rootMargin: '100px'}
+    // option configured on the IntersectionObserver in trackForLazyRendering.
+    const viewportTop = top - 100;
+    const viewportBottom = bottom + 100;
+
+    const visibleElements: Element[] = [];
+    for (const element of this.#elementsForSyncViewportCheck) {
+      if (!element.isConnected || !this.#lazyRenderCallbacks.has(element)) {
+        continue;
+      }
+      const rect = element.getBoundingClientRect();
+      if (rect.top > viewportBottom) {
+        break;
+      }
+      if (rect.bottom >= viewportTop) {
+        visibleElements.push(element);
+      }
+    }
+    this.#elementsForSyncViewportCheck = [];
+
+    for (const element of visibleElements) {
+      const callback = this.#lazyRenderCallbacks.get(element);
+      if (callback) {
+        callback();
+        this.untrackForLazyRendering(element);
+      }
+    }
+  }
+
   shouldRenderLazily(): boolean {
     return this.#shouldRenderLazily;
   }

package/front_end/panels/emulation/AdvancedApp.ts

@@ -5,13 +5,14 @@
 
 import type * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
+import type * as Foundation from '../../foundation/foundation.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import {DeviceModeWrapper} from './DeviceModeWrapper.js';
 import {type Bounds, Events, InspectedPagePlaceholder} from './InspectedPagePlaceholder.js';
 
-let appInstance: AdvancedApp;
+let appInstance: AdvancedApp|null = null;
 
 export class AdvancedApp implements UI.App.App {
   private rootSplitWidget!: UI.SplitWidget.SplitWidget;
@@ -20,8 +21,10 @@ export class AdvancedApp implements UI.App.App {
   private toolboxWindow?: Window|null;
   private toolboxRootView?: UI.RootView.RootView;
   private changingDockSide?: boolean;
+  readonly #universe: Foundation.Universe.Universe;
 
-  constructor() {
+  constructor(universe: Foundation.Universe.Universe) {
+    this.#universe = universe;
     UI.DockController.DockController.instance().addEventListener(
         UI.DockController.Events.BEFORE_DOCK_SIDE_CHANGED, this.openToolboxWindow, this);
   }
@@ -29,15 +32,22 @@ export class AdvancedApp implements UI.App.App {
   /**
    * Note: it's used by toolbox.ts without real type checks.
    */
-  static instance(): AdvancedApp {
+  static instance(universe?: Foundation.Universe.Universe): AdvancedApp {
     if (!appInstance) {
-      appInstance = new AdvancedApp();
+      if (!universe) {
+        throw new Error('AdvancedApp.instance() requires a Universe on initial instantiation');
+      }
+      appInstance = new AdvancedApp(universe);
     }
     return appInstance;
   }
 
+  static removeInstance(): void {
+    appInstance = null;
+  }
+
   presentUI(document: Document): void {
-    const rootView = new UI.RootView.RootView();
+    const rootView = new UI.RootView.RootView(this.#universe);
 
     this.rootSplitWidget =
         new UI.SplitWidget.SplitWidget(false, true, 'inspector-view.split-view-state', 555, 300, true);
@@ -85,7 +95,7 @@ export class AdvancedApp implements UI.App.App {
     UI.UIUtils.installComponentRootStyles(toolboxDocument.body);
     UI.ContextMenu.ContextMenu.installHandler(toolboxDocument);
 
-    this.toolboxRootView = new UI.RootView.RootView();
+    this.toolboxRootView = new UI.RootView.RootView(this.#universe);
     this.toolboxRootView.attachToDocument(toolboxDocument);
 
     this.updateDeviceModeView();
@@ -200,7 +210,7 @@ export class AdvancedAppProvider implements UI.AppProvider.AppProvider {
     return advancedAppProviderInstance;
   }
 
-  createApp(): UI.App.App {
-    return AdvancedApp.instance();
+  createApp(universe: Foundation.Universe.Universe): UI.App.App {
+    return AdvancedApp.instance(universe);
   }
 }

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -460,7 +460,6 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
     this.showMediaInspectorSetting.addChangeListener(this.requestUpdate, this);
     this.showRulersSetting = Common.Settings.Settings.instance().moduleSetting('emulation.show-rulers');
     this.showRulersSetting.addChangeListener(this.requestUpdate, this);
-
     this.showDeviceScaleFactorSetting =
         Common.Settings.Settings.instance().createSetting('emulation.show-device-scale-factor', false);
     this.showDeviceScaleFactorSetting.addChangeListener(this.requestUpdate, this);