chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../ui/legacy/legacy.js';
+
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
@@ -64,10 +66,12 @@ export class StartView extends UI.Widget.Widget {
 
   constructor(controller: LighthouseController, panel: LighthousePanel) {
     super(true /* useShadowDom */);
+    this.registerRequiredCSS(lighthouseStartViewStyles);
 
     this.controller = controller;
     this.panel = panel;
-    this.settingsToolbarInternal = new UI.Toolbar.Toolbar('');
+    this.settingsToolbarInternal = document.createElement('devtools-toolbar');
+    this.settingsToolbarInternal.classList.add('lighthouse-settings-toolbar');
     this.render();
   }
 
@@ -303,7 +307,6 @@ export class StartView extends UI.Widget.Widget {
   override wasShown(): void {
     super.wasShown();
     this.controller.recomputePageAuditability();
-    this.registerCSSFiles([lighthouseStartViewStyles]);
   }
 
   settingsToolbar(): UI.Toolbar.Toolbar {

package/front_end/panels/lighthouse/LighthouseStatusView.ts

@@ -189,7 +189,7 @@ export class StatusView {
 
   private render(): void {
     const dialogRoot =
-        UI.UIUtils.createShadowRootWithCoreStyles(this.dialog.contentElement, {cssFile: [lighthouseDialogStyles]});
+        UI.UIUtils.createShadowRootWithCoreStyles(this.dialog.contentElement, {cssFile: lighthouseDialogStyles});
     const lighthouseViewElement = dialogRoot.createChild('div', 'lighthouse-view vbox');
 
     const cancelButton = UI.UIUtils.createTextButton(i18nString(UIStrings.cancel), this.cancel.bind(this), {

package/front_end/panels/lighthouse/LighthouseTimespanView.ts

@@ -69,7 +69,7 @@ export class TimespanView extends UI.Dialog.Dialog {
 
   render(): void {
     const dialogRoot =
-        UI.UIUtils.createShadowRootWithCoreStyles(this.contentElement, {cssFile: [lighthouseDialogStyles]});
+        UI.UIUtils.createShadowRootWithCoreStyles(this.contentElement, {cssFile: lighthouseDialogStyles});
 
     this.endButton = UI.UIUtils.createTextButton(
         i18nString(UIStrings.endTimespan),

package/front_end/panels/lighthouse/lighthousePanel.css

@@ -33,7 +33,7 @@ button.view-trace {
   flex: none;
 }
 
-.lighthouse-settings-pane .toolbar {
+.lighthouse-settings-pane devtools-toolbar {
   flex: 1 1;
 }
 
@@ -42,7 +42,7 @@ button.view-trace {
   flex: none;
 }
 
-.lighthouse-toolbar-container > .toolbar {
+.lighthouse-toolbar-container > devtools-toolbar {
   background-color: var(--sys-color-cdt-base-container);
   border-bottom: 1px solid var(--sys-color-divider);
 }

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorController.test.ts

@@ -27,7 +27,7 @@ class MockRemoteObject extends SDK.RemoteObject.LocalJSONObject {
   }
 }
 
-function createWrapper(array: Uint8Array) {
+function createWrapper(array: Uint8Array<ArrayBuffer>) {
   const mockRemoteObj = new MockRemoteObject(array.buffer);
   const mockRemoteArrayBuffer = new SDK.RemoteObject.RemoteArrayBuffer(mockRemoteObj);
   return new LinearMemoryInspectorController.RemoteArrayBufferWrapper(mockRemoteArrayBuffer);

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorController.ts

@@ -31,7 +31,7 @@ const MEMORY_TRANSFER_MIN_CHUNK_SIZE = 1000;
 let controllerInstance: LinearMemoryInspectorController;
 
 export interface LazyUint8Array {
-  getRange(start: number, end: number): Promise<Uint8Array>;
+  getRange(start: number, end: number): Promise<Uint8Array<ArrayBuffer>>;
   length(): number;
 }
 
@@ -46,7 +46,7 @@ export class RemoteArrayBufferWrapper implements LazyUint8Array {
     return this.#remoteArrayBuffer.byteLength();
   }
 
-  async getRange(start: number, end: number): Promise<Uint8Array> {
+  async getRange(start: number, end: number): Promise<Uint8Array<ArrayBuffer>> {
     const newEnd = Math.min(end, this.length());
     if (start < 0 || start > newEnd) {
       console.error(`Requesting invalid range of memory: (${start}, ${end})`);
@@ -82,15 +82,14 @@ export function isDWARFMemoryObject(obj: SDK.RemoteObject.RemoteObject): boolean
   return false;
 }
 
-type SerializableSettings = {
-  valueTypes: LinearMemoryInspectorComponents.ValueInterpreterDisplayUtils.ValueType[],
-  valueTypeModes:
-      [
-        LinearMemoryInspectorComponents.ValueInterpreterDisplayUtils.ValueType,
-        LinearMemoryInspectorComponents.ValueInterpreterDisplayUtils.ValueTypeMode,
-      ][],
-  endianness: LinearMemoryInspectorComponents.ValueInterpreterDisplayUtils.Endianness,
-};
+interface SerializableSettings {
+  valueTypes: LinearMemoryInspectorComponents.ValueInterpreterDisplayUtils.ValueType[];
+  valueTypeModes: [
+    LinearMemoryInspectorComponents.ValueInterpreterDisplayUtils.ValueType,
+    LinearMemoryInspectorComponents.ValueInterpreterDisplayUtils.ValueTypeMode,
+  ][];
+  endianness: LinearMemoryInspectorComponents.ValueInterpreterDisplayUtils.Endianness;
+}
 
 export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelObserver<SDK.RuntimeModel.RuntimeModel>
     implements Common.Revealer.Revealer<SDK.RemoteObject.LinearMemoryInspectable>,
@@ -130,7 +129,7 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
   }
 
   static async getMemoryForAddress(memoryWrapper: LazyUint8Array, address: number):
-      Promise<{memory: Uint8Array, offset: number}> {
+      Promise<{memory: Uint8Array<ArrayBuffer>, offset: number}> {
     // Provide a chunk of memory that covers the address to show and some before and after
     // as 1. the address shown is not necessarily at the beginning of a page and
     // 2. to allow for fewer memory requests.
@@ -140,7 +139,8 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     return {memory, offset: memoryChunkStart};
   }
 
-  static async getMemoryRange(memoryWrapper: LazyUint8Array, start: number, end: number): Promise<Uint8Array> {
+  static async getMemoryRange(memoryWrapper: LazyUint8Array, start: number, end: number):
+      Promise<Uint8Array<ArrayBuffer>> {
     // Check that the requested start is within bounds.
     // If the requested end is larger than the actual
     // memory, it will be automatically capped when
@@ -350,7 +350,7 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
         name: expression ? LinearMemoryInspectorController.extractObjectName(obj, expression) : expression,
         type: LinearMemoryInspectorController.extractObjectTypeDescription(obj),
       };
-    } catch (err) {
+    } catch {
       highlightInfo = undefined;
     }
     return highlightInfo;

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorPane.test.ts

@@ -16,13 +16,13 @@ function createArray() {
 
 describeWithEnvironment('LinearMemoryInspectorPane', () => {
   class Uint8Wrapper {
-    private array: Uint8Array;
+    private array: Uint8Array<ArrayBuffer>;
 
-    constructor(array: Uint8Array) {
+    constructor(array: Uint8Array<ArrayBuffer>) {
       this.array = array;
     }
 
-    getRange(start: number, end: number): Promise<Uint8Array> {
+    getRange(start: number, end: number): Promise<Uint8Array<ArrayBuffer>> {
       return Promise.resolve(this.array.slice(start, end));
     }
     length(): number {

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorPane.ts

@@ -91,9 +91,9 @@ export const enum Events {
   VIEW_CLOSED = 'ViewClosed',
 }
 
-export type EventTypes = {
-  [Events.VIEW_CLOSED]: string,
-};
+export interface EventTypes {
+  [Events.VIEW_CLOSED]: string;
+}
 
 export class LinearMemoryInspectorView extends UI.Widget.VBox {
   #memoryWrapper: LazyUint8Array;

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

@@ -5,12 +5,16 @@
 import '../../../ui/components/icon_button/icon_button.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
-import linearMemoryHighlightChipListStyles from './linearMemoryHighlightChipList.css.js';
+import linearMemoryHighlightChipListStylesRaw from './linearMemoryHighlightChipList.css.js';
 import type {HighlightInfo} from './LinearMemoryViewerUtils.js';
 
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const linearMemoryHighlightChipListStyles = new CSSStyleSheet();
+linearMemoryHighlightChipListStyles.replaceSync(linearMemoryHighlightChipListStylesRaw.cssContent);
+
 const UIStrings = {
   /**
    *@description Tooltip text that appears when hovering over an inspected variable's button in the Linear Memory Highlight Chip List.
@@ -27,7 +31,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings(
     'panels/linear_memory_inspector/components/LinearMemoryHighlightChipList.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {render, html} = LitHtml;
+const {render, html} = Lit;
 
 export interface LinearMemoryHighlightChipListData {
   highlightInfos: Array<HighlightInfo>;
@@ -85,7 +89,7 @@ export class LinearMemoryHighlightChipList extends HTMLElement {
     // clang-format on
   }
 
-  #createChip(highlightInfo: HighlightInfo): LitHtml.TemplateResult {
+  #createChip(highlightInfo: HighlightInfo): Lit.TemplateResult {
     const expressionName = highlightInfo.name || '<anonymous>';
     const expressionType = highlightInfo.type;
     const isFocused = highlightInfo === this.#focusedMemoryHighlight;
@@ -96,7 +100,7 @@ export class LinearMemoryHighlightChipList extends HTMLElement {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
-      <div class=${LitHtml.Directives.classMap(classMap)}>
+      <div class=${Lit.Directives.classMap(classMap)}>
         <button class="jump-to-highlight-button" title=${i18nString(UIStrings.jumpToAddress)}
             jslog=${VisualLogging.action('linear-memory-inspector.jump-to-highlight').track({click:true})}
             @click=${():void => this.#onJumpToHighlightClick(highlightInfo.startAddress)}>

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

@@ -2,40 +2,40 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './LinearMemoryValueInterpreter.js';
+import './LinearMemoryHighlightChipList.js';
+import './LinearMemoryViewer.js';
+
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
-
-import linearMemoryInspectorStyles from './linearMemoryInspector.css.js';
-
-const {render, html} = LitHtml;
+import {html, nothing, render} from '../../../ui/lit/lit.js';
 
+import type {DeleteMemoryHighlightEvent, JumpToHighlightedMemoryEvent} from './LinearMemoryHighlightChipList.js';
+import linearMemoryInspectorStylesRaw from './linearMemoryInspector.css.js';
+import {formatAddress, parseAddress} from './LinearMemoryInspectorUtils.js';
 import {
-  Mode,
-  Navigation,
   type AddressInputChangedEvent,
   type HistoryNavigationEvent,
+  Mode,
+  Navigation,
   type PageNavigationEvent,
 } from './LinearMemoryNavigator.js';
-
-import './LinearMemoryValueInterpreter.js';
 import type {EndiannessChangedEvent, ValueTypeToggledEvent} from './LinearMemoryValueInterpreter.js';
-
-import './LinearMemoryHighlightChipList.js';
-import type {DeleteMemoryHighlightEvent, JumpToHighlightedMemoryEvent} from './LinearMemoryHighlightChipList.js';
-import {formatAddress, parseAddress} from './LinearMemoryInspectorUtils.js';
-import './LinearMemoryViewer.js';
 import type {ByteSelectedEvent, ResizeEvent} from './LinearMemoryViewer.js';
 import type {HighlightInfo} from './LinearMemoryViewerUtils.js';
 import type {JumpToPointerAddressEvent, ValueTypeModeChangedEvent} from './ValueInterpreterDisplay.js';
 import {
   Endianness,
-  VALUE_INTEPRETER_MAX_NUM_BYTES,
   getDefaultValueTypeMapping,
+  VALUE_INTEPRETER_MAX_NUM_BYTES,
   type ValueType,
   type ValueTypeMode,
 } from './ValueInterpreterDisplayUtils.js';
 
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const linearMemoryInspectorStyles = new CSSStyleSheet();
+linearMemoryInspectorStyles.replaceSync(linearMemoryInspectorStylesRaw.cssContent);
+
 const UIStrings = {
   /**
    *@description Tooltip text that appears when hovering over an invalid address in the address line in the Linear memory inspector
@@ -52,7 +52,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 // on the 1. memoryOffset (at which index this portion starts),
 // and on the 2. outerMemoryLength (length of the original Uint8Array).
 export interface LinearMemoryInspectorData {
-  memory: Uint8Array;
+  memory: Uint8Array<ArrayBuffer>;
   address: number;
   memoryOffset: number;
   outerMemoryLength: number;
@@ -63,11 +63,11 @@ export interface LinearMemoryInspectorData {
   hideValueInspector?: boolean;
 }
 
-export type Settings = {
-  valueTypes: Set<ValueType>,
-  modes: Map<ValueType, ValueTypeMode>,
-  endianness: Endianness,
-};
+export interface Settings {
+  valueTypes: Set<ValueType>;
+  modes: Map<ValueType, ValueTypeMode>;
+  endianness: Endianness;
+}
 
 export class MemoryRequestEvent extends Event {
   static readonly eventName = 'memoryrequest';
@@ -220,7 +220,7 @@ export class LinearMemoryInspector extends HTMLElement {
           @resize=${this.#resize}>
         </devtools-linear-memory-inspector-viewer>
       </div>
-      ${this.#hideValueInspector ? LitHtml.nothing : html`
+      ${this.#hideValueInspector ? nothing : html`
       <div class="value-interpreter">
         <devtools-linear-memory-inspector-interpreter
           .data=${{
@@ -400,9 +400,9 @@ declare global {
   }
 
   interface HTMLElementEventMap {
-    'memoryrequest': MemoryRequestEvent;
-    'addresschanged': AddressChangedEvent;
-    'settingschanged': SettingsChangedEvent;
-    'deletememoryhighlight': DeleteMemoryHighlightEvent;
+    memoryrequest: MemoryRequestEvent;
+    addresschanged: AddressChangedEvent;
+    settingschanged: SettingsChangedEvent;
+    deletememoryhighlight: DeleteMemoryHighlightEvent;
   }
 }

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

@@ -5,10 +5,14 @@
 import '../../../ui/components/icon_button/icon_button.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
-import linearMemoryNavigatorStyles from './linearMemoryNavigator.css.js';
+import linearMemoryNavigatorStylesRaw from './linearMemoryNavigator.css.js';
+
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const linearMemoryNavigatorStyles = new CSSStyleSheet();
+linearMemoryNavigatorStyles.replaceSync(linearMemoryNavigatorStylesRaw.cssContent);
 
 const UIStrings = {
   /**
@@ -39,7 +43,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, Directives: {ifDefined}} = LitHtml;
+const {render, html, Directives: {ifDefined}} = Lit;
 
 export const enum Navigation {
   BACKWARD = 'Backward',
@@ -160,13 +164,13 @@ export class LinearMemoryNavigator extends HTMLElement {
     // clang-format on
   }
 
-  #createAddressInput(): LitHtml.TemplateResult {
+  #createAddressInput(): Lit.TemplateResult {
     const classMap = {
       'address-input': true,
       invalid: !this.#valid,
     };
     return html`
-      <input class=${LitHtml.Directives.classMap(classMap)} data-input="true" .value=${this.#address}
+      <input class=${Lit.Directives.classMap(classMap)} data-input="true" .value=${this.#address}
         jslog=${VisualLogging.textField('linear-memory-inspector.address').track({
       change: true,
     })}
@@ -180,7 +184,7 @@ export class LinearMemoryNavigator extends HTMLElement {
   }
 
   #createButton(data: {icon: string, title: string, event: Event, enabled: boolean, jslogContext: string}):
-      LitHtml.TemplateResult {
+      Lit.TemplateResult {
     return html`
       <button class="navigator-button" ?disabled=${!data.enabled}
         jslog=${VisualLogging.action().track({click: true, keydown: 'Enter'}).context(data.jslogContext)}

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

@@ -8,13 +8,17 @@ import './ValueInterpreterSettings.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
-import linearMemoryValueInterpreterStyles from './linearMemoryValueInterpreter.css.js';
+import linearMemoryValueInterpreterStylesRaw from './linearMemoryValueInterpreter.css.js';
 import {Endianness, type ValueType, type ValueTypeMode} from './ValueInterpreterDisplayUtils.js';
 import type {TypeToggleEvent} from './ValueInterpreterSettings.js';
 
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const linearMemoryValueInterpreterStyles = new CSSStyleSheet();
+linearMemoryValueInterpreterStyles.replaceSync(linearMemoryValueInterpreterStylesRaw.cssContent);
+
 const UIStrings = {
   /**
    *@description Tooltip text that appears when hovering over the gear button to open and close settings in the Linear memory inspector. These settings
@@ -30,7 +34,7 @@ const str_ =
     i18n.i18n.registerUIStrings('panels/linear_memory_inspector/components/LinearMemoryValueInterpreter.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const {render, html} = LitHtml;
+const {render, html} = Lit;
 
 export class EndiannessChangedEvent extends Event {
   static readonly eventName = 'endiannesschanged';
@@ -128,13 +132,13 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
     this.dispatchEvent(new EndiannessChangedEvent(endianness));
   }
 
-  #renderEndiannessSetting(): LitHtml.TemplateResult {
+  #renderEndiannessSetting(): Lit.TemplateResult {
     const onEnumSettingChange = this.#onEndiannessChange.bind(this);
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
     <label data-endianness-setting="true" title=${i18nString(UIStrings.changeEndianness)}>
-      <select class="chrome-select"
+      <select
         jslog=${VisualLogging.dropDown('linear-memory-inspector.endianess').track({change: true})}
         style="border: none; background-color: transparent; cursor: pointer;"
         data-endianness="true" @change=${onEnumSettingChange}>

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

@@ -2,17 +2,21 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import {toHexString} from './LinearMemoryInspectorUtils.js';
-import linearMemoryViewerStyles from './linearMemoryViewer.css.js';
+import linearMemoryViewerStylesRaw from './linearMemoryViewer.css.js';
 import type {HighlightInfo} from './LinearMemoryViewerUtils.js';
 
-const {render, html} = LitHtml;
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const linearMemoryViewerStyles = new CSSStyleSheet();
+linearMemoryViewerStyles.replaceSync(linearMemoryViewerStylesRaw.cssContent);
+
+const {render, html} = Lit;
 
 export interface LinearMemoryViewerData {
-  memory: Uint8Array;
+  memory: Uint8Array<ArrayBuffer>;
   address: number;
   memoryOffset: number;
   focus: boolean;
@@ -210,7 +214,7 @@ export class LinearMemoryViewer extends HTMLElement {
     }
   }
 
-  #renderView(): LitHtml.TemplateResult {
+  #renderView(): Lit.TemplateResult {
     const itemTemplates = [];
     for (let i = 0; i < this.#numRows; ++i) {
       itemTemplates.push(this.#renderRow(i));
@@ -218,7 +222,7 @@ export class LinearMemoryViewer extends HTMLElement {
     return html`${itemTemplates}`;
   }
 
-  #renderRow(row: number): LitHtml.TemplateResult {
+  #renderRow(row: number): Lit.TemplateResult {
     const {startIndex, endIndex} = {startIndex: row * this.#numBytesInRow, endIndex: (row + 1) * this.#numBytesInRow};
 
     const classMap = {
@@ -227,7 +231,7 @@ export class LinearMemoryViewer extends HTMLElement {
     };
     return html`
     <div class="row">
-      <span class=${LitHtml.Directives.classMap(classMap)}>${toHexString({number: startIndex + this.#memoryOffset, pad: 8, prefix: false})}</span>
+      <span class=${Lit.Directives.classMap(classMap)}>${toHexString({number: startIndex + this.#memoryOffset, pad: 8, prefix: false})}</span>
       <span class="divider"></span>
       ${this.#renderByteValues(startIndex, endIndex)}
       <span class="divider"></span>
@@ -236,7 +240,7 @@ export class LinearMemoryViewer extends HTMLElement {
     `;
   }
 
-  #renderByteValues(startIndex: number, endIndex: number): LitHtml.TemplateResult {
+  #renderByteValues(startIndex: number, endIndex: number): Lit.TemplateResult {
     const cells = [];
     for (let i = startIndex; i < endIndex; ++i) {
       const actualIndex = i + this.#memoryOffset;
@@ -257,12 +261,12 @@ export class LinearMemoryViewer extends HTMLElement {
       const byteValue = isSelectableCell ? html`${toHexString({number: this.#memory[i], pad: 2, prefix: false})}` : '';
       const onSelectedByte = isSelectableCell ? this.#onSelectedByte.bind(this, actualIndex) : '';
       const jslog = VisualLogging.tableCell('linear-memory-inspector.byte-cell').track({click: true});
-      cells.push(html`<span class=${LitHtml.Directives.classMap(classMap)} @click=${onSelectedByte} jslog=${jslog}>${byteValue}</span>`);
+      cells.push(html`<span class=${Lit.Directives.classMap(classMap)} @click=${onSelectedByte} jslog=${jslog}>${byteValue}</span>`);
     }
     return html`${cells}`;
   }
 
-  #renderCharacterValues(startIndex: number, endIndex: number): LitHtml.TemplateResult {
+  #renderCharacterValues(startIndex: number, endIndex: number): Lit.TemplateResult {
     const cells = [];
     for (let i = startIndex; i < endIndex; ++i) {
       const actualIndex = i + this.#memoryOffset;
@@ -279,7 +283,7 @@ export class LinearMemoryViewer extends HTMLElement {
       const value = isSelectableCell ? html`${this.#toAscii(this.#memory[i])}` : '';
       const onSelectedByte = isSelectableCell ? this.#onSelectedByte.bind(this, i + this.#memoryOffset) : '';
       const jslog = VisualLogging.tableCell('linear-memory-inspector.text-cell').track({click: true});
-      cells.push(html`<span class=${LitHtml.Directives.classMap(classMap)} @click=${onSelectedByte} jslog=${jslog}>${value}</span>`);
+      cells.push(html`<span class=${Lit.Directives.classMap(classMap)} @click=${onSelectedByte} jslog=${jslog}>${value}</span>`);
     }
     return html`${cells}`;
   }

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

@@ -6,11 +6,11 @@ import '../../../ui/components/icon_button/icon_button.js';
 
 import * as i18n from '../../../core/i18n/i18n.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';
+import inspectorCommonStylesRaw from '../../../ui/legacy/inspectorCommon.css.js';
+import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
-import valueInterpreterDisplayStyles from './valueInterpreterDisplay.css.js';
+import valueInterpreterDisplayStylesRaw from './valueInterpreterDisplay.css.js';
 import {
   Endianness,
   format,
@@ -24,6 +24,14 @@ import {
   ValueTypeMode,
 } from './ValueInterpreterDisplayUtils.js';
 
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const inspectorCommonStyles = new CSSStyleSheet();
+inspectorCommonStyles.replaceSync(inspectorCommonStylesRaw.cssContent);
+
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const valueInterpreterDisplayStyles = new CSSStyleSheet();
+valueInterpreterDisplayStyles.replaceSync(valueInterpreterDisplayStylesRaw.cssContent);
+
 const UIStrings = {
   /**
    *@description Tooltip text that appears when hovering over an unsigned interpretation of the memory under the Value Interpreter
@@ -51,7 +59,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} = LitHtml;
+const {render, html} = Lit;
 
 const SORTED_VALUE_TYPES = Array.from(getDefaultValueTypeMapping().keys());
 
@@ -136,7 +144,7 @@ export class ValueInterpreterDisplay extends HTMLElement {
     // clang-format on
   }
 
-  #showValue(type: ValueType): LitHtml.TemplateResult {
+  #showValue(type: ValueType): Lit.TemplateResult {
     if (isNumber(type)) {
       return this.#renderNumberValues(type);
     }
@@ -146,7 +154,7 @@ export class ValueInterpreterDisplay extends HTMLElement {
     throw new Error(`No known way to format ${type}`);
   }
 
-  #renderPointerValue(type: ValueType): LitHtml.TemplateResult {
+  #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);
@@ -178,7 +186,7 @@ export class ValueInterpreterDisplay extends HTMLElement {
     this.dispatchEvent(new JumpToPointerAddressEvent(address));
   }
 
-  #renderNumberValues(type: ValueType): LitHtml.TemplateResult {
+  #renderNumberValues(type: ValueType): Lit.TemplateResult {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
@@ -186,7 +194,6 @@ export class ValueInterpreterDisplay extends HTMLElement {
       <div>
         <select title=${i18nString(UIStrings.changeValueTypeMode)}
           data-mode-settings="true"
-          class="chrome-select"
           style="border: none; background-color: transparent; cursor: pointer; color: var(--sys-color-token-subtle);"
           jslog=${VisualLogging.dropDown('linear-memory-inspector.value-type-mode').track({change: true})}
           @change=${this.#onValueTypeModeChange.bind(this, type)}>
@@ -204,7 +211,7 @@ export class ValueInterpreterDisplay extends HTMLElement {
     // clang-format on
   }
 
-  #renderSignedAndUnsigned(type: ValueType): LitHtml.TemplateResult {
+  #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);

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

@@ -13,7 +13,8 @@ const UIStrings = {
    */
   notApplicable: 'N/A',
 };
-const str_ = i18n.i18n.registerUIStrings('panels/linear_memory_inspector/components/ValueInterpreterDisplayUtils.ts', UIStrings);
+const str_ =
+    i18n.i18n.registerUIStrings('panels/linear_memory_inspector/components/ValueInterpreterDisplayUtils.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export const VALUE_INTEPRETER_MAX_NUM_BYTES = 8;
@@ -109,7 +110,7 @@ export function getPointerAddress(type: ValueType, buffer: ArrayBuffer, endianne
     const isLittleEndian = endianness === Endianness.LITTLE;
     return type === ValueType.POINTER32 ? dataView.getUint32(0, isLittleEndian) :
                                           dataView.getBigUint64(0, isLittleEndian);
-  } catch (e) {
+  } catch {
     return NaN;
   }
 }
@@ -164,7 +165,7 @@ export function format(formatData: FormatData): string {
       default:
         return Platform.assertNever(formatData.type, `Unknown value type: ${formatData.type}`);
     }
-  } catch (e) {
+  } catch {
     return i18nString(UIStrings.notApplicable);
   }
 }

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

@@ -5,13 +5,17 @@
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as Input from '../../../ui/components/input/input.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import {ValueType, valueTypeToLocalizedString} from './ValueInterpreterDisplayUtils.js';
-import valueInterpreterSettingsStyles from './valueInterpreterSettings.css.js';
+import valueInterpreterSettingsStylesRaw from './valueInterpreterSettings.css.js';
 
-const {render, html} = LitHtml;
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const valueInterpreterSettingsStyles = new CSSStyleSheet();
+valueInterpreterSettingsStyles.replaceSync(valueInterpreterSettingsStylesRaw.cssContent);
+
+const {render, html} = Lit;
 
 const UIStrings = {
   /**
@@ -90,7 +94,7 @@ export class ValueInterpreterSettings extends HTMLElement {
       `, this.#shadow, {host: this});
   }
 
-  #plotTypeSelections(group: ValueTypeGroup): LitHtml.TemplateResult {
+  #plotTypeSelections(group: ValueTypeGroup): Lit.TemplateResult {
     const types = GROUP_TO_TYPES.get(group);
     if (!types) {
       throw new Error(`Unknown group ${group}`);