Scheduling profiler: Canvas views clip by default (#22100)

Author: Brian Vaughn

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

@@ -118,6 +118,7 @@ export class SnapshotsView extends View {
     const visibleArea = this.visibleArea;
 
     // Prevent snapshot from visibly overflowing its container when clipped.
+    // View clips by default, but since this view may draw async (on Image load) we re-clip.
     const shouldClip = !rectEqualToRect(imageRect, visibleArea);
     if (shouldClip) {
       const clippedRect = intersectionOfRects(imageRect, visibleArea);

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

@@ -168,26 +168,13 @@ export class SuspenseEventsView extends View {
         return; // Not in view
       }
 
-      const drawableRect = intersectionOfRects(suspenseRect, rect);
-
-      // Clip diamonds so they don't overflow if the view has been resized (smaller).
-      const region = new Path2D();
-      region.rect(
-        drawableRect.origin.x,
-        drawableRect.origin.y,
-        drawableRect.size.width,
-        drawableRect.size.height,
-      );
-      context.save();
-      context.clip(region);
       context.beginPath();
       context.fillStyle = fillStyle;
       context.moveTo(xStart, y - halfSize);
       context.lineTo(xStart + halfSize, y);
       context.lineTo(xStart, y + halfSize);
       context.lineTo(xStart - halfSize, y);
       context.fill();
-      context.restore();
     } else {
       const xStop = timestampToPosition(
         timestamp + duration,

packages/react-devtools-scheduling-profiler/src/view-base/View.js

@@ -199,7 +199,24 @@ export class View {
       this.layoutSubviews();
       if (this._needsDisplay) this._needsDisplay = false;
       if (this._subviewsNeedDisplay) this._subviewsNeedDisplay = false;
+
+      // Clip anything drawn by the view to prevent it from overflowing its visible area.
+      const visibleArea = this.visibleArea;
+      const region = new Path2D();
+      region.rect(
+        visibleArea.origin.x,
+        visibleArea.origin.y,
+        visibleArea.size.width,
+        visibleArea.size.height,
+      );
+      context.save();
+      context.clip(region);
+      context.beginPath();
+
       this.draw(context, viewRefs);
+
+      // Stop clipping
+      context.restore();
     }
   }