chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/front_end/panels/recorder/components/StartView.ts

@@ -3,19 +3,22 @@
 // found in the LICENSE file.
 
 import '../../../ui/legacy/legacy.js';
+import '../../../ui/components/panel_introduction_steps/panel_introduction_steps.js';
+import '../../../ui/components/panel_feedback/panel_feedback.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import * as PanelFeedback from '../../../ui/components/panel_feedback/panel_feedback.js';
-import * as PanelIntroductionSteps from '../../../ui/components/panel_introduction_steps/panel_introduction_steps.js';
+import type * as PanelFeedback from '../../../ui/components/panel_feedback/panel_feedback.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Actions from '../recorder-actions/recorder-actions.js';
 
 import startViewStyles from './startView.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    * @description The header of the start page in the Recorder panel.
@@ -65,7 +68,6 @@ export class CreateRecordingEvent extends Event {
 }
 
 export class StartView extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-start-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   constructor() {
@@ -85,43 +87,37 @@ export class StartView extends HTMLElement {
   #render = (): void => {
     // clang-format off
     LitHtml.render(
-      LitHtml.html`
+      html`
         <div class="wrapper">
-          <${
-            PanelIntroductionSteps.PanelIntroductionSteps.PanelIntroductionSteps
-              .litTagName
-          }>
+          <devtools-panel-introduction-steps>
             <span slot="title">${i18nString(UIStrings.header)}</span>
             <span slot="step-1">${i18nString(UIStrings.step1)}</span>
             <span slot="step-2">${i18nString(UIStrings.step2)}</span>
             <span slot="step-3">${i18nString(UIStrings.step3)}</span>
-          </${
-            PanelIntroductionSteps.PanelIntroductionSteps.PanelIntroductionSteps
-              .litTagName
-          }>
+          </devtools-panel-introduction-steps>
           <div class="fit-content">
-            <${Buttons.Button.Button.litTagName} .variant=${
+            <devtools-button .variant=${
         Buttons.Button.Variant.PRIMARY
       } @click=${this.#onClick}
               .jslogContext=${Actions.RecorderActions.CREATE_RECORDING}>
               ${i18nString(UIStrings.createRecording)}
-            </${Buttons.Button.Button.litTagName}>
+            </devtools-button>
           </div>
-          <${PanelFeedback.PanelFeedback.PanelFeedback.litTagName} .data=${
+          <devtools-panel-feedback .data=${
         {
           feedbackUrl: FEEDBACK_URL,
           quickStartUrl: DOC_URL,
           quickStartLinkText: i18nString(UIStrings.quickStart),
         } as PanelFeedback.PanelFeedback.PanelFeedbackData
       }>
-          </${PanelFeedback.PanelFeedback.PanelFeedback.litTagName}>
+          </devtools-panel-feedback>
           <div class="align-right">
-            <${PanelFeedback.FeedbackButton.FeedbackButton.litTagName} .data=${
+            <devtools-feedback-button .data=${
         {
           feedbackUrl: FEEDBACK_URL,
         } as PanelFeedback.FeedbackButton.FeedbackButtonData
       }>
-            </${PanelFeedback.FeedbackButton.FeedbackButton.litTagName}>
+            </devtools-feedback-button>
           </div>
         </div>
       `,

package/front_end/panels/recorder/components/StepEditor.ts

@@ -466,7 +466,7 @@ export class EditorState {
 class RecorderSelectorPickerButton extends LitElement {
   static override styles = [stepEditorStyles];
 
-  @property() declare disabled: boolean;
+  @property({type: Boolean}) declare disabled: boolean;
 
   #picker = new Controllers.SelectorPicker.SelectorPicker(this);
 
@@ -516,8 +516,8 @@ export class StepEditor extends LitElement {
   @state() private declare state: DeepImmutable<EditorState>;
   @state() private declare error: string|undefined;
 
-  @property() declare isTypeEditable: boolean;
-  @property() declare disabled: boolean;
+  @property({type: Boolean}) declare isTypeEditable: boolean;
+  @property({type: Boolean}) declare disabled: boolean;
 
   #renderedAttributes: Set<Attribute> = new Set();
 

package/front_end/panels/recorder/components/StepView.ts

@@ -8,10 +8,13 @@
    about it. */
 /* eslint-disable rulesdir/lit_html_host_this */
 
+import '../../../ui/components/icon_button/icon_button.js';
+import './StepEditor.js';
+import './TimelineSection.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as Menus from '../../../ui/components/menus/menus.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
@@ -19,12 +22,11 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import type * as Converters from '../converters/converters.js';
 import * as Models from '../models/models.js';
 
-import {type StepEditedEvent} from './StepEditor.js';
+import type {StepEditedEvent} from './StepEditor.js';
 import stepViewStyles from './stepView.css.js';
-import {
-  TimelineSection,
-  type TimelineSectionData,
-} from './TimelineSection.js';
+import type {TimelineSectionData} from './TimelineSection.js';
+
+const {html} = LitHtml;
 
 const UIStrings = {
   /**
@@ -316,7 +318,7 @@ function getStepTypeTitle(input: {
   section?: Models.Section.Section,
 }): string|LitHtml.TemplateResult {
   if (input.section) {
-    return input.section.title ? input.section.title : LitHtml.html`<span class="fallback">(No Title)</span>`;
+    return input.section.title ? input.section.title : html`<span class="fallback">(No Title)</span>`;
   }
   if (!input.step) {
     throw new Error('Missing both step and section');
@@ -392,8 +394,8 @@ function getSectionPreview(section?: Models.Section.Section): string {
 
 function renderStepActions(input: ViewInput): LitHtml.TemplateResult|null {
   // clang-format off
-  return LitHtml.html`
-    <${Buttons.Button.Button.litTagName}
+  return html`
+    <devtools-button
       class="step-actions"
       title=${i18nString(UIStrings.openStepActions)}
       aria-label=${i18nString(UIStrings.openStepActions)}
@@ -409,7 +411,7 @@ function renderStepActions(input: ViewInput): LitHtml.TemplateResult|null {
           title: i18nString(UIStrings.openStepActions),
         } as Buttons.Button.ButtonData
       }
-    ></${Buttons.Button.Button.litTagName}>
+    ></devtools-button>
   `;
   // clang-format on
 }
@@ -440,8 +442,8 @@ function viewFunction(input: ViewInput, _output: ViewOutput, target: HTMLElement
 
   // clang-format off
   LitHtml.render(
-    LitHtml.html`
-    <${TimelineSection.litTagName} .data=${
+    html`
+    <devtools-timeline-section .data=${
       {
         isFirstSection: input.isFirstSection,
         isLastSection: input.isLastSection,
@@ -475,11 +477,11 @@ function viewFunction(input: ViewInput, _output: ViewOutput, target: HTMLElement
         >
           ${
             isExpandable
-              ? LitHtml.html`<${IconButton.Icon.Icon.litTagName}
+              ? html`<devtools-icon
                   class="chevron"
                   jslog=${VisualLogging.expand().track({click: true})}
                   name="triangle-down">
-                </${IconButton.Icon.Icon.litTagName}>`
+                </devtools-icon>`
               : ''
           }
           <div class="title">
@@ -493,7 +495,7 @@ function viewFunction(input: ViewInput, _output: ViewOutput, target: HTMLElement
       <div class="details">
         ${
           input.step &&
-          LitHtml.html`<devtools-recorder-step-editor
+          html`<devtools-recorder-step-editor
           class=${input.isSelected ? 'is-selected' : ''}
           .step=${input.step}
           .disabled=${input.isPlaying}
@@ -502,7 +504,7 @@ function viewFunction(input: ViewInput, _output: ViewOutput, target: HTMLElement
         }
         ${
           input.section?.causingStep &&
-          LitHtml.html`<devtools-recorder-step-editor
+          html`<devtools-recorder-step-editor
           .step=${input.section.causingStep}
           .isTypeEditable=${false}
           .disabled=${input.isPlaying}
@@ -512,13 +514,13 @@ function viewFunction(input: ViewInput, _output: ViewOutput, target: HTMLElement
       </div>
       ${
         input.error &&
-        LitHtml.html`
+        html`
         <div class="error" role="alert">
           ${input.error.message}
         </div>
       `
       }
-    </${TimelineSection.litTagName}>
+    </devtools-timeline-section>
   `,
     target,
   );
@@ -526,8 +528,6 @@ function viewFunction(input: ViewInput, _output: ViewOutput, target: HTMLElement
 }
 
 export class StepView extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-step-view`;
-
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #observer: IntersectionObserver = new IntersectionObserver(result => {

package/front_end/panels/recorder/components/TimelineSection.ts

@@ -6,6 +6,8 @@ import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import timelineSectionStyles from './timelineSection.css.js';
 
+const {html} = LitHtml;
+
 declare global {
   interface HTMLElementTagNameMap {
     'devtools-timeline-section': TimelineSection;
@@ -21,7 +23,6 @@ export interface TimelineSectionData {
 }
 
 export class TimelineSection extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-timeline-section`;
 
   #isEndOfGroup = false;
   #isStartOfGroup = false;
@@ -62,7 +63,7 @@ export class TimelineSection extends HTMLElement {
 
     // clang-format off
     LitHtml.render(
-      LitHtml.html`
+      html`
       <div class=${LitHtml.Directives.classMap(classes)}>
         <div class="overlay"></div>
         <div class="icon"><slot name="icon"></slot></div>

package/front_end/panels/recorder/converters/ExtensionConverter.ts

@@ -2,11 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as PuppeteerReplay from '../../../third_party/puppeteer-replay/puppeteer-replay.js';
 import type * as Extension from '../extensions/extensions.js';
 import type * as Models from '../models/models.js';
-import * as PuppeteerReplay from '../../../third_party/puppeteer-replay/puppeteer-replay.js';
 
-import {type Converter} from './Converter.js';
+import type {Converter} from './Converter.js';
 
 export const EXTENSION_PREFIX = 'extension_';
 

package/front_end/panels/recorder/converters/JSONConverter.ts

@@ -5,7 +5,7 @@
 import * as PuppeteerReplay from '../../../third_party/puppeteer-replay/puppeteer-replay.js';
 import * as Models from '../models/models.js';
 
-import {type Converter} from './Converter.js';
+import type {Converter} from './Converter.js';
 
 export class JSONConverter implements Converter {
   #indent: string;

package/front_end/panels/recorder/converters/LighthouseConverter.ts

@@ -5,7 +5,7 @@
 import * as PuppeteerReplay from '../../../third_party/puppeteer-replay/puppeteer-replay.js';
 import * as Models from '../models/models.js';
 
-import {type Converter} from './Converter.js';
+import type {Converter} from './Converter.js';
 
 export class LighthouseConverter implements Converter {
   #indent: string;

package/front_end/panels/recorder/converters/PuppeteerConverter.ts

@@ -5,7 +5,7 @@
 import * as PuppeteerReplay from '../../../third_party/puppeteer-replay/puppeteer-replay.js';
 import * as Models from '../models/models.js';
 
-import {type Converter} from './Converter.js';
+import type {Converter} from './Converter.js';
 
 export class PuppeteerConverter implements Converter {
   #indent: string;

package/front_end/panels/recorder/converters/PuppeteerReplayConverter.ts

@@ -5,7 +5,7 @@
 import * as PuppeteerReplay from '../../../third_party/puppeteer-replay/puppeteer-replay.js';
 import * as Models from '../models/models.js';
 
-import {type Converter} from './Converter.js';
+import type {Converter} from './Converter.js';
 
 export class PuppeteerReplayConverter implements Converter {
   #indent: string;

package/front_end/panels/recorder/injected/RecordingClient.ts

@@ -2,22 +2,19 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {
-  type Schema,
-  type SelectorType,
-  type StepType,
-} from '../../../third_party/puppeteer-replay/puppeteer-replay.js';
+import type {Schema, SelectorType, StepType} from '../../../third_party/puppeteer-replay/puppeteer-replay.js';
+
 import {Logger} from './Logger.js';
 import {SelectorComputer} from './SelectorComputer.js';
-import {type Step} from './Step.js';
-import {type AccessibilityBindings} from './selectors/ARIASelector.js';
+import type {AccessibilityBindings} from './selectors/ARIASelector.js';
 import {queryCSSSelectorAll} from './selectors/CSSSelector.js';
-import {type Selector} from './selectors/Selector.js';
+import type {Selector} from './selectors/Selector.js';
+import type {Step} from './Step.js';
 import {
-  getClickableTargetFromEvent,
-  haultImmediateEvent,
   assert,
   createClickAttributes,
+  getClickableTargetFromEvent,
+  haultImmediateEvent,
 } from './util.js';
 
 declare global {

package/front_end/panels/recorder/injected/SelectorComputer.ts

@@ -2,17 +2,17 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {type SelectorType} from '../../../third_party/puppeteer-replay/puppeteer-replay.js';
-import {type Logger} from './Logger.js';
-import {MonotonicArray} from './MonotonicArray.js';
+import type {SelectorType} from '../../../third_party/puppeteer-replay/puppeteer-replay.js';
 
+import type {Logger} from './Logger.js';
+import {MonotonicArray} from './MonotonicArray.js';
 import {
-  computeARIASelector,
   type AccessibilityBindings,
+  computeARIASelector,
 } from './selectors/ARIASelector.js';
 import {computeCSSSelector} from './selectors/CSSSelector.js';
 import {computePierceSelector} from './selectors/PierceSelector.js';
-import {type Selector} from './selectors/Selector.js';
+import type {Selector} from './selectors/Selector.js';
 import {computeTextSelector} from './selectors/TextSelector.js';
 import {computeXPath} from './selectors/XPath.js';
 

package/front_end/panels/recorder/injected/SelectorPicker.ts

@@ -4,8 +4,8 @@
 
 import {Logger} from './Logger.js';
 import {SelectorComputer} from './SelectorComputer.js';
-import {type AccessibilityBindings} from './selectors/ARIASelector.js';
-import {getMouseEventOffsets, getClickableTargetFromEvent, haultImmediateEvent} from './util.js';
+import type {AccessibilityBindings} from './selectors/ARIASelector.js';
+import {getClickableTargetFromEvent, getMouseEventOffsets, haultImmediateEvent} from './util.js';
 
 declare global {
   interface Window {

package/front_end/panels/recorder/injected/Step.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {type Schema} from '../../../third_party/puppeteer-replay/puppeteer-replay.js';
+import type {Schema} from '../../../third_party/puppeteer-replay/puppeteer-replay.js';
 
 export type ClickStep = Schema.ClickStep;
 export type KeyDownStep = Schema.KeyDownStep;

package/front_end/panels/recorder/injected/injected.ts

@@ -4,8 +4,8 @@
 
 import * as RecordingClient from './RecordingClient.js';
 import * as SelectorPicker from './SelectorPicker.js';
+import type {AccessibilityBindings} from './selectors/ARIASelector.js';
 import type * as Step from './Step.js';
-import {type AccessibilityBindings} from './selectors/ARIASelector.js';
 
 declare global {
   interface Window {

package/front_end/panels/recorder/injected/selectors/ARIASelector.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {type Selector, type DeepSelector} from './Selector.js';
+import type {DeepSelector, Selector} from './Selector.js';
 
 export interface AccessibilityBindings {
   getAccessibleName(node: Node): string;

package/front_end/panels/recorder/injected/selectors/PierceSelector.ts

@@ -2,18 +2,17 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {type Selector} from './Selector.js';
+import {
+  pierceQuerySelectorAll,
+} from '../../../../third_party/puppeteer/package/lib/esm/puppeteer/injected/PierceQuerySelector.js';
 
 import {
   findMinMax,
-  SelectorRangeOps,
-  type RangeOps,
   type QueryableNode,
+  type RangeOps,
+  SelectorRangeOps,
 } from './CSSSelector.js';
-import {
-  pierceQuerySelectorAll,
-} from
-    '../../../../third_party/puppeteer/package/lib/esm/puppeteer/injected/PierceQuerySelector.js';
+import type {Selector} from './Selector.js';
 
 class PierceSelectorRangeOpts implements RangeOps<QueryableNode, string[][]> {
   #selector: string[][] = [[]];

package/front_end/panels/recorder/injected/selectors/TextSelector.ts

@@ -4,14 +4,12 @@
 
 import {
   createTextContent,
-} from
-    '../../../../third_party/puppeteer/package/lib/esm/puppeteer/injected/TextContent.js';
+} from '../../../../third_party/puppeteer/package/lib/esm/puppeteer/injected/TextContent.js';
 import {
   textQuerySelectorAll,
-} from
-    '../../../../third_party/puppeteer/package/lib/esm/puppeteer/injected/TextQuerySelector.js';
+} from '../../../../third_party/puppeteer/package/lib/esm/puppeteer/injected/TextQuerySelector.js';
 
-import {type Selector} from './Selector.js';
+import type {Selector} from './Selector.js';
 
 const MINIMUM_TEXT_LENGTH = 12;
 const MAXIMUM_TEXT_LENGTH = 64;

package/front_end/panels/recorder/injected/util.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {type Schema} from '../../../third_party/puppeteer-replay/puppeteer-replay.js';
+import type {Schema} from '../../../third_party/puppeteer-replay/puppeteer-replay.js';
 
 export function assert<Condition>(condition: Condition): asserts condition {
   if (!condition) {

package/front_end/panels/recorder/models/RecordingPlayer.ts

@@ -10,7 +10,7 @@ import * as PuppeteerService from '../../../services/puppeteer/puppeteer.js';
 import * as PuppeteerReplay from '../../../third_party/puppeteer-replay/puppeteer-replay.js';
 import type * as puppeteer from '../../../third_party/puppeteer/puppeteer.js';
 
-import {type Step, type UserFlow} from './Schema.js';
+import type {Step, UserFlow} from './Schema.js';
 
 export const enum PlayRecordingSpeed {
   NORMAL = 'normal',

package/front_end/panels/recorder/models/RecordingSettings.ts

@@ -2,10 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {
-  type SetViewportStep,
-  type EmulateNetworkConditionsStep,
-} from './Schema.js';
+import type {EmulateNetworkConditionsStep, SetViewportStep} from './Schema.js';
 
 export interface RecordingSettings {
   viewportSettings?: SetViewportStep;

package/front_end/panels/recorder/models/RecordingStorage.ts

@@ -4,7 +4,7 @@
 
 import * as Common from '../../../core/common/common.js';
 
-import {type UserFlow} from './Schema.js';
+import type {UserFlow} from './Schema.js';
 
 let instance: RecordingStorage|null = null;
 

package/front_end/panels/recorder/models/SDKUtils.ts

@@ -2,9 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Protocol from '../../../generated/protocol.js';
 import * as SDK from '../../../core/sdk/sdk.js';
-import {type Target, type FrameSelector} from './Schema.js';
+import type * as Protocol from '../../../generated/protocol.js';
+
+import type {FrameSelector, Target} from './Schema.js';
 
 interface Context {
   target: Target;

package/front_end/panels/recorder/models/ScreenshotUtils.ts

@@ -4,7 +4,7 @@
 
 import * as SDK from '../../../core/sdk/sdk.js';
 
-import {type Screenshot} from './ScreenshotStorage.js';
+import type {Screenshot} from './ScreenshotStorage.js';
 
 const SCREENSHOT_WIDTH = 160;       // px
 const SCREENSHOT_MAX_HEIGHT = 240;  // px

package/front_end/panels/recorder/models/Section.ts

@@ -2,8 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {type Step} from './Schema.js';
-import {type Screenshot} from './ScreenshotStorage.js';
+import type {Step} from './Schema.js';
+import type {Screenshot} from './ScreenshotStorage.js';
 
 export interface Section {
   title: string;

package/front_end/panels/search/SearchResultsPane.ts

@@ -11,8 +11,7 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import searchResultsPaneStyles from './searchResultsPane.css.js';
-
-import {type SearchResult} from './SearchScope.js';
+import type {SearchResult} from './SearchScope.js';
 
 const UIStrings = {
   /**

package/front_end/panels/search/SearchView.ts

@@ -12,7 +12,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {SearchResultsPane} from './SearchResultsPane.js';
-import {type SearchResult, type SearchScope} from './SearchScope.js';
+import type {SearchResult, SearchScope} from './SearchScope.js';
 import searchViewStyles from './searchView.css.js';
 
 const UIStrings = {

package/front_end/panels/security/OriginTreeElement.ts

@@ -5,7 +5,7 @@
 import type * as Platform from '../../core/platform/platform.js';
 import * as Protocol from '../../generated/protocol.js';
 
-import {type SecurityPanel} from './SecurityPanel.js';
+import type {SecurityPanel} from './SecurityPanel.js';
 import {SecurityPanelSidebarTreeElement} from './SecurityPanelSidebarTreeElement.js';
 
 export class OriginTreeElement extends SecurityPanelSidebarTreeElement {

package/front_end/panels/security/SecurityAndPrivacyPanelSidebar.ts

@@ -16,7 +16,7 @@ import {
   type Origin,
   OriginGroup,
 } from './SecurityPanel.js';
-import {type SecurityPanelSidebarTreeElement} from './SecurityPanelSidebarTreeElement.js';
+import type {SecurityPanelSidebarTreeElement} from './SecurityPanelSidebarTreeElement.js';
 import sidebarStyles from './sidebar.css.js';
 
 const UIStrings = {

package/front_end/panels/security/SecurityPanelSidebarTreeElement.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 import * as UI from '../../ui/legacy/legacy.js';
 
-import {type SecurityPanel} from './SecurityPanel.js';
+import type {SecurityPanel} from './SecurityPanel.js';
 
 export class SecurityPanelSidebarTreeElement extends UI.TreeOutline.TreeElement {
   protected readonly securityPanel: SecurityPanel|undefined;

package/front_end/panels/sensors/SensorsView.ts

@@ -8,6 +8,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
 
 import sensorsStyles from './sensors.css.js';
 
@@ -227,6 +228,10 @@ export class SensorsView extends UI.Widget.VBox {
     this.appendIdleEmulator();
 
     this.createPanelSeparator();
+
+    this.createHardwareConcurrencySection();
+
+    this.createPanelSeparator();
   }
 
   override wasShown(): void {
@@ -764,6 +769,17 @@ export class SensorsView extends UI.Widget.VBox {
       container.appendChild(control);
     }
   }
+
+  private createHardwareConcurrencySection(): void {
+    const container = this.contentElement.createChild('div', 'concurrency-section');
+
+    const {checkbox, numericInput, reset, warning} =
+        MobileThrottling.ThrottlingManager.throttlingManager().createHardwareConcurrencySelector();
+    const div = document.createElement('div');
+    div.classList.add('concurrency-details');
+    div.append(numericInput.element, reset.element, warning.element);
+    container.append(checkbox, div);
+  }
 }
 
 export const enum DeviceOrientationModificationSource {

package/front_end/panels/sensors/sensors.css

@@ -35,6 +35,22 @@
   max-width: 120px;
 }
 
+.concurrency-details {
+  margin: var(--sys-size-5) var(--sys-size-10);
+  display: flex;
+  align-items: center;
+}
+
+.concurrency-details input {
+  width: 50px;
+  /* Clear out unexpected margin applied to `.sensors-view input` */
+  margin: 0;
+}
+
+.concurrency-hidden {
+  visibility: hidden;
+}
+
 .sensors-view input:focus::-webkit-input-placeholder {
   color: transparent !important; /* stylelint-disable-line declaration-no-important */
 }