chrome-devtools-frontend 1.0.1654411 → 1.0.1656897

package/front_end/panels/common/Annotation.ts

@@ -1,184 +0,0 @@
-// 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 '../../models/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

@@ -1,208 +0,0 @@
-// 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 '../../models/annotations/annotations.js';
-
-import {Annotation} from './Annotation.js';
-
-interface AnnotationData {
-  id: number;
-  type: Annotations.AnnotationType;
-  annotation: Annotation;
-}
-
-interface AnnotationPlacement {
-  parentElement: Element;
-  insertBefore?: Node|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
-// 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;
-  #annotations = new Map<number, AnnotationData>();
-  #synced = false;
-
-  constructor() {
-    if (!Annotations.AnnotationRepository.annotationsEnabled()) {
-      console.warn('AnnotationManager created with annotations disabled');
-      return;
-    }
-
-    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 {
-    if (!AnnotationManager.#instance) {
-      AnnotationManager.#instance = new AnnotationManager();
-    }
-    return AnnotationManager.#instance;
-  }
-
-  initializePlacementForAnnotationType(
-      type: Annotations.AnnotationType,
-      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;
-    }
-
-    if (!this.#annotationPlacements) {
-      this.#annotationPlacements = new Map();
-    }
-    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}`);
-  }
-
-  #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] 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/annotation.css

@@ -1,40 +0,0 @@
-/**
- * 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;
-}