Skip to content

Commit b0614b5

Browse files
mstangemstange
authored
Move React stuff out of marker schema logic module. (#5720)
This was causing all of react to be bundled into the symbolicator-cli script.
2 parents 3dc6f2b + 1a808fe commit b0614b5

3 files changed

Lines changed: 134 additions & 135 deletions

File tree

‎src/components/tooltip/Marker.tsx‎

Lines changed: 132 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@ import {
3737
import { Backtrace } from 'firefox-profiler/components/shared/Backtrace';
3838

3939
import {
40-
formatMarkupFromMarkerSchema,
4140
getSchemaFromMarker,
41+
formatFromMarkerSchema,
4242
} from 'firefox-profiler/profile-logic/marker-schema';
4343
import { computeScreenshotSize } from 'firefox-profiler/profile-logic/marker-data';
4444

@@ -52,13 +52,15 @@ import type {
5252
PageList,
5353
MarkerSchemaByName,
5454
MarkerIndex,
55+
MarkerFormatType,
5556
InnerWindowID,
5657
Page,
5758
Pid,
5859
Tid,
5960
IndexIntoStackTable,
6061
} from 'firefox-profiler/types';
6162

63+
import type { StringTable } from 'firefox-profiler/utils/string-table';
6264
import type { ConnectedProps } from 'firefox-profiler/utils/connect';
6365
import {
6466
getGCMinorDetails,
@@ -281,7 +283,7 @@ class MarkerTooltipContents extends React.PureComponent<Props> {
281283
const displayLabel = this.props.showKeys ? key : label || key;
282284
details.push(
283285
<TooltipDetail key={schema.name + '-' + key} label={displayLabel}>
284-
{formatMarkupFromMarkerSchema(
286+
{renderMarkerFieldValue(
285287
schema.name,
286288
format,
287289
value,
@@ -558,6 +560,134 @@ class MarkerTooltipContents extends React.PureComponent<Props> {
558560
}
559561
}
560562

563+
// This regexp is used to test for URLs and remove their scheme for display.
564+
const URL_SCHEME_REGEXP = /^http(s?):\/\//;
565+
566+
/**
567+
* This function may return structured markup for some types suchs as table,
568+
* list, or urls. For other types this falls back to formatFromMarkerSchema
569+
* above.
570+
*/
571+
export function renderMarkerFieldValue(
572+
markerType: string,
573+
format: MarkerFormatType,
574+
value: any,
575+
stringTable: StringTable,
576+
threadIdToNameMap?: Map<Tid, string>,
577+
processIdToNameMap?: Map<Pid, string>
578+
): React.ReactElement | string {
579+
if (value === undefined || value === null) {
580+
console.warn(`Formatting ${value} for ${JSON.stringify(markerType)}`);
581+
return '(empty)';
582+
}
583+
if (format !== 'url' && typeof format !== 'object' && format !== 'list') {
584+
return formatFromMarkerSchema(
585+
markerType,
586+
format,
587+
value,
588+
stringTable,
589+
threadIdToNameMap,
590+
processIdToNameMap
591+
);
592+
}
593+
if (typeof format === 'object') {
594+
switch (format.type) {
595+
case 'table': {
596+
const { columns } = format;
597+
if (!(value instanceof Array)) {
598+
throw new Error('Expected an array for table type');
599+
}
600+
const hasHeader = columns.some((column) => column.label);
601+
return (
602+
<table className="marker-table-value">
603+
{hasHeader ? (
604+
<thead>
605+
<tr>
606+
{columns.map((col, i) => (
607+
<th key={i}>{col.label || ''}</th>
608+
))}
609+
</tr>
610+
</thead>
611+
) : null}
612+
<tbody>
613+
{value.map((row, i) => {
614+
if (!(row instanceof Array)) {
615+
throw new Error('Expected an array for table row');
616+
}
617+
618+
if (row.length !== columns.length) {
619+
throw new Error(
620+
`Row ${i} length doesn't match column count (row: ${row.length}, cols: ${columns.length})`
621+
);
622+
}
623+
return (
624+
<tr key={i}>
625+
{row.map((cell, i) => {
626+
return (
627+
<td key={i}>
628+
{renderMarkerFieldValue(
629+
markerType,
630+
columns[i].type || 'string',
631+
cell,
632+
stringTable,
633+
threadIdToNameMap,
634+
processIdToNameMap
635+
)}
636+
</td>
637+
);
638+
})}
639+
</tr>
640+
);
641+
})}
642+
</tbody>
643+
</table>
644+
);
645+
}
646+
default:
647+
throw new Error(
648+
`Unknown format type ${JSON.stringify(format as never)}`
649+
);
650+
}
651+
}
652+
switch (format) {
653+
case 'list':
654+
if (!(value instanceof Array)) {
655+
throw new Error('Expected an array for list format');
656+
}
657+
return (
658+
<ul className="marker-list-value">
659+
{value.map((_entry, i) => (
660+
<li key={i}>
661+
{renderMarkerFieldValue(
662+
markerType,
663+
'string',
664+
value[i],
665+
stringTable
666+
)}
667+
</li>
668+
))}
669+
</ul>
670+
);
671+
case 'url': {
672+
if (!URL_SCHEME_REGEXP.test(value)) {
673+
return value;
674+
}
675+
return (
676+
<a
677+
href={value}
678+
target="_blank"
679+
rel="noreferrer"
680+
className="marker-link-value"
681+
>
682+
{value.replace(URL_SCHEME_REGEXP, '')}
683+
</a>
684+
);
685+
}
686+
default:
687+
throw new Error(`Unknown format type ${JSON.stringify(format as never)}`);
688+
}
689+
}
690+
561691
const ConnectedMarkerTooltipContents = explicitConnect<
562692
OwnProps,
563693
StateProps,

src/profile-logic/marker-schema.tsx renamed to src/profile-logic/marker-schema.ts

Lines changed: 0 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
* License, v. 2.0. If a copy of the MPL was not distributed with this
33
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
44

5-
import * as React from 'react';
65
import { oneLine } from 'common-tags';
76
import {
87
formatNumber,
@@ -474,8 +473,6 @@ function parseFirstField(
474473

475474
/**
476475
* This function formats a string from a marker type and a value.
477-
* If you wish to get markup instead, have a look at
478-
* formatMarkupFromMarkerSchema below.
479476
*/
480477
export function formatFromMarkerSchema(
481478
markerType: string,
@@ -592,134 +589,6 @@ export function formatFromMarkerSchema(
592589
}
593590
}
594591

595-
// This regexp is used to test for URLs and remove their scheme for display.
596-
const URL_SCHEME_REGEXP = /^http(s?):\/\//;
597-
598-
/**
599-
* This function may return structured markup for some types suchs as table,
600-
* list, or urls. For other types this falls back to formatFromMarkerSchema
601-
* above.
602-
*/
603-
export function formatMarkupFromMarkerSchema(
604-
markerType: string,
605-
format: MarkerFormatType,
606-
value: any,
607-
stringTable: StringTable,
608-
threadIdToNameMap?: Map<Tid, string>,
609-
processIdToNameMap?: Map<Pid, string>
610-
): React.ReactElement | string {
611-
if (value === undefined || value === null) {
612-
console.warn(`Formatting ${value} for ${JSON.stringify(markerType)}`);
613-
return '(empty)';
614-
}
615-
if (format !== 'url' && typeof format !== 'object' && format !== 'list') {
616-
return formatFromMarkerSchema(
617-
markerType,
618-
format,
619-
value,
620-
stringTable,
621-
threadIdToNameMap,
622-
processIdToNameMap
623-
);
624-
}
625-
if (typeof format === 'object') {
626-
switch (format.type) {
627-
case 'table': {
628-
const { columns } = format;
629-
if (!(value instanceof Array)) {
630-
throw new Error('Expected an array for table type');
631-
}
632-
const hasHeader = columns.some((column) => column.label);
633-
return (
634-
<table className="marker-table-value">
635-
{hasHeader ? (
636-
<thead>
637-
<tr>
638-
{columns.map((col, i) => (
639-
<th key={i}>{col.label || ''}</th>
640-
))}
641-
</tr>
642-
</thead>
643-
) : null}
644-
<tbody>
645-
{value.map((row, i) => {
646-
if (!(row instanceof Array)) {
647-
throw new Error('Expected an array for table row');
648-
}
649-
650-
if (row.length !== columns.length) {
651-
throw new Error(
652-
`Row ${i} length doesn't match column count (row: ${row.length}, cols: ${columns.length})`
653-
);
654-
}
655-
return (
656-
<tr key={i}>
657-
{row.map((cell, i) => {
658-
return (
659-
<td key={i}>
660-
{formatMarkupFromMarkerSchema(
661-
markerType,
662-
columns[i].type || 'string',
663-
cell,
664-
stringTable,
665-
threadIdToNameMap,
666-
processIdToNameMap
667-
)}
668-
</td>
669-
);
670-
})}
671-
</tr>
672-
);
673-
})}
674-
</tbody>
675-
</table>
676-
);
677-
}
678-
default:
679-
throw new Error(
680-
`Unknown format type ${JSON.stringify(format as never)}`
681-
);
682-
}
683-
}
684-
switch (format) {
685-
case 'list':
686-
if (!(value instanceof Array)) {
687-
throw new Error('Expected an array for list format');
688-
}
689-
return (
690-
<ul className="marker-list-value">
691-
{value.map((_entry, i) => (
692-
<li key={i}>
693-
{formatFromMarkerSchema(
694-
markerType,
695-
'string',
696-
value[i],
697-
stringTable
698-
)}
699-
</li>
700-
))}
701-
</ul>
702-
);
703-
case 'url': {
704-
if (!URL_SCHEME_REGEXP.test(value)) {
705-
return value;
706-
}
707-
return (
708-
<a
709-
href={value}
710-
target="_blank"
711-
rel="noreferrer"
712-
className="marker-link-value"
713-
>
714-
{value.replace(URL_SCHEME_REGEXP, '')}
715-
</a>
716-
);
717-
}
718-
default:
719-
throw new Error(`Unknown format type ${JSON.stringify(format as never)}`);
720-
}
721-
}
722-
723592
/**
724593
* Takes a marker and a RegExp and checks if any of its marker
725594
* payload fields match the search regular expression.

‎src/test/unit/marker-schema.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44

55
import {
66
formatFromMarkerSchema,
7-
formatMarkupFromMarkerSchema,
87
parseLabel,
98
markerSchemaFrontEndOnly,
109
} from '../../profile-logic/marker-schema';
10+
import { renderMarkerFieldValue } from 'firefox-profiler/components/tooltip/Marker';
1111
import type {
1212
MarkerSchema,
1313
Marker,
@@ -432,7 +432,7 @@ describe('marker schema formatting', function () {
432432
entries.map(([format, value]: [MarkerFormatType, any]): string[][] => [
433433
format,
434434
value,
435-
formatMarkupFromMarkerSchema('none', format, value, stringTable),
435+
renderMarkerFieldValue('none', format, value, stringTable),
436436
formatFromMarkerSchema('none', format, value, stringTable),
437437
])
438438
).toMatchSnapshot();

0 commit comments

Comments
 (0)