Resize bars show labels now when collapsed

Author: Brian Vaughn

packages/react-devtools-scheduling-profiler/src/CanvasPage.js

@@ -157,6 +157,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
 
     function createViewHelper(
       view: View,
+      resizeLabel: string = '',
       shouldScrollVertically: boolean = false,
       shouldResizeVertically: boolean = false,
     ): View {
@@ -186,6 +187,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
           defaultFrame,
           horizontalPanAndZoomView,
           canvasRef,
+          resizeLabel,
         );
       }
 
@@ -215,6 +217,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
     nativeEventsViewRef.current = nativeEventsView;
     const nativeEventsViewWrapper = createViewHelper(
       nativeEventsView,
+      'events',
       true,
       true,
     );
@@ -235,6 +238,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
     suspenseEventsViewRef.current = suspenseEventsView;
     const suspenseEventsViewWrapper = createViewHelper(
       suspenseEventsView,
+      'suspense',
       true,
       true,
     );
@@ -247,6 +251,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
     reactMeasuresViewRef.current = reactMeasuresView;
     const reactMeasuresViewWrapper = createViewHelper(
       reactMeasuresView,
+      'react',
       true,
       true,
     );
@@ -258,7 +263,12 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       data.duration,
     );
     flamechartViewRef.current = flamechartView;
-    const flamechartViewWrapper = createViewHelper(flamechartView, true, true);
+    const flamechartViewWrapper = createViewHelper(
+      flamechartView,
+      'flamechart',
+      true,
+      true,
+    );
 
     // Root view contains all of the sub views defined above.
     // The order we add them below determines their vertical position.

packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js

@@ -42,9 +42,11 @@ export function drawText(
   fullRect: Rect,
   drawableRect: Rect,
   availableWidth: number,
+  textAlign: 'left' | 'center' = 'left',
+  fillStyle: string = COLORS.TEXT_COLOR,
 ): void {
   if (availableWidth > TEXT_PADDING * 2) {
-    context.textAlign = 'left';
+    context.textAlign = textAlign;
     context.textBaseline = 'middle';
     context.font = `${FONT_SIZE}px sans-serif`;
 
@@ -57,7 +59,7 @@ export function drawText(
     );
 
     if (trimmedName !== null) {
-      context.fillStyle = COLORS.TEXT_COLOR;
+      context.fillStyle = fillStyle;
 
       // Prevent text from visibly overflowing its container when clipped.
       const textOverflowsViewableArea = !rectEqualToRect(
@@ -77,11 +79,16 @@ export function drawText(
         context.clip();
       }
 
-      context.fillText(
-        trimmedName,
-        x + TEXT_PADDING - (x < 0 ? x : 0),
-        y + fullRect.size.height / 2,
-      );
+      let textX;
+      if (textAlign === 'center') {
+        textX = x + availableWidth / 2 + TEXT_PADDING - (x < 0 ? x : 0);
+      } else {
+        textX = x + TEXT_PADDING - (x < 0 ? x : 0);
+      }
+
+      const textY = y + fullRect.size.height / 2;
+
+      context.fillText(trimmedName, textX, textY);
 
       if (textOverflowsViewableArea) {
         context.restore();