chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/front_end/panels/lighthouse/LighthouseStatusView.ts

@@ -9,7 +9,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 
 import {RuntimeSettings} from './LighthouseController.js';
 import lighthouseDialogStyles from './lighthouseDialog.css.js';
-import {type LighthousePanel} from './LighthousePanel.js';
+import type {LighthousePanel} from './LighthousePanel.js';
 
 const UIStrings = {
   /**

package/front_end/panels/lighthouse/LighthouseTimespanView.ts

@@ -7,7 +7,7 @@ import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import lighthouseDialogStyles from './lighthouseDialog.css.js';
-import {type LighthousePanel} from './LighthousePanel.js';
+import type {LighthousePanel} from './LighthousePanel.js';
 
 const UIStrings = {
   /**

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorPane.ts

@@ -95,13 +95,16 @@ export type EventTypes = {
   [Events.VIEW_CLOSED]: string,
 };
 
-class LinearMemoryInspectorView extends UI.Widget.VBox {
+export class LinearMemoryInspectorView extends UI.Widget.VBox {
   #memoryWrapper: LazyUint8Array;
   #address: number;
   #tabId: string;
   #inspector: LinearMemoryInspectorComponents.LinearMemoryInspector.LinearMemoryInspector;
   firstTimeOpen: boolean;
-  constructor(memoryWrapper: LazyUint8Array, address: number|undefined = 0, tabId: string) {
+  readonly #hideValueInspector: boolean;
+
+  constructor(
+      memoryWrapper: LazyUint8Array, address: number|undefined = 0, tabId: string, hideValueInspector?: boolean) {
     super(false);
 
     if (address < 0 || address >= memoryWrapper.length()) {
@@ -111,6 +114,7 @@ class LinearMemoryInspectorView extends UI.Widget.VBox {
     this.#memoryWrapper = memoryWrapper;
     this.#address = address;
     this.#tabId = tabId;
+    this.#hideValueInspector = Boolean(hideValueInspector);
     this.#inspector = new LinearMemoryInspectorComponents.LinearMemoryInspector.LinearMemoryInspector();
     this.#inspector.addEventListener(
         LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent.eventName,
@@ -178,6 +182,7 @@ class LinearMemoryInspectorView extends UI.Widget.VBox {
         valueTypeModes,
         endianness,
         highlightInfo: this.#getHighlightInfo(),
+        hideValueInspector: this.#hideValueInspector,
       };
     });
   }
@@ -195,6 +200,7 @@ class LinearMemoryInspectorView extends UI.Widget.VBox {
         memoryOffset: start,
         outerMemoryLength: this.#memoryWrapper.length(),
         highlightInfo: this.#getHighlightInfo(),
+        hideValueInspector: this.#hideValueInspector,
       };
     });
   }

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

@@ -2,13 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/icon_button/icon_button.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import linearMemoryHighlightChipListStyles from './linearMemoryHighlightChipList.css.js';
-import {type HighlightInfo} from './LinearMemoryViewerUtils.js';
+import type {HighlightInfo} from './LinearMemoryViewerUtils.js';
 
 const UIStrings = {
   /**
@@ -54,8 +56,6 @@ export class JumpToHighlightedMemoryEvent extends Event {
 }
 
 export class LinearMemoryHighlightChipList extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-linear-memory-highlight-chip-list`;
-
   readonly #shadow = this.attachShadow({mode: 'open'});
   #highlightedAreas: HighlightInfo[] = [];
   #focusedMemoryHighlight?: HighlightInfo;
@@ -109,12 +109,12 @@ export class LinearMemoryHighlightChipList extends HTMLElement {
           <button class="delete-highlight-button" title=${i18nString(UIStrings.deleteHighlight)}
               jslog=${VisualLogging.action('linear-memory-inspector.delete-highlight').track({click:true})}
               @click=${():void => this.#onDeleteHighlightClick(highlightInfo)}>
-            <${IconButton.Icon.Icon.litTagName} .data=${{
+            <devtools-icon .data=${{
               iconName: 'cross',
               color: 'var(--icon-default-hover)',
               width: '16px',
               } as IconButton.Icon.IconData}>
-            </${IconButton.Icon.Icon.litTagName}>
+            </devtools-icon>
           </button>
         </div>
       </div>

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

@@ -406,4 +406,15 @@ describeWithLocale('LinearMemoryInspector', () => {
     const parsedAddress = LinearMemoryInspectorComponents.LinearMemoryInspectorUtils.parseAddress(address);
     assert.strictEqual(parsedAddress, undefined);
   });
+
+  it('can hide the value inspector', async () => {
+    const {component, data} = await setUpComponent();
+    component.data = {
+      ...data,
+      hideValueInspector: true,
+    };
+
+    assert.isNotNull(component.shadowRoot);
+    assert.isNull(component.shadowRoot.querySelector(INTERPRETER_SELECTOR));
+  });
 });

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

@@ -11,7 +11,6 @@ import linearMemoryInspectorStyles from './linearMemoryInspector.css.js';
 const {render, html} = LitHtml;
 
 import {
-  LinearMemoryNavigator,
   Mode,
   Navigation,
   type AddressInputChangedEvent,
@@ -20,28 +19,20 @@ import {
   type PageNavigationEvent,
 } from './LinearMemoryNavigator.js';
 
-import {
-  LinearMemoryValueInterpreter,
-  type EndiannessChangedEvent,
-  type LinearMemoryValueInterpreterData,
-  type ValueTypeToggledEvent,
-} from './LinearMemoryValueInterpreter.js';
+import type {
+  EndiannessChangedEvent, LinearMemoryValueInterpreterData, ValueTypeToggledEvent} from
+  './LinearMemoryValueInterpreter.js';
+import './LinearMemoryValueInterpreter.js';
 
-import {
-  LinearMemoryHighlightChipList,
-  type DeleteMemoryHighlightEvent,
-  type JumpToHighlightedMemoryEvent,
-  type LinearMemoryHighlightChipListData,
-} from './LinearMemoryHighlightChipList.js';
+import type {
+  DeleteMemoryHighlightEvent, JumpToHighlightedMemoryEvent, LinearMemoryHighlightChipListData} from
+  './LinearMemoryHighlightChipList.js';
+import './LinearMemoryHighlightChipList.js';
 import {formatAddress, parseAddress} from './LinearMemoryInspectorUtils.js';
-import {
-  LinearMemoryViewer,
-  type ByteSelectedEvent,
-  type LinearMemoryViewerData,
-  type ResizeEvent,
-} from './LinearMemoryViewer.js';
-import {type HighlightInfo} from './LinearMemoryViewerUtils.js';
-import {type JumpToPointerAddressEvent, type ValueTypeModeChangedEvent} from './ValueInterpreterDisplay.js';
+import type {ByteSelectedEvent, LinearMemoryViewerData, ResizeEvent} from './LinearMemoryViewer.js';
+import './LinearMemoryViewer.js';
+import type {HighlightInfo} from './LinearMemoryViewerUtils.js';
+import type {JumpToPointerAddressEvent, ValueTypeModeChangedEvent} from './ValueInterpreterDisplay.js';
 import {
   Endianness,
   VALUE_INTEPRETER_MAX_NUM_BYTES,
@@ -74,6 +65,7 @@ export interface LinearMemoryInspectorData {
   valueTypeModes?: Map<ValueType, ValueTypeMode>;
   endianness?: Endianness;
   highlightInfo?: HighlightInfo;
+  hideValueInspector?: boolean;
 }
 
 export type Settings = {
@@ -134,7 +126,6 @@ class AddressHistoryEntry implements Common.SimpleHistoryManager.HistoryEntry {
 }
 
 export class LinearMemoryInspector extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-linear-memory-inspector-inspector`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #history = new Common.SimpleHistoryManager.SimpleHistoryManager(10);
 
@@ -154,6 +145,8 @@ export class LinearMemoryInspector extends HTMLElement {
   #valueTypes = new Set(this.#valueTypeModes.keys());
   #endianness = Endianness.LITTLE;
 
+  #hideValueInspector = false;
+
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [linearMemoryInspectorStyles];
   }
@@ -183,6 +176,7 @@ export class LinearMemoryInspector extends HTMLElement {
     this.#valueTypes = data.valueTypes || this.#valueTypes;
     this.#endianness = data.endianness || this.#endianness;
     this.#highlightInfo = data.highlightInfo;
+    this.#hideValueInspector = data.hideValueInspector ?? this.#hideValueInspector;
     this.#setAddress(data.address);
     this.#render();
   }
@@ -209,17 +203,17 @@ export class LinearMemoryInspector extends HTMLElement {
     // clang-format off
     render(html`
       <div class="view">
-        <${LinearMemoryNavigator.litTagName}
+        <devtools-linear-memory-inspector-navigator
           .data=${{address: navigatorAddressToShow, valid: navigatorAddressIsValid, mode: this.#currentNavigatorMode, error: errorMsg, canGoBackInHistory, canGoForwardInHistory} as LinearMemoryNavigatorData}
           @refreshrequested=${this.#onRefreshRequest}
           @addressinputchanged=${this.#onAddressChange}
           @pagenavigation=${this.#navigatePage}
-          @historynavigation=${this.#navigateHistory}></${LinearMemoryNavigator.litTagName}>
-          <${LinearMemoryHighlightChipList.litTagName}
+          @historynavigation=${this.#navigateHistory}></devtools-linear-memory-inspector-navigator>
+          <devtools-linear-memory-highlight-chip-list
           .data=${{highlightInfos: highlightedMemoryAreas, focusedMemoryHighlight } as LinearMemoryHighlightChipListData}
           @jumptohighlightedmemory=${this.#onJumpToAddress}>
-          </${LinearMemoryHighlightChipList.litTagName}>
-        <${LinearMemoryViewer.litTagName}
+          </devtools-linear-memory-highlight-chip-list>
+        <devtools-linear-memory-inspector-viewer
           .data=${{
             memory: this.#memory.slice(start - this.#memoryOffset,
             end - this.#memoryOffset),
@@ -229,10 +223,11 @@ export class LinearMemoryInspector extends HTMLElement {
             focusedMemoryHighlight } as LinearMemoryViewerData}
           @byteselected=${this.#onByteSelected}
           @resize=${this.#resize}>
-        </${LinearMemoryViewer.litTagName}>
+        </devtools-linear-memory-inspector-viewer>
       </div>
+      ${this.#hideValueInspector ? LitHtml.nothing : html`
       <div class="value-interpreter">
-        <${LinearMemoryValueInterpreter.litTagName}
+        <devtools-linear-memory-inspector-interpreter
           .data=${{
             value: this.#memory.slice(this.#address - this.#memoryOffset, this.#address + VALUE_INTEPRETER_MAX_NUM_BYTES).buffer,
             valueTypes: this.#valueTypes,
@@ -244,8 +239,8 @@ export class LinearMemoryInspector extends HTMLElement {
           @endiannesschanged=${this.#onEndiannessChanged}
           @jumptopointeraddress=${this.#onJumpToAddress}
           >
-        </${LinearMemoryValueInterpreter.litTagName}/>
-      </div>
+        </devtools-linear-memory-inspector-interpreter/>
+      </div>`}
       `, this.#shadow, {
       host: this,
     });

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

@@ -2,8 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/icon_button/icon_button.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -38,7 +39,7 @@ const UIStrings = {
 const str_ =
     i18n.i18n.registerUIStrings('panels/linear_memory_inspector/components/LinearMemoryNavigator.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {render, html} = LitHtml;
+const {render, html, Directives: {ifDefined}} = LitHtml;
 
 export const enum Navigation {
   BACKWARD = 'Backward',
@@ -98,7 +99,6 @@ export const enum Mode {
 }
 
 export class LinearMemoryNavigator extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-linear-memory-inspector-navigator`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #address = '0';
@@ -170,7 +170,7 @@ export class LinearMemoryNavigator extends HTMLElement {
         jslog=${VisualLogging.textField('linear-memory-inspector.address').track({
       change: true,
     })}
-        title=${this.#valid ? i18nString(UIStrings.enterAddress) : this.#error} @change=${
+        title=${ifDefined(this.#valid ? i18nString(UIStrings.enterAddress) : this.#error)} @change=${
         this.#onAddressChange.bind(this, Mode.SUBMITTED)} @input=${this.#onAddressChange.bind(this, Mode.EDIT)}/>`;
   }
 
@@ -186,7 +186,7 @@ export class LinearMemoryNavigator extends HTMLElement {
         jslog=${VisualLogging.action().track({click: true, keydown: 'Enter'}).context(data.jslogContext)}
         data-button=${data.event.type} title=${data.title}
         @click=${this.dispatchEvent.bind(this, data.event)}>
-        <${IconButton.Icon.Icon.litTagName} name=${data.icon}></${IconButton.Icon.Icon.litTagName}>
+        <devtools-icon name=${data.icon}></devtools-icon>
       </button>`;
   }
 }

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

@@ -2,20 +2,19 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/icon_button/icon_button.js';
+import './ValueInterpreterDisplay.js';
+import './ValueInterpreterSettings.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import linearMemoryValueInterpreterStyles from './linearMemoryValueInterpreter.css.js';
-import {type ValueDisplayData, ValueInterpreterDisplay} from './ValueInterpreterDisplay.js';
+import type {ValueDisplayData} from './ValueInterpreterDisplay.js';
 import {Endianness, type ValueType, type ValueTypeMode} from './ValueInterpreterDisplayUtils.js';
-import {
-  type TypeToggleEvent,
-  ValueInterpreterSettings,
-  type ValueInterpreterSettingsData,
-} from './ValueInterpreterSettings.js';
+import type {TypeToggleEvent, ValueInterpreterSettingsData} from './ValueInterpreterSettings.js';
 
 const UIStrings = {
   /**
@@ -63,8 +62,6 @@ export interface LinearMemoryValueInterpreterData {
 }
 
 export class LinearMemoryValueInterpreter extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-linear-memory-inspector-interpreter`;
-
   readonly #shadow = this.attachShadow({mode: 'open'});
   #endianness = Endianness.LITTLE;
   #buffer = new ArrayBuffer(0);
@@ -96,19 +93,19 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
           <button data-settings="true" class="settings-toolbar-button ${this.#showSettings ? 'active' : ''}"
               title=${i18nString(UIStrings.toggleValueTypeSettings)} @click=${this.#onSettingsToggle}
               jslog=${VisualLogging.toggleSubpane('linear-memory-inspector.toggle-value-settings').track({click: true})}>
-            <${IconButton.Icon.Icon.litTagName} name=${this.#showSettings ? 'gear-filled' : 'gear'}></${IconButton.Icon.Icon.litTagName}>
+            <devtools-icon name=${this.#showSettings ? 'gear-filled' : 'gear'}></devtools-icon>
           </button>
         </div>
         <span class="divider"></span>
         <div>
           ${this.#showSettings ?
             html`
-              <${ValueInterpreterSettings.litTagName}
+              <devtools-linear-memory-inspector-interpreter-settings
                 .data=${{ valueTypes: this.#valueTypes } as ValueInterpreterSettingsData}
                 @typetoggle=${this.#onTypeToggle}>
-              </${ValueInterpreterSettings.litTagName}>` :
+              </devtools-linear-memory-inspector-interpreter-settings>` :
             html`
-              <${ValueInterpreterDisplay.litTagName}
+              <devtools-linear-memory-inspector-interpreter-display
                 .data=${{
                   buffer: this.#buffer,
                   valueTypes: this.#valueTypes,
@@ -116,7 +113,7 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
                   valueTypeModes: this.#valueTypeModeConfig,
                   memoryLength: this.#memoryLength,
                 } as ValueDisplayData}>
-              </${ValueInterpreterDisplay.litTagName}>`}
+              </devtools-linear-memory-inspector-interpreter-display>`}
         </div>
       </div>
     `,

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

@@ -7,7 +7,7 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import {toHexString} from './LinearMemoryInspectorUtils.js';
 import linearMemoryViewerStyles from './linearMemoryViewer.css.js';
-import {type HighlightInfo} from './LinearMemoryViewerUtils.js';
+import type {HighlightInfo} from './LinearMemoryViewerUtils.js';
 
 const {render, html} = LitHtml;
 
@@ -44,8 +44,6 @@ const BYTE_GROUP_MARGIN = 8;
 const BYTE_GROUP_SIZE = 4;
 
 export class LinearMemoryViewer extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-linear-memory-inspector-viewer`;
-
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   readonly #resizeObserver = new ResizeObserver(() => this.#resize());

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

@@ -2,8 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/icon_button/icon_button.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 // eslint-disable-next-line rulesdir/es_modules_import
 import inspectorCommonStyles from '../../../ui/legacy/inspectorCommon.css.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
@@ -87,7 +89,6 @@ export class JumpToPointerAddressEvent extends Event {
 }
 
 export class ValueInterpreterDisplay extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-linear-memory-inspector-interpreter-display`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #endianness = Endianness.LITTLE;
@@ -164,9 +165,9 @@ export class ValueInterpreterDisplay extends HTMLElement {
               <button class="jump-to-button" data-jump="true" title=${buttonTitle} ?disabled=${jumpDisabled}
                 jslog=${VisualLogging.action('linear-memory-inspector.jump-to-address').track({click: true})}
                 @click=${this.#onJumpToAddressClicked.bind(this, Number(address))}>
-                <${IconButton.Icon.Icon.litTagName} .data=${
+                <devtools-icon .data=${
                   {iconName: 'open-externally', color: iconColor, width: '16px'} as IconButton.Icon.IconWithName}>
-                </${IconButton.Icon.Icon.litTagName}>
+                </devtools-icon>
               </button>`}
         </div>
       </div>

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

@@ -61,7 +61,6 @@ export class TypeToggleEvent extends Event {
 }
 
 export class ValueInterpreterSettings extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-linear-memory-inspector-interpreter-settings`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #valueTypes: Set<ValueType> = new Set();

package/front_end/panels/media/EventDisplayTable.ts

@@ -9,7 +9,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import eventDisplayTableStyles from './eventDisplayTable.css.js';
-import {type PlayerEvent} from './MediaModel.js';
+import type {PlayerEvent} from './MediaModel.js';
 
 const UIStrings = {
   /**

package/front_end/panels/media/EventTimelineView.ts

@@ -5,7 +5,7 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import {type PlayerEvent} from './MediaModel.js';
+import type {PlayerEvent} from './MediaModel.js';
 import {
   ColdColorScheme,
   type Event,

package/front_end/panels/media/PlayerDetailView.ts

@@ -3,13 +3,13 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
-import * as UI from '../../ui/legacy/legacy.js';
 import type * as Protocol from '../../generated/protocol.js';
+import * as UI from '../../ui/legacy/legacy.js';
 
 import {PlayerEventsView} from './EventDisplayTable.js';
 import {PlayerEventsTimeline} from './EventTimelineView.js';
-import {type TriggerHandler} from './MainView.js';
-import {type PlayerEvent} from './MediaModel.js';
+import type {TriggerHandler} from './MainView.js';
+import type {PlayerEvent} from './MediaModel.js';
 import {PlayerMessagesView} from './PlayerMessagesView.js';
 import {PlayerPropertiesView} from './PlayerPropertiesView.js';
 

package/front_end/panels/media/PlayerListView.ts

@@ -8,8 +8,8 @@ import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import {type MainView, type TriggerDispatcher} from './MainView.js';
-import {type PlayerEvent} from './MediaModel.js';
+import type {MainView, TriggerDispatcher} from './MainView.js';
+import type {PlayerEvent} from './MediaModel.js';
 import playerListViewStyles from './playerListView.css.js';
 import {PlayerPropertyKeys} from './PlayerPropertiesView.js';
 

package/front_end/panels/mobile_throttling/ThrottlingManager.ts

@@ -81,11 +81,7 @@ const UIStrings = {
   /**
    *@description Tooltip text for an input box that overrides navigator.hardwareConcurrency on the page
    */
-  hardwareConcurrencySettingTooltip: 'Override the value reported by navigator.hardwareConcurrency on the page',
-  /**
-   *@description Icon title in Throttling Manager of the Performance panel
-   */
-  hardwareConcurrencyIsEnabled: 'Hardware concurrency override is enabled',
+  hardwareConcurrencySettingLabel: 'Override the value reported by navigator.hardwareConcurrency',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/mobile_throttling/ThrottlingManager.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -281,9 +277,6 @@ export class ThrottlingManager {
     if (this.cpuThrottlingManager.cpuThrottlingRate() !== SDK.CPUThrottlingManager.CPUThrottlingRates.NO_THROTTLING) {
       warnings.push(i18nString(UIStrings.cpuThrottlingIsEnabled));
     }
-    if (this.hardwareConcurrencyOverrideEnabled) {
-      warnings.push(i18nString(UIStrings.hardwareConcurrencyIsEnabled));
-    }
     UI.InspectorView.InspectorView.instance().setPanelWarnings('timeline', warnings);
   }
 
@@ -323,22 +316,24 @@ export class ThrottlingManager {
     return control;
   }
 
+  /** Hardware Concurrency doesn't store state in a setting. */
   createHardwareConcurrencySelector(): {
-    input: UI.Toolbar.ToolbarItem,
+    numericInput: UI.Toolbar.ToolbarItem,
     reset: UI.Toolbar.ToolbarButton,
     warning: UI.Toolbar.ToolbarItem,
-    toggle: UI.Toolbar.ToolbarItem,
+    checkbox: UI.UIUtils.CheckboxLabel,
   } {
-    const input =
+    const numericInput =
         new UI.Toolbar.ToolbarItem(UI.UIUtils.createInput('devtools-text-input', 'number', 'hardware-concurrency'));
-    input.setTitle(i18nString(UIStrings.hardwareConcurrencySettingTooltip));
-    const inputElement = input.element as HTMLInputElement;
+    numericInput.setTitle(i18nString(UIStrings.hardwareConcurrencySettingLabel));
+    const inputElement = numericInput.element as HTMLInputElement;
     inputElement.min = '1';
-    input.setEnabled(false);
+    numericInput.setEnabled(false);
 
-    const toggle = new UI.Toolbar.ToolbarCheckbox(
-        i18nString(UIStrings.hardwareConcurrency), i18nString(UIStrings.hardwareConcurrencySettingTooltip), undefined,
+    const checkbox = UI.UIUtils.CheckboxLabel.create(
+        i18nString(UIStrings.hardwareConcurrency), false, i18nString(UIStrings.hardwareConcurrencySettingLabel),
         'hardware-concurrency');
+
     const reset = new UI.Toolbar.ToolbarButton('Reset concurrency', 'undo', undefined, 'hardware-concurrency-reset');
     reset.setTitle(i18nString(UIStrings.resetConcurrency));
     const icon = new IconButton.Icon.Icon();
@@ -346,9 +341,9 @@ export class ThrottlingManager {
     const warning = new UI.Toolbar.ToolbarItem(icon);
     warning.setTitle(i18nString(UIStrings.excessConcurrency));
 
-    toggle.inputElement.disabled = true;  // Prevent modification while still wiring things up asynchronously below
-    reset.element.classList.add('timeline-concurrency-hidden');
-    warning.element.classList.add('timeline-concurrency-hidden');
+    checkbox.checkboxElement.disabled = true;  // Prevent modification while still wiring things up asynchronously below
+    reset.element.classList.add('concurrency-hidden');
+    warning.element.classList.add('concurrency-hidden');
 
     void this.cpuThrottlingManager.getHardwareConcurrency().then(defaultValue => {
       if (defaultValue === undefined) {
@@ -360,25 +355,24 @@ export class ThrottlingManager {
           this.cpuThrottlingManager.setHardwareConcurrency(value);
         }
         if (value > defaultValue) {
-          warning.element.classList.remove('timeline-concurrency-hidden');
+          warning.element.classList.remove('concurrency-hidden');
         } else {
-          warning.element.classList.add('timeline-concurrency-hidden');
+          warning.element.classList.add('concurrency-hidden');
         }
         if (value === defaultValue) {
-          reset.element.classList.add('timeline-concurrency-hidden');
+          reset.element.classList.add('concurrency-hidden');
         } else {
-          reset.element.classList.remove('timeline-concurrency-hidden');
+          reset.element.classList.remove('concurrency-hidden');
         }
       };
 
       inputElement.value = `${defaultValue}`;
       inputElement.oninput = () => setHardwareConcurrency(Number(inputElement.value));
-      toggle.inputElement.disabled = false;
-      toggle.inputElement.addEventListener('change', () => {
-        this.#hardwareConcurrencyOverrideEnabled = toggle.checked();
-        this.updatePanelIcon();
+      checkbox.checkboxElement.disabled = false;
+      checkbox.checkboxElement.addEventListener('change', () => {
+        this.#hardwareConcurrencyOverrideEnabled = checkbox.checkboxElement.checked;
 
-        input.setEnabled(this.hardwareConcurrencyOverrideEnabled);
+        numericInput.setEnabled(this.hardwareConcurrencyOverrideEnabled);
         setHardwareConcurrency(this.hardwareConcurrencyOverrideEnabled ? Number(inputElement.value) : defaultValue);
       });
 
@@ -388,7 +382,7 @@ export class ThrottlingManager {
       });
     });
 
-    return {input, reset, warning, toggle};
+    return {numericInput, reset, warning, checkbox};
   }
 
   setHardwareConcurrency(concurrency: number): void {

package/front_end/panels/network/NetworkConfigView.ts

@@ -246,7 +246,6 @@ export class NetworkConfigView extends UI.Widget.VBox {
     customUserAgentSelectBox.appendChild(customSelectAndInput.input);
     customUserAgentSelectBox.appendChild(customSelectAndInput.error);
 
-    const clientHintsContainer = customUserAgentSelectBox.createChild('div', 'client-hints-form');
     const clientHints = new EmulationComponents.UserAgentClientHintsForm.UserAgentClientHintsForm();
     const userAgentMetaDataSetting = userAgentMetadataSetting.get();
     const initialUserAgentMetaData = getUserAgentMetadata(customSelectAndInput.select.value);
@@ -255,7 +254,7 @@ export class NetworkConfigView extends UI.Widget.VBox {
       showSubmitButton: true,
       metaData: userAgentMetaDataSetting || initialUserAgentMetaData || undefined,
     };
-    clientHintsContainer.appendChild(clientHints);
+    customUserAgentSelectBox.appendChild(clientHints);
 
     customSelectAndInput.select.addEventListener('user-agent-change', (event: Event) => {
       const userStringValue = (event as CustomEvent).detail.value;