{"patch":"diff --git a\/src\/devtools\/views\/Components\/Element.css b\/src\/devtools\/views\/Components\/Element.css\nindex 5833d462c8..dfa0b27d9d 100644\n--- a\/src\/devtools\/views\/Components\/Element.css\n+++ b\/src\/devtools\/views\/Components\/Element.css\n@@ -9,6 +9,7 @@\n align-items: center;\n cursor: default;\n user-select: none;\n+ color: var(--color-component-name);\n }\n .HoveredElement {\n background-color: var(--color-background-hover);\n@@ -17,6 +18,10 @@\n background-color: var(--color-background-inactive);\n }\n \n+.Bracket {\n+ color: var(--color-jsx-arrow-brackets);\n+}\n+\n .ScrollAnchor {\n height: 100%;\n width: 0;\n@@ -37,24 +42,6 @@\n --color-expand-collapse-toggle: var(--color-component-name-inverted);\n }\n \n-.DollarR {\n- color: var(--color-jsx-arrow-brackets);\n-}\n-\n-.Component {\n- color: var(--color-component-name);\n-}\n-.Component:before {\n- white-space: nowrap;\n- content: '<';\n- color: var(--color-jsx-arrow-brackets);\n-}\n-.Component:after {\n- white-space: nowrap;\n- content: '>';\n- color: var(--color-jsx-arrow-brackets);\n-}\n-\n .AttributeName {\n color: var(--color-attribute-name);\n }\n@@ -74,10 +61,12 @@\n display: inline-flex;\n width: 1rem;\n height: 1rem;\n+ flex: 0 0 1rem;\n color: var(--color-expand-collapse-toggle);\n }\n \n .Badge {\n+ color: var(--color-text);\n background-color: var(--color-component-badge-background);\n padding: 0.125rem 0.25rem;\n line-height: normal;\ndiff --git a\/src\/devtools\/views\/Components\/Element.js b\/src\/devtools\/views\/Components\/Element.js\nindex 681b65a184..d7a03e9667 100644\n--- a\/src\/devtools\/views\/Components\/Element.js\n+++ b\/src\/devtools\/views\/Components\/Element.js\n@@ -4,20 +4,13 @@ import React, {\n Fragment,\n useCallback,\n useContext,\n- useLayoutEffect,\n useMemo,\n- useRef,\n useState,\n } from 'react';\n-import {\n- ElementTypeClass,\n- ElementTypeFunction,\n- ElementTypeMemo,\n- ElementTypeForwardRef,\n-} from 'src\/types';\n+import { ElementTypeMemo, ElementTypeForwardRef } from 'src\/types';\n import Store from 'src\/devtools\/store';\n import ButtonIcon from '..\/ButtonIcon';\n-import { createRegExp } from '..\/utils';\n+import { createRegExp, truncateText } from '..\/utils';\n import { TreeDispatcherContext, TreeStateContext } from '.\/TreeContext';\n import { StoreContext } from '..\/context';\n \n@@ -46,13 +39,7 @@ export default function ElementView({ data, index, style }: Props) {\n \n const [isHovered, setIsHovered] = useState(false);\n \n- const {\n- lastScrolledIDRef,\n- isNavigatingWithKeyboard,\n- onElementMouseEnter,\n- showIndentLines,\n- treeFocused,\n- } = data;\n+ const { isNavigatingWithKeyboard, onElementMouseEnter, treeFocused } = data;\n const id = element === null ? null : element.id;\n const isSelected = selectedElementID === id;\n \n@@ -62,49 +49,6 @@ export default function ElementView({ data, index, style }: Props) {\n }\n }, [dispatch, id]);\n \n- const scrollAnchorStartRef = useRef(null);\n- const scrollAnchorEndRef = useRef(null);\n-\n- \/\/ The tree above has its own autoscrolling, but it only works for rows.\n- \/\/ However, even when the row gets into the viewport, the component name\n- \/\/ might be too far left or right on the screen. Adjust it in this case.\n- useLayoutEffect(() => {\n- if (isSelected) {\n- \/\/ Don't select the same item twice.\n- \/\/ A row may appear and disappear just by scrolling:\n- \/\/ https:\/\/github.com\/bvaughn\/react-devtools-experimental\/issues\/67\n- \/\/ It doesn't necessarily indicate a user action.\n- \/\/ TODO: we might want to revamp the autoscroll logic\n- \/\/ to only happen explicitly for user-initiated events.\n- if (lastScrolledIDRef.current === id) {\n- return;\n- }\n- lastScrolledIDRef.current = id;\n-\n- \/\/ We want to bring the whole name into view,\n- \/\/ including the expansion toggle and the \"=== $r\" hint.\n- \/\/ However, even calling scrollIntoView() on a wrapper parent node (e.g. )\n- \/\/ wouldn't guarantee that it will be *fully* brought into view.\n- \/\/ As a workaround, we'll have two anchor spans, and scroll each into view.\n- if (scrollAnchorEndRef.current !== null) {\n- scrollAnchorEndRef.current.scrollIntoView({\n- behavior: 'auto',\n- block: 'nearest',\n- inline: 'nearest',\n- });\n- }\n- if (scrollAnchorStartRef.current !== null) {\n- \/\/ We scroll the start anchor last because it's\n- \/\/ more important for it to be in the view.\n- scrollAnchorStartRef.current.scrollIntoView({\n- behavior: 'auto',\n- block: 'nearest',\n- inline: 'nearest',\n- });\n- }\n- }\n- }, [id, isSelected, lastScrolledIDRef]);\n-\n const handleMouseDown = useCallback(\n ({ metaKey }) => {\n if (id !== null) {\n@@ -138,8 +82,6 @@ export default function ElementView({ data, index, style }: Props) {\n \n const { depth, displayName, key, type } = ((element: any): Element);\n \n- const showDollarR =\n- isSelected && (type === ElementTypeClass || type === ElementTypeFunction);\n const showBadge = type === ElementTypeMemo || type === ElementTypeForwardRef;\n \n let className = styles.Element;\n@@ -162,45 +104,26 @@ export default function ElementView({ data, index, style }: Props) {\n ...style, \/\/ \"style\" comes from react-window\n \n \/\/ Left padding presents the appearance of a nested tree structure.\n- paddingLeft: '0.25rem',\n-\n- \/\/ These style overrides enable the background color to fill the full visible width,\n- \/\/ when combined with the CSS tweaks in Tree.\n- \/\/ A lot of options were considered; this seemed the one that requires the least code.\n- \/\/ See https:\/\/github.com\/bvaughn\/react-devtools-experimental\/issues\/9\n- width: undefined,\n- minWidth: '100%',\n- position: 'relative',\n- marginBottom: `-${style.height}px`,\n+ \/\/ We must use padding rather than margin\/left because of the selected background color.\n+ paddingLeft: `calc(${depth} * var(--indentation-size))`,\n }}\n >\n- \n- \n {ownerID === null ? (\n \n ) : null}\n- \n- \n- {key && (\n- \n- key<\/span>=\n- \"{key}\"<\/span>\n- <\/Fragment>\n- )}\n- <\/span>\n- {showDollarR && == $r<\/span>}\n- \n+\n+ <<\/span>\n+ \n+ {key && (\n+ \n+ key<\/span>=\n+ \n+ \"{truncateText(`${key}`, 10)}\"\n+ <\/span>\n+ <\/Fragment>\n+ )}\n+ ><\/span>\n+\n {showBadge && (\n \n {type === ElementTypeMemo ? 'Memo' : 'ForwardRef'}\ndiff --git a\/src\/devtools\/views\/Components\/Guidelines.css b\/src\/devtools\/views\/Components\/Guideline.css\nsimilarity index 100%\nrename from src\/devtools\/views\/Components\/Guidelines.css\nrename to src\/devtools\/views\/Components\/Guideline.css\ndiff --git a\/src\/devtools\/views\/Components\/Guidelines.js b\/src\/devtools\/views\/Components\/Guideline.js\nsimilarity index 76%\nrename from src\/devtools\/views\/Components\/Guidelines.js\nrename to src\/devtools\/views\/Components\/Guideline.js\nindex 30332ea9bf..3ba9760da0 100644\n--- a\/src\/devtools\/views\/Components\/Guidelines.js\n+++ b\/src\/devtools\/views\/Components\/Guideline.js\n@@ -1,6 +1,6 @@\n \/\/ @flow\n \n-import React, { Fragment, useContext, useMemo } from 'react';\n+import React, { useContext, useMemo } from 'react';\n import { TreeStateContext } from '.\/TreeContext';\n import TreeFocusedContext from '.\/TreeFocusedContext';\n import { SettingsContext } from '..\/Settings\/SettingsContext';\n@@ -8,23 +8,7 @@ import { StoreContext } from '..\/context';\n import { useSubscription } from '..\/hooks';\n import Store from '..\/..\/store';\n \n-import styles from '.\/Guidelines.css';\n-\n-export default function Guidelines(_: {||}) {\n- const { selectedElementID } = useContext(TreeStateContext);\n- const treeFocused = useContext(TreeFocusedContext);\n-\n- return (\n- \n- \n- <\/Fragment>\n- );\n-}\n+import styles from '.\/Guideline.css';\n \n type Data = {|\n depth: number,\n@@ -32,23 +16,20 @@ type Data = {|\n stopIndex: number,\n |};\n \n-type Props = {|\n- className: string,\n- elementID: number | null,\n-|};\n-\n-function Guideline({ className, elementID }: Props) {\n- const store = useContext(StoreContext);\n+export default function Guideline(_: {||}) {\n const { lineHeight } = useContext(SettingsContext);\n+ const store = useContext(StoreContext);\n+ const { selectedElementID } = useContext(TreeStateContext);\n+ const treeFocused = useContext(TreeFocusedContext);\n \n const subscription = useMemo(\n () => ({\n getCurrentValue: () => {\n- if (elementID === null) {\n+ if (selectedElementID === null) {\n return null;\n }\n \n- const element = store.getElementByID(elementID);\n+ const element = store.getElementByID(selectedElementID);\n if (\n element === null ||\n element.isCollapsed ||\n@@ -92,7 +73,7 @@ function Guideline({ className, elementID }: Props) {\n };\n },\n }),\n- [elementID, store]\n+ [selectedElementID, store]\n );\n const data = useSubscription(subscription);\n \n@@ -104,11 +85,13 @@ function Guideline({ className, elementID }: Props) {\n \n return (\n \ndiff --git a\/src\/devtools\/views\/Components\/SelectedElement.css b\/src\/devtools\/views\/Components\/SelectedElement.css\nindex 9ad029099d..d9ae086b4b 100644\n--- a\/src\/devtools\/views\/Components\/SelectedElement.css\n+++ b\/src\/devtools\/views\/Components\/SelectedElement.css\n@@ -33,11 +33,13 @@\n \n .Component,\n .Owner {\n- overflow: hidden;\n- text-overflow: ellipsis;\n color: var(--color-component-name);\n font-family: var(--font-family-monospace);\n font-size: var(--font-size-monospace-normal);\n+ white-space: nowrap;\n+ overflow: hidden;\n+ text-overflow: ellipsis;\n+ max-width: 100%;\n }\n .Component:before,\n .Owner:before {\ndiff --git a\/src\/devtools\/views\/Components\/Tree.css b\/src\/devtools\/views\/Components\/Tree.css\nindex 3efc1bf863..e3ddfeb37d 100644\n--- a\/src\/devtools\/views\/Components\/Tree.css\n+++ b\/src\/devtools\/views\/Components\/Tree.css\n@@ -7,6 +7,14 @@\n border-top: 1px solid var(--color-border);\n }\n \n+.List {\n+ overflow-x: hidden !important;\n+}\n+\n+.InnerElementType {\n+ overflow-x: hidden;\n+}\n+\n .SearchInput {\n flex: 0 0 42px;\n display: flex;\ndiff --git a\/src\/devtools\/views\/Components\/Tree.js b\/src\/devtools\/views\/Components\/Tree.js\nindex 74972f7cd4..3e5b75f99e 100644\n--- a\/src\/devtools\/views\/Components\/Tree.js\n+++ b\/src\/devtools\/views\/Components\/Tree.js\n@@ -22,7 +22,7 @@ import SearchInput from '.\/SearchInput';\n import { ComponentFiltersModalContextController } from '.\/ComponentFiltersModalContext';\n import ToggleComponentFiltersModalButton from '.\/ToggleComponentFiltersModalButton';\n import ComponentFiltersModal from '.\/ComponentFiltersModal';\n-import Guidelines from '.\/Guidelines';\n+import Guideline from '.\/Guideline';\n import TreeFocusedContext from '.\/TreeFocusedContext';\n \n import styles from '.\/Tree.css';\n@@ -32,7 +32,6 @@ 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@@ -60,7 +59,7 @@ export default function Tree(props: Props) {\n \n const [treeFocused, setTreeFocused] = useState(false);\n \n- const { lineHeight, showIndentLines } = useContext(SettingsContext);\n+ const { lineHeight } = 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@@ -264,7 +263,6 @@ export default function Tree(props: Props) {\n isNavigatingWithKeyboard,\n onElementMouseEnter: handleElementMouseEnter,\n lastScrolledIDRef,\n- showIndentLines,\n treeFocused,\n }),\n [\n@@ -272,7 +270,6 @@ export default function Tree(props: Props) {\n isNavigatingWithKeyboard,\n handleElementMouseEnter,\n lastScrolledIDRef,\n- showIndentLines,\n treeFocused,\n ]\n );\n@@ -310,7 +307,6 @@ export default function Tree(props: Props) {\n itemCount={numElements}\n itemData={itemData}\n itemSize={lineHeight}\n- overscanCount={3}\n ref={listRef}\n width={width}\n >\n@@ -326,6 +322,31 @@ export default function Tree(props: Props) {\n );\n }\n \n+function updateIndentationSizeVar(innerDiv: HTMLDivElement): void {\n+ const list = ((innerDiv.parentElement: any): HTMLDivElement);\n+\n+ let indentationSize =\n+ parseFloat(getComputedStyle(list).getPropertyValue('--indentation-size')) ||\n+ 12;\n+\n+ let maxChildWidth = 0;\n+ for (let child of innerDiv.children) {\n+ const { lastElementChild } = child;\n+ \/\/ Skip over e.g. the guideline element\n+ if (lastElementChild != null) {\n+ const bounds = ((lastElementChild.getBoundingClientRect(): any): DOMRect);\n+ maxChildWidth = Math.max(maxChildWidth, bounds.x + bounds.width);\n+ }\n+ }\n+\n+ indentationSize = Math.min(\n+ 12,\n+ (list.clientWidth \/ maxChildWidth) * indentationSize\n+ );\n+\n+ list.style.setProperty('--indentation-size', `${indentationSize}px`);\n+}\n+\n function InnerElementType({ children, style, ...rest }) {\n const { ownerID } = useContext(TreeStateContext);\n \n@@ -335,13 +356,12 @@ function InnerElementType({ children, style, ...rest }) {\n \/\/ and ensure that once we've grown to a new max size, we don't shrink below it.\n \/\/ This improves the user experience when scrolling between wide and narrow rows.\n const divRef = useRef(null);\n- const [minWidth, setMinWidth] = useState(null);\n+\n \/\/ TODO This is a valid warning, but we're ignoring it for the time being.\n \/\/ eslint-disable-next-line react-hooks\/exhaustive-deps\n useEffect(() => {\n if (divRef.current !== null) {\n- const measuredWidth = divRef.current.offsetWidth;\n- setMinWidth(w => Math.max(w || 0, measuredWidth));\n+ updateIndentationSizeVar(divRef.current);\n }\n });\n \n@@ -349,7 +369,11 @@ function InnerElementType({ children, style, ...rest }) {\n \/\/ This will cause a render with 100% min-width, a measurement\n \/\/ in an effect, and a second render where we know the width.\n useEffect(() => {\n- const invalidateMinWidth = () => setMinWidth(null);\n+ const invalidateMinWidth = () => {\n+ if (divRef.current !== null) {\n+ updateIndentationSizeVar(divRef.current);\n+ }\n+ };\n window.addEventListener('resize', invalidateMinWidth);\n return () => window.removeEventListener('resize', invalidateMinWidth);\n }, []);\n@@ -359,7 +383,6 @@ function InnerElementType({ children, style, ...rest }) {\n const [prevOwnerID, setPrevOwnerID] = useState(ownerID);\n if (ownerID !== prevOwnerID) {\n setPrevOwnerID(ownerID);\n- setMinWidth(null);\n }\n \n \/\/ This style override enables the background color to fill the full visible width,\n@@ -369,16 +392,11 @@ function InnerElementType({ children, style, ...rest }) {\n return (\n \n- \n+ \n {children}\n <\/div>\n );\ndiff --git a\/src\/devtools\/views\/Settings\/Settings.js b\/src\/devtools\/views\/Settings\/Settings.js\nindex 30b83803cc..645ee25422 100644\n--- a\/src\/devtools\/views\/Settings\/Settings.js\n+++ b\/src\/devtools\/views\/Settings\/Settings.js\n@@ -11,14 +11,9 @@ import styles from '.\/Settings.css';\n \n function Settings(_: {||}) {\n const store = useContext(StoreContext);\n- const {\n- displayDensity,\n- setDisplayDensity,\n- showIndentLines,\n- setShowIndentLines,\n- theme,\n- setTheme,\n- } = useContext(SettingsContext);\n+ const { displayDensity, setDisplayDensity, theme, setTheme } = useContext(\n+ SettingsContext\n+ );\n \n const captureScreenshotsSubscription = useMemo(\n () => ({\n@@ -62,13 +57,6 @@ 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@@ -155,14 +143,6 @@ 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 ac371cbec7..4f79131554 100644\n--- a\/src\/devtools\/views\/Settings\/SettingsContext.js\n+++ b\/src\/devtools\/views\/Settings\/SettingsContext.js\n@@ -16,9 +16,6 @@ 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@@ -47,10 +44,6 @@ 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@@ -133,8 +126,6 @@ function SettingsContextController({\n setDisplayDensity,\n theme,\n setTheme,\n- showIndentLines,\n- setShowIndentLines,\n lineHeight:\n displayDensity === 'compact'\n ? compactLineHeight\n@@ -144,9 +135,7 @@ function SettingsContextController({\n comfortableLineHeight,\n compactLineHeight,\n displayDensity,\n- showIndentLines,\n setDisplayDensity,\n- setShowIndentLines,\n setTheme,\n theme,\n ]\ndiff --git a\/src\/devtools\/views\/utils.js b\/src\/devtools\/views\/utils.js\nindex 8cebefa319..c04f8bddd1 100644\n--- a\/src\/devtools\/views\/utils.js\n+++ b\/src\/devtools\/views\/utils.js\n@@ -170,3 +170,16 @@ export function downloadFile(filename: string, text: string): void {\n \n ((document.body: any): HTMLBodyElement).removeChild(element);\n }\n+\n+export function truncateText(text: string, maxLength: number): string {\n+ const { length } = text;\n+ if (length > maxLength) {\n+ return (\n+ text.substr(0, Math.floor(maxLength \/ 2)) +\n+ '…' +\n+ text.substr(length - Math.ceil(maxLength \/ 2) + 1)\n+ );\n+ } else {\n+ return text;\n+ }\n+}\n","commit":{"shortRevision":"5a269e7ced","subject":"Initial POC for compressing horizontal offset for wide\/deep trees","revision":"5a269e7ced1011885e3622c2bde8d30fcd8ad3ab","authorName":"Brian Vaughn","authorEmail":"bvaughn@fb.com","authoredAt":"2019-05-31T11:24:34-07:00"},"parents":["c0f686eed9bf18d3015160229145e829f31a66cc"],"body":"","files":[{"path":"src\/devtools\/views\/Components\/Element.css","status":"M"},{"path":"src\/devtools\/views\/Components\/Element.js","status":"M"},{"path":"src\/devtools\/views\/Components\/Guideline.css","previousPath":"src\/devtools\/views\/Components\/Guidelines.css","status":"R100"},{"path":"src\/devtools\/views\/Components\/Guideline.js","previousPath":"src\/devtools\/views\/Components\/Guidelines.js","status":"R076"},{"path":"src\/devtools\/views\/Components\/SelectedElement.css","status":"M"},{"path":"src\/devtools\/views\/Components\/Tree.css","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","status":"M"},{"path":"src\/devtools\/views\/utils.js","status":"M"}]}

dillon1000/react

Files changed