Show indent lines preference

src/devtools/views/Components/Element.js

@@ -48,9 +48,10 @@ export default function ElementView({ data, index, style }: Props) {
 
   const {
     lastScrolledIDRef,
-    treeFocused,
     isNavigatingWithKeyboard,
     onElementMouseEnter,
+    showIndentLines,
+    treeFocused,
   } = data;
   const id = element === null ? null : element.id;
   const isSelected = selectedElementID === id;
@@ -179,8 +180,9 @@ export default function ElementView({ data, index, style }: Props) {
           height: '100%',
           backgroundSize: '0.75rem 1rem',
           backgroundColor: 'transparent',
-          backgroundImage:
-            'linear-gradient(to right, transparent 8px, var(--color-guideline) 8px, transparent 9px)',
+          backgroundImage: showIndentLines
+            ? 'linear-gradient(to right, transparent 8px, var(--color-guideline) 8px, transparent 9px)'
+            : '',
           backgroundRepeat: 'repeat',
         }}
       />

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,
     ]