Re-added indent lines

src/devtools/views/Components/Element.js

@@ -39,7 +39,12 @@ export default function ElementView({ data, index, style }: Props) {
 
   const [isHovered, setIsHovered] = useState(false);
 
-  const { isNavigatingWithKeyboard, onElementMouseEnter, treeFocused } = data;
+  const {
+    isNavigatingWithKeyboard,
+    onElementMouseEnter,
+    showIndentLines,
+    treeFocused,
+  } = data;
   const id = element === null ? null : element.id;
   const isSelected = selectedElementID === id;
 
@@ -100,14 +105,24 @@ export default function ElementView({ data, index, style }: Props) {
       onMouseLeave={handleMouseLeave}
       onMouseDown={handleMouseDown}
       onDoubleClick={handleDoubleClick}
-      style={{
-        ...style, // "style" comes from react-window
-
-        // 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))`,
-      }}
+      style={style}
     >
+      {depth > 0 && (
+        <div
+          style={{
+            flex: `0 0 calc(${depth} * var(--indentation-size) - 0.5rem)`,
+            marginLeft: '0.5rem', // Offset to align with collapse toggle
+            height: '100%',
+            backgroundSize: 'var(--indentation-size) 1rem',
+            backgroundColor: 'transparent',
+            backgroundRepeat: 'repeat',
+            backgroundImage: showIndentLines
+              ? 'linear-gradient(to right, var(--color-guideline) 0, transparent 1px'
+              : '',
+          }}
+        />
+      )}
+
       {ownerID === null ? (
         <ExpandCollapseToggle element={element} store={store} />
       ) : null}

src/devtools/views/Components/Tree.js

@@ -32,6 +32,7 @@ export type ItemData = {|
   isNavigatingWithKeyboard: boolean,
   lastScrolledIDRef: { current: number | null },
   onElementMouseEnter: (id: number) => void,
+  showIndentLines: boolean,
   treeFocused: boolean,
 |};
 
@@ -59,7 +60,7 @@ export default function Tree(props: Props) {
 
   const [treeFocused, setTreeFocused] = useState<boolean>(false);
 
-  const { lineHeight } = useContext(SettingsContext);
+  const { lineHeight, showIndentLines } = useContext(SettingsContext);
 
   // Make sure a newly selected element is visible in the list.
   // This is helpful for things like the owners list and search.
@@ -263,6 +264,7 @@ export default function Tree(props: Props) {
       isNavigatingWithKeyboard,
       onElementMouseEnter: handleElementMouseEnter,
       lastScrolledIDRef,
+      showIndentLines,
       treeFocused,
     }),
     [
@@ -270,6 +272,7 @@ export default function Tree(props: Props) {
       isNavigatingWithKeyboard,
       handleElementMouseEnter,
       lastScrolledIDRef,
+      showIndentLines,
       treeFocused,
     ]
   );

src/devtools/views/Settings/Settings.js

@@ -11,9 +11,14 @@ import styles from './Settings.css';
 
 function Settings(_: {||}) {
   const store = useContext(StoreContext);
-  const { displayDensity, setDisplayDensity, theme, setTheme } = useContext(
-    SettingsContext
-  );
+  const {
+    displayDensity,
+    setDisplayDensity,
+    showIndentLines,
+    setShowIndentLines,
+    theme,
+    setTheme,
+  } = useContext(SettingsContext);
 
   const captureScreenshotsSubscription = useMemo(
     () => ({
@@ -57,6 +62,13 @@ function Settings(_: {||}) {
     [setTheme]
   );
 
+  const updateShowIndentLines = useCallback(
+    ({ currentTarget }) => {
+      setShowIndentLines(currentTarget.checked);
+    },
+    [setShowIndentLines]
+  );
+
   const updateCaptureScreenshotsWhileProfiling = useCallback(
     ({ currentTarget }) => {
       store.captureScreenshots = currentTarget.checked;
@@ -143,6 +155,14 @@ function Settings(_: {||}) {
           />{' '}
           Collapse newly added components by default
         </label>
+        <label className={styles.CheckboxOption}>
+          <input
+            type="checkbox"
+            checked={showIndentLines}
+            onChange={updateShowIndentLines}
+          />{' '}
+          Show indent lines
+        </label>
       </div>
 
       {store.supportsCaptureScreenshots && (

src/devtools/views/Settings/SettingsContext.js

@@ -16,6 +16,9 @@ type Context = {|
   // Specified as a separate prop so it can trigger a re-render of FixedSizeList.
   lineHeight: number,
 
+  showIndentLines: boolean,
+  setShowIndentLines: (value: boolean) => void,
+
   theme: Theme,
   setTheme(value: Theme): void,
 |};
@@ -44,6 +47,10 @@ function SettingsContextController({
     'React::DevTools::displayDensity',
     'compact'
   );
+  const [showIndentLines, setShowIndentLines] = useLocalStorage<boolean>(
+    'React::DevTools::showIndentLines',
+    true
+  );
   const [theme, setTheme] = useLocalStorage<Theme>(
     'React::DevTools::theme',
     'auto'
@@ -126,6 +133,8 @@ function SettingsContextController({
       setDisplayDensity,
       theme,
       setTheme,
+      showIndentLines,
+      setShowIndentLines,
       lineHeight:
         displayDensity === 'compact'
           ? compactLineHeight
@@ -135,7 +144,9 @@ function SettingsContextController({
       comfortableLineHeight,
       compactLineHeight,
       displayDensity,
+      showIndentLines,
       setDisplayDensity,
+      setShowIndentLines,
       setTheme,
       theme,
     ]