chrome-devtools-frontend 1.0.1548980 → 1.0.1550444

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

@@ -1,61 +1,67 @@
 // 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 type * as SDK from '../../../core/sdk/sdk.js';
-import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import * as Lit from '../../../ui/lit/lit.js';
+import * as UI from '../../../ui/legacy/legacy.js';
+import {html, render, type TemplateResult} from '../../../ui/lit/lit.js';
 
 import serviceWorkerRouterViewStyles from './serviceWorkerRouterView.css.js';
 
-const {html, render} = Lit;
+function renderRouterRule(rule: SDK.ServiceWorkerManager.ServiceWorkerRouterRule): TemplateResult {
+  return html`
+    <li class="router-rule">
+      <div class="rule-id">Rule ${rule.id}</div>
+      <ul class="item">
+        <li class="condition">
+          <div class="rule-type">Condition</div>
+          <div class="rule-value">${rule.condition}</div>
+        </li>
+        <li class="source">
+          <div class="rule-type">Source</div>
+          <div class="rule-value">${rule.source}</div>
+        </li>
+      </ul>
+    </li>`;
+}
+
+interface ViewInterface {
+  rules: SDK.ServiceWorkerManager.ServiceWorkerRouterRule[];
+}
 
-export class ServiceWorkerRouterView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+type View = (input: ViewInterface, output: undefined, target: HTMLElement) => void;
+
+const DEFAULT_VIEW: View = (input, _output, target) => {
+  // clang-format off
+  render(html`
+    <style>${serviceWorkerRouterViewStyles}</style>
+    <ul class="router-rules">
+      ${input.rules.map(renderRouterRule)}
+    </ul>`, target);
+  // clang-format on
+};
+
+export class ServiceWorkerRouterView extends UI.Widget.Widget {
   #rules: SDK.ServiceWorkerManager.ServiceWorkerRouterRule[] = [];
+  #view: View;
 
-  update(rules: SDK.ServiceWorkerManager.ServiceWorkerRouterRule[]): void {
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
+
+  set rules(rules: SDK.ServiceWorkerManager.ServiceWorkerRouterRule[]) {
     this.#rules = rules;
     if (this.#rules.length > 0) {
-      this.#render();
+      this.requestUpdate();
     }
   }
 
-  #render(): void {
-    // clang-format off
-    render(html`
-      <style>${serviceWorkerRouterViewStyles}</style>
-      <ul class="router-rules">
-        ${this.#rules.map(this.#renderRouterRule)}
-      </ul>
-    `, this.#shadow, {host: this});
-    // clang-format on
-  }
-
-  #renderRouterRule(rule: SDK.ServiceWorkerManager.ServiceWorkerRouterRule): Lit.TemplateResult {
-    return html`
-      <li class="router-rule">
-        <div class="rule-id">Rule ${rule.id}</div>
-        <ul class="item">
-          <li class="condition">
-            <div class="rule-type">Condition</div>
-            <div class="rule-value">${rule.condition}</div>
-          </li>
-          <li class="source">
-            <div class="rule-type">Source</div>
-            <div class="rule-value">${rule.source}</div>
-          </li>
-        </ul>
-      </li>
-    `;
+  get rules(): SDK.ServiceWorkerManager.ServiceWorkerRouterRule[] {
+    return this.#rules;
   }
-}
-
-customElements.define('devtools-service-worker-router-view', ServiceWorkerRouterView);
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-service-worker-router-view': ServiceWorkerRouterView;
+  override performUpdate(): void {
+    this.#view({rules: this.#rules}, undefined, this.contentElement);
   }
 }

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

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Protocol from '../../../generated/protocol.js';

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

@@ -12,12 +12,10 @@ import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as UI from '../../../ui/legacy/legacy.js';
-import * as Lit from '../../../ui/lit/lit.js';
+import {html, type LitTemplate, nothing, render, type TemplateResult} from '../../../ui/lit/lit.js';
 
 import storageMetadataViewStyle from './storageMetadataView.css.js';
 
-const {html} = Lit;
-
 const UIStrings = {
   /**
    * @description The origin of a URL (https://web.dev/same-site-same-origin/#origin).
@@ -147,10 +145,8 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
     return RenderCoordinator.write('StorageMetadataView render', async () => {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      Lit.render(html`
-        <style>
-          ${storageMetadataViewStyle}
-        </style>
+      render(html`
+        <style>${storageMetadataViewStyle}</style>
         <devtools-report .data=${{reportTitle: this.getTitle() ?? i18nString(UIStrings.loading)}}>
           ${await this.renderReportContent()}
         </devtools-report>`, this.#shadow, {host: this});
@@ -167,17 +163,17 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
     return this.#storageBucketsModel ? `${bucketName} - ${origin}` : origin;
   }
 
-  key(content: string|Lit.TemplateResult): Lit.TemplateResult {
+  key(content: string|TemplateResult): TemplateResult {
     return html`<devtools-report-key>${content}</devtools-report-key>`;
   }
 
-  value(content: string|Lit.TemplateResult): Lit.TemplateResult {
+  value(content: string|TemplateResult): TemplateResult {
     return html`<devtools-report-value>${content}</devtools-report-value>`;
   }
 
-  async renderReportContent(): Promise<Lit.LitTemplate> {
+  async renderReportContent(): Promise<LitTemplate> {
     if (!this.#storageKey) {
-      return Lit.nothing;
+      return nothing;
     }
     const origin = this.#storageKey.origin;
     const ancestorChainHasCrossSite =
@@ -196,26 +192,28 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return html`
+  return html`
         ${(isIframeOrEmbedded) ?
           html`${this.key(i18nString(UIStrings.origin))}
             ${this.value(html`<div class="text-ellipsis" title=${origin}>${origin}</div>`)}`
-          : Lit.nothing}
-        ${(topLevelSite || topLevelSiteIsOpaque) ? this.key(i18nString(UIStrings.topLevelSite)) : Lit.nothing}
-        ${topLevelSite ? this.value(topLevelSite) : Lit.nothing}
-        ${topLevelSiteIsOpaque ? this.value(i18nString(UIStrings.opaque)) : Lit.nothing}
-        ${thirdPartyReason ? html`${this.key(i18nString(UIStrings.isThirdParty))}${this.value(thirdPartyReason)}` : Lit.nothing}
+          : nothing}
+        ${(topLevelSite || topLevelSiteIsOpaque) ?
+          this.key(i18nString(UIStrings.topLevelSite)) : nothing}
+        ${topLevelSite ? this.value(topLevelSite) : nothing}
+        ${topLevelSiteIsOpaque ? this.value(i18nString(UIStrings.opaque)) : nothing}
+        ${thirdPartyReason ?  html`
+          ${this.key(i18nString(UIStrings.isThirdParty))}${this.value(thirdPartyReason)}` : nothing}
         ${hasNonce || topLevelSiteIsOpaque ?
-        this.key(i18nString(UIStrings.isOpaque)) : Lit.nothing}
-        ${hasNonce ? this.value(i18nString(UIStrings.yes)) : Lit.nothing}
+          this.key(i18nString(UIStrings.isOpaque)) : nothing}
+        ${hasNonce ? this.value(i18nString(UIStrings.yes)) : nothing}
         ${topLevelSiteIsOpaque ?
-        this.value(i18nString(UIStrings.yesBecauseTopLevelIsOpaque)) : Lit.nothing}
-        ${this.#storageBucket ? this.#renderStorageBucketInfo() : Lit.nothing}
-        ${this.#storageBucketsModel ? this.#renderBucketControls() : Lit.nothing}`;
+          this.value(i18nString(UIStrings.yesBecauseTopLevelIsOpaque)) : nothing}
+        ${this.#storageBucket ? this.#renderStorageBucketInfo() : nothing}
+        ${this.#storageBucketsModel ? this.#renderBucketControls() : nothing}`;
     // clang-format on
   }
 
-  #renderStorageBucketInfo(): Lit.LitTemplate {
+  #renderStorageBucketInfo(): LitTemplate {
     if (!this.#storageBucket) {
       throw new Error('Should not call #renderStorageBucketInfo if #bucket is null.');
     }
@@ -260,18 +258,17 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
     return (new Date(expiration * 1000)).toLocaleString();
   }
 
-  #renderBucketControls(): Lit.TemplateResult {
+  #renderBucketControls(): TemplateResult {
     // clang-format off
-    return html`
-      <devtools-report-divider></devtools-report-divider>
-      <devtools-report-section>
-        <devtools-button
-          aria-label=${i18nString(UIStrings.deleteBucket)}
-          .variant=${Buttons.Button.Variant.OUTLINED}
-          @click=${this.#deleteBucket}>
-          ${i18nString(UIStrings.deleteBucket)}
-        </devtools-button>
-      </devtools-report-section>`;
+  return html`
+    <devtools-report-divider></devtools-report-divider>
+    <devtools-report-section>
+      <devtools-button aria-label=${i18nString(UIStrings.deleteBucket)}
+                       .variant=${Buttons.Button.Variant.OUTLINED}
+                       @click=${this.#deleteBucket}>
+        ${i18nString(UIStrings.deleteBucket)}
+      </devtools-button>
+    </devtools-report-section>`;
     // clang-format on
   }
 

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

@@ -1,17 +1,14 @@
 // Copyright 2020 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/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 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 type * as Protocol from '../../../generated/protocol.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.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';
@@ -64,7 +61,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/TrustTokensView.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export interface TrustTokensViewData {
+export interface TrustTokensViewInput {
   tokens: Protocol.Storage.TrustTokens[];
   deleteClickHandler: (issuerOrigin: string) => void;
 }
@@ -72,65 +69,32 @@ export interface TrustTokensViewData {
 /** Fetch the Trust Token data regularly from the backend while the panel is open */
 const REFRESH_INTERVAL_MS = 1000;
 
-export class TrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-
-  #deleteClickHandler(issuerOrigin: string): void {
-    const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-    void mainTarget?.storageAgent().invoke_clearTrustTokens({issuerOrigin});
-  }
-
-  connectedCallback(): void {
-    this.wrapper?.contentElement.classList.add('vbox');
-    void this.render();
-  }
-
-  override async render(): Promise<void> {
-    const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-    if (!mainTarget) {
-      return;
-    }
-    const {tokens} = await mainTarget.storageAgent().invoke_getTrustTokens();
-    tokens.sort((a, b) => a.issuerOrigin.localeCompare(b.issuerOrigin));
-
-    await RenderCoordinator.write('Render TrustTokensView', () => {
-      // clang-format off
-      Lit.render(html`
-        <style>${trustTokensViewStyles}</style>
-        <style>${UI.inspectorCommonStyles}</style>
-        ${this.#renderGridOrNoDataMessage(tokens)}
-      `, this.#shadow, {host: this});
-      // clang-format on
-      if (this.isConnected) {
-        setTimeout(() => this.render(), REFRESH_INTERVAL_MS);
-      }
-    });
-  }
-
-  #renderGridOrNoDataMessage(tokens: Protocol.Storage.TrustTokens[]): Lit.TemplateResult {
-    if (tokens.length === 0) {
-      // clang-format off
+function renderGridOrNoDataMessage(input: TrustTokensViewInput): Lit.TemplateResult {
+  if (input.tokens.length === 0) {
+    // clang-format off
       return html`
-        <div class="empty-state" jslog=${VisualLogging.section().context('empty-view')}>
-          <div class="empty-state-header">${i18nString(UIStrings.noTrustTokens)}</div>
-          <div class="empty-state-description">
-            <span>${i18nString(UIStrings.trustTokensDescription)}</span>
-            <x-link
-              class="x-link devtools-link"
-              href=${PRIVATE_STATE_TOKENS_EXPLANATION_URL}
-              jslog=${VisualLogging.link()
-                      .track({ click: true, keydown: 'Enter|Space' })
-                      .context('learn-more')}
-            >${i18nString(UIStrings.learnMore)}</x-link>
+        <div jslog=${VisualLogging.pane('trust-tokens')}>
+          <div class="empty-state" jslog=${VisualLogging.section().context('empty-view')}>
+            <div class="empty-state-header">${i18nString(UIStrings.noTrustTokens)}</div>
+            <div class="empty-state-description">
+              <span>${i18nString(UIStrings.trustTokensDescription)}</span>
+              <x-link
+                class="x-link devtools-link"
+                href=${PRIVATE_STATE_TOKENS_EXPLANATION_URL}
+                jslog=${VisualLogging.link()
+                        .track({ click: true, keydown: 'Enter|Space' })
+                        .context('learn-more')}
+              >${i18nString(UIStrings.learnMore)}</x-link>
+            </div>
           </div>
         </div>
       `;
-      // clang-format on
-    }
+    // clang-format on
+  }
 
-    // clang-format off
+  // clang-format off
     return html`
-      <div>
+      <div jslog=${VisualLogging.pane('trust-tokens')}>
         <span class="heading">${i18nString(UIStrings.trustTokens)}</span>
         <devtools-icon name="info" title=${i18nString(UIStrings.allStoredTrustTokensAvailableIn)}></devtools-icon>
         <devtools-data-grid striped inline>
@@ -140,7 +104,7 @@ export class TrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableCompon
               <th id="count" weight="5" sortable>${i18nString(UIStrings.storedTokenCount)}</th>
               <th id="delete-button" weight="1" sortable></th>
             </tr>
-            ${tokens.filter(token => token.count > 0)
+            ${input.tokens.filter(token => token.count > 0)
                   .map(token => html`
                 <tr>
                   <td>${removeTrailingSlash(token.issuerOrigin)}</td>
@@ -151,7 +115,7 @@ export class TrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableCompon
                                     .size=${Buttons.Button.Size.SMALL}
                                     .title=${i18nString(UIStrings.deleteTrustTokens, {PH1: removeTrailingSlash(token.issuerOrigin)})}
                                     .variant=${Buttons.Button.Variant.ICON}
-                                    @click=${this.#deleteClickHandler.bind(this, removeTrailingSlash(token.issuerOrigin))}></devtools-button>
+                                    @click=${() =>input.deleteClickHandler(removeTrailingSlash(token.issuerOrigin))}></devtools-button>
                   </td>
                 </tr>
               `)}
@@ -159,18 +123,62 @@ export class TrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         </devtools-data-grid>
       </div>
     `;
-    // clang-format on
-  }
+  // clang-format on
 }
 
-function removeTrailingSlash(s: string): string {
-  return s.replace(/\/$/, '');
-}
+type View = (input: TrustTokensViewInput, output: undefined, target: HTMLElement) => void;
+
+const DEFAULT_VIEW: View = (input, output, target) => {
+  // clang-format off
+  Lit.render(html`
+    <style>${trustTokensViewStyles}</style>
+    <style>${UI.inspectorCommonStyles}</style>
+    ${renderGridOrNoDataMessage(input)}
+  `, target);
+  // clang-format on
+};
+
+export class TrustTokensView extends UI.Widget.VBox {
+  #updateInterval = 0;
+  #tokens: Protocol.Storage.TrustTokens[] = [];
+  #view: View;
+
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
 
-customElements.define('devtools-trust-tokens-storage-view', TrustTokensView);
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+    this.#updateInterval = setInterval(this.requestUpdate.bind(this), REFRESH_INTERVAL_MS);
+  }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-trust-tokens-storage-view': TrustTokensView;
+  override willHide(): void {
+    super.willHide();
+    clearInterval(this.#updateInterval);
+    this.#updateInterval = 0;
   }
+
+  override async performUpdate(): Promise<void> {
+    const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    if (!mainTarget) {
+      return;
+    }
+    const {tokens} = await mainTarget.storageAgent().invoke_getTrustTokens();
+    tokens.sort((a, b) => a.issuerOrigin.localeCompare(b.issuerOrigin));
+    this.#tokens = tokens;
+    this.#view(
+        {tokens: this.#tokens, deleteClickHandler: this.#deleteClickHandler.bind(this)}, undefined,
+        this.contentElement);
+  }
+
+  #deleteClickHandler(issuerOrigin: string): void {
+    const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    void mainTarget?.storageAgent().invoke_clearTrustTokens({issuerOrigin});
+  }
+}
+
+function removeTrailingSlash(s: string): string {
+  return s.replace(/\/$/, '');
 }

package/front_end/panels/application/preloading/components/PreloadingGrid.ts

@@ -4,7 +4,7 @@
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../../ui/legacy/components/data_grid/data_grid.js';
-import '../../../../ui/components/icon_button/icon_button.js';
+import '../../../../ui/kit/kit.js';
 
 import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';

package/front_end/panels/application/preloading/components/RuleSetGrid.ts

@@ -4,7 +4,7 @@
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../../ui/legacy/components/data_grid/data_grid.js';
-import '../../../../ui/components/icon_button/icon_button.js';
+import '../../../../ui/kit/kit.js';
 
 import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';

package/front_end/panels/application/preloading/components/UsedPreloadingView.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../../ui/components/icon_button/icon_button.js';
+import '../../../../ui/kit/kit.js';
 import '../../../../ui/components/report_view/report_view.js';
 import './PreloadingMismatchedHeadersGrid.js';
 import './MismatchedPreloadingGrid.js';

package/front_end/panels/changes/ChangesSidebar.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../ui/kit/kit.js';
+
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Workspace from '../../models/workspace/workspace.js';

package/front_end/panels/changes/CombinedDiffView.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../ui/kit/kit.js';
+
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Persistence from '../../models/persistence/persistence.js';

package/front_end/panels/common/AnnotationManager.ts

@@ -0,0 +1,71 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Common from '../../core/common/common.js';
+import type * as SDK from '../../core/sdk/sdk.js';
+import * as Annotations from '../../ui/components/annotations/annotations.js';
+
+interface AnnotationPlacement {
+  parentElement: Element;
+  insertBefore?: Node|null;
+  resolveRelativePosition:
+      (parentElement: Element, revealNode: boolean, lookupId: string,
+       node?: SDK.DOMModel.DOMNode) => Promise<{x: number, y: number}|null>;
+}
+
+// This class handles general management of Annotations, the data needed to display them and any panel-specific things
+// that the AnnotationRepository must be free from. It is created on-demand the first time a panel, that wants to show
+// an Annotation, appears.
+//
+// NOTE: For now this class is not for general use and is inactive (unless a specific flag is supplied).
+export class AnnotationManager {
+  static #instance: AnnotationManager|null = null;
+
+  #annotationPlacements: Map<Annotations.AnnotationType, AnnotationPlacement>|null = null;
+
+  constructor() {
+    if (!Annotations.AnnotationRepository.annotationsEnabled()) {
+      console.warn('AnnotationManager created with annotations disabled');
+      return;
+    }
+
+    Annotations.AnnotationRepository.instance().addEventListener(
+        Annotations.Events.ANNOTATION_ADDED, this.#onAnnotationAdded, this);
+  }
+
+  static instance(): AnnotationManager {
+    if (!AnnotationManager.#instance) {
+      AnnotationManager.#instance = new AnnotationManager();
+    }
+    return AnnotationManager.#instance;
+  }
+
+  initializePlacementForAnnotationType(
+      type: Annotations.AnnotationType,
+      resolveRelativePosition:
+          (parentElement: Element, revealNode: boolean, lookupId: string,
+           node?: SDK.DOMModel.DOMNode) => Promise<{x: number, y: number}|null>,
+      parentElement: Element, insertBefore: Node|null = null): void {
+    if (!Annotations.AnnotationRepository.annotationsEnabled()) {
+      return;
+    }
+
+    if (!this.#annotationPlacements) {
+      this.#annotationPlacements = new Map();
+    }
+    this.#annotationPlacements.set(type, {parentElement, insertBefore, resolveRelativePosition});
+
+    // eslint-disable-next-line no-console
+    console.log(
+        `[AnnotationManager] initializing placement for ${Annotations.AnnotationType[type]}`, {parentElement},
+        'placement count:', this.#annotationPlacements);
+  }
+
+  async #onAnnotationAdded(
+      event: Common.EventTarget.EventTargetEvent<Annotations.EventTypes[Annotations.Events.ANNOTATION_ADDED]>):
+      Promise<void> {
+    // eslint-disable-next-line no-console
+    console.log('[AnnotationManager] received event onAnnotationAdded', event);
+  }
+}

package/front_end/panels/common/PersistenceUtils.ts

@@ -1,14 +1,13 @@
 // Copyright 2016 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 * as Platform from '../../core/platform/platform.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -43,13 +42,13 @@ export class PersistenceUtils {
     return i18nString(UIStrings.linkedToS, {PH1: Platform.StringUtilities.trimMiddle(binding.network.url(), 150)});
   }
 
-  static iconForUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): IconButton.Icon.Icon|null {
+  static iconForUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): Icon|null {
     const binding = Persistence.Persistence.PersistenceImpl.instance().binding(uiSourceCode);
     if (binding) {
       if (!Common.ParsedURL.schemeIs(binding.fileSystem.url(), 'file:')) {
         return null;
       }
-      const icon = new IconButton.Icon.Icon();
+      const icon = new Icon();
       icon.name = 'document';
       icon.classList.add('small');
       UI.Tooltip.Tooltip.install(icon, PersistenceUtils.tooltipForUISourceCode(binding.network));
@@ -69,14 +68,14 @@ export class PersistenceUtils {
 
     if (Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().isActiveHeaderOverrides(
             uiSourceCode)) {
-      const icon = new IconButton.Icon.Icon();
+      const icon = new Icon();
       icon.name = 'document';
       icon.classList.add('small');
       icon.classList.add('dot', 'purple');
       return icon;
     }
 
-    const icon = new IconButton.Icon.Icon();
+    const icon = new Icon();
     icon.name = 'document';
     icon.classList.add('small');
     UI.Tooltip.Tooltip.install(icon, PersistenceUtils.tooltipForUISourceCode(uiSourceCode));
@@ -97,7 +96,7 @@ export class LinkDecorator extends Common.ObjectWrapper.ObjectWrapper<Components
     this.dispatchEventToListeners(Components.Linkifier.LinkDecorator.Events.LINK_ICON_CHANGED, binding.network);
   }
 
-  linkIcon(uiSourceCode: Workspace.UISourceCode.UISourceCode): IconButton.Icon.Icon|null {
+  linkIcon(uiSourceCode: Workspace.UISourceCode.UISourceCode): Icon|null {
     return PersistenceUtils.iconForUISourceCode(uiSourceCode);
   }
 }

package/front_end/panels/common/common.ts

@@ -96,6 +96,7 @@ export class TypeToAllowDialog {
 
 export {AiCodeCompletionTeaser} from './AiCodeCompletionTeaser.js';
 export {AiCodeGenerationTeaser} from './AiCodeGenerationTeaser.js';
+export {AnnotationManager} from './AnnotationManager.js';
 export {FreDialog} from './FreDialog.js';
 export {GdpSignUpDialog} from './GdpSignUpDialog.js';
 export {AiCodeCompletionDisclaimer} from './AiCodeCompletionDisclaimer.js';