From 1c91d283907db2d62077b96b2783503351806aa9 Mon Sep 17 00:00:00 2001
From: Simek <gosimek@gmail.com>
Date: Mon, 24 Jan 2022 08:51:02 -0800
Subject: [PATCH] improve dev perf canvas readability (#3333)

Summary:
This PR updates the performance Canvas widgets readability in Dev mode.

Currently, for unknown for me reason, the text was rendered with stroke not fill, which results in blurry text.

Also the color of texts and plot in light mode have not enough contrast in comparison to the background. I have tried to use `theme` in there, but unfortunately the CSS variables are not available in the Canvas context and using those values leads to always black text.

## Changelog

* improve the performance canvas widgets readability in Development mode

Pull Request resolved: https://github.com/facebook/flipper/pull/3333

Test Plan:
The change has been testes by running the desktop Flipper app locally from source.

## Preview (before & after)

#### Dark Mode
<img width="189" alt="Screenshot 2022-01-23 at 17 46 20" align="left" src="https://user-images.githubusercontent.com/719641/150689046-28895487-d488-440f-9440-f792daeca86f.png">
<img width="189" alt="Screenshot 2022-01-23 at 17 54 59" src="https://user-images.githubusercontent.com/719641/150689179-5ef96ca3-78e0-4995-b60c-317a87082604.png">

#### Light Mode
<img width="189" alt="Screenshot 2022-01-23 at 17 46 27" align="left" src="https://user-images.githubusercontent.com/719641/150689061-a3264961-390a-4182-bd81-ba84b6e4979f.png">
<img width="189" alt="Screenshot 2022-01-23 at 17 55 09" src="https://user-images.githubusercontent.com/719641/150689188-17efc7d9-7add-409e-af3b-befa5fbba0bc.png">

Reviewed By: aigoncharov

Differential Revision: D33738722

Pulled By: lblasa

fbshipit-source-id: b992ecacd31bb6aa2a53885ca6dcc858fa510775
---
 desktop/flipper-ui-core/src/chrome/FpsGraph.tsx  | 16 +++++++---------
 .../flipper-ui-core/src/chrome/NetworkGraph.tsx  |  4 ++--
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/desktop/flipper-ui-core/src/chrome/FpsGraph.tsx b/desktop/flipper-ui-core/src/chrome/FpsGraph.tsx
index 787f481fc..83838c5f2 100644
--- a/desktop/flipper-ui-core/src/chrome/FpsGraph.tsx
+++ b/desktop/flipper-ui-core/src/chrome/FpsGraph.tsx
@@ -30,7 +30,7 @@ export default function FpsGraph({sampleRate = 200}: {sampleRate?: number}) {
     const interval = setInterval(() => {
       const ctx = canvasRef.current!.getContext('2d')!;
       ctx.clearRect(0, 0, width, height);
-      ctx.strokeStyle = '#ddd';
+      ctx.fillStyle = '#bbb';
 
       const now = Date.now();
       let missedFrames = 0;
@@ -47,13 +47,11 @@ export default function FpsGraph({sampleRate = 200}: {sampleRate?: number}) {
       fps.shift();
 
       ctx.font = 'lighter 10px arial';
-      ctx.strokeText(
-        '' +
-          (missedFrames
-            ? // if we were chocked, show FPS based on frames missed
-              Math.floor((1000 / sampleRate) * missedFrames)
-            : lastFps) +
-          ' fps',
+      ctx.fillText(
+        (missedFrames
+          ? // if we were chocked, show FPS based on frames missed
+            Math.floor((1000 / sampleRate) * missedFrames)
+          : lastFps) + ' fps',
         0,
         height - 4,
       );
@@ -65,7 +63,7 @@ export default function FpsGraph({sampleRate = 200}: {sampleRate?: number}) {
         ctx.lineTo(idx, graphHeight - (Math.min(60, num) / 60) * graphHeight);
       });
 
-      ctx.strokeStyle = missedFrames ? '#ff0000' : '#ddd';
+      ctx.strokeStyle = missedFrames ? '#ff0000' : '#bbb';
 
       ctx.stroke();
       lastFps = 60;
diff --git a/desktop/flipper-ui-core/src/chrome/NetworkGraph.tsx b/desktop/flipper-ui-core/src/chrome/NetworkGraph.tsx
index 05245ef14..c2469c541 100644
--- a/desktop/flipper-ui-core/src/chrome/NetworkGraph.tsx
+++ b/desktop/flipper-ui-core/src/chrome/NetworkGraph.tsx
@@ -43,9 +43,9 @@ export default function NetworkGraph() {
 
       const ctx = canvasRef.current!.getContext('2d')!;
       ctx.clearRect(0, 0, width, height);
-      ctx.strokeStyle = kiloBytesPerSecond >= 1000 ? '#f00' : '#ddd';
+      ctx.fillStyle = kiloBytesPerSecond >= 1000 ? '#f00' : '#bbb';
       ctx.font = 'lighter 10px arial';
-      ctx.strokeText(`${kiloBytesPerSecond} kB/s`, 0, height - 4);
+      ctx.fillText(`${kiloBytesPerSecond} kB/s`, 0, height - 4);
 
       setHoverText(
         'Total data traffic per plugin:\n\n' +