Added debounce and animation for resize
Brian Vaughn committed
Jun 1, 2019 at 11:16 UTC
b5f89988597cf3613edeb424307a84d9334234ac
4 files changed
+19
-35
src/devtools/views/Components/Element.css
+1
@@ -68,6 +68,7 @@
68
69
.Padding {
70
width: 0.25rem;
71
+ min-width: 0.25rem; /* Keep padding from shrinking when it's near the right */
72
}
73
74
.Badge {
src/devtools/views/Components/Element.js
+2
-2
@@ -122,8 +122,8 @@ export default function ElementView({ data, index, style }: Props) {
122
// We must use padding rather than margin/left because of the selected background color.
123
paddingLeft: `calc(${depth} * var(--indentation-size))`,
124
125
- // TODO Animate horizontal axis compression so it's smoother.
126
- // transition: 'padding-left 250ms',
125
+ // Animate horizontal axis compression so it's smoother.
126
+ transition: 'padding-left 150ms',
127
}}
128
data-depth={depth}
129
>
src/devtools/views/Components/Tree.css
+3
@@ -5,6 +5,9 @@
5
display: flex;
6
flex-direction: column;
7
border-top: 1px solid var(--color-border);
8
+
9
+ /* Default size will be adjusted by Tree after scrolling */
10
+ --indentation-size: 12px;
11
}
12
13
.List {
src/devtools/views/Components/Tree.js
+13
-33
@@ -322,7 +322,6 @@ export default function Tree(props: Props) {
322
);
323
}
324
325
-/* TODO Debounce so newly added rows animate with pre-existing ones
325
let debounceTimeoutID: TimeoutID | null = null;
326
function debounce(callback: () => void, delay: number) {
327
if (debounceTimeoutID !== null) {
@@ -330,7 +329,6 @@ function debounce(callback: () => void, delay: number) {
329
}
330
debounceTimeoutID = setTimeout(callback, delay);
331
}
333
-*/
332
333
function updateIndentationSizeVar(
334
innerDiv: HTMLDivElement,
@@ -343,12 +341,11 @@ function updateIndentationSizeVar(
341
for (let child of innerDiv.children) {
342
const depth = parseInt(child.getAttribute('data-depth'), 10) || 0;
343
344
+ let childWidth: number = 0;
345
+
346
const cachedChildWidth = cachedChildWidths.get(child);
347
if (cachedChildWidth != null) {
348
- maxChildWidth = Math.max(
349
- maxChildWidth,
350
- indentationSizeRef.current * depth + cachedChildWidth
351
- );
348
+ childWidth = cachedChildWidth;
349
} else {
350
const { firstElementChild, lastElementChild } = child;
351
@@ -356,16 +353,15 @@ function updateIndentationSizeVar(
353
if (firstElementChild != null && lastElementChild != null) {
354
const firstBounds = ((firstElementChild.getBoundingClientRect(): any): DOMRect);
355
const lastBounds = ((lastElementChild.getBoundingClientRect(): any): DOMRect);
359
- const childWidth = lastBounds.x + lastBounds.width - firstBounds.x;
356
357
+ childWidth = lastBounds.x + lastBounds.width - firstBounds.x;
358
cachedChildWidths.set(child, childWidth);
362
-
363
- maxChildWidth = Math.max(
364
- maxChildWidth,
365
- indentationSizeRef.current * depth + childWidth
366
- );
359
}
360
}
361
+
362
+ const childWidthIncludingIndentation =
363
+ indentationSizeRef.current * depth + childWidth;
364
+ maxChildWidth = Math.max(maxChildWidth, childWidthIncludingIndentation);
365
}
366
367
const indentationSize = Math.min(
@@ -373,11 +369,12 @@ function updateIndentationSizeVar(
369
(list.clientWidth / maxChildWidth) * indentationSizeRef.current
370
);
371
376
- // TODO Debounce so newly added rows animate with pre-existing ones
377
- // debounce(() => {
378
- list.style.setProperty('--indentation-size', `${indentationSize}px`);
372
indentationSizeRef.current = indentationSize;
380
- // }, 50);
373
+
374
+ // Debounce so newly added rows animate with pre-existing ones
375
+ debounce(() => {
376
+ list.style.setProperty('--indentation-size', `${indentationSize}px`);
377
+ }, 50);
378
}
379
380
function InnerElementType({ children, style, ...rest }) {
@@ -408,23 +405,6 @@ function InnerElementType({ children, style, ...rest }) {
405
}
406
});
407
411
- // When the window is resized, forget the specific min width.
412
- // This will cause a render with 100% min-width, a measurement
413
- // in an effect, and a second render where we know the width.
414
- useEffect(() => {
415
- const invalidateMinWidth = () => {
416
- if (divRef.current !== null) {
417
- updateIndentationSizeVar(
418
- divRef.current,
419
- indentationSizeRef,
420
- cachedChildWidths
421
- );
422
- }
423
- };
424
- window.addEventListener('resize', invalidateMinWidth);
425
- return () => window.removeEventListener('resize', invalidateMinWidth);
426
- }, [cachedChildWidths]);
427
-
408
// We shouldn't retain this width across different conceptual trees though,
409
// so when the user opens the "owners tree" view, we should discard the previous width.
410
const [prevOwnerID, setPrevOwnerID] = useState(ownerID);