chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

package/front_end/ui/legacy/RemoteDebuggingTerminatedScreen.ts

@@ -13,26 +13,26 @@ import {VBox} from './Widget.js';
 
 const UIStrings = {
   /**
-   * @description Text in a dialog box in DevTools stating that remote debugging has been terminated.
+   * @description Dialog title indicating that the remote debugging connection was closed.
    * "Remote debugging" here means that DevTools on a PC is inspecting a website running on an actual mobile device
    * (see https://developer.chrome.com/docs/devtools/remote-debugging/).
    */
   debuggingConnectionWasClosed: 'Debugging connection was closed',
   /**
-   * @description Text in a dialog box in DevTools stating the reason for remote debugging being terminated.
+   * @description Text in a dialog stating the reason why the remote debugging connection was closed.
    * @example {target_closed} PH1
    */
   connectionClosedReason: 'Reason: {PH1}.',
   /**
-   * @description Text in a dialog box showing how to reconnect to DevTools when remote debugging has been terminated.
+   * @description Instructions in a dialog on how to reconnect remote debugging by reopening DevTools.
    * "Remote debugging" here means that DevTools on a PC is inspecting a website running on an actual mobile device
    * (see https://developer.chrome.com/docs/devtools/remote-debugging/).
-   * "Reconnect when ready", refers to the state of the mobile device. The developer first has to put the mobile
-   * device back in a state where it can be inspected, before DevTools can reconnect to it.
+   * "Reconnect when ready" refers to the state of the mobile device: the developer first has to put the mobile
+   * device back in a state where it can be inspected before DevTools can reconnect to it.
    */
   reconnectWhenReadyByReopening: 'Reconnect when ready by reopening DevTools.',
   /**
-   * @description Text on a button to reconnect Devtools when remote debugging terminated.
+   * @description Button text to reconnect DevTools when remote debugging is terminated.
    * "Remote debugging" here means that DevTools on a PC is inspecting a website running on an actual mobile device
    * (see https://developer.chrome.com/docs/devtools/remote-debugging/).
    */

package/front_end/ui/legacy/SearchableView.ts

@@ -53,72 +53,72 @@ import {VBox} from './Widget.js';
 
 const UIStrings = {
   /**
-   * @description Text on a button to replace one instance with input text for the ctrl+F search bar
+   * @description Button text and placeholder to replace the current search match in the search bar.
    */
   replace: 'Replace',
   /**
-   * @description Tooltip text on a toggle to enable replacing one instance with input text for the ctrl+F search bar
+   * @description Tooltip text and accessible label to enable find and replace in the search bar.
    */
   enableFindAndReplace: 'Find and replace',
   /**
-   * @description Tooltip text on a toggle to disable replacing one instance with input text for the ctrl+F search bar
+   * @description Tooltip text and accessible label to disable find and replace in the search bar.
    */
   disableFindAndReplace: 'Disable find and replace',
   /**
-   * @description Text to find an item
+   * @description Placeholder text for the search input in the search bar.
    */
   findString: 'Find',
   /**
-   * @description Tooltip text on a button to search previous instance for the ctrl+F search bar
+   * @description Tooltip text and accessible label for the show previous result button in the search bar.
    */
   searchPrevious: 'Show previous result',
   /**
-   * @description Tooltip text on a button to search next instance for the ctrl+F search bar
+   * @description Tooltip text and accessible label for the show next result button in the search bar.
    */
   searchNext: 'Show next result',
   /**
-   * @description Tooltip text on a toggle to enable/disable search by matching the exact case.
+   * @description Tooltip text and accessible label for the match case toggle in the search bar.
    */
   matchCase: 'Match case',
   /**
-   * @description Tooltip text on a toggle to enable/disable search by matching the exact word.
+   * @description Tooltip text and accessible label for the match whole word toggle in the search bar.
    */
   matchWholeWord: 'Match whole word',
   /**
-   * @description Tooltip text on a toggle to enable/disable searching with regular expression.
+   * @description Tooltip text and accessible label for the regular expression toggle in the search bar.
    */
   useRegularExpression: 'Use regular expression',
   /**
-   * @description Tooltip text on a button to close the search bar
+   * @description Tooltip text for the close button in the search bar.
    */
   closeSearchBar: 'Close search bar',
   /**
-   * @description Text on a button to replace all instances with input text for the ctrl+F search bar
+   * @description Button text to replace all search matches in the search bar.
    */
   replaceAll: 'Replace all',
   /**
-   * @description Text to indicate the current match index and the total number of matches for the ctrl+F search bar
+   * @description Text showing the current search match index and the total match count in the search bar.
    * @example {2} PH1
    * @example {3} PH2
    */
   dOfD: '{PH1} of {PH2}',
   /**
-   * @description Tooltip text to indicate the current match index and the total number of matches for the ctrl+F search bar
+   * @description Accessible label showing the current search match index and the total match count in the search bar.
    * @example {2} PH1
    * @example {3} PH2
    */
   accessibledOfD: 'Shows result {PH1} of {PH2}',
   /**
-   * @description Text to indicate search result for the ctrl+F search bar
+   * @description Text indicating a single match in the search bar.
    */
   matchString: '1 match',
   /**
-   * @description Text to indicate search result for the ctrl+F search bar
+   * @description Text indicating multiple matches in the search bar.
    * @example {2} PH1
    */
   dMatches: '{PH1} matches',
   /**
-   * @description Text on a button to search previous instance for the ctrl+F search bar
+   * @description Tooltip text and accessible label for the clear input button in the search bar.
    */
   clearInput: 'Clear',
 } as const;

package/front_end/ui/legacy/SoftContextMenu.ts

@@ -18,28 +18,28 @@ import {createTextChild, ElementFocusRestorer} from './UIUtils.js';
 
 const UIStrings = {
   /**
-   * @description Text exposed to screen readers on checked items.
+   * @description Accessible state text for checked items in a context menu.
    */
   checked: 'checked',
   /**
-   * @description Accessible text exposed to screen readers when the screen reader encounters an unchecked checkbox.
+   * @description Accessible state text for unchecked items in a context menu.
    */
   unchecked: 'unchecked',
   /**
-   * @description Accessibility label for checkable SoftContextMenuItems with shortcuts
-   * @example {Open File} PH1
+   * @description Accessible label pattern combining label, shortcut, and state in a context menu item.
+   * @example {Open file} PH1
    * @example {Ctrl + P} PH2
    * @example {checked} PH3
    */
   sSS: '{PH1}, {PH2}, {PH3}',
   /**
-   * @description Generic text with two placeholders separated by a comma
-   * @example {1 613 680} PH1
-   * @example {44 %} PH2
+   * @description Accessible label pattern combining two strings separated by a comma.
+   * @example {Console} PH1
+   * @example {Ctrl + R} PH2
    */
   sS: '{PH1}, {PH2}',
   /**
-   * @description Accessible text exposed to screen readers appended to menu items that have a new badge.
+   * @description Accessible text appended to menu items with a new feature badge.
    */
   newFeature: 'This is a new feature',
 } as const;

package/front_end/ui/legacy/SoftDropDown.ts

@@ -20,7 +20,7 @@ import {createShadowRootWithCoreStyles} from './UIUtils.js';
 
 const UIStrings = {
   /**
-   * @description Placeholder text in Soft Drop Down
+   * @description Placeholder text in a dropdown when no item is selected.
    */
   noItemSelected: '(no item selected)',
 } as const;

package/front_end/ui/legacy/SuggestBox.ts

@@ -19,14 +19,14 @@ import {createShadowRootWithCoreStyles, measuredScrollbarWidth, measurePreferred
 
 const UIStrings = {
   /**
-   * @description Aria alert to read the suggestion for the suggestion box when typing in text editor
+   * @description Announcement text for screen readers when navigating suggestions in a suggestion box.
    * @example {name} PH1
    * @example {2} PH2
    * @example {5} PH3
    */
   sSuggestionSOfS: '{PH1}, suggestion {PH2} of {PH3}',
   /**
-   * @description Aria alert to confirm the suggestion when it is selected from the suggestion box
+   * @description Announcement text for screen readers when a suggestion is selected in a suggestion box.
    * @example {name} PH1
    */
   sSuggestionSSelected: '{PH1}, suggestion selected',

package/front_end/ui/legacy/TabbedPane.ts

@@ -24,41 +24,41 @@ import {Events as ZoomManagerEvents, ZoomManager} from './ZoomManager.js';
 
 const UIStrings = {
   /**
-   * @description The aria label for the button to open more tabs at the right tabbed pane in Elements tools
+   * @description Tooltip and accessible label for the more tabs dropdown button in a tab strip.
    */
   moreTabs: 'More tabs',
   /**
-   * @description Text in Tabbed Pane
-   * @example {tab} PH1
+   * @description Tooltip text and accessible label for the close button on a tab in a tab strip.
+   * @example {Console} PH1
    */
   closeS: 'Close {PH1}',
   /**
-   * @description Text to close something
+   * @description Context menu item to close the selected tab in a tab strip.
    */
   close: 'Close',
   /**
-   * @description Text on a menu option to close other drawers when right click on a drawer title
+   * @description Context menu item to close other tabs in a tab strip.
    */
   closeOthers: 'Close others',
   /**
-   * @description Text on a menu option to close the drawer to the right when right click on a drawer title
+   * @description Context menu item to close all tabs to the right of the selected tab in a tab strip.
    */
   closeTabsToTheRight: 'Close tabs to the right',
   /**
-   * @description Text on a menu option to close all the drawers except Console when right click on a drawer title
+   * @description Context menu item to close all tabs in a tab strip.
    */
   closeAll: 'Close all',
   /**
-   * @description Indicates that a tab contains a preview feature (i.e., a beta / experimental feature).
+   * @description Tooltip text and accessible label indicating that a tab contains a preview feature.
    */
   previewFeature: 'Preview feature',
 
   /**
-   * @description Text to move a tab forwar.
+   * @description Context menu item to move a tab to the right in a tab strip.
    */
   moveTabRight: 'Move right',
   /**
-   * @description Text to move a tab backward.
+   * @description Context menu item to move a tab to the left in a tab strip.
    */
   moveTabLeft: 'Move left',
 } as const;

package/front_end/ui/legacy/TargetCrashedScreen.ts

@@ -10,11 +10,11 @@ import {VBox} from './Widget.js';
 
 const UIStrings = {
   /**
-   * @description Text in dialog box when the target page crashed
+   * @description Message shown when the inspected page crashes and DevTools is disconnected.
    */
   devtoolsWasDisconnectedFromThe: 'DevTools was disconnected from the page.',
   /**
-   * @description Text content of content element
+   * @description Message explaining that DevTools will reconnect once the page is reloaded.
    */
   oncePageIsReloadedDevtoolsWill: 'Once page is reloaded, DevTools will automatically reconnect.',
 } as const;

package/front_end/ui/legacy/Toolbar.ts

@@ -28,23 +28,23 @@ import {Widget} from './Widget.js';
 
 const UIStrings = {
   /**
-   * @description Announced screen reader message for ToolbarSettingToggle when the setting is toggled on.
+   * @description Announcement text for screen readers when a toolbar toggle button is pressed.
    */
   pressed: 'pressed',
   /**
-   * @description Announced screen reader message for ToolbarSettingToggle when the setting is toggled off.
+   * @description Announcement text for screen readers when a toolbar toggle button is not pressed.
    */
   notPressed: 'not pressed',
   /**
-   * @description Tooltip shown when the user hovers over the clear icon to empty the text input.
+   * @description Tooltip text and accessible label for the clear input button in a toolbar input.
    */
   clearInput: 'Clear',
   /**
-   * @description Placeholder for filter bars that shows before the user types in a filter keyword.
+   * @description Placeholder text for a filter input in a toolbar.
    */
   filter: 'Filter',
   /**
-   * @description Tooltip shown when the user hovers over the regex icon to toggle regular-expression filtering.
+   * @description Tooltip text and accessible label for the regular expression toggle button in a filter toolbar.
    */
   useRegularExpression: 'Use regular expression',
 } as const;

package/front_end/ui/legacy/Treeoutline.ts

@@ -1591,7 +1591,7 @@ export namespace TreeSearch {
 }
 
 class TreeViewTreeElement extends TreeElement {
-  static readonly CLONED_ATTRIBUTES = SDK.DOMModel.ARIA_ATTRIBUTES.union(new Set(['jslog']));
+  static readonly CLONED_ATTRIBUTES = SDK.DOMModel.ARIA_ATTRIBUTES.union(new Set(['jslog', 'draggable']));
   #clonedAttributes = new Set<string>();
   #clonedClasses = new Set<string>();
   #userExpanded = false;

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;
@@ -1989,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,