Add html marker format type

package.json

@@ -86,6 +86,7 @@
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.4.1",
     "reselect": "^4.1.6",
+    "sanitize-html": "^2.7.1",
     "url": "^0.11.0",
     "weaktuplemap": "^1.0.0",
     "workbox-window": "^6.5.4"

src/components/tooltip/Marker.js

@@ -35,7 +35,7 @@ import {
 import { Backtrace } from 'firefox-profiler/components/shared/Backtrace';
 
 import {
-  formatFromMarkerSchema,
+  formatDOMFromMarkerSchema,
   getSchemaFromMarker,
 } from 'firefox-profiler/profile-logic/marker-schema';
 import { computeScreenshotSize } from 'firefox-profiler/profile-logic/marker-data';
@@ -245,7 +245,7 @@ class MarkerTooltipContents extends React.PureComponent<Props> {
                     key={schema.name + '-' + key}
                     label={label || key}
                   >
-                    {formatFromMarkerSchema(schema.name, format, value)}
+                    {formatDOMFromMarkerSchema(schema.name, format, value)}
                   </TooltipDetail>
                 );
               }

src/profile-logic/marker-schema.js

@@ -2,6 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 // @flow
+import React from 'react';
 import { oneLine } from 'common-tags';
 import {
   formatNumber,
@@ -14,6 +15,8 @@ import {
   formatNanoseconds,
 } from '../utils/format-numbers';
 import { ensureExists } from '../utils/flow';
+import sanitizeHtml from 'sanitize-html';
+
 import type {
   CategoryList,
   MarkerFormatType,
@@ -359,6 +362,7 @@ export function getLabelGetter(
   };
 }
 
+/** Return value might be HTML */
 export function formatFromMarkerSchema(
   markerType: string,
   format: MarkerFormatType,
@@ -367,6 +371,7 @@ export function formatFromMarkerSchema(
   switch (format) {
     case 'url':
     case 'file-path':
+    case 'html':
     case 'string':
       // Make sure a non-empty string is returned here.
       if (value === undefined || value === null) {
@@ -399,3 +404,39 @@ export function formatFromMarkerSchema(
       return value;
   }
 }
+
+export function formatDOMFromMarkerSchema(
+  markerType: string,
+  format: MarkerFormatType,
+  value: any
+) {
+  const formatted = formatFromMarkerSchema(markerType, format, value);
+  if (!formatted.includes('<')) {
+    return formatted;
+  }
+  /* eslint-disable react/no-danger */
+  return (
+    <div
+      dangerouslySetInnerHTML={{
+        __html: sanitizeHtml(formatted, {
+          allowedClasses: [
+            'li',
+            'ul',
+            'ol',
+            'br',
+            'p',
+            'dd',
+            'dt',
+            'a',
+            'em',
+            'code',
+            'pre',
+            'table',
+            'tr',
+            'td/td',
+          ],
+        }),
+      }}
+    />
+  );
+}

src/test/unit/marker-schema.test.js

@@ -229,6 +229,7 @@ describe('marker schema formatting', function () {
       ['percentage', 0.123456789],
       ['percentage', 1234.56789],
       ['percentage', 0.000123456],
+      ['html', '<li><ul>Hello</ul></li>'],
     ];
 
     expect(
@@ -288,6 +289,7 @@ describe('marker schema formatting', function () {
         "percentage - 12%",
         "percentage - 123,457%",
         "percentage - 0.0%",
+        "html - <li><ul>Hello</ul></li>",
       ]
     `);
   });

src/types/markers.js

@@ -28,7 +28,8 @@ export type MarkerFormatType =
   // sanitized. Please be careful with including other types of PII here as well.
   // e.g. "Label: Some String"
   | 'string'
-
+  // limited HTML, allowed are <li>,<ul>,<ol>, <br>, <p>, <dd>, <dt>, <a>, <em>, <code>, <pre>, <table>, <tr>, <td>
+  | 'html'
   // ----------------------------------------------------
   // Numeric types