chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

package/front_end/panels/css_overview/cssOverviewCompletedView.css

@@ -8,8 +8,8 @@
   .overview-completed-view {
     overflow: auto;
 
-    --overview-default-padding: 28px;
-    --overview-icon-padding: 32px;
+    --overview-default-padding: var(--sys-size-12);
+    --overview-icon-padding: var(--sys-size-13);
   }
 
   .overview-completed-view .summary ul,
@@ -24,13 +24,13 @@
   .overview-completed-view .summary ul {
     display: grid;
     grid-template-columns: repeat(auto-fill, 140px);
-    gap: 16px;
+    gap: var(--sys-size-8);
   }
 
   .overview-completed-view .colors ul li {
     display: inline-block;
-    margin: 0 0 16px;
-    padding: 0 8px 0 0;
+    margin: 0 0 var(--sys-size-8);
+    padding: 0 var(--sys-size-5) 0 0;
   }
 
   .overview-completed-view .summary ul li {
@@ -40,8 +40,8 @@
   }
 
   .overview-completed-view li .label {
-    font-size: 12px;
-    padding-bottom: 2px;
+    font-size: var(--sys-typescale-body4-size);
+    padding-bottom: var(--sys-size-2);
   }
 
   .overview-completed-view li .value {
@@ -85,17 +85,17 @@
     width: 65px;
     height: 25px;
     border-radius: 3px;
-    margin-right: 16px;
+    margin-right: var(--sys-size-8);
 
     &:focus-visible {
-      outline: 2px solid var(--sys-color-state-focus-ring);
-      outline-offset: 2px;
+      outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+      outline-offset: var(--sys-size-2);
     }
   }
 
   .block-title {
-    padding-top: 4px;
-    font-size: 12px;
+    padding-top: var(--sys-size-3);
+    font-size: var(--sys-typescale-body4-size);
     color: var(--sys-color-on-surface);
     letter-spacing: 0;
     text-transform: uppercase;
@@ -113,7 +113,7 @@
 
   .results-section {
     flex-shrink: 0;
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     padding: var(--overview-default-padding) 0 var(--overview-default-padding) 0;
   }
 
@@ -126,7 +126,7 @@
     font-size: 15px;
     font-weight: normal;
     padding: 0;
-    margin: 0 0 20px;
+    margin: 0 0 var(--sys-size-9);
     padding-left: calc(var(--overview-default-padding) + var(--overview-icon-padding));
     position: relative;
     height: 26px;
@@ -179,8 +179,8 @@
   }
 
   .results-section.colors h2 {
-    margin-top: 20px;
-    font-size: 13px;
+    margin-top: var(--sys-size-9);
+    font-size: var(--sys-typescale-body3-size);
     font-weight: normal;
   }
 
@@ -198,8 +198,8 @@
   .overview-completed-view .unused-declarations ul li {
     display: grid;
     grid-template-columns: 2fr 3fr;
-    gap: 12px;
-    margin-bottom: 4px;
+    gap: var(--sys-size-6);
+    margin-bottom: var(--sys-size-3);
     align-items: center;
   }
 
@@ -208,7 +208,7 @@
   .overview-completed-view .unused-declarations button .details {
     min-width: 100px;
     text-align: right;
-    margin-right: 8px;
+    margin-right: var(--sys-size-5);
     color: var(--sys-color-primary);
     pointer-events: none;
   }
@@ -223,10 +223,10 @@
   .overview-completed-view .font-info button .bar,
   .overview-completed-view .media-queries button .bar,
   .overview-completed-view .unused-declarations button .bar {
-    height: 8px;
+    height: var(--sys-size-5);
     background: var(--sys-color-primary-bright);
-    border-radius: 2px;
-    min-width: 2px;
+    border-radius: var(--sys-size-2);
+    min-width: var(--sys-size-2);
   }
 
   .overview-completed-view .font-info button,
@@ -238,17 +238,17 @@
     margin: 0;
     display: flex;
     align-items: center;
-    border-radius: 2px;
+    border-radius: var(--sys-size-2);
     cursor: pointer;
-    height: 28px;
+    height: var(--sys-size-12);
     background: none;
 
     &:focus-visible {
-      outline: 2px solid var(--sys-color-state-focus-ring);
+      outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
     }
 
     &:hover {
-      border-radius: 12px;
+      border-radius: var(--sys-shape-corner-medium-small);
       background: var(--sys-color-state-hover-on-subtle);
     }
 
@@ -267,7 +267,7 @@
   .overview-completed-view .font-info .font-metric {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: 12px;
+    gap: var(--sys-size-6);
   }
 
   .overview-completed-view .font-info ul {
@@ -279,13 +279,13 @@
   }
 
   .overview-completed-view .font-info h2 {
-    font-size: 14px;
+    font-size: var(--sys-typescale-body2-size);
     font-weight: bold;
     margin: 0 0 1em;
   }
 
   .overview-completed-view .font-info h3 {
-    font-size: 13px;
+    font-size: var(--sys-typescale-body3-size);
     font-weight: normal;
     font-style: italic;
     margin: 0 0 0.5em;
@@ -310,7 +310,7 @@
   .contrast-warning {
     display: flex;
     align-items: center;
-    margin-top: 2px;
+    margin-top: var(--sys-size-2);
   }
 
   .contrast-warning .threshold-label {
@@ -319,7 +319,7 @@
   }
 
   .contrast-warning devtools-icon {
-    margin-left: 2px;
+    margin-left: var(--sys-size-2);
   }
 
   .contrast-preview {
@@ -338,7 +338,7 @@
 
   ::part(node-id-column) {
     align-items: center;
-    height: 20px;
+    height: var(--sys-size-9);
 
     --show-element-display: none;
   }
@@ -350,8 +350,8 @@
 
   ::part(show-element) {
     display: var(--show-element-display);
-    height: 16px;
-    width: 16px;
+    height: var(--sys-size-8);
+    width: var(--sys-size-8);
   }
 
   .results-section.colors {

package/front_end/panels/css_overview/cssOverviewProcessingView.css

@@ -6,24 +6,24 @@
 
 .overview-processing-view {
   overflow: hidden;
-  padding: 16px;
+  padding: var(--sys-size-8);
   justify-content: center;
   align-items: center;
   height: 100%;
 }
 
 .overview-processing-view h1 {
-  font-size: 16px;
+  font-size: var(--sys-typescale-body1-size);
   text-align: center;
   font-weight: normal;
   margin: 0;
-  padding: 8px;
+  padding: var(--sys-size-5);
 }
 
 .overview-processing-view h2 {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   text-align: center;
   font-weight: normal;
   margin: 0;
-  padding-top: 32px;
+  padding-top: var(--sys-size-13);
 }

package/front_end/panels/css_overview/cssOverviewSidebarPanel.css

@@ -34,7 +34,7 @@
   }
 
   .overview-toolbar {
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     flex: 0 0 auto;
   }
 

package/front_end/panels/css_overview/cssOverviewStartView.css

@@ -10,7 +10,7 @@
   }
 
   .css-overview-start-view {
-    padding: 24px;
+    padding: var(--sys-size-11);
     display: flex;
     flex-direction: column;
     background-color: var(--sys-color-cdt-base-container);
@@ -22,22 +22,22 @@
   }
 
   .preview-feature {
-    padding: 12px 16px;
-    border: 1px solid var(--sys-color-neutral-outline);
+    padding: var(--sys-size-6) var(--sys-size-8);
+    border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
     color: var(--sys-color-on-surface);
-    font-size: 13px;
-    line-height: 20px;
-    border-radius: 12px;
+    font-size: var(--sys-typescale-body3-size);
+    line-height: var(--sys-typescale-body3-line-height);
+    border-radius: var(--sys-shape-corner-medium-small);
     margin: 42px 0;
     letter-spacing: 0.01em;
   }
 
   .preview-header {
     color: var(--sys-color-primary);
-    font-size: 13px;
-    line-height: 20px;
+    font-size: var(--sys-typescale-body3-size);
+    line-height: var(--sys-typescale-body3-line-height);
     letter-spacing: 0.01em;
-    margin: 9px 0 14px;
+    margin: 9px 0 var(--sys-size-7);
   }
 
   .preview-icon {
@@ -45,7 +45,7 @@
   }
 
   .feedback-prompt {
-    margin-bottom: 24px;
+    margin-bottom: var(--sys-size-11);
   }
 
   .feedback-prompt .devtools-link {
@@ -60,17 +60,17 @@
   }
 
   .thumbnail-wrapper {
-    width: 144px;
+    width: var(--sys-size-22);
     height: 92px;
-    margin-right: 20px;
+    margin-right: var(--sys-size-9);
   }
 
   .video-doc-header {
-    font-size: 13px;
-    line-height: 20px;
+    font-size: var(--sys-typescale-body3-size);
+    line-height: var(--sys-typescale-body3-line-height);
     letter-spacing: 0.04em;
     color: var(--sys-color-on-surface);
-    margin-bottom: 2px;
+    margin-bottom: var(--sys-size-2);
   }
 
   devtools-feedback-button {
@@ -78,8 +78,8 @@
   }
 
   .resources .devtools-link {
-    font-size: 14px;
-    line-height: 22px;
+    font-size: var(--sys-typescale-body2-size);
+    line-height: var(--sys-size-10);
     letter-spacing: 0.04em;
     text-decoration-line: underline;
     color: var(--sys-color-primary);

package/front_end/panels/elements/AdoptedStyleSheetTreeElement.ts

@@ -2,17 +2,22 @@
 // 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 type * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 import * as Components from '../../ui/legacy/components/utils/utils.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 {PanelUtils} from '../utils/utils.js';
 
 import type {EditorHandles} from './ElementsTreeElement.js';
 
+const {Directives: {ref}, html, render} = Lit;
+
 export class AdoptedStyleSheetSetTreeElement extends UI.TreeOutline.TreeElement {
   constructor(readonly adoptedStyleSheets: SDK.DOMModel.AdoptedStyleSheet[]) {
     super('');
@@ -70,112 +75,254 @@ export class AdoptedStyleSheetTreeElement extends UI.TreeOutline.TreeElement {
 }
 
 export class AdoptedStyleSheetContentsTreeElement extends UI.TreeOutline.TreeElement {
-  private editing: EditorHandles|null = null;
+  readonly widget: AdoptedStyleSheetContentsWidget;
+  private readonly widgetWrapper: HTMLElement;
 
-  constructor(private readonly styleSheetHeader: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader) {
+  constructor(styleSheetHeader: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader) {
     super('');
+    this.widgetWrapper = document.createElement('div');
+    this.widgetWrapper.style.display = 'contents';
+    this.title = this.widgetWrapper;
+
+    this.widget = new AdoptedStyleSheetContentsWidget();
+    this.widget.styleSheetHeader = styleSheetHeader;
+    this.widget.element.classList.remove('vbox', 'flex-auto');
+    this.widget.element.style.display = 'contents';
+    this.widget.markAsRoot();
+    this.widget.show(this.widgetWrapper);
   }
 
   override onbind(): void {
-    this.styleSheetHeader.cssModel().addEventListener(
-        SDK.CSSModel.Events.StyleSheetChanged, this.onStyleSheetChanged, this);
-    void this.onpopulate();
+    if (!this.widget.isShowing()) {
+      this.widget.show(this.widgetWrapper);
+    }
   }
 
   override onunbind(): void {
-    if (this.editing) {
-      this.editing.cancel();
-    }
-    this.styleSheetHeader.cssModel().removeEventListener(
-        SDK.CSSModel.Events.StyleSheetChanged, this.onStyleSheetChanged, this);
+    this.widget.detach();
   }
 
   override async onpopulate(): Promise<void> {
-    const data = await this.styleSheetHeader.requestContentData();
-    if (!TextUtils.ContentData.ContentData.isError(data) && data.isTextContent) {
-      this.listItemElement.removeChildren();
-      const newNode = this.listItemElement.createChild('span', 'webkit-html-text-node webkit-html-css-node');
-      newNode.setAttribute('jslog', `${VisualLogging.value('css-text-node').track({change: true, dblclick: true})}`);
-      const text = data.text;
-      newNode.textContent = text.replace(/^[\n\r]+|\s+$/g, '');
-      void CodeHighlighter.CodeHighlighter.highlightNode(newNode, 'text/css');
-    }
-  }
-
-  onStyleSheetChanged({data: {styleSheetId}}: Common.EventTarget.EventTargetEvent<SDK.CSSModel.StyleSheetChangedEvent>):
-      void {
-    if (styleSheetId === this.styleSheetHeader.id) {
-      void this.onpopulate();
+    if (!this.widget.text) {
+      await this.widget.fetchContent();
     }
+    this.widget.requestUpdate();
+    await this.widget.updateComplete;
   }
 
   override ondblclick(event: Event): boolean {
-    if (this.editing) {
+    if (this.widget.isEditing()) {
       return false;
     }
-    void this.startEditing(event.target as Element);
+    this.widget.startEditing(event.target as Element);
     return false;
   }
 
   override onenter(): boolean {
-    if (this.editing) {
+    if (this.widget.isEditing()) {
       return false;
     }
-    const target = this.listItemElement.querySelector('.webkit-html-text-node');
-    if (target) {
-      void this.startEditing(target);
-      return true;
-    }
-    return false;
+    void this.widget.startEditing();
+    return true;
   }
 
-  private async startEditing(target: Element): Promise<void> {
-    if (this.editing || UI.UIUtils.isBeingEdited(target)) {
-      return;
-    }
+  isEditing(): boolean {
+    return this.widget.isEditing();
+  }
+}
+
+export interface AdoptedStyleSheetContentsViewInput {
+  text: string;
+  isEditing: boolean;
+  onDblClick: (event: MouseEvent) => void;
+}
+
+export type AdoptedStyleSheetContentsView =
+    (input: AdoptedStyleSheetContentsViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_ADOPTED_STYLESHEET_CONTENTS_VIEW: AdoptedStyleSheetContentsView =
+    (input: AdoptedStyleSheetContentsViewInput, _output: undefined, target: HTMLElement): void => {
+      const highlightNode = ref(el => {
+        if (el) {
+          el.textContent = input.text;
+          void CodeHighlighter.CodeHighlighter.highlightNode(el, 'text/css');
+        }
+      });
+      // clang-format off
+      render(html`
+        <span class="webkit-html-text-node webkit-html-css-node"
+              jslog=${VisualLogging.value('css-text-node').track({
+                change: true,
+                dblclick: true,
+              })}
+              ${highlightNode}
+              @dblclick=${input.onDblClick}></span>
+      `, target);
+      // clang-format on
+    };
+
+export class AdoptedStyleSheetContentsWidget extends UI.Widget.Widget {
+  #styleSheetHeader?: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader;
+  #text = '';
+  #fetchContentPromise: Promise<void>|null = null;
+  #editing: EditorHandles|null = null;
+  #view: AdoptedStyleSheetContentsView;
+
+  constructor(element?: HTMLElement, view: AdoptedStyleSheetContentsView = DEFAULT_ADOPTED_STYLESHEET_CONTENTS_VIEW) {
+    super(element, {useShadowDom: false});
+    this.#view = view;
+  }
+
+  get text(): string {
+    return this.#text;
+  }
 
-    const textNode = target.enclosingNodeOrSelfWithClass('webkit-html-text-node');
-    if (!textNode) {
+  set styleSheetHeader(header: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader|undefined) {
+    if (this.#styleSheetHeader === header) {
       return;
     }
+    if (this.#styleSheetHeader) {
+      this.#styleSheetHeader.cssModel().removeEventListener(SDK.CSSModel.Events.StyleSheetChanged,
+                                                            this.#onStyleSheetChanged, this);
+    }
+    this.#styleSheetHeader = header;
+    this.#text = '';
+    if (this.isShowing() && this.#styleSheetHeader) {
+      this.#styleSheetHeader.cssModel().addEventListener(SDK.CSSModel.Events.StyleSheetChanged,
+                                                         this.#onStyleSheetChanged, this);
+      void this.fetchContent();
+    }
+  }
 
-    const data = await this.styleSheetHeader.requestContentData();
-    textNode.textContent = (TextUtils.ContentData.ContentData.isError(data) || !data.isTextContent) ? '' : data.text;
+  get styleSheetHeader(): SDK.CSSStyleSheetHeader.CSSStyleSheetHeader|undefined {
+    return this.#styleSheetHeader;
+  }
 
-    const config =
-        new UI.InplaceEditor.Config(this.editingCommitted.bind(this), () => this.editingCancelled(), undefined);
+  override wasShown(): void {
+    super.wasShown();
+    if (this.#styleSheetHeader) {
+      this.#styleSheetHeader.cssModel().addEventListener(SDK.CSSModel.Events.StyleSheetChanged,
+                                                         this.#onStyleSheetChanged, this);
+      if (!this.#text) {
+        void this.fetchContent();
+      }
+    }
+  }
 
-    const editorHandles = UI.InplaceEditor.InplaceEditor.startEditing(textNode, config);
-    if (!editorHandles) {
+  override willHide(): void {
+    super.willHide();
+    if (this.#editing) {
+      this.#editing.cancel();
+      this.#editing = null;
+    }
+    if (this.#styleSheetHeader) {
+      this.#styleSheetHeader.cssModel().removeEventListener(SDK.CSSModel.Events.StyleSheetChanged,
+                                                            this.#onStyleSheetChanged, this);
+    }
+  }
+
+  async fetchContent(): Promise<void> {
+    const header = this.#styleSheetHeader;
+    if (!header) {
       return;
     }
+    if (this.#fetchContentPromise) {
+      return await this.#fetchContentPromise;
+    }
+    this.#fetchContentPromise = (async () => {
+      try {
+        const data = await header.requestContentData();
+        if (!TextUtils.ContentData.ContentData.isError(data) && data.isTextContent) {
+          this.#text = data.text.replace(/^[\n\r]+|\s+$/g, '');
+          this.requestUpdate();
+        }
+      } finally {
+        this.#fetchContentPromise = null;
+      }
+    })();
+    return await this.#fetchContentPromise;
+  }
+
+  #onStyleSheetChanged({data: {styleSheetId}}:
+                           Common.EventTarget.EventTargetEvent<SDK.CSSModel.StyleSheetChangedEvent>): void {
+    if (styleSheetId === this.#styleSheetHeader?.id) {
+      void this.fetchContent();
+    }
+  }
 
-    this.editing = {
-      commit: editorHandles.commit,
-      cancel: editorHandles.cancel,
+  startEditing(target?: Element): void {
+    if (this.#editing || !this.#styleSheetHeader) {
+      return;
+    }
+    const textNode = (target ? (target as HTMLElement).enclosingNodeOrSelfWithClass('webkit-html-text-node') : null) ??
+        this.contentElement.querySelector('.webkit-html-text-node');
+    if (!textNode || UI.UIUtils.isBeingEdited(textNode)) {
+      return;
+    }
+    const dummyEditorHandles: EditorHandles = {
+      commit: () => {},
+      cancel: () => {},
       resize: () => {},
     };
+    this.#editing = dummyEditorHandles;
 
-    const componentSelection = this.listItemElement.getComponentSelection();
-    componentSelection?.selectAllChildren(textNode);
-  }
+    void (async () => {
+      if (!this.#styleSheetHeader) {
+        this.#editing = null;
+        return;
+      }
+      const data = await this.#styleSheetHeader.requestContentData();
+      textNode.textContent = (TextUtils.ContentData.ContentData.isError(data) || !data.isTextContent) ? '' : data.text;
 
-  private async editingCommitted(element: Element, newText: string, oldText: string|null): Promise<void> {
-    this.editing = null;
+      const config = new UI.InplaceEditor.Config(
+          (element, newText, oldText) => this.#editingCommitted(element, newText, oldText),
+          () => this.#editingCancelled(),
+          undefined,
+      );
+      const editorHandles = UI.InplaceEditor.InplaceEditor.startEditing(textNode, config);
+      if (!editorHandles) {
+        this.#editing = null;
+        return;
+      }
+      this.#editing = {
+        commit: editorHandles.commit,
+        cancel: editorHandles.cancel,
+        resize: () => {},
+      };
+      const selection = this.contentElement.getComponentSelection();
+      selection?.selectAllChildren(textNode);
+    })();
+  }
 
-    if (newText !== oldText) {
-      await this.styleSheetHeader.cssModel().setStyleSheetText(this.styleSheetHeader.id, newText, false);
+  async #editingCommitted(_element: Element, newText: string, oldText: string|null): Promise<void> {
+    this.#editing = null;
+    if (newText !== oldText && this.#styleSheetHeader) {
+      await this.#styleSheetHeader.cssModel().setStyleSheetText(this.#styleSheetHeader.id, newText, false);
     }
-
-    this.editingCancelled();
+    this.#editingCancelled();
   }
 
-  private editingCancelled(): void {
-    this.editing = null;
-    void this.onpopulate();
+  #editingCancelled(): void {
+    this.#editing = null;
+    void this.fetchContent();
   }
 
   isEditing(): boolean {
-    return this.editing !== null;
+    return this.#editing !== null;
+  }
+
+  override performUpdate(): void {
+    if (this.isEditing()) {
+      return;
+    }
+    this.#view({
+      text: this.#text,
+      isEditing: this.isEditing(),
+      onDblClick: (event: MouseEvent) => {
+        event.stopPropagation();
+        this.startEditing(event.target as Element);
+      },
+    },
+               undefined, this.contentElement);
   }
 }

package/front_end/panels/elements/ColorSwatchPopoverIcon.ts

@@ -260,10 +260,10 @@ export class ColorSwatchPopoverIcon extends Common.ObjectWrapper.ObjectWrapper<C
         return new Common.Color.Oklab(color.l, color.a, color.b, color.alpha, customProperty);
       }
       if (color.is(Common.Color.Format.SRGB) || color.is(Common.Color.Format.SRGB_LINEAR) ||
-          color.is(Common.Color.Format.DISPLAY_P3) || color.is(Common.Color.Format.A98_RGB) ||
-          color.is(Common.Color.Format.PROPHOTO_RGB) || color.is(Common.Color.Format.REC_2020) ||
-          color.is(Common.Color.Format.XYZ) || color.is(Common.Color.Format.XYZ_D50) ||
-          color.is(Common.Color.Format.XYZ_D65)) {
+          color.is(Common.Color.Format.DISPLAY_P3) || color.is(Common.Color.Format.DISPLAY_P3_LINEAR) ||
+          color.is(Common.Color.Format.A98_RGB) || color.is(Common.Color.Format.PROPHOTO_RGB) ||
+          color.is(Common.Color.Format.REC_2020) || color.is(Common.Color.Format.XYZ) ||
+          color.is(Common.Color.Format.XYZ_D50) || color.is(Common.Color.Format.XYZ_D65)) {
         return new Common.Color.ColorFunction(
             color.colorSpace, color.p0, color.p1, color.p2, color.alpha, customProperty);
       }