chrome-devtools-frontend 1.0.1683520 → 1.0.1689415

package/front_end/ui/legacy/UIUtils.ts

@@ -75,51 +75,51 @@ const {Directives, render} = Lit;
 
 const UIStrings = {
   /**
-   * @description label to open link externally
+   * @description Context menu item to open a link in a new tab.
    */
   openInNewTab: 'Open in new tab',
   /**
-   * @description label to copy link address
+   * @description Context menu item to copy a link address.
    */
   copyLinkAddress: 'Copy link address',
   /**
-   * @description label to copy file name
+   * @description Context menu item to copy a file name.
    */
   copyFileName: 'Copy file name',
   /**
-   * @description label for the profiler control button
+   * @description Warning message shown when attempting to start a profiler while another is already active.
    */
   anotherProfilerIsAlreadyActive: 'Another profiler is already active',
   /**
-   * @description Text in UIUtils
+   * @description Label for a resolved promise in asynchronous call stacks.
    */
   promiseResolvedAsync: 'Promise resolved (async)',
   /**
-   * @description Text in UIUtils
+   * @description Label for a rejected promise in asynchronous call stacks.
    */
   promiseRejectedAsync: 'Promise rejected (async)',
   /**
-   * @description Text for the title of asynchronous function calls group in Call Stack
+   * @description Title for a group of asynchronous function calls in the call stack.
    */
-  asyncCall: 'Async Call',
+  asyncCall: 'Async call',
   /**
-   * @description Text for the name of anonymous functions
+   * @description Fallback name for anonymous functions in the call stack.
    */
   anonymous: '(anonymous)',
   /**
-   * @description Text to close something
+   * @description Tooltip text and accessible label for a close button.
    */
   close: 'Close',
   /**
-   * @description Text on a button for message dialog
+   * @description Button text for confirming an action in a dialog.
    */
   ok: 'OK',
   /**
-   * @description Text to cancel something
+   * @description Button text for canceling an action in a dialog.
    */
   cancel: 'Cancel',
   /**
-   * @description Text for the new badge appearing next to some menu items
+   * @description Text for a badge highlighting a new feature next to menu items.
    */
   new: 'NEW',
 } as const;
@@ -1046,14 +1046,18 @@ export function createHistoryInput(type = 'search', className?: string): HTMLInp
 
   function onKeydown(event: KeyboardEvent): void {
     if (event.keyCode === Keys.Up.code) {
-      historyPosition = Math.max(historyPosition - 1, 0);
-      historyInput.value = history[historyPosition];
-      historyInput.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
+      if (historyPosition > 0) {
+        historyPosition--;
+        historyInput.value = history[historyPosition];
+        historyInput.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
+      }
       event.consume(true);
     } else if (event.keyCode === Keys.Down.code) {
-      historyPosition = Math.min(historyPosition + 1, history.length - 1);
-      historyInput.value = history[historyPosition];
-      historyInput.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
+      if (historyPosition < history.length - 1) {
+        historyPosition++;
+        historyInput.value = history[historyPosition];
+        historyInput.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
+      }
       event.consume(true);
     } else if (event.keyCode === Keys.Enter.code) {
       if (history.length > 1 && history[history.length - 2] === historyInput.value) {
@@ -1985,16 +1989,76 @@ export const cloneCustomElement = <T extends HTMLElement>(element: T, deep?: boo
 };
 
 class UIUtilsWidgetDirective extends WidgetUtils.WidgetDirective {
-  override update(part: Lit.Directive.Part, args: Parameters<WidgetUtils.WidgetDirective['render']>): unknown {
-    const result = super.update(part, args as unknown as Parameters<this['render']>);
+  #renderedElement?: HTMLElement;
+  #lastWidgetClass?: unknown;
+  #lastKey?: unknown;
+
+  override update(part: Lit.Directive.Part, args: Parameters<this['render']>): unknown {
+    const [widgetClass, widgetParams] = args;
+
     if (part.type === Lit.Directive.PartType.ELEMENT) {
-      const lightNode = (part as Lit.Directive.ElementPart).element;
-      for (const clone of HTMLElementWithLightDOMTemplate.getClones(lightNode)) {
-        super.update({type: Lit.Directive.PartType.ELEMENT, element: clone} as Lit.Directive.ElementPart,
-                     args as unknown as Parameters<this['render']>);
+      const element = (part as Lit.Directive.ElementPart).element as HTMLElement;
+      this.#updateElementAndClones(element, widgetClass, widgetParams);
+      return Lit.nothing;
+    }
+
+    if (part.type === Lit.Directive.PartType.CHILD) {
+      let classChanged = false;
+      if (this.#lastWidgetClass !== widgetClass) {
+        this.#lastWidgetClass = widgetClass;
+        const newKey =
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            WidgetUtils.Widget.isPrototypeOf(widgetClass as any) ? widgetClass : (widgetClass as any).toString();
+        if (this.#lastKey !== newKey) {
+          this.#lastKey = newKey;
+          classChanged = true;
+        }
+      }
+
+      if (!this.#renderedElement || classChanged) {
+        // Initial render or class changed: cache the element
+        this.#renderedElement = document.createElement('devtools-widget');
+        this.#updateElementAndClones(this.#renderedElement, widgetClass, widgetParams);
+        return this.#renderedElement;
       }
+      // Subsequent updates: mutate cached element and its clones
+      this.#updateElementAndClones(this.#renderedElement, widgetClass, widgetParams);
+      return Lit.noChange;  // Prevent Lit from recreating the DOM node
+    }
+
+    return super.update(part, args);
+  }
+
+  #updateElementAndClones<F extends WidgetUtils.WidgetFactory<WidgetUtils.AnyWidget>,
+                                    ParamKeys extends keyof WidgetUtils.InferWidgetTFromFactory<F>>(
+      element: HTMLElement, widgetClass: F,
+      widgetParams?: Pick<WidgetUtils.InferWidgetTFromFactory<F>, ParamKeys>&
+      Partial<WidgetUtils.InferWidgetTFromFactory<F>>): void {
+    const update = (el: HTMLElement): void => {
+      const config = WidgetUtils.widgetConfig<F, ParamKeys>(widgetClass, widgetParams);
+      const oldConfig = WidgetUtils.widgetConfigs.get(el);
+      const widget = WidgetUtils.Widget.get(el);
+      if (widget && config.widgetParams) {
+        let needsUpdate = false;
+        for (const key in config.widgetParams) {
+          if (Object.prototype.hasOwnProperty.call(config.widgetParams, key) &&
+              config.widgetParams[key] !== oldConfig?.widgetParams?.[key]) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (widget as any)[key] = config.widgetParams[key];
+            needsUpdate = true;
+          }
+        }
+        if (needsUpdate) {
+          widget.requestUpdate();
+        }
+      }
+      WidgetUtils.registerWidgetConfig(el, config);
+    };
+
+    update(element);
+    for (const clone of HTMLElementWithLightDOMTemplate.getClones(element)) {
+      update(clone as HTMLElement);
     }
-    return result;
   }
 }
 

package/front_end/ui/legacy/ViewManager.ts

@@ -39,7 +39,7 @@ import {type AnyWidget, VBox, type Widget} from './Widget.js';
 
 const UIStrings = {
   /**
-   * @description Aria label for the tab panel view container
+   * @description Accessible label for a panel view container.
    * @example {Sensors} PH1
    */
   sPanel: '{PH1} panel',

package/front_end/ui/legacy/ViewRegistration.ts

@@ -12,31 +12,31 @@ import type {AnyWidget} from './Widget.js';
 
 const UIStrings = {
   /**
-   * @description Badge label for an entry in the Quick Open menu. Selecting the entry opens the 'Elements' panel.
+   * @description Badge label for an entry in the command menu that opens the Elements panel.
    */
   elements: 'Elements',
   /**
-   * @description Badge label for an entry in the Quick Open menu. Selecting the entry opens the 'Drawer' panel.
+   * @description Badge label for an entry in the command menu that opens the drawer.
    */
   drawer: 'Drawer',
   /**
-   * @description Badge label for an entry in the Quick Open menu. Selecting the entry opens the 'Drawer sidebar' panel.
+   * @description Badge label for an entry in the command menu that opens the drawer sidebar.
    */
   drawer_sidebar: 'Drawer sidebar',
   /**
-   * @description Badge label for an entry in the Quick Open menu. Selecting the entry opens the 'Panel'.
+   * @description Badge label for an entry in the command menu that opens a panel.
    */
   panel: 'Panel',
   /**
-   * @description Badge label for an entry in the Quick Open menu. Selecting the entry opens the 'Network' panel.
+   * @description Badge label for an entry in the command menu that opens the Network panel.
    */
   network: 'Network',
   /**
-   * @description Badge label for an entry in the Quick Open menu. Selecting the entry opens the 'Settings' panel.
+   * @description Badge label for an entry in the command menu that opens the Settings panel.
    */
   settings: 'Settings',
   /**
-   * @description Badge label for an entry in the Quick Open menu. Selecting the entry opens the 'Sources' panel.
+   * @description Badge label for an entry in the command menu that opens the Sources panel.
    */
   sources: 'Sources',
 } as const;

package/front_end/ui/legacy/Widget.ts

@@ -77,11 +77,11 @@ function assert(condition: unknown, message: string): void {
 
 export type AnyWidget = Widget<HTMLElement|DocumentFragment>;
 
-type WidgetConstructor<WidgetT extends AnyWidget> = new (element: HTMLElement, ...args: any[]) => WidgetT;
-type WidgetProducer<WidgetT extends AnyWidget> = (element: HTMLElement, universe?: Foundation.Universe.Universe) =>
-    WidgetT;
-type WidgetFactory<WidgetT extends AnyWidget> = WidgetConstructor<WidgetT>|WidgetProducer<WidgetT>;
-type InferWidgetTFromFactory<F> = F extends WidgetFactory<infer WidgetT>? WidgetT : never;
+export type WidgetConstructor<WidgetT extends AnyWidget> = new (element: HTMLElement, ...args: any[]) => WidgetT;
+export type WidgetProducer<WidgetT extends AnyWidget> =
+    (element: HTMLElement, universe?: Foundation.Universe.Universe) => WidgetT;
+export type WidgetFactory<WidgetT extends AnyWidget> = WidgetConstructor<WidgetT>|WidgetProducer<WidgetT>;
+export type InferWidgetTFromFactory<F> = F extends WidgetFactory<infer WidgetT>? WidgetT : never;
 
 export class WidgetConfig<WidgetT extends AnyWidget> {
   constructor(readonly widgetClass: WidgetFactory<WidgetT>, readonly widgetParams?: Partial<WidgetT>) {

package/front_end/ui/legacy/checkboxTextLabel.css

@@ -15,15 +15,15 @@
 }
 
 input {
-  height: 12px;
-  width: 12px;
+  height: var(--sys-size-6);
+  width: var(--sys-size-6);
   flex-shrink: 0;
   accent-color: var(--sys-color-primary-bright);
   color: var(--sys-color-on-primary);
 }
 
 :host(:not(.small)) input:not(.small) {
-  margin: 6px;
+  margin: var(--sys-size-4);
 }
 
 :host(.inside-datagrid) input {

package/front_end/ui/legacy/components/color_picker/ColorFormatSpec.ts

@@ -165,6 +165,22 @@ export const colorFormatSpec: Record<Exclude<SpectrumColorFormat, Common.Color.F
           return Common.Color.parse(`color(${Common.Color.Format.DISPLAY_P3} ${functionParamsText(values)})`);
         },
   },
+  [Common.Color.Format.DISPLAY_P3_LINEAR]: {
+    label: 'RGBA',
+    toValues: function(color: Common.Color.Color): [string, string, string, string] {
+      const displayP3LinearColor = color.as(Common.Color.Format.DISPLAY_P3_LINEAR);
+      return roundAndStringify([
+        displayP3LinearColor.p0,
+        displayP3LinearColor.p1,
+        displayP3LinearColor.p2,
+        displayP3LinearColor.alpha ?? 1,
+      ] as CanonicalParameters);
+    },
+    fromValues: function(values: [string, string, string, string]): Common.Color.Color |
+        null {
+          return Common.Color.parse(`color(${Common.Color.Format.DISPLAY_P3_LINEAR} ${functionParamsText(values)})`);
+        },
+  },
   [Common.Color.Format.A98_RGB]: {
     label: 'RGBA',
     toValues: function(color: Common.Color.Color): [string, string, string, string] {

package/front_end/ui/legacy/components/color_picker/FormatPickerContextMenu.ts

@@ -46,6 +46,7 @@ export class FormatPickerContextMenu {
       Common.Color.Format.SRGB,
       Common.Color.Format.SRGB_LINEAR,
       Common.Color.Format.DISPLAY_P3,
+      Common.Color.Format.DISPLAY_P3_LINEAR,
       Common.Color.Format.A98_RGB,
       Common.Color.Format.PROPHOTO_RGB,
       Common.Color.Format.REC_2020,