jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix issue where row backgrounds are not continued when scrolling horizontally

Browse Source 
Summary:
We used flexbox to layout rows in the element inspector. The problem with that is that flexbox cannot nicely grow all its childrens to the largest one. Although we could still see contents thanks to the `overflow: visible` hack, this means that the backgrounds didn't continue when scrolling.

In contrast, tables do grow their children width :)

Also fixed an issue where the AX details tree wasn't scrollable

Reviewed By: cekkaewnumchai

Differential Revision: D21661766

fbshipit-source-id: 6b1d16c7aded8beebdd8a50f3e8ab0d9b8633e02
This commit is contained in:
Michel Weststrate
2020-05-21 03:34:05 -07:00
committed by Facebook GitHub Bot
parent b0ab9b9b98
commit cdd0026e83
2 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
desktop/app/src/ui/components/elements-inspector/elements.tsx
View File

@@ -12,7 +12,6 @@ import {reportInteraction} from '../../../utils/InteractionTracker';
import ContextMenu from '../ContextMenu'; import ContextMenu from '../ContextMenu';
import {PureComponent, ReactElement} from 'react'; import {PureComponent, ReactElement} from 'react';
import FlexRow from '../FlexRow'; import FlexRow from '../FlexRow';
import FlexColumn from '../FlexColumn';
import Glyph from '../Glyph'; import Glyph from '../Glyph';
import {colors} from '../colors'; import {colors} from '../colors';
import Text from '../Text'; import Text from '../Text';
@@ -60,7 +59,6 @@ const ElementsRowContainer = styled(ContextMenu)<any>((props) => ({
flexShrink: 0, flexShrink: 0,
flexWrap: 'nowrap', flexWrap: 'nowrap',
height: ROW_HEIGHT, height: ROW_HEIGHT,
minWidth: '100%',
paddingLeft: (props.level - 1) * 12, paddingLeft: (props.level - 1) * 12,
paddingRight: 20, paddingRight: 20,
position: 'relative', position: 'relative',
@@ -421,7 +419,8 @@ function containsKeyInSearchResults(
return searchResults != undefined && searchResults.matches.has(key); return searchResults != undefined && searchResults.matches.has(key);
} }
const ElementsContainer = styled(FlexColumn)({ const ElementsContainer = styled('div')({
display: 'table',
backgroundColor: colors.white, backgroundColor: colors.white,
minHeight: '100%', minHeight: '100%',
minWidth: '100%', minWidth: '100%',

17
desktop/plugins/layout/index.tsx
View File

@@ -29,6 +29,7 @@ import {
ArchivedDevice, ArchivedDevice,
ToolbarIcon, ToolbarIcon,
Layout, Layout,
Scrollable,
} from 'flipper'; } from 'flipper';
import Inspector from './Inspector'; import Inspector from './Inspector';
import InspectorSidebar from './InspectorSidebar'; import InspectorSidebar from './InspectorSidebar';
@@ -410,14 +411,16 @@ export default class LayoutPlugin extends FlipperPlugin<
); );
const axInspector = this.state.inAXMode ? ( const axInspector = this.state.inAXMode ? (
<FlexRow> <FlexRow style={{height: '100%'}}>
<VerticalRule /> <VerticalRule />
<Inspector <Scrollable>
{...inspectorProps} <Inspector
onSelect={(selectedAXElement) => this.setState({selectedAXElement})} {...inspectorProps}
showsSidebar={true} onSelect={(selectedAXElement) => this.setState({selectedAXElement})}
ax showsSidebar={true}
/> ax
/>
</Scrollable>
</FlexRow> </FlexRow>
) : null; ) : null;