Adjust highlighting on window resize
Dan committed
Apr 13, 2019 at 18:19 UTC
6d53a2ec100c8d30ddb4ac180ab90a4320144a94
1 file changed
+22
-12
src/devtools/views/Components/Tree.js
+22
-12
@@ -333,23 +333,33 @@ function InnerElementType({ style, ...rest }) {
333
// What we can do instead, is passively measure the width of the current rows,
334
// and ensure that once we've grown to a new max size, we don't shrink below it.
335
// This improves the user experience when scrolling between wide and narrow rows.
336
- // We shouldn't retain this width across different conceptual trees though,
337
- // so when the user opens the "owners tree" view, we should discard the previous width.
336
const divRef = useRef<HTMLDivElement | null>(null);
339
- const minWidthRef = useRef<number | null>(null);
340
- const minWidth =
341
- ownerStack.length > 0 || minWidthRef.current === null
342
- ? '100%'
343
- : minWidthRef.current;
337
+ const [minWidth, setMinWidth] = useState(null);
338
useEffect(() => {
339
if (divRef.current !== null) {
346
- minWidthRef.current = Math.max(
347
- minWidthRef.current || 0,
348
- divRef.current.offsetWidth
349
- );
340
+ const measuredWidth = divRef.current.offsetWidth;
341
+ setMinWidth(w => Math.max(w || 0, measuredWidth));
342
}
343
});
344
345
+ // When the window is resized, forget the specific min width.
346
+ // This will cause a render with 100% min-width, a measurement
347
+ // in an effect, and a second render where we know the width.
348
+ useEffect(() => {
349
+ const invalidateMinWidth = () => setMinWidth(null);
350
+ window.addEventListener('resize', invalidateMinWidth);
351
+ return () => window.removeEventListener('resize', invalidateMinWidth);
352
+ }, []);
353
+
354
+ // We shouldn't retain this width across different conceptual trees though,
355
+ // so when the user opens the "owners tree" view, we should discard the previous width.
356
+ const hasOwnerStack = ownerStack.length > 0;
357
+ const [prevHasOwnerStack, setPrevHasOwnerStack] = useState(hasOwnerStack);
358
+ if (hasOwnerStack !== prevHasOwnerStack) {
359
+ setPrevHasOwnerStack(hasOwnerStack);
360
+ setMinWidth(null);
361
+ }
362
+
363
// This style override enables the background color to fill the full visible width,
364
// when combined with the CSS tweaks in Element.
365
// A lot of options were considered; this seemed the one that requires the least code.
@@ -360,7 +370,7 @@ function InnerElementType({ style, ...rest }) {
370
style={{
371
...style,
372
display: 'inline-block',
363
- minWidth,
373
+ minWidth: minWidth || '100%',
374
width: undefined,
375
}}
376
ref={divRef}