From 36156979976cd16fb9ab756b4fa64d6eb46dfaca Mon Sep 17 00:00:00 2001
From: Paul Irish <paulirish@chromium.org>
Date: Fri, 11 Aug 2023 15:11:51 -0700
Subject: [PATCH] Create candystripe pattern just once, on-demand

Bug:1472155
Change-Id: I3979aee111a1dfa56eec003c5614b6296abe7dd3
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4774979
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Auto-Submit: Paul Irish <paulirish@chromium.org>
---
 .../legacy/components/perf_ui/FlameChart.ts   | 31 +++++++++----------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/front_end/ui/legacy/components/perf_ui/FlameChart.ts b/front_end/ui/legacy/components/perf_ui/FlameChart.ts
index df8eaac83b..7ed4f8cb07 100644
--- a/front_end/ui/legacy/components/perf_ui/FlameChart.ts
+++ b/front_end/ui/legacy/components/perf_ui/FlameChart.ts
@@ -91,7 +91,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
   private readonly flameChartDelegate: FlameChartDelegate;
   private chartViewport: ChartViewport;
   private dataProvider: FlameChartDataProvider;
-  private candyStripeCanvas: HTMLCanvasElement;
+  private candyStripePattern: CanvasPattern|null;
   private viewportElement: HTMLElement;
   private canvas: HTMLCanvasElement;
   private entryInfo: HTMLElement;
@@ -151,11 +151,10 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.chartViewport.show(this.contentElement);
 
     this.dataProvider = dataProvider;
-    this.candyStripeCanvas = document.createElement('canvas');
-    this.createCandyStripePattern();
 
     this.viewportElement = this.chartViewport.viewportElement;
     this.canvas = (this.viewportElement.createChild('canvas', 'fill') as HTMLCanvasElement);
+    this.candyStripePattern = null;
 
     this.canvas.tabIndex = 0;
     UI.ARIAUtils.setLabel(this.canvas, i18nString(UIStrings.flameChart));
@@ -256,16 +255,13 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.dispatchEventToListeners(Events.EntryHighlighted, -1);
   }
 
-  private createCandyStripePattern(): void {
+  private createCandyStripePattern(): CanvasPattern {
     // Set the candy stripe pattern to 17px so it repeats well.
     const size = 17;
-    this.candyStripeCanvas.width = size;
-    this.candyStripeCanvas.height = size;
-
-    const ctx = this.candyStripeCanvas.getContext('2d');
-    if (!ctx) {
-      return;
-    }
+    const candyStripeCanvas = document.createElement('canvas');
+    candyStripeCanvas.width = size;
+    candyStripeCanvas.height = size;
+    const ctx = candyStripeCanvas.getContext('2d') as CanvasRenderingContext2D;
 
     // Rotate the stripe by 45deg to the right.
     ctx.translate(size * 0.5, size * 0.5);
@@ -276,6 +272,9 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     for (let x = -size; x < size * 2; x += 3) {
       ctx.fillRect(x, -size, 1, size * 3);
     }
+    // Because we're using a canvas, we know createPattern won't return null
+    // https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-createpattern-dev
+    return ctx.createPattern(candyStripeCanvas, 'repeat') as CanvasPattern;
   }
 
   private resetCanvas(): void {
@@ -1079,7 +1078,6 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
         sortDecorationsForRenderingOrder(decorationsForEvent);
       }
       const entryStartTime = entryStartTimes[entryIndex];
-      const candyStripePattern = context.createPattern(this.candyStripeCanvas, 'repeat');
 
       for (const decoration of decorationsForEvent) {
         const duration = entryTotalTimes[entryIndex];
@@ -1089,6 +1087,9 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
             // If the duration of the event is less than the start time to draw the candy stripes, then we have no stripes to draw.
             continue;
           }
+          if (!this.candyStripePattern) {
+            this.candyStripePattern = this.createCandyStripePattern();
+          }
 
           context.save();
           context.beginPath();
@@ -1100,10 +1101,8 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
             startX: barXStart,
             width: barXEnd - barXStart,
           });
-          if (candyStripePattern) {
-            context.fillStyle = candyStripePattern;
-            context.fill();
-          }
+          context.fillStyle = this.candyStripePattern;
+          context.fill();
           context.restore();
 
         } else if (decoration.type === 'WARNING_TRIANGLE') {