[RPP] Support markdown in insights

This makes it simpler to localize strings with links or code tags.

Using markdown inside an i18n string is new for CDT, but not for
the i18n library DevTools uses (which was taken from Lighthouse, and
markdown is used liberally there). There's nothing special to do to
use Markdown, all the markdown-specific bits are transformed to
placeholders for the i18n pipeline like so:

  "panels/timeline/components/insights/Viewport.ts | description": {
    "message": "A viewport meta element not only optimizes your app for mobile screen sizes, but also $LINK_START_0$prevents a 300 millisecond delay to user input$LINK_END_0$.",
    "description": "Text to tell the user how a viewport meta element can improve performance.",
    "placeholders": {
      "LINK_START_0": {
        "content": "["
      },
      "LINK_END_0": {
        "content": "](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/)"
      }
    }
  },

This patch utilizes the existing MarkdownView component, but with a
helper that allows rendering given just the markdown string.

Bug: None
Change-Id: I2cc1af7aed2918cde090c69d9ef7c8a3a1fd4622
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5800335
Commit-Queue: Connor Clark <[email protected]>
Reviewed-by: Simon Zünd <[email protected]>

Author: Connor Clark

front_end/panels/timeline/components/insights/BUILD.gn

@@ -31,9 +31,11 @@ devtools_module("insights") {
     "../../../../core/platform:bundle",
     "../../../../models/trace:bundle",
     "../../../../services/trace_bounds:bundle",
+    "../../../../third_party/marked:bundle",
     "../../../../ui/components/buttons:bundle",
     "../../../../ui/components/helpers:bundle",
     "../../../../ui/components/icon_button:bundle",
+    "../../../../ui/components/markdown_view:bundle",
     "../../../../ui/lit-html:bundle",
     "../../overlays:bundle",
   ]

front_end/panels/timeline/components/insights/Helpers.ts

@@ -1,8 +1,12 @@
 // Copyright 2024 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+
 import type * as TraceEngine from '../../../../models/trace/trace.js';
+import * as Marked from '../../../../third_party/marked/marked.js';
 import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
+import * as MarkdownView from '../../../../ui/components/markdown_view/markdown_view.js';
+import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
 import sidebarInsightStyles from './sidebarInsight.css.js';
@@ -108,3 +112,15 @@ export abstract class BaseInsight extends HTMLElement {
     });
   }
 }
+
+/**
+ * Returns a rendered MarkdownView component.
+ *
+ * This should not be used for markdown that is not guaranteed to be valid.
+ */
+export function md(markdown: string): LitHtml.TemplateResult {
+  const tokens = Marked.Marked.lexer(markdown);
+  return LitHtml.html`<${MarkdownView.MarkdownView.MarkdownView.litTagName}
+    .data=${{tokens} as MarkdownView.MarkdownView.MarkdownViewData}>
+  </${MarkdownView.MarkdownView.MarkdownView.litTagName}>`;
+}

front_end/panels/timeline/components/insights/Viewport.ts

@@ -7,7 +7,7 @@ import type * as TraceEngine from '../../../../models/trace/trace.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
-import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
+import {BaseInsight, md, shouldRenderForCategory} from './Helpers.js';
 import {NodeLink, type NodeLinkData} from './NodeLink.js';
 import * as SidebarInsight from './SidebarInsight.js';
 import {InsightsCategories} from './types.js';
@@ -17,7 +17,7 @@ const UIStrings = {
    * @description Text to tell the user how a viewport meta element can improve performance.
    */
   description: 'A viewport meta element not only optimizes your app for mobile screen sizes, ' +
-      'but also prevents a 300 millisecond delay to user input.',
+      'but also [prevents a 300 millisecond delay to user input](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/).',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/Viewport.ts', UIStrings);
@@ -65,10 +65,7 @@ export class Viewport extends BaseInsight {
             } as SidebarInsight.InsightDetails}
             @insighttoggleclick=${this.onSidebarClick}>
                 <div slot="insight-description" class="insight-description">
-                    <span>${i18nString(UIStrings.description)}</span>
-                    <div>
-                      <x-link class="link" href="https://developer.chrome.com/blog/300ms-tap-delay-gone-away/">Learn more here.</x-link>
-                    </div>
+                  ${md(i18nString(UIStrings.description))}
                 </div>
                 <div slot="insight-content" class="insight-content">
                   ${backendNodeId !== undefined ? LitHtml.html`<${NodeLink.litTagName}

front_end/third_party/marked/BUILD.gn

@@ -26,6 +26,7 @@ devtools_entrypoint("bundle") {
     "../../models/issues_manager/*",
     "../../panels/explain/*",
     "../../panels/freestyler/*",
+    "../../panels/timeline/*",
     "../../ui/components/docs/console_insight/*",
     "../../ui/components/docs/freestyler/*",
     "../../ui/components/docs/markdown_view/*",

front_end/ui/components/markdown_view/MarkdownLinksMap.ts

@@ -56,7 +56,10 @@ export const markdownLinks = new Map<string, string>([
 ]);
 
 export const getMarkdownLink = (key: string): string => {
-  if (/^https:\/\/www.chromestatus.com\/feature\/\d+$/.test(key)) {
+  if (/^https:\/\/www\.chromestatus\.com\/feature\/\d+$/.test(key)) {
+    return key;
+  }
+  if (/^https:\/\/developer\.chrome\.com\/blog\//.test(key)) {
     return key;
   }
   const link = markdownLinks.get(key);