chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

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

@@ -1,10 +1,9 @@
 // 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/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';
@@ -12,9 +11,8 @@ import type * as Platform from '../../../../core/platform/platform.js';
 import {assertNotNullOrUndefined} from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Protocol from '../../../../generated/protocol.js';
-import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import type * as UI from '../../../../ui/legacy/legacy.js';
-import * as Lit from '../../../../ui/lit/lit.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
+import {Directives, html, type LitTemplate, nothing, render} from '../../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 import * as NetworkForward from '../../../network/forward/forward.js';
 import * as PreloadingHelper from '../helper/helper.js';
@@ -22,7 +20,7 @@ import * as PreloadingHelper from '../helper/helper.js';
 import * as PreloadingString from './PreloadingString.js';
 import ruleSetGridStyles from './ruleSetGrid.css.js';
 
-const {html, Directives: {styleMap}} = Lit;
+const {styleMap} = Directives;
 
 const UIStrings = {
   /**
@@ -63,29 +61,145 @@ export interface RuleSetGridRow {
   preloadsStatusSummary: string;
 }
 
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+
+export interface ViewInput {
+  data: RuleSetGridData|null;
+  onSelect: (ruleSetId: Protocol.Preload.RuleSetId) => void;
+  onRevealInElements: (ruleSet: Protocol.Preload.RuleSet) => void;
+  onRevealInNetwork: (ruleSet: Protocol.Preload.RuleSet) => void;
+  onRevealPreloadsAssociatedWithRuleSet: (ruleSet: Protocol.Preload.RuleSet) => void;
+}
+
+export type ViewOutput = unknown;
+
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  let template: LitTemplate = nothing;
+  if (input.data !== null) {
+    const {rows, pageURL} = input.data;
+
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    template =
+      html`
+          <style>${ruleSetGridStyles}</style>
+          <div class="ruleset-container" jslog=${VisualLogging.pane('preloading-rules')}>
+            <devtools-data-grid striped>
+              <table>
+                <tr>
+                  <th id="rule-set" weight="20" sortable>
+                    ${i18nString(UIStrings.ruleSet)}
+                  </th>
+                  <th id="status" weight="80" sortable>
+                    ${i18nString(UIStrings.status)}
+                  </th>
+                </tr>
+                ${rows.map(({ruleSet, preloadsStatusSummary}) => {
+                  const location = PreloadingString.ruleSetTagOrLocationShort(ruleSet, pageURL);
+                  const revealInElements = ruleSet.backendNodeId !== undefined;
+                  const revealInNetwork = ruleSet.url !== undefined && ruleSet.requestId;
+                  return html`
+                    <tr @select=${() => input.onSelect(ruleSet.id)}>
+                      <td>
+                        ${revealInElements || revealInNetwork ? html`
+                          <button class="link" role="link"
+                              @click=${() => {
+                                if (revealInElements) {
+                                  input.onRevealInElements(ruleSet);
+                                } else {
+                                  input.onRevealInNetwork(ruleSet);
+                                }
+                              }}
+                              title=${revealInElements ? i18nString(UIStrings.clickToOpenInElementsPanel)
+                                                      : i18nString(UIStrings.clickToOpenInNetworkPanel)}
+                              style=${styleMap({
+                                border: 'none',
+                                background: 'none',
+                                color: 'var(--icon-link)',
+                                cursor: 'pointer',
+                                'text-decoration': 'underline',
+                                'padding-inline-start': '0',
+                                'padding-inline-end': '0',
+                              })}
+                              jslog=${VisualLogging
+                                  .action(revealInElements ? 'reveal-in-elements' : 'reveal-in-network')
+                                  .track({click: true})}
+                            >
+                              <devtools-icon name=${revealInElements ? 'code-circle' : 'arrow-up-down-circle'} class="medium"
+                                style=${styleMap({
+                                  color: 'var(--icon-link)',
+                                  'vertical-align': 'sub',
+                                })}
+                              ></devtools-icon>
+                              ${location}
+                            </button>`
+                            : location}
+                    </td>
+                    <td>
+                      ${ruleSet.errorType !== undefined ? html`
+                        <span style=${styleMap({color: 'var(--sys-color-error)'})}>
+                          ${i18nString(UIStrings.errors, {errorCount: 1})}
+                        </span>` : ''} ${ruleSet.errorType !== Protocol.Preload.RuleSetErrorType.SourceIsNotJsonObject &&
+                        ruleSet.errorType !== Protocol.Preload.RuleSetErrorType.InvalidRulesetLevelTag ?
+                        html`
+                        <button class="link" role="link"
+                          @click=${() => input.onRevealPreloadsAssociatedWithRuleSet(ruleSet)}
+                          title=${i18nString(UIStrings.buttonRevealPreloadsAssociatedWithRuleSet)}
+                          style=${styleMap({
+                            color: 'var(--sys-color-primary)',
+                            'text-decoration': 'underline',
+                            cursor: 'pointer',
+                            border: 'none',
+                            background: 'none',
+                            'padding-inline-start': '0',
+                            'padding-inline-end': '0',
+                          })}
+                          jslog=${VisualLogging.action('reveal-preloads').track({click: true})}>
+                          ${preloadsStatusSummary}
+                        </button>` : ''}
+                    </td>
+                  </tr>
+                `;})}
+              </table>
+            </devtools-data-grid>
+          </div>`;
+    // clang-format on
+  }
+  render(template, target);
+};
+
 /** Grid component to show SpeculationRules rule sets. **/
-export class RuleSetGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+export class RuleSetGrid extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
+  readonly #view: View;
   #data: RuleSetGridData|null = null;
 
-  connectedCallback(): void {
-    this.#render();
+  constructor(view: View = DEFAULT_VIEW) {
+    super({useShadowDom: true});
+    this.#view = view;
+  }
+
+  get data(): RuleSetGridData|null {
+    return this.#data;
   }
 
-  update(data: RuleSetGridData): void {
+  set data(data: RuleSetGridData|null) {
     this.#data = data;
-    this.#render();
+    this.requestUpdate();
   }
 
-  async #revealSpeculationRules(ruleSet: Protocol.Preload.RuleSet): Promise<void> {
-    if (ruleSet.backendNodeId !== undefined) {
-      await this.#revealSpeculationRulesInElements(ruleSet);
-    } else if (ruleSet.url !== undefined && ruleSet.requestId) {
-      await this.#revealSpeculationRulesInNetwork(ruleSet);
-    }
+  override performUpdate(): void {
+    const input: ViewInput = {
+      data: this.#data,
+      onSelect: this.dispatchEventToListeners.bind(this, Events.SELECT),
+      onRevealInElements: this.#revealSpeculationRulesInElements.bind(this),
+      onRevealInNetwork: this.#revealSpeculationRulesInNetwork.bind(this),
+      onRevealPreloadsAssociatedWithRuleSet: this.#revealAttemptViewWithFilter.bind(this),
+    };
+    const output = undefined;
+    this.#view(input, output, this.contentElement);
   }
 
-  async #revealSpeculationRulesInElements(ruleSet: Protocol.Preload.RuleSet): Promise<void> {
+  #revealSpeculationRulesInElements(ruleSet: Protocol.Preload.RuleSet): void {
     assertNotNullOrUndefined(ruleSet.backendNodeId);
 
     const target = SDK.TargetManager.TargetManager.instance().scopeTarget();
@@ -93,10 +207,10 @@ export class RuleSetGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<
       return;
     }
 
-    await Common.Revealer.reveal(new SDK.DOMModel.DeferredDOMNode(target, ruleSet.backendNodeId));
+    void Common.Revealer.reveal(new SDK.DOMModel.DeferredDOMNode(target, ruleSet.backendNodeId));
   }
 
-  async #revealSpeculationRulesInNetwork(ruleSet: Protocol.Preload.RuleSet): Promise<void> {
+  #revealSpeculationRulesInNetwork(ruleSet: Protocol.Preload.RuleSet): void {
     assertNotNullOrUndefined(ruleSet.requestId);
     const request = SDK.TargetManager.TargetManager.instance()
                         .scopeTarget()
@@ -109,107 +223,18 @@ export class RuleSetGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<
 
     const requestLocation = NetworkForward.UIRequestLocation.UIRequestLocation.tab(
         request, NetworkForward.UIRequestLocation.UIRequestTabs.PREVIEW, {clearFilter: false});
-    await Common.Revealer.reveal(requestLocation);
-  }
-
-  async #revealAttemptViewWithFilter(ruleSet: Protocol.Preload.RuleSet): Promise<void> {
-    await Common.Revealer.reveal(new PreloadingHelper.PreloadingForward.AttemptViewWithFilter(ruleSet.id));
+    void Common.Revealer.reveal(requestLocation);
   }
 
-  #render(): void {
-    if (this.#data === null) {
-      return;
-    }
-
-    const {rows, pageURL} = this.#data;
-
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-      Lit.render(html`
-        <style>${ruleSetGridStyles}</style>
-        <div class="ruleset-container" jslog=${VisualLogging.pane('preloading-rules')}>
-          <devtools-data-grid striped>
-            <table>
-              <tr>
-                <th id="rule-set" weight="20" sortable>
-                  ${i18nString(UIStrings.ruleSet)}
-                </th>
-                <th id="status" weight="80" sortable>
-                  ${i18nString(UIStrings.status)}
-                </th>
-              </tr>
-              ${rows.map(({ruleSet, preloadsStatusSummary}) => {
-                const location = PreloadingString.ruleSetTagOrLocationShort(ruleSet, pageURL);
-                const revealInElements = ruleSet.backendNodeId !== undefined;
-                const revealInNetwork = ruleSet.url !== undefined && ruleSet.requestId;
-                return html`
-                  <tr @select=${() => this.dispatchEvent(new CustomEvent('select', {detail: ruleSet.id}))}>
-                    <td>
-                      ${revealInElements || revealInNetwork ? html`
-                        <button class="link" role="link"
-                            @click=${() => this.#revealSpeculationRules(ruleSet)}
-                            title=${revealInElements ? i18nString(UIStrings.clickToOpenInElementsPanel)
-                                                    : i18nString(UIStrings.clickToOpenInNetworkPanel)}
-                            style=${styleMap({
-                              border: 'none',
-                              background: 'none',
-                              color: 'var(--icon-link)',
-                              cursor: 'pointer',
-                              'text-decoration': 'underline',
-                              'padding-inline-start': '0',
-                              'padding-inline-end': '0',
-                            })}
-                            jslog=${VisualLogging
-                                .action(revealInElements ? 'reveal-in-elements' : 'reveal-in-network')
-                                .track({click: true})}
-                          >
-                            <devtools-icon name=${revealInElements ? 'code-circle' : 'arrow-up-down-circle'} class="medium"
-                              style=${styleMap({
-                                color: 'var(--icon-link)',
-                                'vertical-align': 'sub',
-                              })}
-                            ></devtools-icon>
-                            ${location}
-                          </button>`
-                          : location}
-                  </td>
-                  <td>
-                    ${ruleSet.errorType !== undefined ? html`
-                      <span style=${styleMap({color: 'var(--sys-color-error)'})}>
-                        ${i18nString(UIStrings.errors, {errorCount: 1})}
-                      </span>` : ''} ${ruleSet.errorType !== Protocol.Preload.RuleSetErrorType.SourceIsNotJsonObject &&
-                      ruleSet.errorType !== Protocol.Preload.RuleSetErrorType.InvalidRulesetLevelTag ?
-                      html`
-                      <button class="link" role="link"
-                        @click=${() => this.#revealAttemptViewWithFilter(ruleSet)}
-                        title=${i18nString(UIStrings.buttonRevealPreloadsAssociatedWithRuleSet)}
-                        style=${styleMap({
-                          color: 'var(--sys-color-primary)',
-                          'text-decoration': 'underline',
-                          cursor: 'pointer',
-                          border: 'none',
-                          background: 'none',
-                          'padding-inline-start': '0',
-                          'padding-inline-end': '0',
-                        })}
-                        jslog=${VisualLogging.action('reveal-preloads').track({click: true})}>
-                        ${preloadsStatusSummary}
-                      </button>` : ''}
-                  </td>
-                </tr>
-              `;})}
-            </table>
-          </devtools-data-grid>
-        </div>
-      `, this.#shadow, {host: this});
-    // clang-format on
+  #revealAttemptViewWithFilter(ruleSet: Protocol.Preload.RuleSet): void {
+    void Common.Revealer.reveal(new PreloadingHelper.PreloadingForward.AttemptViewWithFilter(ruleSet.id));
   }
 }
 
-customElements.define('devtools-resources-ruleset-grid', RuleSetGrid);
+export const enum Events {
+  SELECT = 'select',
+}
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-resources-ruleset-grid': RuleSetGrid;
-  }
+export interface EventTypes {
+  [Events.SELECT]: Protocol.Preload.RuleSetId;
 }

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

@@ -3,9 +3,8 @@
 // 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';
 
 import * as Common from '../../../../core/common/common.js';
@@ -16,12 +15,13 @@ import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Protocol from '../../../../generated/protocol.js';
 import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as RenderCoordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
-import type * as UI from '../../../../ui/legacy/legacy.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 PreloadingHelper from '../helper/helper.js';
 
-import type * as MismatchedPreloadingGrid from './MismatchedPreloadingGrid.js';
+import * as MismatchedPreloadingGrid from './MismatchedPreloadingGrid.js';
+import preloadingGridStyles from './preloadingGrid.css.js';
 import {prefetchFailureReason, prerenderFailureReason} from './PreloadingString.js';
 import usedPreloadingStyles from './usedPreloadingView.css.js';
 
@@ -119,6 +119,22 @@ const UIStrings = {
    * @description Label for badge, indicating how many failed speculations there are.
    */
   badgeFailureWithCount: '{n, plural, =1 {# failure} other {# failures}}',
+  /**
+   * @description The name of the HTTP request header.
+   */
+  headerName: 'Header name',
+  /**
+   * @description The value of the HTTP request header in initial navigation.
+   */
+  initialNavigationValue: 'Value in initial navigation',
+  /**
+   * @description The value of the HTTP request header in activation navigation.
+   */
+  activationNavigationValue: 'Value in activation navigation',
+  /**
+   * @description The string to indicate the value of the header is missing.
+   */
+  missing: '(missing)',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/preloading/components/UsedPreloadingView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -337,8 +353,9 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
       <devtools-report-section-header>${i18nString(UIStrings.preloadedURLs)}</devtools-report-section-header>
       <devtools-report-section
       jslog=${VisualLogging.section('preloaded-urls')}>
-        <devtools-resources-mismatched-preloading-grid
-          .data=${data as MismatchedPreloadingGrid.MismatchedPreloadingGridData}></devtools-resources-mismatched-preloading-grid>
+        <devtools-widget
+          .widgetConfig=${UI.Widget.widgetConfig(MismatchedPreloadingGrid.MismatchedPreloadingGrid, {data})}
+        ></devtools-widget>
       </devtools-report-section>
     `;
     // clang-format on
@@ -346,8 +363,10 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
 
   #maybeMismatchedHTTPHeadersSections(): Lit.LitTemplate {
     const attempt = this.#data.previousAttempts.find(
-        attempt => this.#isPrerenderAttempt(attempt) && attempt.mismatchedHeaders !== null);
-    if (attempt === undefined) {
+                        attempt => this.#isPrerenderAttempt(attempt) && attempt.mismatchedHeaders !== null) as
+            SDK.PreloadingModel.PrerenderAttempt |
+        SDK.PreloadingModel.PrerenderUntilScriptAttempt | undefined;
+    if (!attempt?.mismatchedHeaders) {
       return Lit.nothing;
     }
 
@@ -363,10 +382,31 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
     return html`
       <devtools-report-section-header>${i18nString(UIStrings.mismatchedHeadersDetail)}</devtools-report-section-header>
       <devtools-report-section>
-        <devtools-resources-preloading-mismatched-headers-grid
-          .data=${
-              attempt as SDK.PreloadingModel.PrerenderAttempt |
-              SDK.PreloadingModel.PrerenderUntilScriptAttempt}></devtools-resources-preloading-mismatched-headers-grid>
+        <style>${preloadingGridStyles}</style>
+        <div class="preloading-container">
+          <devtools-data-grid striped inline>
+            <table>
+              <tr>
+                <th id="header-name" weight="30" sortable>
+                  ${i18nString(UIStrings.headerName)}
+                </th>
+                <th id="initial-value" weight="30" sortable>
+                  ${i18nString(UIStrings.initialNavigationValue)}
+                </th>
+                <th id="activation-value" weight="30" sortable>
+                  ${i18nString(UIStrings.activationNavigationValue)}
+                </th>
+              </tr>
+              ${attempt.mismatchedHeaders.map(mismatchedHeaders => html`
+                <tr>
+                  <td>${mismatchedHeaders.headerName}</td>
+                  <td>${mismatchedHeaders.initialValue ?? i18nString(UIStrings.missing)}</td>
+                  <td>${mismatchedHeaders.activationValue ?? i18nString(UIStrings.missing)}</td>
+                </tr>
+              `)}
+            </table>
+          </devtools-data-grid>
+        </div>
       </devtools-report-section>
     `;
     // clang-format on

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

@@ -6,7 +6,6 @@ import * as MismatchedPreloadingGrid from './MismatchedPreloadingGrid.js';
 import * as PreloadingDetailsReportView from './PreloadingDetailsReportView.js';
 import * as PreloadingDisabledInfobar from './PreloadingDisabledInfobar.js';
 import * as PreloadingGrid from './PreloadingGrid.js';
-import * as PreloadingMismatchedHeadersGrid from './PreloadingMismatchedHeadersGrid.js';
 import * as RuleSetDetailsView from './RuleSetDetailsView.js';
 import * as RuleSetGrid from './RuleSetGrid.js';
 import * as UsedPreloadingView from './UsedPreloadingView.js';
@@ -16,7 +15,6 @@ export {
   PreloadingDetailsReportView,
   PreloadingDisabledInfobar,
   PreloadingGrid,
-  PreloadingMismatchedHeadersGrid,
   RuleSetDetailsView,
   RuleSetGrid,
   UsedPreloadingView,

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/Annotation.ts

@@ -0,0 +1,184 @@
+// 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.
+/* eslint-disable @devtools/no-imperative-dom-api */
+/* eslint-disable @devtools/no-lit-render-outside-of-view */
+
+import * as Annotations from '../../ui/components/annotations/annotations.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
+import {html, nothing, render} from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+
+import annotationStyles from './annotation.css.js';
+
+// This class handles drawing of Annotations for the GreenDev project, but
+// is not for general use (at the moment).
+//
+// **Important**: all of this functionality is behind the GreenDev flag. We
+// have **no intention** of pushing this feature live in this state. This
+// is code landing to user test in Canary that will not ship without an
+// additional project to make this code fully production worthy. That is
+// why this CL has no tests, for example.
+
+// The label is angled on the left from the centre of the entry it belongs to.
+// `LABEL_AND_CONNECTOR_SHIFT_LENGTH` specifies how many pixels to the left it is shifted.
+const LABEL_AND_CONNECTOR_SHIFT_LENGTH = 8;
+// Length of the line that connects the label to the entry.
+const LABEL_CONNECTOR_HEIGHT = 7;
+
+interface ViewInput {
+  inputText: string;
+  isExpanded: boolean;
+  anchored: boolean;
+  expandable: boolean;
+  showCloseButton: boolean;
+  clickHandler: () => void;
+  closeHandler: () => void;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, _, target) => {
+  const {inputText: label, isExpanded, anchored, expandable, showCloseButton, clickHandler, closeHandler} = input;
+
+  // TODO(finnur): Use `x`, and `y` passed via `input` to set the coordinates for the
+  // *Widget* (not the `overlay` div), then remove the `this.element.style` calls and
+  // remove the lint override no-imperative-dom-api from the top.
+  const connectorColor = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-text-primary');
+
+  const overlayStyles = [
+    anchored ? 'left: 17px; top: 11px;' : '',
+    !expandable ? 'pointer-events: none;' : '',
+  ].join(' ');
+
+  // clang-format off
+  render(html`
+    <style>${annotationStyles}</style>
+    ${anchored ? html`
+      <svg class="connectorContainer"
+        width=${LABEL_AND_CONNECTOR_SHIFT_LENGTH * 2}
+        height=${LABEL_CONNECTOR_HEIGHT}>
+        <line
+          x1=${LABEL_AND_CONNECTOR_SHIFT_LENGTH}
+          y1=0
+          x2=${LABEL_AND_CONNECTOR_SHIFT_LENGTH * 2}
+          y2=${LABEL_CONNECTOR_HEIGHT}
+          stroke=${connectorColor}
+          stroke-width=2
+        />
+        <circle
+          cx=${LABEL_AND_CONNECTOR_SHIFT_LENGTH}
+          cy=0
+          r=3
+          fill=${connectorColor}
+        />
+      </svg>
+    ` : nothing}
+    <div class='overlay' style=${overlayStyles} @click=${expandable ? clickHandler : null}>
+      ${isExpanded ? label : '!'}
+    </div>
+    ${showCloseButton ?
+        html`<svg @click=${closeHandler} class="close-button" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="8" cy="8" r="7.5" fill="#EEE" stroke="#888"/>
+          <path d="M5 5L11 11M5 11L11 5" stroke="#888" stroke-width="2"/>
+        </svg>` : nothing}
+    `, target);
+  // clang-format on
+};
+
+export class Annotation extends UI.Widget.Widget {
+  readonly #view: View;
+  readonly #id: number;
+  #inputText: string;
+  #x = 0;
+  #y = 0;
+  #isExpanded = false;
+  #hasShown = false;
+  #anchored = false;
+  #expandable = false;
+  #showCloseButton = false;
+
+  constructor(
+      id: number, label: string, showExpanded: boolean, anchored: boolean, expandable: boolean,
+      showCloseButton: boolean, view = DEFAULT_VIEW) {
+    super({jslog: `${VisualLogging.panel('annotation').track({resize: true})}`, useShadowDom: true});
+    this.#id = id;
+    this.#view = view;
+    this.#isExpanded = showExpanded;
+    this.#inputText = label;
+    this.#anchored = anchored;
+    this.#expandable = expandable;
+    this.#showCloseButton = showCloseButton;
+  }
+
+  #toggle(): void {
+    this.#isExpanded = !this.#isExpanded;
+    this.requestUpdate();
+  }
+
+  #closeHandler(): void {
+    this.hide();
+    Annotations.AnnotationRepository.instance().deleteAnnotation(this.#id);
+  }
+
+  override wasShown(): void {
+    this.element.style.position = 'absolute';
+    this.element.style.left = `${this.#x}px`;
+    this.element.style.top = `${this.#y}px`;
+    super.wasShown();
+    this.#hasShown = true;
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    if (!this.isShowing()) {
+      return;
+    }
+    const input = {
+      inputText: this.#inputText,
+      isExpanded: this.#isExpanded,
+      anchored: this.#anchored,
+      expandable: this.#expandable,
+      showCloseButton: this.#showCloseButton,
+      x: this.#x,
+      y: this.#y,
+      clickHandler: this.#toggle.bind(this),
+      closeHandler: this.#closeHandler.bind(this),
+    };
+    this.#view(input, undefined, this.contentElement);
+
+    if (this.#showCloseButton) {
+      const overlay = this.contentElement.querySelector('.overlay') as HTMLElement | null;
+      const closeButton = this.contentElement.querySelector('.close-button') as HTMLElement | null;
+      if (overlay && closeButton) {
+        const overlayLeft = parseFloat(overlay.style.left || '0');
+        const overlayWidth = overlay.getBoundingClientRect().width;
+        // Position the button to the right of the overlay, adjusting for button width.
+        closeButton.style.left = `${overlayLeft + overlayWidth - 16}px`;
+      }
+    }
+  }
+
+  hide(): void {
+    this.detach();
+  }
+
+  getCoordinates(): {x: number, y: number} {
+    return {x: this.#x, y: this.#y};
+  }
+
+  setCoordinates(x: number, y: number): void {
+    this.#x = x;
+    this.#y = y;
+    if (this.isShowing()) {
+      this.element.style.left = `${this.#x}px`;
+      this.element.style.top = `${this.#y}px`;
+    }
+    this.requestUpdate();
+  }
+
+  hasShown(): boolean {
+    return this.#hasShown;
+  }
+}