npm - chrome-devtools-frontend - Versions diffs - 1.0.1362775 → 1.0.1367881 - Mend

chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (860) hide show

package/front_end/ui/components/markdown_view/MarkdownView.test.ts CHANGED Viewed

@@ -9,6 +9,8 @@ import * as LitHtml from '../../lit-html/lit-html.js';
 import * as MarkdownView from './markdown_view.js';
+const {html} = LitHtml;
 type TestToken = {
   type: string,
   tokens?: Marked.Marked.Token[],
@@ -64,7 +66,7 @@ describeWithEnvironment('MarkdownView', () => {
     it('wraps paragraph tokens in <p> tags', () => {
       const renderResult = renderer.renderToken(getFakeToken({type: 'paragraph', tokens: []}));
-      assert.deepStrictEqual(renderResult.strings.raw, ['<p>', '']);
+      assert.deepStrictEqual(renderResult.strings.raw, ['<p>', '</p>']);
     });
     it('wraps an unordered list token in <ul> tags', () => {
@@ -74,7 +76,7 @@ describeWithEnvironment('MarkdownView', () => {
     it('wraps list items in <li> tags', () => {
       const renderResult = renderer.renderToken(getFakeToken({type: 'list_item', tokens: []}));
-      assert.deepStrictEqual(renderResult.strings.raw, ['<li>', '']);
+      assert.deepStrictEqual(renderResult.strings.raw, ['<li>', '</li>']);
     });
     it('wraps a codespan token in <code> tags', () => {
@@ -195,6 +197,52 @@ describeWithEnvironment('MarkdownView', () => {
       const result = renderer.renderToken({type: 'html', raw: '<!DOCTYPE html>'} as Marked.Marked.Token);
       assert(result.values.join('').includes('<!DOCTYPE html>'));
     });
+    it('detects language but default to provided', () => {
+      let result =
+          renderer.detectCodeLanguage({text: 'const int foo = "bar"', lang: 'cpp'} as Marked.Marked.Tokens.Code);
+      assert.strictEqual(result, 'cpp');
+      result = renderer.detectCodeLanguage({text: '', lang: 'cpp'} as Marked.Marked.Tokens.Code);
+      assert.strictEqual(result, 'cpp');
+    });
+    it('detects JavaScript language', () => {
+      let result = renderer.detectCodeLanguage({text: 'const t = 2', lang: ''} as Marked.Marked.Tokens.Code);
+      assert.strictEqual(result, 'js');
+      result = renderer.detectCodeLanguage({text: 'let t = 2', lang: ''} as Marked.Marked.Tokens.Code);
+      assert.strictEqual(result, 'js');
+      result = renderer.detectCodeLanguage({text: 'var t = 2', lang: ''} as Marked.Marked.Tokens.Code);
+      assert.strictEqual(result, 'js');
+      result = renderer.detectCodeLanguage({text: 'function t(){}', lang: ''} as Marked.Marked.Tokens.Code);
+      assert.strictEqual(result, 'js');
+      result = renderer.detectCodeLanguage({text: 'async function t(){}', lang: ''} as Marked.Marked.Tokens.Code);
+      assert.strictEqual(result, 'js');
+      result = renderer.detectCodeLanguage(
+          {text: 'import puppeteer from "puppeteer-core"', lang: ''} as Marked.Marked.Tokens.Code);
+      assert.strictEqual(result, 'js');
+    });
+    it('doesn`t detect JavaScript language', () => {
+      let result = renderer.detectCodeLanguage({text: 'constant F', lang: ''} as Marked.Marked.Tokens.Code);
+      assert.strictEqual(result, '');
+      result = renderer.detectCodeLanguage({text: 'variable', lang: ''} as Marked.Marked.Tokens.Code);
+      assert.strictEqual(result, '');
+      result = renderer.detectCodeLanguage(
+          {text: 'functions are better then classes', lang: ''} as Marked.Marked.Tokens.Code);
+      assert.strictEqual(result, '');
+      result = renderer.detectCodeLanguage(
+          {text: 'asynchronous code it hard to understand', lang: ''} as Marked.Marked.Tokens.Code);
+      assert.strictEqual(result, '');
+    });
+    it('detects CSS language', () => {
+      let result = renderer.detectCodeLanguage({text: '.myClass {}', lang: ''} as Marked.Marked.Tokens.Code);
+      assert.strictEqual(result, 'css');
+      result = renderer.detectCodeLanguage({text: '.myClass{}', lang: ''} as Marked.Marked.Tokens.Code);
+      assert.strictEqual(result, 'css');
+      result = renderer.detectCodeLanguage({text: 'my-component {}', lang: ''} as Marked.Marked.Tokens.Code);
+      assert.strictEqual(result, 'css');
+      result = renderer.detectCodeLanguage({text: 'my-component::after {}', lang: ''} as Marked.Marked.Tokens.Code);
+      assert.strictEqual(result, 'css');
+      result = renderer.detectCodeLanguage({text: '.foo::[name="bar"] {}', lang: ''} as Marked.Marked.Tokens.Code);
+      assert.strictEqual(result, 'css');
+    });
   });
   const paragraphText =
@@ -250,7 +298,7 @@ console.log('test')
           renderString('`console.log()`', 'code', new class extends MarkdownView.MarkdownView.MarkdownLitRenderer {
             override templateForToken(token: Marked.Marked.Token): LitHtml.TemplateResult|null {
               if (token.type === 'codespan') {
-                return LitHtml.html`<code>overriden</code>`;
+                return html`<code>overriden</code>`;
               }
               return super.templateForToken(token as Marked.Marked.MarkedToken);
             }

package/front_end/ui/components/markdown_view/MarkdownView.ts CHANGED Viewed

@@ -2,13 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+import './CodeBlock.js';
+import './MarkdownImage.js';
+import './MarkdownLink.js';
 import type * as Marked from '../../../third_party/marked/marked.js';
 import * as UI from '../../legacy/legacy.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
-import {CodeBlock} from './CodeBlock.js';
-import {MarkdownImage, type MarkdownImageData} from './MarkdownImage.js';
-import {MarkdownLink, type MarkdownLinkData} from './MarkdownLink.js';
+import type {MarkdownImageData} from './MarkdownImage.js';
+import type {MarkdownLinkData} from './MarkdownLink.js';
 import markdownViewStyles from './markdownView.css.js';
 const html = LitHtml.html;
@@ -120,23 +123,23 @@ export class MarkdownLitRenderer {
   renderCodeBlock(token: Marked.Marked.Tokens.Code): LitHtml.TemplateResult {
     // clang-format off
-    return html`<${CodeBlock.litTagName}
+    return html`<devtools-code-block
       .code=${this.unescape(token.text)}
-      .codeLang=${token.lang}>
-    </${CodeBlock.litTagName}>`;
-    // clang-format one
+      .codeLang=${token.lang || ''}>
+    </devtools-code-block>`;
+    // clang-format on
   }
   templateForToken(token: Marked.Marked.MarkedToken): LitHtml.TemplateResult|null {
     switch (token.type) {
       case 'paragraph':
-        return html`<p>${this.renderChildTokens(token)}`;
+        return html`<p>${this.renderChildTokens(token)}</p>`;
       case 'list':
         return html`<ul>${token.items.map(token => {
           return this.renderToken(token);
         })}</ul>`;
       case 'list_item':
-        return html`<li>${this.renderChildTokens(token)}`;
+        return html`<li>${this.renderChildTokens(token)}</li>`;
       case 'text':
         return this.renderText(token);
       case 'codespan':
@@ -146,11 +149,11 @@ export class MarkdownLitRenderer {
       case 'space':
         return html``;
       case 'link':
-        return html`<${MarkdownLink.litTagName} .data=${{key: token.href, title: token.text} as MarkdownLinkData}></${
-            MarkdownLink.litTagName}>`;
+        return html`<devtools-markdown-link .data=${
+            {key: token.href, title: token.text} as MarkdownLinkData}></devtools-markdown-link>`;
       case 'image':
-        return html`<${MarkdownImage.litTagName} .data=${{key: token.href, title: token.text} as MarkdownImageData}></${
-            MarkdownImage.litTagName}>`;
+        return html`<devtools-markdown-image .data=${
+            {key: token.href, title: token.text} as MarkdownImageData}></devtools-markdown-image>`;
       case 'heading':
         return this.renderHeading(token);
       case 'strong':
@@ -176,9 +179,9 @@ export class MarkdownLitRenderer {
  */
 export class MarkdownInsightRenderer extends MarkdownLitRenderer {
   override renderToken(token: Marked.Marked.Token): LitHtml.TemplateResult {
-    const template = this.templateForToken(token);
+    const template = this.templateForToken(token as Marked.Marked.MarkedToken);
     if (template === null) {
-      return LitHtml.html`${token.raw}`;
+      return html`${token.raw}`;
     }
     return template;
   }
@@ -195,7 +198,22 @@ export class MarkdownInsightRenderer extends MarkdownLitRenderer {
     }
   }
-  override templateForToken(token: Marked.Marked.Token): LitHtml.TemplateResult|null {
+  detectCodeLanguage(token: Marked.Marked.Tokens.Code): string {
+    if (token.lang) {
+      return token.lang;
+    }
+    if (/^(\.|#)?[\w:\[\]="'-\.]* ?{/m.test(token.text) || /^@import/.test(token.text)) {
+      return 'css';
+    }
+    if (/^(var|const|let|function|async|import)\s/.test(token.text)) {
+      return 'js';
+    }
+    return '';
+  }
+  override templateForToken(token: Marked.Marked.MarkedToken): LitHtml.TemplateResult|null {
     switch (token.type) {
       case 'heading':
         return html`<strong>${this.renderText(token)}</strong>`;
@@ -205,15 +223,14 @@ export class MarkdownInsightRenderer extends MarkdownLitRenderer {
         if (!sanitizedUrl) {
           return null;
         }
-        return LitHtml.html`${
-            UI.XLink.XLink.create(sanitizedUrl, token.text, undefined, undefined, 'link-in-explanation')}`;
-        }
+        return html`${UI.XLink.XLink.create(sanitizedUrl, token.text, undefined, undefined, 'link-in-explanation')}`;
+      }
       case 'code':
-        return LitHtml.html`<${CodeBlock.litTagName}
+        return html`<devtools-code-block
           .code=${this.unescape(token.text)}
-          .codeLang=${token.lang}
+          .codeLang=${this.detectCodeLanguage(token)}
           .displayNotice=${true}>
-        </${CodeBlock.litTagName}>`;
+        </devtools-code-block>`;
     }
     return super.templateForToken(token as Marked.Marked.MarkedToken);
   }

package/front_end/ui/components/markdown_view/codeBlock.css CHANGED Viewed

@@ -11,6 +11,7 @@
 }
 :host {
+  display: block;
   /**
     Adjusts the max height of the code area.
     This can be changed from outside by targeting `devtools-code-block` element.
@@ -24,7 +25,6 @@
 }
 .codeblock {
-  margin-bottom: var(--sys-size-5);
   box-sizing: border-box;
   color: var(--sys-color-on-surface);
 }
@@ -69,36 +69,14 @@
   flex: 1;
 }
-.codeblock .copy {
-  padding: var(--sys-size-3) 0;
-  align-items: center;
-  display: flex;
-}
-.codeblock .copy-button {
-  margin: 0;
-  padding: 0;
-  background: transparent;
-  border: none;
-  font-size: 11px;
-  line-height: 16px;
+.codeblock .copy-button-container {
   display: flex;
-  flex-direction: row;
+  justify-content: center;
   align-items: center;
-  gap: var(--sys-size-3);
+  font-size: var(--sys-typescale-body5-size);
-  devtools-icon {
-    width: var(--sys-size-8);
-    height: var(--sys-size-8);
-    color: var(--icon-default);
-  }
-}
-.codeblock .copy-button.copied {
-  color: var(--sys-color-primary);
-  devtools-icon {
-    color: var(--sys-color-primary);
+  span {
+    padding-right: var(--sys-size-4);
   }
 }

package/front_end/ui/components/markdown_view/markdownLink.css CHANGED Viewed

@@ -7,7 +7,7 @@
 .devtools-link {
   color: var(--sys-color-primary);
   outline-offset: 2px;
-  text-decoration: none;
+  text-decoration: var(--markdown-link-text-decoration-style, none);
 }
 .devtools-link:hover {

package/front_end/ui/components/markdown_view/markdownView.css CHANGED Viewed

@@ -54,6 +54,10 @@
   padding: 1px 3px;
 }
+devtools-code-block {
+  margin-bottom: var(--sys-size-5);
+}
 .devtools-link {
   color: var(--sys-color-primary);
   outline-offset: 2px;

package/front_end/ui/components/menus/Menu.ts CHANGED Viewed

@@ -13,6 +13,8 @@ import menuStyles from './menu.css.js';
 import menuGroupStyles from './menuGroup.css.js';
 import menuItemStyles from './menuItem.css.js';
+const {html} = LitHtml;
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 export interface MenuData {
@@ -385,8 +387,8 @@ export class Menu extends HTMLElement {
       throw new Error('Menu render was not scheduled');
     }
     // clang-format off
-    LitHtml.render(LitHtml.html`
-      <${Dialogs.Dialog.Dialog.litTagName}
+    LitHtml.render(html`
+      <devtools-dialog
         @clickoutsidedialog=${this.#closeDialog}
         @forceddialogclose=${this.#closeDialog}
         .position=${this.position}
@@ -403,7 +405,7 @@ export class Menu extends HTMLElement {
           <slot @click=${this.#handleItemClick}>
           </slot>
         </span>
-      </${Dialogs.Dialog.Dialog.litTagName}>
+      </devtools-dialog>
     `, this.#shadow, { host: this });
     // clang-format on
   }
@@ -475,7 +477,7 @@ export class MenuItem extends HTMLElement {
     }
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <span class=${LitHtml.Directives.classMap({
         'menu-item': true,
         'is-selected-item': this.selected,
@@ -519,7 +521,7 @@ export class MenuGroup extends HTMLElement {
       throw new Error('MenuGroup render was not scheduled');
     }
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <span class="menu-group">
         <span class="menu-group-label">${this.name}</span>
         <slot></slot>

package/front_end/ui/components/menus/SelectMenu.test.ts CHANGED Viewed

@@ -12,6 +12,8 @@ import * as Coordinator from '../render_coordinator/render_coordinator.js';
 import * as Menus from './menus.js';
+const {html} = LitHtml;
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 async function createMenu(): Promise<Menus.SelectMenu.SelectMenu> {
@@ -80,7 +82,7 @@ describeWithLocale('SelectMenu', () => {
       return;
     }
     firsItem.selected = true;
-    menu.buttonTitle = () => LitHtml.html`Override Title`;
+    menu.buttonTitle = () => html`Override Title`;
     Helpers.renderElementIntoDOM(menu);
     await coordinator.done();
     assert.isNotNull(menu.shadowRoot);

package/front_end/ui/components/menus/SelectMenu.ts CHANGED Viewed

@@ -10,7 +10,6 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Dialogs from '../dialogs/dialogs.js';
 import {
-  Menu,
   MenuGroup,
   type MenuItemSelectedEvent,
   type MenuItemValue,
@@ -18,6 +17,8 @@ import {
 import selectMenuStyles from './selectMenu.css.js';
 import selectMenuButtonStyles from './selectMenuButton.css.js';
+const {html} = LitHtml;
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 export interface SelectMenuData {
@@ -225,13 +226,14 @@ export class SelectMenu extends HTMLElement {
     this.dispatchEvent(new SelectMenuSideButtonClickEvent());
   }
-  #maybeGetArrowXPosition(): number|void {
+  #maybeGetArrowXPosition(): number {
     if (this.showConnector) {
       // This block is not wrapped in a `coordinator.read` because this function's
       // only invocation is already wrapped in one (in Dialog.showDialog).
       const arrowBounds = this.#getButton().getBoundingClientRect();
       return (arrowBounds.left + arrowBounds.right) / 2;
     }
+    return NaN;
   }
   #getButtonText(): LitHtml.TemplateResult|string {
@@ -242,25 +244,25 @@ export class SelectMenu extends HTMLElement {
     const buttonLabel = this.#getButtonText();
     if (!this.sideButton) {
       // clang-format off
-      return LitHtml.html`
-          <${SelectMenuButton.litTagName}
+      return html`
+          <devtools-select-menu-button
             @selectmenubuttontrigger=${this.#showMenu}
             .open=${this.#open} .showArrow=${this.showArrow}
             .arrowDirection=${this.position}
             .disabled=${this.disabled}
             .jslogContext=${this.jslogContext}>
               ${buttonLabel}
-            </${SelectMenuButton.litTagName}>
+            </devtools-select-menu-button>
         `;
       // clang-format on
     }
     // clang-format off
-    return LitHtml.html`
+    return html`
       <button id="side-button" @click=${this.#sideButtonClicked} ?disabled=${this.disabled}>
         ${buttonLabel}
       </button>
-      <${SelectMenuButton.litTagName}
+      <devtools-select-menu-button
         @click=${this.#showMenu}
         @selectmenubuttontrigger=${this.#showMenu}
         .singleArrow=${true}
@@ -268,7 +270,7 @@ export class SelectMenu extends HTMLElement {
         .showArrow=${true}
         .arrowDirection=${this.position}
         .disabled=${this.disabled}>
-      </${SelectMenuButton.litTagName}>
+      </devtools-select-menu-button>
     `;
     // clang-format on
   }
@@ -293,8 +295,8 @@ export class SelectMenu extends HTMLElement {
       throw new Error('SelectMenu render was not scheduled');
     }
     LitHtml.render(
-        LitHtml.html`
-      <${Menu.litTagName}
+        html`
+      <devtools-menu
         @menucloserequest=${this.#onMenuClose}
         @menuitemselected=${this.#onItemSelected}
         .position=${this.position}
@@ -303,11 +305,11 @@ export class SelectMenu extends HTMLElement {
         .showDivider=${this.showDivider}
         .showSelectedItem=${this.showSelectedItem}
         .open=${this.#open}
-        .getConnectorCustomXPosition=${this.#maybeGetArrowXPosition.bind(this)}
+        .getConnectorCustomXPosition=${this.showConnector ? this.#maybeGetArrowXPosition.bind(this) : null}
       >
       <slot>
       </slot>
-      </${Menu.litTagName}>
+      </devtools-menu>
       ${this.#renderButton()}
     `,
         this.#shadow, {host: this});
@@ -435,10 +437,10 @@ export class SelectMenuButton extends HTMLElement {
     if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
       throw new Error('SelectMenuItem render was not scheduled');
     }
-    const arrow = this.#props.showArrow ? LitHtml.html`<span id="arrow"></span>` : LitHtml.nothing;
+    const arrow = this.#props.showArrow ? html`<span id="arrow"></span>` : LitHtml.nothing;
     const classMap = {'single-arrow': this.#props.singleArrow};
     // clang-format off
-      const buttonTitle = LitHtml.html`
+      const buttonTitle = html`
       <span id="button-label-wrapper">
         <span id="label" ?witharrow=${this.showArrow} class=${LitHtml.Directives.classMap(classMap)}><slot></slot></span>
         ${arrow}
@@ -446,7 +448,7 @@ export class SelectMenuButton extends HTMLElement {
       `;
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <button aria-haspopup="true" aria-expanded="false" class="show" @keydown=${this.#handleButtonKeyDown} @click=${this.#handleClick} ?disabled=${this.disabled} jslog=${VisualLogging.dropDown(this.jslogContext)}>${buttonTitle}</button>
     `, this.#shadow, { host: this });
     // clang-format on

package/front_end/ui/components/panel_feedback/FeedbackButton.ts CHANGED Viewed

@@ -9,6 +9,8 @@ import * as ComponentHelpers from '../../components/helpers/helpers.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
 import * as Buttons from '../buttons/buttons.js';
+const {html} = LitHtml;
 const UIStrings = {
   /**
    * @description The title of the button that leads to the feedback form.
@@ -48,13 +50,13 @@ export class FeedbackButton extends HTMLElement {
     }
     // clang-format off
-    LitHtml.render(LitHtml.html`
-      <${Buttons.Button.Button.litTagName}
+    LitHtml.render(html`
+      <devtools-button
           @click=${this.#onFeedbackClick}
           .iconUrl=${feedbackIconUrl}
           .variant=${Buttons.Button.Variant.OUTLINED}
           .jslogContext=${'feedback'}
-      >${i18nString(UIStrings.feedback)}</${Buttons.Button.Button.litTagName}>
+      >${i18nString(UIStrings.feedback)}</devtools-button>
       `, this.#shadow, {host: this});
     // clang-format on
   }

package/front_end/ui/components/panel_feedback/PanelFeedback.ts CHANGED Viewed

@@ -2,15 +2,19 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+import '../../legacy/legacy.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as ComponentHelpers from '../../components/helpers/helpers.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
-import * as IconButton from '../icon_button/icon_button.js';
+import type * as IconButton from '../icon_button/icon_button.js';
 import panelFeedbackStyles from './panelFeedback.css.js';
+const {html} = LitHtml;
 const UIStrings = {
   /**
    *@description Introduction sentence to convey the feature is being actively worked on and we are looking for feedback.
@@ -67,15 +71,15 @@ export class PanelFeedback extends HTMLElement {
     }
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <div class="preview">
         <h2 class="flex">
-          <${IconButton.Icon.Icon.litTagName} .data=${{
+          <devtools-icon .data=${{
             iconPath: previewFeatureUrl,
             width: '20px',
             height: '20px',
             color: 'var(--icon-primary)',
-          } as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}> ${i18nString(UIStrings.previewFeature)}
+          } as IconButton.Icon.IconData}></devtools-icon> ${i18nString(UIStrings.previewFeature)}
         </h2>
         <p>${i18nString(UIStrings.previewText)} <x-link href=${this.#props.feedbackUrl} jslog=${VisualLogging.link('feedback').track({click: true})}>${i18nString(UIStrings.previewTextFeedbackLink)}</x-link></p>
         <div class="video">

package/front_end/ui/components/panel_feedback/PreviewToggle.ts CHANGED Viewed

@@ -2,10 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+import '../../../ui/legacy/legacy.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
 import * as LitHtml from '../../../ui/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 * as Input from '../input/input.js';
 import previewToggleStyles from './previewToggle.css.js';
@@ -72,14 +74,14 @@ export class PreviewToggle extends HTMLElement {
       html`
       <div class="container">
         <label class="experiment-preview">
-          <input type="checkbox" ?checked=${checked} @change=${this.#checkboxChanged} aria-label=${this.#name}/>
-          <${IconButton.Icon.Icon.litTagName} .data=${{
+          <input type="checkbox" ?checked=${checked} @change=${this.#checkboxChanged} aria-label=${this.#name} />
+          <devtools-icon .data=${{
             iconName: 'experiment',
             width: '16px',
             height: '16px',
             color: 'var(--icon-default)',
           } as IconButton.Icon.IconData}>
-          </${IconButton.Icon.Icon.litTagName}>${this.#name}
+          </devtools-icon>${this.#name}
         </label>
         <div class="spacer"></div>
         ${this.#feedbackURL && !this.#helperText

package/front_end/ui/components/panel_introduction_steps/PanelIntroductionSteps.ts CHANGED Viewed

@@ -6,6 +6,8 @@ import * as ComponentHelpers from '../../components/helpers/helpers.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
 import panelIntroductionStepsStyles from './panelIntroductionSteps.css.js';
+const {html} = LitHtml;
 export class PanelIntroductionSteps extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-panel-introduction-steps`;
   readonly #shadow = this.attachShadow({mode: 'open'});
@@ -22,7 +24,7 @@ export class PanelIntroductionSteps extends HTMLElement {
     }
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <h1><slot name="title">slot: title</slot></h1>
       <ol class="intro-steps">

package/front_end/ui/components/report_view/ReportView.test.ts CHANGED Viewed

@@ -7,6 +7,8 @@ import * as LitHtml from '../../lit-html/lit-html.js';
 import * as ReportView from './report_view.js';
+const {html} = LitHtml;
 describe('ReportView', () => {
   describe('header', () => {
     it('shows the provided report title', () => {
@@ -25,9 +27,9 @@ describe('ReportView', () => {
       const report = new ReportView.ReportView.Report();
       // clang-format off
       LitHtml.render(
-          LitHtml.html`
-        <${ReportView.ReportView.ReportKey.litTagName}>This is the key</${ReportView.ReportView.ReportKey.litTagName}>
-        <${ReportView.ReportView.ReportValue.litTagName}>This is the value</${ReportView.ReportView.ReportValue.litTagName}>
+          html`
+        <devtools-report-key>This is the key</devtools-report-key>
+        <devtools-report-value>This is the value</devtools-report-value>
       `,
           report, {host: this});
       // clang-format on