chrome-devtools-frontend 1.0.1690116 → 1.0.1695017

package/front_end/ui/legacy/components/inline_editor/positionAreaEditor.css

@@ -0,0 +1,154 @@
+/*
+ * Copyright 2026 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+@scope to (devtools-widget > *) {
+  :scope {
+    padding: var(--sys-size-7);
+    width: min-content;
+  }
+
+  .property {
+    display: flex;
+    gap: var(--sys-size-2);
+    line-height: 16px;
+    height: 32px;
+    padding-bottom: var(--sys-size-3);
+    overflow-wrap: break-word;
+    flex-shrink: 0;
+  }
+
+  .property-name,
+  .property-keyword {
+    white-space: nowrap;
+  }
+
+  .property-name {
+    flex-shrink: 0;
+    color: var(--sys-color-token-property-special);
+  }
+
+  .property-value {
+    color: var(--sys-color-on-surface);
+  }
+
+  .position-area-builder {
+    --x-start: attr(data-x-start type(<number>));
+    --x-end: attr(data-x-end type(<number>));
+    --y-start: attr(data-y-start type(<number>));
+    --y-end: attr(data-y-end type(<number>));
+    --box-size: 28px;
+
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(3, var(--box-size));
+    grid-template-rows: repeat(3, var(--box-size));
+    gap: 4px;
+    margin: var(--sys-size-6) auto var(--sys-size-9);
+    touch-action: none;
+    user-select: none;
+    flex-shrink: 0;
+
+    div {
+      background-color: if(
+        style(
+          (--x-start <= attr(data-x type(<number>))) and
+          (--x-end >= attr(data-x type(<number>))) and
+          (--y-start <= attr(data-y type(<number>))) and
+          (--y-end >= attr(data-y type(<number>)))
+        ): var(--sys-color-tonal-container);
+        else: transparent
+      );
+      min-width: var(--box-size);
+      min-height: var(--box-size);
+      outline: 1px solid var(--sys-color-neutral-outline);
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: -2px;
+      grid-column: calc(var(--x-start) + 1) / calc(var(--x-end) + 2);
+      grid-row: calc(var(--y-start) + 1) / calc(var(--y-end) + 2);
+      border: 2px solid var(--sys-color-primary);
+      pointer-events: none;
+      z-index: 1;
+    }
+  }
+
+  .position-area-controls {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-size-5);
+    flex-shrink: 0;
+  }
+
+  .axis-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-size-1);
+  }
+
+  .axis-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .self-checkbox-label {
+    padding-inline-end: var(--sys-size-2);
+  }
+
+  .axis-title {
+    font-size: var(--sys-typescale-body4-size);
+    font-weight: 500;
+    color: var(--sys-color-on-surface-subtle);
+  }
+
+  .chip-radio-group {
+    display: inline-flex;
+    gap: var(--sys-size-3);
+    border: none;
+    padding: 0;
+    margin: 0;
+
+    & > input[type='radio'] {
+      position: absolute;
+      opacity: 0%;
+      width: 0;
+      height: 0;
+      pointer-events: none;
+    }
+
+    & > label {
+      box-sizing: border-box;
+      display: inline-block;
+      padding: 3px var(--sys-size-4);
+      border-radius: var(--sys-shape-corner-extra-small);
+      outline: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+      outline-offset: calc(-1 * var(--sys-size-1));
+      background: transparent;
+      color: var(--sys-color-on-surface);
+      font-size: var(--sys-typescale-body5-size);
+      font-weight: 500;
+      cursor: pointer;
+      user-select: none;
+
+      &:hover {
+        background-color: var(--sys-color-state-hover-on-subtle);
+      }
+    }
+
+    & > input[type='radio']:checked + label {
+      background-color: var(--sys-color-tonal-container);
+      color: var(--sys-color-on-tonal-container);
+      outline: none;
+    }
+
+    & > input[type='radio']:focus-visible + label {
+      outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+    }
+  }
+}

package/front_end/ui/legacy/components/object_ui/CustomPreviewComponent.ts

@@ -1,7 +1,6 @@
 // Copyright 2014 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';
@@ -19,8 +18,6 @@ import {
   ObjectTree,
 } from './ObjectPropertiesSection.js';
 
-const {widget} = UI.Widget;
-
 const UIStrings = {
   /**
    * @description Context menu item to show a custom formatted object as a standard JavaScript object.
@@ -30,18 +27,52 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/object_ui/CustomPreviewComponent.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class CustomPreviewSection {
-  private readonly sectionElement: HTMLSpanElement;
-  private readonly object: SDK.RemoteObject.RemoteObject;
-  private expanded = false;
-  private cachedContent?: unknown|ObjectTree|null;
+export class CustomPreviewSection extends UI.Widget.Widget {
+  #object?: SDK.RemoteObject.RemoteObject;
+  #expanded = false;
+  private cachedContent?: unknown|ObjectTree;
   private headerJsonML?: unknown;
-  constructor(object: SDK.RemoteObject.RemoteObject) {
-    this.sectionElement = document.createElement('span');
-    this.sectionElement.classList.add('custom-expandable-section');
-    this.object = object;
-    const customPreview = object.customPreview();
+  private readonly view: View;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element);
+    this.view = view;
+  }
+
+  get object(): SDK.RemoteObject.RemoteObject|undefined {
+    return this.#object;
+  }
+
+  set object(object: SDK.RemoteObject.RemoteObject|undefined) {
+    if (this.#object === object) {
+      return;
+    }
+    this.#object = object;
+    this.headerJsonML = undefined;
+    this.cachedContent = undefined;
+    this.#expanded = false;
+    this.parseHeader();
+    // CustomPreviewComponent is used synchronously by ConsoleViewMessage. We must render synchronously
+    // so ConsoleViewport can measure the true row height upon insertion.
+    this.performUpdate();
+  }
+
+  get expanded(): boolean {
+    return this.#expanded;
+  }
 
+  set expanded(expanded: boolean) {
+    if (this.#expanded === expanded) {
+      return;
+    }
+    this.#expanded = expanded;
+    if (this.#expanded && !this.cachedContent) {
+      void this.loadBody();
+    }
+    this.performUpdate();
+  }
+  private parseHeader(): void {
+    const customPreview = this.#object?.customPreview();
     if (!customPreview) {
       return;
     }
@@ -50,74 +81,79 @@ export class CustomPreviewSection {
       this.headerJsonML = JSON.parse(customPreview.header);
     } catch (e) {
       Common.Console.Console.instance().error('Broken formatter: header is invalid json ' + e);
-      return;
     }
-    this.render();
   }
 
-  private render(): void {
-    const customPreview = this.object.customPreview();
-    if (!customPreview || !this.headerJsonML) {
+  override performUpdate(): void {
+    this.view({
+      object: this.#object,
+      headerJsonML: this.headerJsonML,
+      expanded: this.#expanded,
+      cachedContent: this.cachedContent,
+      toggleExpanded: this.toggleExpanded,
+    },
+              undefined, this.contentElement);
+  }
+  private toggleExpanded = (): void => {
+    this.expanded = !this.expanded;
+  };
+
+  private async loadBody(): Promise<void> {
+    const customPreview = this.#object?.customPreview();
+    if (!this.#object || !customPreview?.bodyGetterId) {
       return;
     }
 
-    const headerTemplate = this.renderJSONMLTag(this.headerJsonML);
-    if (customPreview.bodyGetterId) {
-      let bodyContent: LitTemplate|Node|undefined;
-      if (this.cachedContent instanceof ObjectTree) {
-        bodyContent = html`<devtools-widget class="custom-expandable-section-default-body" ${
-            widget(ObjectPropertiesSectionWidget, {
-              objectTree: this.cachedContent,
-              showOverflow: false,
-            })}></devtools-widget>`;
-      } else if (this.cachedContent !== undefined) {
-        bodyContent = this.renderJSONMLTag(this.cachedContent);
-      }
-
-      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-      render(
-          html`
-        <span class=${
-              Directives.classMap({'custom-expandable-section-header': true,
-                                   expanded: this.expanded})} @click=${(event: Event) => this.onClick(event)}>
-          <devtools-icon name=${
-              this.expanded ? 'triangle-down' : 'triangle-right'} class="custom-expand-icon"></devtools-icon>
-          ${headerTemplate}
-        </span>
-        ${
-              bodyContent ?
-                  html`<span class="custom-expandable-section-body" ?hidden=${!this.expanded}>${bodyContent}</span>` :
-                  nothing}
-      `,
-          this.sectionElement);
+    const bodyJsonML =
+        await this.#object.callFunctionJSON(bodyGetter => bodyGetter(), [{objectId: customPreview.bodyGetterId}]);
+    if (bodyJsonML === null) {
+      // Per https://firefox-source-docs.mozilla.org/devtools-user/custom_formatters/index.html#custom-formatter-structure
+      // we are supposed to fall back to the default format when the `body()` callback returns `null`.
+      const objectTree = new ObjectTree(this.#object, {
+        readOnly: true,
+        propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+      });
+      objectTree.expanded = true;
+      this.cachedContent = objectTree;
     } else {
-      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-      render(html`${headerTemplate}`, this.sectionElement);
+      this.cachedContent = bodyJsonML;
     }
-  }
 
-  element(): Element {
-    return this.sectionElement;
+    this.performUpdate();
   }
+}
 
-  private renderJSONMLTag(jsonML: unknown): LitTemplate {
+const ALLOWED_TAGS = ['span', 'div', 'ol', 'li', 'table', 'tr', 'td'];
+
+export interface ViewInput {
+  object?: SDK.RemoteObject.RemoteObject;
+  headerJsonML?: unknown;
+  expanded: boolean;
+  cachedContent?: unknown|ObjectTree|null;
+  toggleExpanded: () => void;
+}
+
+const remoteObjectCache = new WeakMap<object, SDK.RemoteObject.RemoteObject>();
+
+export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
+  const renderJSONMLTag = (object: SDK.RemoteObject.RemoteObject, jsonML: unknown): LitTemplate => {
     if (!Array.isArray(jsonML)) {
       return html`${String(jsonML)}`;
     }
 
     if (jsonML[0] !== 'object') {
-      return this.renderElement(jsonML);
+      return renderElement(object, jsonML);
     }
     if (jsonML.length !== 2) {
       Common.Console.Console.instance().error('Broken formatter: object reference must contain exactly two elements');
       return html`<span></span>`;
     }
-    return this.layoutObjectTag(jsonML);
-  }
+    return layoutObjectTag(object, jsonML);
+  };
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private renderElement(object: any[]): LitTemplate {
-    const it = object[Symbol.iterator]();
+  const renderElement = (object: SDK.RemoteObject.RemoteObject, jsonML: any[]): LitTemplate => {
+    const it = jsonML[Symbol.iterator]();
     const tagName = it.next().value as string;
     if (!ALLOWED_TAGS.includes(tagName)) {
       Common.Console.Console.instance().error('Broken formatter: element ' + tagName + ' is not allowed!');
@@ -145,7 +181,7 @@ export class CustomPreviewSection {
 
     const children: LitTemplate[] = [];
     while (!next.done) {
-      children.push(this.renderJSONMLTag(next.value));
+      children.push(renderJSONMLTag(object, next.value));
       next = it.next();
     }
     const style = Directives.styleMap(stylePropertyMap);
@@ -168,104 +204,165 @@ export class CustomPreviewSection {
       default:
         return html`<span>${children}</span>`;
     }
-  }
+  };
 
-  private layoutObjectTag(objectTag: unknown[]): LitTemplate {
+  const layoutObjectTag = (object: SDK.RemoteObject.RemoteObject, objectTag: unknown[]): LitTemplate => {
     const it = objectTag[Symbol.iterator]();
     it.next();  // skip 'object'
-    const attributes = it.next().value;
-    const remoteObject = this.object.runtimeModel().createRemoteObject((attributes as Protocol.Runtime.RemoteObject));
+    const attributes = it.next().value as Protocol.Runtime.RemoteObject;
+    let remoteObject =
+        typeof attributes === 'object' && attributes !== null ? remoteObjectCache.get(attributes) : undefined;
+    if (!remoteObject) {
+      remoteObject = object.runtimeModel().createRemoteObject(attributes);
+      if (typeof attributes === 'object' && attributes !== null) {
+        remoteObjectCache.set(attributes, remoteObject);
+      }
+    }
     if (remoteObject.customPreview()) {
-      return html`${(new CustomPreviewSection(remoteObject)).element()}`;
+      return html`${UI.Widget.widget(CustomPreviewSection, {object: remoteObject})}`;
     }
 
     return defaultObjectPresentation(remoteObject, undefined, undefined, undefined,
                                      {'custom-expandable-section-standard-section': remoteObject.hasChildren});
-  }
+  };
 
-  private onClick(event: Event): void {
+  const onClick = (event: Event): void => {
     event.consume(true);
-    if (this.cachedContent !== undefined) {
-      this.toggleExpand();
-    } else {
-      void this.loadBody();
+    input.toggleExpanded();
+  };
+
+  const object = input.object;
+  const customPreview = object?.customPreview();
+  if (!object || !customPreview || !input.headerJsonML) {
+    render(nothing, target);
+    return;
+  }
+
+  const headerTemplate = renderJSONMLTag(object, input.headerJsonML);
+  if (customPreview.bodyGetterId) {
+    let bodyContent: LitTemplate|Node|undefined;
+    if (input.cachedContent instanceof ObjectTree) {
+      bodyContent = html`<devtools-widget class="custom-expandable-section-default-body" ${
+          UI.Widget.widget(ObjectPropertiesSectionWidget, {
+            objectTree: input.cachedContent,
+            showOverflow: false,
+          })}></devtools-widget>`;
+    } else if (input.cachedContent) {
+      bodyContent = renderJSONMLTag(object, input.cachedContent);
     }
+
+    render(html`
+      <span class=${Directives.classMap({'custom-expandable-section-header': true,
+                                         expanded: input.expanded})} @click=${onClick}>
+        <devtools-icon name=${
+               input.expanded ? 'triangle-down' : 'triangle-right'} class="custom-expand-icon"></devtools-icon>
+        ${headerTemplate}
+      </span>
+      ${
+               bodyContent ?
+                   html`<span class="custom-expandable-section-body" ?hidden=${!input.expanded}>${bodyContent}</span>` :
+                   nothing}
+    `,
+           target, {container: {classes: ['custom-expandable-section']}});
+  } else {
+    render(html`${headerTemplate}`, target, {container: {classes: ['custom-expandable-section']}});
   }
+};
 
-  private toggleExpand(): void {
-    this.expanded = !this.expanded;
-    this.render();
+export type View = typeof DEFAULT_VIEW;
+
+export interface CustomPreviewComponentViewInput {
+  object?: SDK.RemoteObject.RemoteObject;
+  expanded: boolean;
+  disassembled: boolean;
+  onContextMenu: (event: Event) => void;
+}
+
+export const CUSTOM_PREVIEW_COMPONENT_DEFAULT_VIEW =
+    (input: CustomPreviewComponentViewInput, _output: undefined, target: HTMLElement|DocumentFragment): void => {
+      if (!input.object) {
+        render(nothing, target);
+        return;
+      }
+      render(html`<style>${customPreviewComponentStyles}</style>${
+                 input.disassembled ?
+                     defaultObjectPresentation(input.object) :
+                     UI.Widget.widget(CustomPreviewSection, {object: input.object, expanded: input.expanded})}`,
+             target, {
+               container: {
+                 classes: ['source-code'],
+                 listeners: {contextmenu: input.onContextMenu},
+               },
+             });
+    };
+
+export type CustomPreviewComponentView = typeof CUSTOM_PREVIEW_COMPONENT_DEFAULT_VIEW;
+
+export class CustomPreviewComponent extends UI.Widget.Widget<DocumentFragment> {
+  #object?: SDK.RemoteObject.RemoteObject;
+  #expanded = false;
+  #disassembled = false;
+  readonly #view: CustomPreviewComponentView;
+
+  constructor(element?: HTMLElement, view: CustomPreviewComponentView = CUSTOM_PREVIEW_COMPONENT_DEFAULT_VIEW) {
+    super(element, {useShadowDom: 'pure'});
+    this.#view = view;
   }
 
-  async loadBody(): Promise<void> {
-    const customPreview = this.object.customPreview();
+  get object(): SDK.RemoteObject.RemoteObject|undefined {
+    return this.#object;
+  }
 
-    if (!customPreview) {
+  set object(object: SDK.RemoteObject.RemoteObject|undefined) {
+    if (this.#object === object) {
       return;
     }
+    this.#object = object;
+    this.#disassembled = false;
+    this.performUpdate();
+  }
 
-    if (customPreview.bodyGetterId) {
-      const bodyJsonML =
-          await this.object.callFunctionJSON(bodyGetter => bodyGetter(), [{objectId: customPreview.bodyGetterId}]);
-      if (bodyJsonML === null) {
-        // Per https://firefox-source-docs.mozilla.org/devtools-user/custom_formatters/index.html#custom-formatter-structure
-        // we are supposed to fall back to the default format when the `body()` callback returns `null`.
-        const objectTree = new ObjectTree(this.object, {
-          readOnly: true,
-          propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
-        });
-        objectTree.expanded = true;
-        this.cachedContent = objectTree;
-      } else {
-        this.cachedContent = bodyJsonML;
-      }
+  get expanded(): boolean {
+    return this.#expanded;
+  }
 
-      this.expanded = true;
-      this.render();
+  set expanded(expanded: boolean) {
+    if (this.#expanded === expanded) {
+      return;
     }
+    this.#expanded = expanded;
+    this.performUpdate();
   }
-}
-
-const ALLOWED_TAGS = ['span', 'div', 'ol', 'li', 'table', 'tr', 'td'];
 
-export class CustomPreviewComponent {
-  private readonly object: SDK.RemoteObject.RemoteObject;
-  private customPreviewSection: CustomPreviewSection|null;
-  element: HTMLSpanElement;
-  constructor(object: SDK.RemoteObject.RemoteObject) {
-    this.object = object;
-    this.customPreviewSection = new CustomPreviewSection(object);
-    this.element = document.createElement('span');
-    this.element.classList.add('source-code');
-    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(this.element, {cssFile: customPreviewComponentStyles});
-    this.element.addEventListener('contextmenu', this.contextMenuEventFired.bind(this), false);
-    shadowRoot.appendChild(this.customPreviewSection.element());
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
   }
 
-  expandIfPossible(): void {
-    const customPreview = this.object.customPreview();
-    if (customPreview && customPreview.bodyGetterId && this.customPreviewSection) {
-      void this.customPreviewSection.loadBody();
-    }
+  override performUpdate(): void {
+    this.#view({
+      object: this.#object,
+      expanded: this.#expanded,
+      disassembled: this.#disassembled,
+      onContextMenu: this.#onContextMenu,
+    },
+               undefined, this.contentElement);
   }
 
-  private contextMenuEventFired(event: Event): void {
+  #onContextMenu = (event: Event): void => {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
-    if (this.customPreviewSection) {
-      contextMenu.revealSection().appendItem(
-          i18nString(UIStrings.showAsJavascriptObject), this.disassemble.bind(this),
-          {jslogContext: 'show-as-javascript-object'});
+    if (!this.#disassembled) {
+      contextMenu.revealSection().appendItem(i18nString(UIStrings.showAsJavascriptObject), this.#disassemble.bind(this),
+                                             {jslogContext: 'show-as-javascript-object'});
+    }
+    if (this.#object) {
+      contextMenu.appendApplicableItems(this.#object);
     }
-    contextMenu.appendApplicableItems(this.object);
     void contextMenu.show();
-  }
+  };
 
-  private disassemble(): void {
-    if (this.element.shadowRoot) {
-      this.element.shadowRoot.textContent = '';
-      this.customPreviewSection = null;
-      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-      render(defaultObjectPresentation(this.object), this.element.shadowRoot);
-    }
+  #disassemble(): void {
+    this.#disassembled = true;
+    this.requestUpdate();
   }
 }

package/front_end/ui/legacy/components/object_ui/ObjectPopoverHelper.ts

@@ -56,10 +56,15 @@ export class ObjectPopoverHelper {
         resultHighlightedAsDOM = true;
       }
 
+      popover.setMaxContentSize(new Geometry.Size(300, 250));
+      popover.setSizeBehavior(UI.GlassPane.SizeBehavior.SET_EXACT_SIZE);
+
       if (result.customPreview()) {
-        const customPreviewComponent = new CustomPreviewComponent(result);
-        customPreviewComponent.expandIfPossible();
-        popoverContentElement = customPreviewComponent.element;
+        const customPreviewComponent = new CustomPreviewComponent();
+        customPreviewComponent.object = result;
+        customPreviewComponent.expanded = true;
+        customPreviewComponent.element.dataset.stableNameForTest = 'object-popover-content';
+        customPreviewComponent.show(popover.contentElement);
       } else {
         popoverContentElement = document.createElement('div');
         popoverContentElement.classList.add('object-popover-content');
@@ -83,11 +88,9 @@ export class ObjectPopoverHelper {
         section.linkifier = linkifier;
         section.showOverflow = true;
         section.show(popoverContentElement, null, true);
+        popoverContentElement.dataset.stableNameForTest = 'object-popover-content';
+        popover.contentElement.appendChild(popoverContentElement);
       }
-      popoverContentElement.dataset.stableNameForTest = 'object-popover-content';
-      popover.setMaxContentSize(new Geometry.Size(300, 250));
-      popover.setSizeBehavior(UI.GlassPane.SizeBehavior.SET_EXACT_SIZE);
-      popover.contentElement.appendChild(popoverContentElement);
       return new ObjectPopoverHelper(linkifier, resultHighlightedAsDOM);
     }