chrome-devtools-frontend 1.0.1538310 → 1.0.1539728

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -53,6 +53,7 @@ import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as Emulation from '../emulation/emulation.js';
 import * as Media from '../media/media.js';
@@ -64,6 +65,7 @@ import {ElementsPanel} from './ElementsPanel.js';
 import {type ElementsTreeOutline, MappedCharToEntity} from './ElementsTreeOutline.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {getRegisteredDecorators, type MarkerDecorator, type MarkerDecoratorRegistration} from './MarkerDecorator.js';
+const {html, nothing, render, Directives: {ref, repeat}} = Lit;
 
 const UIStrings = {
   /**
@@ -335,12 +337,7 @@ const enum TagType {
 
 interface OpeningTagContext {
   tagType: TagType.OPENING;
-  readonly adornerContainer: HTMLElement;
-  adorners: Set<Adorners.Adorner.Adorner>;
-  styleAdorners: Set<Adorners.Adorner.Adorner>;
-  readonly adornersThrottler: Common.Throttler.Throttler;
   canAddAttributes: boolean;
-  slot?: Adorners.Adorner.Adorner;
 }
 
 interface ClosingTagContext {
@@ -353,11 +350,47 @@ export function isOpeningTag(context: TagTypeContext): context is OpeningTagCont
   return context.tagType === TagType.OPENING;
 }
 
+export interface ViewInput {
+  adorners?: Set<Adorners.Adorner.Adorner>;
+  nodeInfo?: DocumentFragment;
+
+  onGutterClick: (e: Event) => void;
+}
+
+export interface ViewOutput {
+  gutterContainer?: HTMLElement;
+  decorationsElement?: HTMLElement;
+  contentElement?: HTMLElement;
+}
+
+export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
+  // clang-format off
+  render(html`
+    <div ${ref(el => { output.contentElement = el as HTMLElement; })}>
+      ${input.nodeInfo ? html`<span class="highlight">${input.nodeInfo}</span>` : nothing}
+      <div class="gutter-container" @click=${input.onGutterClick} ${ref(el => { output.gutterContainer = el as HTMLElement; })}>
+        <devtools-icon name="dots-horizontal"></devtools-icon>
+        <div class="hidden" ${ref(el => { output.decorationsElement = el as HTMLElement; })}></div>
+      </div>
+      ${input.adorners ? html`<div class="adorner-container ${input.adorners.size === 0 ? 'hidden': ''}">
+        ${repeat(Array.from(input.adorners.values()).sort(adornerComparator), adorner => {
+          return adorner;
+        })}
+      </div>`: nothing}
+    </div>
+  `, target);
+  // clang-format on
+};
+
 export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   nodeInternal: SDK.DOMModel.DOMNode;
   override treeOutline: ElementsTreeOutline|null;
-  private gutterContainer: HTMLElement;
-  private readonly decorationsElement: HTMLElement;
+
+  // Handled by the view output for now.
+  gutterContainer!: HTMLElement;
+  decorationsElement!: HTMLElement;
+  contentElement!: HTMLElement;
+
   private searchQuery: string|null;
   #expandedChildrenLimit: number;
   private readonly decorationsThrottler: Common.Throttler.Throttler;
@@ -369,13 +402,16 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   selectionElement?: HTMLDivElement;
   private hintElement?: HTMLElement;
   private aiButtonContainer?: HTMLElement;
-  private contentElement: HTMLElement;
   #elementIssues = new Map<string, IssuesManager.Issue.Issue>();
   #nodeElementToIssue = new Map<Element, IssuesManager.Issue.Issue[]>();
   #highlights: Range[] = [];
 
   readonly tagTypeContext: TagTypeContext;
 
+  #adornersThrottler = new Common.Throttler.Throttler(100);
+  #adorners = new Set<Adorners.Adorner.Adorner>();
+  #nodeInfo?: DocumentFragment;
+
   constructor(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean) {
     // The title will be updated in onattach.
     super();
@@ -387,13 +423,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           drag: true,
           click: true,
         })}`);
-    this.contentElement = this.listItemElement.createChild('div');
-    this.gutterContainer = this.contentElement.createChild('div', 'gutter-container');
-    this.gutterContainer.addEventListener('click', this.showContextMenu.bind(this));
-    const gutterMenuIcon = new IconButton.Icon.Icon();
-    gutterMenuIcon.name = 'dots-horizontal';
-    this.gutterContainer.append(gutterMenuIcon);
-    this.decorationsElement = this.gutterContainer.createChild('div', 'hidden');
 
     this.searchQuery = null;
     this.#expandedChildrenLimit = InitialChildrenLimit;
@@ -409,10 +438,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     } else {
       this.tagTypeContext = {
         tagType: TagType.OPENING,
-        adornerContainer: this.contentElement.createChild('div', 'adorner-container hidden'),
-        adorners: new Set(),
-        styleAdorners: new Set(),
-        adornersThrottler: new Common.Throttler.Throttler(100),
         canAddAttributes: this.nodeInternal.nodeType() === Node.ELEMENT_NODE,
       };
       void this.updateStyleAdorners();
@@ -428,6 +453,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
     this.expandAllButtonElement = null;
 
+    this.performUpdate();
+
     if (this.nodeInternal.retained && !this.isClosingTag()) {
       const icon = new IconButton.Icon.Icon();
       icon.name = 'small-status-dot';
@@ -498,6 +525,20 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
+  get adorners(): Adorners.Adorner.Adorner[] {
+    return Array.from(this.#adorners);
+  }
+
+  performUpdate(): void {
+    DEFAULT_VIEW(
+        {
+          adorners: !this.isClosingTag() ? this.#adorners : undefined,
+          nodeInfo: this.#nodeInfo,
+          onGutterClick: this.showContextMenu.bind(this),
+        },
+        this, this.listItemElement);
+  }
+
   highlightAttribute(attributeName: string): void {
     // If the attribute is not found, we highlight the tag name instead.
     let animationElement = this.listItemElement.querySelector('.webkit-html-tag-name') ?? this.listItemElement;
@@ -645,14 +686,15 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     if (nodeShortcut) {
       const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
           ElementsComponents.AdornerManager.RegisteredAdorners.SLOT);
-      this.tagTypeContext.slot = this.adornSlot(config, this.tagTypeContext);
+      const adorner = this.adornSlot(config);
+      this.#adorners.add(adorner);
       const deferredNode = nodeShortcut.deferredNode;
-      this.tagTypeContext.slot.addEventListener('click', () => {
+      adorner.addEventListener('click', () => {
         deferredNode.resolve(node => {
           void Common.Revealer.reveal(node);
         });
       });
-      this.tagTypeContext.slot.addEventListener('mousedown', e => e.consume(), false);
+      adorner.addEventListener('mousedown', e => e.consume(), false);
     }
   }
 
@@ -735,7 +777,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   override async expandRecursively(): Promise<void> {
-    await this.nodeInternal.getSubtree(-1, true);
+    await this.nodeInternal.getSubtree(100, true);
     await super.expandRecursively(Number.MAX_VALUE);
   }
 
@@ -1740,7 +1782,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
 
-    const nodeInfo = this.nodeTitleInfo(updateRecord || null);
+    this.#nodeInfo = this.nodeTitleInfo(updateRecord || null);
     if (this.nodeInternal.nodeType() === Node.DOCUMENT_FRAGMENT_NODE && this.nodeInternal.isInShadowTree() &&
         this.nodeInternal.shadowRootType()) {
       this.childrenListElement.classList.add('shadow-root');
@@ -1757,19 +1799,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         this.childrenListElement.classList.add('shadow-root-depth-' + depth);
       }
     }
-    this.contentElement.removeChildren();
-    const highlightElement = this.contentElement.createChild('span', 'highlight');
-    highlightElement.append(nodeInfo);
+    this.performUpdate();
     // fixme: make it clear that `this.title = x` is a setter with significant side effects
     this.title = this.contentElement;
     this.updateDecorations();
-    this.contentElement.prepend(this.gutterContainer);
-    if (isOpeningTag(this.tagTypeContext)) {
-      this.contentElement.append(this.tagTypeContext.adornerContainer);
-    }
-    delete this.selectionElement;
-    delete this.hintElement;
-    delete this.aiButtonContainer;
     if (this.selected) {
       this.createSelection();
       this.createHint();
@@ -2463,14 +2496,14 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       jslogContext: name,
     };
     if (isOpeningTag(this.tagTypeContext)) {
-      this.tagTypeContext.adorners.add(adorner);
+      this.#adorners.add(adorner);
       ElementsPanel.instance().registerAdorner(adorner);
-      this.updateAdorners(this.tagTypeContext);
+      this.updateAdorners();
     }
     return adorner;
   }
 
-  adornSlot({name}: {name: string}, context: OpeningTagContext): Adorners.Adorner.Adorner {
+  adornSlot({name}: {name: string}): Adorners.Adorner.Adorner {
     const linkIcon = IconButton.Icon.create('select-element');
     const slotText = document.createElement('span');
     slotText.textContent = name;
@@ -2484,9 +2517,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       content: adornerContent,
       jslogContext: 'slot',
     };
-    context.adorners.add(adorner);
+    this.#adorners.add(adorner);
     ElementsPanel.instance().registerAdorner(adorner);
-    this.updateAdorners(context);
+    this.updateAdorners();
     return adorner;
   }
 
@@ -2506,19 +2539,18 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       jslogContext: 'media',
     };
     if (isOpeningTag(this.tagTypeContext)) {
-      this.tagTypeContext.adorners.add(adorner);
+      this.#adorners.add(adorner);
       ElementsPanel.instance().registerAdorner(adorner);
-      this.updateAdorners(this.tagTypeContext);
+      this.updateAdorners();
     }
     return adorner;
   }
 
-  removeAdorner(adornerToRemove: Adorners.Adorner.Adorner, context: OpeningTagContext): void {
+  removeAdorner(adornerToRemove: Adorners.Adorner.Adorner): void {
     ElementsPanel.instance().deregisterAdorner(adornerToRemove);
     adornerToRemove.remove();
-    context.adorners.delete(adornerToRemove);
-    context.styleAdorners.delete(adornerToRemove);
-    this.updateAdorners(context);
+    this.#adorners.delete(adornerToRemove);
+    this.updateAdorners();
   }
 
   /**
@@ -2529,32 +2561,21 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
 
-    for (const adorner of this.tagTypeContext.adorners) {
+    for (const adorner of this.#adorners) {
       if (adorner.name === adornerType || !adornerType) {
-        this.removeAdorner(adorner, this.tagTypeContext);
+        this.removeAdorner(adorner);
       }
     }
   }
 
-  private updateAdorners(context: OpeningTagContext): void {
-    void context.adornersThrottler.schedule(this.#updateAdorners.bind(null, context));
+  private updateAdorners(): void {
+    // TODO: remove adornersThrottler in favour of throttled updated (requestUpdate/performUpdate).
+    void this.#adornersThrottler.schedule(this.#updateAdorners.bind(this));
   }
 
-  #updateAdorners(context: OpeningTagContext): Promise<void> {
-    const adornerContainer = context.adornerContainer;
-    if (!adornerContainer) {
-      return Promise.resolve();
-    }
-    const adorners = [...context.adorners].sort(adornerComparator);
-    if (context.slot) {
-      adorners.push(context.slot);
-    }
-
-    adornerContainer.removeChildren();
-    for (const adorner of adorners) {
-      adornerContainer.appendChild(adorner);
-    }
-    adornerContainer.classList.toggle('hidden', adorners.length === 0);
+  #updateAdorners(): Promise<void> {
+    // TODO: remove in favour of throttled updated (requestUpdate/performUpdate).
+    this.performUpdate();
     return Promise.resolve();
   }
 
@@ -2571,44 +2592,51 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
 
     const layout = await node.domModel().cssModel().getLayoutPropertiesFromComputedStyle(nodeId);
-    for (const styleAdorner of this.tagTypeContext.styleAdorners) {
-      this.removeAdorner(styleAdorner, this.tagTypeContext);
-    }
+    // TODO: move this to the template.
+    this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.SUBGRID);
+    this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.GRID);
+    this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.MASONRY);
+    this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.FLEX);
+    this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL_SNAP);
+    this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.CONTAINER);
+    this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.MEDIA);
+    this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.STARTING_STYLE);
+    this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.POPOVER);
     if (layout) {
       if (layout.isGrid) {
-        this.pushGridAdorner(this.tagTypeContext, layout.isSubgrid);
+        this.pushGridAdorner(layout.isSubgrid);
       }
       if (layout.isMasonry) {
-        this.pushMasonryAdorner(this.tagTypeContext);
+        this.pushMasonryAdorner();
       }
       if (layout.isFlex) {
-        this.pushFlexAdorner(this.tagTypeContext);
+        this.pushFlexAdorner();
       }
       if (layout.hasScroll) {
-        this.pushScrollSnapAdorner(this.tagTypeContext);
+        this.pushScrollSnapAdorner();
       }
       if (layout.isContainer) {
-        this.pushContainerAdorner(this.tagTypeContext);
+        this.pushContainerAdorner();
       }
     }
 
     if (node.isMediaNode()) {
-      this.pushMediaAdorner(this.tagTypeContext);
+      this.pushMediaAdorner();
     }
 
     if (Root.Runtime.hostConfig.devToolsStartingStyleDebugging?.enabled) {
       const affectedByStartingStyles = node.affectedByStartingStyles();
       if (affectedByStartingStyles) {
-        this.pushStartingStyleAdorner(this.tagTypeContext);
+        this.pushStartingStyleAdorner();
       }
     }
 
     if (node.attributes().find(attr => attr.name === 'popover')) {
-      this.pushPopoverAdorner(this.tagTypeContext);
+      this.pushPopoverAdorner();
     }
   }
 
-  pushPopoverAdorner(context: OpeningTagContext): void {
+  pushPopoverAdorner(): void {
     if (!Root.Runtime.hostConfig.devToolsAllowPopoverForcing?.enabled) {
       return;
     }
@@ -2629,7 +2657,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         if (!treeElement || !isOpeningTag(treeElement.tagTypeContext)) {
           return;
         }
-        const adorner = treeElement.tagTypeContext.adorners.values().find(adorner => adorner.name === config.name);
+        const adorner = this.#adorners.values().find(adorner => adorner.name === config.name);
         adorner?.toggle(false);
       }
     };
@@ -2640,10 +2668,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       ariaLabelActive: i18nString(UIStrings.stopForceOpenPopover),
     });
 
-    context.styleAdorners.add(adorner);
+    this.#adorners.add(adorner);
   }
 
-  pushGridAdorner(context: OpeningTagContext, isSubgrid: boolean): void {
+  pushGridAdorner(isSubgrid: boolean): void {
     const node = this.node();
     const nodeId = node.id;
     if (!nodeId) {
@@ -2682,13 +2710,13 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           adorner.toggle(enabled);
         });
 
-    context.styleAdorners.add(adorner);
+    this.#adorners.add(adorner);
     if (node.domModel().overlayModel().isHighlightedGridInPersistentOverlay(nodeId)) {
       adorner.toggle(true);
     }
   }
 
-  pushMasonryAdorner(context: OpeningTagContext): void {
+  pushMasonryAdorner(): void {
     const node = this.node();
     const nodeId = node.id;
     if (!nodeId) {
@@ -2724,13 +2752,13 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           adorner.toggle(enabled);
         });
 
-    context.styleAdorners.add(adorner);
+    this.#adorners.add(adorner);
     if (node.domModel().overlayModel().isHighlightedGridInPersistentOverlay(nodeId)) {
       adorner.toggle(true);
     }
   }
 
-  pushScrollSnapAdorner(context: OpeningTagContext): void {
+  pushScrollSnapAdorner(): void {
     const node = this.node();
     const nodeId = node.id;
     if (!nodeId) {
@@ -2766,14 +2794,14 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           adorner.toggle(enabled);
         });
 
-    context.styleAdorners.add(adorner);
+    this.#adorners.add(adorner);
 
     if (node.domModel().overlayModel().isHighlightedScrollSnapInPersistentOverlay(nodeId)) {
       adorner.toggle(true);
     }
   }
 
-  pushStartingStyleAdorner(context: OpeningTagContext): void {
+  pushStartingStyleAdorner(): void {
     const node = this.node();
     const nodeId = node.id;
     if (!nodeId) {
@@ -2800,10 +2828,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       ariaLabelActive: i18nString(UIStrings.disableStartingStyle),
     });
 
-    context.styleAdorners.add(adorner);
+    this.#adorners.add(adorner);
   }
 
-  pushFlexAdorner(context: OpeningTagContext): void {
+  pushFlexAdorner(): void {
     const node = this.node();
     const nodeId = node.id;
     if (!nodeId) {
@@ -2840,14 +2868,14 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           adorner.toggle(enabled);
         });
 
-    context.styleAdorners.add(adorner);
+    this.#adorners.add(adorner);
 
     if (node.domModel().overlayModel().isHighlightedFlexContainerInPersistentOverlay(nodeId)) {
       adorner.toggle(true);
     }
   }
 
-  pushContainerAdorner(context: OpeningTagContext): void {
+  pushContainerAdorner(): void {
     const node = this.node();
     const nodeId = node.id;
     if (!nodeId) {
@@ -2884,13 +2912,13 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           adorner.toggle(enabled);
         });
 
-    context.styleAdorners.add(adorner);
+    this.#adorners.add(adorner);
     if (node.domModel().overlayModel().isHighlightedContainerQueryInPersistentOverlay(nodeId)) {
       adorner.toggle(true);
     }
   }
 
-  pushMediaAdorner(context: OpeningTagContext): void {
+  pushMediaAdorner(): void {
     const node = this.node();
     const nodeId = node.id;
     if (!nodeId) {
@@ -2919,15 +2947,15 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       ariaLabelActive: i18nString(UIStrings.openMediaPanel),
     });
 
-    context.styleAdorners.add(adorner);
+    this.#adorners.add(adorner);
   }
 
   updateScrollAdorner(): void {
     if (!isOpeningTag(this.tagTypeContext)) {
       return;
     }
-    const scrollAdorner = this.tagTypeContext.adorners.values().find(
-        x => x.name === ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL);
+    const scrollAdorner =
+        this.#adorners.values().find(x => x.name === ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL);
     // Check if the node is scrollable, or if it's the <html> element and the document is scrollable
     // because the top-level document (#document) doesn't have a corresponding tree element.
     const needsAScrollAdorner = (this.node().nodeName() === 'HTML' && this.node().ownerDocument?.isScrollable()) ||
@@ -2935,7 +2963,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     if (needsAScrollAdorner && !scrollAdorner) {
       this.pushScrollAdorner();
     } else if (!needsAScrollAdorner && scrollAdorner) {
-      this.removeAdorner(scrollAdorner, this.tagTypeContext);
+      this.removeAdorner(scrollAdorner);
     }
   }
 

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -1986,7 +1986,7 @@ export class ElementsTreeOutline extends
     }
     const treeElement = this.treeElementByNode.get(node);
     if (treeElement && isOpeningTag(treeElement.tagTypeContext)) {
-      void treeElement.tagTypeContext.adornersThrottler.schedule(async () => treeElement.updateScrollAdorner());
+      void treeElement.updateScrollAdorner();
     }
   }
 
@@ -1995,7 +1995,7 @@ export class ElementsTreeOutline extends
     const {node} = event.data;
     const treeElement = this.treeElementByNode.get(node);
     if (treeElement && isOpeningTag(treeElement.tagTypeContext)) {
-      void treeElement.tagTypeContext.adornersThrottler.schedule(async () => await treeElement.updateStyleAdorners());
+      void treeElement.updateStyleAdorners();
     }
   }
 }

package/front_end/panels/elements/NodeStackTraceWidget.ts

@@ -4,6 +4,7 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Bindings from '../../models/bindings/bindings.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, render} from '../../ui/lit/lit.js';
@@ -65,9 +66,14 @@ export class NodeStackTraceWidget extends UI.Widget.VBox {
   override async performUpdate(): Promise<void> {
     const node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
 
-    const stackTrace = await node?.creationStackTrace() ?? undefined;
+    const target = node?.domModel().target();
+    const runtimeStackTrace = await node?.creationStackTrace() ?? undefined;
+    const stackTrace = runtimeStackTrace && target ?
+        await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createStackTraceFromProtocolRuntime(
+            runtimeStackTrace, target) :
+        undefined;
     const input: ViewInput = {
-      target: node?.domModel().target(),
+      target,
       linkifier: this.#linkifier,
       options: {stackTrace},
     };

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

@@ -374,7 +374,6 @@ export class ConsoleInsight extends HTMLElement {
   }
 
   connectedCallback(): void {
-    this.classList.add('opening');
     this.#consoleInsightsEnabledSetting?.addChangeListener(this.#onConsoleInsightsSettingChanged, this);
     const blockedByAge = Root.Runtime.hostConfig.aidaAvailability?.blockedByAge === true;
     if (this.#state.type === State.LOADING && this.#consoleInsightsEnabledSetting?.getIfNotDisabled() === true &&