[unified-css] Migrate files in front_end/panels/linear_memory_inspector.

Bug: 391381439
Change-Id: Ibfb8e41ce7477b9d22546e2989bdd5e42ad892c8
Fixed: 404267862, 404268323, 404266916, 404268068
Fixed: 404267933, 404267790, 404267969
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6450701
Auto-Submit: Benedikt Meurer <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>

Author: bmeurer

front_end/panels/linear_memory_inspector/components/LinearMemoryHighlightChipList.ts

@@ -9,13 +9,9 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
-import linearMemoryHighlightChipListStylesRaw from './linearMemoryHighlightChipList.css.js';
+import linearMemoryHighlightChipListStyles 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.cssText);
-
 const UIStrings = {
   /**
    *@description Tooltip text that appears when hovering over an inspected variable's button in the Linear Memory Highlight Chip List.
@@ -64,10 +60,6 @@ export class LinearMemoryHighlightChipList extends HTMLElement {
   #highlightedAreas: HighlightInfo[] = [];
   #focusedMemoryHighlight?: HighlightInfo;
 
-  connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [linearMemoryHighlightChipListStyles];
-  }
-
   set data(data: LinearMemoryHighlightChipListData) {
     this.#highlightedAreas = data.highlightInfos;
     this.#focusedMemoryHighlight = data.focusedMemoryHighlight;
@@ -82,6 +74,7 @@ export class LinearMemoryHighlightChipList extends HTMLElement {
       chips.push(this.#createChip(highlightInfo));
     }
     const result = html`
+            <style>${linearMemoryHighlightChipListStyles.cssText}</style>
             <div class="highlight-chip-list">
               ${chips}
             </div>

front_end/panels/linear_memory_inspector/components/LinearMemoryInspector.ts

@@ -12,7 +12,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import {html, nothing, render} from '../../../ui/lit/lit.js';
 
 import type {DeleteMemoryHighlightEvent, JumpToHighlightedMemoryEvent} from './LinearMemoryHighlightChipList.js';
-import linearMemoryInspectorStylesRaw from './linearMemoryInspector.css.js';
+import linearMemoryInspectorStyles from './linearMemoryInspector.css.js';
 import {formatAddress, parseAddress} from './LinearMemoryInspectorUtils.js';
 import {
   type AddressInputChangedEvent,
@@ -33,10 +33,6 @@ import {
   type ValueTypeMode,
 } from './ValueInterpreterDisplayUtils.js';
 
-// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
-const linearMemoryInspectorStyles = new CSSStyleSheet();
-linearMemoryInspectorStyles.replaceSync(linearMemoryInspectorStylesRaw.cssText);
-
 const UIStrings = {
   /**
    *@description Tooltip text that appears when hovering over an invalid address in the address line in the Linear memory inspector
@@ -143,10 +139,6 @@ export class LinearMemoryInspector extends HTMLElement {
 
   #hideValueInspector = false;
 
-  connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [linearMemoryInspectorStyles];
-  }
-
   set data(data: LinearMemoryInspectorData) {
     if (data.address < data.memoryOffset || data.address > data.memoryOffset + data.memory.length || data.address < 0) {
       throw new Error('Address is out of bounds.');
@@ -198,6 +190,7 @@ export class LinearMemoryInspector extends HTMLElement {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
+      <style>${linearMemoryInspectorStyles.cssText}</style>
       <div class="view">
         <devtools-linear-memory-inspector-navigator
           .data=${{address: navigatorAddressToShow, valid: navigatorAddressIsValid, mode: this.#currentNavigatorMode, error: errorMsg, canGoBackInHistory, canGoForwardInHistory}}

front_end/panels/linear_memory_inspector/components/LinearMemoryNavigator.ts

@@ -10,11 +10,7 @@ import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.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.cssText);
+import linearMemoryNavigatorStyles from './linearMemoryNavigator.css.js';
 
 const UIStrings = {
   /**
@@ -113,10 +109,6 @@ export class LinearMemoryNavigator extends HTMLElement {
   #canGoBackInHistory = false;
   #canGoForwardInHistory = false;
 
-  connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [linearMemoryNavigatorStyles];
-  }
-
   set data(data: LinearMemoryNavigatorData) {
     this.#address = data.address;
     this.#error = data.error;
@@ -139,6 +131,7 @@ export class LinearMemoryNavigator extends HTMLElement {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     const result = html`
+      <style>${linearMemoryNavigatorStyles.cssText}</style>
       <div class="navigator">
         <div class="navigator-item">
           ${this.#createButton({icon: 'undo', title: i18nString(UIStrings.goBackInAddressHistory),

front_end/panels/linear_memory_inspector/components/LinearMemoryValueInterpreter.ts

@@ -11,22 +11,14 @@ 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';
 // eslint-disable-next-line rulesdir/es-modules-import
-import inspectorCommonStylesRaw from '../../../ui/legacy/inspectorCommon.css.js';
+import inspectorCommonStyles 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 linearMemoryValueInterpreterStylesRaw from './linearMemoryValueInterpreter.css.js';
+import linearMemoryValueInterpreterStyles 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 inspectorCommonStyles = new CSSStyleSheet();
-inspectorCommonStyles.replaceSync(inspectorCommonStylesRaw.cssText);
-
-// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
-const linearMemoryValueInterpreterStyles = new CSSStyleSheet();
-linearMemoryValueInterpreterStyles.replaceSync(linearMemoryValueInterpreterStylesRaw.cssText);
-
 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
@@ -81,10 +73,6 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
   #memoryLength = 0;
   #showSettings = false;
 
-  connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [inspectorCommonStyles, linearMemoryValueInterpreterStyles];
-  }
-
   set data(data: LinearMemoryValueInterpreterData) {
     this.#endianness = data.endianness;
     this.#buffer = data.value;
@@ -98,6 +86,8 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
+      <style>${inspectorCommonStyles.cssText}</style>
+      <style>${linearMemoryValueInterpreterStyles.cssText}</style>
       <div class="value-interpreter">
         <div class="settings-toolbar">
           ${this.#renderEndiannessSetting()}

front_end/panels/linear_memory_inspector/components/LinearMemoryViewer.ts

@@ -7,13 +7,9 @@ import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import {toHexString} from './LinearMemoryInspectorUtils.js';
-import linearMemoryViewerStylesRaw from './linearMemoryViewer.css.js';
+import linearMemoryViewerStyles from './linearMemoryViewer.css.js';
 import type {HighlightInfo} from './LinearMemoryViewerUtils.js';
 
-// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
-const linearMemoryViewerStyles = new CSSStyleSheet();
-linearMemoryViewerStyles.replaceSync(linearMemoryViewerStylesRaw.cssText);
-
 const {render, html} = Lit;
 
 export interface LinearMemoryViewerData {
@@ -87,7 +83,6 @@ export class LinearMemoryViewer extends HTMLElement {
 
   connectedCallback(): void {
     this.style.setProperty('--byte-group-margin', `${BYTE_GROUP_MARGIN}px`);
-    this.#shadow.adoptedStyleSheets = [linearMemoryViewerStyles];
   }
 
   disconnectedCallback(): void {
@@ -186,6 +181,7 @@ export class LinearMemoryViewer extends HTMLElement {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
+      <style>${linearMemoryViewerStyles.cssText}</style>
       <div class="view" tabindex="0" @keydown=${this.#onKeyDown} jslog=${jslog}>
         ${this.#renderView()}
       </div>

front_end/panels/linear_memory_inspector/components/ValueInterpreterDisplay.ts

@@ -7,11 +7,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 inspectorCommonStylesRaw from '../../../ui/legacy/inspectorCommon.css.js';
+import inspectorCommonStyles 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 valueInterpreterDisplayStylesRaw from './valueInterpreterDisplay.css.js';
+import valueInterpreterDisplayStyles from './valueInterpreterDisplay.css.js';
 import {
   Endianness,
   format,
@@ -25,14 +25,6 @@ import {
   ValueTypeMode,
 } from './ValueInterpreterDisplayUtils.js';
 
-// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
-const inspectorCommonStyles = new CSSStyleSheet();
-inspectorCommonStyles.replaceSync(inspectorCommonStylesRaw.cssText);
-
-// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
-const valueInterpreterDisplayStyles = new CSSStyleSheet();
-valueInterpreterDisplayStyles.replaceSync(valueInterpreterDisplayStylesRaw.cssText);
-
 const UIStrings = {
   /**
    *@description Tooltip text that appears when hovering over an unsigned interpretation of the memory under the Value Interpreter
@@ -107,13 +99,6 @@ export class ValueInterpreterDisplay extends HTMLElement {
 
   constructor() {
     super();
-    this.#shadow.adoptedStyleSheets = [
-      inspectorCommonStyles,
-    ];
-  }
-
-  connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [inspectorCommonStyles, valueInterpreterDisplayStyles];
   }
 
   set data(data: ValueDisplayData) {
@@ -137,6 +122,8 @@ export class ValueInterpreterDisplay extends HTMLElement {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
+      <style>${inspectorCommonStyles.cssText}</style>
+      <style>${valueInterpreterDisplayStyles.cssText}</style>
       <div class="value-types">
         ${SORTED_VALUE_TYPES.map(type => this.#valueTypes.has(type) ? this.#showValue(type) : '')}
       </div>

front_end/panels/linear_memory_inspector/components/ValueInterpreterSettings.ts

@@ -1,7 +1,7 @@
 // Copyright (c) 2020 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable rulesdir/no-lit-render-outside-of-view */
+/* eslint-disable rulesdir/no-lit-render-outside-of-view, rulesdir/inject-checkbox-styles */
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
@@ -10,11 +10,7 @@ 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 valueInterpreterSettingsStylesRaw from './valueInterpreterSettings.css.js';
-
-// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
-const valueInterpreterSettingsStyles = new CSSStyleSheet();
-valueInterpreterSettingsStyles.replaceSync(valueInterpreterSettingsStylesRaw.cssText);
+import valueInterpreterSettingsStyles from './valueInterpreterSettings.css.js';
 
 const {render, html} = Lit;
 
@@ -70,10 +66,6 @@ export class ValueInterpreterSettings extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #valueTypes = new Set<ValueType>();
 
-  connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [Input.checkboxStyles, valueInterpreterSettingsStyles];
-  }
-
   set data(data: ValueInterpreterSettingsData) {
     this.#valueTypes = data.valueTypes;
     this.#render();
@@ -83,6 +75,8 @@ export class ValueInterpreterSettings extends HTMLElement {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
+      <style>${Input.checkboxStylesRaw.cssText}</style>
+      <style>${valueInterpreterSettingsStyles.cssText}</style>
       <div class="settings" jslog=${VisualLogging.pane('settings')}>
        ${[...GROUP_TO_TYPES.keys()].map(group => {
         return html`