From ffeb47ed7537d2d9d77bc8f9e664f7d5cb1c8f4a Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Mon, 18 Jan 2021 06:45:17 -0800
Subject: [PATCH] Move title bar functionality to rail (#1816)

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

Now that Sandy is the default in OSS builds as well, we can remove the temporarily title bar and switch to small topbar windows in Electron.

This diff removes any remaining elements in the titlebar

- version number went into the title bar
- the update check warning is shown on top of the bottom section of the left rail (orange triangle)
- the development only perf graphs are moved to the left bar as well and are now aligned vertically.

Reviewed By: jknoxville

Differential Revision: D25805957

fbshipit-source-id: fba4b60c246b8f5d99a93087af31af9ac55defe8
---
 desktop/app/src/chrome/FpsGraph.tsx           | 33 +++++----
 desktop/app/src/chrome/NetworkGraph.tsx       | 17 ++---
 desktop/app/src/chrome/TitleBar.tsx           | 14 +---
 desktop/app/src/chrome/UpdateIndicator.tsx    | 22 ++++--
 desktop/app/src/sandy-chrome/LeftRail.tsx     | 11 +++
 desktop/app/src/sandy-chrome/SandyApp.tsx     |  8 ++-
 .../src/sandy-chrome/TemporarilyTitlebar.tsx  | 67 -------------------
 desktop/app/src/utils/versionString.tsx       | 25 +++++++
 desktop/static/icons.json                     |  2 +
 desktop/static/main.ts                        |  2 -
 10 files changed, 84 insertions(+), 117 deletions(-)
 delete mode 100644 desktop/app/src/sandy-chrome/TemporarilyTitlebar.tsx
 create mode 100644 desktop/app/src/utils/versionString.tsx

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<HTMLCanvasElement>(null);
 
   useEffect(() => {
-    const graphWidth = width - 20;
-    const fps: number[] = new Array<number>(graphWidth).fill(0, 0, graphWidth);
+    const fps: number[] = new Array<number>(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<HTMLCanvasElement>(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<Props, StateFromProps> {
         )}
         <Spacer />
 
-        {!isProduction() && <NetworkGraph height={20} width={60} />}
-        {!isProduction() && <FpsGraph height={20} width={60} />}
-
         {config.showFlipperRating ? <RatingButton /> : null}
-        <Version>{this.props.version + (isProduction() ? '' : '-dev')}</Version>
+        <Version>{getVersionString()}</Version>
 
-        <UpdateIndicator
-          launcherMsg={this.props.launcherMsg}
-          version={this.props.version}
-        />
+        <UpdateIndicator />
 
         <Button
           icon="settings"
diff --git a/desktop/app/src/chrome/UpdateIndicator.tsx b/desktop/app/src/chrome/UpdateIndicator.tsx
index e491f585f..eba31fe53 100644
--- a/desktop/app/src/chrome/UpdateIndicator.tsx
+++ b/desktop/app/src/chrome/UpdateIndicator.tsx
@@ -8,8 +8,8 @@
  */
 
 import {LauncherMsg} from '../reducers/application';
-import {colors, FlexRow, Glyph, styled} from '../ui';
-import Tooltip from '../ui/components/Tooltip';
+import {FlexRow, Glyph, styled} from '../ui';
+import {Tooltip} from 'antd';
 import isProduction from '../utils/isProduction';
 import {
   checkForUpdate,
@@ -20,10 +20,13 @@ import React from 'react';
 import {shell} from 'electron';
 import config from '../utils/processConfig';
 import fbConfig from '../fb-stubs/config';
+import {useStore} from '../utils/useStore';
+import {remote} from 'electron';
+import {theme} from 'flipper-plugin';
+const version = remote.app.getVersion();
 
 const Container = styled(FlexRow)({
   alignItems: 'center',
-  marginLeft: 4,
 });
 
 type Props = {
@@ -38,13 +41,13 @@ type State = {
 function getSeverityColor(severity: 'warning' | 'error'): string {
   switch (severity) {
     case 'warning':
-      return colors.light30;
+      return theme.warningColor;
     case 'error':
-      return colors.cherry;
+      return theme.errorColor;
   }
 }
 
-export default class UpdateIndicator extends React.PureComponent<Props, State> {
+class UpdateIndicatorImpl extends React.PureComponent<Props, State> {
   state = {
     versionCheckResult: {kind: 'up-to-date'} as VersionCheckResult,
   };
@@ -87,7 +90,7 @@ export default class UpdateIndicator extends React.PureComponent<Props, State> {
     );
     return (
       <Tooltip
-        options={{position: 'toLeft'}}
+        placement="right"
         title={`Update to Flipper v${result.version} available. Click to download.`}
         children={container}
       />
@@ -119,3 +122,8 @@ export default class UpdateIndicator extends React.PureComponent<Props, State> {
     );
   }
 }
+
+export default function UpdateIndicator() {
+  const launcherMsg = useStore((state) => state.application.launcherMsg);
+  return <UpdateIndicatorImpl launcherMsg={launcherMsg} version={version} />;
+}
diff --git a/desktop/app/src/sandy-chrome/LeftRail.tsx b/desktop/app/src/sandy-chrome/LeftRail.tsx
index 6569a7878..96f7222c7 100644
--- a/desktop/app/src/sandy-chrome/LeftRail.tsx
+++ b/desktop/app/src/sandy-chrome/LeftRail.tsx
@@ -55,6 +55,10 @@ import {getUser} from '../fb-stubs/user';
 import {SandyRatingButton} from '../chrome/RatingButton';
 import {filterNotifications} from './notification/notificationUtils';
 import {useMemoize} from '../utils/useMemoize';
+import isProduction from '../utils/isProduction';
+import NetworkGraph from '../chrome/NetworkGraph';
+import FpsGraph from '../chrome/FpsGraph';
+import UpdateIndicator from '../chrome/UpdateIndicator';
 
 const LeftRailButtonElem = styled(Button)<{kind?: 'small'}>(({kind}) => ({
   width: kind === 'small' ? 32 : 36,
@@ -154,6 +158,13 @@ export const LeftRail = withTrackingScope(function LeftRail({
           />
         </Layout.Container>
         <Layout.Container center gap={10} padh={6}>
+          {!isProduction() && (
+            <div>
+              <FpsGraph />
+              <NetworkGraph />
+            </div>
+          )}
+          <UpdateIndicator />
           <SandyRatingButton />
           <LaunchEmulatorButton />
           <SetupDoctorButton />
diff --git a/desktop/app/src/sandy-chrome/SandyApp.tsx b/desktop/app/src/sandy-chrome/SandyApp.tsx
index 3f5a0d315..7962b6f6d 100644
--- a/desktop/app/src/sandy-chrome/SandyApp.tsx
+++ b/desktop/app/src/sandy-chrome/SandyApp.tsx
@@ -14,7 +14,6 @@ import {Layout, Sidebar} from '../ui';
 import {theme} from 'flipper-plugin';
 
 import {LeftRail} from './LeftRail';
-import {TemporarilyTitlebar} from './TemporarilyTitlebar';
 import {registerStartupTime} from '../App';
 import {useStore, useDispatch} from '../utils/useStore';
 import {SandyContext} from './SandyContext';
@@ -32,6 +31,8 @@ import {Notification} from './notification/Notification';
 import {SheetRenderer} from '../chrome/SheetRenderer';
 import {hasNewChangesToShow} from '../chrome/ChangelogSheet';
 import {SandyWelcomScreen} from './SandyWelcomeScreen';
+import {getVersionString} from '../utils/versionString';
+import config from '../fb-stubs/config';
 
 export type ToplevelNavItem =
   | 'appinspect'
@@ -85,6 +86,10 @@ export function SandyApp() {
   );
 
   useEffect(() => {
+    document.title = `Flipper (${getVersionString()}${
+      config.isFBBuild ? '@FB' : ''
+    })`;
+
     registerStartupTime(logger);
     if (hasNewChangesToShow(window.localStorage)) {
       dispatch(setActiveSheet(ACTIVE_SHEET_CHANGELOG_RECENT_ONLY));
@@ -104,7 +109,6 @@ export function SandyApp() {
     <SandyContext.Provider value={true}>
       <Layout.Top>
         <>
-          <TemporarilyTitlebar />
           <SheetRenderer logger={logger} />
           <SandyWelcomScreen />
         </>
diff --git a/desktop/app/src/sandy-chrome/TemporarilyTitlebar.tsx b/desktop/app/src/sandy-chrome/TemporarilyTitlebar.tsx
deleted file mode 100644
index 630e87c50..000000000
--- a/desktop/app/src/sandy-chrome/TemporarilyTitlebar.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- */
-
-import React from 'react';
-import {styled, colors} from '../ui';
-import FpsGraph from '../chrome/FpsGraph';
-import NetworkGraph from '../chrome/NetworkGraph';
-import isProduction from '../utils/isProduction';
-import UpdateIndicator from '../chrome/UpdateIndicator';
-import {Version} from '../chrome/TitleBar';
-import {useStore} from '../utils/useStore';
-import {remote} from 'electron';
-import config from '../fb-stubs/config';
-import ReleaseChannel from '../ReleaseChannel';
-
-const version = remote.app.getVersion();
-
-const TemporarilyTitlebarContainer = styled('div')<{focused?: boolean}>(
-  ({focused}) => ({
-    textAlign: 'center',
-    userSelect: 'none',
-    height: '38px',
-    lineHeight: '38px',
-    fontSize: '10pt',
-    color: colors.macOSTitleBarIcon,
-    background: true
-      ? `linear-gradient(to bottom, ${colors.macOSTitleBarBackgroundTop} 0%, ${colors.macOSTitleBarBackgroundBottom} 100%)`
-      : colors.macOSTitleBarBackgroundBlur,
-    borderBottom: `1px solid ${
-      focused ? colors.macOSTitleBarBorder : colors.macOSTitleBarBorderBlur
-    }`,
-    WebkitAppRegion: 'drag',
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  }),
-);
-
-// This component should be dropped, and insetTitlebar should be removed from Electron startup once Sandy is the default
-// But: figure out where to put the graphs, version numbers, flipper rating ets :)
-export function TemporarilyTitlebar() {
-  const launcherMsg = useStore((state) => state.application.launcherMsg);
-  const isFocused = useStore((state) => state.application.windowIsFocused);
-
-  return (
-    <TemporarilyTitlebarContainer focused={isFocused}>
-      [Sandy] Flipper{' '}
-      {!isProduction() && <NetworkGraph height={20} width={60} />}
-      {!isProduction() && <FpsGraph height={20} width={60} />}
-      <Version>
-        {version +
-          (isProduction() ? '' : '-dev') +
-          (config.getReleaseChannel() !== ReleaseChannel.STABLE
-            ? `-${config.getReleaseChannel()}`
-            : '')}
-      </Version>
-      <UpdateIndicator launcherMsg={launcherMsg} version={version} />
-    </TemporarilyTitlebarContainer>
-  );
-}
diff --git a/desktop/app/src/utils/versionString.tsx b/desktop/app/src/utils/versionString.tsx
new file mode 100644
index 000000000..5590bb077
--- /dev/null
+++ b/desktop/app/src/utils/versionString.tsx
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import isProduction from '../utils/isProduction';
+import {remote} from 'electron';
+import config from '../fb-stubs/config';
+import ReleaseChannel from '../ReleaseChannel';
+
+const version = remote.app.getVersion();
+
+export function getVersionString() {
+  return (
+    version +
+    (isProduction() ? '' : '-dev') +
+    (config.getReleaseChannel() !== ReleaseChannel.STABLE
+      ? `-${config.getReleaseChannel()}`
+      : '')
+  );
+}
diff --git a/desktop/static/icons.json b/desktop/static/icons.json
index 851e5816e..9a7722d3e 100644
--- a/desktop/static/icons.json
+++ b/desktop/static/icons.json
@@ -120,6 +120,7 @@
     16
   ],
   "data-table": [
+    12,
     16
   ],
   "desktop": [
@@ -561,6 +562,7 @@
     20
   ],
   "dog": [
+    12,
     16
   ],
   "hub": [
diff --git a/desktop/static/main.ts b/desktop/static/main.ts
index 6ca65ac7f..13a49d61f 100644
--- a/desktop/static/main.ts
+++ b/desktop/static/main.ts
@@ -268,8 +268,6 @@ function createWindow() {
     minWidth: 800,
     minHeight: 600,
     center: true,
-    titleBarStyle: 'hiddenInset',
-    vibrancy: 'sidebar',
     webPreferences: {
       enableRemoteModule: true,
       backgroundThrottling: false,