From b0ab9b9b9810d29b6b54540b2e0c046c58efd8b8 Mon Sep 17 00:00:00 2001 From: Michel Weststrate Date: Thu, 21 May 2020 03:34:05 -0700 Subject: [PATCH] Fix Height for Main Layout Inspector Summary: in Layout plugin, scrollbars where often not visible, for example to see the vertical scrollbar, one had to scroll to the horizontal end first. Also introduced the `Scrollable` component to simplify this in the feature and separate the concepts of rendering something large and making it scrollable. This diff cleans up the layout structure and fixes the problem changelog: Fixed several minor layout issues in the Layout plugin Reviewed By: cekkaewnumchai Differential Revision: D21283157 fbshipit-source-id: 81849151475165796c65001616f038a9d6cbdfb2 --- desktop/app/src/ui/components/Scrollable.tsx | 20 ++ .../app/src/ui/components/VerticalRule.tsx | 1 + .../elements-inspector/elements.tsx | 13 +- desktop/app/src/ui/index.tsx | 1 + desktop/plugins/layout/index.tsx | 219 +++++++++--------- 5 files changed, 138 insertions(+), 116 deletions(-) create mode 100644 desktop/app/src/ui/components/Scrollable.tsx diff --git a/desktop/app/src/ui/components/Scrollable.tsx b/desktop/app/src/ui/components/Scrollable.tsx new file mode 100644 index 000000000..d7157f352 --- /dev/null +++ b/desktop/app/src/ui/components/Scrollable.tsx @@ -0,0 +1,20 @@ +/** + * 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 from '@emotion/styled'; + +const Scrollable: React.FC<{children: React.ReactNode}> = styled('div')({ + width: '100%', + height: '100%', + overflow: 'auto', +}); +Scrollable.displayName = 'Scrollable'; + +export default Scrollable; diff --git a/desktop/app/src/ui/components/VerticalRule.tsx b/desktop/app/src/ui/components/VerticalRule.tsx index 944e40b77..3148ed00e 100644 --- a/desktop/app/src/ui/components/VerticalRule.tsx +++ b/desktop/app/src/ui/components/VerticalRule.tsx @@ -13,6 +13,7 @@ const VerticalRule = styled.div({ backgroundColor: '#c9ced4', width: 3, margin: '0', + flexShrink: 0, }); VerticalRule.displayName = 'VerticalRule'; diff --git a/desktop/app/src/ui/components/elements-inspector/elements.tsx b/desktop/app/src/ui/components/elements-inspector/elements.tsx index 89e688810..447738b31 100644 --- a/desktop/app/src/ui/components/elements-inspector/elements.tsx +++ b/desktop/app/src/ui/components/elements-inspector/elements.tsx @@ -19,6 +19,7 @@ import Text from '../Text'; import styled from '@emotion/styled'; import {clipboard, MenuItemConstructorOptions} from 'electron'; import React, {MouseEvent, KeyboardEvent} from 'react'; +import {Scrollable} from '../..'; export const ROW_HEIGHT = 23; @@ -424,17 +425,9 @@ const ElementsContainer = styled(FlexColumn)({ backgroundColor: colors.white, minHeight: '100%', minWidth: '100%', - overflow: 'auto', }); ElementsContainer.displayName = 'Elements:ElementsContainer'; -const ElementsBox = styled(FlexColumn)({ - alignItems: 'flex-start', - flex: 1, - overflow: 'auto', -}); -ElementsBox.displayName = 'Elements:ElementsBox'; - export type DecorateRow = (e: Element) => ReactElement | undefined | null; type ElementsProps = { @@ -710,14 +703,14 @@ export class Elements extends PureComponent { render() { return ( - + {this.state.flatElements.map(this.buildRow)} - + ); } } diff --git a/desktop/app/src/ui/index.tsx b/desktop/app/src/ui/index.tsx index 7dd679ffc..b387d8156 100644 --- a/desktop/app/src/ui/index.tsx +++ b/desktop/app/src/ui/index.tsx @@ -176,4 +176,5 @@ export {default as Info} from './components/Info'; export {default as Bordered} from './components/Bordered'; export {default as AlternatingRows} from './components/AlternatingRows'; export {default as Layout} from './components/Layout'; +export {default as Scrollable} from './components/Scrollable'; export * from './components/Highlight'; diff --git a/desktop/plugins/layout/index.tsx b/desktop/plugins/layout/index.tsx index c0fa32c46..0ec1f8f01 100644 --- a/desktop/plugins/layout/index.tsx +++ b/desktop/plugins/layout/index.tsx @@ -12,7 +12,6 @@ import { Element, ElementSearchResultSet, PluginClient, - FlexColumn, FlexRow, FlipperPlugin, Toolbar, @@ -29,6 +28,7 @@ import { ReduxState, ArchivedDevice, ToolbarIcon, + Layout, } from 'flipper'; import Inspector from './Inspector'; import InspectorSidebar from './InspectorSidebar'; @@ -80,7 +80,11 @@ const FlipperADButton = styled(Button)({ type ClientGetNodesCalls = 'getNodes' | 'getAXNodes'; type ClientMethodCalls = 'getRoot' | 'getAXRoot' | ClientGetNodesCalls; -export default class Layout extends FlipperPlugin { +export default class LayoutPlugin extends FlipperPlugin< + State, + any, + PersistedState +> { FlipperADBar() { return ( @@ -122,7 +126,7 @@ export default class Layout extends FlipperPlugin { if (rootElement) { statusUpdate && statusUpdate('Fetching Child Nodes...'); - await Layout.getAllNodes( + await LayoutPlugin.getAllNodes( rootElement, elements, callClient, @@ -133,7 +137,7 @@ export default class Layout extends FlipperPlugin { const AXelements: ElementMap = {}; if (rootAXElement) { statusUpdate && statusUpdate('Fetching Child AX Nodes...'); - await Layout.getAllNodes( + await LayoutPlugin.getAllNodes( rootAXElement, AXelements, callClient, @@ -167,7 +171,7 @@ export default class Layout extends FlipperPlugin { async ({elements}: {elements: Array}) => { await Promise.all( elements.map(async (elem) => { - await Layout.getAllNodes( + await LayoutPlugin.getAllNodes( elem, nodeMap, callClient, @@ -333,7 +337,7 @@ export default class Layout extends FlipperPlugin { ax: this.state.inAXMode, }); }; - showFlipperADBar: boolean = false; + showFlipperADBar: boolean = true; getScreenDimensions(): {width: number; height: number} | null { if (this.state.screenDimensions) { @@ -405,115 +409,118 @@ export default class Layout extends FlipperPlugin { /> ); - const axInspector = this.state.inAXMode && ( - this.setState({selectedAXElement})} - showsSidebar={true} - ax - /> - ); - - const divider = this.state.inAXMode && ; + const axInspector = this.state.inAXMode ? ( + + + this.setState({selectedAXElement})} + showsSidebar={true} + ax + /> + + ) : null; const showAnalyzeYogaPerformanceButton = GK.get('flipper_yogaperformance'); const screenDimensions = this.getScreenDimensions(); + if (!this.state.init) { + return null; + } return ( - - {this.state.init && ( - <> - - {!this.props.isArchivedDevice && ( - - )} - {this.realClient.query.os === 'Android' && ( - - )} - {!this.props.isArchivedDevice && ( - - )} - {this.props.isArchivedDevice && - this.state.visualizerScreenshot && ( - - )} + <> + + + {!this.props.isArchivedDevice && ( + + )} + {this.realClient.query.os === 'Android' && ( + + )} + {!this.props.isArchivedDevice && ( + + )} + {this.props.isArchivedDevice && this.state.visualizerScreenshot && ( + + )} - - this.setState({searchResults}) - } - inAXMode={this.state.inAXMode} - initialQuery={this.props.deepLinkPayload} - /> - - + + this.setState({searchResults}) + } + inAXMode={this.state.inAXMode} + initialQuery={this.props.deepLinkPayload} + /> + + + {inspector} - {divider} {axInspector} - - {this.showFlipperADBar && this.FlipperADBar()} - - - {showAnalyzeYogaPerformanceButton && - element && - element.decoration === 'litho' ? ( - - ) : null} - - {this.state.visualizerWindow && - screenDimensions && - (this.state.visualizerScreenshot ? ( - - ) : ( - 'Loading...' - ))} - - )} - + + {this.showFlipperADBar ? this.FlipperADBar() : null} + + + + + + {showAnalyzeYogaPerformanceButton && + element && + element.decoration === 'litho' ? ( + + ) : null} + + {this.state.visualizerWindow && + screenDimensions && + (this.state.visualizerScreenshot ? ( + + ) : ( + 'Loading...' + ))} + ); } }