chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/ui/legacy/SplitWidget.ts

@@ -37,7 +37,7 @@ import {Constraints} from './Geometry.js';
 import {Events as ResizerWidgetEvents, type ResizeUpdatePositionEvent, SimpleResizerWidget} from './ResizerWidget.js';
 import splitWidgetStyles from './splitWidget.css.legacy.js';
 import {ToolbarButton} from './Toolbar.js';
-import {Widget} from './Widget.js';
+import {Widget, WidgetElement} from './Widget.js';
 import {Events as ZoomManagerEvents, ZoomManager} from './ZoomManager.js';
 
 export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typeof Widget>(Widget) {
@@ -79,8 +79,8 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
 
   constructor(
       isVertical: boolean, secondIsSidebar: boolean, settingName?: string, defaultSidebarWidth?: number,
-      defaultSidebarHeight?: number, constraintsInDip?: boolean) {
-    super(true);
+      defaultSidebarHeight?: number, constraintsInDip?: boolean, element?: SplitWidgetElement) {
+    super(true, undefined, element);
     this.element.classList.add('split-widget');
     this.registerRequiredCSS(splitWidgetStyles);
 
@@ -89,8 +89,24 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
         this.contentElement.createChild('div', 'shadow-split-widget-contents shadow-split-widget-sidebar vbox');
     this.mainElement =
         this.contentElement.createChild('div', 'shadow-split-widget-contents shadow-split-widget-main vbox');
-    (this.mainElement.createChild('slot') as HTMLSlotElement).name = 'insertion-point-main';
-    (this.sidebarElementInternal.createChild('slot') as HTMLSlotElement).name = 'insertion-point-sidebar';
+    const mainSlot = this.mainElement.createChild('slot') as HTMLSlotElement;
+    mainSlot.name = 'main';
+    mainSlot.addEventListener('slotchange', (_: Event) => {
+      const assignedNode = mainSlot.assignedNodes()[0];
+      const widget = assignedNode instanceof HTMLElement ? Widget.getOrCreateWidget(assignedNode) : null;
+      if (widget && widget !== this.mainWidgetInternal) {
+        this.setMainWidget(widget);
+      }
+    });
+    const sidebarSlot = this.sidebarElementInternal.createChild('slot') as HTMLSlotElement;
+    sidebarSlot.name = 'sidebar';
+    sidebarSlot.addEventListener('slotchange', (_: Event) => {
+      const assignedNode = sidebarSlot.assignedNodes()[0];
+      const widget = assignedNode instanceof HTMLElement ? Widget.getOrCreateWidget(assignedNode) : null;
+      if (widget && widget !== this.sidebarWidgetInternal) {
+        this.setSidebarWidget(widget);
+      }
+    });
     this.resizerElementInternal = this.contentElement.createChild('div', 'shadow-split-widget-resizer');
     this.resizerElementSize = null;
 
@@ -193,7 +209,7 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     }
     this.mainWidgetInternal = widget;
     if (widget) {
-      widget.element.slot = 'insertion-point-main';
+      widget.element.slot = 'main';
       if (this.showModeInternal === ShowMode.ONLY_MAIN || this.showModeInternal === ShowMode.BOTH) {
         widget.show(this.element);
       }
@@ -211,7 +227,7 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     }
     this.sidebarWidgetInternal = widget;
     if (widget) {
-      widget.element.slot = 'insertion-point-sidebar';
+      widget.element.slot = 'sidebar';
       if (this.showModeInternal === ShowMode.ONLY_SIDEBAR || this.showModeInternal === ShowMode.BOTH) {
         widget.show(this.element);
       }
@@ -891,6 +907,45 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
   }
 }
 
+interface SplitWidgetOptions {
+  vertical?: boolean;
+  secondIsSidebar?: boolean;
+  settingName?: string;
+  defaultSidebarWidth?: number;
+  defaultSidebarHeight?: number;
+  constraintsInDip?: boolean;
+  markAsRoot?: boolean;
+}
+
+export class SplitWidgetElement extends WidgetElement<SplitWidget> {
+  #options: SplitWidgetOptions = {};
+
+  set options(options: SplitWidgetOptions) {
+    this.#options = options;
+  }
+
+  override createWidget(): SplitWidget {
+    const {
+      vertical,
+      secondIsSidebar,
+      settingName,
+      defaultSidebarWidth,
+      defaultSidebarHeight,
+      constraintsInDip,
+      markAsRoot,
+    } = this.#options;
+    const widget = new SplitWidget(
+        Boolean(vertical), Boolean(secondIsSidebar), settingName, defaultSidebarWidth, defaultSidebarHeight,
+        constraintsInDip, this);
+    if (markAsRoot) {
+      widget.markAsRoot();
+    }
+    return widget;
+  }
+}
+
+customElements.define('devtools-split-widget', SplitWidgetElement);
+
 export const enum ShowMode {
   BOTH = 'Both',
   ONLY_MAIN = 'OnlyMain',

package/front_end/ui/legacy/TabbedPane.ts

@@ -420,6 +420,16 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     }
   }
 
+  tabIsDisabled(id: string): boolean {
+    return !this.tabIsEnabled(id);
+  }
+
+  tabIsEnabled(id: string): boolean {
+    const tab = this.tabsById.get(id);
+    const disabled = tab?.tabElement.classList.contains('disabled') ?? false;
+    return !disabled;
+  }
+
   toggleTabClass(id: string, className: string, force?: boolean): void {
     const tab = this.tabsById.get(id);
     if (tab && tab.toggleClass(className, force)) {
@@ -1204,6 +1214,7 @@ export class TabbedPaneTab {
       tabElement.classList.add('measuring');
     } else {
       tabElement.addEventListener('click', this.tabClicked.bind(this), false);
+      tabElement.addEventListener('keydown', this.tabKeyDown.bind(this), false);
       tabElement.addEventListener('auxclick', this.tabClicked.bind(this), false);
       tabElement.addEventListener('mousedown', this.tabMouseDown.bind(this), false);
       tabElement.addEventListener('mouseup', this.tabMouseUp.bind(this), false);
@@ -1254,6 +1265,19 @@ export class TabbedPaneTab {
         element?.parentElement?.classList.contains('tabbed-pane-close-button') || false;
   }
 
+  private tabKeyDown(ev: Event): void {
+    const event = ev as KeyboardEvent;
+    switch (event.key) {
+      case 'Enter':
+      case ' ':
+        if (this.isCloseIconClicked(event.target as HTMLElement)) {
+          this.closeTabs([this.id]);
+          ev.consume(true);
+          return;
+        }
+    }
+  }
+
   private tabClicked(ev: Event): void {
     const event = (ev as MouseEvent);
     const middleButton = event.button === 1;

package/front_end/ui/legacy/ThrottledWidget.ts

@@ -10,8 +10,8 @@ export class ThrottledWidget extends VBox {
   private updateWhenVisible: boolean;
   protected lastUpdatePromise: Promise<void> = Promise.resolve();
 
-  constructor(isWebComponent?: boolean, timeout?: number) {
-    super(isWebComponent);
+  constructor(useShadowDom?: boolean, timeout?: number) {
+    super(useShadowDom);
     this.updateThrottler = new Common.Throttler.Throttler(timeout === undefined ? 100 : timeout);
     this.updateWhenVisible = false;
   }

package/front_end/ui/legacy/Toolbar.test.ts

@@ -8,6 +8,7 @@ const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 import {
   dispatchClickEvent,
+  doubleRaf,
   renderElementIntoDOM,
 } from '../../testing/DOMHelpers.js';
 import {describeWithLocale} from '../../testing/EnvironmentHelpers.js';
@@ -89,4 +90,42 @@ describeWithLocale('Toolbar', () => {
     toolbar.removeToolbarItem(item);
     assert.isFalse(toolbar.hasItem(item));
   });
+
+  describe('ToolbarMenuButton', () => {
+    function createToolbarWithButton(
+        contextMenuHandler: sinon.SinonStubStatic,
+        ): UI.Toolbar.ToolbarMenuButton {
+      const div = document.createElement('div');
+      const toolbar = new UI.Toolbar.Toolbar('test-toolbar', div);
+      renderElementIntoDOM(div);
+      const menuButton = new UI.Toolbar.ToolbarMenuButton(contextMenuHandler);
+      menuButton.setTriggerDelay(0);  // default is 200ms but don't want to slow tests down
+      toolbar.appendToolbarItem(menuButton);
+      return menuButton;
+    }
+
+    async function dispatchMouseDownEvent(element: HTMLElement): Promise<void> {
+      const mouseDownEvent = new MouseEvent('mousedown', {
+        buttons: 1,
+      });
+      element.dispatchEvent(mouseDownEvent);
+      await doubleRaf();  // give the timer time to resolve + initiate the context menu
+    }
+
+    it('creates the context menu if it is enabled', async () => {
+      const contextHandler = sinon.stub();
+      const menuButton = createToolbarWithButton(contextHandler);
+      menuButton.setEnabled(true);
+      await dispatchMouseDownEvent(menuButton.element);
+      assert.isTrue(contextHandler.called);
+    });
+
+    it('does not create a context menu if it is not enabled', async () => {
+      const contextHandler = sinon.stub();
+      const menuButton = createToolbarWithButton(contextHandler);
+      menuButton.setEnabled(false);
+      await dispatchMouseDownEvent(menuButton.element);
+      assert.isFalse(contextHandler.called);
+    });
+  });
 });

package/front_end/ui/legacy/Toolbar.ts

@@ -44,7 +44,7 @@ import * as ARIAUtils from './ARIAUtils.js';
 import {ContextMenu} from './ContextMenu.js';
 import {GlassPane, PointerEventsBehavior} from './GlassPane.js';
 import {bindCheckbox} from './SettingsUI.js';
-import {type Suggestion} from './SuggestBox.js';
+import type {Suggestion} from './SuggestBox.js';
 import {Events as TextPromptEvents, TextPrompt} from './TextPrompt.js';
 import toolbarStyles from './toolbar.css.legacy.js';
 import {Tooltip} from './Tooltip.js';
@@ -593,10 +593,6 @@ export class ToolbarButton extends ToolbarItem<ToolbarButton.EventTypes> {
     this.element.focus();
   }
 
-  pressed(pressed: boolean): void {
-    this.button.pressed = pressed;
-  }
-
   checked(checked: boolean): void {
     this.button.checked = checked;
   }
@@ -927,6 +923,7 @@ export class ToolbarFilter extends ToolbarInput {
 
     const filterIcon = IconButton.Icon.create('filter');
     this.element.prepend(filterIcon);
+    this.element.classList.add('toolbar-filter');
   }
 }
 
@@ -954,7 +951,6 @@ export class ToolbarToggle extends ToolbarButton {
     this.setToggleType(Buttons.Button.ToggleType.PRIMARY);
     this.toggled(false);
 
-    this.setPressed(false);
     if (jslogContext) {
       this.element.setAttribute('jslog', `${VisualLogging.toggle().track({click: true}).context(jslogContext)}`);
     }
@@ -963,17 +959,12 @@ export class ToolbarToggle extends ToolbarButton {
     }
   }
 
-  setPressed(pressed: boolean): void {
-    this.pressed(pressed);
-  }
-
   setToggleOnClick(toggleOnClick: boolean): void {
     this.toggleOnClick(toggleOnClick);
   }
 
   setToggled(toggled: boolean): void {
     this.toggled(toggled);
-    this.setPressed(toggled);
   }
 
   setChecked(checked: boolean): void {
@@ -997,7 +988,9 @@ export class ToolbarToggle extends ToolbarButton {
 export class ToolbarMenuButton extends ToolbarCombobox {
   private readonly contextMenuHandler: (arg0: ContextMenu) => void;
   private readonly useSoftMenu: boolean;
-  private triggerTimeout?: number;
+  private triggerTimeoutId?: number;
+  #triggerDelay: number = 200;
+
   constructor(
       contextMenuHandler: (arg0: ContextMenu) => void, isIconDropdown?: boolean, useSoftMenu?: boolean,
       jslogContext?: string, iconName?: string) {
@@ -1010,19 +1003,26 @@ export class ToolbarMenuButton extends ToolbarCombobox {
     ARIAUtils.markAsMenuButton(this.element);
   }
 
+  setTriggerDelay(x: number): void {
+    this.#triggerDelay = x;
+  }
+
   override mouseDown(event: MouseEvent): void {
+    if (!this.enabled) {
+      return;
+    }
     if (event.buttons !== 1) {
       super.mouseDown(event);
       return;
     }
 
-    if (!this.triggerTimeout) {
-      this.triggerTimeout = window.setTimeout(this.trigger.bind(this, event), 200);
+    if (!this.triggerTimeoutId) {
+      this.triggerTimeoutId = window.setTimeout(this.trigger.bind(this, event), this.#triggerDelay);
     }
   }
 
   private trigger(event: Event): void {
-    delete this.triggerTimeout;
+    delete this.triggerTimeoutId;
 
     const contextMenu = new ContextMenu(event, {
       useSoftMenu: this.useSoftMenu,
@@ -1038,8 +1038,8 @@ export class ToolbarMenuButton extends ToolbarCombobox {
   }
 
   override clicked(event: Event): void {
-    if (this.triggerTimeout) {
-      clearTimeout(this.triggerTimeout);
+    if (this.triggerTimeoutId) {
+      clearTimeout(this.triggerTimeoutId);
     }
     this.trigger(event);
   }

package/front_end/ui/legacy/Treeoutline.ts

@@ -349,9 +349,12 @@ export class TreeOutline extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
 
       // Usually, this.element is the tree container that scrolls. But sometimes
       // (i.e. in the Elements panel), its parent is.
-      let scrollParentElement: HTMLElement = this.element;
-      while (getComputedStyle(scrollParentElement).overflow === 'visible' && scrollParentElement.parentElement) {
-        scrollParentElement = scrollParentElement.parentElement;
+      let scrollParentElement: Element = this.element;
+      while (getComputedStyle(scrollParentElement).overflow === 'visible' &&
+             scrollParentElement.parentElementOrShadowHost()) {
+        const parent = scrollParentElement.parentElementOrShadowHost();
+        Platform.assertNotNullOrUndefined(parent);
+        scrollParentElement = parent;
       }
 
       const viewRect = scrollParentElement.getBoundingClientRect();
@@ -801,7 +804,7 @@ export class TreeElement {
     }
   }
 
-  setLeadingIcons(icons: IconButton.Icon.Icon[]): void {
+  setLeadingIcons(icons: IconButton.Icon.Icon[]|IconButton.FileSourceIcon.FileSourceIcon[]): void {
     if (!this.leadingIconsElement && !icons.length) {
       return;
     }

package/front_end/ui/legacy/UIUtils.ts

@@ -61,7 +61,7 @@ import themeColorsStyles from './themeColors.css.legacy.js';
 import tokens from './tokens.css.legacy.js';
 import {Toolbar, type ToolbarButton} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
-import {type TreeOutline} from './Treeoutline.js';
+import type {TreeOutline} from './Treeoutline.js';
 import {Widget} from './Widget.js';
 
 const UIStrings = {
@@ -690,6 +690,7 @@ export function runCSSAnimationOnce(element: Element, className: string): void {
   function animationEndCallback(): void {
     element.classList.remove(className);
     element.removeEventListener('webkitAnimationEnd', animationEndCallback, false);
+    element.removeEventListener('animationcancel', animationEndCallback, false);
   }
 
   if (element.classList.contains(className)) {
@@ -697,6 +698,7 @@ export function runCSSAnimationOnce(element: Element, className: string): void {
   }
 
   element.addEventListener('webkitAnimationEnd', animationEndCallback, false);
+  element.addEventListener('animationcancel', animationEndCallback, false);
   element.classList.add(className);
 }
 
@@ -1098,6 +1100,13 @@ export function createTextButton(text: string, clickHandler?: ((arg0: Event) =>
   button.variant = opts?.variant ? opts.variant : Buttons.Button.Variant.OUTLINED;
   if (clickHandler) {
     button.addEventListener('click', clickHandler);
+    button.addEventListener('keydown', (event: KeyboardEvent): void => {
+      if (event.key === 'Enter' || event.key === 'Space') {
+        // Make sure we don't propagate 'Enter' or 'Space' key events to parents,
+        // so that these get turned into 'click' events properly.
+        event.stopImmediatePropagation();
+      }
+    });
   }
   if (opts?.jslogContext) {
     button.setAttribute('jslog', `${VisualLogging.action().track({click: true}).context(opts.jslogContext)}`);

package/front_end/ui/legacy/View.ts

@@ -4,8 +4,8 @@
 
 import * as Platform from '../../core/platform/platform.js';
 
-import {type TabbedPane} from './TabbedPane.js';
-import {type ToolbarItem, type ToolbarMenuButton} from './Toolbar.js';
+import type {TabbedPane} from './TabbedPane.js';
+import type {ToolbarItem, ToolbarMenuButton} from './Toolbar.js';
 import {ViewManager} from './ViewManager.js';
 import {VBox, type Widget} from './Widget.js';
 
@@ -33,8 +33,8 @@ export class SimpleView extends VBox implements View {
   readonly #title: Platform.UIString.LocalizedString;
   readonly #viewId: Lowercase<string>;
 
-  constructor(title: Platform.UIString.LocalizedString, isWebComponent?: boolean, viewId?: Lowercase<string>) {
-    super(isWebComponent);
+  constructor(title: Platform.UIString.LocalizedString, useShadowDom?: boolean, viewId?: Lowercase<string>) {
+    super(useShadowDom);
     this.#title = title;
     if (viewId) {
       if (!Platform.StringUtilities.isExtendedKebabCase(viewId)) {

package/front_end/ui/legacy/ViewManager.ts

@@ -11,11 +11,11 @@ import * as IconButton from '../components/icon_button/icon_button.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
-import {type ContextMenu} from './ContextMenu.js';
+import type {ContextMenu} from './ContextMenu.js';
 import {type EventData, Events as TabbedPaneEvents, TabbedPane} from './TabbedPane.js';
 import {type ItemsProvider, Toolbar, type ToolbarItem, ToolbarMenuButton} from './Toolbar.js';
 import {createTextChild} from './UIUtils.js';
-import {type TabbedViewLocation, type View, type ViewLocation} from './View.js';
+import type {TabbedViewLocation, View, ViewLocation} from './View.js';
 import viewContainersStyles from './viewContainers.css.legacy.js';
 import {
   getLocalizedViewLocationCategory,
@@ -44,6 +44,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export const defaultOptionsForTabs = {
   security: true,
+  freestyler: true,
 };
 
 export class PreRegisteredView implements View {
@@ -709,8 +710,9 @@ class TabbedLocation extends Location implements TabbedViewLocation {
         continue;
       }
 
+      const isPreviewFeature = view.isPreviewFeature();
       contextMenu.defaultSection().appendItem(
-          title, this.showView.bind(this, view, undefined, true), {jslogContext: view.viewId()});
+          title, this.showView.bind(this, view, undefined, true), {isPreviewFeature, jslogContext: view.viewId()});
     }
   }
 

package/front_end/ui/legacy/ViewRegistration.ts

@@ -6,9 +6,9 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 
-import {type ViewLocationResolver} from './View.js';
+import type {ViewLocationResolver} from './View.js';
 import {PreRegisteredView} from './ViewManager.js';
-import {type Widget} from './Widget.js';
+import type {Widget} from './Widget.js';
 
 const UIStrings = {
   /**

package/front_end/ui/legacy/Widget.ts

@@ -31,6 +31,7 @@
 import '../../core/dom_extension/dom_extension.js';
 
 import * as Platform from '../../core/platform/platform.js';
+import * as LitHtml from '../../ui/lit-html/lit-html.js';
 import * as Helpers from '../components/helpers/helpers.js';
 
 import {Constraints, Size} from './Geometry.js';
@@ -51,6 +52,43 @@ function assert(condition: unknown, message: string): void {
   }
 }
 
+export class WidgetElement<WidgetT extends Widget> extends HTMLElement {
+  widgetClass?: new(...args: any[]) => WidgetT;
+  widgetParams: unknown[] = [];
+
+  createWidget(): WidgetT {
+    if (!this.widgetClass) {
+      throw new Error('No widgetClass defined');
+    }
+
+    return new this.widgetClass(...this.widgetParams, this);
+  }
+
+  connectedCallback(): void {
+    Widget.getOrCreateWidget(this).show(this.parentElement as HTMLElement);
+  }
+}
+
+customElements.define('devtools-widget', WidgetElement);
+
+type Constructor<T, Args extends unknown[]> = {
+  new (...args: Args): T,
+};
+
+export function widgetRef<T extends Widget, Args extends unknown[]>(
+    type: Constructor<T, Args>, callback: (_: T) => void): ReturnType<typeof LitHtml.Directives.ref> {
+  return LitHtml.Directives.ref((e?: Element) => {
+    if (!(e instanceof HTMLElement)) {
+      return;
+    }
+    const widget = Widget.getOrCreateWidget(e);
+    if (!(widget instanceof type)) {
+      throw new Error(`Expected an element with a widget of type ${type.name} but got ${e?.constructor?.name}`);
+    }
+    callback(widget);
+  });
+}
+
 const widgetCounterMap = new WeakMap<Node, number>();
 const widgetMap = new WeakMap<Node, Widget>();
 
@@ -72,10 +110,9 @@ function decrementWidgetCounter(parentElement: Element, childElement: Element):
 }
 
 export class Widget {
-  readonly element: HTMLDivElement;
-  contentElement: HTMLDivElement;
+  readonly element: HTMLElement;
+  contentElement: HTMLElement;
   private shadowRoot: ShadowRoot|undefined;
-  private readonly isWebComponent: boolean|undefined;
   protected visibleInternal: boolean;
   private isRoot: boolean;
   private isShowingInternal: boolean;
@@ -90,22 +127,22 @@ export class Widget {
   private constraintsInternal?: Constraints;
   private invalidationsRequested?: boolean;
   private externallyManaged?: boolean;
-  constructor(isWebComponent?: boolean, delegatesFocus?: boolean) {
-    this.contentElement = document.createElement('div');
-    this.contentElement.classList.add('widget');
-    if (isWebComponent) {
-      this.element = document.createElement('div');
+  constructor(useShadowDom?: boolean, delegatesFocus?: boolean, element?: HTMLElement) {
+    this.element = element || document.createElement('div');
+    this.shadowRoot = this.element.shadowRoot || undefined;
+    if (useShadowDom && !this.shadowRoot) {
       this.element.classList.add('vbox');
       this.element.classList.add('flex-auto');
       this.shadowRoot = createShadowRootWithCoreStyles(this.element, {
         cssFile: undefined,
         delegatesFocus,
       });
+      this.contentElement = document.createElement('div');
       this.shadowRoot.appendChild(this.contentElement);
     } else {
-      this.element = this.contentElement;
+      this.contentElement = this.element;
     }
-    this.isWebComponent = isWebComponent;
+    this.contentElement.classList.add('widget');
     widgetMap.set(this.element, this);
     this.visibleInternal = false;
     this.isRoot = false;
@@ -129,6 +166,17 @@ export class Widget {
     return widgetMap.get(node);
   }
 
+  static getOrCreateWidget(element: HTMLElement): Widget {
+    const widget = Widget.get(element);
+    if (widget) {
+      return widget;
+    }
+    if (element instanceof WidgetElement) {
+      return element.createWidget();
+    }
+    return new Widget(undefined, undefined, element);
+  }
+
   markAsRoot(): void {
     assert(!this.element.parentElement, 'Attempt to mark as root attached node');
     this.isRoot = true;
@@ -466,7 +514,7 @@ export class Widget {
   }
 
   registerRequiredCSS(cssFile: {cssContent: string}): void {
-    if (this.isWebComponent) {
+    if (this.shadowRoot) {
       ThemeSupport.ThemeSupport.instance().appendStyle((this.shadowRoot as DocumentFragment), cssFile);
     } else {
       ThemeSupport.ThemeSupport.instance().appendStyle(this.element, cssFile);
@@ -475,7 +523,7 @@ export class Widget {
 
   registerCSSFiles(cssFiles: CSSStyleSheet[]): void {
     let root: ShadowRoot|Document;
-    if (this.isWebComponent && this.shadowRoot !== undefined) {
+    if (this.shadowRoot) {
       root = this.shadowRoot;
     } else {
       root = Helpers.GetRootNode.getRootNode(this.contentElement);
@@ -625,8 +673,8 @@ const storedScrollPositions = new WeakMap<Element, {
 }>();
 
 export class VBox extends Widget {
-  constructor(isWebComponent?: boolean, delegatesFocus?: boolean) {
-    super(isWebComponent, delegatesFocus);
+  constructor(useShadowDom?: boolean, delegatesFocus?: boolean, element?: HTMLElement) {
+    super(useShadowDom, delegatesFocus, element);
     this.contentElement.classList.add('vbox');
   }
 
@@ -645,8 +693,8 @@ export class VBox extends Widget {
 }
 
 export class HBox extends Widget {
-  constructor(isWebComponent?: boolean) {
-    super(isWebComponent);
+  constructor(useShadowDom?: boolean) {
+    super(useShadowDom);
     this.contentElement.classList.add('hbox');
   }
 

package/front_end/ui/legacy/XElement.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// eslint-disable-next-line rulesdir/check_component_naming
 export class XElement extends HTMLElement {
   static get observedAttributes(): string[] {
     return [

package/front_end/ui/legacy/XLink.test.ts

@@ -7,6 +7,8 @@ import * as LitHtml from '../lit-html/lit-html.js';
 
 import * as UI from './legacy.js';
 
+const {html} = LitHtml;
+
 describe('XLink', () => {
   describe('title', () => {
     it('equals href by default', () => {
@@ -49,7 +51,7 @@ describe('XLink', () => {
       const container = document.createElement('div');
       // clang-format off
       LitHtml.render(
-        LitHtml.html`
+        html`
           <x-link
             href="https://example.com/"
             tabindex="-1"

package/front_end/ui/legacy/XLink.ts

@@ -8,8 +8,8 @@ import * as LitHtml from '../lit-html/lit-html.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
-import {type ContextMenu, type Provider} from './ContextMenu.js';
-import {html} from './Fragment.js';
+import type {ContextMenu, Provider} from './ContextMenu.js';
+import {html as xhtml} from './Fragment.js';
 import {Tooltip} from './Tooltip.js';
 import {
   addReferrerToURLIfNecessary,
@@ -19,6 +19,8 @@ import {
 } from './UIUtils.js';
 import {XElement} from './XElement.js';
 
+const {html} = LitHtml;
+
 export class XLink extends XElement {
   hrefInternal: Platform.DevToolsPath.UrlString|null;
   private clickable: boolean;
@@ -33,7 +35,7 @@ export class XLink extends XElement {
     className = className || '';
     // clang-format off
     // TODO(dgozman): migrate css from 'devtools-link' to 'x-link'.
-    const element = html `
+    const element = xhtml `
   <x-link href='${url}' tabindex='${tabindex}' class='${className} devtools-link' ${preventClick ? 'no-click' : ''}
   jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context(jsLogContext)}>${Platform.StringUtilities.trimMiddle(linkText, MaxLengthForDisplayedURLs)}</x-link>`;
     // clang-format on
@@ -158,4 +160,4 @@ export class ContextMenuProvider implements Provider<Node> {
 
 customElements.define('x-link', XLink);
 
-export const sample = LitHtml.html`<p>Hello, <x-link>world!</x-link></p>`;
+export const sample = html`<p>Hello, <x-link>world!</x-link></p>`;