{"files":[{"status":"M","path":"src\/devtools\/views\/Components\/Element.js"},{"status":"M","path":"src\/devtools\/views\/Components\/Tree.js"},{"status":"M","path":"src\/devtools\/views\/Settings\/Settings.js"},{"status":"M","path":"src\/devtools\/views\/Settings\/SettingsContext.js"}],"commit":{"authorEmail":"bvaughn@fb.com","subject":"Re-added indent lines","shortRevision":"33432b037f","revision":"33432b037f2e539b3e7c479e594960e6fd60eaa3","authorName":"Brian Vaughn","authoredAt":"2019-05-31T13:34:55-07:00"},"parents":["5a269e7ced1011885e3622c2bde8d30fcd8ad3ab"],"body":"","patch":"diff --git a\/src\/devtools\/views\/Components\/Element.js b\/src\/devtools\/views\/Components\/Element.js\nindex d7a03e9667..845522b1c1 100644\n--- a\/src\/devtools\/views\/Components\/Element.js\n+++ b\/src\/devtools\/views\/Components\/Element.js\n@@ -39,7 +39,12 @@ export default function ElementView({ data, index, style }: Props) {\n \n const [isHovered, setIsHovered] = useState(false);\n \n- const { isNavigatingWithKeyboard, onElementMouseEnter, treeFocused } = data;\n+ const {\n+ isNavigatingWithKeyboard,\n+ onElementMouseEnter,\n+ showIndentLines,\n+ treeFocused,\n+ } = data;\n const id = element === null ? null : element.id;\n const isSelected = selectedElementID === id;\n \n@@ -100,14 +105,24 @@ export default function ElementView({ data, index, style }: Props) {\n onMouseLeave={handleMouseLeave}\n onMouseDown={handleMouseDown}\n onDoubleClick={handleDoubleClick}\n- style={{\n- ...style, \/\/ \"style\" comes from react-window\n-\n- \/\/ Left padding presents the appearance of a nested tree structure.\n- \/\/ We must use padding rather than margin\/left because of the selected background color.\n- paddingLeft: `calc(${depth} * var(--indentation-size))`,\n- }}\n+ style={style}\n >\n+ {depth > 0 && (\n+ \n+ )}\n+\n {ownerID === null ? (\n \n ) : null}\ndiff --git a\/src\/devtools\/views\/Components\/Tree.js b\/src\/devtools\/views\/Components\/Tree.js\nindex 3e5b75f99e..57644a7adb 100644\n--- a\/src\/devtools\/views\/Components\/Tree.js\n+++ b\/src\/devtools\/views\/Components\/Tree.js\n@@ -32,6 +32,7 @@ export type ItemData = {|\n isNavigatingWithKeyboard: boolean,\n lastScrolledIDRef: { current: number | null },\n onElementMouseEnter: (id: number) => void,\n+ showIndentLines: boolean,\n treeFocused: boolean,\n |};\n \n@@ -59,7 +60,7 @@ export default function Tree(props: Props) {\n \n const [treeFocused, setTreeFocused] = useState(false);\n \n- const { lineHeight } = useContext(SettingsContext);\n+ const { lineHeight, showIndentLines } = useContext(SettingsContext);\n \n \/\/ Make sure a newly selected element is visible in the list.\n \/\/ This is helpful for things like the owners list and search.\n@@ -263,6 +264,7 @@ export default function Tree(props: Props) {\n isNavigatingWithKeyboard,\n onElementMouseEnter: handleElementMouseEnter,\n lastScrolledIDRef,\n+ showIndentLines,\n treeFocused,\n }),\n [\n@@ -270,6 +272,7 @@ export default function Tree(props: Props) {\n isNavigatingWithKeyboard,\n handleElementMouseEnter,\n lastScrolledIDRef,\n+ showIndentLines,\n treeFocused,\n ]\n );\ndiff --git a\/src\/devtools\/views\/Settings\/Settings.js b\/src\/devtools\/views\/Settings\/Settings.js\nindex 645ee25422..30b83803cc 100644\n--- a\/src\/devtools\/views\/Settings\/Settings.js\n+++ b\/src\/devtools\/views\/Settings\/Settings.js\n@@ -11,9 +11,14 @@ import styles from '.\/Settings.css';\n \n function Settings(_: {||}) {\n const store = useContext(StoreContext);\n- const { displayDensity, setDisplayDensity, theme, setTheme } = useContext(\n- SettingsContext\n- );\n+ const {\n+ displayDensity,\n+ setDisplayDensity,\n+ showIndentLines,\n+ setShowIndentLines,\n+ theme,\n+ setTheme,\n+ } = useContext(SettingsContext);\n \n const captureScreenshotsSubscription = useMemo(\n () => ({\n@@ -57,6 +62,13 @@ function Settings(_: {||}) {\n [setTheme]\n );\n \n+ const updateShowIndentLines = useCallback(\n+ ({ currentTarget }) => {\n+ setShowIndentLines(currentTarget.checked);\n+ },\n+ [setShowIndentLines]\n+ );\n+\n const updateCaptureScreenshotsWhileProfiling = useCallback(\n ({ currentTarget }) => {\n store.captureScreenshots = currentTarget.checked;\n@@ -143,6 +155,14 @@ function Settings(_: {||}) {\n \/>{' '}\n Collapse newly added components by default\n <\/label>\n+ \n+ {' '}\n+ Show indent lines\n+ <\/label>\n <\/div>\n \n {store.supportsCaptureScreenshots && (\ndiff --git a\/src\/devtools\/views\/Settings\/SettingsContext.js b\/src\/devtools\/views\/Settings\/SettingsContext.js\nindex 4f79131554..ac371cbec7 100644\n--- a\/src\/devtools\/views\/Settings\/SettingsContext.js\n+++ b\/src\/devtools\/views\/Settings\/SettingsContext.js\n@@ -16,6 +16,9 @@ type Context = {|\n \/\/ Specified as a separate prop so it can trigger a re-render of FixedSizeList.\n lineHeight: number,\n \n+ showIndentLines: boolean,\n+ setShowIndentLines: (value: boolean) => void,\n+\n theme: Theme,\n setTheme(value: Theme): void,\n |};\n@@ -44,6 +47,10 @@ function SettingsContextController({\n 'React::DevTools::displayDensity',\n 'compact'\n );\n+ const [showIndentLines, setShowIndentLines] = useLocalStorage(\n+ 'React::DevTools::showIndentLines',\n+ true\n+ );\n const [theme, setTheme] = useLocalStorage(\n 'React::DevTools::theme',\n 'auto'\n@@ -126,6 +133,8 @@ function SettingsContextController({\n setDisplayDensity,\n theme,\n setTheme,\n+ showIndentLines,\n+ setShowIndentLines,\n lineHeight:\n displayDensity === 'compact'\n ? compactLineHeight\n@@ -135,7 +144,9 @@ function SettingsContextController({\n comfortableLineHeight,\n compactLineHeight,\n displayDensity,\n+ showIndentLines,\n setDisplayDensity,\n+ setShowIndentLines,\n setTheme,\n theme,\n ]\n"}

dillon1000/react

Files changed