From eab326f860b265c26ac9ea767947a0d8e1af5e6c Mon Sep 17 00:00:00 2001 From: Johannes Bechberger Date: Mon, 22 Aug 2022 20:22:24 +0200 Subject: [PATCH] Add html marker format type --- package.json | 1 + src/components/tooltip/Marker.js | 4 +- src/profile-logic/marker-schema.js | 41 + src/test/unit/marker-schema.test.js | 2 + src/types/markers.js | 3 +- yarn.lock | 3920 ++++++++++++++------------- 6 files changed, 2026 insertions(+), 1945 deletions(-) diff --git a/package.json b/package.json index 5dd453619d..9bba42eee1 100644 --- a/package.json +++ b/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" diff --git a/src/components/tooltip/Marker.js b/src/components/tooltip/Marker.js index f7b49ce383..9b52ab224d 100644 --- a/src/components/tooltip/Marker.js +++ b/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 { key={schema.name + '-' + key} label={label || key} > - {formatFromMarkerSchema(schema.name, format, value)} + {formatDOMFromMarkerSchema(schema.name, format, value)} ); } diff --git a/src/profile-logic/marker-schema.js b/src/profile-logic/marker-schema.js index 3c28eaa4d0..709ca8bd3a 100644 --- a/src/profile-logic/marker-schema.js +++ b/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 ( +
+ ); +} diff --git a/src/test/unit/marker-schema.test.js b/src/test/unit/marker-schema.test.js index f92974a982..64e4df07c3 100644 --- a/src/test/unit/marker-schema.test.js +++ b/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', '
    • Hello
    • '], ]; expect( @@ -288,6 +289,7 @@ describe('marker schema formatting', function () { "percentage - 12%", "percentage - 123,457%", "percentage - 0.0%", + "html -
    • Hello
    • ", ] `); }); diff --git a/src/types/markers.js b/src/types/markers.js index ef50242eeb..177a8fa5c5 100644 --- a/src/types/markers.js +++ b/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
  • ,