chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

package/front_end/ui/components/request_link_icon/requestLinkIcon.css

@@ -35,8 +35,8 @@ button {
 }
 
 devtools-icon {
-  width: 16px;
-  height: 16px;
+  width: var(--sys-size-8);
+  height: var(--sys-size-8);
   vertical-align: middle;
   color: var(--icon-no-request);
 

package/front_end/ui/components/settings/settingCheckbox.css

@@ -10,11 +10,11 @@
 }
 
 input {
-  height: 12px;
-  width: 12px;
-  min-height: 12px;
-  min-width: 12px;
-  margin: 6px;
+  height: var(--sys-size-6);
+  width: var(--sys-size-6);
+  min-height: var(--sys-size-6);
+  min-width: var(--sys-size-6);
+  margin: var(--sys-size-4);
 }
 
 label {
@@ -25,7 +25,7 @@ label {
 }
 
 p {
-  margin: 6px 0;
+  margin: var(--sys-size-4) 0;
 }
 
 .info-icon {

package/front_end/ui/components/text_editor/TextEditor.ts

@@ -161,7 +161,9 @@ export class TextEditor extends HTMLElement {
           this.#activeEditor.dispatch({effects: change});
         }
       };
-      const setting = Common.Settings.Settings.instance().moduleSetting(dynamicSetting.settingName);
+      const setting = typeof dynamicSetting.setting === 'string' ?
+          Common.Settings.Settings.instance().moduleSetting(dynamicSetting.setting) :
+          Common.Settings.Settings.instance().resolve(dynamicSetting.setting);
       setting.addChangeListener(handler);
       this.#activeSettingListeners.push([setting, handler]);
     }

package/front_end/ui/components/text_editor/config.ts

@@ -47,15 +47,23 @@ export const dynamicSetting = CM.Facet.define<DynamicSetting<unknown>>();
 
 export class DynamicSetting<T> {
   compartment = new CM.Compartment();
+  readonly setting: string|Common.Settings.SettingDescriptor<T>;
 
   constructor(
-      readonly settingName: string,
+      setting: string|Common.Settings.SettingDescriptor<T>,
       private readonly getExtension: (value: T) => CM.Extension,
   ) {
+    this.setting = setting;
+  }
+
+  get settingName(): string {
+    return typeof this.setting === 'string' ? this.setting : this.setting.name;
   }
 
   settingValue(): T {
-    return Common.Settings.Settings.instance().moduleSetting(this.settingName).get() as T;
+    return (typeof this.setting === 'string' ? Common.Settings.Settings.instance().moduleSetting(this.setting) :
+                                               Common.Settings.Settings.instance().resolve<unknown>(this.setting))
+               .get() as T;
   }
 
   instance(): CM.Extension {
@@ -71,8 +79,12 @@ export class DynamicSetting<T> {
     return cur === needed ? null : this.compartment.reconfigure(needed);
   }
 
-  static bool(name: string, enabled: CM.Extension, disabled: CM.Extension = empty): DynamicSetting<boolean> {
-    return new DynamicSetting<boolean>(name, val => val ? enabled : disabled);
+  static bool(
+      setting: string|Common.Settings.SettingDescriptor<boolean>,
+      enabled: CM.Extension,
+      disabled: CM.Extension = empty,
+      ): DynamicSetting<boolean> {
+    return new DynamicSetting<boolean>(setting, val => val ? enabled : disabled);
   }
 
   static none: ReadonlyArray<DynamicSetting<unknown>> = [];

package/front_end/ui/kit/icons/icon.css

@@ -8,8 +8,8 @@
   flex-grow: 0;
   flex-shrink: 0;
   display: inline-block;
-  width: 20px;
-  height: 20px;
+  width: var(--sys-size-9);
+  height: var(--sys-size-9);
   color: var(--icon-default);
   vertical-align: sub;
   position: relative;
@@ -96,8 +96,8 @@
 :host([name="triangle-down"]),
 :host([name="triangle-left"]),
 :host([name="triangle-right"]) {
-  width: 14px;
-  height: 14px;
+  width: var(--sys-size-7);
+  height: var(--sys-size-7);
   vertical-align: baseline;
 }
 

package/front_end/ui/kit/link/link.css

@@ -20,7 +20,7 @@
 
 :host(:focus-visible) {
   outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
-  outline-offset: 2px;
+  outline-offset: var(--sys-size-2);
   /* stylelint-disable-next-line declaration-no-important */
   outline-style: solid !important;
   border-radius: var(--sys-shape-corner-extra-small);

package/front_end/ui/legacy/ActionRegistration.ts

@@ -11,87 +11,87 @@ import {Context} from './Context.js';
 
 const UIStrings = {
   /**
-   * @description Title of the keybind category 'Elements' in Settings' Shortcuts pannel.
+   * @description Title of the Elements shortcut category in the shortcuts tab in the Settings panel.
    */
   elements: 'Elements',
   /**
-   * @description Title of the keybind category 'Screenshot' in Settings' Shortcuts pannel.
+   * @description Title of the Screenshot shortcut category in the shortcuts tab in the Settings panel.
    */
   screenshot: 'Screenshot',
   /**
-   * @description Title of the keybind category 'Network' in Settings' Shortcuts pannel.
+   * @description Title of the Network shortcut category in the shortcuts tab in the Settings panel.
    */
   network: 'Network',
   /**
-   * @description Title of the keybind category 'Memory' in Settings' Shortcuts pannel.
+   * @description Title of the Memory shortcut category in the shortcuts tab in the Settings panel.
    */
   memory: 'Memory',
   /**
-   * @description Title of the keybind category 'JavaScript Profiler' in Settings' Shortcuts pannel.
+   * @description Title of the JavaScript profiler shortcut category in the shortcuts tab in the Settings panel.
    */
-  javascript_profiler: 'JavaScript Profiler',
+  javascript_profiler: 'JavaScript profiler',
   /**
-   * @description Title of the keybind category 'Console' in Settings' Shortcuts pannel.
+   * @description Title of the Console shortcut category in the shortcuts tab in the Settings panel.
    */
   console: 'Console',
   /**
-   * @description Title of the keybind category 'Performance' in Settings' Shortcuts pannel.
+   * @description Title of the Performance shortcut category in the shortcuts tab in the Settings panel.
    */
   performance: 'Performance',
   /**
-   * @description Title of the keybind category 'Mobile' in Settings' Shortcuts pannel.
+   * @description Title of the Mobile shortcut category in the shortcuts tab in the Settings panel.
    */
   mobile: 'Mobile',
   /**
-   * @description Title of the keybind category 'Help' in Settings' Shortcuts pannel.
+   * @description Title of the Help shortcut category in the shortcuts tab in the Settings panel.
    */
   help: 'Help',
   /**
-   * @description Title of the keybind category 'Layers' in Settings' Shortcuts pannel.
+   * @description Title of the Layers shortcut category in the shortcuts tab in the Settings panel.
    */
   layers: 'Layers',
   /**
-   * @description Title of the keybind category 'Navigation' in Settings' Shortcuts pannel.
+   * @description Title of the Navigation shortcut category in the shortcuts tab in the Settings panel.
    */
   navigation: 'Navigation',
   /**
-   * @description Title of the keybind category 'Drawer' in Settings' Shortcuts pannel.
+   * @description Title of the Drawer shortcut category in the shortcuts tab in the Settings panel.
    */
   drawer: 'Drawer',
   /**
-   * @description Title of the keybind category 'Global' in Settings' Shortcuts pannel.
+   * @description Title of the Global shortcut category in the shortcuts tab in the Settings panel.
    */
   global: 'Global',
   /**
-   * @description Title of the keybind category 'Resources' in Settings' Shortcuts pannel.
+   * @description Title of the Resources shortcut category in the shortcuts tab in the Settings panel.
    */
   resources: 'Resources',
   /**
-   * @description Title of the keybind category 'Background Services' in Settings' Shortcuts pannel.
+   * @description Title of the Background services shortcut category in the shortcuts tab in the Settings panel.
    */
-  background_services: 'Background Services',
+  background_services: 'Background services',
   /**
-   * @description Title of the keybind category 'Settings' in Settings' Shortcuts pannel.
+   * @description Title of the Settings shortcut category in the shortcuts tab in the Settings panel.
    */
   settings: 'Settings',
   /**
-   * @description Title of the keybind category 'Debugger' in Settings' Shortcuts pannel.
+   * @description Title of the Debugger shortcut category in the shortcuts tab in the Settings panel.
    */
   debugger: 'Debugger',
   /**
-   * @description Title of the keybind category 'Sources' in Settings' Shortcuts pannel.
+   * @description Title of the Sources shortcut category in the shortcuts tab in the Settings panel.
    */
   sources: 'Sources',
   /**
-   * @description Title of the keybind category 'Rendering' in Settings' Shortcuts pannel.
+   * @description Title of the Rendering shortcut category in the shortcuts tab in the Settings panel.
    */
   rendering: 'Rendering',
   /**
-   * @description Title of the keybind category 'Recorder' in Settings' Shortcuts pannel.
+   * @description Title of the Recorder shortcut category in the shortcuts tab in the Settings panel.
    */
   recorder: 'Recorder',
   /**
-   * @description Title of the keybind category 'Changes' in Settings' Shortcuts pannel.
+   * @description Title of the Changes shortcut category in the shortcuts tab in the Settings panel.
    */
   changes: 'Changes',
 } as const;

package/front_end/ui/legacy/Dialog.ts

@@ -20,7 +20,7 @@ import {Widget, WidgetFocusRestorer} from './Widget.js';
 
 const UIStrings = {
   /**
-   * @description Text to close the dialog
+   * @description Tooltip text and accessible label for the close button in a dialog.
    */
   close: 'Close',
 } as const;

package/front_end/ui/legacy/DockController.ts

@@ -15,15 +15,15 @@ import {type Provider, ToolbarButton, type ToolbarItem} from './Toolbar.js';
 
 const UIStrings = {
   /**
-   * @description Text to close something
+   * @description Tooltip text for the close DevTools button in the main toolbar.
    */
   close: 'Close',
   /**
-   * @description Text announced when the DevTools are undocked
+   * @description Announcement text for screen readers when DevTools is undocked.
    */
   devtoolsUndocked: 'DevTools is undocked',
   /**
-   * @description Text announced when the DevTools are docked to the left, right, or bottom of the browser tab
+   * @description Announcement text for screen readers when DevTools is docked to a side of the browser window.
    * @example {bottom} PH1
    */
   devToolsDockedTo: 'DevTools is docked to {PH1}',

package/front_end/ui/legacy/EmptyWidget.ts

@@ -6,7 +6,7 @@ import '../../ui/kit/kit.js';
 
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
-import {Directives, html, render} from '../lit/lit.js';
+import {html, render} from '../lit/lit.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import emptyWidgetStyles from './emptyWidget.css.js';
@@ -15,40 +15,33 @@ import {VBox} from './Widget.js';
 
 const UIStrings = {
   /**
-   * @description Text that is usually a hyperlink to more documentation
+   * @description Link text in an empty state view leading to external documentation.
    */
   learnMore: 'Learn more',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/EmptyWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {ref} = Directives;
 
-interface EmptyWidgetInput {
+interface ViewInput {
   header: string;
   text: string;
   link?: Platform.DevToolsPath.UrlString|null;
-  extraElements?: Element[];
 }
 
-interface EmptyWidgetOutput {
-  contentElement?: Element;
-}
-
-type View = (input: EmptyWidgetInput, output: EmptyWidgetOutput, target: HTMLElement) => void;
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
 
-const DEFAULT_VIEW: View = (input, output, target) => {
+const DEFAULT_VIEW: View = (input, _output, target) => {
   // clang-format off
   render(html`
     <style>${inspectorCommonStyles}</style>
     <style>${emptyWidgetStyles}</style>
-    <div class="empty-state" jslog=${VisualLogging.section('empty-view')}
-         ${ref(e => {output.contentElement = e;})}>
+    <div class="empty-state" jslog=${VisualLogging.section('empty-view')}>
       <div class="empty-state-header">${input.header}</div>
       <div class="empty-state-description">
         <span>${input.text}</span>
         ${input.link ? html`<devtools-link href=${input.link} jslogContext=${'learn-more'}>${i18nString(UIStrings.learnMore)}</devtools-link>` : ''}
       </div>
-      ${input.extraElements}
+      <slot></slot>
     </div>`, target, {container: {classes: ['empty-view-scroller']}});
   // clang-format on
 };
@@ -58,54 +51,40 @@ export class EmptyWidget extends VBox {
   #text: string;
   #link: Platform.DevToolsPath.UrlString|undefined|null;
   #view: View;
-  #firstUpdate = true;
-  #extraElements: Element[] = [];
 
   constructor(headerOrElement: string|HTMLElement, text = '', element?: HTMLElement, view = DEFAULT_VIEW) {
     const header = typeof headerOrElement === 'string' ? headerOrElement : '';
     if (!element && headerOrElement instanceof HTMLElement) {
       element = headerOrElement;
     }
-    super(element);
+    super(element, {useShadowDom: true, classes: ['empty-widget-container']});
     this.#header = header;
     this.#text = text;
     this.#link = undefined;
     this.#view = view;
+    // TODO: migrate to `requestUpdate()` once callers don't manipulate DOM directly and synchronously anymore.
     this.performUpdate();
   }
 
   set link(link: Platform.DevToolsPath.UrlString|undefined|null) {
     this.#link = link;
+    // TODO: migrate to `requestUpdate()` once callers don't manipulate DOM directly and synchronously anymore.
     this.performUpdate();
   }
 
   set text(text: string) {
     this.#text = text;
+    // TODO: migrate to `requestUpdate()` once callers don't manipulate DOM directly and synchronously anymore.
     this.performUpdate();
   }
 
   set header(header: string) {
     this.#header = header;
+    // TODO: migrate to `requestUpdate()` once callers don't manipulate DOM directly and synchronously anymore.
     this.performUpdate();
   }
 
-  set extraElements(elements: HTMLElement[]) {
-    this.#extraElements = elements;
-    this.#firstUpdate = false;
-    this.requestUpdate();
-  }
-
   override performUpdate(): void {
-    if (this.#firstUpdate) {
-      this.#extraElements = [...this.element.children];
-      this.#firstUpdate = false;
-    }
-    const output: EmptyWidgetOutput = {};
-    this.#view(
-        {header: this.#header, text: this.#text, link: this.#link, extraElements: this.#extraElements}, output,
-        this.element);
-    if (output.contentElement) {
-      this.contentElement = output.contentElement as HTMLElement;
-    }
+    this.#view({header: this.#header, text: this.#text, link: this.#link}, undefined, this.contentElement);
   }
 }

package/front_end/ui/legacy/FilterBar.ts

@@ -25,20 +25,20 @@ export {filterStyles};
 
 const UIStrings = {
   /**
-   * @description Text to filter result items
+   * @description Tooltip text for the filter toggle button in the filter bar.
    */
   filter: 'Filter',
   /**
-   * @description Text that appears when hover over the filter bar in the Network tool
+   * @description Placeholder text for the search input in the filter bar.
    */
   egSmalldUrlacomb: 'e.g. `/small[\d]+/ url:a.com/b`',
   /**
-   * @description Text that appears when hover over the All button in the Network tool
+   * @description Tooltip text for the filter buttons in the filter bar.
    * @example {Ctrl + } PH1
    */
   sclickToSelectMultipleTypes: '{PH1}Click to select multiple types',
   /**
-   * @description Text for everything
+   * @description Label for the option to show all types in a filter bar.
    */
   allStrings: 'All',
 } as const;

package/front_end/ui/legacy/Infobar.ts

@@ -17,11 +17,11 @@ import type {Widget} from './Widget.js';
 
 const UIStrings = {
   /**
-   * @description Text on a button to close the infobar and never show the infobar in the future
+   * @description Button text to permanently dismiss an infobar and prevent it from appearing again.
    */
   dontShowAgain: 'Don’t show again',
   /**
-   * @description Text to close something
+   * @description Accessible label for the close button in an infobar.
    */
   close: 'Close',
 } as const;

package/front_end/ui/legacy/InspectorDrawerView.ts

@@ -42,23 +42,23 @@ class DrawerTabbedPane extends TabbedPane {
 
 const UIStrings = {
   /**
-   * @description Title of more tabs button in the drawer view.
+   * @description Title and tooltip text for the more tools menu button in the drawer.
    */
-  moreTools: 'More Tools',
+  moreTools: 'More tools',
   /**
-   * @description Text that appears when hover over the minimize button on the drawer view.
+   * @description Tooltip text for the minimize button in the drawer.
    */
   minimizeDrawer: 'Minimize drawer',
   /**
-   * @description Text that appears when hover over the expand button on the drawer view.
+   * @description Tooltip text for the expand button in the drawer.
    */
   expandDrawer: 'Expand drawer',
   /**
-   * @description Text that appears when hover over the close button on the drawer view.
+   * @description Tooltip text for the close button in the drawer.
    */
   closeDrawer: 'Close drawer',
   /**
-   * @description Text that appears when hover the toggle orientation button.
+   * @description Tooltip text for the toggle orientation button in the drawer.
    */
   toggleDrawerOrientation: 'Toggle drawer orientation',
 } as const;

package/front_end/ui/legacy/InspectorView.ts

@@ -35,84 +35,77 @@ import {VBox, type Widget, WidgetFocusRestorer} from './Widget.js';
 
 const UIStrings = {
   /**
-   * @description The aria label for the drawer minimized.
+   * @description Announcement text for screen readers when the drawer is minimized.
    */
   drawerMinimized: 'Drawer minimized',
   /**
-   * @description The aria label for the drawer expanded.
+   * @description Announcement text for screen readers when the drawer is expanded.
    */
   drawerExpanded: 'Drawer expanded',
   /**
-   * @description The ARIA label for the main tab bar that contains the DevTools panels
+   * @description Accessible label for the main tab bar that contains panels.
    */
   panels: 'Panels',
   /**
-   * @description Title of an action that reloads the tab currently being debugged by DevTools
+   * @description Button text in an infobar to reload the inspected page.
    */
   reloadDebuggedTab: 'Reload page',
   /**
-   * @description Title of an action that reloads the DevTools
+   * @description Button text in an infobar to reload DevTools.
    */
   reloadDevtools: 'Reload DevTools',
   /**
-   * @description Title of an action that restarts Chrome
+   * @description Button text in an infobar to restart Chrome.
    */
   restartChrome: 'Restart Chrome',
   /**
-   * @description Confirmation dialog text for restarting Chrome
+   * @description Confirmation prompt text when restarting Chrome.
    */
   areYouSureYouWantToRestartChrome: 'Are you sure you want to restart Chrome?',
   /**
-   * @description Text for context menu action to move a tab to the main tab bar
+   * @description Context menu item to move a tab to the main tab bar.
    */
   moveToMainTabBar: 'Move to main tab bar',
   /**
-   * @description Text for context menu action to move a tab to the drawer
+   * @description Context menu item to move a tab to the drawer.
    */
   moveToDrawer: 'Move to drawer',
   /**
-   * @description Text shown in a prompt to the user when DevTools is started and the
-   * currently selected DevTools locale does not match Chrome's locale.
-   * The placeholder is the current Chrome language.
+   * @description Infobar message shown when the DevTools language does not match the browser language.
    * @example {German} PH1
    */
   devToolsLanguageMissmatch: 'DevTools is now available in {PH1}',
   /**
-   * @description An option the user can select when we notice that DevTools
-   * is configured with a different locale than Chrome. This option means DevTools will
-   * always try and display the DevTools UI in the same language as Chrome.
+   * @description Button text in an infobar to configure DevTools to match the browser language.
    */
   setToBrowserLanguage: 'Always match Chrome’s language',
   /**
-   * @description An option the user can select when DevTools notices that DevTools
-   * is configured with a different locale than Chrome. This option means DevTools UI
-   * will be switched to the language specified in the placeholder.
+   * @description Button text in an infobar to switch DevTools to a specific language.
    * @example {German} PH1
    */
   setToSpecificLanguage: 'Switch DevTools to {PH1}',
   /**
-   * @description The aria label for main toolbar
+   * @description Accessible label for the main toolbar.
    */
   mainToolbar: 'Main toolbar',
   /**
-   * @description The aria label for the drawer.
+   * @description Accessible label for the drawer.
    */
-  drawer: 'Tool drawer',
+  drawer: 'Drawer',
   /**
-   * @description The aria label for the drawer shown.
+   * @description Announcement text for screen readers when the drawer is shown.
    */
   drawerShown: 'Drawer shown',
   /**
-   * @description The aria label for the drawer hidden.
+   * @description Announcement text for screen readers when the drawer is hidden.
    */
   drawerHidden: 'Drawer hidden',
   /**
-   * @description Request for the user to select a local file system folder for DevTools
-   * to store local overrides in.
+   * @description Infobar message prompting the user to select a folder for local overrides.
    */
   selectOverrideFolder: 'Select a folder to store override files in',
   /**
-   * @description Label for a button which opens a file picker.
+   * @description Button text in an infobar to open a folder picker for local overrides.
    */
   selectFolder: 'Select folder',
 } as const;

package/front_end/ui/legacy/ListWidget.ts

@@ -20,31 +20,31 @@ import {VBox} from './Widget.js';
 
 const UIStrings = {
   /**
-   * @description Text on a button to start editing text
+   * @description Tooltip text for the edit button in a list widget.
    */
   editString: 'Edit',
   /**
-   * @description Label for an item to remove something
+   * @description Tooltip text for the remove button in a list widget.
    */
   removeString: 'Remove',
   /**
-   * @description Text to save something
+   * @description Button text to save changes when editing an item in a list widget.
    */
   saveString: 'Save',
   /**
-   * @description Text to add something
+   * @description Button text to add a new item in a list widget.
    */
   addString: 'Add',
   /**
-   * @description Text to cancel something
+   * @description Button text to cancel editing an item in a list widget.
    */
   cancelString: 'Cancel',
   /**
-   * @description Text for screen reader to announce that an item has been saved.
+   * @description Announcement text for screen readers when changes to a list widget item are saved.
    */
   changesSaved: 'Changes to item have been saved',
   /**
-   * @description Text for screen reader to announce that an item has been removed.
+   * @description Announcement text for screen readers when a list widget item is removed.
    */
   removedItem: 'Item has been removed',
 } as const;

package/front_end/ui/legacy/PlusButton.ts

@@ -17,9 +17,7 @@ import {ViewLocationValues} from './ViewRegistration.js';
 
 const UIStrings = {
   /**
-   * @description Default tooltip / accessible name of the "plus" button shown
-   * after the visible tabs in a tab strip. Clicking it opens a menu listing
-   * tools that are not currently shown as a visible tab.
+   * @description Default tooltip and accessible name for the plus button shown in a tab strip.
    */
   moreTools: 'More tools',
 } as const;