jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve dev perf canvas readability (#3333)

Browse Source 
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
This commit is contained in:
Simek
2022-01-24 08:51:02 -08:00
committed by Facebook GitHub Bot
parent aaddb9b65d
commit 1c91d28390
2 changed files with 9 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
desktop/flipper-ui-core/src/chrome/FpsGraph.tsx
View File

@@ -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;

4
desktop/flipper-ui-core/src/chrome/NetworkGraph.tsx
View File

@@ -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' +