diff --git a/src/components/marker-chart/Canvas.js b/src/components/marker-chart/Canvas.js index a50539c0af..da9f33062b 100644 --- a/src/components/marker-chart/Canvas.js +++ b/src/components/marker-chart/Canvas.js @@ -48,7 +48,7 @@ type MarkerDrawingInformation = {| +w: CssPixels, +h: CssPixels, +isInstantMarker: boolean, - +text: string, + +markerIndex: MarkerIndex, |}; // We can hover over multiple items with Marker chart when we are in the active @@ -80,6 +80,8 @@ type OwnProps = {| +markerTimingAndBuckets: MarkerTimingAndBuckets, +rowHeight: CssPixels, +getMarker: (MarkerIndex) => Marker, + +getMarkerLabel: (MarkerIndex) => string, + +markerListLength: number, +threadsKey: ThreadsKey, +updatePreviewSelection: WrapFunctionInDispatch, +changeMouseTimePosition: ChangeMouseTimePosition, @@ -164,11 +166,11 @@ class MarkerChartCanvasImpl extends React.PureComponent { const rightClickedRow: number | void = rightClickedMarkerIndex === null ? undefined - : markerIndexToTimingRow.get(rightClickedMarkerIndex); + : markerIndexToTimingRow[rightClickedMarkerIndex]; let newRow: number | void = hoveredMarker === null ? undefined - : markerIndexToTimingRow.get(hoveredMarker); + : markerIndexToTimingRow[hoveredMarker]; if ( timelineTrackOrganization.type === 'active-tab' && newRow === undefined && @@ -190,7 +192,7 @@ class MarkerChartCanvasImpl extends React.PureComponent { let oldRow: number | void = prevHoveredMarker === null ? undefined - : markerIndexToTimingRow.get(prevHoveredMarker); + : markerIndexToTimingRow[prevHoveredMarker]; if ( timelineTrackOrganization.type === 'active-tab' && oldRow === undefined && @@ -254,8 +256,10 @@ class MarkerChartCanvasImpl extends React.PureComponent { _getMarkerIndexToTimingRow = memoize( ( markerTimingAndBuckets: MarkerTimingAndBuckets - ): Map => { - const markerIndexToTimingRow = new Map(); + ): Uint32Array /* like Map */ => { + const markerIndexToTimingRow = new Uint32Array( + this.props.markerListLength + ); for ( let rowIndex = 0; rowIndex < markerTimingAndBuckets.length; @@ -270,7 +274,7 @@ class MarkerChartCanvasImpl extends React.PureComponent { timingIndex < markerTiming.length; timingIndex++ ) { - markerIndexToTimingRow.set(markerTiming.index[timingIndex], rowIndex); + markerIndexToTimingRow[markerTiming.index[timingIndex]] = rowIndex; } } return markerIndexToTimingRow; @@ -287,13 +291,13 @@ class MarkerChartCanvasImpl extends React.PureComponent { w: CssPixels, h: CssPixels, isInstantMarker: boolean, - text: string, + markerIndex: MarkerIndex, isHighlighted: boolean = false ) { if (isInstantMarker) { this.drawOneInstantMarker(ctx, x, y, h, isHighlighted); } else { - this.drawOneIntervalMarker(ctx, x, y, w, h, text, isHighlighted); + this.drawOneIntervalMarker(ctx, x, y, w, h, markerIndex, isHighlighted); } } @@ -303,10 +307,10 @@ class MarkerChartCanvasImpl extends React.PureComponent { y: CssPixels, w: CssPixels, h: CssPixels, - text: string, + markerIndex: MarkerIndex, isHighlighted: boolean ) { - const { marginLeft } = this.props; + const { marginLeft, getMarkerLabel } = this.props; if (w <= 2) { // This is an interval marker small enough that if we drew it as a @@ -351,7 +355,10 @@ class MarkerChartCanvasImpl extends React.PureComponent { const w2: CssPixels = visibleWidth - 2 * TEXT_OFFSET_START; if (w2 > textMeasurement.minWidth) { - const fittedText = textMeasurement.getFittedText(text, w2); + const fittedText = textMeasurement.getFittedText( + getMarkerLabel(markerIndex), + w2 + ); if (fittedText) { ctx.fillStyle = isHighlighted ? 'white' : 'black'; ctx.fillText(fittedText, x2, y + TEXT_OFFSET_TOP); @@ -474,7 +481,6 @@ class MarkerChartCanvasImpl extends React.PureComponent { x = Math.round(x * devicePixelRatio) / devicePixelRatio; w = Math.round(w * devicePixelRatio) / devicePixelRatio; - const text = markerTiming.label[i]; const markerIndex = markerTiming.index[i]; const isHighlighted = @@ -483,7 +489,14 @@ class MarkerChartCanvasImpl extends React.PureComponent { selectedMarkerIndex === markerIndex; if (isHighlighted) { - highlightedMarkers.push({ x, y, w, h, isInstantMarker, text }); + highlightedMarkers.push({ + x, + y, + w, + h, + isInstantMarker, + markerIndex, + }); } else if ( // Always render non-dot markers and markers that are larger than // one pixel. @@ -493,7 +506,7 @@ class MarkerChartCanvasImpl extends React.PureComponent { x !== previousMarkerDrawnAtX ) { previousMarkerDrawnAtX = x; - this.drawOneMarker(ctx, x, y, w, h, isInstantMarker, text); + this.drawOneMarker(ctx, x, y, w, h, isInstantMarker, markerIndex); } } } @@ -509,7 +522,7 @@ class MarkerChartCanvasImpl extends React.PureComponent { highlightedMarker.w, highlightedMarker.h, highlightedMarker.isInstantMarker, - highlightedMarker.text, + highlightedMarker.markerIndex, true /* isHighlighted */ ); }); diff --git a/src/components/marker-chart/index.js b/src/components/marker-chart/index.js index 86a8d25bc1..17abbb99cf 100644 --- a/src/components/marker-chart/index.js +++ b/src/components/marker-chart/index.js @@ -55,8 +55,10 @@ type DispatchProps = {| type StateProps = {| +getMarker: (MarkerIndex) => Marker, + +getMarkerLabel: (MarkerIndex) => string, +markerTimingAndBuckets: MarkerTimingAndBuckets, +maxMarkerRows: number, + +markerListLength: number, +timeRange: StartEndRange, +threadsKey: ThreadsKey, +previewSelection: PreviewSelection, @@ -105,10 +107,12 @@ class MarkerChartImpl extends React.PureComponent { render() { const { maxMarkerRows, + markerListLength, timeRange, threadsKey, markerTimingAndBuckets, getMarker, + getMarkerLabel, previewSelection, updatePreviewSelection, changeMouseTimePosition, @@ -156,6 +160,8 @@ class MarkerChartImpl extends React.PureComponent { chartProps={{ markerTimingAndBuckets, getMarker, + getMarkerLabel, + markerListLength, // $FlowFixMe Error introduced by upgrading to v0.96.0. See issue #1936. updatePreviewSelection, changeMouseTimePosition, @@ -194,8 +200,10 @@ export const MarkerChart = explicitConnect<{||}, StateProps, DispatchProps>({ selectedThreadSelectors.getMarkerChartTimingAndBuckets(state); return { getMarker: selectedThreadSelectors.getMarkerGetter(state), + getMarkerLabel: selectedThreadSelectors.getMarkerChartLabelGetter(state), markerTimingAndBuckets, maxMarkerRows: markerTimingAndBuckets.length, + markerListLength: selectedThreadSelectors.getMarkerListLength(state), timeRange: getCommittedRange(state), threadsKey: getSelectedThreadsKey(state), previewSelection: getPreviewSelection(state), diff --git a/src/profile-logic/marker-timing.js b/src/profile-logic/marker-timing.js index 8635198b75..9bf6b13f0d 100644 --- a/src/profile-logic/marker-timing.js +++ b/src/profile-logic/marker-timing.js @@ -30,7 +30,6 @@ const MAX_STACKING_DEPTH = 300; * start: [0, 23, 35, 65, 75], * end: [1, 25, 37, 67, 77], * index: [0, 2, 5, 6, 8], - * label: ["Aye", "Aye", "Aye", "Aye", "Aye"], * bucket: "DOM", * instantOnly: false, * length: 5, @@ -40,7 +39,6 @@ const MAX_STACKING_DEPTH = 300; * start: [1, 28, 39, 69, 70], * end: [2, 29, 49, 70, 77], * index: [1, 3, 7, 9, 10], - * label: ["Bee", "Bee", "Bee", "Bee", "Bee"], * bucket: "DOM", * instantOnly: false, * length: 5, @@ -50,7 +48,6 @@ const MAX_STACKING_DEPTH = 300; * start: [1, 28, 39, 69, 70], * end: [2, 29, 49, 70, 77], * index: [1, 3, 7, 9, 10], - * label: ["Bee", "Bee", "Bee", "Bee", "Bee"], * bucket: "DOM", * instantOnly: false, * length: 5, @@ -60,7 +57,6 @@ const MAX_STACKING_DEPTH = 300; * start: [10, 33, 45, 75, 85], * end: [11, 35, 47, 77, 87], * index: [4, 11, 12, 13, 14], - * label: ["Sea", "Sea", "Sea", "Sea", "Sea"], * bucket: "Other", * instantOnly: false, * length: 5, @@ -90,7 +86,6 @@ export function getMarkerTiming( markerIndexes: MarkerIndex[], // Categories can be null for things like Network Markers, where we don't care to // break things up by category. - getLabel: (MarkerIndex) => string, categories: ?CategoryList ): MarkerTiming[] { // Each marker type will have it's own timing information, later collapse these into @@ -110,7 +105,6 @@ export function getMarkerTiming( // The chart will then be responsible for drawing this differently. marker.end === null ? marker.start : marker.end ); - markerTiming.label.push(getLabel(markerIndex)); markerTiming.index.push(markerIndex); markerTiming.length++; }; @@ -129,7 +123,6 @@ export function getMarkerTiming( start: [], end: [], index: [], - label: [], name: markerLineName, bucket: bucketName, instantOnly, @@ -254,7 +247,6 @@ export function getMarkerTiming( * start: [0, 23, 35, 65, 75], * end: [1, 25, 37, 67, 77], * index: [0, 2, 5, 6, 8], - * label: ["Aye", "Aye", "Aye", "Aye", "Aye"], * bucket: "DOM", * instantOnly: false, * length: 5, @@ -264,7 +256,6 @@ export function getMarkerTiming( * start: [1, 28, 39, 69, 70], * end: [2, 29, 49, 70, 77], * index: [1, 3, 7, 9, 10], - * label: ["Bee", "Bee", "Bee", "Bee", "Bee"], * bucket: "DOM", * instantOnly: false, * length: 5, @@ -274,7 +265,6 @@ export function getMarkerTiming( * start: [1, 28, 39, 69, 70], * end: [2, 29, 49, 70, 77], * index: [1, 3, 7, 9, 10], - * label: ["Bee", "Bee", "Bee", "Bee", "Bee"], * bucket: "DOM", * instantOnly: false, * length: 5, @@ -285,7 +275,6 @@ export function getMarkerTiming( * start: [10, 33, 45, 75, 85], * end: [11, 35, 47, 77, 87], * index: [4, 11, 12, 13, 14], - * label: ["Sea", "Sea", "Sea", "Sea", "Sea"], * bucket: "Other", * instantOnly: false, * length: 5, @@ -297,13 +286,11 @@ export function getMarkerTimingAndBuckets( markerIndexes: MarkerIndex[], // Categories can be null for things like Network Markers, where we don't care to // break things up by category. - getLabel: (MarkerIndex) => string, categories: ?CategoryList ): MarkerTimingAndBuckets { const allMarkerTimings = getMarkerTiming( getMarker, markerIndexes, - getLabel, categories ); diff --git a/src/selectors/per-thread/markers.js b/src/selectors/per-thread/markers.js index 66826cf505..393ee3f168 100644 --- a/src/selectors/per-thread/markers.js +++ b/src/selectors/per-thread/markers.js @@ -134,6 +134,12 @@ export function getMarkerSelectorsPerThread( ) ); + /** + * This returns the maximum marker index. + */ + const getMarkerListLength: Selector = (state) => + getFullMarkerList(state).length; + /** * This selector returns a function that's used to retrieve a marker object * from its MarkerIndex: @@ -446,7 +452,7 @@ export function getMarkerSelectorsPerThread( /** * This getter uses the marker schema to decide on the labels for the marker chart. */ - const _getMarkerChartLabelGetter: Selector<(MarkerIndex) => string> = + const getMarkerChartLabelGetter: Selector<(MarkerIndex) => string> = createSelector( getMarkerGetter, ProfileSelectors.getMarkerSchema, @@ -481,7 +487,6 @@ export function getMarkerSelectorsPerThread( createSelector( getMarkerGetter, getMarkerChartMarkerIndexes, - _getMarkerChartLabelGetter, ProfileSelectors.getCategories, MarkerTimingLogic.getMarkerTimingAndBuckets ); @@ -535,7 +540,6 @@ export function getMarkerSelectorsPerThread( const getNetworkTrackTiming: Selector = createSelector( getMarkerGetter, getNetworkMarkerIndexes, - _getMarkerChartLabelGetter, MarkerTimingLogic.getMarkerTiming ); @@ -546,7 +550,6 @@ export function getMarkerSelectorsPerThread( const getUserTimingMarkerTiming: Selector = createSelector( getMarkerGetter, getUserTimingMarkerIndexes, - _getMarkerChartLabelGetter, MarkerTimingLogic.getMarkerTiming ); @@ -739,11 +742,13 @@ export function getMarkerSelectorsPerThread( getMarkerIndexToRawMarkerIndexes, getFullMarkerList, getFullMarkerListIndexes, + getMarkerListLength, getNetworkMarkerIndexes, getSearchFilteredNetworkMarkerIndexes, getAreMarkerPanelsEmptyInFullRange, getMarkerTableMarkerIndexes, getMarkerChartMarkerIndexes, + getMarkerChartLabelGetter, getMarkerTooltipLabelGetter, getMarkerTableLabelGetter, getMarkerLabelToCopyGetter, diff --git a/src/test/store/__snapshots__/profile-view.test.js.snap b/src/test/store/__snapshots__/profile-view.test.js.snap index 9b4663e43e..34be6786a1 100644 --- a/src/test/store/__snapshots__/profile-view.test.js.snap +++ b/src/test/store/__snapshots__/profile-view.test.js.snap @@ -2007,9 +2007,6 @@ Array [ 3, ], "instantOnly": true, - "label": Array [ - "", - ], "length": 1, "name": "D", "start": Array [ @@ -2025,9 +2022,6 @@ Array [ 4, ], "instantOnly": true, - "label": Array [ - "", - ], "length": 1, "name": "E", "start": Array [ @@ -2043,9 +2037,6 @@ Array [ 5, ], "instantOnly": true, - "label": Array [ - "", - ], "length": 1, "name": "F", "start": Array [ @@ -2063,10 +2054,6 @@ Array [ 7, ], "instantOnly": false, - "label": Array [ - "https://mozilla.org", - "https://mozilla.org", - ], "length": 2, "name": "Network Requests", "start": Array [ diff --git a/src/test/store/actions.test.js b/src/test/store/actions.test.js index eb6670a187..31a0ed22be 100644 --- a/src/test/store/actions.test.js +++ b/src/test/store/actions.test.js @@ -460,7 +460,6 @@ describe('selectors/getCombinedTimingRows', function () { start: [0], end: [10], index: [0], - label: ['renderFunction'], name: 'A', bucket: 'None', instantOnly: false, @@ -470,7 +469,6 @@ describe('selectors/getCombinedTimingRows', function () { start: [1], end: [9], index: [1], - label: ['componentA'], name: 'A', bucket: 'None', instantOnly: false, @@ -480,7 +478,6 @@ describe('selectors/getCombinedTimingRows', function () { start: [2], end: [6], index: [2], - label: ['componentB'], name: 'A', bucket: 'None', instantOnly: false, @@ -490,7 +487,6 @@ describe('selectors/getCombinedTimingRows', function () { bucket: 'None', end: [4], index: [3], - label: ['componentC'], length: 1, name: 'A', start: [3], diff --git a/src/test/store/markers.test.js b/src/test/store/markers.test.js index 8ec23095c3..61450e3768 100644 --- a/src/test/store/markers.test.js +++ b/src/test/store/markers.test.js @@ -118,7 +118,6 @@ describe('selectors/getMarkerChartTimingAndBuckets', function () { start: [1], end: [1], index: [0], - label: [''], bucket: 'Other', instantOnly: true, length: 1, @@ -169,10 +168,6 @@ describe('selectors/getMarkerChartTimingAndBuckets', function () { start: [1, 6], end: [5, 9], index: [0, 1], - label: [ - 'https://www.mozilla.org/', - 'https://www.mozilla.org/image.jpg', - ], instantOnly: false, length: 2, }, @@ -192,7 +187,6 @@ describe('selectors/getMarkerChartTimingAndBuckets', function () { start: [3], end: [3], index: [1], - label: [''], instantOnly: true, length: 1, }, @@ -202,7 +196,6 @@ describe('selectors/getMarkerChartTimingAndBuckets', function () { start: [0], end: [1], index: [0], - label: ['https://mozilla.org'], instantOnly: false, length: 1, }, @@ -284,7 +277,6 @@ describe('selectors/getUserTimingMarkerTiming', function () { start: [6], end: [6], index: [3], - label: ['pointInTime'], name: 'UserTiming', bucket: 'None', instantOnly: true, @@ -294,7 +286,6 @@ describe('selectors/getUserTimingMarkerTiming', function () { start: [0], end: [10], index: [0], - label: ['renderFunction'], name: 'UserTiming', bucket: 'None', instantOnly: false, @@ -304,7 +295,6 @@ describe('selectors/getUserTimingMarkerTiming', function () { start: [1], end: [9], index: [1], - label: ['componentA'], name: 'UserTiming', bucket: 'None', instantOnly: false, @@ -314,7 +304,6 @@ describe('selectors/getUserTimingMarkerTiming', function () { start: [2, 7], end: [5, 9], index: [2, 4], - label: ['componentB', 'componentC'], name: 'UserTiming', bucket: 'None', instantOnly: false, diff --git a/src/types/profile-derived.js b/src/types/profile-derived.js index 03cc077102..3d1d84301a 100644 --- a/src/types/profile-derived.js +++ b/src/types/profile-derived.js @@ -401,7 +401,6 @@ export type MarkerTiming = {| // End time in milliseconds. It will equals start for instant markers. end: number[], index: MarkerIndex[], - label: string[], name: string, bucket: string, // True if this marker timing contains only instant markers.