Add inefficient filling of frames matching query

jlfwong · Aug 3, 2020 · 39b18df · 39b18df
1 parent 7cb09df
commit 39b18df
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 24 deletions.
diff --git a/src/views/flamechart-pan-zoom-view.tsx b/src/views/flamechart-pan-zoom-view.tsx
@@ -296,10 +296,6 @@ export class FlamechartPanZoomView extends Component<FlamechartPanZoomViewProps,
       }
     }
 
-    for (let frame of this.props.flamechart.getLayers()[0] || []) {
-      renderFrameLabelAndChildren(frame)
-    }
-
     const frameOutlineWidth = 2 * window.devicePixelRatio
     ctx.strokeStyle = Colors.PALE_DARK_BLUE
     ctx.lineWidth = frameOutlineWidth
@@ -321,37 +317,39 @@ export class FlamechartPanZoomView extends Component<FlamechartPanZoomViewProps,
       if (configSpaceBounds.hasIntersectionWith(this.props.configSpaceViewportRect)) {
         let outlineColor: string | null = null
 
+        if (this.props.searchResults?.getMatchForFrame(frame.node.frame)) {
+          ctx.fillStyle = Colors.ORANGE
+
+          // TODO(jlfwong): This is really inefficient. Fix it!
+          const physicalRectBounds = configToPhysical.transformRect(configSpaceBounds)
+          ctx.fillRect(
+            Math.round(physicalRectBounds.left() + frameOutlineWidth / 2),
+            Math.round(physicalRectBounds.top() + frameOutlineWidth / 2),
+            Math.round(Math.max(0, physicalRectBounds.width() - frameOutlineWidth)),
+            Math.round(Math.max(0, physicalRectBounds.height() - frameOutlineWidth)),
+          )
+        }
+
         if (this.props.selectedNode != null && frame.node.frame === this.props.selectedNode.frame) {
           if (frame.node === this.props.selectedNode) {
             outlineColor = Colors.DARK_BLUE
           } else if (ctx.strokeStyle !== Colors.PALE_DARK_BLUE) {
             outlineColor = Colors.PALE_DARK_BLUE
           }
-        } else {
-          if (this.props.searchResults?.getMatchForFrame(frame.node.frame)) {
-            outlineColor = Colors.YELLOW
-          }
-        }
 
-        if (outlineColor != null) {
-          if (ctx.strokeStyle !== outlineColor) {
-            // If the outline color changed, stroke the existing path
-            // constructed by previous ctx.rect calls, then update the stroke
-            // style before drawing the next one.
-            ctx.stroke()
-            ctx.beginPath()
+          if (outlineColor != null) {
+            // TODO(jlfwong): This is really inefficient. Fix it!
+            const physicalRectBounds = configToPhysical.transformRect(configSpaceBounds)
             ctx.strokeStyle = outlineColor
+            ctx.strokeRect(
+              Math.round(physicalRectBounds.left() + 1 + frameOutlineWidth / 2),
+              Math.round(physicalRectBounds.top() + 1 + frameOutlineWidth / 2),
+              Math.round(Math.max(0, physicalRectBounds.width() - 2 - frameOutlineWidth)),
+              Math.round(Math.max(0, physicalRectBounds.height() - 2 - frameOutlineWidth)),
+            )
           }
-          const physicalRectBounds = configToPhysical.transformRect(configSpaceBounds)
-          ctx.rect(
-            Math.round(physicalRectBounds.left() + 1 + frameOutlineWidth / 2),
-            Math.round(physicalRectBounds.top() + 1 + frameOutlineWidth / 2),
-            Math.round(Math.max(0, physicalRectBounds.width() - 2 - frameOutlineWidth)),
-            Math.round(Math.max(0, physicalRectBounds.height() - 2 - frameOutlineWidth)),
-          )
         }
       }
-
       for (let child of frame.children) {
         renderSpecialFrameOutlines(child, depth + 1)
       }
@@ -363,6 +361,10 @@ export class FlamechartPanZoomView extends Component<FlamechartPanZoomViewProps,
     }
     ctx.stroke()
 
+    for (let frame of this.props.flamechart.getLayers()[0] || []) {
+      renderFrameLabelAndChildren(frame)
+    }
+
     this.renderTimeIndicators()
   }
 

diff --git a/src/views/style.ts b/src/views/style.ts
@@ -23,6 +23,7 @@ export enum Colors {
   GREEN = '#6FCF97',
   TRANSPARENT_GREEN = 'rgba(111, 207, 151, 0.2)',
   YELLOW = '#FEDC62',
+  ORANGE = '#FFAC02',
 }
 
 export enum Sizes {