Move transparent fill check to a less expensive place. (#5826)

Checking the fill style for each sample has a lot of overhead. As an
alternative, we can accumulate the samples but then just skip the
drawing at the end.

This improves activity graph drawing performance on
https://share.firefox.dev/4aqbUN1 by 23%.

Before: https://share.firefox.dev/3Oy0NtP
After: https://share.firefox.dev/4aqbUN1

Author: mstange

src/components/shared/thread/ActivityGraphCanvas.tsx

@@ -163,6 +163,12 @@ export class ActivityGraphCanvas extends React.PureComponent<CanvasProps> {
     // previous fill.
     let previousUpperEdge = new Float32Array(canvasPixelWidth);
     for (const { fillStyle, accumulatedUpperEdge } of fills) {
+      if (fillStyle === 'transparent') {
+        // Skip any drawing work for the Idle category.
+        previousUpperEdge = accumulatedUpperEdge;
+        continue;
+      }
+
       ctx.fillStyle = fillStyle;
 
       // Some fills might not span the full width of the graph - they have parts where
@@ -230,7 +236,11 @@ export class ActivityGraphCanvas extends React.PureComponent<CanvasProps> {
 function _createDiagonalStripePattern(
   chartCtx: CanvasRenderingContext2D,
   color: string
-): CanvasPattern {
+): CanvasPattern | string {
+  if (color === 'transparent') {
+    return 'transparent';
+  }
+
   // Create a second canvas, draw to it in order to create a pattern. This canvas
   // and context will be discarded after the pattern is created.
   const patternCanvas = document.createElement('canvas');

src/components/shared/thread/ActivityGraphFills.tsx

@@ -73,7 +73,7 @@ export type CategoryDrawStyles = ReadonlyArray<{
   readonly getSelectedFillStyle: () => string;
   readonly getUnselectedFillStyle: () => string;
   readonly getSelectedTextColor: () => string;
-  readonly filteredOutByTransformFillStyle: CanvasPattern;
+  readonly filteredOutByTransformFillStyle: CanvasPattern | string;
 }>;
 
 type SelectedPercentageAtPixelBuffers = {
@@ -322,19 +322,12 @@ export class ActivityGraphFillComputer {
     beforeSampleCpuRatio: number,
     afterSampleCpuRatio: number
   ) {
-    const { rangeEnd, rangeStart, categoryDrawStyles } =
-      this.renderedComponentSettings;
+    const { rangeEnd, rangeStart } = this.renderedComponentSettings;
     if (sampleTime < rangeStart || sampleTime >= rangeEnd) {
       return;
     }
 
-    const categoryDrawStyle = categoryDrawStyles[category];
     const percentageBuffers = this.mutablePercentageBuffers[category];
-
-    if (categoryDrawStyle.getSelectedFillStyle() === 'transparent') {
-      return;
-    }
-
     const percentageBuffer = this._pickPercentageBuffer(
       percentageBuffers,
       sampleIndex