chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/front_end/ui/components/report_view/ReportView.ts

@@ -11,6 +11,8 @@ import reportSectionDividerStyles from './reportSectionDivider.css.js';
 import reportSectionHeaderStyles from './reportSectionHeader.css.js';
 import reportValueStyles from './reportValue.css.js';
 
+const {html} = LitHtml;
+
 /**
  * The `Report` component can be used to display static information. A report
  * usually consists of multiple sections where each section has rows of name/value
@@ -52,9 +54,9 @@ export class Report extends HTMLElement {
   #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <div class="content">
-        ${this.#reportTitle ? LitHtml.html`<div class="report-title">${this.#reportTitle}</div>` : LitHtml.nothing}
+        ${this.#reportTitle ? html`<div class="report-title">${this.#reportTitle}</div>` : LitHtml.nothing}
         <slot></slot>
       </div>
     `, this.#shadow, {host: this});
@@ -76,7 +78,7 @@ export class ReportSection extends HTMLElement {
   #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <div class="section">
         <slot></slot>
       </div>
@@ -97,7 +99,7 @@ export class ReportSectionHeader extends HTMLElement {
   #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <div class="section-header">
         <slot></slot>
       </div>
@@ -118,7 +120,7 @@ export class ReportSectionDivider extends HTMLElement {
   #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <div class="section-divider">
       </div>
     `, this.#shadow, {host: this});
@@ -138,7 +140,7 @@ export class ReportKey extends HTMLElement {
   #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <div class="key"><slot></slot></div>
     `, this.#shadow, {host: this});
     // clang-format on
@@ -157,7 +159,7 @@ export class ReportValue extends HTMLElement {
   #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <div class="value"><slot></slot></div>
     `, this.#shadow, {host: this});
     // clang-format on

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
@@ -169,22 +172,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,6 +2,8 @@
 // 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 LitHtml from '../../lit-html/lit-html.js';
@@ -10,7 +12,8 @@ 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;
 
 export interface SettingCheckboxData {
   setting: Common.Settings.Setting<boolean>;
@@ -52,8 +55,8 @@ 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 as Common.Settings.Deprecation}></devtools-setting-deprecation-warning>`;
     }
 
     const learnMore = this.#setting.learnMore();
@@ -61,11 +64,10 @@ export class SettingCheckbox extends HTMLElement {
       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=${
+      return html`<devtools-button .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}>`;
+              learnMore.url)} class="learn-more"></devtools-button>`;
     }
 
     return undefined;
@@ -78,14 +80,14 @@ export class SettingCheckbox extends HTMLElement {
 
     const icon = this.icon();
     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>
           <input

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

@@ -2,12 +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 type * 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'});
@@ -33,9 +37,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 as IconButton.Icon.IconData} title=${warning} @click=${onclick}></devtools-icon>`,
         this.#shadow, {host: this});
   }
 }

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

@@ -6,6 +6,8 @@ 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'});
@@ -21,7 +23,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/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 {
@@ -179,7 +181,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 = {
@@ -102,7 +104,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,18 @@
 // 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 type * 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
@@ -122,9 +126,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)'} as IconButton.Icon.IconData}></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';
 
@@ -63,7 +65,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/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;
@@ -124,7 +126,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 {
@@ -111,7 +113,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 +441,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 +454,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 +465,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 +524,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 {
@@ -68,7 +70,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 +87,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;
 

package/front_end/ui/legacy/Dialog.ts

@@ -36,8 +36,8 @@ import dialogStyles from './dialog.css.legacy.js';
 import {GlassPane, PointerEventsBehavior} from './GlassPane.js';
 import {InspectorView} from './InspectorView.js';
 import {KeyboardShortcut, Keys} from './KeyboardShortcut.js';
-import {type SplitWidget} from './SplitWidget.js';
-import {type DevToolsCloseButton} from './UIUtils.js';
+import type {SplitWidget} from './SplitWidget.js';
+import type {DevToolsCloseButton} from './UIUtils.js';
 import {WidgetFocusRestorer} from './Widget.js';
 
 export class Dialog extends Common.ObjectWrapper.eventMixin<EventTypes, typeof GlassPane>(GlassPane) {

package/front_end/ui/legacy/DockController.ts

@@ -34,9 +34,9 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import {type ActionDelegate} from './ActionRegistration.js';
+import type {ActionDelegate} from './ActionRegistration.js';
 import {alert} from './ARIAUtils.js';
-import {type Context} from './Context.js';
+import type {Context} from './Context.js';
 import {type Provider, ToolbarButton, type ToolbarItem} from './Toolbar.js';
 
 const UIStrings = {

package/front_end/ui/legacy/FilterBar.ts

@@ -38,7 +38,7 @@ import * as ARIAUtils from './ARIAUtils.js';
 import filterStyles from './filter.css.legacy.js';
 import {KeyboardShortcut, Modifiers} from './KeyboardShortcut.js';
 import {bindCheckbox} from './SettingsUI.js';
-import {type Suggestions} from './SuggestBox.js';
+import type {Suggestions} from './SuggestBox.js';
 import {Toolbar, type ToolbarButton, ToolbarFilter, ToolbarInput, ToolbarSettingToggle} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
 import {CheckboxLabel, createTextChild} from './UIUtils.js';

package/front_end/ui/legacy/FilterSuggestionBuilder.ts

@@ -4,7 +4,7 @@
 
 import * as Platform from '../../core/platform/platform.js';
 
-import {type Suggestion} from './SuggestBox.js';
+import type {Suggestion} from './SuggestBox.js';
 
 export class FilterSuggestionBuilder {
   private readonly keys: string[];

package/front_end/ui/legacy/GlassPane.ts

@@ -4,7 +4,7 @@
 
 import * as Platform from '../../core/platform/platform.js';
 
-import {type Size} from './Geometry.js';
+import type {Size} from './Geometry.js';
 import glassPaneStyles from './glassPane.css.legacy.js';
 import {deepElementFromEvent, measuredScrollbarWidth} from './UIUtils.js';
 import {Widget} from './Widget.js';

package/front_end/ui/legacy/Infobar.ts

@@ -11,7 +11,7 @@ import * as ARIAUtils from './ARIAUtils.js';
 import infobarStyles from './infobar.css.legacy.js';
 import {Keys} from './KeyboardShortcut.js';
 import {createShadowRootWithCoreStyles, createTextButton} from './UIUtils.js';
-import {type Widget} from './Widget.js';
+import type {Widget} from './Widget.js';
 
 const UIStrings = {
   /**

package/front_end/ui/legacy/InspectorView.ts

@@ -35,22 +35,22 @@ import * as Root from '../../core/root/root.js';
 import * as IconButton from '../components/icon_button/icon_button.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
-import {type ActionDelegate as ActionDelegateInterface} from './ActionRegistration.js';
+import type {ActionDelegate as ActionDelegateInterface} from './ActionRegistration.js';
 import * as ARIAUtils from './ARIAUtils.js';
-import {type Context} from './Context.js';
-import {type ContextMenu} from './ContextMenu.js';
+import type {Context} from './Context.js';
+import type {ContextMenu} from './ContextMenu.js';
 import {Dialog} from './Dialog.js';
 import {DockController, DockState} from './DockController.js';
 import {GlassPane} from './GlassPane.js';
 import {Infobar, Type as InfobarType} from './Infobar.js';
 import inspectorViewTabbedPaneStyles from './inspectorViewTabbedPane.css.legacy.js';
 import {KeyboardShortcut} from './KeyboardShortcut.js';
-import {type Panel} from './Panel.js';
+import type {Panel} from './Panel.js';
 import {ShowMode, SplitWidget} from './SplitWidget.js';
 import {type EventData, Events as TabbedPaneEvents, type TabbedPane, type TabbedPaneTabDelegate} from './TabbedPane.js';
 import {ToolbarButton} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
-import {type TabbedViewLocation, type View, type ViewLocation, type ViewLocationResolver} from './View.js';
+import type {TabbedViewLocation, View, ViewLocation, ViewLocationResolver} from './View.js';
 import {ViewManager} from './ViewManager.js';
 import {VBox, type Widget, WidgetFocusRestorer} from './Widget.js';