screenshot / screen recording buttons

Reviewed By: lblasa

Differential Revision: D47443316

fbshipit-source-id: 01a7d0d54cda8f8425bcbeb95047aa3aa5857cc8

desktop/flipper-ui-core/src/chrome/ScreenCaptureButtons.tsx

@@ -14,15 +14,15 @@ import {CameraOutlined, VideoCameraOutlined} from '@ant-design/icons';
 import {useStore} from '../utils/useStore';
 import {getRenderHostInstance} from 'flipper-frontend-core';
 import {path} from 'flipper-plugin';
+import {NavbarButton} from '../sandy-chrome/Navbar';
 
 async function openFile(path: string) {
   getRenderHostInstance().flipperServer.exec('open-file', path);
 }
 
-export default function ScreenCaptureButtons() {
+export function NavbarScreenshotButton() {
   const selectedDevice = useStore((state) => state.connections.selectedDevice);
   const [isTakingScreenshot, setIsTakingScreenshot] = useState(false);
-  const [isRecording, setIsRecording] = useState(false);
 
   const handleScreenshot = useCallback(() => {
     setIsTakingScreenshot(true);
@@ -37,6 +37,24 @@ export default function ScreenCaptureButtons() {
       });
   }, [selectedDevice]);
 
+  return (
+    <NavbarButton
+      icon={CameraOutlined}
+      label="Screenshot"
+      onClick={handleScreenshot}
+      disabled={
+        !selectedDevice ||
+        !selectedDevice.description.features.screenshotAvailable
+      }
+      toggled={isTakingScreenshot}
+    />
+  );
+}
+
+export function NavbarScreenRecordButton() {
+  const selectedDevice = useStore((state) => state.connections.selectedDevice);
+  const [isRecording, setIsRecording] = useState(false);
+
   const handleRecording = useCallback(() => {
     if (!selectedDevice) {
       return;
@@ -68,29 +86,15 @@ export default function ScreenCaptureButtons() {
   }, [selectedDevice, isRecording]);
 
   return (
-    <>
+    <NavbarButton
-      <AntButton
+      icon={VideoCameraOutlined}
-        icon={<CameraOutlined />}
+      label="Record"
-        title="Take Screenshot"
+      onClick={handleRecording}
-        type="ghost"
+      disabled={
-        onClick={handleScreenshot}
+        !selectedDevice ||
-        disabled={
+        !selectedDevice.description.features.screenCaptureAvailable
-          !selectedDevice ||
+      }
-          !selectedDevice.description.features.screenshotAvailable
+      toggled={isRecording}
-        }
+    />
-        loading={isTakingScreenshot}
-      />
-      <AntButton
-        icon={<VideoCameraOutlined />}
-        title="Make Screen Recording"
-        type={isRecording ? 'primary' : 'ghost'}
-        onClick={handleRecording}
-        disabled={
-          !selectedDevice ||
-          !selectedDevice.description.features.screenCaptureAvailable
-        }
-        danger={isRecording}
-      />
-    </>
   );
 }

desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx

@@ -36,7 +36,6 @@ import {
   AppstoreAddOutlined,
   BellOutlined,
   BugOutlined,
-  CameraOutlined,
   FileExclamationOutlined,
   LayoutOutlined,
   LoginOutlined,
@@ -44,7 +43,6 @@ import {
   MobileOutlined,
   RocketOutlined,
   SettingOutlined,
-  VideoCameraOutlined,
   WarningOutlined,
 } from '@ant-design/icons';
 import {
@@ -77,6 +75,11 @@ import {StyleGuide} from './StyleGuide';
 import {openDeeplinkDialog} from '../deeplink';
 import SettingsSheet from '../chrome/SettingsSheet';
 import WelcomeScreen from './WelcomeScreen';
+import {AppSelector} from './appinspect/AppSelector';
+import {
+  NavbarScreenRecordButton,
+  NavbarScreenshotButton,
+} from '../chrome/ScreenCaptureButtons';
 
 export const Navbar = withTrackingScope(function Navbar({
   toplevelSelection,
@@ -103,9 +106,9 @@ export const Navbar = withTrackingScope(function Navbar({
             setToplevelSelection('appinspect');
           }}
         />
-        <button>device picker</button>
+        <DevicePicker />
-        <NavbarButton label="Screenshot" icon={CameraOutlined} />
+        <NavbarScreenshotButton />
-        <NavbarButton label="Record" icon={VideoCameraOutlined} />
+        <NavbarScreenRecordButton />
         <LaunchEmulatorButton />
         {getRenderHostInstance().GK('flipper_connection_troubleshoot') && (
           <ConnectionTroubleshootButton
@@ -423,7 +426,7 @@ const badgeCountClassname = css`
     margin-top: 8px;
   }
 `;
-function NavbarButton({
+export function NavbarButton({
   icon: Icon,
   label,
   toggled = false,
@@ -492,6 +495,10 @@ function NavbarButton({
   }
 }
 
+function DevicePicker() {
+  return <AppSelector />;
+}
+
 function LoginConnectivityButton() {
   const loggedIn = useValue(currentUser());
   const user = useStore((state) => state.user);

desktop/flipper-ui-core/src/sandy-chrome/appinspect/AppInspect.tsx

@@ -12,9 +12,7 @@ import {Typography} from 'antd';
 import {LeftSidebar, SidebarTitle, InfoIcon} from '../LeftSidebar';
 import {Layout, Link, styled} from '../../ui';
 import {theme, useValue} from 'flipper-plugin';
-import {AppSelector} from './AppSelector';
 import {PluginList} from './PluginList';
-import ScreenCaptureButtons from '../../chrome/ScreenCaptureButtons';
 import MetroButton from '../../chrome/MetroButton';
 import {BookmarkSection} from './BookmarkSection';
 import Client from '../../Client';
@@ -56,7 +54,6 @@ export function AppInspect() {
             App Inspect
           </SidebarTitle>
           <Layout.Container padv="small" padh="medium" gap={theme.space.large}>
-            <AppSelector />
             {renderStatusMessage(
               isDeviceConnected,
               activeDevice,
@@ -68,7 +65,6 @@ export function AppInspect() {
             {isDeviceConnected && activeDevice && (
               <Toolbar gap>
                 <MetroButton />
-                <ScreenCaptureButtons />
                 <div style={{flex: 1}} />
                 <PluginActionsMenu />
               </Toolbar>