chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

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

@@ -8,13 +8,13 @@ import * as Platform from '../../../core/platform/platform.js';
 import type * as Puppeteer from '../../../third_party/puppeteer/puppeteer.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as SuggestionInput from '../../../ui/components/suggestion_input/suggestion_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 * as Controllers from '../controllers/controllers.js';
 import * as Models from '../models/models.js';
 import * as Util from '../util/util.js';
 
-import stepEditorStyles from './stepEditor.css.js';
+import stepEditorStylesRaw from './stepEditor.css.js';
 import {
   ArrayAssignments,
   assert,
@@ -29,7 +29,11 @@ import {
   type RequiredKeys,
 } from './util.js';
 
-const {html, Decorators, Directives, LitElement} = LitHtml;
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const stepEditorStyles = new CSSStyleSheet();
+stepEditorStyles.replaceSync(stepEditorStylesRaw.cssContent);
+
+const {html, Decorators, Directives, LitElement} = Lit;
 const {customElement, property, state} = Decorators;
 const {live} = Directives;
 
@@ -486,7 +490,7 @@ class RecorderSelectorPickerButton extends LitElement {
     void this.#picker.stop();
   }
 
-  protected override render(): LitHtml.TemplateResult|undefined {
+  protected override render(): Lit.TemplateResult|undefined {
     if (this.disabled) {
       return;
     }
@@ -654,7 +658,7 @@ export class StepEditor extends LitElement {
   };
 
   #renderInlineButton(opts: {class: string, title: string, iconName: string, onClick: (event: MouseEvent) => void}):
-      LitHtml.TemplateResult|undefined {
+      Lit.TemplateResult|undefined {
     if (this.disabled) {
       return;
     }
@@ -673,7 +677,7 @@ export class StepEditor extends LitElement {
     `;
   }
 
-  #renderDeleteButton(attribute: Attribute): LitHtml.TemplateResult|undefined {
+  #renderDeleteButton(attribute: Attribute): Lit.TemplateResult|undefined {
     if (this.disabled) {
       return;
     }
@@ -705,7 +709,7 @@ export class StepEditor extends LitElement {
     // clang-format on
   }
 
-  #renderTypeRow(editable: boolean): LitHtml.TemplateResult {
+  #renderTypeRow(editable: boolean): Lit.TemplateResult {
     this.#renderedAttributes.add('type');
     // clang-format off
     return html`<div class="row attribute" data-attribute="type" jslog=${VisualLogging.treeItem('type')}>
@@ -721,7 +725,7 @@ export class StepEditor extends LitElement {
     // clang-format on
   }
 
-  #renderRow(attribute: Attribute): LitHtml.TemplateResult|undefined {
+  #renderRow(attribute: Attribute): Lit.TemplateResult|undefined {
     this.#renderedAttributes.add(attribute);
     const attributeValue = this.state[attribute]?.toString();
     if (attributeValue === undefined) {
@@ -765,7 +769,7 @@ export class StepEditor extends LitElement {
     // clang-format on
   }
 
-  #renderFrameRow(): LitHtml.TemplateResult|undefined {
+  #renderFrameRow(): Lit.TemplateResult|undefined {
     this.#renderedAttributes.add('frame');
     if (this.state.frame === undefined) {
       return;
@@ -837,7 +841,7 @@ export class StepEditor extends LitElement {
     // clang-format on
   }
 
-  #renderSelectorsRow(): LitHtml.TemplateResult|undefined {
+  #renderSelectorsRow(): Lit.TemplateResult|undefined {
     this.#renderedAttributes.add('selectors');
     if (this.state.selectors === undefined) {
       return;
@@ -960,7 +964,7 @@ export class StepEditor extends LitElement {
     // clang-format on
   }
 
-  #renderAssertedEvents(): LitHtml.TemplateResult|undefined {
+  #renderAssertedEvents(): Lit.TemplateResult|undefined {
     this.#renderedAttributes.add('assertedEvents');
     if (this.state.assertedEvents === undefined) {
       return;
@@ -1025,7 +1029,7 @@ export class StepEditor extends LitElement {
     // clang-format on
   }
 
-  #renderAttributesRow(): LitHtml.TemplateResult|undefined {
+  #renderAttributesRow(): Lit.TemplateResult|undefined {
     this.#renderedAttributes.add('attributes');
     if (this.state.attributes === undefined) {
       return;
@@ -1134,7 +1138,7 @@ export class StepEditor extends LitElement {
     // clang-format on
   }
 
-  #renderAddRowButtons(): Array<LitHtml.TemplateResult|undefined> {
+  #renderAddRowButtons(): Array<Lit.TemplateResult|undefined> {
     const attributes = attributesByType[this.state.type];
     return [...attributes.optional].filter(attr => this.state[attr] === undefined).map(attr => {
       // clang-format off
@@ -1160,7 +1164,7 @@ export class StepEditor extends LitElement {
     });
   };
 
-  protected override render(): LitHtml.TemplateResult {
+  protected override render(): Lit.TemplateResult {
     this.#renderedAttributes = new Set();
 
     // clang-format off

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

@@ -2,11 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/* Some view input callbacks might be handled outside of LitHtml and we
+/* Some view input callbacks might be handled outside of Lit and we
    bind all of them upfront. We disable the lit_html_host_this since we
-   do not define any host for LitHtml.render and the rule is not happy
+   do not define any host for Lit.render and the rule is not happy
    about it. */
-/* eslint-disable rulesdir/lit-html-host-this */
 
 import '../../../ui/components/icon_button/icon_button.js';
 import './StepEditor.js';
@@ -17,16 +16,20 @@ import * as Platform from '../../../core/platform/platform.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.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';
+import * as Lit from '../../../ui/lit/lit.js';
 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 stepViewStyles from './stepView.css.js';
+import stepViewStylesRaw from './stepView.css.js';
 import type {TimelineSectionData} from './TimelineSection.js';
 
-const {html} = LitHtml;
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const stepViewStyles = new CSSStyleSheet();
+stepViewStyles.replaceSync(stepViewStylesRaw.cssContent);
+
+const {html} = Lit;
 
 const UIStrings = {
   /**
@@ -272,13 +275,13 @@ export class RemoveBreakpointEvent extends Event {
 
 const COPY_ACTION_PREFIX = 'copy-step-as-';
 
-type Action = {
-  id: string,
-  label: string,
-  group: string,
-  groupTitle: string,
-  jslogContext?: string,
-};
+interface Action {
+  id: string;
+  label: string;
+  group: string;
+  groupTitle: string;
+  jslogContext?: string;
+}
 
 export interface ViewInput extends StepViewData {
   step?: Models.Schema.Step;
@@ -316,7 +319,7 @@ export type ViewOutput = unknown;
 function getStepTypeTitle(input: {
   step?: Models.Schema.Step,
   section?: Models.Section.Section,
-}): string|LitHtml.TemplateResult {
+}): string|Lit.TemplateResult {
   if (input.section) {
     return input.section.title ? input.section.title : html`<span class="fallback">(No Title)</span>`;
   }
@@ -392,7 +395,7 @@ function getSectionPreview(section?: Models.Section.Section): string {
   return section.url;
 }
 
-function renderStepActions(input: ViewInput): LitHtml.TemplateResult|null {
+function renderStepActions(input: ViewInput): Lit.TemplateResult|null {
   // clang-format off
   return html`
     <devtools-button
@@ -441,7 +444,7 @@ function viewFunction(input: ViewInput, _output: ViewOutput, target: HTMLElement
   const subtitle = input.step ? getSelectorPreview(input.step) : getSectionPreview();
 
   // clang-format off
-  LitHtml.render(
+  Lit.render(
     html`
     <devtools-timeline-section .data=${
       {
@@ -455,7 +458,7 @@ function viewFunction(input: ViewInput, _output: ViewOutput, target: HTMLElement
       input.stepIndex
     } data-section-index=${
       input.sectionIndex
-    } class=${LitHtml.Directives.classMap(stepClasses)}>
+    } class=${Lit.Directives.classMap(stepClasses)}>
       <svg slot="icon" width="24" height="24" height="100%" class="icon">
         <circle class="circle-icon"/>
         <g class="error-icon">

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

@@ -2,11 +2,15 @@
 // 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 timelineSectionStyles from './timelineSection.css.js';
+import timelineSectionStylesRaw from './timelineSection.css.js';
 
-const {html} = LitHtml;
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const timelineSectionStyles = new CSSStyleSheet();
+timelineSectionStyles.replaceSync(timelineSectionStylesRaw.cssContent);
+
+const {html} = Lit;
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -62,9 +66,9 @@ export class TimelineSection extends HTMLElement {
     };
 
     // clang-format off
-    LitHtml.render(
+    Lit.render(
       html`
-      <div class=${LitHtml.Directives.classMap(classes)}>
+      <div class=${Lit.Directives.classMap(classes)}>
         <div class="overlay"></div>
         <div class="icon"><slot name="icon"></slot></div>
         <svg width="24" height="100%" class="bar">

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

@@ -8,7 +8,6 @@ import * as RecordingListView from './RecordingListView.js';
 import * as RecordingView from './RecordingView.js';
 import * as ReplaySection from './ReplaySection.js';
 import * as SelectButton from './SelectButton.js';
-import * as StartView from './StartView.js';
 import * as StepEditor from './StepEditor.js';
 import * as StepView from './StepView.js';
 import * as TimelineSection from './TimelineSection.js';
@@ -20,7 +19,6 @@ export {
   RecordingView,
   ReplaySection,
   SelectButton,
-  StartView,
   StepEditor,
   StepView,
   TimelineSection,

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

@@ -6,9 +6,8 @@ import * as Common from '../../../core/common/common.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
-import type * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import type * as Lit from '../../../ui/lit/lit.js';
 import * as Models from '../models/models.js';
-
 import * as Util from '../util/util.js';
 
 const BINDING_NAME = 'captureSelectors';
@@ -43,14 +42,14 @@ export class SelectorPicker implements SDK.TargetManager.Observer {
     return SDK.TargetManager.TargetManager.instance();
   }
 
-  readonly #element: LitHtml.LitElement;
+  readonly #element: Lit.LitElement;
 
   #selectorAttribute?: string;
 
   readonly #activeMutex = new Common.Mutex.Mutex();
   active = false;
 
-  constructor(element: LitHtml.LitElement) {
+  constructor(element: Lit.LitElement) {
     this.#element = element;
   }
 

package/front_end/panels/recorder/converters/Converter.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 * as Models from '../models/models.js';
 import type * as PuppeteerReplay from '../../../third_party/puppeteer-replay/puppeteer-replay.js';
+import type * as Models from '../models/models.js';
 
 export interface Converter {
   stringify(flow: Models.Schema.UserFlow): Promise<[string, PuppeteerReplay.SourceMap|undefined]>;

package/front_end/panels/recorder/extensions/ExtensionManager.ts

@@ -121,6 +121,6 @@ export const enum Events {
   EXTENSIONS_UPDATED = 'extensionsUpdated',
 }
 
-export type EventTypes = {
-  [Events.EXTENSIONS_UPDATED]: Extension[],
-};
+export interface EventTypes {
+  [Events.EXTENSIONS_UPDATED]: Extension[];
+}

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

@@ -84,8 +84,8 @@ if (!window.DevToolsRecorder) {
 }
 
 export {
-  type Step,
+  type DevToolsRecorder,
   type RecordingClient,
   type SelectorPicker,
-  type DevToolsRecorder,
+  type Step,
 };

package/front_end/panels/recorder/injected/selectors/CSSSelector.test.ts

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/* eslint-disable rulesdir/es-modules-import */
-
 import {findMinMax} from './CSSSelector.js';
 
 describe('findMinMax', () => {

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

@@ -243,13 +243,10 @@ export class RecordingPlayer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       }
 
       override async beforeEachStep?(step: Step, flow: UserFlow): Promise<void> {
-        let resolver: () => void = () => {};
-        const promise = new Promise<void>(r => {
-          resolver = r;
-        });
+        const {resolve, promise} = Promise.withResolvers<void>();
         player.dispatchEventToListeners(Events.STEP, {
           step,
-          resolve: resolver,
+          resolve,
         });
         await promise;
         const currentStepIndex = flow.steps.indexOf(step);
@@ -320,11 +317,11 @@ export const enum Events {
   CONTINUE = 'Continue',
 }
 
-type EventTypes = {
-  [Events.ABORT]: void,
-  [Events.DONE]: void,
-  [Events.STEP]: {step: Step, resolve: () => void},
-  [Events.STOP]: void,
-  [Events.CONTINUE]: void,
-  [Events.ERROR]: Error,
-};
+interface EventTypes {
+  [Events.ABORT]: void;
+  [Events.DONE]: void;
+  [Events.STEP]: {step: Step, resolve: () => void};
+  [Events.STOP]: void;
+  [Events.CONTINUE]: void;
+  [Events.ERROR]: Error;
+}

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

@@ -5,26 +5,25 @@
 import * as Common from '../../../core/common/common.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
-import * as UI from '../../../ui/legacy/legacy.js';
-import * as Util from '../util/util.js';
-
 import type * as ProtocolProxyApi from '../../../generated/protocol-proxy-api.js';
 import type * as Protocol from '../../../generated/protocol.js';
+import * as UI from '../../../ui/legacy/legacy.js';
 import type * as Injected from '../injected/injected.js';
+import * as Util from '../util/util.js';
 
 import {
   AssertedEventType,
-  StepType,
-  type Key,
   type ChangeStep,
   type ClickStep,
   type DoubleClickStep,
   type FrameSelector,
+  type Key,
   type KeyDownStep,
   type KeyUpStep,
   type NavigationEvent,
   type SelectorType,
   type Step,
+  StepType,
   type Target,
   type UserFlow,
 } from './Schema.js';
@@ -33,30 +32,30 @@ import {evaluateInAllFrames, getTargetFrameContext} from './SDKUtils.js';
 
 const formatAsJSLiteral = Platform.StringUtilities.formatAsJSLiteral;
 
-type TargetInfoChangedEvent = {
-  type: 'targetInfoChanged',
-  event: Common.EventTarget.EventTargetEvent<Protocol.Target.TargetInfo>,
-  target: SDK.Target.Target,
-};
+interface TargetInfoChangedEvent {
+  type: 'targetInfoChanged';
+  event: Common.EventTarget.EventTargetEvent<Protocol.Target.TargetInfo>;
+  target: SDK.Target.Target;
+}
 
-type TargerCreatedRecorderEvent = {
-  type: 'targetCreated',
-  event: Common.EventTarget.EventTargetEvent<Protocol.Target.TargetInfo>,
-  target: SDK.Target.Target,
-};
+interface TargerCreatedRecorderEvent {
+  type: 'targetCreated';
+  event: Common.EventTarget.EventTargetEvent<Protocol.Target.TargetInfo>;
+  target: SDK.Target.Target;
+}
 
-type TargetClosedRecorderEvent = {
-  type: 'targetClosed',
-  event: Common.EventTarget.EventTargetEvent<Protocol.Target.TargetID>,
-  target: SDK.Target.Target,
-};
+interface TargetClosedRecorderEvent {
+  type: 'targetClosed';
+  event: Common.EventTarget.EventTargetEvent<Protocol.Target.TargetID>;
+  target: SDK.Target.Target;
+}
 
-type BindingCalledRecorderEvent = {
-  type: 'bindingCalled',
-  event: Common.EventTarget.EventTargetEvent<Protocol.Runtime.BindingCalledEvent>,
-  target: SDK.Target.Target,
-  frameId: Protocol.Page.FrameId,
-};
+interface BindingCalledRecorderEvent {
+  type: 'bindingCalled';
+  event: Common.EventTarget.EventTargetEvent<Protocol.Runtime.BindingCalledEvent>;
+  target: SDK.Target.Target;
+  frameId: Protocol.Page.FrameId;
+}
 
 type RecorderEvent =
     |TargetInfoChangedEvent|TargerCreatedRecorderEvent|TargetClosedRecorderEvent|BindingCalledRecorderEvent;
@@ -745,10 +744,8 @@ export class RecordingSession extends Common.ObjectWrapper.ObjectWrapper<EventTy
 
   async #waitForDOMContentLoadedWithTimeout(
       resourceTreeModel: SDK.ResourceTreeModel.ResourceTreeModel, timeout: number): Promise<void> {
-    let resolver: (value: void|Promise<void>) => void = () => Promise.resolve();
-    const contentLoadedPromise = new Promise<void>(resolve => {
-      resolver = resolve;
-    });
+    const {resolve: resolver, promise: contentLoadedPromise} = Promise.withResolvers<void>();
+
     const onDomContentLoaded = (): void => {
       resourceTreeModel.removeEventListener(SDK.ResourceTreeModel.Events.DOMContentLoaded, onDomContentLoaded);
       resolver();
@@ -773,7 +770,7 @@ export const enum Events {
   RECORDING_STOPPED = 'recordingstopped',
 }
 
-type EventTypes = {
-  [Events.RECORDING_UPDATED]: UserFlow,
-  [Events.RECORDING_STOPPED]: UserFlow,
-};
+interface EventTypes {
+  [Events.RECORDING_UPDATED]: UserFlow;
+  [Events.RECORDING_STOPPED]: UserFlow;
+}

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

@@ -25,4 +25,4 @@ export type ScrollStep = PuppeteerReplay.Schema.ScrollStep;
 export type AssertionStep = PuppeteerReplay.Schema.AssertionStep;
 export type ClickAttributes = PuppeteerReplay.Schema.ClickAttributes;
 export type Key = PuppeteerReplay.Schema.Key;
-export {AssertedEventType, StepType, SelectorType} from '../../../third_party/puppeteer-replay/puppeteer-replay.js';
+export {AssertedEventType, SelectorType, StepType} from '../../../third_party/puppeteer-replay/puppeteer-replay.js';

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

@@ -2,13 +2,14 @@
 // 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 Step,
-  type SetViewportStep,
   type EmulateNetworkConditionsStep,
+  type SetViewportStep,
+  type Step,
   StepType,
 } from './Schema.js';
-import * as PuppeteerReplay from '../../../third_party/puppeteer-replay/puppeteer-replay.js';
 
 export function createViewportStep(viewport: {
   clientWidth: number,

package/front_end/panels/recorder/recorderController.css

@@ -137,6 +137,7 @@ devtools-recording-list-view {
   outline-offset: 3px;
 }
 
-.feedback .x-link:focus-visible {
+.feedback .x-link:focus-visible,
+.empty-state-description .x-link:focus-visible {
   outline: -webkit-focus-ring-color auto 1px;
 }

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

@@ -22,4 +22,4 @@ class InjectedScript {
   }
 }
 
-export {DEVTOOLS_RECORDER_WORLD_NAME, InjectedScript, SharedObject, isDebugBuild};
+export {DEVTOOLS_RECORDER_WORLD_NAME, InjectedScript, isDebugBuild, SharedObject};

package/front_end/panels/screencast/ScreencastView.ts

@@ -135,6 +135,7 @@ export class ScreencastView extends UI.Widget.VBox implements SDK.OverlayModel.H
   private historyEntries?: Protocol.Page.NavigationEntry[];
   constructor(screenCaptureModel: SDK.ScreenCaptureModel.ScreenCaptureModel) {
     super();
+    this.registerRequiredCSS(screencastViewStyles);
     this.screenCaptureModel = screenCaptureModel;
     this.domModel = screenCaptureModel.target().model(SDK.DOMModel.DOMModel);
     this.overlayModel = screenCaptureModel.target().model(SDK.OverlayModel.OverlayModel);
@@ -199,11 +200,6 @@ export class ScreencastView extends UI.Widget.VBox implements SDK.OverlayModel.H
     this.updateGlasspane();
   }
 
-  override wasShown(): void {
-    this.startCasting();
-    this.registerCSSFiles([screencastViewStyles]);
-  }
-
   override willHide(): void {
     this.stopCasting();
   }
@@ -675,26 +671,17 @@ export class ScreencastView extends UI.Widget.VBox implements SDK.OverlayModel.H
     this.navigationBar = this.element.createChild('div', 'screencast-navigation');
 
     this.navigationBack = this.navigationBar.createChild('button', 'navigation');
-    {
-      const icon = this.navigationBack.appendChild(new IconButton.Icon.Icon());
-      icon.data = {color: 'var(--icon-default)', iconName: 'arrow-back'};
-    }
+    this.navigationBack.appendChild(IconButton.Icon.create('arrow-back'));
     this.navigationBack.disabled = true;
     UI.ARIAUtils.setLabel(this.navigationBack, i18nString(UIStrings.back));
 
     this.navigationForward = this.navigationBar.createChild('button', 'navigation');
-    {
-      const icon = this.navigationForward.appendChild(new IconButton.Icon.Icon());
-      icon.data = {color: 'var(--icon-default)', iconName: 'arrow-forward'};
-    }
+    this.navigationForward.appendChild(IconButton.Icon.create('arrow-forward'));
     this.navigationForward.disabled = true;
     UI.ARIAUtils.setLabel(this.navigationForward, i18nString(UIStrings.forward));
 
     this.navigationReload = this.navigationBar.createChild('button', 'navigation');
-    {
-      const icon = this.navigationReload.appendChild(new IconButton.Icon.Icon());
-      icon.data = {color: 'var(--icon-default)', iconName: 'refresh'};
-    }
+    this.navigationReload.appendChild(IconButton.Icon.create('refresh'));
     UI.ARIAUtils.setLabel(this.navigationReload, i18nString(UIStrings.reload));
 
     this.navigationUrl = this.navigationBar.appendChild(UI.UIUtils.createInput());
@@ -710,10 +697,7 @@ export class ScreencastView extends UI.Widget.VBox implements SDK.OverlayModel.H
     UI.ARIAUtils.setLabel(this.mouseInputToggle, i18nString(UIStrings.mouseInput));
 
     this.touchInputToggle = this.navigationBar.createChild('button');
-    {
-      this.touchInputToggleIcon = this.touchInputToggle.appendChild(new IconButton.Icon.Icon());
-      this.touchInputToggleIcon.data = {color: 'var(--icon-default)', iconName: 'touch-app'};
-    }
+    this.touchInputToggleIcon = this.touchInputToggle.appendChild(IconButton.Icon.create('touch-app'));
     UI.ARIAUtils.setLabel(this.touchInputToggle, i18nString(UIStrings.touchInput));
 
     this.navigationProgressBar = new ProgressTracker(

package/front_end/panels/search/SearchResultsPane.ts

@@ -47,6 +47,7 @@ export class SearchResultsPane extends UI.Widget.VBox {
     this.searchResults = [];
     this.treeElements = [];
     this.treeOutline = new UI.TreeOutline.TreeOutlineInShadow();
+    this.treeOutline.registerRequiredCSS(searchResultsPaneStyles);
     this.treeOutline.hideOverflow();
 
     this.contentElement.appendChild(this.treeOutline.element);
@@ -85,10 +86,6 @@ export class SearchResultsPane extends UI.Widget.VBox {
     this.matchesExpandedCount += searchResult.matchesCount();
     this.treeElements.push(treeElement);
   }
-  override wasShown(): void {
-    super.wasShown();
-    this.treeOutline.registerCSSFiles([searchResultsPaneStyles]);
-  }
 }
 
 export const matchesExpandedByDefault = 200;