Fix Markdown eslint rule violation

Tested that this produces the same result when rendered on the page.
Needed a little bit more fixes as types changed.

Bug: 457654458
Change-Id: I2201ab3ca99f185e47e297e028006608ca66b2ac
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7124647
Commit-Queue: Ergün Erdoğmuş <[email protected]>
Auto-Submit: Nikolay Vitkov <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>

Author: Lightning00Blade

front_end/panels/ai_assistance/components/MarkdownRendererWithCodeBlock.ts

@@ -19,7 +19,7 @@ import type * as Lit from '../../../ui/lit/lit.js';
  * ```
  **/
 export class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.MarkdownInsightRenderer {
-  override templateForToken(token: Marked.Marked.MarkedToken): Lit.TemplateResult|null {
+  override templateForToken(token: Marked.Marked.MarkedToken): Lit.LitTemplate|null {
     if (token.type === 'code') {
       const lines = (token.text).split('\n');
       if (lines[0]?.trim() === 'css') {

front_end/panels/ai_assistance/components/PerformanceAgentMarkdownRenderer.ts

@@ -21,7 +21,7 @@ export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBl
     super();
   }
 
-  override templateForToken(token: Marked.Marked.MarkedToken): Lit.TemplateResult|null {
+  override templateForToken(token: Marked.Marked.MarkedToken): Lit.LitTemplate|null {
     if (token.type === 'link' && token.href.startsWith('#')) {
       if (token.href.startsWith('#node-')) {
         const nodeId = Number(token.href.replace('#node-', '')) as Protocol.DOM.BackendNodeId;

front_end/ui/components/markdown_view/MarkdownView.test.ts

@@ -31,7 +31,7 @@ function getFakeToken(token: TestToken): Marked.Marked.Token {
   return token as unknown as Marked.Marked.Token;
 }
 
-function renderTemplateResult(templateResult: Lit.TemplateResult): HTMLElement {
+function renderTemplateResult(templateResult: Lit.LitTemplate): HTMLElement {
   const container = document.createElement('container');
   Lit.render(templateResult, container);
   return container;
@@ -77,6 +77,10 @@ describeWithEnvironment('MarkdownView', () => {
   describe('MarkdownLitRenderer renderToken', () => {
     const renderer = new MarkdownView.MarkdownView.MarkdownLitRenderer();
 
+    function getRenderedResultString(token: Marked.Marked.Token) {
+      return (renderer.renderToken(token) as Lit.TemplateResult).strings.join('');
+    }
+
     it('wraps paragraph tokens in <p> tags', () => {
       const container = renderTemplateResult(renderer.renderToken(getFakeToken({type: 'paragraph', tokens: []})));
 
@@ -134,7 +138,7 @@ describeWithEnvironment('MarkdownView', () => {
     it('renders link with valid key', () => {
       MarkdownView.MarkdownLinksMap.markdownLinks.set('exampleLink', 'https://web.dev/');
       const renderResult =
-          renderer.renderToken(getFakeToken({type: 'link', text: 'learn more', href: 'exampleLink'})).strings.join('');
+          getRenderedResultString(getFakeToken({type: 'link', text: 'learn more', href: 'exampleLink'}));
 
       assert.isTrue(renderResult.includes('<devtools-markdown-link'));
     });
@@ -149,7 +153,7 @@ describeWithEnvironment('MarkdownView', () => {
         isIcon: true,
       });
       const renderResult =
-          renderer.renderToken(getFakeToken({type: 'image', text: 'phone', href: 'testExampleImage'})).strings.join('');
+          getRenderedResultString(getFakeToken({type: 'image', text: 'phone', href: 'testExampleImage'}));
       assert.isTrue(renderResult.includes('<devtools-markdown-image'));
     });
 
@@ -158,27 +162,25 @@ describeWithEnvironment('MarkdownView', () => {
         src: 'Images/phone-logo.png',
         isIcon: false,
       });
-      const renderResult =
-          renderer.renderToken(getFakeToken({type: 'image', text: 'phone', href: 'exampleImage'})).strings.join('');
+      const renderResult = getRenderedResultString(getFakeToken({type: 'image', text: 'phone', href: 'exampleImage'}));
       assert.isTrue(renderResult.includes('<devtools-markdown-image'));
     });
 
     it('throws an error if invalid image key is provided', () => {
       assert.throws(() => MarkdownView.MarkdownImagesMap.getMarkdownImage('testErrorImageLink'));
     });
     it('renders a heading correctly', () => {
-      const renderResult =
-          renderer.renderToken(getFakeToken({type: 'heading', text: 'a heading text', depth: 3})).strings.join('');
+      const renderResult = getRenderedResultString(getFakeToken({type: 'heading', text: 'a heading text', depth: 3}));
 
       assert.isTrue(renderResult.includes('<h3'));
     });
     it('renders strong correctly', () => {
-      const renderResult = renderer.renderToken(getFakeToken({type: 'strong', text: 'a strong text'})).strings.join('');
+      const renderResult = getRenderedResultString(getFakeToken({type: 'strong', text: 'a strong text'}));
 
       assert.isTrue(renderResult.includes('<strong'));
     });
     it('renders em correctly', () => {
-      const renderResult = renderer.renderToken(getFakeToken({type: 'em', text: 'em text'})).strings.join('');
+      const renderResult = getRenderedResultString(getFakeToken({type: 'em', text: 'em text'}));
 
       assert.isTrue(renderResult.includes('<em'));
     });
@@ -194,46 +196,50 @@ describeWithEnvironment('MarkdownView', () => {
 
   describe('MarkdownInsightRenderer renderToken', () => {
     const renderer = new MarkdownView.MarkdownView.MarkdownInsightRenderer();
+
+    function getRenderedLitTemplate(token: Marked.Marked.Token) {
+      return renderer.renderToken(token) as Lit.TemplateResult;
+    }
     it('renders link as texts', () => {
-      const result =
-          renderer.renderToken({type: 'link', text: 'learn more', href: 'https://example.test'} as Marked.Marked.Token);
+      const result = getRenderedLitTemplate(
+          {type: 'link', text: 'learn more', href: 'https://example.test'} as Marked.Marked.Token);
       assert.strictEqual(result.values[0], 'learn more');
     });
     it('renders link urls as texts', () => {
-      const result = renderer.renderToken({type: 'link', href: 'https://example.test'} as Marked.Marked.Token);
+      const result = getRenderedLitTemplate({type: 'link', href: 'https://example.test'} as Marked.Marked.Token);
       assert.strictEqual(result.values[0], 'https://example.test');
     });
     it('does not render URLs with "javascript:"', () => {
-      const result = renderer.renderToken(
+      const result = getRenderedLitTemplate(
           {type: 'link', text: 'learn more', href: 'javascript:alert("test")'} as Marked.Marked.Token);
       assert.isUndefined(result.values[0]);
     });
     it('does not render chrome:// URLs', () => {
       const result =
-          renderer.renderToken({type: 'link', text: 'learn more', href: 'chrome://settings'} as Marked.Marked.Token);
+          getRenderedLitTemplate({type: 'link', text: 'learn more', href: 'chrome://settings'} as Marked.Marked.Token);
       assert.isUndefined(result.values[0]);
     });
     it('does not render invalid URLs', () => {
-      const result = renderer.renderToken({type: 'link', text: 'learn more', href: '123'} as Marked.Marked.Token);
+      const result = getRenderedLitTemplate({type: 'link', text: 'learn more', href: '123'} as Marked.Marked.Token);
       assert.isUndefined(result.values[0]);
     });
     it('renders images as text', () => {
-      const result = renderer.renderToken(
+      const result = getRenderedLitTemplate(
           {type: 'image', text: 'learn more', href: 'https://example.test'} as Marked.Marked.Token);
       assert.strictEqual(result.values[0], 'learn more');
     });
     it('renders image urls as text', () => {
-      const result = renderer.renderToken({type: 'image', href: 'https://example.test'} as Marked.Marked.Token);
+      const result = getRenderedLitTemplate({type: 'image', href: 'https://example.test'} as Marked.Marked.Token);
       assert.strictEqual(result.values[0], 'https://example.test');
     });
     it('renders headings as headings with the `insight` class', () => {
-      const renderResult = renderer.renderToken(getFakeToken({type: 'heading', text: 'a heading text', depth: 3}));
+      const renderResult = getRenderedLitTemplate(getFakeToken({type: 'heading', text: 'a heading text', depth: 3}));
       const container = renderTemplateResult(renderResult);
       assert.isTrue(
           container.querySelector('h3')?.classList.contains('insight'), 'Expected `insight`-class to be applied');
     });
     it('renders unsupported tokens', () => {
-      const result = renderer.renderToken({type: 'html', raw: '<!DOCTYPE html>'} as Marked.Marked.Token);
+      const result = getRenderedLitTemplate({type: 'html', raw: '<!DOCTYPE html>'} as Marked.Marked.Token);
       assert(result.values.join('').includes('<!DOCTYPE html>'));
     });
     it('detects language but default to provided', () => {
@@ -344,7 +350,7 @@ console.log('test')
     it('renders using a custom renderer', () => {
       const codeBlock =
           renderString('`console.log()`', 'code', new class extends MarkdownView.MarkdownView.MarkdownLitRenderer {
-            override templateForToken(token: Marked.Marked.Token): Lit.TemplateResult|null {
+            override templateForToken(token: Marked.Marked.Token): Lit.LitTemplate|null {
               if (token.type === 'codespan') {
                 return html`<code>overriden</code>`;
               }

front_end/ui/components/markdown_view/MarkdownView.ts

@@ -159,7 +159,7 @@ export class MarkdownLitRenderer {
     return Lit.Directives.classMap(classInfo);
   }
 
-  renderChildTokens(token: Marked.Marked.Token): Lit.TemplateResult[] {
+  renderChildTokens(token: Marked.Marked.Token): Lit.LitTemplate[] {
     if ('tokens' in token && token.tokens) {
       return token.tokens.map(token => this.renderToken(token));
     }
@@ -222,7 +222,7 @@ export class MarkdownLitRenderer {
     // clang-format on
   }
 
-  templateForToken(token: Marked.Marked.MarkedToken): Lit.TemplateResult|null {
+  templateForToken(token: Marked.Marked.MarkedToken): Lit.LitTemplate|null {
     switch (token.type) {
       case 'paragraph':
         return html`<p class=${this.customClassMapForToken('paragraph')}>${this.renderChildTokens(token)}</p>`;
@@ -239,8 +239,7 @@ export class MarkdownLitRenderer {
       case 'code':
         return this.renderCodeBlock(token);
       case 'space':
-        // eslint-disable-next-line lit/prefer-nothing
-        return html``;
+        return Lit.nothing;
       case 'link':
         return html`<devtools-markdown-link
         class=${this.customClassMapForToken('link')}
@@ -266,7 +265,7 @@ export class MarkdownLitRenderer {
     }
   }
 
-  renderToken(token: Marked.Marked.Token): Lit.TemplateResult {
+  renderToken(token: Marked.Marked.Token): Lit.LitTemplate {
     const template = this.templateForToken(token as Marked.Marked.MarkedToken);
     if (template === null) {
       throw new Error(`Markdown token type '${token.type}' not supported.`);
@@ -287,7 +286,7 @@ export class MarkdownInsightRenderer extends MarkdownLitRenderer {
     this.addCustomClasses({heading: 'insight'});
   }
 
-  override renderToken(token: Marked.Marked.Token): Lit.TemplateResult {
+  override renderToken(token: Marked.Marked.Token): Lit.LitTemplate {
     const template = this.templateForToken(token as Marked.Marked.MarkedToken);
     if (template === null) {
       return html`${token.raw}`;
@@ -322,7 +321,7 @@ export class MarkdownInsightRenderer extends MarkdownLitRenderer {
     return '';
   }
 
-  override templateForToken(token: Marked.Marked.Token): Lit.TemplateResult|null {
+  override templateForToken(token: Marked.Marked.Token): Lit.LitTemplate|null {
     switch (token.type) {
       case 'heading':
         return this.renderHeading(token as Marked.Marked.Tokens.Heading);