chrome-devtools-frontend 1.0.1666631 → 1.0.1667564

package/front_end/panels/common/AiCodeCompletionDisclaimer.ts

@@ -5,6 +5,7 @@
 import '../../ui/components/spinners/spinners.js';
 import '../../ui/components/tooltips/tooltips.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 * as Root from '../../core/root/root.js';
@@ -196,7 +197,8 @@ export class AiCodeCompletionDisclaimer 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(element?: HTMLElement, view: View = DEFAULT_SUMMARY_TOOLBAR_VIEW) {
     super(element);
@@ -249,14 +251,17 @@ export class AiCodeCompletionDisclaimer 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);
+  }
+
   #onManageInSettingsTooltipClick(): void {
     this.#viewOutput.hideTooltip?.();
     void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
@@ -279,7 +284,10 @@ export class AiCodeCompletionDisclaimer 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/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(), 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,35 +683,31 @@ export class StylePropertiesSection {
     SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
   }
 
-  private onMouseEnterSelector(ruleOrSelector?: SDK.CSSRule.CSSStyleRule|string): void {
+  private onMouseEnterSelector(rule: SDK.CSSRule.CSSStyleRule, nestingIndex?: number): void {
     if (this.hoverTimer) {
       clearTimeout(this.hoverTimer);
     }
-    this.hoverTimer = window.setTimeout(this.highlight.bind(this, undefined, ruleOrSelector), 300);
+    const selectorList = constructResolvedSelector(rule, nestingIndex);
+    if (!selectorList) {
+      return;
+    }
+    this.hoverTimer = setTimeout(this.highlight.bind(this, undefined, selectorList), 300);
   }
 
   /**
    * Highlights the DOM node associated with this style section in the page overlay.
-   * Use `ruleOrSelector` to highlight elements matching a specific parent/ancestor
-   * rule or selector, or omit it to use the selector of the rule displayed in this section.
+   * Use `selectorList` to highlight elements matching a specific parent/ancestor
+   * rule or selector.
    *
    * @param mode Highlight mode (defaults to `'all'`).
-   * @param ruleOrSelector Parent selector string, parent rule, or `undefined`.
+   * @param selectorList Parent selector string to highlight.
    */
-  highlight(mode: string|undefined = 'all', ruleOrSelector?: SDK.CSSRule.CSSStyleRule|string): void {
+  highlight(mode: string|undefined = 'all', selectorList: string): void {
     SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
     const node = this.stylesContainer.node();
     if (!node) {
       return;
     }
-    let selectorList: string|undefined;
-    if (typeof ruleOrSelector === 'string') {
-      selectorList = ruleOrSelector;
-    } else if (ruleOrSelector instanceof SDK.CSSRule.CSSStyleRule) {
-      selectorList = ruleOrSelector.selectorText();
-    } else if (this.styleInternal.parentRule instanceof SDK.CSSRule.CSSStyleRule) {
-      selectorList = this.styleInternal.parentRule.selectorText();
-    }
     node.domModel().overlayModel().highlightInOverlay({node, selectorList}, mode);
   }
 
@@ -1164,7 +1164,7 @@ export class StylePropertiesSection {
     }
 
     const nestingElement = document.createElement('div');
-    nestingElement.addEventListener('mouseenter', () => this.onMouseEnterSelector(nestingSelector), false);
+    nestingElement.addEventListener('mouseenter', () => this.onMouseEnterSelector(rule, nestingIndex), false);
     nestingElement.addEventListener('mouseleave', this.onMouseOutSelector.bind(this), false);
     nestingElement.textContent = `${nestingSelector} {`;
     return nestingElement;
@@ -2273,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/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/event_listeners/EventListenersView.ts

@@ -21,31 +21,31 @@ import eventListenersViewStyles from './eventListenersView.css.js';
 
 const UIStrings = {
   /**
-   * @description Empty holder text content in Event Listeners View of the Event Listener Debugging pane in the Sources panel
+   * @description Empty holder text content in Event Listeners view of the Event Listeners sidebar in the Sources panel.
    */
   noEventListeners: 'No event listeners',
   /**
-   * @description Empty holder text content in Event Listeners View of the Event Listener Debugging pane in the Elements panel
+   * @description Empty holder text content in Event Listeners view of the Event Listeners sidebar in the Elements panel.
    */
   eventListenersExplanation: 'On this page you will find registered event listeners',
   /**
-   * @description Delete button title in Event Listeners View of the Event Listener Debugging pane in the Sources panel
+   * @description Delete button title in Event Listeners view of the Event Listeners sidebar in the Sources panel.
    */
   deleteEventListener: 'Delete event listener',
   /**
-   * @description Passive button text content in Event Listeners View of the Event Listener Debugging pane in the Sources panel
+   * @description Passive button text content in Event Listeners view of the Event Listeners sidebar in the Sources panel.
    */
-  togglePassive: 'Toggle Passive',
+  togglePassive: 'Toggle passive',
   /**
-   * @description Passive button title in Event Listeners View of the Event Listener Debugging pane in the Sources panel
+   * @description Passive button title in Event Listeners view of the Event Listeners sidebar in the Sources panel.
    */
   toggleWhetherEventListenerIs: 'Toggle whether event listener is passive or blocking',
   /**
-   * @description A context menu item to reveal a node in the DOM tree of the Elements Panel
+   * @description A context menu item to reveal a node in the DOM tree of the Elements panel.
    */
   openInElementsPanel: 'Open in Elements panel',
   /**
-   * @description Text in Event Listeners Widget of the Elements panel
+   * @description Text in Event Listeners widget of the Elements panel.
    */
   passive: 'Passive',
 } as const;

package/front_end/panels/explain/components/ConsoleInsight.ts

@@ -753,7 +753,8 @@ export type ViewFunction = typeof DEFAULT_VIEW;
 
 export class ConsoleInsight extends UI.Widget.Widget {
   static async create(promptBuilder: PublicPromptBuilder, aidaClient: PublicAidaClient): Promise<Lit.LitTemplate> {
-    const aidaPreconditions = await Host.AidaClient.AidaClient.checkAccessPreconditions();
+    const aidaPreconditions = Host.AidaClient.HostConfigTracker.instance().aidaAvailability ??
+        await Host.AidaClient.AidaClient.checkAccessPreconditions();
     return html`<devtools-widget class="devtools-console-insight" ${
         widget(element => new ConsoleInsight(promptBuilder, aidaClient, aidaPreconditions, element))}>
     </devtools-widget>`;
@@ -780,7 +781,8 @@ export class ConsoleInsight extends UI.Widget.Widget {
 
   #consoleInsightsEnabledSetting: Common.Settings.Setting<boolean>|undefined;
   #aidaPreconditions: Host.AidaClient.AidaAccessPreconditions;
-  #boundOnAidaAvailabilityChange: () => Promise<void>;
+  #boundOnAidaAvailabilityChange:
+      (ev: Common.EventTarget.EventTargetEvent<Host.AidaClient.AidaAccessPreconditions>) => void;
   #marked: Marked.Marked.Marked;
 
   constructor(
@@ -885,7 +887,10 @@ export class ConsoleInsight extends UI.Widget.Widget {
     Host.AidaClient.HostConfigTracker.instance().addEventListener(
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
     // If AIDA availability has changed while the component was disconnected, we need to update.
-    void this.#onAidaAvailabilityChange();
+    const initialAvailability = Host.AidaClient.HostConfigTracker.instance().aidaAvailability;
+    if (initialAvailability !== undefined) {
+      this.#updateAidaAvailability(initialAvailability);
+    }
     // The setting might have been turned on/off while the component was disconnected.
     // Update the state, unless the current state is already terminal (`INSIGHT` or `ERROR`).
     if (this.#state.type !== State.INSIGHT && this.#state.type !== State.ERROR) {
@@ -901,15 +906,18 @@ export class ConsoleInsight extends UI.Widget.Widget {
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
   }
 
-  async #onAidaAvailabilityChange(): Promise<void> {
-    const currentAidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
-    if (currentAidaAvailability !== this.#aidaPreconditions) {
-      this.#aidaPreconditions = currentAidaAvailability;
+  #updateAidaAvailability(aidaAvailability: Host.AidaClient.AidaAccessPreconditions): void {
+    if (aidaAvailability !== this.#aidaPreconditions) {
+      this.#aidaPreconditions = aidaAvailability;
       this.#state = this.#getStateFromAidaAvailability();
       void this.#generateInsightIfNeeded();
     }
   }
 
+  #onAidaAvailabilityChange(ev: Common.EventTarget.EventTargetEvent<Host.AidaClient.AidaAccessPreconditions>): void {
+    this.#updateAidaAvailability(ev.data);
+  }
+
   #onConsoleInsightsSettingChanged(): void {
     if (this.#consoleInsightsEnabledSetting?.getIfNotDisabled() === true) {
       this.#getOnboardingCompletedSetting().set(true);