chrome-devtools-frontend 1.0.1550444 → 1.0.1555174

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;
+  }
+}

package/front_end/panels/common/AnnotationManager.ts

@@ -6,12 +6,20 @@ 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';
 
+import {Annotation} from './Annotation.js';
+
+interface AnnotationData {
+  id: number;
+  type: Annotations.AnnotationType;
+  annotation: Annotation;
+}
+
 interface AnnotationPlacement {
   parentElement: Element;
   insertBefore?: Node|null;
-  resolveRelativePosition:
-      (parentElement: Element, revealNode: boolean, lookupId: string,
-       node?: SDK.DOMModel.DOMNode) => Promise<{x: number, y: number}|null>;
+  resolveInitialState:
+      (parentElement: Element, reveal: boolean, lookupId: string,
+       anchor?: SDK.DOMModel.DOMNode|SDK.NetworkRequest.NetworkRequest) => Promise<{x: number, y: number}|null>;
 }
 
 // This class handles general management of Annotations, the data needed to display them and any panel-specific things
@@ -23,6 +31,8 @@ export class AnnotationManager {
   static #instance: AnnotationManager|null = null;
 
   #annotationPlacements: Map<Annotations.AnnotationType, AnnotationPlacement>|null = null;
+  #annotations = new Map<number, AnnotationData>();
+  #synced = false;
 
   constructor() {
     if (!Annotations.AnnotationRepository.annotationsEnabled()) {
@@ -32,6 +42,10 @@ export class AnnotationManager {
 
     Annotations.AnnotationRepository.instance().addEventListener(
         Annotations.Events.ANNOTATION_ADDED, this.#onAnnotationAdded, this);
+    Annotations.AnnotationRepository.instance().addEventListener(
+        Annotations.Events.ANNOTATION_DELETED, this.#onAnnotationDeleted, this);
+    Annotations.AnnotationRepository.instance().addEventListener(
+        Annotations.Events.ALL_ANNOTATIONS_DELETED, this.#onAllAnnotationsDeleted, this);
   }
 
   static instance(): AnnotationManager {
@@ -43,9 +57,9 @@ export class AnnotationManager {
 
   initializePlacementForAnnotationType(
       type: Annotations.AnnotationType,
-      resolveRelativePosition:
-          (parentElement: Element, revealNode: boolean, lookupId: string,
-           node?: SDK.DOMModel.DOMNode) => Promise<{x: number, y: number}|null>,
+      resolveInitialState:
+          (parentElement: Element, reveal: boolean, lookupId: string,
+           anchor?: SDK.DOMModel.DOMNode|SDK.NetworkRequest.NetworkRequest) => Promise<{x: number, y: number}|null>,
       parentElement: Element, insertBefore: Node|null = null): void {
     if (!Annotations.AnnotationRepository.annotationsEnabled()) {
       return;
@@ -54,18 +68,141 @@ export class AnnotationManager {
     if (!this.#annotationPlacements) {
       this.#annotationPlacements = new Map();
     }
-    this.#annotationPlacements.set(type, {parentElement, insertBefore, resolveRelativePosition});
+    this.#annotationPlacements.set(type, {parentElement, insertBefore, resolveInitialState});
 
     // eslint-disable-next-line no-console
     console.log(
         `[AnnotationManager] initializing placement for ${Annotations.AnnotationType[type]}`, {parentElement},
         'placement count:', this.#annotationPlacements);
+
+    this.#syncAnnotations();
+  }
+
+  #syncAnnotations(): void {
+    if (this.#synced) {
+      return;
+    }
+
+    // eslint-disable-next-line no-console
+    console.log('[AnnotationManager] **** SYNC STARTED ***');
+    const repository = Annotations.AnnotationRepository.instance();
+    for (const type of Object.values(Annotations.AnnotationType)) {
+      for (const annotation of repository.getAnnotationDataByType(type as Annotations.AnnotationType)) {
+        // eslint-disable-next-line no-console
+        console.log(
+            '[AnnotationManager] Available annotation:', annotation,
+            'need sync:', !this.#annotations.has(annotation.id));
+        if (!this.#annotations.has(annotation.id)) {
+          this.#addAnnotation(annotation);
+        }
+      }
+    }
+    this.#synced = true;
+  }
+
+  #onAllAnnotationsDeleted(): void {
+    for (const annotation of this.#annotations.values()) {
+      annotation.annotation.hide();
+    }
+    this.#annotations = new Map();
+    // eslint-disable-next-line no-console
+    console.log('[AnnotationManager] deleted all annotations');
+  }
+
+  #onAnnotationDeleted(
+      event: Common.EventTarget.EventTargetEvent<Annotations.EventTypes[Annotations.Events.ANNOTATION_DELETED]>): void {
+    const {id} = event.data;
+    const annotation = this.#annotations.get(id);
+    if (annotation) {
+      annotation.annotation.hide();
+      this.#annotations.delete(id);
+    }
+    // eslint-disable-next-line no-console
+    console.log(`[AnnotationManager] Deleted annotation with id ${id}`);
   }
 
-  async #onAnnotationAdded(
-      event: Common.EventTarget.EventTargetEvent<Annotations.EventTypes[Annotations.Events.ANNOTATION_ADDED]>):
-      Promise<void> {
+  #onAnnotationAdded(
+      event: Common.EventTarget.EventTargetEvent<Annotations.EventTypes[Annotations.Events.ANNOTATION_ADDED]>): void {
+    const annotationData = event.data;
     // eslint-disable-next-line no-console
-    console.log('[AnnotationManager] received event onAnnotationAdded', event);
+    console.log('[AnnotationManager] handleAddAnnotation', annotationData);
+    this.#addAnnotation(annotationData);
+  }
+
+  #addAnnotation(annotationData: Annotations.BaseAnnotationData): void {
+    const expandable = annotationData.type !== Annotations.AnnotationType.NETWORK_REQUEST;
+    const showExpanded = annotationData.type !== Annotations.AnnotationType.NETWORK_REQUEST;
+    const showAnchored = annotationData.type !== Annotations.AnnotationType.NETWORK_REQUEST;
+    const showCloseButton = annotationData.type !== Annotations.AnnotationType.NETWORK_REQUEST;
+    const annotation = new Annotation(
+        annotationData.id, annotationData.message, showExpanded, showAnchored, expandable, showCloseButton);
+    this.#annotations.set(annotationData.id, {id: annotationData.id, type: annotationData.type, annotation});
+    // eslint-disable-next-line no-console
+    console.log('[AnnotationManager] addAnnotation called. Annotations now', this.#annotations);
+    requestAnimationFrame(async () => {
+      await this.#resolveAnnotationWithId(annotationData.id);
+    });
+  }
+
+  async resolveAnnotationsOfType(type: Annotations.AnnotationType): Promise<void> {
+    for (const annotationData of this.#annotations.values()) {
+      if (annotationData.type === type) {
+        await this.#resolveAnnotationWithId(annotationData.id);
+      }
+    }
+  }
+
+  async #resolveAnnotationWithId(id: number): Promise<void> {
+    const annotation = this.#annotations.get(id);
+    if (!annotation) {
+      console.warn('Unable to find annotation with id', id, ' in annotations map', this.#annotations);
+      return;
+    }
+
+    const placement = this.#annotationPlacements?.get(annotation.type);
+    if (!placement) {
+      console.warn(
+          'Unable to find placement for annotation with id', id,
+          '(note: this is expected if its panel hasn\'t been shown yet).');
+      return;
+    }
+
+    let position = undefined;
+    const annotationRegistration = Annotations.AnnotationRepository.instance().getAnnotationDataById(id);
+    const reveal = !annotation.annotation.hasShown();
+    switch (annotationRegistration?.type) {
+      case Annotations.AnnotationType.ELEMENT_NODE: {
+        const elementData = annotationRegistration as Annotations.ElementsAnnotationData;
+        position = await placement.resolveInitialState(
+            placement.parentElement, reveal, elementData.lookupId, elementData.anchor);
+        break;
+      }
+      case Annotations.AnnotationType.NETWORK_REQUEST: {
+        const networkRequestData = annotationRegistration as Annotations.NetworkRequestAnnotationData;
+        position = await placement.resolveInitialState(
+            placement.parentElement, reveal, networkRequestData.lookupId, networkRequestData.anchor);
+        break;
+      }
+      case Annotations.AnnotationType.NETWORK_REQUEST_SUBPANEL_HEADERS: {
+        const networkRequestDetailsData = annotationRegistration as Annotations.NetworkRequestDetailsAnnotationData;
+        position = await placement.resolveInitialState(
+            placement.parentElement, reveal, networkRequestDetailsData.lookupId, networkRequestDetailsData.anchor);
+        break;
+      }
+      default:
+        console.warn('[AnnotationManager] Unknown AnnotationType', annotationRegistration?.type);
+    }
+
+    if (!position) {
+      // eslint-disable-next-line no-console
+      console.log(`Unable to calculate position for annotation with id ${annotationRegistration?.id}`);
+      return;
+    }
+
+    annotation.annotation.setCoordinates(position.x, position.y);
+
+    if (!annotation.annotation.isShowing()) {
+      annotation.annotation.show(placement.parentElement, placement.insertBefore);
+    }
   }
 }

package/front_end/panels/common/ExtensionView.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * as Extensions from '../../models/extensions/extensions.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 
@@ -110,3 +111,49 @@ export class ExtensionNotifierView extends UI.Widget.VBox {
     this.server.notifyViewHidden(this.id);
   }
 }
+
+export class ExtensionIframe {
+  #descriptor: Extensions.RecorderPluginManager.ViewDescriptor;
+  #iframe: HTMLIFrameElement;
+  #isShowing = false;
+  #isLoaded = false;
+
+  constructor(descriptor: Extensions.RecorderPluginManager.ViewDescriptor) {
+    this.#descriptor = descriptor;
+    // We are creating a single iframe here.
+    /* eslint-disable-next-line @devtools/no-imperative-dom-api */
+    this.#iframe = document.createElement('iframe');
+    this.#iframe.src = descriptor.pagePath;
+    this.#iframe.onload = this.#onIframeLoad;
+  }
+
+  #onIframeLoad = (): void => {
+    this.#isLoaded = true;
+    if (this.#isShowing) {
+      this.#descriptor.onShown();
+    }
+  };
+
+  show(): void {
+    if (this.#isShowing) {
+      return;
+    }
+    this.#isShowing = true;
+    if (this.#isLoaded) {
+      this.#descriptor.onShown();
+    }
+  }
+
+  hide(): void {
+    if (!this.#isShowing) {
+      return;
+    }
+    this.#isShowing = false;
+    this.#isLoaded = false;
+    this.#descriptor.onHidden();
+  }
+
+  frame(): HTMLIFrameElement {
+    return this.#iframe;
+  }
+}

package/front_end/panels/common/PersistenceUtils.ts

@@ -2,14 +2,15 @@
 // 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 Platform from '../../core/platform/platform.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.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';
+import {html, type LitTemplate} from '../../ui/lit/lit.js';
 
 const UIStrings = {
   /**
@@ -42,23 +43,21 @@ export class PersistenceUtils {
     return i18nString(UIStrings.linkedToS, {PH1: Platform.StringUtilities.trimMiddle(binding.network.url(), 150)});
   }
 
-  static iconForUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): Icon|null {
+  static iconForUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): LitTemplate|null {
     const binding = Persistence.Persistence.PersistenceImpl.instance().binding(uiSourceCode);
     if (binding) {
       if (!Common.ParsedURL.schemeIs(binding.fileSystem.url(), 'file:')) {
         return null;
       }
-      const icon = new Icon();
-      icon.name = 'document';
-      icon.classList.add('small');
-      UI.Tooltip.Tooltip.install(icon, PersistenceUtils.tooltipForUISourceCode(binding.network));
-      if (Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().project() ===
-          binding.fileSystem.project()) {
-        icon.classList.add('dot', 'purple');
-      } else {
-        icon.classList.add('dot', 'green');
-      }
-      return icon;
+      const dotClass = Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().project() ===
+              binding.fileSystem.project() ?
+          'purple' :
+          'green';
+      // clang-format off
+      return html`<devtools-icon class="small dot ${dotClass}" name="document"
+                                 title=${PersistenceUtils.tooltipForUISourceCode(binding.network)}>
+                  </devtools-icon>`;
+      // clang-format on
     }
 
     if (uiSourceCode.project().type() !== Workspace.Workspace.projectTypes.FileSystem ||
@@ -68,18 +67,16 @@ export class PersistenceUtils {
 
     if (Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().isActiveHeaderOverrides(
             uiSourceCode)) {
-      const icon = new Icon();
-      icon.name = 'document';
-      icon.classList.add('small');
-      icon.classList.add('dot', 'purple');
-      return icon;
+      // clang-format off
+      return html`<devtools-icon class="small dot purple" name="document"></devtools-icon>`;
+      // clang-format on
     }
 
-    const icon = new Icon();
-    icon.name = 'document';
-    icon.classList.add('small');
-    UI.Tooltip.Tooltip.install(icon, PersistenceUtils.tooltipForUISourceCode(uiSourceCode));
-    return icon;
+    // clang-format off
+    return html`<devtools-icon class="small" name="document"
+                               title=${PersistenceUtils.tooltipForUISourceCode(uiSourceCode)}>
+                </devtools-icon>`;
+    // clang-format on
   }
 }
 
@@ -96,7 +93,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): Icon|null {
+  linkIcon(uiSourceCode: Workspace.UISourceCode.UISourceCode): LitTemplate|null {
     return PersistenceUtils.iconForUISourceCode(uiSourceCode);
   }
 }

package/front_end/panels/common/annotation.css

@@ -0,0 +1,40 @@
+/**
+ * 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.
+ */
+
+.overlay {
+  position: absolute;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  /* From the other bubble */
+  background-color: var(--color-background-inverted);
+  color: var(--color-background);
+  pointer-events: auto;
+  border-radius: var(--sys-shape-corner-extra-small);
+  white-space: pre-wrap;
+  max-width: 300px;
+  width: max-content;
+  padding: var(--sys-size-3) var(--sys-size-4);
+  font-family: var(--default-font-family);
+  font-size: var(--sys-typescale-body2-size);
+  font-weight: var(--ref-typeface-weight-medium);
+  outline: 2px solid var(--color-background);
+}
+
+.connectorContainer {
+  z-index: 1000;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.close-button {
+  position: absolute;
+  top:1px;
+  z-index: 1000;
+  cursor: pointer;
+}

package/front_end/panels/common/common.ts

@@ -107,3 +107,4 @@ export * as ExtensionServer from './ExtensionServer.js';
 export * as ExtensionView from './ExtensionView.js';
 export * as PersistenceUtils from './PersistenceUtils.js';
 export * as DOMLinkifier from './DOMLinkifier.js';
+export * as ExtensionIframe from './ExtensionView.js';