chrome-devtools-frontend 1.0.1553956 → 1.0.1555430

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -342,6 +342,10 @@ const UIStrings = {
    * @description Context menu item in Elements panel to explain container context via AI.
    */
   explainContainerContext: 'Explain container context',
+  /**
+   * @description Link text content in Elements Tree Outline of the Elements panel. When clicked, it "reveals" the true location of an element.
+   */
+  reveal: 'reveal',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementsTreeElement.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -379,10 +383,12 @@ export interface ViewInput {
   showGridLanesAdorner: boolean;
   showMediaAdorner: boolean;
   showPopoverAdorner: boolean;
+  showTopLayerAdorner: boolean;
   isSubgrid: boolean;
 
   adorners?: Set<Adorners.Adorner.Adorner>;
   nodeInfo?: DocumentFragment;
+  topLayerIndex: number;
 
   onGutterClick: (e: Event) => void;
   onAdornerAdded: (adorner: Adorners.Adorner.Adorner) => void;
@@ -392,6 +398,7 @@ export interface ViewInput {
   onGridAdornerClick: (e: Event) => void;
   onMediaAdornerClick: (e: Event) => void;
   onPopoverAdornerClick: (e: Event) => void;
+  onTopLayerAdornerClick: (e: Event) => void;
 }
 
 export interface ViewOutput {
@@ -436,9 +443,11 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
       ElementsComponents.AdornerManager.RegisteredAdorners.MEDIA);
   const popoverAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
       ElementsComponents.AdornerManager.RegisteredAdorners.POPOVER);
+  const topLayerAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
+      ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER);
   const hasAdorners = input.adorners?.size || input.showAdAdorner || input.showContainerAdorner ||
       input.showFlexAdorner || input.showGridAdorner || input.showGridLanesAdorner || input.showMediaAdorner ||
-      input.showPopoverAdorner;
+      input.showPopoverAdorner || input.showTopLayerAdorner;
   // clang-format off
   render(html`
     <div ${ref(el => { output.contentElement = el as HTMLElement; })}>
@@ -571,6 +580,25 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           ${adornerRef(input)}>
           <span>${popoverAdornerConfig.name}</span>
         </devtools-adorner>`: nothing}
+        ${input.showTopLayerAdorner ? html`<devtools-adorner
+          class=clickable
+          role=button
+          tabindex=0
+          .data=${{name: topLayerAdornerConfig.name, jslogContext: topLayerAdornerConfig.name}}
+          jslog=${VisualLogging.adorner(topLayerAdornerConfig.name).track({click: true})}
+          aria-label=${i18nString(UIStrings.reveal)}
+          @click=${input.onTopLayerAdornerClick}
+          @keydown=${(event: KeyboardEvent) => {
+            if (event.code === 'Enter' || event.code === 'Space') {
+              input.onTopLayerAdornerClick(event);
+              event.stopPropagation();
+            }
+          }}
+          ${adornerRef(input)}>
+          <span class="adorner-with-icon">
+            ${`top-layer (${input.topLayerIndex})`}<devtools-icon name="select-element"></devtools-icon>
+          </span>
+        </devtools-adorner>`: nothing}
         ${repeat(Array.from((input.adorners ?? new Set()).values()).sort(adornerComparator), adorner => {
           return adorner;
         })}
@@ -768,10 +796,12 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           showMediaAdorner: this.node().isMediaNode() && !this.isClosingTag(),
           showPopoverAdorner: Boolean(Root.Runtime.hostConfig.devToolsAllowPopoverForcing?.enabled) &&
               Boolean(this.node().attributes().find(attr => attr.name === 'popover')) && !this.isClosingTag(),
+          showTopLayerAdorner: this.node().topLayerIndex() !== -1 && !this.isClosingTag(),
           gridAdornerActive: this.#gridAdornerActive,
           popoverAdornerActive: this.#popoverAdornerActive,
           isSubgrid: Boolean(this.#layout?.isSubgrid),
           nodeInfo: this.#nodeInfo,
+          topLayerIndex: this.node().topLayerIndex(),
           onGutterClick: this.showContextMenu.bind(this),
           onAdornerAdded: adorner => {
             ElementsPanel.instance().registerAdorner(adorner);
@@ -784,6 +814,12 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           onGridAdornerClick: (event: Event) => this.#onGridAdornerClick(event),
           onMediaAdornerClick: (event: Event) => this.#onMediaAdornerClick(event),
           onPopoverAdornerClick: (event: Event) => this.#onPopoverAdornerClick(event),
+          onTopLayerAdornerClick: () => {
+            if (!this.treeOutline) {
+              return;
+            }
+            this.treeOutline.revealInTopLayer(this.node());
+          },
         },
         this, this.listItemElement);
   }
@@ -1069,6 +1105,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   override onbind(): void {
     if (this.treeOutline && !this.isClosingTag()) {
       this.treeOutline.treeElementByNode.set(this.nodeInternal, this);
+      this.nodeInternal.addEventListener(SDK.DOMModel.DOMNodeEvents.TOP_LAYER_INDEX_CHANGED, this.performUpdate, this);
     }
   }
 
@@ -1079,6 +1116,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     if (this.treeOutline && this.treeOutline.treeElementByNode.get(this.nodeInternal) === this) {
       this.treeOutline.treeElementByNode.delete(this.nodeInternal);
     }
+    this.nodeInternal.removeEventListener(SDK.DOMModel.DOMNodeEvents.TOP_LAYER_INDEX_CHANGED, this.performUpdate, this);
   }
 
   override onattach(): void {

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -486,7 +486,7 @@ export class ElementsTreeOutline extends
   private treeElementBeingDragged?: ElementsTreeElement;
   private dragOverTreeElement?: ElementsTreeElement;
   private updateModifiedNodesTimeout?: number;
-  #topLayerContainerByParent = new Map<UI.TreeOutline.TreeElement, TopLayerContainer>();
+  #topLayerContainerByDocument = new WeakMap<SDK.DOMModel.DOMDocument, TopLayerContainer>();
   #issuesManager?: IssuesManager.IssuesManager.IssuesManager;
   #popupHelper?: UI.PopoverHelper.PopoverHelper;
   #nodeElementToIssues = new Map<Element, IssuesManager.Issue.Issue[]>();
@@ -1526,7 +1526,6 @@ export class ElementsTreeOutline extends
     domModel.addEventListener(SDK.DOMModel.Events.DocumentUpdated, this.documentUpdated, this);
     domModel.addEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.childNodeCountUpdated, this);
     domModel.addEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.distributedNodesChanged, this);
-    domModel.addEventListener(SDK.DOMModel.Events.TopLayerElementsChanged, this.topLayerElementsChanged, this);
     domModel.addEventListener(SDK.DOMModel.Events.ScrollableFlagUpdated, this.scrollableFlagUpdated, this);
     domModel.addEventListener(
         SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated, this.affectedByStartingStylesFlagUpdated, this);
@@ -1543,7 +1542,6 @@ export class ElementsTreeOutline extends
     domModel.removeEventListener(SDK.DOMModel.Events.DocumentUpdated, this.documentUpdated, this);
     domModel.removeEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.childNodeCountUpdated, this);
     domModel.removeEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.distributedNodesChanged, this);
-    domModel.removeEventListener(SDK.DOMModel.Events.TopLayerElementsChanged, this.topLayerElementsChanged, this);
     domModel.removeEventListener(SDK.DOMModel.Events.ScrollableFlagUpdated, this.scrollableFlagUpdated, this);
     domModel.removeEventListener(
         SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated, this.affectedByStartingStylesFlagUpdated, this);
@@ -1719,16 +1717,24 @@ export class ElementsTreeOutline extends
     });
   }
 
-  async createTopLayerContainer(parent: UI.TreeOutline.TreeElement, document: SDK.DOMModel.DOMDocument): Promise<void> {
+  createTopLayerContainer(parent: UI.TreeOutline.TreeElement, document: SDK.DOMModel.DOMDocument): void {
     if (!parent.treeOutline || !(parent.treeOutline instanceof ElementsTreeOutline)) {
       return;
     }
     const container = new TopLayerContainer(parent.treeOutline, document);
-    await container.throttledUpdateTopLayerElements();
-    if (container.currentTopLayerDOMNodes.size > 0) {
-      parent.appendChild(container);
+    this.#topLayerContainerByDocument.set(document, container);
+    parent.appendChild(container);
+  }
+
+  revealInTopLayer(node: SDK.DOMModel.DOMNode): void {
+    const document = node.ownerDocument;
+    if (!document) {
+      return;
+    }
+    const container = this.#topLayerContainerByDocument.get(document);
+    if (container) {
+      container.revealInTopLayer(node);
     }
-    this.#topLayerContainerByParent.set(parent, container);
   }
 
   private createElementTreeElement(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet, isClosingTag?: boolean):
@@ -1898,9 +1904,6 @@ export class ElementsTreeOutline extends
       index: number, isClosingTag?: boolean): UI.TreeOutline.TreeElement {
     const newElement = this.createElementTreeElement(child, isClosingTag);
     treeElement.insertChild(newElement, index);
-    if (child instanceof SDK.DOMModel.DOMDocument) {
-      void this.createTopLayerContainer(newElement, child);
-    }
     return newElement;
   }
 
@@ -1997,6 +2000,15 @@ export class ElementsTreeOutline extends
       this.insertChildElement(treeElement, node, treeElement.childCount(), true);
     }
 
+    if (node instanceof SDK.DOMModel.DOMDocument) {
+      let topLayerContainer = this.#topLayerContainerByDocument.get(node);
+      if (!topLayerContainer) {
+        topLayerContainer = new TopLayerContainer(this, node);
+        this.#topLayerContainerByDocument.set(node, topLayerContainer);
+      }
+      treeElement.appendChild(topLayerContainer);
+    }
+
     this.treeElementsBeingUpdated.delete(treeElement);
   }
 
@@ -2008,16 +2020,6 @@ export class ElementsTreeOutline extends
     }
   }
 
-  private async topLayerElementsChanged(): Promise<void> {
-    for (const [parent, container] of this.#topLayerContainerByParent) {
-      await container.throttledUpdateTopLayerElements();
-      if (container.currentTopLayerDOMNodes.size > 0 && container.parent !== parent) {
-        parent.appendChild(container);
-      }
-      container.hidden = container.currentTopLayerDOMNodes.size === 0;
-    }
-  }
-
   private scrollableFlagUpdated(event: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode}>): void {
     let {node} = event.data;
     if (node.nodeName() === '#document') {

package/front_end/panels/elements/TopLayerContainer.ts

@@ -1,119 +1,54 @@
 // Copyright 2022 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
 
-import * as Common from '../../core/common/common.js';
-import * as i18n from '../../core/i18n/i18n.js';
+import type * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import * as ElementsComponents from './components/components.js';
-import type {ElementsTreeElement} from './ElementsTreeElement.js';
 import type {ElementsTreeOutline} from './ElementsTreeOutline.js';
 import {ShortcutTreeElement} from './ShortcutTreeElement.js';
 
-const UIStrings = {
-  /**
-   * @description Link text content in Elements Tree Outline of the Elements panel. When clicked, it "reveals" the true location of an element.
-   */
-  reveal: 'reveal',
-} as const;
-
-const str_ = i18n.i18n.registerUIStrings('panels/elements/TopLayerContainer.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
 export class TopLayerContainer extends UI.TreeOutline.TreeElement {
   tree: ElementsTreeOutline;
   document: SDK.DOMModel.DOMDocument;
-  currentTopLayerDOMNodes = new Set<SDK.DOMModel.DOMNode>();
-  topLayerUpdateThrottler: Common.Throttler.Throttler;
 
   constructor(tree: ElementsTreeOutline, document: SDK.DOMModel.DOMDocument) {
     super('#top-layer');
     this.tree = tree;
     this.document = document;
-    this.topLayerUpdateThrottler = new Common.Throttler.Throttler(1);
-  }
-
-  async throttledUpdateTopLayerElements(): Promise<void> {
-    await this.topLayerUpdateThrottler.schedule(() => this.updateTopLayerElements());
+    this.document.domModel().addEventListener(
+        SDK.DOMModel.Events.TopLayerElementsChanged, this.topLayerElementsChanged, this);
+    this.topLayerElementsChanged({
+      data: {
+        document,
+        documentShortcuts: [],
+      },
+    });
   }
 
-  async updateTopLayerElements(): Promise<void> {
-    this.removeChildren();
-    this.removeCurrentTopLayerElementsAdorners();
-    this.currentTopLayerDOMNodes = new Set();
-    const domModel = this.document.domModel();
-    const newTopLayerElementsIDs = await domModel.getTopLayerElements();
-    if (!newTopLayerElementsIDs || newTopLayerElementsIDs.length === 0) {
+  topLayerElementsChanged(
+      event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.EventTypes['TopLayerElementsChanged']>): void {
+    if (this.document !== event.data.document) {
       return;
     }
-
-    let topLayerElementIndex = 0;
-    for (let i = 0; i < newTopLayerElementsIDs.length; i++) {
-      const topLayerDOMNode = domModel.idToDOMNode.get(newTopLayerElementsIDs[i]);
-      if (!topLayerDOMNode || topLayerDOMNode.ownerDocument !== this.document) {
-        continue;
-      }
-
-      if (topLayerDOMNode.nodeName() !== '::backdrop') {
-        const topLayerElementShortcut = new SDK.DOMModel.DOMNodeShortcut(
-            domModel.target(), topLayerDOMNode.backendNodeId(), 0, topLayerDOMNode.nodeName());
-        const topLayerElementRepresentation = new ShortcutTreeElement(topLayerElementShortcut);
-        this.appendChild(topLayerElementRepresentation);
-        this.currentTopLayerDOMNodes.add(topLayerDOMNode);
-
-        // Add the element's backdrop if previous top layer element is a backdrop.
-        const previousTopLayerDOMNode = (i > 0) ? domModel.idToDOMNode.get(newTopLayerElementsIDs[i - 1]) : undefined;
-        if (previousTopLayerDOMNode && previousTopLayerDOMNode.nodeName() === '::backdrop') {
-          const backdropElementShortcut = new SDK.DOMModel.DOMNodeShortcut(
-              domModel.target(), previousTopLayerDOMNode.backendNodeId(), 0, previousTopLayerDOMNode.nodeName());
-          const backdropElementRepresentation = new ShortcutTreeElement(backdropElementShortcut);
-          topLayerElementRepresentation.appendChild(backdropElementRepresentation);
-        }
-
-        // TODO(changhaohan): store not-yet-inserted DOMNodes and adorn them when inserted.
-        const topLayerTreeElement = this.tree.treeElementByNode.get(topLayerDOMNode);
-        if (topLayerTreeElement) {
-          this.addTopLayerAdorner(topLayerTreeElement, topLayerElementRepresentation, ++topLayerElementIndex);
-        }
+    this.removeChildren();
+    const shortcuts = event.data.documentShortcuts;
+    this.hidden = shortcuts.length === 0;
+    for (const shortcut of shortcuts) {
+      const element = new ShortcutTreeElement(shortcut);
+      this.appendChild(element);
+      for (const child of shortcut.childShortcuts) {
+        element.appendChild(new ShortcutTreeElement(child));
       }
     }
   }
 
-  private removeCurrentTopLayerElementsAdorners(): void {
-    for (const node of this.currentTopLayerDOMNodes) {
-      const topLayerTreeElement = this.tree.treeElementByNode.get(node);
-      topLayerTreeElement?.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER);
-    }
-  }
-
-  private addTopLayerAdorner(
-      element: ElementsTreeElement, topLayerElementRepresentation: ShortcutTreeElement,
-      topLayerElementIndex: number): void {
-    const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
-        ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER);
-    const adornerContent = document.createElement('span');
-    adornerContent.classList.add('adorner-with-icon');
-    const linkIcon = createIcon('select-element');
-    const adornerText = document.createElement('span');
-    adornerText.textContent = `top-layer (${topLayerElementIndex})`;
-    adornerContent.append(linkIcon);
-    adornerContent.append(adornerText);
-    const adorner = element?.adorn(config, adornerContent);
-    if (adorner) {
-      const onClick = ((() => {
-                         topLayerElementRepresentation.revealAndSelect();
-                       }) as EventListener);
-      adorner.addInteraction(onClick, {
-        isToggle: false,
-        shouldPropagateOnKeydown: false,
-        ariaLabelDefault: i18nString(UIStrings.reveal),
-        ariaLabelActive: i18nString(UIStrings.reveal),
-      });
-      adorner.addEventListener('mousedown', e => e.consume(), false);
-    }
+  revealInTopLayer(node: SDK.DOMModel.DOMNode): void {
+    this.children().forEach(child => {
+      if (child instanceof ShortcutTreeElement && child.deferredNode().backendNodeId() === node.backendNodeId()) {
+        child.revealAndSelect();
+      }
+    });
   }
 }

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

@@ -200,7 +200,7 @@ export interface ViewInput {
     onAnimationEnd: () => void,
     onCitationAnimationEnd: () => void,
     onSearch: () => void,
-    onRating: (isPositive: boolean) => void,
+    onRating: (isPositive: boolean) => Promise<Host.InspectorFrontendHostAPI.AidaClientResult>| undefined,
     onReport: () => void,
     onGoToSignIn: () => void,
     onConsentReminderConfirmed: () => Promise<void>,
@@ -989,7 +989,7 @@ export class ConsoleInsight extends UI.Widget.Widget {
     }
   }
 
-  #onRating(isPositive: boolean): void {
+  #onRating(isPositive: boolean): Promise<Host.InspectorFrontendHostAPI.AidaClientResult>|undefined {
     if (this.#state.type !== State.INSIGHT) {
       throw new Error('Unexpected state');
     }
@@ -1009,7 +1009,7 @@ export class ConsoleInsight extends UI.Widget.Widget {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightRatedNegative);
     }
     const disallowLogging = Root.Runtime.hostConfig.aidaAvailability?.disallowLogging ?? true;
-    void this.#aidaClient.registerClientEvent({
+    return this.#aidaClient.registerClientEvent({
       corresponding_aida_rpc_global_id: this.#state.metadata.rpcGlobalId,
       disable_user_content_logging: disallowLogging,
       do_conversation_client_event: {

package/front_end/panels/network/NetworkItemView.ts

@@ -8,10 +8,10 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Annotations from '../../models/annotations/annotations.js';
 import type * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
 import * as PanelCommon from '../../panels/common/common.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
-import * as Annotations from '../../ui/components/annotations/annotations.js';
 import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import {Icon} from '../../ui/kit/kit.js';
 import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';

package/front_end/panels/network/NetworkLogView.ts

@@ -42,6 +42,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import * as Annotations from '../../models/annotations/annotations.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as HAR from '../../models/har/har.js';
 import * as Logs from '../../models/logs/logs.js';
@@ -51,7 +52,6 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Sources from '../../panels/sources/sources.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
-import * as Annotations from '../../ui/components/annotations/annotations.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';

package/front_end/panels/network/NetworkPanel.ts

@@ -40,6 +40,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Annotations from '../../models/annotations/annotations.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
 import * as Trace from '../../models/trace/trace.js';
@@ -47,7 +48,6 @@ import * as Workspace from '../../models/workspace/workspace.js';
 import * as PanelCommon from '../../panels/common/common.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Tracing from '../../services/tracing/tracing.js';
-import * as Annotations from '../../ui/components/annotations/annotations.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';

package/front_end/panels/recorder/RecorderController.ts

@@ -30,7 +30,6 @@ import * as Actions from './recorder-actions/recorder-actions.js';
 import recorderControllerStyles from './recorderController.css.js';
 import * as Events from './RecorderEvents.js';
 
-// TODO(crbug.com/391381439): Fully migrate off of Constructable Stylesheets.
 const {html, Decorators, Directives: {ref}, LitElement} = Lit;
 const {customElement, state} = Decorators;
 

package/front_end/panels/security/CookieControlsView.ts

@@ -208,11 +208,19 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: object, target: HTMLEleme
                 (input.thirdPartyControlsDict ? !input.thirdPartyControlsDict?.thirdPartyCookieMetadataEnabled: false) ?
                   i18nFormatStringTemplate(UIStrings.enableFlag, {
                     PH1: getChromeFlagsLink('#tpcd-metadata-grants'),
-                  }) :
-                i18nFormatString(input.isGracePeriodActive ? UIStrings.gracePeriodExplanation : UIStrings.enrollGracePeriod, {
-                  PH1: UI.Fragment.html`<x-link class="devtools-link" href="https://developers.google.com/privacy-sandbox/cookies/temporary-exceptions/grace-period" jslog=${VisualLogging.link('grace-period-link').track({click: true})}>${i18nString(UIStrings.gracePeriod)}</x-link>`,
-                })
-              }
+                  })
+                : i18nFormatStringTemplate(
+                    input.isGracePeriodActive
+                      ? UIStrings.gracePeriodExplanation
+                      : UIStrings.enrollGracePeriod,
+                    {
+                      PH1: html`<devtools-link
+                        href="https://developers.google.com/privacy-sandbox/cookies/temporary-exceptions/grace-period"
+                        .jslogContext=${'grace-period-link'}
+                        >${i18nString(UIStrings.gracePeriod)}</devtools-link
+                      >`,
+                    },
+                  )}
             </div>
           </div>
         </label>
@@ -241,11 +249,14 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: object, target: HTMLEleme
                 (input.thirdPartyControlsDict ? !input.thirdPartyControlsDict.thirdPartyCookieHeuristicsEnabled: false) ?
                   i18nFormatStringTemplate(UIStrings.enableFlag, {
                     PH1: getChromeFlagsLink('#tpcd-heuristics-grants'),
-                  }) :
-                i18nFormatString(UIStrings.heuristicExplanation, {
-                  PH1: UI.Fragment.html`<x-link class="devtools-link" href="https://developers.google.com/privacy-sandbox/cookies/temporary-exceptions/heuristics-based-exceptions" jslog=${VisualLogging.link('heuristic-link').track({click: true})}>${i18nString(UIStrings.scenarios)}</x-link>`,
-                })
-              }
+                  })
+                : i18nFormatStringTemplate(UIStrings.heuristicExplanation, {
+                    PH1: html`<devtools-link
+                      href="https://developers.google.com/privacy-sandbox/cookies/temporary-exceptions/heuristics-based-exceptions"
+                      .jslogContext=${'heuristic-link'}
+                      >${i18nString(UIStrings.scenarios)}</devtools-link
+                    >`,
+                  })}
             </div>
           </div>
         </label>

package/front_end/panels/security/SecurityPanelSidebar.ts

@@ -171,6 +171,11 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
     this.showLastSelectedElement();
   }
 
+  // Used in web tests
+  elementsByOrigin(): Map<string, OriginTreeElement> {
+    return this.#elementsByOrigin;
+  }
+
   showLastSelectedElement(): void {
     if (this.#cookieControlsTreeElement &&
         this.#securitySidebarLastItemSetting.get() === this.#cookieControlsTreeElement.elemId) {

package/front_end/panels/timeline/CompatibilityTracksAppender.ts

@@ -510,7 +510,6 @@ export class CompatibilityTracksAppender {
    * @returns the index of the event in all events to be rendered in the flamechart.
    */
   appendEventAtLevel(event: Trace.Types.Events.Event, level: number, appender: TrackAppender): number {
-    // TODO(crbug.com/1442454) Figure out how to avoid the circular calls.
     this.#trackForLevel.set(level, appender);
     const index = this.#entryData.length;
     this.#entryData.push(event);

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -2138,14 +2138,11 @@ export class TimelineUIUtils {
     const start = Trace.Types.Timing.Milli(rangeStart);
     const end = Trace.Types.Timing.Milli(rangeEnd);
     const categorySummaryTable = new TimelineComponents.TimelineSummary.CategorySummary();
-    categorySummaryTable.data = {
-      rangeStart: start,
-      rangeEnd: end,
-      total,
-      categories,
-      selectedEvents,
-    };
-    element.append(categorySummaryTable);
+    categorySummaryTable.rangeStart = start;
+    categorySummaryTable.rangeEnd = end;
+    categorySummaryTable.total = total;
+    categorySummaryTable.categories = categories;
+    element.append(categorySummaryTable.contentElement);
     // Add the 3p datagrid
     const treeView = new ThirdPartyTreeView.ThirdPartyTreeElement();
     treeView.treeView = thirdPartyTree;

package/front_end/panels/timeline/components/Sidebar.ts

@@ -4,7 +4,6 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 
 import type * as Trace from '../../../models/trace/trace.js';
-import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 
 import {InsightActivated, InsightDeactivated} from './insights/SidebarInsight.js';
@@ -156,7 +155,7 @@ export class SidebarWidget extends UI.Widget.VBox {
 }
 
 class InsightsView extends UI.Widget.VBox {
-  #component = new SidebarInsightsTab();
+  #component = SidebarInsightsTab.createWidgetElement();
 
   constructor() {
     super();
@@ -165,21 +164,31 @@ class InsightsView extends UI.Widget.VBox {
   }
 
   setParsedTrace(parsedTrace: Trace.TraceModel.ParsedTrace|null): void {
-    this.#component.parsedTrace = parsedTrace;
+    this.#component.widgetConfig = UI.Widget.widgetConfig(SidebarInsightsTab, {parsedTrace});
   }
 
   getActiveInsight(): ActiveInsight|null {
-    return this.#component.activeInsight;
+    const widget = this.#component.getWidget();
+    if (widget) {
+      return widget.activeInsight;
+    }
+
+    return null;
   }
 
   setActiveInsight(active: ActiveInsight|null, opts: {highlight: boolean}): void {
-    this.#component.activeInsight = active;
+    const widget = this.#component.getWidget();
+    if (!widget) {
+      return;
+    }
+
+    widget.activeInsight = active;
     if (opts.highlight && active) {
       // Wait for the rendering of the component to be done, otherwise we
       // might highlight the wrong insight. The UI needs to be fully
       // re-rendered before we can highlight the newly-expanded insight.
-      void RenderCoordinator.done().then(() => {
-        this.#component.highlightActiveInsight();
+      void widget.updateComplete.then(() => {
+        widget.highlightActiveInsight();
       });
     }
   }