Remember max Tree width as new nested items are rendered
Brian Vaughn committed
Apr 9, 2019 at 10:58 UTC
49f6a22b5b8a1b7d5e2a774262357e2992ad0ca0
1 file changed
+22
-1
src/devtools/views/Components/Tree.js
+22
-1
@@ -161,6 +161,7 @@ export default function Tree(props: Props) {
161
function InnerElementType({ style, ...rest }) {
162
const {
163
numElements,
164
+ ownerStack,
165
selectedElementID,
166
selectedElementIndex,
167
selectElementAtIndex,
@@ -189,6 +190,25 @@ function InnerElementType({ style, ...rest }) {
190
[selectedElementID, selectOwner]
191
);
192
193
+ // The list may need to scroll horizontally due to deeply nested elements.
194
+ // We don't know the maximum scroll width up front, because we're windowing.
195
+ // What we can do instead, is passively measure the width of the current rows,
196
+ // and ensure that once we've grown to a new max size, we don't shrink below it.
197
+ // This improves the user experience when scrolling between wide and narrow rows.
198
+ // We shouldn't retain this width across different conceptual trees though,
199
+ // so when the user opens the "owners tree" view, we should discard the previous width.
200
+ const divRef = useRef<HTMLDivElement | null>(null);
201
+ const minWidthRef = useRef<number>(parseInt(style.width, 10));
202
+ const minWidth = ownerStack.length > 0 ? '100%' : minWidthRef.current;
203
+ useEffect(() => {
204
+ if (divRef.current !== null) {
205
+ minWidthRef.current = Math.max(
206
+ minWidthRef.current,
207
+ divRef.current.offsetWidth
208
+ );
209
+ }
210
+ });
211
+
212
// This style override enables the background color to fill the full visible width,
213
// when combined with the CSS tweaks in Element.
214
// A lot of options were considered; this seemed the one that requires the least code.
@@ -201,9 +221,10 @@ function InnerElementType({ style, ...rest }) {
221
style={{
222
...style,
223
display: 'inline-block',
204
- minWidth: '100%',
224
+ minWidth,
225
width: undefined,
226
}}
227
+ ref={divRef}
228
tabIndex={0}
229
{...rest}
230
/>