chrome-devtools-frontend 1.0.1553956 → 1.0.1555174

package/front_end/Images/src/spark.svg

@@ -0,0 +1,10 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1320_25512)">
+<path d="M7 12.6319C6.94299 12.6319 6.89549 12.6129 6.85749 12.5749C6.81948 12.5369 6.79098 12.4894 6.77198 12.4324C6.61997 11.8338 6.38245 11.259 6.05942 10.708C5.74589 10.1474 5.37536 9.64862 4.94782 9.21158C4.51078 8.77454 4.01199 8.39926 3.45144 8.08573C2.90039 7.7722 2.32559 7.53943 1.72704 7.38742C1.67003 7.36842 1.62253 7.33992 1.58452 7.30191C1.54652 7.26391 1.52752 7.2164 1.52752 7.1594C1.52752 7.10239 1.54652 7.05489 1.58452 7.01689C1.62253 6.97888 1.67003 6.95038 1.72704 6.93138C2.32559 6.77937 2.90039 6.5466 3.45144 6.23307C4.00249 5.91954 4.50128 5.54426 4.94782 5.10722C5.38486 4.67968 5.76014 4.18564 6.07367 3.62509C6.3872 3.06454 6.61997 2.48499 6.77198 1.88644C6.79098 1.82943 6.81948 1.78193 6.85749 1.74392C6.89549 1.70592 6.94299 1.68692 7 1.68692C7.057 1.68692 7.10451 1.70592 7.14251 1.74392C7.18052 1.78193 7.20902 1.82943 7.22802 1.88644C7.38003 2.48499 7.6128 3.06454 7.92633 3.62509C8.23986 4.17614 8.61514 4.67018 9.05218 5.10722C9.48922 5.54426 9.98326 5.91954 10.5343 6.23307C11.0949 6.5466 11.6744 6.77937 12.273 6.93138C12.33 6.95038 12.3775 6.97888 12.4155 7.01689C12.4535 7.05489 12.4725 7.10239 12.4725 7.1594C12.4725 7.2164 12.4535 7.26391 12.4155 7.30191C12.3775 7.33992 12.33 7.36842 12.273 7.38742C11.6744 7.53943 11.0949 7.7722 10.5343 8.08573C9.97376 8.39926 9.47972 8.77454 9.05218 9.21158C8.61514 9.65812 8.23986 10.1569 7.92633 10.708C7.6128 11.259 7.38003 11.8338 7.22802 12.4324C7.20902 12.4894 7.18052 12.5369 7.14251 12.5749C7.10451 12.6129 7.057 12.6319 7 12.6319Z" fill="#0B57D0"/>
+</g>
+<defs>
+<clipPath id="clip0_1320_25512">
+<rect width="14" height="15.1442" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/front_end/core/sdk/ResourceTreeModel.ts

@@ -105,7 +105,6 @@ export class ResourceTreeModel extends SDKModel<EventTypes> {
       return null;
     }
 
-    // TODO(crbug.com/445966299): Refactor to use `storageAgent().invoke_getStorageKey()` instead.
     const response = await this.storageAgent.invoke_getStorageKey({frameId});
     if (response.getError() === 'Frame tree node for given frame not found') {
       return null;

package/front_end/generated/SupportedCSSProperties.js

@@ -757,6 +757,7 @@ export const generatedProperties = [
    "transition-property",
    "transition-timing-function",
    "translate",
+   "trigger-scope",
    "types",
    "unicode-range",
    "user-select",
@@ -1712,6 +1713,7 @@ export const generatedProperties = [
   "inherited": false,
   "keywords": [
    "none",
+   "auto",
    "spanning-item",
    "intersection"
   ],
@@ -3722,6 +3724,7 @@ export const generatedProperties = [
   "inherited": false,
   "keywords": [
    "none",
+   "auto",
    "spanning-item",
    "intersection"
   ],
@@ -4650,6 +4653,13 @@ export const generatedProperties = [
  {
   "name": "translate"
  },
+ {
+  "keywords": [
+   "none",
+   "all"
+  ],
+  "name": "trigger-scope"
+ },
  {
   "name": "types"
  },
@@ -5421,6 +5431,7 @@ export const generatedPropertyValues = {
  "column-rule-break": {
   "values": [
    "none",
+   "auto",
    "spanning-item",
    "intersection"
   ]
@@ -6546,6 +6557,7 @@ export const generatedPropertyValues = {
  "row-rule-break": {
   "values": [
    "none",
+   "auto",
    "spanning-item",
    "intersection"
   ]
@@ -7027,6 +7039,12 @@ export const generatedPropertyValues = {
    "step-end"
   ]
  },
+ "trigger-scope": {
+  "values": [
+   "none",
+   "all"
+  ]
+ },
  "unicode-bidi": {
   "values": [
    "normal",

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -3154,7 +3154,7 @@ export const NativeFunctions = [
   },
   {
     name: "initKeyboardEvent",
-    signatures: [["typeArg","?bubblesArg","?cancelableArg","?viewArg","?keyArg","?locationArg","?ctrlKey","?altKey","?shiftKey","?metaKey"],["type","?bubbles","?cancelable","?view","?keyIdentifier","?location","?ctrlKey","?altKey","?shiftKey","?metaKey"]]
+    signatures: [["typeArg","?bubblesArg","?cancelableArg","?viewArg","?keyArg","?locationArg","?ctrlKey","?altKey","?shiftKey","?metaKey"]]
   },
   {
     name: "setKeyframes",
@@ -6611,6 +6611,10 @@ export const NativeFunctions = [
     name: "when",
     signatures: [["type","?options"]]
   },
+  {
+    name: "Event",
+    signatures: [["type","?eventInitDict"]]
+  },
   {
     name: "setFormControlRange",
     signatures: [["element","start","end"]]
@@ -6737,10 +6741,6 @@ export const NativeFunctions = [
     name: "TextUpdateEvent",
     signatures: [["type","?options"]]
   },
-  {
-    name: "AnimationEvent",
-    signatures: [["type","?eventInitDict"]]
-  },
   {
     name: "AnimationPlaybackEvent",
     signatures: [["type","?eventInitDict"]]
@@ -6769,10 +6769,6 @@ export const NativeFunctions = [
     name: "ErrorEvent",
     signatures: [["type","?eventInitDict"]]
   },
-  {
-    name: "FocusEvent",
-    signatures: [["type","?eventInitDict"]]
-  },
   {
     name: "HashChangeEvent",
     signatures: [["type","?eventInitDict"]]
@@ -6785,10 +6781,6 @@ export const NativeFunctions = [
     name: "InterestEvent",
     signatures: [["type","?eventInitDict"]]
   },
-  {
-    name: "KeyboardEvent",
-    signatures: [["type","?eventInitDict"]]
-  },
   {
     name: "MessageEvent",
     signatures: [["type","?eventInitDict"]]
@@ -6829,14 +6821,6 @@ export const NativeFunctions = [
     name: "ToggleEvent",
     signatures: [["type","?eventInitDict"]]
   },
-  {
-    name: "TouchEvent",
-    signatures: [["type","?eventInitDict"]]
-  },
-  {
-    name: "TransitionEvent",
-    signatures: [["type","?eventInitDict"]]
-  },
   {
     name: "UIEvent",
     signatures: [["type","?eventInitDict"]]
@@ -7161,6 +7145,10 @@ export const NativeFunctions = [
     name: "NavigationCurrentEntryChangeEvent",
     signatures: [["type","eventInit"]]
   },
+  {
+    name: "addHandler",
+    signatures: [["handler"]]
+  },
   {
     name: "updateCurrentEntry",
     signatures: [["options"]]
@@ -7606,11 +7594,11 @@ export const NativeFunctions = [
   },
   {
     name: "drawElement",
-    signatures: [["element","x","y","?dwidth","?dheight"]]
+    signatures: [["element","dx","dy","?dwidth","?dheight"]]
   },
   {
     name: "drawElementImage",
-    signatures: [["element","x","y","?dwidth","?dheight"]]
+    signatures: [["element","dx","dy","?dwidth","?dheight"],["element","sx","sy","swidth","sheight","dx","dy","?dwidth","?dheight"]]
   },
   {
     name: "Path2D",
@@ -8432,6 +8420,10 @@ export const NativeFunctions = [
     name: "RTCSessionDescription",
     signatures: [["?descriptionInitDict"]]
   },
+  {
+    name: "copyPayloadTo",
+    signatures: [["destination"]]
+  },
   {
     name: "RtcTransport",
     signatures: [["name"]]

package/front_end/panels/application/BounceTrackingMitigationsTreeElement.ts

@@ -5,9 +5,7 @@
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
-import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import {createIcon} from '../../ui/kit/kit.js';
-import * as UI from '../../ui/legacy/legacy.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import * as ApplicationComponents from './components/components.js';
@@ -23,8 +21,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/application/BounceTrackingMitig
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class BounceTrackingMitigationsTreeElement extends ApplicationPanelTreeElement {
-  private view?: LegacyWrapper.LegacyWrapper.LegacyWrapper<
-      UI.Widget.Widget, ApplicationComponents.BounceTrackingMitigationsView.BounceTrackingMitigationsView>;
+  private view?: ApplicationComponents.BounceTrackingMitigationsView.BounceTrackingMitigationsView;
 
   constructor(resourcesPanel: ResourcesPanel) {
     super(resourcesPanel, i18nString(UIStrings.bounceTrackingMitigations), false, 'bounce-tracking-mitigations');
@@ -39,8 +36,7 @@ export class BounceTrackingMitigationsTreeElement extends ApplicationPanelTreeEl
   override onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     if (!this.view) {
-      this.view = LegacyWrapper.LegacyWrapper.legacyWrapper(
-          UI.Widget.Widget, new ApplicationComponents.BounceTrackingMitigationsView.BounceTrackingMitigationsView());
+      this.view = new ApplicationComponents.BounceTrackingMitigationsView.BounceTrackingMitigationsView();
     }
     this.showView(this.view);
     Host.userMetrics.panelShown('bounce-tracking-mitigations');

package/front_end/panels/application/components/BounceTrackingMitigationsView.ts

@@ -1,7 +1,6 @@
 // Copyright 2023 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-lit-render-outside-of-view */
 
 import '../../../ui/components/report_view/report_view.js';
 import '../../../ui/legacy/components/data_grid/data_grid.js';
@@ -9,7 +8,7 @@ import '../../../ui/legacy/components/data_grid/data_grid.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.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';
 
@@ -58,7 +57,8 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/BounceTrackingMitigationsView.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const enum ScreenStatusType {
+export const enum ScreenStatusType {
+  INITIALIZING = 'Initializing',
   RUNNING = 'Running',
   RESULT = 'Result',
   DISABLED = 'Disabled',
@@ -68,119 +68,155 @@ export interface BounceTrackingMitigationsViewData {
   trackingSites: string[];
 }
 
-export class BounceTrackingMitigationsView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #trackingSites: string[] = [];
-  #screenStatus = ScreenStatusType.RESULT;
-  #checkedFeature = false;
-  #seenButtonClick = false;
-
-  connectedCallback(): void {
-    void this.#render();
-    this.parentElement?.classList.add('overflow-auto');
-  }
+export interface ViewInput {
+  screenStatus: ScreenStatusType;
+  trackingSites: string[];
+  seenButtonClick: boolean;
+  runMitigations: () => Promise<void>;
+}
 
-  async #render(): Promise<void> {
-    // clang-format off
-    Lit.render(html`
-      <style>${bounceTrackingMitigationsViewStyles}</style>
-      <devtools-report .data=${{reportTitle: i18nString(UIStrings.bounceTrackingMitigationsTitle)}}
-                       jslog=${VisualLogging.pane('bounce-tracking-mitigations')}>
-        ${await this.#renderMainFrameInformation()}
-      </devtools-report>
-    `, this.#shadow, {host: this});
-    // clang-format on
+const renderForceRunButton = (input: ViewInput): Lit.TemplateResult => {
+  const isMitigationRunning = (input.screenStatus === ScreenStatusType.RUNNING);
+
+  // clang-format off
+  return html`
+    <devtools-button
+      aria-label=${i18nString(UIStrings.forceRun)}
+      .disabled=${isMitigationRunning}
+      .spinner=${isMitigationRunning}
+      .variant=${Buttons.Button.Variant.PRIMARY}
+      @click=${input.runMitigations}
+      jslog=${VisualLogging.action('force-run').track({click: true})}>
+      ${isMitigationRunning ? html`
+        ${i18nString(UIStrings.runningMitigations)}`:`
+        ${i18nString(UIStrings.forceRun)}
+      `}
+    </devtools-button>
+  `;
+  // clang-format on
+};
+
+const renderDeletedSitesOrNoSitesMessage = (input: ViewInput): Lit.LitTemplate => {
+  if (!input.seenButtonClick) {
+    return Lit.nothing;
   }
 
-  async #renderMainFrameInformation(): Promise<Lit.TemplateResult> {
-    if (!this.#checkedFeature) {
-      await this.#checkFeatureState();
-    }
-
-    if (this.#screenStatus === ScreenStatusType.DISABLED) {
-      // clang-format off
-      return html`
-        <devtools-report-section>
-          ${i18nString(UIStrings.featureDisabled)}
-        </devtools-report-section>
-      `;
-      // clang-format on
-    }
-
+  if (input.trackingSites.length === 0) {
     // clang-format off
     return html`
       <devtools-report-section>
-        ${this.#renderForceRunButton()}
-      </devtools-report-section>
-      ${this.#renderDeletedSitesOrNoSitesMessage()}
-      <devtools-report-divider>
-      </devtools-report-divider>
-      <devtools-report-section>
-        <x-link href="https://privacycg.github.io/nav-tracking-mitigations/#bounce-tracking-mitigations" class="link"
-        jslog=${VisualLogging.link('learn-more').track({click: true})}>
-          ${i18nString(UIStrings.learnMore)}
-        </x-link>
+      ${(input.screenStatus === ScreenStatusType.RUNNING) ? html`
+        ${i18nString(UIStrings.checkingPotentialTrackers)}`:`
+        ${i18nString(UIStrings.noPotentialBounceTrackersIdentified)}
+      `}
       </devtools-report-section>
     `;
     // clang-format on
   }
 
-  #renderForceRunButton(): Lit.TemplateResult {
-    const isMitigationRunning = (this.#screenStatus === ScreenStatusType.RUNNING);
+  // clang-format off
+  return html`
+    <devtools-report-section>
+      <devtools-data-grid striped inline>
+        <table>
+          <tr>
+            <th id="sites" weight="10" sortable>
+              ${i18nString(UIStrings.stateDeletedFor)}
+            </th>
+          </tr>
+          ${input.trackingSites.map(site => html`
+            <tr><td>${site}</td></tr>`)}
+        </table>
+      </devtools-data-grid>
+    </devtools-report-section>
+  `;
+  // clang-format on
+};
+
+const renderMainFrameInformation = (input: ViewInput): Lit.LitTemplate => {
+  if (input.screenStatus === ScreenStatusType.INITIALIZING) {
+    return Lit.nothing;
+  }
 
+  if (input.screenStatus === ScreenStatusType.DISABLED) {
     // clang-format off
     return html`
-      <devtools-button
-        aria-label=${i18nString(UIStrings.forceRun)}
-        .disabled=${isMitigationRunning}
-        .spinner=${isMitigationRunning}
-        .variant=${Buttons.Button.Variant.PRIMARY}
-        @click=${this.#runMitigations}
-        jslog=${VisualLogging.action('force-run').track({click: true})}>
-        ${isMitigationRunning ? html`
-          ${i18nString(UIStrings.runningMitigations)}`:`
-          ${i18nString(UIStrings.forceRun)}
-        `}
-      </devtools-button>
+      <devtools-report-section>
+        ${i18nString(UIStrings.featureDisabled)}
+      </devtools-report-section>
     `;
     // clang-format on
   }
 
-  #renderDeletedSitesOrNoSitesMessage(): Lit.LitTemplate {
-    if (!this.#seenButtonClick) {
-      return Lit.nothing;
-    }
+  // clang-format off
+  return html`
+    <devtools-report-section>
+      ${renderForceRunButton(input)}
+    </devtools-report-section>
+    ${renderDeletedSitesOrNoSitesMessage(input)}
+    <devtools-report-divider>
+    </devtools-report-divider>
+    <devtools-report-section>
+      <x-link href="https://privacycg.github.io/nav-tracking-mitigations/#bounce-tracking-mitigations" class="link"
+      jslog=${VisualLogging.link('learn-more').track({click: true})}>
+        ${i18nString(UIStrings.learnMore)}
+      </x-link>
+    </devtools-report-section>
+  `;
+  // clang-format on
+};
+
+export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
+  // clang-format off
+  Lit.render(html`
+    <style>${bounceTrackingMitigationsViewStyles}</style>
+    <style>${UI.inspectorCommonStyles}</style>
+    <devtools-report .data=${{reportTitle: i18nString(UIStrings.bounceTrackingMitigationsTitle)}}
+                      jslog=${VisualLogging.pane('bounce-tracking-mitigations')}>
+      ${renderMainFrameInformation(input)}
+    </devtools-report>
+  `, target);
+  // clang-format on
+};
+
+type ViewFunction = typeof DEFAULT_VIEW;
+
+export class BounceTrackingMitigationsView extends UI.Widget.Widget {
+  #trackingSites: string[] = [];
+  #screenStatus = ScreenStatusType.INITIALIZING;
+  #seenButtonClick = false;
+  #view: ViewFunction;
+
+  constructor(element?: HTMLElement, view: ViewFunction = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true, classes: ['overflow-auto']});
 
-    if (this.#trackingSites.length === 0) {
-      // clang-format off
-      return html`
-        <devtools-report-section>
-        ${(this.#screenStatus === ScreenStatusType.RUNNING) ? html`
-          ${i18nString(UIStrings.checkingPotentialTrackers)}`:`
-          ${i18nString(UIStrings.noPotentialBounceTrackersIdentified)}
-        `}
-        </devtools-report-section>
-      `;
-      // clang-format on
+    this.#view = view;
+
+    const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    if (!mainTarget) {
+      this.#screenStatus = ScreenStatusType.RESULT;
+    } else {
+      void mainTarget.systemInfo().invoke_getFeatureState({featureState: 'DIPS'}).then(state => {
+        this.#screenStatus = state.featureEnabled ? ScreenStatusType.RESULT : ScreenStatusType.DISABLED;
+        this.requestUpdate();
+      });
     }
+  }
 
-    // clang-format off
-    return html`
-      <devtools-report-section>
-        <devtools-data-grid striped inline>
-          <table>
-            <tr>
-              <th id="sites" weight="10" sortable>
-                ${i18nString(UIStrings.stateDeletedFor)}
-              </th>
-            </tr>
-            ${this.#trackingSites.map(site => html`
-              <tr><td>${site}</td></tr>`)}
-          </table>
-        </devtools-data-grid>
-      </devtools-report-section>
-    `;
-    // clang-format on
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    this.#view(
+        {
+          screenStatus: this.#screenStatus,
+          trackingSites: this.#trackingSites,
+          seenButtonClick: this.#seenButtonClick,
+          runMitigations: this.#runMitigations.bind(this),
+        },
+        undefined, this.contentElement);
   }
 
   async #runMitigations(): Promise<void> {
@@ -192,7 +228,7 @@ export class BounceTrackingMitigationsView extends LegacyWrapper.LegacyWrapper.W
     this.#seenButtonClick = true;
     this.#screenStatus = ScreenStatusType.RUNNING;
 
-    void this.#render();
+    this.requestUpdate();
 
     const response = await mainTarget.storageAgent().invoke_runBounceTrackingMitigations();
     this.#trackingSites = [];
@@ -205,27 +241,6 @@ export class BounceTrackingMitigationsView extends LegacyWrapper.LegacyWrapper.W
 
   #renderMitigationsResult(): void {
     this.#screenStatus = ScreenStatusType.RESULT;
-    void this.#render();
-  }
-
-  async #checkFeatureState(): Promise<void> {
-    this.#checkedFeature = true;
-
-    const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-    if (!mainTarget) {
-      return;
-    }
-
-    if (!(await mainTarget.systemInfo().invoke_getFeatureState({featureState: 'DIPS'})).featureEnabled) {
-      this.#screenStatus = ScreenStatusType.DISABLED;
-    }
-  }
-}
-
-customElements.define('devtools-bounce-tracking-mitigations-view', BounceTrackingMitigationsView);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-bounce-tracking-mitigations-view': BounceTrackingMitigationsView;
+    this.requestUpdate();
   }
 }

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/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/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();
       });
     }
   }