diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js b/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js index b0f02e57d0f1e..976e37ebb9d39 100644 --- a/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js +++ b/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js @@ -242,20 +242,21 @@ export class ReactMeasuresView extends View { } // Render lane labels - const labelRect = { - origin: { - x: visibleArea.origin.x, - y: baseY, - }, - size: { - width: visibleArea.size.width, - height: REACT_LANE_HEIGHT, - }, - }; const label = this._profilerData.laneToLabelMap.get(lane); if (label == null) { console.warn(`Could not find label for lane ${lane}.`); } else { + const labelRect = { + origin: { + x: visibleArea.origin.x, + y: baseY, + }, + size: { + width: visibleArea.size.width, + height: REACT_LANE_HEIGHT, + }, + }; + drawText(label, context, labelRect, visibleArea, { fillStyle: COLORS.TEXT_DIM_COLOR, }); diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js b/packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js index 7a0d7d4c2bb1c..85640de33be93 100644 --- a/packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js +++ b/packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js @@ -14,6 +14,19 @@ import {COLORS, FONT_SIZE, TEXT_PADDING} from '../constants'; const cachedTextWidths = new Map(); +export function getTextWidth( + context: CanvasRenderingContext2D, + text: string, +): number { + let measuredWidth = cachedTextWidths.get(text); + if (measuredWidth == null) { + measuredWidth = context.measureText(text).width; + cachedTextWidths.set(text, measuredWidth); + } + + return ((measuredWidth: any): number); +} + export function trimText( context: CanvasRenderingContext2D, text: string, @@ -22,13 +35,7 @@ export function trimText( for (let i = text.length - 1; i >= 0; i--) { const trimmedText = i === text.length - 1 ? text : text.substr(0, i) + '…'; - let measuredWidth = cachedTextWidths.get(trimmedText); - if (measuredWidth == null) { - measuredWidth = context.measureText(trimmedText).width; - cachedTextWidths.set(trimmedText, measuredWidth); - } - - if (measuredWidth <= width) { + if (getTextWidth(context, text) <= width) { return trimmedText; } }