Use heading elements for headings in MarkdownInsightRenderer

wolfib · Devtools-frontend LUCI CQ · commit 09852e31c5e9 · 2025-01-20T23:02:26.000-08:00
Use HTML heading elements instead of `<strong>` for rendering markdown headings in the MarkdownInsightRenderer. All `<h1>` - `<h6>` tags are styled to match the previous `<strong>` styling. Bug: 365835615 Change-Id: I07cf6189c3c3124fbbdd42098e2cf6ddd08f6c69 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6179443 Commit-Queue: Alex Rudenko <alexrudenko@chromium.org> Auto-Submit: Wolfgang Beyer <wolfi@chromium.org> Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
diff --git a/front_end/ui/components/markdown_view/MarkdownView.test.ts b/front_end/ui/components/markdown_view/MarkdownView.test.ts
@@ -176,7 +176,7 @@ describeWithEnvironment('MarkdownView', () => {
       assert.isTrue(renderResult.includes('<em'));
     });
     it('sets custom classes on the token types', () => {
-      renderer.setCustomClasses({em: 'custom-class'});
+      renderer.addCustomClasses({em: 'custom-class'});
 
       const renderResult = renderer.renderToken(getFakeToken({type: 'em', text: 'em text'}));
       const container = renderTemplateResult(renderResult);
@@ -211,9 +211,11 @@ describeWithEnvironment('MarkdownView', () => {
           renderer.renderToken({type: 'image', text: 'learn more', href: 'https://example.com'} as Marked.Marked.Token);
       assert((result.values[0] as HTMLElement).tagName === 'X-LINK');
     });
-    it('renders headers as a strong element', () => {
-      const result = renderer.renderToken({type: 'heading', text: 'learn more'} as Marked.Marked.Token);
-      assert(result.strings.join('').includes('<strong>'));
+    it('renders headings as headings with the `insight` class', () => {
+      const renderResult = renderer.renderToken(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);
diff --git a/front_end/ui/components/markdown_view/MarkdownView.ts b/front_end/ui/components/markdown_view/MarkdownView.ts
@@ -42,14 +42,18 @@ export class MarkdownView extends HTMLElement {
 
     if (data.animationEnabled) {
       this.#animationEnabled = true;
-      this.#renderer.setCustomClasses({
+      this.#renderer.addCustomClasses({
         paragraph: 'pending',
         heading: 'pending',
         list_item: 'pending',
       });
     } else {
       this.#animationEnabled = false;
-      this.#renderer.setCustomClasses({});
+      this.#renderer.removeCustomClasses({
+        paragraph: 'pending',
+        heading: 'pending',
+        list_item: 'pending',
+      });
     }
 
     this.#update();
@@ -67,7 +71,11 @@ export class MarkdownView extends HTMLElement {
     }
     this.#isAnimating = false;
     this.#animationEnabled = false;
-    this.#renderer.setCustomClasses({});
+    this.#renderer.removeCustomClasses({
+      paragraph: 'pending',
+      heading: 'pending',
+      list_item: 'pending',
+    });
   }
 
   #animate(): void {
@@ -127,16 +135,29 @@ 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> = {};
+  #customClasses: Record<string, Set<string>> = {};
+
+  addCustomClasses(customClasses: Record<Marked.Marked.Token['type'], string>): void {
+    for (const [type, className] of Object.entries(customClasses)) {
+      if (!this.#customClasses[type]) {
+        this.#customClasses[type] = new Set();
+      }
+      this.#customClasses[type].add(className);
+    }
+  }
 
-  setCustomClasses(customClasses: Record<Marked.Marked.Token['type'], string>): void {
-    this.#customClasses = customClasses;
+  removeCustomClasses(customClasses: Record<Marked.Marked.Token['type'], string>): void {
+    for (const [type, className] of Object.entries(customClasses)) {
+      if (this.#customClasses[type]) {
+        this.#customClasses[type].delete(className);
+      }
+    }
   }
 
   #customClassMapForToken(type: Marked.Marked.Token['type']): LitHtml.Directive.DirectiveResult {
-    return LitHtml.Directives.classMap({
-      [this.#customClasses[type]]: this.#customClasses[type],
-    });
+    const classNames = this.#customClasses[type] || new Set();
+    const classInfo = Object.fromEntries([...classNames].map(className => [className, true]));
+    return LitHtml.Directives.classMap(classInfo);
   }
 
   renderChildTokens(token: Marked.Marked.Token): LitHtml.TemplateResult[] {
@@ -265,6 +286,7 @@ export class MarkdownInsightRenderer extends MarkdownLitRenderer {
   constructor(citationClickHandler?: (index: number) => void) {
     super();
     this.#citationClickHandler = citationClickHandler || (() => {});
+    this.addCustomClasses({heading: 'insight'});
   }
 
   override renderToken(token: Marked.Marked.Token): LitHtml.TemplateResult {
@@ -305,7 +327,7 @@ export class MarkdownInsightRenderer extends MarkdownLitRenderer {
   override templateForToken(token: Marked.Marked.Token): LitHtml.TemplateResult|null {
     switch (token.type) {
       case 'heading':
-        return html`<strong>${this.renderText(token)}</strong>`;
+        return this.renderHeading(token as Marked.Marked.Tokens.Heading);
       case 'link':
       case 'image': {
         const sanitizedUrl = this.sanitizeUrl(token.href);
diff --git a/front_end/ui/components/markdown_view/markdownView.css b/front_end/ui/components/markdown_view/markdownView.css
@@ -79,3 +79,8 @@ devtools-code-block {
   text-decoration: underline;
   cursor: pointer;
 }
+
+h1.insight, h2.insight, h3.insight, h4.insight, h5.insight, h6.insight {
+  font: var(--sys-typescale-body4-bold);
+  margin: var(--sys-size-1) 0 10px;
+}
diff --git a/test/interactions/goldens/linux/explain/console_insight.png b/test/interactions/goldens/linux/explain/console_insight.png

Original file line number	Diff line number	Diff line change
`@@ -79,3 +79,8 @@ devtools-code-block {`
`79`	`79`	`text-decoration: underline;`
`80`	`80`	`cursor: pointer;`
`81`	`81`	`}`
	`82`	`+`
	`83`	`+h1.insight, h2.insight, h3.insight, h4.insight, h5.insight, h6.insight {`
	`84`	`+ font: var(--sys-typescale-body4-bold);`
	`85`	`+ margin: var(--sys-size-1) 0 10px;`
	`86`	`+}`