chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

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

@@ -8,7 +8,7 @@
   width: 270px;
   height: 350px;
   user-select: none;
-  padding: 16px;
+  padding: var(--sys-size-8);
   overflow: hidden;
 }
 
@@ -24,7 +24,7 @@
   flex-shrink: 0;
   /* overflown bezier visualization must be on top of the source text */
   z-index: 2;
-  background-image: radial-gradient(circle, var(--sys-color-surface-variant) 1px, var(--color-background-inverted-opacity-0) 1px);
+  background-image: radial-gradient(circle, var(--sys-color-surface-variant) var(--sys-size-1), var(--color-background-inverted-opacity-0) var(--sys-size-1));
   background-size: 17px 17px;
   background-position: -5px -10px;
 }
@@ -100,9 +100,9 @@
   position: relative;
   background-color: var(--sys-color-cdt-base-container);
   overflow: hidden;
-  border-radius: 20px;
+  border-radius: var(--sys-size-9);
   width: 200%;
-  height: 20px;
+  height: var(--sys-size-9);
   z-index: 2;
   flex-shrink: 0;
   opacity: 0%;
@@ -110,14 +110,14 @@
 
 .bezier-preview-animation {
   background-color: var(--sys-color-purple-bright);
-  width: 20px;
-  height: 20px;
-  border-radius: 20px;
+  width: var(--sys-size-9);
+  height: var(--sys-size-9);
+  border-radius: var(--sys-size-9);
   position: absolute;
 }
 
 .bezier-preview-onion {
-  margin-top: -20px;
+  margin-top: calc(-1 * var(--sys-size-9));
   position: relative;
   z-index: 1;
 }
@@ -172,14 +172,14 @@ span.bezier-display-value {
   user-select: text;
   display: block;
   text-align: center;
-  line-height: 20px;
-  min-height: 20px;
+  line-height: var(--sys-size-9);
+  min-height: var(--sys-size-9);
   cursor: text;
 }
 
 svg.bezier-curve {
-  margin-left: 32px;
-  margin-top: -8px;
+  margin-left: var(--sys-size-13);
+  margin-top: calc(-1 * var(--sys-size-5));
 }
 
 svg.bezier-curve.linear {
@@ -192,7 +192,7 @@ svg.bezier-preset-modify.bezier-preset-plus {
 }
 
 .bezier-header {
-  margin-top: 16px;
+  margin-top: var(--sys-size-8);
   z-index: 1;
 }
 

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

@@ -10,12 +10,12 @@
 
 .color-swatch {
   position: relative;
-  margin-left: 1px;
-  margin-right: 2px;
-  width: 12px;
-  height: 12px;
+  margin-left: var(--sys-size-1);
+  margin-right: var(--sys-size-2);
+  width: var(--sys-size-6);
+  height: var(--sys-size-6);
   transform: scale(0.8);
-  vertical-align: -2px;
+  vertical-align: calc(-1 * var(--sys-size-2));
   display: inline-block;
   user-select: none;
   background-image: var(--image-file-checker);
@@ -26,7 +26,7 @@
   width: 100%;
   height: 100%;
   display: inline-block;
-  border: 1px solid var(--sys-color-neutral-outline);
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
   box-sizing: border-box;
   cursor: pointer;
 }
@@ -36,7 +36,7 @@
 }
 
 .color-swatch:not(.readonly) .color-swatch-inner:hover {
-  border: 1px solid var(--sys-color-outline);
+  border: var(--sys-size-1) solid var(--sys-color-outline);
 }
 
 @media (forced-colors: active) {

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

@@ -19,7 +19,7 @@
 }
 
 .clock {
-  top: 6px;
+  top: var(--sys-size-4);
   width: 6em;
   height: 6em;
   background-color: var(--sys-color-cdt-base-container);
@@ -31,7 +31,7 @@
 
 .center,
 .hand {
-  box-shadow: 0 0 2px var(--box-shadow-outline-color);
+  box-shadow: 0 0 var(--sys-size-2) var(--box-shadow-outline-color);
 }
 
 .pointer {
@@ -61,10 +61,10 @@
 }
 
 .dial {
-  width: 2px;
+  width: var(--sys-size-2);
   height: var(--clock-dial-length);
   background-color: var(--override-dial-color);
-  border-radius: 1px;
+  border-radius: var(--sys-size-1);
 }
 
 .hand {
@@ -99,7 +99,7 @@
 :host-context(.theme-with-dark-background) .center,
 :host-context(.theme-with-dark-background) .hand {
   /* stylelint-disable-next-line plugin/use_theme_colors */
-  box-shadow: 0 0 2px hsl(0deg 0% 0% / 60%);
+  box-shadow: 0 0 var(--sys-size-2) hsl(0deg 0% 0% / 60%);
 }
 
 :host-context(.theme-with-dark-background) .clock {

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

@@ -6,18 +6,18 @@
 
 :host {
   user-select: none;
-  border: 1px solid transparent;
+  border: var(--sys-size-1) solid transparent;
 }
 
 .shadow-editor-field {
-  height: 24px;
-  margin-top: 8px;
-  font-size: 12px;
+  height: var(--sys-size-11);
+  margin-top: var(--sys-size-5);
+  font-size: var(--sys-typescale-body4-size);
   flex-shrink: 0;
 }
 
 .shadow-editor-field:last-of-type {
-  margin-bottom: 8px;
+  margin-bottom: var(--sys-size-5);
 }
 
 .shadow-editor-flex-field {
@@ -27,33 +27,33 @@
 }
 
 .shadow-editor-field.shadow-editor-blur-field {
-  margin-top: 40px;
+  margin-top: var(--sys-size-14);
 }
 
 .shadow-editor-2D-slider {
   position: absolute;
   height: 88px;
   width: 88px;
-  border: 1px solid var(--divider-line);
-  border-radius: 2px;
+  border: var(--sys-size-1) solid var(--divider-line);
+  border-radius: var(--sys-size-2);
 }
 
 .shadow-editor-label {
   display: inline-block;
   width: 52px;
-  height: 24px;
-  line-height: 24px;
-  margin-right: 8px;
+  height: var(--sys-size-11);
+  line-height: var(--sys-size-11);
+  margin-right: var(--sys-size-5);
   text-align: right;
 }
 
 .shadow-editor-button-left,
 .shadow-editor-button-right {
   width: 74px;
-  height: 24px;
+  height: var(--sys-size-11);
   padding: 3px 7px;
-  line-height: 16px;
-  border: 1px solid var(--divider-line);
+  line-height: var(--sys-size-8);
+  border: var(--sys-size-1) solid var(--divider-line);
   color: var(--sys-color-on-surface);
   background-color: var(--sys-color-cdt-base-container);
   text-align: center;
@@ -61,17 +61,17 @@
 }
 
 .shadow-editor-button-left {
-  border-radius: 2px 0 0 2px;
+  border-radius: var(--sys-size-2) 0 0 var(--sys-size-2);
 }
 
 .shadow-editor-button-right {
-  border-radius: 0 2px 2px 0;
+  border-radius: 0 var(--sys-size-2) var(--sys-size-2) 0;
   border-left-width: 0;
 }
 
 .shadow-editor-button-left:hover,
 .shadow-editor-button-right:hover {
-  box-shadow: 0 1px 1px var(--color-background-elevation-1);
+  box-shadow: 0 var(--sys-size-1) var(--sys-size-1) var(--color-background-elevation-1);
 }
 
 .shadow-editor-button-left:focus,
@@ -94,7 +94,7 @@
 
 .shadow-editor-text-input {
   width: 52px;
-  margin-right: 8px;
+  margin-right: var(--sys-size-5);
   text-align: right;
   box-shadow: var(--legacy-focus-ring-inactive-shadow);
 }

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

@@ -7,20 +7,20 @@ import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
-import {createIcon, type Icon} from '../../../kit/kit.js';
-import {render} from '../../../lit/lit.js';
+import {Directives, html, type LitTemplate, nothing, render} from '../../../lit/lit.js';
 import * as UI from '../../legacy.js';
 
 import {sanitizeStyle} from './CSSStyleSanitizer.js';
 import customPreviewComponentStyles from './customPreviewComponent.css.js';
 import {
-  defaultObjectPresentation as defaultObjectPresentationTemplate,
+  defaultObjectPresentation,
   ObjectPropertiesMode,
-  ObjectPropertiesSectionsTreeOutline,
-  ObjectPropertyTreeElement,
+  ObjectPropertiesSectionWidget,
   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.
@@ -33,54 +33,76 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class CustomPreviewSection {
   private readonly sectionElement: HTMLSpanElement;
   private readonly object: SDK.RemoteObject.RemoteObject;
-  private expanded: boolean;
-  private cachedContent: Node|null;
-  private readonly header: Node|undefined;
-  private readonly expandIcon: Icon|undefined;
+  private expanded = false;
+  private cachedContent?: unknown|ObjectTree|null;
+  private headerJsonML?: unknown;
   constructor(object: SDK.RemoteObject.RemoteObject) {
     this.sectionElement = document.createElement('span');
     this.sectionElement.classList.add('custom-expandable-section');
     this.object = object;
-    this.expanded = false;
-    this.cachedContent = null;
     const customPreview = object.customPreview();
 
     if (!customPreview) {
       return;
     }
 
-    let headerJSON;
     try {
-      headerJSON = JSON.parse(customPreview.header);
+      this.headerJsonML = JSON.parse(customPreview.header);
     } catch (e) {
       Common.Console.Console.instance().error('Broken formatter: header is invalid json ' + e);
       return;
     }
-    this.header = this.renderJSONMLTag(headerJSON);
-    if (this.header.nodeType === Node.TEXT_NODE) {
-      Common.Console.Console.instance().error('Broken formatter: header should be an element node.');
+    this.render();
+  }
+
+  private render(): void {
+    const customPreview = this.object.customPreview();
+    if (!customPreview || !this.headerJsonML) {
       return;
     }
 
+    const headerTemplate = this.renderJSONMLTag(this.headerJsonML);
     if (customPreview.bodyGetterId) {
-      if (this.header instanceof Element) {
-        this.header.classList.add('custom-expandable-section-header');
+      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);
       }
-      this.header.addEventListener('click', this.onClick.bind(this), false);
-      this.expandIcon = createIcon('triangle-right', 'custom-expand-icon');
-      this.header.insertBefore(this.expandIcon, this.header.firstChild);
-    }
 
-    this.sectionElement.appendChild(this.header);
+      // 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);
+    } else {
+      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+      render(html`${headerTemplate}`, this.sectionElement);
+    }
   }
 
   element(): Element {
     return this.sectionElement;
   }
 
-  private renderJSONMLTag(jsonML: unknown): Node {
+  private renderJSONMLTag(jsonML: unknown): LitTemplate {
     if (!Array.isArray(jsonML)) {
-      return document.createTextNode(String(jsonML));
+      return html`${String(jsonML)}`;
     }
 
     if (jsonML[0] !== 'object') {
@@ -88,22 +110,24 @@ export class CustomPreviewSection {
     }
     if (jsonML.length !== 2) {
       Common.Console.Console.instance().error('Broken formatter: object reference must contain exactly two elements');
-      return document.createElement('span');
+      return html`<span></span>`;
     }
     return this.layoutObjectTag(jsonML);
   }
 
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private renderElement(object: any[]): Node {
-    const tagName = object.shift();
+  private renderElement(object: any[]): LitTemplate {
+    const it = object[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!');
-      return document.createElement('span');
+      return html`<span></span>`;
     }
-    const element = document.createElement((tagName as string));
-    if ((typeof object[0] === 'object') && !Array.isArray(object[0])) {
-      const attributes = object.shift();
+
+    let next = it.next();
+    const stylePropertyMap: Record<string, string> = {};
+    if (typeof next.value === 'object' && !Array.isArray(next.value) && next.value !== null) {
+      const attributes = next.value as Record<string, string>;
       for (const key in attributes) {
         const value = attributes[key];
         if ((key !== 'style') || (typeof value !== 'string')) {
@@ -113,37 +137,55 @@ export class CustomPreviewSection {
         const sanitizedStyle = new Map<string, {value: string, priority: string}>();
         sanitizeStyle(sanitizedStyle, value);
         for (const [property, {value: propertyValue, priority}] of sanitizedStyle) {
-          element.style.setProperty(property, propertyValue, priority);
+          stylePropertyMap[property] = priority ? `${propertyValue} !${priority}` : propertyValue;
         }
       }
+      next = it.next();
     }
 
-    this.appendJsonMLTags(element, object);
-    return element;
+    const children: LitTemplate[] = [];
+    while (!next.done) {
+      children.push(this.renderJSONMLTag(next.value));
+      next = it.next();
+    }
+    const style = Directives.styleMap(stylePropertyMap);
+
+    switch (tagName) {
+      case 'span':
+        return html`<span style=${style}>${children}</span>`;
+      case 'div':
+        return html`<div style=${style}>${children}</div>`;
+      case 'ol':
+        return html`<ol style=${style}>${children}</ol>`;
+      case 'li':
+        return html`<li style=${style}>${children}</li>`;
+      case 'table':
+        return html`<table style=${style}>${children}</table>`;
+      case 'tr':
+        return html`<tr style=${style}>${children}</tr>`;
+      case 'td':
+        return html`<td style=${style}>${children}</td>`;
+      default:
+        return html`<span>${children}</span>`;
+    }
   }
 
-  private layoutObjectTag(objectTag: unknown[]): Node {
-    objectTag.shift();
-    const attributes = objectTag.shift();
+  private layoutObjectTag(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));
     if (remoteObject.customPreview()) {
-      return (new CustomPreviewSection(remoteObject)).element();
+      return html`${(new CustomPreviewSection(remoteObject)).element()}`;
     }
 
-    const sectionElement = defaultObjectPresentation(remoteObject);
-    sectionElement.classList.toggle('custom-expandable-section-standard-section', remoteObject.hasChildren);
-    return sectionElement;
-  }
-
-  private appendJsonMLTags(parentElement: Node, jsonMLTags: unknown[]): void {
-    for (let i = 0; i < jsonMLTags.length; ++i) {
-      parentElement.appendChild(this.renderJSONMLTag(jsonMLTags[i]));
-    }
+    return defaultObjectPresentation(remoteObject, undefined, undefined, undefined,
+                                     {'custom-expandable-section-standard-section': remoteObject.hasChildren});
   }
 
   private onClick(event: Event): void {
     event.consume(true);
-    if (this.cachedContent) {
+    if (this.cachedContent !== undefined) {
       this.toggleExpand();
     } else {
       void this.loadBody();
@@ -152,21 +194,8 @@ export class CustomPreviewSection {
 
   private toggleExpand(): void {
     this.expanded = !this.expanded;
-    if (this.header instanceof Element) {
-      this.header.classList.toggle('expanded', this.expanded);
-    }
-    if (this.cachedContent instanceof Element) {
-      this.cachedContent.classList.toggle('hidden', !this.expanded);
-    }
-    if (this.expandIcon) {
-      if (this.expanded) {
-        this.expandIcon.name = 'triangle-down';
-      } else {
-        this.expandIcon.name = 'triangle-right';
-      }
-    }
+    this.render();
   }
-  private defaultBodyTreeOutline: ObjectPropertiesSectionsTreeOutline|undefined;
 
   async loadBody(): Promise<void> {
     const customPreview = this.object.customPreview();
@@ -181,23 +210,18 @@ export class CustomPreviewSection {
       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`.
-        this.defaultBodyTreeOutline = new ObjectPropertiesSectionsTreeOutline();
-        this.defaultBodyTreeOutline.setShowSelectionOnKeyboardFocus(/* show */ true, /* preventTabOrder */ false);
-        this.defaultBodyTreeOutline.element.classList.add('custom-expandable-section-default-body');
-        void ObjectPropertyTreeElement.populate(
-            this.defaultBodyTreeOutline.rootElement(), new ObjectTree(this.object, {
-              readOnly: true,
-              propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
-            }),
-            false, false);
-
-        this.cachedContent = this.defaultBodyTreeOutline.element;
+        const objectTree = new ObjectTree(this.object, {
+          readOnly: true,
+          propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+        });
+        objectTree.expanded = true;
+        this.cachedContent = objectTree;
       } else {
-        this.cachedContent = this.renderJSONMLTag(bodyJsonML);
+        this.cachedContent = bodyJsonML;
       }
 
-      this.sectionElement.appendChild(this.cachedContent);
-      this.toggleExpand();
+      this.expanded = true;
+      this.render();
     }
   }
 }
@@ -240,14 +264,8 @@ export class CustomPreviewComponent {
     if (this.element.shadowRoot) {
       this.element.shadowRoot.textContent = '';
       this.customPreviewSection = null;
-      this.element.shadowRoot.appendChild(defaultObjectPresentation(this.object));
+      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+      render(defaultObjectPresentation(this.object), this.element.shadowRoot);
     }
   }
 }
-
-function defaultObjectPresentation(object: SDK.RemoteObject.RemoteObject): Element {
-  const element = document.createElement('span');
-  // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-  render(defaultObjectPresentationTemplate(object), element);
-  return element;
-}

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

@@ -1638,20 +1638,22 @@ export function renderPropertyValue(value: SDK.RemoteObject.RemoteObject, wasThr
 
 export function defaultObjectPresentation(objectOrTree: SDK.RemoteObject.RemoteObject|ObjectTree,
                                           linkifier?: Components.Linkifier.Linkifier, skipProto?: boolean,
-                                          readOnly?: boolean): LitTemplate {
+                                          readOnly?: boolean, extraClasses?: Record<string, boolean>): LitTemplate {
   const objectTree = objectOrTree instanceof ObjectTree ? objectOrTree : new ObjectTree(objectOrTree, {
     readOnly: Boolean(readOnly),
     propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
   });
   const object = objectTree.object;
-  const title = html`<span class="source-code"><style>${objectValueStyles}</style>${
-      renderPropertyValue(object, /* wasThrown= */ false, /* showPreview= */ true)}</span>`;
+  const title = html`<span class=${
+      classMap({'source-code': true, ...(!object.hasChildren ? extraClasses : undefined)})}><style>${
+      objectValueStyles}</style>${renderPropertyValue(object, /* wasThrown= */ false, /* showPreview= */ true)}</span>`;
   if (!object.hasChildren) {
     return title;
   }
-  return html`${
-      widget(ObjectPropertiesSectionWidget,
-             {objectTree, title, linkifier, skipProto: !!skipProto, showOverflow: !readOnly})}`;
+  return html`<devtools-widget class=${classMap(extraClasses ?? {})} ${
+      widget(
+          ObjectPropertiesSectionWidget,
+          {objectTree, title, linkifier, skipProto: Boolean(skipProto), showOverflow: !readOnly})}></devtools-widget>`;
 }
 
 /**

package/front_end/ui/legacy/components/object_ui/objectPopover.css

@@ -23,13 +23,13 @@
   white-space: nowrap;
   font-weight: bold;
   padding-left: 18px;
-  padding-bottom: 2px;
+  padding-bottom: var(--sys-size-2);
   padding-top: var(--sys-size-3);
   flex-shrink: 0;
 }
 
 .object-popover-tree {
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
   overflow: auto;
   width: 100%;
   height: calc(100% - 13px);
@@ -40,11 +40,11 @@
 }
 
 .object-popover-description-box {
-  padding: 6px;
+  padding: var(--sys-size-4);
   max-width: 350px;
   line-height: 1.4;
 }
 
 .object-popover-footer {
-  margin-top: 8px;
+  margin-top: var(--sys-size-5);
 }

package/front_end/ui/legacy/components/object_ui/objectPropertiesSection.css

@@ -27,14 +27,14 @@ li.object-properties-section  {
 
   &::before {
     flex-shrink: 0;
-    margin-right: 2px;
+    margin-right: var(--sys-size-2);
     align-self: flex-start;
   }
 }
 
 .object-properties-section li.editing-sub-part {
-  padding: 3px 12px 8px 6px;
-  margin: -1px -6px -8px;
+  padding: 3px var(--sys-size-6) var(--sys-size-5) var(--sys-size-4);
+  margin: calc(-1 * var(--sys-size-1)) calc(-1 * var(--sys-size-4)) calc(-1 * var(--sys-size-5));
   text-overflow: clip;
 }
 
@@ -69,7 +69,7 @@ li.object-properties-section  {
 }
 
 .name-and-value {
-  line-height: 16px;
+  line-height: var(--sys-size-8);
   display: flex;
   white-space: nowrap;
 }
@@ -85,7 +85,7 @@ li.object-properties-section  {
 }
 
 .property-prompt {
-  margin-left: 4px;
+  margin-left: var(--sys-size-3);
 }
 
 .tree-outline.hide-selection-when-blurred .selected:focus-visible {
@@ -97,7 +97,7 @@ li.object-properties-section  {
 .tree-outline.hide-selection-when-blurred .selected:focus-visible .name-and-value,
 .tree-outline.hide-selection-when-blurred .selected:focus-visible .gray-info-message {
   background: var(--sys-color-state-focus-highlight);
-  border-radius: 2px;
+  border-radius: var(--sys-size-2);
 }
 
 @media (forced-colors: active) {