diff --git a/desktop/app/src/chrome/FpsGraph.tsx b/desktop/app/src/chrome/FpsGraph.tsx index befb7c5ae..b39a33c8a 100644 --- a/desktop/app/src/chrome/FpsGraph.tsx +++ b/desktop/app/src/chrome/FpsGraph.tsx @@ -10,20 +10,15 @@ import React, {useEffect, useRef} from 'react'; import {fpsEmitter} from '../dispatcher/tracking'; -export default function FpsGraph({ - width, - height, - sampleRate = 200, -}: { - width: number; - height: number; - sampleRate?: number; -}) { +const width = 36; +const height = 36; +const graphHeight = 20; + +export default function FpsGraph({sampleRate = 200}: {sampleRate?: number}) { const canvasRef = useRef(null); useEffect(() => { - const graphWidth = width - 20; - const fps: number[] = new Array(graphWidth).fill(0, 0, graphWidth); + const fps: number[] = new Array(width).fill(0, 0, width); let lastFps = 0; let lastDraw = Date.now(); @@ -35,7 +30,7 @@ export default function FpsGraph({ const interval = setInterval(() => { const ctx = canvasRef.current!.getContext('2d')!; ctx.clearRect(0, 0, width, height); - ctx.strokeStyle = '#ccc'; + ctx.strokeStyle = '#ddd'; const now = Date.now(); let missedFrames = 0; @@ -51,24 +46,26 @@ export default function FpsGraph({ fps.push(lastFps); 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), - width - 15, - 5 + height / 2, + : lastFps) + + ' fps', + 0, + height - 4, ); - ctx.beginPath(); ctx.moveTo(0, height); + ctx.beginPath(); ctx.lineWidth = 1; fps.forEach((num, idx) => { - ctx.lineTo(idx, height - (Math.min(60, num) / 60) * height); + ctx.lineTo(idx, graphHeight - (Math.min(60, num) / 60) * graphHeight); }); - ctx.strokeStyle = missedFrames ? '#ff0000' : '#ccc'; + ctx.strokeStyle = missedFrames ? '#ff0000' : '#ddd'; ctx.stroke(); lastFps = 60; diff --git a/desktop/app/src/chrome/NetworkGraph.tsx b/desktop/app/src/chrome/NetworkGraph.tsx index 3f642eaca..10c7e125d 100644 --- a/desktop/app/src/chrome/NetworkGraph.tsx +++ b/desktop/app/src/chrome/NetworkGraph.tsx @@ -10,13 +10,10 @@ import React, {useEffect, useRef, useState} from 'react'; import {onBytesReceived} from '../dispatcher/tracking'; -export default function NetworkGraph({ - width, - height, -}: { - width: number; - height: number; -}) { +const height = 16; +const width = 36; + +export default function NetworkGraph() { const canvasRef = useRef(null); const lastTime = useRef(performance.now()); const lastBytes = useRef(0); @@ -46,9 +43,9 @@ export default function NetworkGraph({ const ctx = canvasRef.current!.getContext('2d')!; ctx.clearRect(0, 0, width, height); - ctx.strokeStyle = kiloBytesPerSecond >= 1000 ? '#f00' : '#ccc'; - ctx.textAlign = 'end'; - ctx.strokeText(`${kiloBytesPerSecond} kB/s`, width - 5, 5 + height / 2); + ctx.strokeStyle = kiloBytesPerSecond >= 1000 ? '#f00' : '#ddd'; + ctx.font = 'lighter 10px arial'; + ctx.strokeText(`${kiloBytesPerSecond} kB/s`, 0, height - 4); setHoverText( 'Total data traffic per plugin:\n\n' + diff --git a/desktop/app/src/chrome/TitleBar.tsx b/desktop/app/src/chrome/TitleBar.tsx index c409545fc..1bf771958 100644 --- a/desktop/app/src/chrome/TitleBar.tsx +++ b/desktop/app/src/chrome/TitleBar.tsx @@ -35,15 +35,13 @@ import {LocationsButton} from './LocationsButton'; import ScreenCaptureButtons from './ScreenCaptureButtons'; import UpdateIndicator from './UpdateIndicator'; import config from '../fb-stubs/config'; -import isProduction from '../utils/isProduction'; import {clipboard} from 'electron'; import React from 'react'; import {State} from '../reducers'; import {reportUsage} from '../utils/metrics'; -import FpsGraph from './FpsGraph'; -import NetworkGraph from './NetworkGraph'; import MetroButton from './MetroButton'; import {navPluginStateSelector} from './LocationsButton'; +import {getVersionString} from '../utils/versionString'; const AppTitleBar = styled(FlexRow)<{focused?: boolean}>(({focused}) => ({ userSelect: 'none', @@ -168,16 +166,10 @@ class TitleBar extends React.Component { )} - {!isProduction() && } - {!isProduction() && } - {config.showFlipperRating ? : null} - {this.props.version + (isProduction() ? '' : '-dev')} + {getVersionString()} - +