Dont show layout tab for android

Summary: Feedback from michel, It is always empty for android  so dont show it

Reviewed By: elboman

Differential Revision: D46152985

fbshipit-source-id: 6c4f1d499ddb8916fdae6015cd57e158a0c1f182

desktop/plugins/public/ui-debugger/components/main.tsx

@@ -106,6 +106,7 @@ export function Component() {
                 </ResizablePanel>
                 <DetailSidebar width={350}>
                   <Inspector
+                    os={instance.os}
                     metadata={metadata}
                     nodes={nodes}
                     showExtra={openBottomPanelWithContent}

desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx

@@ -10,7 +10,15 @@
 import React, {ReactNode} from 'react';
 // eslint-disable-next-line rulesdir/no-restricted-imports-clone
 import {Glyph} from 'flipper';
-import {Layout, Tab, Tabs, theme, usePlugin, useValue} from 'flipper-plugin';
+import {
+  DeviceOS,
+  Layout,
+  Tab,
+  Tabs,
+  theme,
+  usePlugin,
+  useValue,
+} from 'flipper-plugin';
 import {Id, Metadata, MetadataId, UINode} from '../../types';
 import {IdentityInspector} from './inspector/IdentityInspector';
 import {AttributesInspector} from './inspector/AttributesInspector';
@@ -20,12 +28,18 @@ import {plugin} from '../../index';
 import {FrameworkEventsInspector} from './inspector/FrameworkEventsInspector';
 
 type Props = {
+  os: DeviceOS;
   nodes: Map<Id, UINode>;
   metadata: Map<MetadataId, Metadata>;
   showExtra: (element: ReactNode) => void;
 };
 
-export const Inspector: React.FC<Props> = ({nodes, metadata, showExtra}) => {
+export const Inspector: React.FC<Props> = ({
+  os,
+  nodes,
+  metadata,
+  showExtra,
+}) => {
   const instance = usePlugin(plugin);
   const selectedNodeId = useValue(instance.uiState.selectedNode);
   const frameworkEvents = useValue(instance.frameworkEvents);
@@ -69,25 +83,27 @@ export const Inspector: React.FC<Props> = ({nodes, metadata, showExtra}) => {
             metadata={metadata}
           />
         </Tab>
-        <Tab
-          key={'layout'}
-          tab={
-            <Tooltip title="Layout">
-              <Layout.Horizontal center>
-                <Glyph
-                  name="square-ruler"
-                  size={16}
-                  color={theme.primaryColor}
-                />
-              </Layout.Horizontal>
-            </Tooltip>
-          }>
-          <AttributesInspector
-            mode="layout"
-            node={selectedNode}
-            metadata={metadata}
-          />
-        </Tab>
+        {os !== 'Android' && (
+          <Tab
+            key={'layout'}
+            tab={
+              <Tooltip title="Layout">
+                <Layout.Horizontal center>
+                  <Glyph
+                    name="square-ruler"
+                    size={16}
+                    color={theme.primaryColor}
+                  />
+                </Layout.Horizontal>
+              </Tooltip>
+            }>
+            <AttributesInspector
+              mode="layout"
+              node={selectedNode}
+              metadata={metadata}
+            />
+          </Tab>
+        )}
         {selectedFrameworkEvents && (
           <Tab
             key={'events'}

desktop/plugins/public/ui-debugger/index.tsx

@@ -64,7 +64,7 @@ export function plugin(client: PluginClient<Events>) {
   const streamInterceptor = getStreamInterceptor();
 
   let lastFrameTime = 0;
-  const device = client.device.os;
+  const os = client.device.os;
 
   client.onMessage('init', (event) => {
     rootId.set(event.rootId);
@@ -354,7 +354,7 @@ export function plugin(client: PluginClient<Events>) {
     perfEvents,
     setPlayPause,
     queryClient,
-    device,
+    os,
   };
 }