chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/ui/components/request_link_icon/RequestLinkIcon.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/components/icon_button/icon_button.js';
+
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
@@ -9,13 +11,14 @@ import type * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import type * as Logs from '../../../models/logs/logs.js';
 import * as NetworkForward from '../../../panels/network/forward/forward.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import requestLinkIconStyles from './requestLinkIcon.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    * @description Title for a link to show a request in the network panel
@@ -58,7 +61,6 @@ export const extractShortPath = (path: Platform.DevToolsPath.UrlString): string
 };
 
 export class RequestLinkIcon extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-request-link-icon`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #linkToPreflight?: boolean;
   // The value `null` indicates that the request is not available,
@@ -169,22 +171,22 @@ export class RequestLinkIcon extends HTMLElement {
     }
 
     if (this.#urlToDisplay) {
-      return LitHtml.html`<span title=${url}>${this.#urlToDisplay}</span>`;
+      return html`<span title=${url}>${this.#urlToDisplay}</span>`;
     }
 
     const filename = extractShortPath(url);
-    return LitHtml.html`<span aria-label=${i18nString(UIStrings.shortenedURL)} title=${url}>${filename}</span>`;
+    return html`<span aria-label=${i18nString(UIStrings.shortenedURL)} title=${url}>${filename}</span>`;
   }
 
   async #render(): Promise<void> {
     return coordinator.write(() => {
       // clang-format off
-      LitHtml.render(LitHtml.html`
+      LitHtml.render(html`
       <button class=${LitHtml.Directives.classMap({link: Boolean(this.#request)})}
               title=${this.#getTooltip()}
               jslog=${VisualLogging.link('request').track({click: true})}
               @click=${this.handleClick}>
-        <${IconButton.Icon.Icon.litTagName} name="arrow-up-down-circle"></${IconButton.Icon.Icon.litTagName}>
+        <devtools-icon name="arrow-up-down-circle"></devtools-icon>
         ${this.#maybeRenderURL()}
       </button>`,
       this.#shadow, {host: this});

package/front_end/ui/components/settings/SettingCheckbox.ts

@@ -2,15 +2,28 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './SettingDeprecationWarning.js';
+
 import type * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
 import * as Buttons from '../buttons/buttons.js';
 import * as Input from '../input/input.js';
 
 import settingCheckboxStyles from './settingCheckbox.css.js';
-import {SettingDeprecationWarning} from './SettingDeprecationWarning.js';
+
+const {html, Directives: {ifDefined}} = LitHtml;
+
+const UIStrings = {
+  /**
+   *@description Text that is usually a hyperlink to more documentation
+   */
+  learnMore: 'Learn more',
+};
+const str_ = i18n.i18n.registerUIStrings('ui/components/settings/SettingCheckbox.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface SettingCheckboxData {
   setting: Common.Settings.Setting<boolean>;
@@ -21,7 +34,6 @@ export interface SettingCheckboxData {
  * A simple checkbox that is backed by a boolean setting.
  */
 export class SettingCheckbox extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`setting-checkbox`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #setting?: Common.Settings.Setting<boolean>;
@@ -52,20 +64,27 @@ export class SettingCheckbox extends HTMLElement {
     }
 
     if (this.#setting.deprecation) {
-      return LitHtml.html`<${SettingDeprecationWarning.litTagName} .data=${
-          this.#setting.deprecation as Common.Settings.Deprecation}></${SettingDeprecationWarning.litTagName}>`;
+      return html`<devtools-setting-deprecation-warning .data=${
+          this.#setting.deprecation}></devtools-setting-deprecation-warning>`;
     }
 
     const learnMore = this.#setting.learnMore();
     if (learnMore) {
-      const jslog = VisualLogging.link()
-                        .track({click: true, keydown: 'Enter|Space'})
-                        .context(this.#setting.name + '-documentation');
-      return LitHtml.html`<${Buttons.Button.Button.litTagName} .iconName=${'help'} .size=${
-          Buttons.Button.Size.SMALL} .variant=${Buttons.Button.Variant.ICON} .title=${learnMore.tooltip()} jslog=${
-          jslog} @click=${
-          () => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
-              learnMore.url)} class="learn-more"></${Buttons.Button.Button.litTagName}>`;
+      const data: Buttons.Button.ButtonData = {
+        iconName: 'help',
+        variant: Buttons.Button.Variant.ICON,
+        size: Buttons.Button.Size.SMALL,
+        jslogContext: `${this.#setting.name}-documentation`,
+        title: i18nString(UIStrings.learnMore),
+      };
+      const handleClick = (event: MouseEvent): void => {
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(learnMore.url);
+        event.consume();
+      };
+      return html`<devtools-button
+                    class=learn-more
+                    @click=${handleClick}
+                    .data=${data}></devtools-button>`;
     }
 
     return undefined;
@@ -77,17 +96,18 @@ export class SettingCheckbox extends HTMLElement {
     }
 
     const icon = this.icon();
+    const title = `${this.#setting.learnMore() ? this.#setting.learnMore()?.tooltip() : ''}`;
     const reason = this.#setting.disabledReason() ?
-        LitHtml.html`
-      <${Buttons.Button.Button.litTagName} class="disabled-reason" .iconName=${'info'} .variant=${
-            Buttons.Button.Variant.ICON} .size=${Buttons.Button.Size.SMALL} title=${
-            this.#setting.disabledReason()} @click=${onclick}></${Buttons.Button.Button.litTagName}>
+        html`
+      <devtools-button class="disabled-reason" .iconName=${'info'} .variant=${Buttons.Button.Variant.ICON} .size=${
+            Buttons.Button.Size.SMALL} title=${ifDefined(this.#setting.disabledReason())} @click=${
+            onclick}></devtools-button>
     ` :
         LitHtml.nothing;
     LitHtml.render(
-        LitHtml.html`
+        html`
       <p>
-        <label>
+        <label title=${title}>
           <input
             type="checkbox"
             .checked=${this.#setting.disabledReason() ? false : this.#setting.get()}

package/front_end/ui/components/settings/SettingDeprecationWarning.ts

@@ -2,14 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../icon_button/icon_button.js';
+
 import * as Common from '../../../core/common/common.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
-import * as IconButton from '../icon_button/icon_button.js';
 
 import settingDeprecationWarning from './settingDeprecationWarning.css.js';
 
+const {html} = LitHtml;
+
 export class SettingDeprecationWarning extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-setting-deprecation-warning`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   connectedCallback(): void {
@@ -33,9 +35,8 @@ export class SettingDeprecationWarning extends HTMLElement {
     }
 
     LitHtml.render(
-        LitHtml.html`<${IconButton.Icon.Icon.litTagName} class=${LitHtml.Directives.classMap(classes)} .data=${
-            iconData as
-            IconButton.Icon.IconData} title=${warning} @click=${onclick}></${IconButton.Icon.Icon.litTagName}>`,
+        html`<devtools-icon class=${LitHtml.Directives.classMap(classes)} .data=${iconData} title=${warning} @click=${
+            onclick}></devtools-icon>`,
         this.#shadow, {host: this});
   }
 }

package/front_end/ui/components/settings/settingCheckbox.css

@@ -36,6 +36,7 @@ p {
 }
 
 .learn-more {
+  cursor: pointer;
   position: relative;
   margin-left: var(--sys-size-2);
   top: var(--sys-size-2);

package/front_end/ui/components/spinners/Spinner.ts

@@ -6,8 +6,9 @@ import * as LitHtml from '../../lit-html/lit-html.js';
 
 import spinnerStyles from './spinner.css.js';
 
+const {html} = LitHtml;
+
 export class Spinner extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-spinner`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   connectedCallback(): void {
@@ -21,7 +22,7 @@ export class Spinner extends HTMLElement {
     // https://github.com/material-components/material-components-web/tree/master/packages/mdc-circular-progress.
     // Changing the value of the radius will cause errors in animation.
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <div class="indeterminate-spinner">
         <div class="left-circle-graphic-container">
           <svg class="left-circle-graphic" viewBox="0 0 100 100">

package/front_end/ui/components/spinners/spinner.css

@@ -5,6 +5,7 @@
  */
 
 :host {
+  overflow: hidden;
   width: var(--sys-size-7);
   height: var(--sys-size-7);
   display: inline-block;

package/front_end/ui/components/split_view/SplitView.ts

@@ -5,6 +5,8 @@
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
+const {html} = LitHtml;
+
 // clean-css does not compile this file correctly. So as a workaround adding styles inline.
 const styles = `
   :host {
@@ -111,7 +113,6 @@ const splitViewStyles = new CSSStyleSheet();
 splitViewStyles.replaceSync(styles);
 
 export class SplitView extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-split-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #mousePos = [0, 0];
   #mainAxisIdx = 0;
@@ -179,7 +180,7 @@ export class SplitView extends HTMLElement {
   #render = (): void => {
     // clang-format off
     LitHtml.render(
-      LitHtml.html`
+      html`
         <div class="wrapper ${this.#mainAxisIdx === 1 ? 'horizontal' : ''}">
           <div class="container">
             <slot name="main"></slot>

package/front_end/ui/components/srgb_overlay/SrgbOverlay.ts

@@ -8,6 +8,8 @@ import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import srgbOverlayStyles from './srgbOverlay.css.js';
 
+const {html} = LitHtml;
+
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 type SrgbOverlayProps = {
@@ -31,7 +33,6 @@ function isColorInSrgbGamut(hsv: Common.ColorUtils.Color3D): boolean {
 }
 
 export class SrgbOverlay extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-spectrum-srgb-overlay`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   constructor() {
@@ -102,7 +103,7 @@ export class SrgbOverlay extends HTMLElement {
       }
 
       LitHtml.render(
-          LitHtml.html`
+          html`
           <span class="label" style="right: ${width - closestPoint.x}px">sRGB</span>
           <svg>
             <polyline points=${

package/front_end/ui/components/suggestion_input/SuggestionInput.ts

@@ -39,6 +39,7 @@ const jsonPropertyOptions = {
   hasChanged(value: unknown, oldValue: unknown): boolean {
     return JSON.stringify(value) !== JSON.stringify(oldValue);
   },
+  attribute: false,
 };
 
 @customElement('devtools-editable-content')
@@ -249,7 +250,7 @@ export class SuggestionInput extends LitElement {
    * State passed to devtools-suggestion-box.
    */
   @property(jsonPropertyOptions) declare options: Readonly<string[]>;
-  @property() declare autocomplete?: boolean;
+  @property({type: Boolean}) declare autocomplete?: boolean;
   @property() declare suggestionFilter?: SuggestionFilter;
   @state() declare expression: string;
 
@@ -259,7 +260,7 @@ export class SuggestionInput extends LitElement {
   @property() declare placeholder: string;
   @property() declare value: string;
   @property({type: Boolean}) declare disabled: boolean;
-  @property() declare strikethrough: boolean;
+  @property({type: Boolean}) declare strikethrough: boolean;
   @property() declare mimeType: string;
   @property() declare jslogContext?: string;
 

package/front_end/ui/components/survey_link/SurveyLink.ts

@@ -2,14 +2,17 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../icon_button/icon_button.js';
+
 import * as Common from '../../../core/common/common.js';
 import type * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
-import * as IconButton from '../icon_button/icon_button.js';
 
 import surveyLinkStyles from './surveyLink.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Text shown when the link to open a survey is clicked but the survey has not yet appeared
@@ -49,7 +52,6 @@ const enum State {
 // A link to a survey. The link is rendered aysnchronously because we need to first check if
 // canShowSurvey succeeds.
 export class SurveyLink extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-survey-link`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #trigger = '';
@@ -122,9 +124,9 @@ export class SurveyLink extends HTMLElement {
 
     // clang-format off
     // eslint-disable-next-line rulesdir/ban_style_tags_in_lit_html
-    const output = LitHtml.html`
+    const output = html`
       <button class="link ${linkState}" tabindex=${ariaDisabled ? '-1' : '0'} .disabled=${ariaDisabled} aria-disabled=${ariaDisabled} @click=${this.#sendSurvey}>
-        <${IconButton.Icon.Icon.litTagName} class="link-icon" .data=${{iconName: 'review', color: 'var(--sys-color-primary)', width: 'var(--issue-link-icon-size, 16px)', height: 'var(--issue-link-icon-size, 16px)'} as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}><!--
+        <devtools-icon class="link-icon" .data=${{iconName: 'review', color: 'var(--sys-color-primary)', width: 'var(--issue-link-icon-size, 16px)', height: 'var(--issue-link-icon-size, 16px)'}}></devtools-icon><!--
       -->${linkText}
       </button>
     `;

package/front_end/ui/components/switch/SwitchImpl.ts

@@ -7,6 +7,8 @@ import * as VisualLogging from '../../visual_logging/visual_logging.js';
 
 import switchStyles from './switch.css.js';
 
+const {html} = LitHtml;
+
 export class SwitchChangeEvent extends Event {
   static readonly eventName = 'switchchange';
 
@@ -16,7 +18,6 @@ export class SwitchChangeEvent extends Event {
 }
 
 export class Switch extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-switch`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #checked = false;
   #disabled = false;
@@ -63,7 +64,7 @@ export class Switch extends HTMLElement {
     const jslog = this.#jslogContext && VisualLogging.toggle(this.#jslogContext).track({change: true});
     /* eslint-disable rulesdir/inject_checkbox_styles */
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
     <label role="button">
       <input type="checkbox"
         @change=${this.#handleChange}

package/front_end/ui/components/text_editor/TextEditor.ts

@@ -6,7 +6,6 @@ import * as Common from '../../../core/common/common.js';
 import * as WindowBoundsService from '../../../services/window_bounds/window_bounds.js';
 import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
 import * as ThemeSupport from '../../legacy/theme_support/theme_support.js';
-import * as LitHtml from '../../lit-html/lit-html.js';
 import * as CodeHighlighter from '../code_highlighter/code_highlighter.js';
 
 import {baseConfiguration, dummyDarkTheme, dynamicSetting, DynamicSetting, themeSelection} from './config.js';
@@ -19,7 +18,6 @@ declare global {
 }
 
 export class TextEditor extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-text-editor`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #activeEditor: CodeMirror.EditorView|undefined = undefined;

package/front_end/ui/components/text_editor/TextEditorHistory.ts

@@ -4,8 +4,8 @@
 
 import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
 
-import {type AutocompleteHistory} from './AutocompleteHistory.js';
-import {type TextEditor} from './TextEditor.js';
+import type {AutocompleteHistory} from './AutocompleteHistory.js';
+import type {TextEditor} from './TextEditor.js';
 
 export const enum Direction {
   FORWARD = 1,

package/front_end/ui/components/text_prompt/TextPrompt.ts

@@ -7,6 +7,8 @@ import * as LitHtml from '../../lit-html/lit-html.js';
 
 import textPromptStyles from './textPrompt.css.js';
 
+const {html} = LitHtml;
+
 export interface TextPromptData {
   ariaLabel: string;
   prefix: string;
@@ -24,7 +26,6 @@ export class PromptInputEvent extends Event {
 }
 
 export class TextPrompt extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-text-prompt`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #ariaLabelText = '';
   #prefixText = '';
@@ -124,7 +125,7 @@ export class TextPrompt extends HTMLElement {
   }
 
   #render(): void {
-    const output = LitHtml.html`
+    const output = html`
       <span class="prefix">${this.#prefixText} </span>
       <span class="text-prompt-input"><input class="input" aria-label=${
         this.#ariaLabelText} spellcheck="false" @input=${this.onInput} @keydown=${

package/front_end/ui/components/tree_outline/TreeOutline.test.ts

@@ -16,6 +16,8 @@ import * as Coordinator from '../render_coordinator/render_coordinator.js';
 
 import * as TreeOutline from './tree_outline.js';
 
+const {html} = LitHtml;
+
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 async function renderTreeOutline<TreeNodeDataType>({
@@ -35,7 +37,7 @@ async function renderTreeOutline<TreeNodeDataType>({
   const data: TreeOutline.TreeOutline.TreeOutlineData<TreeNodeDataType> = {
     tree,
     defaultRenderer: defaultRenderer ||
-        ((node: TreeOutline.TreeOutlineUtils.TreeNode<TreeNodeDataType>) => LitHtml.html`${node.treeNodeData}`),
+        ((node: TreeOutline.TreeOutlineUtils.TreeNode<TreeNodeDataType>) => html`${node.treeNodeData}`),
     filter,
   };
   component.data = data;
@@ -375,7 +377,7 @@ describe('TreeOutline', () => {
       value: string;
     }
     const customRenderer = (node: TreeOutline.TreeOutlineUtils.TreeNode<CustomTreeKeyType>) => {
-      return LitHtml.html`<h2 class="item">${node.treeNodeData.property.toUpperCase()}:</h2>${node.treeNodeData.value}`;
+      return html`<h2 class="item">${node.treeNodeData.property.toUpperCase()}:</h2>${node.treeNodeData.value}`;
     };
     const tinyTree: TreeOutline.TreeOutlineUtils.TreeNode<CustomTreeKeyType>[] = [{
       treeNodeData: {property: 'name', value: 'jack'},
@@ -625,7 +627,7 @@ describe('TreeOutline', () => {
     const tinyTree: TreeOutline.TreeOutlineUtils.TreeNode<string>[] = [{
       treeNodeData: 'Offices',
       id: 'Offices',
-      renderer: node => LitHtml.html`<h2 class="top-node">${node.treeNodeData.toUpperCase()}</h2>`,
+      renderer: node => html`<h2 class="top-node">${node.treeNodeData.toUpperCase()}</h2>`,
       children: async () =>
           [{
             treeNodeData: 'EMEA',
@@ -659,7 +661,7 @@ describe('TreeOutline', () => {
       treeNodeData: 'Offices',
       id: 'Offices',
       renderer: (node, {isExpanded}) => {
-        return LitHtml.html`<h2 class="top-node">${node.treeNodeData.toUpperCase()}. Expanded: ${isExpanded}</h2>`;
+        return html`<h2 class="top-node">${node.treeNodeData.toUpperCase()}. Expanded: ${isExpanded}</h2>`;
       },
       children: async () =>
           [{
@@ -1323,7 +1325,7 @@ describe('TreeOutline', () => {
 
       component.data = {
         tree: [newNodeAustralia],
-        defaultRenderer: (node => LitHtml.html`${node.treeNodeData}`),
+        defaultRenderer: (node => html`${node.treeNodeData}`),
       };
       await waitForRenderedTreeNodeCount(shadowRoot, 4);
       await coordinator.done();
@@ -1443,7 +1445,7 @@ describe('TreeOutlineFiltering', () => {
       tree: [nodeAustralia],
       filter: node => node === 'SA' || node === 'NSW' ? TreeOutline.TreeOutline.FilterOption.FLATTEN :
                                                         TreeOutline.TreeOutline.FilterOption.SHOW,
-      defaultRenderer: (node => LitHtml.html`${node.treeNodeData}`),
+      defaultRenderer: (node => html`${node.treeNodeData}`),
     };
     await waitForRenderedTreeNodeCount(shadowRoot, 9);
     const visibleTreeAfterFilter = visibleNodesToTree(shadowRoot);

package/front_end/ui/components/tree_outline/TreeOutline.ts

@@ -21,6 +21,8 @@ import {
   type TreeNodeWithChildren,
 } from './TreeOutlineUtils.js';
 
+const {html, Directives: {ifDefined}} = LitHtml;
+
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 export interface TreeOutlineData<TreeNodeDataType> {
@@ -37,7 +39,7 @@ export interface TreeOutlineData<TreeNodeDataType> {
 }
 
 export function defaultRenderer(node: TreeNode<string>): LitHtml.TemplateResult {
-  return LitHtml.html`${node.treeNodeData}`;
+  return html`${node.treeNodeData}`;
 }
 
 export class ItemSelectedEvent<TreeNodeDataType> extends Event {
@@ -90,7 +92,6 @@ export const enum FilterOption {
 }
 
 export class TreeOutline<TreeNodeDataType> extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-tree-outline`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #treeData: readonly TreeNode<TreeNodeDataType>[] = [];
   #nodeExpandedMap: Map<string, boolean> = new Map();
@@ -111,7 +112,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
               node.treeNodeData, null,
               2)}. Consider providing a different defaultRenderer that can handle nodes of this type.`);
     }
-    return LitHtml.html`${String(node.treeNodeData)}`;
+    return html`${String(node.treeNodeData)}`;
   };
   #nodeFilter?: ((node: TreeNodeDataType) => FilterOption);
   #compact = false;
@@ -439,7 +440,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
       });
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      childrenToRender = LitHtml.html`<ul role="group">${LitHtml.Directives.until(childNodes)}</ul>`;
+      childrenToRender = html`<ul role="group">${LitHtml.Directives.until(childNodes)}</ul>`;
       // clang-format on
     }
 
@@ -452,8 +453,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
       'is-top-level': depth === 0,
       compact: this.#compact,
     });
-    const ariaExpandedAttribute =
-        LitHtml.Directives.ifDefined(isExpandableNode(node) ? String(nodeIsExpanded) : undefined);
+    const ariaExpandedAttribute = !isExpandableNode(node) ? undefined : nodeIsExpanded ? 'true' : 'false';
 
     let renderedNodeKey: LitHtml.TemplateResult;
     if (node.renderer) {
@@ -464,11 +464,11 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
+    return html`
       <li role="treeitem"
         tabindex=${tabIndex}
         aria-setsize=${setSize}
-        aria-expanded=${ariaExpandedAttribute}
+        aria-expanded=${ifDefined(ariaExpandedAttribute)}
         aria-level=${depth + 1}
         aria-posinset=${positionInSet + 1}
         class=${listItemClasses}
@@ -523,7 +523,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     await coordinator.write('TreeOutline render', () => {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      LitHtml.render(LitHtml.html`
+      LitHtml.render(html`
       <div class="wrapping-container">
         <ul role="tree" @keydown=${this.#onTreeKeyDown}>
           ${this.#treeData.map((topLevelNode, index) => {

package/front_end/ui/components/two_states_counter/TwoStatesCounter.ts

@@ -6,6 +6,8 @@ import * as LitHtml from '../../lit-html/lit-html.js';
 import * as ComponentHelpers from '../helpers/helpers.js';
 
 import twoStatesCounterStyles from './twoStatesCounter.css.js';
+
+const {html, Directives: {ifDefined, classMap, styleMap}} = LitHtml;
 const isString = (value: string|undefined): value is string => value !== undefined;
 
 export interface TwoStatesCounterData {
@@ -18,7 +20,6 @@ export interface TwoStatesCounterData {
 }
 
 export class TwoStatesCounter extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-two-states-counter`;
   readonly #boundRender = this.#render.bind(this);
   readonly #shadow = this.attachShadow({mode: 'open'});
   #numActive: number = 0;
@@ -68,7 +69,7 @@ export class TwoStatesCounter extends HTMLElement {
     };
 
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
     <div class='counter'>
       ${this.#renderPart(this.#numActive, activeClassMap, this.#activeTitle)}
       ${this.#renderPart(this.#numInactive, inactiveClassMap, this.#inactiveTitle)}
@@ -85,8 +86,8 @@ export class TwoStatesCounter extends HTMLElement {
     };
 
     // clang-format off
-    return count > 0 ? LitHtml.html`
-       <span class=${LitHtml.Directives.classMap(classInfo)} style=${LitHtml.Directives.styleMap(styles)} title=${title}>
+    return count > 0 ? html`
+       <span class=${classMap(classInfo)} style=${styleMap(styles)} title=${ifDefined(title)}>
           ${count}
        </span>
       ` : LitHtml.nothing;

package/front_end/ui/legacy/Context.ts

@@ -5,7 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as Root from '../../core/root/root.js';  // eslint-disable-line @typescript-eslint/no-unused-vars
 
-import {type ContextFlavorListener} from './ContextFlavorListener.js';
+import type {ContextFlavorListener} from './ContextFlavorListener.js';
 
 let contextInstance: Context|undefined;