diff --git a/desktop/flipper-ui-core/src/chrome/ScreenCaptureButtons.tsx b/desktop/flipper-ui-core/src/chrome/ScreenCaptureButtons.tsx
index b32028fee..63ff33a6c 100644
--- a/desktop/flipper-ui-core/src/chrome/ScreenCaptureButtons.tsx
+++ b/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 (
+
+ );
+}
+
+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 (
- <>
- }
- title="Take Screenshot"
- type="ghost"
- onClick={handleScreenshot}
- disabled={
- !selectedDevice ||
- !selectedDevice.description.features.screenshotAvailable
- }
- loading={isTakingScreenshot}
- />
- }
- title="Make Screen Recording"
- type={isRecording ? 'primary' : 'ghost'}
- onClick={handleRecording}
- disabled={
- !selectedDevice ||
- !selectedDevice.description.features.screenCaptureAvailable
- }
- danger={isRecording}
- />
- >
+
);
}
diff --git a/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx b/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx
index 5f08e8cef..c6db3e3a7 100644
--- a/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx
+++ b/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');
}}
/>
-
-
-
+
+
+
{getRenderHostInstance().GK('flipper_connection_troubleshoot') && (
;
+}
+
function LoginConnectivityButton() {
const loggedIn = useValue(currentUser());
const user = useStore((state) => state.user);
diff --git a/desktop/flipper-ui-core/src/sandy-chrome/appinspect/AppInspect.tsx b/desktop/flipper-ui-core/src/sandy-chrome/appinspect/AppInspect.tsx
index 052223d63..fbb43bc83 100644
--- a/desktop/flipper-ui-core/src/sandy-chrome/appinspect/AppInspect.tsx
+++ b/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
-
{renderStatusMessage(
isDeviceConnected,
activeDevice,
@@ -68,7 +65,6 @@ export function AppInspect() {
{isDeviceConnected && activeDevice && (
-