[ConsoleInsights] Add animation to streaming CI responses

This CL:
* Implements the streaming animation for the MarkdownView.
* Enables animation for the streaming in Console Insights.

Screencast: https://screencast.googleplex.com/cast/NTgyNzAzODg4MjU2MjA0OHxjZjE1MDNhMS02MQ

Bug: 375556018
Change-Id: Ibff1681df92c55ac4575c170c8fbf0ff455ef42f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5993652
Auto-Submit: Ergün Erdoğmuş <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Ergün Erdoğmuş <[email protected]>

Author: ergunsh

front_end/panels/explain/components/ConsoleInsight.ts

@@ -584,7 +584,7 @@ export class ConsoleInsight extends HTMLElement {
         <main jslog=${jslog}>
           ${
             this.#state.validMarkdown ? html`<devtools-markdown-view
-              .data=${{tokens: this.#state.tokens, renderer: this.#renderer} as MarkdownView.MarkdownView.MarkdownViewData}>
+              .data=${{tokens: this.#state.tokens, renderer: this.#renderer, animationEnabled: true} as MarkdownView.MarkdownView.MarkdownViewData}>
             </devtools-markdown-view>`: this.#state.explanation
           }
           <details style="--list-height: ${(this.#state.sources.length + (this.#state.isPageReloadRecommended ? 1 : 0)) * 20}px;" jslog=${VisualLogging.expand('sources').track({click: true})}>

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

@@ -24,6 +24,12 @@ function getFakeToken(token: TestToken): Marked.Marked.Token {
   return token as unknown as Marked.Marked.Token;
 }
 
+function renderTemplateResult(templateResult: LitHtml.TemplateResult): HTMLElement {
+  const container = document.createElement('container');
+  LitHtml.render(templateResult, container);  // eslint-disable-line rulesdir/lit_html_host_this
+  return container;
+}
+
 describeWithEnvironment('MarkdownView', () => {
   describe('tokenizer', () => {
     it('tokenizers links in single quotes', () => {
@@ -65,45 +71,53 @@ describeWithEnvironment('MarkdownView', () => {
     const renderer = new MarkdownView.MarkdownView.MarkdownLitRenderer();
 
     it('wraps paragraph tokens in <p> tags', () => {
-      const renderResult = renderer.renderToken(getFakeToken({type: 'paragraph', tokens: []}));
-      assert.deepStrictEqual(renderResult.strings.raw, ['<p>', '</p>']);
+      const container = renderTemplateResult(renderer.renderToken(getFakeToken({type: 'paragraph', tokens: []})));
+
+      assert.exists(container.querySelector('p'));
     });
 
     it('wraps an unordered list token in <ul> tags', () => {
-      const renderResult = renderer.renderToken(getFakeToken({type: 'list', items: []}));
-      assert.deepStrictEqual(renderResult.strings.raw, ['<ul>', '</ul>']);
+      const container = renderTemplateResult(renderer.renderToken(getFakeToken({type: 'list', items: []})));
+
+      assert.exists(container.querySelector('ul'));
     });
 
     it('wraps list items in <li> tags', () => {
-      const renderResult = renderer.renderToken(getFakeToken({type: 'list_item', tokens: []}));
-      assert.deepStrictEqual(renderResult.strings.raw, ['<li>', '</li>']);
+      const container = renderTemplateResult(renderer.renderToken(getFakeToken({type: 'list_item', tokens: []})));
+      assert.exists(container.querySelector('li'));
     });
 
     it('wraps a codespan token in <code> tags', () => {
-      const renderResult = renderer.renderToken(getFakeToken({type: 'codespan', text: 'const foo = 42;'}));
-      assert.deepStrictEqual(renderResult.strings.raw, ['<code>', '</code>']);
-      assert.deepStrictEqual(renderResult.values, ['const foo = 42;']);
+      const container =
+          renderTemplateResult(renderer.renderToken(getFakeToken({type: 'codespan', text: 'const foo = 42;'})));
+
+      const code = container.querySelector('code');
+      assert.exists(code);
+      assert.deepStrictEqual(code.textContent, 'const foo = 42;');
     });
 
     it('renders childless text tokens as-is', () => {
-      const renderResult = renderer.renderToken(getFakeToken({type: 'text', text: 'Simple text token'}));
-      assert.deepStrictEqual(renderResult.values, ['Simple text token']);
+      const container =
+          renderTemplateResult(renderer.renderToken(getFakeToken({type: 'text', text: 'Simple text token'})));
+
+      assert.deepStrictEqual(container.childTextNodes().length, 1);
+      assert.deepStrictEqual(container.childTextNodes()[0].textContent, 'Simple text token');
     });
 
     it('renders nested text tokens correctly', () => {
-      const renderResult = renderer.renderToken(getFakeToken({
+      const container = renderTemplateResult(renderer.renderToken(getFakeToken({
         type: 'text',
         text: 'This text should not be rendered. Only the subtokens!',
         tokens: [
           getFakeToken({type: 'text', text: 'Nested raw text'}),
           getFakeToken({type: 'codespan', text: 'and a nested codespan to boot'}),
         ],
-      }));
+      })));
 
-      const renderedParts = renderResult.values[0] as LitHtml.TemplateResult[];
-      assert.strictEqual(renderedParts.length, 2);
-      assert.deepStrictEqual(renderedParts[0].values, ['Nested raw text']);
-      assert.deepStrictEqual(renderedParts[1].values, ['and a nested codespan to boot']);
+      assert.notInclude(container.textContent, 'This text should not be rendered. Only the subtokens!');
+      assert.include(container.textContent, 'Nested raw text');
+      assert.exists(container.querySelector('code'));
+      assert.deepStrictEqual(container.querySelector('code')?.textContent, 'and a nested codespan to boot');
     });
 
     it('throws an error for invalid or unsupported token types', () => {
@@ -161,6 +175,14 @@ describeWithEnvironment('MarkdownView', () => {
 
       assert.isTrue(renderResult.includes('<em'));
     });
+    it('sets custom classes on the token types', () => {
+      renderer.setCustomClasses({em: 'custom-class'});
+
+      const renderResult = renderer.renderToken(getFakeToken({type: 'em', text: 'em text'}));
+      const container = renderTemplateResult(renderResult);
+      assert.isTrue(
+          container.querySelector('em')?.classList.contains('custom-class'), 'Expected custom-class to be applied');
+    });
   });
 
   describe('MarkdownInsightRenderer renderToken', () => {

front_end/ui/components/markdown_view/MarkdownView.ts

@@ -18,13 +18,16 @@ const render = LitHtml.render;
 export interface MarkdownViewData {
   tokens: Marked.Marked.Token[];
   renderer?: MarkdownLitRenderer;
+  animationEnabled?: boolean;
 }
 
 export class MarkdownView extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #tokenData: readonly Marked.Marked.Token[] = [];
   #renderer = new MarkdownLitRenderer();
+  #animationEnabled = false;
+  #isAnimating = false;
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [markdownViewStyles];
@@ -35,11 +38,53 @@ export class MarkdownView extends HTMLElement {
     if (data.renderer) {
       this.#renderer = data.renderer;
     }
+
+    if (data.animationEnabled) {
+      this.#animationEnabled = true;
+      this.#renderer.setCustomClasses({
+        paragraph: 'pending',
+        heading: 'pending',
+        list_item: 'pending',
+      });
+    } else {
+      this.#animationEnabled = false;
+      this.#renderer.setCustomClasses({});
+    }
+
     this.#update();
   }
 
+  #animate(): void {
+    if (this.#isAnimating) {
+      return;
+    }
+
+    this.#isAnimating = true;
+    const reveal = (): void => {
+      const pendingElement = this.#shadow.querySelector('.pending');
+      if (!pendingElement) {
+        this.#isAnimating = false;
+        return;
+      }
+
+      pendingElement.addEventListener('animationend', () => {
+        pendingElement.classList.remove('animating');
+        reveal();
+      }, {once: true});
+
+      pendingElement.classList.remove('pending');
+      pendingElement.classList.add('animating');
+    };
+
+    reveal();
+  }
+
   #update(): void {
     this.#render();
+
+    if (this.#animationEnabled) {
+      this.#animate();
+    }
   }
 
   #render(): void {
@@ -66,6 +111,18 @@ declare global {
  * Default renderer is used for the IssuesPanel and allows only well-known images and links to be embedded.
  */
 export class MarkdownLitRenderer {
+  #customClasses: Record<string, string> = {};
+
+  setCustomClasses(customClasses: Record<Marked.Marked.Token['type'], string>): void {
+    this.#customClasses = customClasses;
+  }
+
+  #customClassMapForToken(type: Marked.Marked.Token['type']): LitHtml.Directive.DirectiveResult {
+    return LitHtml.Directives.classMap({
+      [this.#customClasses[type]]: this.#customClasses[type],
+    });
+  }
+
   renderChildTokens(token: Marked.Marked.Token): LitHtml.TemplateResult[] {
     if ('tokens' in token && token.tokens) {
       return token.tokens.map(token => this.renderToken(token));
@@ -102,25 +159,27 @@ export class MarkdownLitRenderer {
   }
 
   renderHeading(heading: Marked.Marked.Tokens.Heading): LitHtml.TemplateResult {
+    const customClass = this.#customClassMapForToken('heading');
     switch (heading.depth) {
       case 1:
-        return html`<h1>${this.renderText(heading)}</h1>`;
+        return html`<h1 class=${customClass}>${this.renderText(heading)}</h1>`;
       case 2:
-        return html`<h2>${this.renderText(heading)}</h2>`;
+        return html`<h2 class=${customClass}>${this.renderText(heading)}</h2>`;
       case 3:
-        return html`<h3>${this.renderText(heading)}</h3>`;
+        return html`<h3 class=${customClass}>${this.renderText(heading)}</h3>`;
       case 4:
-        return html`<h4>${this.renderText(heading)}</h4>`;
+        return html`<h4 class=${customClass}>${this.renderText(heading)}</h4>`;
       case 5:
-        return html`<h5>${this.renderText(heading)}</h5>`;
+        return html`<h5 class=${customClass}>${this.renderText(heading)}</h5>`;
       default:
-        return html`<h6>${this.renderText(heading)}</h6>`;
+        return html`<h6 class=${customClass}>${this.renderText(heading)}</h6>`;
     }
   }
 
   renderCodeBlock(token: Marked.Marked.Tokens.Code): LitHtml.TemplateResult {
     // clang-format off
     return html`<devtools-code-block
+      class=${this.#customClassMapForToken('code')}
       .code=${this.unescape(token.text)}
       .codeLang=${token.lang || ''}>
     </devtools-code-block>`;
@@ -130,39 +189,43 @@ export class MarkdownLitRenderer {
   templateForToken(token: Marked.Marked.MarkedToken): LitHtml.TemplateResult|null {
     switch (token.type) {
       case 'paragraph':
-        return html`<p>${this.renderChildTokens(token)}</p>`;
+        return html`<p class=${this.#customClassMapForToken('paragraph')}>${this.renderChildTokens(token)}</p>`;
       case 'list':
-        return html`<ul>${token.items.map(token => {
+        return html`<ul class=${this.#customClassMapForToken('list')}>${token.items.map(token => {
           return this.renderToken(token);
         })}</ul>`;
       case 'list_item':
-        return html`<li>${this.renderChildTokens(token)}</li>`;
+        return html`<li class=${this.#customClassMapForToken('list_item')}>${this.renderChildTokens(token)}</li>`;
       case 'text':
         return this.renderText(token);
       case 'codespan':
-        return html`<code>${this.unescape(token.text)}</code>`;
+        return html`<code class=${this.#customClassMapForToken('codespan')}>${this.unescape(token.text)}</code>`;
       case 'code':
         return this.renderCodeBlock(token);
       case 'space':
         return html``;
       case 'link':
-        return html`<devtools-markdown-link .data=${{
+        return html`<devtools-markdown-link
+        class=${this.#customClassMapForToken('link')}
+        .data=${{
         key:
           token.href, title: token.text,
         }
         }></devtools-markdown-link>`;
       case 'image':
-        return html`<devtools-markdown-image .data=${{
+        return html`<devtools-markdown-image
+        class=${this.#customClassMapForToken('image')}
+        .data=${{
         key:
           token.href, title: token.text,
         }
         }></devtools-markdown-image>`;
       case 'heading':
         return this.renderHeading(token);
       case 'strong':
-        return html`<strong>${this.renderText(token)}</strong>`;
+        return html`<strong class=${this.#customClassMapForToken('strong')}>${this.renderText(token)}</strong>`;
       case 'em':
-        return html`<em>${this.renderText(token)}</em>`;
+        return html`<em class=${this.#customClassMapForToken('em')}>${this.renderText(token)}</em>`;
       default:
         return null;
     }

front_end/ui/components/markdown_view/markdownView.css

@@ -8,6 +8,22 @@
   --code-background-color: var(--sys-color-surface4);
 }
 
+@keyframes typing {
+  from { width: 0; }
+  to { width: 100%; }
+}
+
+.animating {
+  overflow: hidden;
+  white-space: nowrap;
+  animation: typing 0.3s steps(40, end);
+}
+
+.pending {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
+
 .message {
   line-height: 18px;
   font-size: 12px;