chrome-devtools-frontend 1.0.1522145 → 1.0.1524741

package/front_end/panels/linear_memory_inspector/components/LinearMemoryInspector.ts

@@ -44,10 +44,12 @@ const UIStrings = {
 const str_ =
     i18n.i18n.registerUIStrings('panels/linear_memory_inspector/components/LinearMemoryInspector.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-// If the LinearMemoryInspector only receives a portion
-// of the original Uint8Array to show, it requires information
-// on the 1. memoryOffset (at which index this portion starts),
-// and on the 2. outerMemoryLength (length of the original Uint8Array).
+/**
+ * If the LinearMemoryInspector only receives a portion
+ * of the original Uint8Array to show, it requires information
+ * on the 1. memoryOffset (at which index this portion starts),
+ * and on the 2. outerMemoryLength (length of the original Uint8Array).
+ **/
 export interface LinearMemoryInspectorData {
   memory: Uint8Array<ArrayBuffer>;
   address: number;

package/front_end/panels/media/PlayerPropertiesView.ts

@@ -143,7 +143,7 @@ const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined
 
 type TabData = Record<string, string|object>;
 
-// Keep this enum in sync with panels/media/base/media_log_properties.h
+/** Keep this enum in sync with panels/media/base/media_log_properties.h **/
 export const enum PlayerPropertyKeys {
   RESOLUTION = 'kResolution',
   TOTAL_BYTES = 'kTotalBytes',

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -232,11 +232,6 @@ const UIStrings = {
    * @example {4 B} PH1
    */
   servedFromSignedHttpExchange: 'Served from Signed HTTP Exchange, resource size: {PH1}',
-  /**
-   * @description Cell title in Network Data Grid Node of the Network panel. Indicates that the response came from preloaded web bundle. See https://web.dev/web-bundles/
-   * @example {4 B} PH1
-   */
-  servedFromWebBundle: 'Served from Web Bundle, resource size: {PH1}',
   /**
    * @description Text of a DOM element in Network Data Grid Node of the Network panel
    */
@@ -278,19 +273,6 @@ const UIStrings = {
    * @description Text describing the depth of a top level node in the network datagrid
    */
   level: 'level 1',
-  /**
-   * @description Text in Network Data Grid Node of the Network panel
-   */
-  webBundleError: 'Web Bundle error',
-  /**
-   * @description Alternative text for the web bundle inner request icon in Network Data Grid Node of the Network panel
-   * Indicates that the response came from preloaded web bundle. See https://web.dev/web-bundles/
-   */
-  webBundleInnerRequest: 'Served from Web Bundle',
-  /**
-   * @description Text in Network Data Grid Node of the Network panel
-   */
-  webBundle: '(Web Bundle)',
   /**
    * @description Tooltip text for subtitles of Time cells in Network request rows. Latency is the time difference
    * between the time a response to a network request is received and the time the request is started.
@@ -1202,22 +1184,6 @@ export class NetworkRequestNode extends NetworkNode {
     }
 
     if (columnId === 'name') {
-      const webBundleInnerRequestInfo = this.requestInternal.webBundleInnerRequestInfo();
-      if (webBundleInnerRequestInfo) {
-        const secondIconElement = IconButton.Icon.create('bundle', 'icon');
-        secondIconElement.style.color = 'var(--icon-info)';
-        secondIconElement.title = i18nString(UIStrings.webBundleInnerRequest);
-
-        const networkManager = SDK.NetworkManager.NetworkManager.forRequest(this.requestInternal);
-        if (webBundleInnerRequestInfo.bundleRequestId && networkManager) {
-          cell.appendChild(Components.Linkifier.Linkifier.linkifyRevealable(
-              new NetworkForward.NetworkRequestId.NetworkRequestId(
-                  webBundleInnerRequestInfo.bundleRequestId, networkManager),
-              secondIconElement, undefined, undefined, undefined, 'webbundle-request'));
-        } else {
-          cell.appendChild(secondIconElement);
-        }
-      }
       const name = Platform.StringUtilities.trimMiddle(this.requestInternal.name(), 100);
       const networkManager = SDK.NetworkManager.NetworkManager.forRequest(this.requestInternal);
       UI.UIUtils.createTextChild(cell, networkManager ? networkManager.target().decorateLabel(name) : name);
@@ -1236,12 +1202,8 @@ export class NetworkRequestNode extends NetworkNode {
         'network-dim-cell', !this.isFailed() && (this.requestInternal.cached() || !this.requestInternal.statusCode));
 
     const corsErrorStatus = this.requestInternal.corsErrorStatus();
-    const webBundleErrorMessage = this.requestInternal.webBundleInfo()?.errorMessage ||
-        this.requestInternal.webBundleInnerRequestInfo()?.errorMessage;
-    if (webBundleErrorMessage) {
-      this.setTextAndTitle(cell, i18nString(UIStrings.webBundleError), webBundleErrorMessage);
-    } else if (
-        this.requestInternal.failed && !this.requestInternal.canceled && !this.requestInternal.wasBlocked() &&
+
+    if (this.requestInternal.failed && !this.requestInternal.canceled && !this.requestInternal.wasBlocked() &&
         !corsErrorStatus) {
       const failText = i18nString(UIStrings.failed);
       if (this.requestInternal.localizedFailDescription) {
@@ -1526,10 +1488,6 @@ export class NetworkRequestNode extends NetworkNode {
       UI.UIUtils.createTextChild(cell, i18n.i18n.lockedString('(signed-exchange)'));
       UI.Tooltip.Tooltip.install(cell, i18nString(UIStrings.servedFromSignedHttpExchange, {PH1: resourceSize}));
       cell.classList.add('network-dim-cell');
-    } else if (this.requestInternal.webBundleInnerRequestInfo()) {
-      UI.UIUtils.createTextChild(cell, i18nString(UIStrings.webBundle));
-      UI.Tooltip.Tooltip.install(cell, i18nString(UIStrings.servedFromWebBundle, {PH1: resourceSize}));
-      cell.classList.add('network-dim-cell');
     } else if (this.requestInternal.fromPrefetchCache()) {
       UI.UIUtils.createTextChild(cell, i18nString(UIStrings.prefetchCache));
       UI.Tooltip.Tooltip.install(cell, i18nString(UIStrings.servedFromPrefetchCacheResource, {PH1: resourceSize}));

package/front_end/panels/network/NetworkLogView.ts

@@ -2512,10 +2512,12 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
           str.replace(/[`\$"]/g, '`$&').replace(/[^\x20-\x7E]/g, char => '$([char]' + char.charCodeAt(0) + ')') + '"';
     }
 
-    // Generate a WebRequestSession object with the UserAgent and Cookie header values.
-    // This is used to pass the user-agent and cookie headers to Invoke-WebRequest because the Invoke-WebRequest
-    // command does not allow setting these headers through the -Headers parameter. See docs at:
-    // https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.utility/invoke-webrequest?view=powershell-7.1#parameters
+    /**
+     * Generate a WebRequestSession object with the UserAgent and Cookie header values.
+     * This is used to pass the user-agent and cookie headers to Invoke-WebRequest because the Invoke-WebRequest
+     * command does not allow setting these headers through the -Headers parameter. See docs at:
+     * https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.utility/invoke-webrequest?view=powershell-7.1#parameters
+     **/
     function generatePowerShellSession(request: SDK.NetworkRequest.NetworkRequest): string|null {
       const requestHeaders = request.requestHeaders();
       const props = [];

package/front_end/panels/network/RequestPreviewView.ts

@@ -8,12 +8,10 @@ import '../../ui/legacy/legacy.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
-import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import * as NetworkComponents from './components/components.js';
 import {RequestHTMLView} from './RequestHTMLView.js';
 import {SignedExchangeInfoView} from './SignedExchangeInfoView.js';
 
@@ -90,11 +88,6 @@ export class RequestPreviewView extends UI.Widget.VBox {
       return new SignedExchangeInfoView(this.request);
     }
 
-    if (this.request.webBundleInfo()) {
-      return LegacyWrapper.LegacyWrapper.legacyWrapper(
-          UI.Widget.VBox, new NetworkComponents.WebBundleInfoView.WebBundleInfoView(this.request));
-    }
-
     const htmlErrorPreview = await this.htmlPreview();
     if (htmlErrorPreview) {
       return htmlErrorPreview;

package/front_end/panels/network/components/RequestHeadersView.ts

@@ -58,10 +58,6 @@ const UIStrings = {
    * @description Text in Request Headers View of the Network panel
    */
   fromSignedexchange: '(from signed-exchange)',
-  /**
-   * @description Text in Request Headers View of the Network panel
-   */
-  fromWebBundle: '(from Web Bundle)',
   /**
    * @description Section header for a list of the main aspects of a http request
    */
@@ -450,8 +446,6 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
       comment = i18nString(UIStrings.fromServiceWorker);
     } else if (this.#request.redirectSourceSignedExchangeInfoHasNoErrors()) {
       comment = i18nString(UIStrings.fromSignedexchange);
-    } else if (this.#request.webBundleInnerRequestInfo()) {
-      comment = i18nString(UIStrings.fromWebBundle);
     } else if (this.#request.fromPrefetchCache()) {
       comment = i18nString(UIStrings.fromPrefetchCache);
     } else if (this.#request.cached()) {

package/front_end/panels/network/components/components.ts

@@ -9,7 +9,6 @@ import * as RequestHeaderSection from './RequestHeaderSection.js';
 import * as RequestHeadersView from './RequestHeadersView.js';
 import * as RequestTrustTokensView from './RequestTrustTokensView.js';
 import * as ResponseHeaderSection from './ResponseHeaderSection.js';
-import * as WebBundleInfoView from './WebBundleInfoView.js';
 
 export {
   DirectSocketConnectionView,
@@ -19,5 +18,4 @@ export {
   RequestHeadersView,
   RequestTrustTokensView,
   ResponseHeaderSection,
-  WebBundleInfoView,
 };

package/front_end/panels/profiler/HeapSnapshotDataGrids.ts

@@ -734,7 +734,7 @@ export class HeapSnapshotRetainmentDataGrid extends HeapSnapshotContainmentDataG
   }
 }
 
-// TODO(crbug.com/1228674): Remove this enum, it is only used in web tests.
+/** TODO(crbug.com/1228674): Remove this enum, it is only used in web tests. **/
 export enum HeapSnapshotRetainmentDataGridEvents {
   /* eslint-disable @typescript-eslint/naming-convention -- Used by web_tests. */
   ExpandRetainersComplete = 'ExpandRetainersComplete',

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -1084,6 +1084,8 @@ export class HeapSnapshotConstructorNode extends HeapSnapshotGridNode {
   readonly retainedSize: number;
   readonly classKey: string;
 
+  #numberFormatter = new Intl.NumberFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale);
+
   constructor(
       dataGrid: HeapSnapshotConstructorsDataGrid, classKey: string,
       aggregate: HeapSnapshotModel.HeapSnapshotModel.Aggregate,
@@ -1102,7 +1104,7 @@ export class HeapSnapshotConstructorNode extends HeapSnapshotGridNode {
     const shallowSizePercent = this.shallowSize / snapshot.totalSize * 100.0;
     this.data = {
       object: this.nameInternal,
-      count: Platform.NumberUtilities.withThousandsSeparator(this.count),
+      count: this.#numberFormatter.format(this.count),
       distance: this.toUIDistance(this.distance),
       shallowSize: i18n.ByteUtilities.formatBytesToKb(this.shallowSize),
       retainedSize: i18n.ByteUtilities.formatBytesToKb(this.retainedSize),
@@ -1143,7 +1145,7 @@ export class HeapSnapshotConstructorNode extends HeapSnapshotGridNode {
   override createCell(columnId: string): HTMLElement {
     const cell = columnId === 'object' ? super.createCell(columnId) : this.createValueCell(columnId);
     if (columnId === 'object' && this.count > 1) {
-      cell.appendChild(UI.Fragment.html`<span class="objects-count">×${this.count}</span>`);
+      cell.appendChild(UI.Fragment.html`<span class="objects-count">×${this.data.count}</span>`);
     }
     return cell;
   }

package/front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -173,17 +173,17 @@ export interface ViewInput {
   filterKeys: string[];
   filter: string;
   parseFilter: (filter: string) => TextUtils.TextUtils.ParsedFilter[];
-  onRecord: (e: Event) => void;
+  onRecord: (record: boolean) => void;
   onClear: () => void;
   onSave: () => void;
-  onSplitChange: (e: CustomEvent<string>) => void;
-  onSelect: (e: CustomEvent<HTMLElement|null>) => void;
-  onContextMenu: (e: CustomEvent<{menu: UI.ContextMenu.ContextMenu, element: HTMLElement}>) => void;
-  onFilterChanged: (e: CustomEvent<string>) => void;
-  onCommandChange: (e: CustomEvent<string>) => void;
-  onCommandSubmitted: (e: CustomEvent<string>) => void;
-  onTargetChange: (e: Event) => void;
-  onToggleSidebar: (e: Event) => void;
+  onSplitChange: (onlyMain: boolean) => void;
+  onSelect: (e: Message|undefined) => void;
+  onContextMenu: (message: Message, menu: UI.ContextMenu.ContextMenu) => void;
+  onFilterChanged: (filter: string) => void;
+  onCommandChange: (command: string) => void;
+  onCommandSubmitted: (input: string) => void;
+  onTargetChange: (targetId: string) => void;
+  onToggleSidebar: () => void;
   targets: SDK.Target.Target[];
   selectedTargetId: string;
 }
@@ -203,7 +203,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                              direction="column"
                              sidebar-initial-size="400"
                              sidebar-visibility=${input.sidebarVisible ? 'visible' : 'hidden'}
-                             @change=${input.onSplitChange}>
+                             @change=${(e: CustomEvent<string>) => input.onSplitChange(e.detail === 'OnlyMain')}>
           <div slot="main" class="vbox protocol-monitor-main">
             <devtools-toolbar class="protocol-monitor-toolbar"
                                jslog=${VisualLogging.toolbar('top')}>
@@ -214,22 +214,23 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                                 .variant=${Buttons.Button.Variant.ICON_TOGGLE}
                                 .toggleType=${Buttons.Button.ToggleType.RED}
                                 .toggled=${true}
-                                @click=${input.onRecord}></devtools-button>
+                                @click=${(e: Event) => input.onRecord((e.target as Buttons.Button.Button).toggled)}>
+               </devtools-button>
               <devtools-button title=${i18nString(UIStrings.clearAll)}
                                .iconName=${'clear'}
                                .variant=${Buttons.Button.Variant.TOOLBAR}
                                .jslogContext=${'protocol-monitor.clear-all'}
-                               @click=${input.onClear}></devtools-button>
+                               @click=${() => input.onClear()}></devtools-button>
               <devtools-button title=${i18nString(UIStrings.save)}
                                .iconName=${'download'}
                                .variant=${Buttons.Button.Variant.TOOLBAR}
                                .jslogContext=${'protocol-monitor.save'}
-                               @click=${input.onSave}></devtools-button>
+                               @click=${() => input.onSave()}></devtools-button>
               <devtools-toolbar-input type="filter"
                                       list="filter-suggestions"
                                       style="flex-grow: 1"
                                       value=${input.filter}
-                                      @change=${input.onFilterChanged}>
+                                      @change=${(e: CustomEvent<string>) => input.onFilterChanged(e.detail)}>
                 <datalist id="filter-suggestions">
                   ${input.filterKeys.map(key => html`
                         <option value=${key + ':'}></option>
@@ -242,8 +243,6 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
               <devtools-data-grid
                   striped
                   slot="main"
-                  @select=${input.onSelect}
-                  @contextmenu=${input.onContextMenu}
                   .filters=${input.parseFilter(input.filter)}>
                 <table>
                     <tr>
@@ -274,8 +273,9 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                     </tr>
                     ${
             input.messages.map(
-                (message, index) => html`
-                      <tr data-index=${index}
+                message => html`
+                      <tr @select=${() => input.onSelect(message)}
+                          @contextmenu=${(e: CustomEvent<UI.ContextMenu.ContextMenu>) => input.onContextMenu(message, e.detail)}
                           style="--override-data-grid-row-background-color: var(--sys-color-surface3)">
                         ${'id' in message ? html`
                           <td title="sent">
@@ -320,7 +320,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                                .iconName=${input.sidebarVisible ? 'left-panel-close' : 'left-panel-open'}
                                .variant=${Buttons.Button.Variant.TOOLBAR}
                                .jslogContext=${'protocol-monitor.toggle-command-editor'}
-                               @click=${input.onToggleSidebar}></devtools-button>
+                               @click=${() => input.onToggleSidebar()}></devtools-button>
               </devtools-button>
               <devtools-toolbar-input id="command-input"
                                       style=${styleMap({
@@ -330,8 +330,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                                       list="command-input-suggestions"
                                       placeholder=${i18nString(UIStrings.sendRawCDPCommand)}
                                       title=${i18nString(UIStrings.sendRawCDPCommandExplanation)}
-                                      @change=${input.onCommandChange}
-                                      @submit=${input.onCommandSubmitted}>
+                                      @change=${(e: CustomEvent<string>) => input.onCommandChange(e.detail)}
+                                      @submit=${(e: CustomEvent<string>) => input.onCommandSubmitted(e.detail)}>
                 <datalist id="command-input-suggestions">
                   ${input.commandSuggestions.map(c => html`<option value=${c}></option>`)}
                 </datalist>
@@ -340,7 +340,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                       title=${i18nString(UIStrings.selectTarget)}
                       style=${styleMap({display: input.sidebarVisible ? 'none' : 'flex'})}
                       jslog=${VisualLogging.dropDown('target-selector').track({change: true})}
-                      @change=${input.onTargetChange}>
+                      @change=${(e: Event) => input.onTargetChange((e.target as HTMLSelectElement).value)}>
                 ${input.targets.map(target => html`
                   <option jslog=${VisualLogging.item('target').track({click: true})}
                           value=${target.id()} ?selected=${target.id() === input.selectedTargetId}>
@@ -416,8 +416,8 @@ export class ProtocolMonitorImpl extends UI.Panel.Panel {
       filterKeys: this.#filterKeys,
       filter: this.#filter,
       parseFilter: this.filterParser.parse.bind(this.filterParser),
-      onSplitChange: (e: CustomEvent<string>) => {
-        if (e.detail === 'OnlyMain') {
+      onSplitChange: (onlyMain: boolean) => {
+        if (onlyMain) {
           this.#populateToolbarInput();
           this.#sidebarVisible = false;
         } else {
@@ -427,8 +427,8 @@ export class ProtocolMonitorImpl extends UI.Panel.Panel {
         }
         this.requestUpdate();
       },
-      onRecord: (e: Event) => {
-        this.setRecording((e.target as Buttons.Button.Button).toggled);
+      onRecord: (recording: boolean) => {
+        this.setRecording(recording);
       },
       onClear: () => {
         this.#messages = [];
@@ -438,35 +438,27 @@ export class ProtocolMonitorImpl extends UI.Panel.Panel {
       onSave: () => {
         void this.saveAsFile();
       },
-      onSelect: (e: CustomEvent<HTMLElement|null>) => {
-        const index = parseInt(e.detail?.dataset?.index ?? '', 10);
-        this.#selectedMessage = !isNaN(index) ? this.#messages[index] : undefined;
+      onSelect: (message: Message|undefined) => {
+        this.#selectedMessage = message;
         this.requestUpdate();
       },
-      onContextMenu: (e: CustomEvent<{menu: UI.ContextMenu.ContextMenu, element: HTMLElement}>) => {
-        const message = this.#messages[parseInt(e.detail?.element?.dataset?.index || '', 10)];
-        if (message) {
-          this.#populateContextMenu(e.detail.menu, message);
-        }
-      },
-      onCommandChange: (e: CustomEvent<string>) => {
-        this.#command = e.detail;
+      onContextMenu: this.#populateContextMenu.bind(this),
+      onCommandChange: (command: string) => {
+        this.#command = command;
       },
-      onCommandSubmitted: (e: CustomEvent<string>) => {
-        this.#commandAutocompleteSuggestionProvider.addEntry(e.detail);
-        const {command, parameters} = parseCommandInput(e.detail);
+      onCommandSubmitted: (input: string) => {
+        this.#commandAutocompleteSuggestionProvider.addEntry(input);
+        const {command, parameters} = parseCommandInput(input);
         this.onCommandSend(command, parameters, this.#selectedTargetId);
       },
-      onFilterChanged: (e: CustomEvent<string>) => {
-        this.#filter = e.detail;
+      onFilterChanged: (filter: string) => {
+        this.#filter = filter;
         this.requestUpdate();
       },
-      onTargetChange: (e: Event) => {
-        if (e.target instanceof HTMLSelectElement) {
-          this.#selectedTargetId = e.target.value;
-        }
+      onTargetChange: (targetId: string) => {
+        this.#selectedTargetId = targetId;
       },
-      onToggleSidebar: (_e: Event) => {
+      onToggleSidebar: () => {
         this.#sidebarVisible = !this.#sidebarVisible;
         this.requestUpdate();
       },
@@ -482,7 +474,7 @@ export class ProtocolMonitorImpl extends UI.Panel.Panel {
     this.#view(viewInput, viewOutput, this.contentElement);
   }
 
-  #populateContextMenu(menu: UI.ContextMenu.ContextMenu, message: Message): void {
+  #populateContextMenu(message: Message, menu: UI.ContextMenu.ContextMenu): void {
     /**
      * You can click the "Edit and resend" item in the context menu to be
      * taken to the CDP editor with the filled with the selected command.

package/front_end/panels/search/SearchResultsPane.ts

@@ -107,8 +107,6 @@ const renderSearchMatches =
   return html`
       ${visibleMatches.map(({lineContent, matchRanges, resultLabel}, i) => html`
         <li role="treeitem" class="search-match" @click=${() => onSelectMatch(searchResult, i)}
-          ${UI.TreeOutline.TreeSearch.highlight(matchRanges.map(range =>
-            ({offset: range.offset + `${resultLabel}`.length, length: range.length})), undefined)}
           @keydown=${(event: KeyboardEvent) => {
             if (event.key === 'Enter') {
               onSelectMatch(searchResult, i);
@@ -123,7 +121,8 @@ const renderSearchMatches =
                                 ? i18nString(UIStrings.lineS, {PH1: resultLabel}) : resultLabel}>
               ${resultLabel}
             </span>
-            <span class="search-match-content" aria-label="${lineContent} line">
+            <span class="search-match-content" aria-label="${lineContent} line"
+                  ${UI.TreeOutline.TreeSearch.highlight(matchRanges, undefined)}>
               ${lineContent}
             </span>
           </button>

package/front_end/panels/security/IPProtectionView.ts

@@ -122,7 +122,7 @@ const allStatusStrings = [
 const INCOGNITO_EXPLANATION_URL = 'https://support.google.com/chrome/answer/95464?hl=en&co=GENIE.Platform%3DDesktop' as
     Platform.DevToolsPath.UrlString;
 
-// A simplified representation of a network request for mock data.
+/** A simplified representation of a network request for mock data. **/
 interface MockNetworkRequest {
   requestId: string;
   url: string;

package/front_end/panels/settings/emulation/components/userAgentClientHintsForm.css

@@ -86,6 +86,10 @@ hr.section-separator {
   height: 18px;
 }
 
+.input-field::placeholder {
+    color: var(--sys-color-on-surface-subtle);
+}
+
 .input-field:focus {
   border: 1px solid var(--sys-color-state-focus-ring);
   outline-width: 0;