chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

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

@@ -1,11 +1,11 @@
 // Copyright 2020 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -51,7 +51,7 @@ const UIStrings = {
 const str_ =
     i18n.i18n.registerUIStrings('panels/linear_memory_inspector/components/ValueInterpreterDisplay.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {render, html} = Lit;
+const {render, nothing, html} = Lit;
 
 const SORTED_VALUE_TYPES = Array.from(getDefaultValueTypeMapping().keys());
 
@@ -63,188 +63,207 @@ export interface ValueDisplayData {
   valueTypeModes?: Map<ValueType, ValueTypeMode>;
 }
 
-export class ValueTypeModeChangedEvent extends Event {
-  static readonly eventName = 'valuetypemodechanged';
-  data: {type: ValueType, mode: ValueTypeMode};
+export interface ViewInput {
+  buffer: ArrayBuffer;
+  valueTypes: ValueType[];
+  endianness: Endianness;
+  memoryLength: number;
+  valueTypeModes: Map<ValueType, ValueTypeMode>;
+  onValueTypeModeChange: (type: ValueType, mode: ValueTypeMode) => void;
+  onJumpToAddressClicked: (address: number) => void;
+}
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
 
-  constructor(type: ValueType, mode: ValueTypeMode) {
-    super(ValueTypeModeChangedEvent.eventName, {
-      composed: true,
-    });
-    this.data = {type, mode};
+export const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
+  function parse(signed: boolean, type: ValueType): string {
+    return format(
+        {buffer: input.buffer, endianness: input.endianness, type, signed, mode: input.valueTypeModes.get(type)});
   }
-}
+  const parseSigned = parse.bind(this, true);
+  const parseUnsigned = parse.bind(this, false);
 
-export class JumpToPointerAddressEvent extends Event {
-  static readonly eventName = 'jumptopointeraddress';
-  data: number;
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
+    render(html`
+      <style>${UI.inspectorCommonStyles}</style>
+      <style>${valueInterpreterDisplayStyles}</style>
+      <div class="value-types">
+        ${input.valueTypes.map(type => {
+          const address = isPointer(type)? getPointerAddress(type, input.buffer, input.endianness): 0;
+          const jumpDisabled = Number.isNaN(address) || BigInt(address) >= BigInt(input.memoryLength);
+          const signed = parseSigned(type);
+          const unsigned = parseUnsigned(type);
+          return isNumber(type) ? html`
+            <span class="value-type-cell selectable-text">${i18n.i18n.lockedString(type)}</span>
+              <div>
+                <select title=${i18nString(UIStrings.changeValueTypeMode)}
+                  data-mode-settings="true"
+                  jslog=${VisualLogging.dropDown('linear-memory-inspector.value-type-mode').track({change: true})}
+                  @change=${(e: Event) =>
+                    input.onValueTypeModeChange(type, (e.target as HTMLSelectElement).value as ValueTypeMode)}>
+                    ${VALUE_TYPE_MODE_LIST.filter(x => isValidMode(type, x)).map(mode => {
+                      return html`
+                        <option value=${mode} .selected=${input.valueTypeModes.get(type) === mode}
+                                jslog=${VisualLogging.item(mode).track({click: true})}>${
+                          i18n.i18n.lockedString(mode)}
+                        </option>`;
+                    })}
+                </select>
+              </div>
+            ${renderSignedAndUnsigned(signed, unsigned, type, input.valueTypeModes.get(type))}`:
+          isPointer(type) ? html`
+            <span class="value-type-cell-no-mode value-type-cell selectable-text">${i18n.i18n.lockedString(type)}</span>
+            <div class="value-type-cell">
+              <div class="value-type-value-with-link" data-value="true">
+              <span class="selectable-text">${unsigned}</span>
+                <devtools-button
+                  data-jump="true"
+                  title=${jumpDisabled ? i18nString(UIStrings.addressOutOfRange) : i18nString(UIStrings.jumpToPointer)}
+                  .disabled=${jumpDisabled}
+                  jslog=${VisualLogging.action('linear-memory-inspector.jump-to-address').track({click: true})}
+                  @click=${() => input.onJumpToAddressClicked(Number(address))}
+                  .variant=${Buttons.Button.Variant.ICON_TOGGLE}
+                  .iconName=${'open-externally'}
+                  .size=${Buttons.Button.Size.SMALL}>
+                </devtools-button>
+              </div>
+            </div>`: nothing;
+        })}
+      </div>
+    `, target);
+  // clang-format on
+};
 
-  constructor(address: number) {
-    super(JumpToPointerAddressEvent.eventName, {
-      composed: true,
-    });
-    this.data = address;
+function renderSignedAndUnsigned(
+    signedValue: string, unsignedValue: string, type: ValueType, mode: ValueTypeMode|undefined): Lit.TemplateResult {
+  const showSignedAndUnsigned =
+      signedValue !== unsignedValue && mode !== ValueTypeMode.HEXADECIMAL && mode !== ValueTypeMode.OCTAL;
+
+  const unsignedRendered = html`<span class="value-type-cell selectable-text"  title=${
+      i18nString(UIStrings.unsignedValue)} data-value="true">${unsignedValue}</span>`;
+  if (!showSignedAndUnsigned) {
+    return unsignedRendered;
   }
+
+  // Some values are too long to show in one line, we're putting them into the next line.
+  const showInMultipleLines = type === ValueType.INT32 || type === ValueType.INT64;
+  const signedRendered = html`<span class="selectable-text" data-value="true" title=${
+      i18nString(UIStrings.signedValue)}>${signedValue}</span>`;
+
+  if (showInMultipleLines) {
+    return html`
+        <div class="value-type-cell">
+          ${unsignedRendered}
+          ${signedRendered}
+        </div>
+        `;
+  }
+
+  return html`
+      <div class="value-type-cell" style="flex-direction: row;">
+        ${unsignedRendered}
+        <span class="signed-divider"></span>
+        ${signedRendered}
+      </div>
+    `;
 }
 
-export class ValueInterpreterDisplay extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+export class ValueInterpreterDisplay extends UI.Widget.Widget {
+  readonly #view: View;
   #endianness = Endianness.LITTLE;
   #buffer = new ArrayBuffer(0);
   #valueTypes = new Set<ValueType>();
   #valueTypeModeConfig: Map<ValueType, ValueTypeMode> = getDefaultValueTypeMapping();
   #memoryLength = 0;
+  #onValueTypeModeChange: (type: ValueType, mode: ValueTypeMode) => void = () => {};
+  #onJumpToAddressClicked: (address: number) => void = () => {};
 
-  set data(data: ValueDisplayData) {
-    this.#buffer = data.buffer;
-    this.#endianness = data.endianness;
-    this.#valueTypes = data.valueTypes;
-    this.#memoryLength = data.memoryLength;
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+  }
 
-    if (data.valueTypeModes) {
-      data.valueTypeModes.forEach((mode, valueType) => {
-        if (isValidMode(valueType, mode)) {
-          this.#valueTypeModeConfig.set(valueType, mode);
-        }
-      });
-    }
+  set onValueTypeModeChange(callback: (type: ValueType, mode: ValueTypeMode) => void) {
+    this.#onValueTypeModeChange = callback;
+    this.performUpdate();
+  }
 
-    this.#render();
+  get onValueTypeModeChange(): (type: ValueType, mode: ValueTypeMode) => void {
+    return this.#onValueTypeModeChange;
   }
 
-  #render(): void {
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    render(html`
-      <style>${UI.inspectorCommonStyles}</style>
-      <style>${valueInterpreterDisplayStyles}</style>
-      <div class="value-types">
-        ${SORTED_VALUE_TYPES.map(type => this.#valueTypes.has(type) ? this.#showValue(type) : '')}
-      </div>
-    `, this.#shadow, {host: this},
-    );
-    // clang-format on
-  }
-
-  #showValue(type: ValueType): Lit.TemplateResult {
-    if (isNumber(type)) {
-      return this.#renderNumberValues(type);
-    }
-    if (isPointer(type)) {
-      return this.#renderPointerValue(type);
-    }
-    throw new Error(`No known way to format ${type}`);
-  }
-
-  #renderPointerValue(type: ValueType): Lit.TemplateResult {
-    const unsignedValue = this.#parse({type, signed: false});
-    const address = getPointerAddress(type, this.#buffer, this.#endianness);
-    const jumpDisabled = Number.isNaN(address) || BigInt(address) >= BigInt(this.#memoryLength);
-    const buttonTitle = jumpDisabled ? i18nString(UIStrings.addressOutOfRange) : i18nString(UIStrings.jumpToPointer);
-    const iconColor = jumpDisabled ? 'var(--icon-default)' : 'var(--icon-link)';
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    return html`
-      <span class="value-type-cell-no-mode value-type-cell selectable-text">${i18n.i18n.lockedString(type)}</span>
-      <div class="value-type-cell">
-        <div class="value-type-value-with-link" data-value="true">
-        <span class="selectable-text">${unsignedValue}</span>
-          ${
-            html`
-              <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))}>
-                <devtools-icon name="open-externally" class="medium" style="color: ${iconColor}">
-                </devtools-icon>
-              </button>`}
-        </div>
-      </div>
-    `;
-    // clang-format on
+  set onJumpToAddressClicked(callback: (address: number) => void) {
+    this.#onJumpToAddressClicked = callback;
+    this.performUpdate();
   }
 
-  #onJumpToAddressClicked(address: number): void {
-    this.dispatchEvent(new JumpToPointerAddressEvent(address));
+  get onJumpToAddressClicked(): (address: number) => void {
+    return this.#onJumpToAddressClicked;
   }
 
-  #renderNumberValues(type: ValueType): Lit.TemplateResult {
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    return html`
-      <span class="value-type-cell selectable-text">${i18n.i18n.lockedString(type)}</span>
-      <div>
-        <select title=${i18nString(UIStrings.changeValueTypeMode)}
-          data-mode-settings="true"
-          jslog=${VisualLogging.dropDown('linear-memory-inspector.value-type-mode').track({change: true})}
-          @change=${this.#onValueTypeModeChange.bind(this, type)}>
-            ${VALUE_TYPE_MODE_LIST.filter(x => isValidMode(type, x)).map(mode => {
-              return html`
-                <option value=${mode} .selected=${this.#valueTypeModeConfig.get(type) === mode}
-                        jslog=${VisualLogging.item(mode).track({click: true})}>${
-                  i18n.i18n.lockedString(mode)}
-                </option>`;
-            })}
-        </select>
-      </div>
-      ${this.#renderSignedAndUnsigned(type)}
-    `;
-    // clang-format on
+  get valueTypeModes(): Map<ValueType, ValueTypeMode> {
+    return this.#valueTypeModeConfig;
   }
 
-  #renderSignedAndUnsigned(type: ValueType): Lit.TemplateResult {
-    const unsignedValue = this.#parse({type, signed: false});
-    const signedValue = this.#parse({type, signed: true});
-    const mode = this.#valueTypeModeConfig.get(type);
-    const showSignedAndUnsigned =
-        signedValue !== unsignedValue && mode !== ValueTypeMode.HEXADECIMAL && mode !== ValueTypeMode.OCTAL;
+  set valueTypeModes(modes: Map<ValueType, ValueTypeMode>) {
+    const newMap = getDefaultValueTypeMapping();
+    modes.forEach((mode, type) => {
+      if (isValidMode(type, mode)) {
+        newMap.set(type, mode);
+      }
+    });
+    this.#valueTypeModeConfig = newMap;
+    this.requestUpdate();
+  }
 
-    const unsignedRendered = html`<span class="value-type-cell selectable-text"  title=${
-        i18nString(UIStrings.unsignedValue)} data-value="true">${unsignedValue}</span>`;
-    if (!showSignedAndUnsigned) {
-      return unsignedRendered;
-    }
+  get valueTypes(): Set<ValueType> {
+    return this.#valueTypes;
+  }
 
-    // Some values are too long to show in one line, we're putting them into the next line.
-    const showInMultipleLines = type === ValueType.INT32 || type === ValueType.INT64;
-    const signedRendered = html`<span class="selectable-text" data-value="true" title=${
-        i18nString(UIStrings.signedValue)}>${signedValue}</span>`;
+  set valueTypes(valueTypes: Set<ValueType>) {
+    this.#valueTypes = valueTypes;
+    this.requestUpdate();
+  }
 
-    if (showInMultipleLines) {
-      return html`
-        <div class="value-type-cell">
-          ${unsignedRendered}
-          ${signedRendered}
-        </div>
-        `;
-    }
+  get buffer(): ArrayBuffer {
+    return this.#buffer;
+  }
 
-    return html`
-      <div class="value-type-cell" style="flex-direction: row;">
-        ${unsignedRendered}
-        <span class="signed-divider"></span>
-        ${signedRendered}
-      </div>
-    `;
+  set buffer(buffer: ArrayBuffer) {
+    this.#buffer = buffer;
+    this.requestUpdate();
   }
 
-  #onValueTypeModeChange(type: ValueType, event: Event): void {
-    event.preventDefault();
-    const select = event.target as HTMLInputElement;
-    const mode = select.value as ValueTypeMode;
-    this.dispatchEvent(new ValueTypeModeChangedEvent(type, mode));
+  get endianness(): Endianness {
+    return this.#endianness;
   }
 
-  #parse(data: {type: ValueType, signed?: boolean}): string {
-    const mode = this.#valueTypeModeConfig.get(data.type);
-    return format(
-        {buffer: this.#buffer, type: data.type, endianness: this.#endianness, signed: data.signed || false, mode});
+  set endianness(endianness: Endianness) {
+    this.#endianness = endianness;
+    this.requestUpdate();
+  }
+
+  get memoryLength(): number {
+    return this.#memoryLength;
   }
-}
 
-customElements.define('devtools-linear-memory-inspector-interpreter-display', ValueInterpreterDisplay);
+  set memoryLength(memoryLength: number) {
+    this.#memoryLength = memoryLength;
+    this.requestUpdate();
+  }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-linear-memory-inspector-interpreter-display': ValueInterpreterDisplay;
+  override performUpdate(): void {
+    const valueTypes = SORTED_VALUE_TYPES.filter(type => this.#valueTypes.has(type));
+    this.#view(
+        {
+          buffer: this.#buffer,
+          valueTypes,
+          endianness: this.#endianness,
+          memoryLength: this.#memoryLength,
+          valueTypeModes: this.#valueTypeModeConfig,
+          onValueTypeModeChange: this.#onValueTypeModeChange,
+          onJumpToAddressClicked: this.#onJumpToAddressClicked,
+        },
+        undefined, this.contentElement);
   }
 }

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

@@ -1,12 +1,10 @@
 // Copyright 2020 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
-
-import '../../../ui/legacy/legacy.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
+import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -25,10 +23,6 @@ const str_ =
     i18n.i18n.registerUIStrings('panels/linear_memory_inspector/components/ValueInterpreterSettings.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export interface ValueInterpreterSettingsData {
-  valueTypes: Set<ValueType>;
-}
-
 const enum ValueTypeGroup {
   INTEGER = 'Integer',
   FLOAT = 'Floating point',
@@ -52,69 +46,74 @@ function valueTypeGroupToLocalizedString(group: ValueTypeGroup): string {
   return group;
 }
 
-export class TypeToggleEvent extends Event {
-  static readonly eventName = 'typetoggle';
-  data: {type: ValueType, checked: boolean};
-
-  constructor(type: ValueType, checked: boolean) {
-    super(TypeToggleEvent.eventName);
-    this.data = {type, checked};
-  }
+export interface ViewInput {
+  valueTypes: Set<ValueType>;
+  onToggle: (type: ValueType, checked: boolean) => void;
 }
 
-export class ValueInterpreterSettings extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #valueTypes = new Set<ValueType>();
-
-  set data(data: ValueInterpreterSettingsData) {
-    this.#valueTypes = data.valueTypes;
-    this.#render();
-  }
-
-  #render(): void {
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
+export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
+  // clang-format off
     render(html`
       <style>${valueInterpreterSettingsStyles}</style>
       <div class="settings" jslog=${VisualLogging.pane('settings')}>
        ${[...GROUP_TO_TYPES.keys()].map(group => {
+        const types = GROUP_TO_TYPES.get(group) ?? [];
         return html`
           <div class="value-types-selection">
             <span class="group">${valueTypeGroupToLocalizedString(group)}</span>
-            ${this.#plotTypeSelections(group)}
+            ${types.map(type => {
+            return html`
+                <devtools-checkbox
+                  title=${valueTypeToLocalizedString(type)}
+                  ?checked=${input.valueTypes.has(type)}
+                  @change=${(e: Event) => {
+                    const checkbox = e.target as HTMLInputElement;
+                    input.onToggle(type, checkbox.checked);
+                  }} jslog=${VisualLogging.toggle().track({change: true}).context(Platform.StringUtilities.toKebabCase(type))}
+                  }>${valueTypeToLocalizedString(type)}</devtools-checkbox>
+         `;})}
           </div>
         `;})}
       </div>
-      `, this.#shadow, {host: this});
+      `, target);
+};
+// clang-format on
+
+export type View = typeof DEFAULT_VIEW;
+
+export class ValueInterpreterSettings extends UI.Widget.Widget {
+  #view: View;
+  #valueTypes = new Set<ValueType>();
+  #onToggle: (type: ValueType, checked: boolean) => void = () => {};
+
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
   }
 
-  #plotTypeSelections(group: ValueTypeGroup): Lit.TemplateResult {
-    const types = GROUP_TO_TYPES.get(group);
-    if (!types) {
-      throw new Error(`Unknown group ${group}`);
-    }
-    return html`
-      ${types.map(type => {
-        return html`
-            <devtools-checkbox
-              title=${valueTypeToLocalizedString(type)}
-              ?checked=${this.#valueTypes.has(type)}
-              @change=${(e: Event) => this.#onTypeToggle(type, e)} jslog=${VisualLogging.toggle().track({change: true}).context(Platform.StringUtilities.toKebabCase(type))}
-              >${valueTypeToLocalizedString(type)}</devtools-checkbox>
-     `;})}`;
+  get valueTypes(): Set<ValueType> {
+    return this.#valueTypes;
   }
 
-  #onTypeToggle(type: ValueType, event: Event): void {
-    const checkbox = event.target as HTMLInputElement;
-    this.dispatchEvent(new TypeToggleEvent(type, checkbox.checked));
+  set valueTypes(value: Set<ValueType>) {
+    this.#valueTypes = value;
+    this.requestUpdate();
   }
-}
 
-customElements.define('devtools-linear-memory-inspector-interpreter-settings', ValueInterpreterSettings);
+  get onToggle(): (type: ValueType, checked: boolean) => void {
+    return this.#onToggle;
+  }
 
-declare global {
+  set onToggle(value: (type: ValueType, checked: boolean) => void) {
+    this.#onToggle = value;
+    this.requestUpdate();
+  }
 
-interface HTMLElementTagNameMap {
-    'devtools-linear-memory-inspector-interpreter-settings': ValueInterpreterSettings;
+  override performUpdate(): void {
+    const viewInput = {
+      valueTypes: this.#valueTypes,
+      onToggle: this.#onToggle,
+    };
+    this.#view(viewInput, undefined, this.contentElement);
   }
 }

package/front_end/panels/linear_memory_inspector/components/valueInterpreterDisplay.css

@@ -39,19 +39,6 @@
   grid-column: 1 / 3;
 }
 
-.jump-to-button {
-  display: flex;
-  width: 20px;
-  height: 20px;
-  border: none;
-  padding: 0;
-  outline: none;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  background-color: var(--sys-color-cdt-base-container);
-}
-
 .signed-divider {
   width: 1px;
   height: 15px;

package/front_end/panels/linear_memory_inspector/components/valueInterpreterSettings.css

@@ -4,25 +4,27 @@
  * found in the LICENSE file.
  */
 
-:host {
-  flex: auto;
-  display: flex;
-  min-height: 20px;
-}
+@scope to (devtools-widget > *) {
+  :scope {
+    flex: auto;
+    display: flex;
+    min-height: 20px;
+  }
 
-.settings {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0 12px 12px;
-  gap: 15px 45px;
-}
+  .settings {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 12px 12px;
+    gap: 15px 45px;
+  }
 
-.value-types-selection {
-  display: flex;
-  flex-direction: column;
-}
+  .value-types-selection {
+    display: flex;
+    flex-direction: column;
+  }
 
-.group {
-  font-weight: bold;
-  margin-bottom: var(--sys-size-6);
+  .group {
+    font-weight: bold;
+    margin-bottom: var(--sys-size-6);
+  }
 }

package/front_end/panels/media/PlayerListView.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 '../../ui/components/icon_button/icon_button.js';
+import '../../ui/kit/kit.js';
 
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Protocol from '../../generated/protocol.js';

package/front_end/panels/mobile_throttling/CalibrationController.ts

@@ -1,7 +1,6 @@
 // Copyright 2024 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
@@ -80,6 +79,8 @@ export class CalibrationController {
     this.#emulationModel = emulationModel;
     this.#originalUrl = primaryPageTarget.inspectedURL();
 
+    // The following functions runs in the inspected page so we don't use lit for rendering.
+    /* eslint-disable @devtools/no-imperative-dom-api */
     function setupTestPage(text: string): void {
       const textEl = document.createElement('span');
       textEl.textContent = text;
@@ -105,6 +106,7 @@ export class CalibrationController {
       moonEl.textContent = '🌑';
       moonEl.style.cssText = 'font-size: 5em';
     }
+    /* eslint-enable @devtools/no-imperative-dom-api */
 
     await primaryPageTarget.pageAgent().invoke_navigate({url: 'about:blank'});
 

package/front_end/panels/mobile_throttling/ThrottlingManager.ts

@@ -7,7 +7,7 @@ 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 SDK from '../../core/sdk/sdk.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -392,7 +392,7 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
 
     const reset = new UI.Toolbar.ToolbarButton('Reset concurrency', 'undo', undefined, 'hardware-concurrency-reset');
     reset.setTitle(i18nString(UIStrings.resetConcurrency));
-    const icon = new IconButton.Icon.Icon();
+    const icon = new Icon();
     icon.name = 'warning-filled';
     icon.classList.add('small');
     const warning = new UI.Toolbar.ToolbarItem(icon);

package/front_end/panels/mobile_throttling/ThrottlingSettingsTab.ts

@@ -9,8 +9,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
-import type {Card} from '../../ui/kit/kit.js';
+import {type Card, createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -352,7 +351,7 @@ export class CPUThrottlingCard {
   private createTextWithIcon(text: string, icon: string): HTMLElement {
     const el = document.createElement('div');
     el.classList.add('text-with-icon');
-    el.append(IconButton.Icon.create(icon));
+    el.append(createIcon(icon));
     el.append(text);
     return el;
   }