chrome-devtools-frontend 1.0.945884 → 1.0.948295

package/front_end/panels/elements/ColorSwatchPopoverIcon.ts

@@ -3,9 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as ColorPicker from '../../ui/legacy/components/color_picker/color_picker.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
@@ -55,9 +53,6 @@ export class BezierPopoverIcon {
   }
 
   private iconClick(event: Event): void {
-    if (Root.Runtime.experiments.isEnabled('fontEditor')) {
-      Host.userMetrics.cssEditorOpened('bezierEditor');
-    }
     event.consume(true);
     if (this.swatchPopoverHelper.isShowing()) {
       this.swatchPopoverHelper.hide(true);
@@ -163,9 +158,6 @@ export class ColorSwatchPopoverIcon {
   }
 
   private iconClick(event: Event): void {
-    if (Root.Runtime.experiments.isEnabled('fontEditor')) {
-      Host.userMetrics.cssEditorOpened('colorPicker');
-    }
     event.consume(true);
     this.showPopover();
   }
@@ -278,9 +270,6 @@ export class ShadowSwatchPopoverHelper {
   }
 
   private iconClick(event: Event): void {
-    if (Root.Runtime.experiments.isEnabled('fontEditor')) {
-      Host.userMetrics.cssEditorOpened('shadowEditor');
-    }
     event.consume(true);
     this.showPopover();
   }

package/front_end/panels/elements/ElementsPanel.ts

@@ -291,8 +291,16 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   }
 
   private showDOMTree(): void {
-    // TODO(meredithl): Scroll to inspected DOM node.
     this.splitWidget.setMainWidget(this.searchableViewInternal);
+    const selectedNode = this.selectedDOMNode();
+    if (!selectedNode) {
+      return;
+    }
+    const treeElement = this.treeElementForNode(selectedNode);
+    if (!treeElement) {
+      return;
+    }
+    treeElement.select();
   }
 
   static instance(opts: {

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1899,7 +1899,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.hideSearchHighlight();
 
     const text = this.listItemElement.textContent || '';
-    const regexObject = createPlainTextSearchRegex(this.searchQuery, 'gi');
+    const regexObject = Platform.StringUtilities.createPlainTextSearchRegex(this.searchQuery, 'gi');
 
     let match = regexObject.exec(text);
     const matchRanges = [];

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -1616,7 +1616,6 @@ export class StylePropertiesSection {
 
   private onFontEditorButtonClicked(): void {
     if (this.fontEditorSectionManager && this.fontEditorButton) {
-      Host.userMetrics.cssEditorOpened('fontEditor');
       this.fontEditorSectionManager.showPopover(this.fontEditorButton.element, this.parentPane);
     }
   }

package/front_end/panels/elements/components/ElementsBreadcrumbs.ts

@@ -276,7 +276,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       LitHtml.render(LitHtml.html`
-        <nav class="crumbs" aria-label="${i18nString(UIStrings.breadcrumbs)}">
+        <nav class="crumbs" aria-label=${i18nString(UIStrings.breadcrumbs)}>
           ${this.renderOverflowButton('left', this.userScrollPosition === 'start')}
 
           <div class="crumbs-window" @scroll=${this.onCrumbsWindowScroll}>

package/front_end/panels/elements/elementsTreeOutline.css

@@ -186,19 +186,6 @@
   margin-right: 4px;
 }
 
-.CodeMirror {
-  background-color: var(--color-background);
-  height: 300px !important; /* stylelint-disable-line declaration-no-important */
-}
-
-.CodeMirror-lines {
-  padding: 0;
-}
-
-.CodeMirror pre {
-  padding: 0;
-}
-
 button,
 input,
 select {

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -225,10 +225,6 @@ export class DeviceModeToolbar {
       showMediaInspectorSetting: Common.Settings.Setting<boolean>,
       showRulersSetting: Common.Settings.Setting<boolean>) {
     this.model = model;
-    const device = model.device();
-    if (device) {
-      this.recordDeviceChange(device, null);
-    }
     this.showMediaInspectorSetting = showMediaInspectorSetting;
     this.showRulersSetting = showRulersSetting;
 
@@ -302,16 +298,6 @@ export class DeviceModeToolbar {
     }
   }
 
-  private recordDeviceChange(
-      device: EmulationModel.EmulatedDevices.EmulatedDevice,
-      oldDevice: EmulationModel.EmulatedDevices.EmulatedDevice|null): void {
-    if (device !== oldDevice && device && device.isDualScreen) {
-      // When we start emulating a device, whether we start a new emulation session, or switch to
-      // a new device, if the device is dual screen, we count this once.
-      Host.userMetrics.dualScreenDeviceEmulated(Host.UserMetrics.DualScreenDeviceEmulated.DualScreenDeviceSelected);
-    }
-  }
-
   private createEmptyToolbarElement(): Element {
     const element = document.createElement('div');
     element.classList.add('device-mode-empty-toolbar-element');
@@ -527,7 +513,6 @@ export class DeviceModeToolbar {
 
   private emulateDevice(device: EmulationModel.EmulatedDevices.EmulatedDevice): void {
     const scale = this.autoAdjustScaleSetting.get() ? undefined : this.model.scaleSetting().get();
-    this.recordDeviceChange(device, this.model.device());
     this.model.emulate(
         EmulationModel.DeviceModeModel.Type.Device, device, this.lastMode.get(device) || device.modes[0], scale);
   }
@@ -615,7 +600,6 @@ export class DeviceModeToolbar {
       return;
     }
 
-    Host.userMetrics.dualScreenDeviceEmulated(Host.UserMetrics.DualScreenDeviceEmulated.SpanButtonClicked);
     const scale = this.autoAdjustScaleSetting.get() ? undefined : this.model.scaleSetting().get();
     const mode = this.model.mode();
     if (!mode) {

package/front_end/panels/issues/CorsIssueDetailsView.ts

@@ -174,11 +174,16 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
         this.appendColumnTitle(header, i18nString(UIStrings.allowCredentialsValueFromHeader));
         break;
       case IssuesManager.CorsIssue.IssueCode.InsecurePrivateNetwork:
-      case IssuesManager.CorsIssue.IssueCode.InsecurePrivateNetworkPreflight:
         this.appendColumnTitle(header, i18nString(UIStrings.resourceAddressSpace));
         this.appendColumnTitle(header, i18nString(UIStrings.initiatorAddressSpace));
         this.appendColumnTitle(header, i18nString(UIStrings.initiatorContext));
         break;
+      case IssuesManager.CorsIssue.IssueCode.PreflightAllowPrivateNetworkError:
+        this.appendColumnTitle(header, i18nString(UIStrings.preflightRequest));
+        this.appendColumnTitle(header, i18nString(UIStrings.invalidValue));
+        this.appendColumnTitle(header, i18nString(UIStrings.initiatorAddressSpace));
+        this.appendColumnTitle(header, i18nString(UIStrings.initiatorContext));
+        break;
       case IssuesManager.CorsIssue.IssueCode.MethodDisallowedByPreflightResponse:
         this.appendColumnTitle(header, i18nString(UIStrings.preflightRequest));
         this.appendColumnTitle(header, i18nString(UIStrings.disallowedRequestMethod));
@@ -249,6 +254,9 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
       case Protocol.Network.CorsError.InvalidAllowCredentials:
       case Protocol.Network.CorsError.PreflightInvalidAllowCredentials:
         return 'Access-Control-Allow-Credentials';
+      case Protocol.Network.CorsError.PreflightMissingAllowPrivateNetwork:
+      case Protocol.Network.CorsError.PreflightInvalidAllowPrivateNetwork:
+        return 'Access-Control-Allow-Private-Network';
       case Protocol.Network.CorsError.RedirectContainsCredentials:
       case Protocol.Network.CorsError.PreflightDisallowedRedirect:
         return 'Location';
@@ -360,13 +368,21 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
         this.appendIssueDetailCell(element, details.corsErrorStatus.failedParameter, 'code-example');
         break;
       case IssuesManager.CorsIssue.IssueCode.InsecurePrivateNetwork:
-      case IssuesManager.CorsIssue.IssueCode.InsecurePrivateNetworkPreflight:
         element.appendChild(this.createRequestCell(details.request, opts));
         this.appendStatus(element, details.isWarning);
         this.appendIssueDetailCell(element, details.resourceIPAddressSpace ?? '');
         this.appendIssueDetailCell(element, details.clientSecurityState?.initiatorIPAddressSpace ?? '');
         this.appendSecureContextCell(element, details.clientSecurityState?.initiatorIsSecureContext);
         break;
+      case IssuesManager.CorsIssue.IssueCode.PreflightAllowPrivateNetworkError: {
+        element.appendChild(this.createRequestCell(details.request, opts));
+        this.appendStatus(element, details.isWarning);
+        element.appendChild(this.createRequestCell(details.request, {...opts, linkToPreflight: true, highlightHeader}));
+        this.appendIssueDetailCell(element, details.corsErrorStatus.failedParameter, 'code-example');
+        this.appendIssueDetailCell(element, details.clientSecurityState?.initiatorIPAddressSpace ?? '');
+        this.appendSecureContextCell(element, details.clientSecurityState?.initiatorIsSecureContext);
+        break;
+      }
       case IssuesManager.CorsIssue.IssueCode.MethodDisallowedByPreflightResponse:
         element.appendChild(this.createRequestCell(details.request, opts));
         this.appendStatus(element, details.isWarning);

package/front_end/panels/lighthouse/lighthouse-meta.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type * as Lighthouse from './lighthouse.js';
@@ -22,8 +21,6 @@ let loadedLighthouseModule: (typeof Lighthouse|undefined);
 
 async function loadLighthouseModule(): Promise<typeof Lighthouse> {
   if (!loadedLighthouseModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/lighthouse');
     loadedLighthouseModule = await import('./lighthouse.js');
   }
   return loadedLighthouseModule;

package/front_end/panels/network/NetworkConfigView.ts

@@ -50,6 +50,10 @@ const UIStrings = {
    * a set of checkboxes to override the content encodings supported by the browser.
    */
   acceptedEncoding: 'Accepted `Content-Encoding`s',
+  /**
+  * @description Status text for successful update of client hints.
+  */
+  clientHintsStatusText: 'User agent updated.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/network/NetworkConfigView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -246,10 +250,12 @@ export class NetworkConfigView extends UI.Widget.VBox {
         showMobileCheckbox: true,
         showSubmitButton: true,
       };
+      userAgentUpdateButtonStatusText.textContent = '';
     });
 
     clientHints.addEventListener('clienthintschange', () => {
       customSelectAndInput.select.value = 'custom';
+      userAgentUpdateButtonStatusText.textContent = '';
     });
 
     clientHints.addEventListener('clienthintssubmit', (event: Event) => {
@@ -257,8 +263,12 @@ export class NetworkConfigView extends UI.Widget.VBox {
       const customUA = customUserAgentSetting.get();
       userAgentMetadataSetting.set(metaData);
       SDK.NetworkManager.MultitargetNetworkManager.instance().setCustomUserAgentOverride(customUA, metaData);
+      userAgentUpdateButtonStatusText.textContent = i18nString(UIStrings.clientHintsStatusText);
     });
 
+    const userAgentUpdateButtonStatusText = section.createChild('span', 'status-text');
+    userAgentUpdateButtonStatusText.textContent = '';
+
     userAgentSelectBoxChanged();
 
     function userAgentSelectBoxChanged(): void {

package/front_end/panels/network/NetworkItemView.ts

@@ -250,6 +250,9 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
   }
 
   private async maybeAppendPayloadPanel(): Promise<void> {
+    if (this.hasTab('payload')) {
+      return;
+    }
     if (this.requestInternal.queryParameters || await this.requestInternal.requestFormData()) {
       this.payloadView = new RequestPayloadView(this.requestInternal);
       this.appendTab(

package/front_end/panels/network/NetworkWaterfallColumn.ts

@@ -16,6 +16,7 @@ import {RequestTimeRangeNameToColor} from './NetworkOverview.js';
 import type {Label, NetworkTimeCalculator} from './NetworkTimeCalculator.js';
 import type {RequestTimeRange} from './RequestTimingView.js';
 import {RequestTimeRangeNames, RequestTimingView} from './RequestTimingView.js';
+import networkingTimingTableStyles from './networkTimingTable.css.js';
 
 const BAR_SPACING = 1;
 
@@ -271,6 +272,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
       show: (popover: UI.GlassPane.GlassPane): Promise<true> => {
         const content =
             RequestTimingView.createTimingTable((request as SDK.NetworkRequest.NetworkRequest), this.calculator);
+        popover.registerCSSFiles([networkingTimingTableStyles]);
         popover.contentElement.appendChild(content);
         return Promise.resolve(true);
       },

package/front_end/panels/network/networkConfigView.css

@@ -99,3 +99,8 @@
   margin-top: 14px;
   width: min(100%, 400px);
 }
+
+.status-text {
+  padding: 10px;
+  color: var(--color-accent-green);
+}

package/front_end/panels/profiler/CPUProfileFlameChart.ts

@@ -30,6 +30,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -217,7 +218,8 @@ export class CPUProfileFlameChart extends
   }
 
   performSearch(searchConfig: UI.SearchableView.SearchConfig, _shouldJump: boolean, jumpBackwards?: boolean): void {
-    const matcher = createPlainTextSearchRegex(searchConfig.query, searchConfig.caseSensitive ? '' : 'i');
+    const matcher =
+        Platform.StringUtilities.createPlainTextSearchRegex(searchConfig.query, searchConfig.caseSensitive ? '' : 'i');
 
     const selectedEntryIndex: number = this.searchResultIndex !== -1 ? this.searchResults[this.searchResultIndex] : -1;
     this.searchResults = [];

package/front_end/panels/profiler/ProfileDataGrid.ts

@@ -28,6 +28,7 @@
  */
 
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 
 import type * as SDK from '../../core/sdk/sdk.js';
@@ -528,7 +529,7 @@ export class ProfileDataGridTree implements UI.SearchableView.Searchable {
       equalTo = true;
     }
 
-    const matcher = createPlainTextSearchRegex(query, 'i');
+    const matcher = Platform.StringUtilities.createPlainTextSearchRegex(query, 'i');
 
     function matchesQuery(profileDataGridNode: ProfileDataGridNode): boolean {
       profileDataGridNode.searchMatchedSelfColumn = false;

package/front_end/panels/profiler/profilesPanel.css

@@ -55,7 +55,7 @@
 
 .profile-view .data-grid span.percent-column {
   color: var(--color-text-secondary);
-  width: 55px;
+  width: 9ex;
   display: inline-block;
 }
 

package/front_end/panels/search/SearchView.ts

@@ -432,18 +432,38 @@ export class SearchView extends UI.Widget.VBox {
     }
   }
 
+  /**
+   * Handles keydown event on panel itself for handling expand/collapse all shortcut
+   *
+   * We use `event.code` instead of `event.key` here to check whether the shortcut is triggered.
+   * The reason is, `event.key` is dependent on the modification keys, locale and keyboard layout.
+   * Usually it is useful when we care about the character that needs to be printed.
+   *
+   * However, our aim in here is to assign a shortcut to the physical key combination on the keyboard
+   * not on the character that the key combination prints.
+   *
+   * For example, `Cmd + [` shortcut in global shortcuts map to focusing on previous panel.
+   * In Turkish - Q keyboard layout, the key combination that triggers the shortcut prints `ğ`
+   * character. Whereas in Turkish - Q Legacy keyboard layout, the shortcut that triggers focusing
+   * on previous panel prints `[` character. So, if we use `event.key` and check
+   * whether it is `[`, we break the shortcut in Turkish - Q keyboard layout.
+   *
+   * @param event KeyboardEvent
+   */
   private onKeyDownOnPanel(event: KeyboardEvent): void {
     const isMac = Host.Platform.isMac();
     // "Command + Alt + ]" for Mac
-    const shouldShowAllForMac = isMac && event.metaKey && !event.ctrlKey && event.altKey && event.key === ']';
+    const shouldShowAllForMac =
+        isMac && event.metaKey && !event.ctrlKey && event.altKey && event.code === 'BracketRight';
     // "Ctrl + Shift + }" for other platforms
     const shouldShowAllForOtherPlatforms =
-        !isMac && event.ctrlKey && !event.metaKey && event.shiftKey && event.key === '}';
+        !isMac && event.ctrlKey && !event.metaKey && event.shiftKey && event.code === 'BracketRight';
     // "Command + Alt + [" for Mac
-    const shouldCollapseAllForMac = isMac && event.metaKey && !event.ctrlKey && event.altKey && event.key === '[';
+    const shouldCollapseAllForMac =
+        isMac && event.metaKey && !event.ctrlKey && event.altKey && event.code === 'BracketLeft';
     // "Command + Alt + {" for other platforms
     const shouldCollapseAllForOtherPlatforms =
-        !isMac && event.ctrlKey && !event.metaKey && event.shiftKey && event.key === '{';
+        !isMac && event.ctrlKey && !event.metaKey && event.shiftKey && event.code === 'BracketLeft';
 
     if (shouldShowAllForMac || shouldShowAllForOtherPlatforms) {
       this.searchResultsPane?.showAllMatches();

package/front_end/panels/settings/components/SyncSection.ts

@@ -92,7 +92,7 @@ function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.Sync
     // clang-format off
     return LitHtml.html`
       <span class="warning">
-        ${i18nString(UIStrings.syncDisabled)} <a href="${link}" class="link" target="_blank"
+        ${i18nString(UIStrings.syncDisabled)} <a href=${link} class="link" target="_blank"
           @click=${(e: Event): void => openSettingsTab(link, e)}
           @keydown=${(e: Event): void => openSettingsTab(link, e)}>${i18nString(UIStrings.settings)}</x-link>
       </span>`;
@@ -104,7 +104,7 @@ function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.Sync
     // clang-format off
     return LitHtml.html`
       <span class="warning">
-        ${i18nString(UIStrings.preferencesSyncDisabled)} <a href="${link}" class="link" target="_blank"
+        ${i18nString(UIStrings.preferencesSyncDisabled)} <a href=${link} class="link" target="_blank"
           @click=${(e: Event): void => openSettingsTab(link, e)}
           @keydown=${(e: Event): void => openSettingsTab(link, e)}>${i18nString(UIStrings.settings)}</x-link>
       </span>`;

package/front_end/panels/settings/emulation/components/UserAgentClientHintsForm.ts

@@ -3,8 +3,10 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../../core/i18n/i18n.js';
+import * as Buttons from '../../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+
 import userAgentClientHintsFormStyles from './userAgentClientHintsForm.css.js';
 
 import type * as Protocol from '../../../../generated/protocol.js';
@@ -354,9 +356,9 @@ export class UserAgentClientHintsForm extends HTMLElement {
         <input
           class="input-field"
           type="text"
-          @input="${handleInputChange}"
-          .value="${value}"
-          placeholder="${placeholder}"
+          @input=${handleInputChange}
+          .value=${value}
+          placeholder=${placeholder}
         />
       </label>
     `;
@@ -374,22 +376,22 @@ export class UserAgentClientHintsForm extends HTMLElement {
     };
     return LitHtml.html`
       <span class="full-row label">${i18nString(UIStrings.platformLabel)}</span>
-      <div class="full-row brand-row" aria-label="${i18nString(UIStrings.platformProperties)}" role="group">
+      <div class="full-row brand-row" aria-label=${i18nString(UIStrings.platformProperties)} role="group">
         <input
           class="input-field half-row"
           type="text"
-          @input="${handlePlatformNameChange}"
-          .value="${platform}"
-          placeholder="${i18nString(UIStrings.platformPlaceholder)}"
-          aria-label="${i18nString(UIStrings.platformLabel)}"
+          @input=${handlePlatformNameChange}
+          .value=${platform}
+          placeholder=${i18nString(UIStrings.platformPlaceholder)}
+          aria-label=${i18nString(UIStrings.platformLabel)}
         />
         <input
           class="input-field half-row"
           type="text"
-          @input="${handlePlatformVersionChange}"
-          .value="${platformVersion}"
-          placeholder="${i18nString(UIStrings.platformVersion)}"
-          aria-label="${i18nString(UIStrings.platformVersion)}"
+          @input=${handlePlatformVersionChange}
+          .value=${platformVersion}
+          placeholder=${i18nString(UIStrings.platformVersion)}
+          aria-label=${i18nString(UIStrings.platformVersion)}
         />
       </div>
     `;
@@ -407,20 +409,20 @@ export class UserAgentClientHintsForm extends HTMLElement {
     };
     const mobileCheckboxInput = this.showMobileCheckbox ? LitHtml.html`
       <label class="mobile-checkbox-container">
-        <input type="checkbox" @input="${handleMobileChange}" .checked="${mobile}" />
+        <input type="checkbox" @input=${handleMobileChange} .checked=${mobile} />
         ${i18nString(UIStrings.mobileCheckboxLabel)}
       </label>
     ` :
                                                           LitHtml.html``;
     return LitHtml.html`
       <span class="full-row label">${i18nString(UIStrings.deviceModel)}</span>
-      <div class="full-row brand-row" aria-label="${i18nString(UIStrings.deviceProperties)}" role="group">
+      <div class="full-row brand-row" aria-label=${i18nString(UIStrings.deviceProperties)} role="group">
         <input
           class="input-field ${this.showMobileCheckbox ? 'device-model-input' : 'full-row'}"
           type="text"
-          @input="${handleDeviceModelChange}"
-          .value="${model}"
-          placeholder="${i18nString(UIStrings.deviceModel)}"
+          @input=${handleDeviceModelChange}
+          .value=${model}
+          placeholder=${i18nString(UIStrings.deviceModel)}
         />
         ${mobileCheckboxInput}
       </div>
@@ -457,41 +459,41 @@ export class UserAgentClientHintsForm extends HTMLElement {
         this.handleBrandInputChange(value, index, 'brandVersion');
       };
       return LitHtml.html`
-        <div class="full-row brand-row" aria-label="${i18nString(UIStrings.brandProperties)}" role="group">
+        <div class="full-row brand-row" aria-label=${i18nString(UIStrings.brandProperties)} role="group">
           <input
             class="input-field brand-name-input"
             type="text"
-            @input="${handleBrandBrowserChange}"
-            .value="${brand}"
+            @input=${handleBrandBrowserChange}
+            .value=${brand}
             id="brand-${index + 1}-input"
-            placeholder="${i18nString(UIStrings.brandName)}"
-            aria-label="${i18nString(UIStrings.brandNameAriaLabel, {
+            placeholder=${i18nString(UIStrings.brandName)}
+            aria-label=${i18nString(UIStrings.brandNameAriaLabel, {
         PH1: index + 1,
-      })}"
+      })}
           />
           <input
             class="input-field"
             type="text"
-            @input="${handleBrandVersionChange}"
-            .value="${version}"
-            placeholder="${i18nString(UIStrings.version)}"
-            aria-label="${i18nString(UIStrings.brandVersionAriaLabel, {
+            @input=${handleBrandVersionChange}
+            .value=${version}
+            placeholder=${i18nString(UIStrings.version)}
+            aria-label=${i18nString(UIStrings.brandVersionAriaLabel, {
         PH1: index + 1,
-      })}"
+      })}
           />
           <${IconButton.Icon.Icon.litTagName}
             .data=${
           {color: 'var(--client-hints-form-icon-color)', iconName: 'trash_bin_icon', width: '10px', height: '14px'} as
           IconButton.Icon.IconData}
-            title="${i18nString(UIStrings.deleteTooltip)}"
+            title=${i18nString(UIStrings.deleteTooltip)}
             class="delete-icon"
             tabindex="0"
             role="button"
-            @click="${handleDeleteClick}"
-            @keypress="${handleKeyPress}"
-            aria-label="${i18nString(UIStrings.brandDeleteAriaLabel, {
+            @click=${handleDeleteClick}
+            @keypress=${handleKeyPress}
+            aria-label=${i18nString(UIStrings.brandDeleteAriaLabel, {
         PH1: index + 1,
-      })}"
+      })}
           >
           </${IconButton.Icon.Icon.litTagName}>
         </div>
@@ -505,9 +507,9 @@ export class UserAgentClientHintsForm extends HTMLElement {
         role="button"
         tabindex="0"
         id="add-brand-button"
-        aria-label="${i18nString(UIStrings.addBrand)}"
-        @click="${this.handleAddBrandClick}"
-        @keypress="${this.handleAddBrandKeyPress}"
+        aria-label=${i18nString(UIStrings.addBrand)}
+        @click=${this.handleAddBrandClick}
+        @keypress=${this.handleAddBrandKeyPress}
       >
         <${IconButton.Icon.Icon.litTagName}
           aria-hidden="true"
@@ -532,12 +534,12 @@ export class UserAgentClientHintsForm extends HTMLElement {
         'architecture');
     const deviceModelSection = this.renderDeviceModelSection();
     const submitButton = this.showSubmitButton ? LitHtml.html`
-      <button
-        type="submit"
-        class="submit-button full-row"
+      <${Buttons.Button.Button.litTagName}
+        .variant=${Buttons.Button.Variant.SECONDARY}
+        .type=${'submit'}
       >
         ${i18nString(UIStrings.update)}
-      </button>
+      </${Buttons.Button.Button.litTagName}>
     ` :
                                                  LitHtml.html``;
     const output = LitHtml.html`
@@ -545,16 +547,16 @@ export class UserAgentClientHintsForm extends HTMLElement {
         <div
           class="tree-title"
           role="button"
-          @click="${this.handleTreeClick}"
+          @click=${this.handleTreeClick}
           tabindex="0"
-          @keydown="${this.handleTreeExpand}"
-          aria-expanded="${this.isFormOpened}"
+          @keydown=${this.handleTreeExpand}
+          aria-expanded=${this.isFormOpened}
           aria-controls="form-container"
-          @disabled="${this.isFormDisabled}"
-          aria-disabled="${this.isFormDisabled}"
+          @disabled=${this.isFormDisabled}
+          aria-disabled=${this.isFormDisabled}
         >
           <${IconButton.Icon.Icon.litTagName}
-            class="${this.isFormOpened ? '' : 'rotate-icon'}"
+            class=${this.isFormOpened ? '' : 'rotate-icon'}
             .data=${
         {color: 'var(--client-hints-form-icon-color)', iconName: 'chromeSelect', width: '20px'} as
         IconButton.Icon.IconData}
@@ -566,8 +568,8 @@ export class UserAgentClientHintsForm extends HTMLElement {
            href="https://web.dev/user-agent-client-hints/"
            target="_blank"
            class="info-link"
-           @keypress="${this.handleLinkPress}"
-           aria-label="${i18nString(UIStrings.userAgentClientHintsInfo)}"
+           @keypress=${this.handleLinkPress}
+           aria-label=${i18nString(UIStrings.userAgentClientHintsInfo)}
           >
             <${IconButton.Icon.Icon.litTagName}
               .data=${
@@ -580,7 +582,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
         <form
           id="form-container"
           class="form-container ${this.isFormOpened ? '' : 'hide-container'}"
-          @submit="${this.handleSubmit}"
+          @submit=${this.handleSubmit}
         >
           ${brandSection}
           ${fullBrowserInput}
@@ -589,7 +591,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
           ${deviceModelSection}
           ${submitButton}
         </form>
-        <div aria-live="polite" aria-label="${this.brandsModifiedAriaMessage}"></div>
+        <div aria-live="polite" aria-label=${this.brandsModifiedAriaMessage}></div>
       </section>
     `;
     // clang-format off

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

@@ -96,18 +96,6 @@
   margin-left: 5px;
 }
 
-.submit-button {
-  border: none;
-  border-radius: 2px;
-  font-weight: normal;
-  height: 24px;
-  font-size: 12px;
-  padding: 0 12px;
-  cursor: pointer;
-  background-color: var(--color-primary-variant);
-  color: var(--color-text-primary);
-}
-
 .hide-container {
   display: none;
 }