Removed debounce+animation from indentation adjustment

src/devtools/views/Components/Element.js

@@ -121,9 +121,6 @@ export default function ElementView({ data, index, style }: Props) {
         // Left padding presents the appearance of a nested tree structure.
         // We must use padding rather than margin/left because of the selected background color.
         paddingLeft: `calc(${depth} * var(--indentation-size))`,
-
-        // Animate horizontal axis compression so it's smoother.
-        transition: 'padding-left 150ms',
       }}
       data-depth={depth}
     >

src/devtools/views/Components/Tree.js

@@ -322,14 +322,6 @@ export default function Tree(props: Props) {
   );
 }
 
-let debounceTimeoutID: TimeoutID | null = null;
-function debounce(callback: () => void, delay: number) {
-  if (debounceTimeoutID !== null) {
-    clearTimeout(debounceTimeoutID);
-  }
-  debounceTimeoutID = setTimeout(callback, delay);
-}
-
 function updateIndentationSizeVar(
   innerDiv: HTMLDivElement,
   indentationSizeRef: {| current: number |},
@@ -371,10 +363,7 @@ function updateIndentationSizeVar(
 
   indentationSizeRef.current = indentationSize;
 
-  // Debounce so newly added rows animate with pre-existing ones
-  debounce(() => {
-    list.style.setProperty('--indentation-size', `${indentationSize}px`);
-  }, 50);
+  list.style.setProperty('--indentation-size', `${indentationSize}px`);
 }
 
 function InnerElementType({ children, style, ...rest }) {