{children}<\/div>;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/Element.css b\/src\/devtools\/views\/Components\/Element.css\nindex dfa0b27d9d..0b56359684 100644\n--- a\/src\/devtools\/views\/Components\/Element.css\n+++ b\/src\/devtools\/views\/Components\/Element.css\n@@ -64,14 +64,3 @@\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;\n- border-radius: 0.125rem;\n- margin-left: 0.25rem;\n- font-family: var(--font-family-monospace);\n- font-size: var(--font-size-monospace-small);\n-}\ndiff --git a\/src\/devtools\/views\/Components\/Element.js b\/src\/devtools\/views\/Components\/Element.js\nindex d7a03e9667..cb07812388 100644\n--- a\/src\/devtools\/views\/Components\/Element.js\n+++ b\/src\/devtools\/views\/Components\/Element.js\n@@ -9,6 +9,7 @@ import React, {\n } from 'react';\n import { ElementTypeMemo, ElementTypeForwardRef } from 'src\/types';\n import Store from 'src\/devtools\/store';\n+import Badge from '.\/Badge';\n import ButtonIcon from '..\/ButtonIcon';\n import { createRegExp, truncateText } from '..\/utils';\n import { TreeDispatcherContext, TreeStateContext } from '.\/TreeContext';\n@@ -80,9 +81,23 @@ export default function ElementView({ data, index, style }: Props) {\n return null;\n }\n \n- const { depth, displayName, key, type } = ((element: any): Element);\n-\n- const showBadge = type === ElementTypeMemo || type === ElementTypeForwardRef;\n+ const {\n+ depth,\n+ displayName,\n+ hocDisplayNames,\n+ key,\n+ type,\n+ } = ((element: any): Element);\n+\n+ \/\/ TODO Maybe factor this into a shared util method?\n+ let badge = null;\n+ if (hocDisplayNames !== null) {\n+ badge = hocDisplayNames.length === 1 ? hocDisplayNames[0] : '…';\n+ } else if (type === ElementTypeMemo) {\n+ badge = 'Memo';\n+ } else if (type === ElementTypeForwardRef) {\n+ badge = 'ForwardRef';\n+ }\n \n let className = styles.Element;\n if (isSelected) {\n@@ -105,8 +120,12 @@ export default function ElementView({ data, index, style }: Props) {\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+ paddingLeft: `calc(${depth} * var(--indentation-size) + 0.25rem)`,\n+\n+ \/\/ TODO Animate horizontal axis compression so it's smoother.\n+ \/\/ transition: 'padding-left 250ms',\n }}\n+ data-depth={depth}\n >\n {ownerID === null ? (\n \n@@ -123,12 +142,7 @@ export default function ElementView({ data, index, style }: Props) {\n <\/Fragment>\n )}\n ><\/span>\n-\n- {showBadge && (\n- \n- {type === ElementTypeMemo ? 'Memo' : 'ForwardRef'}\n- <\/span>\n- )}\n+ {badge}<\/Badge>\n <\/div>\n );\n }\ndiff --git a\/src\/devtools\/views\/Components\/Guideline.css b\/src\/devtools\/views\/Components\/Guideline.css\nindex 1ab29e1d16..e3adaed726 100644\n--- a\/src\/devtools\/views\/Components\/Guideline.css\n+++ b\/src\/devtools\/views\/Components\/Guideline.css\n@@ -1,14 +1,8 @@\n-.GuidelineActive,\n-.GuidelineInactive {\n- width: 1px;\n- z-index: 2;\n+.Guideline {\n+ position: absolute;\n+ left: 0;\n+ width: 100%;\n+ z-index: 0;\n pointer-events: none;\n-}\n-\n-.GuidelineActive {\n- background-color: var(--color-background-selected);\n-}\n-\n-.GuidelineInactive {\n- background-color: var(--color-background-inactive);\n+ background-color: var(--color-guideline);\n }\ndiff --git a\/src\/devtools\/views\/Components\/Guideline.js b\/src\/devtools\/views\/Components\/Guideline.js\nindex 3ba9760da0..f2a69292eb 100644\n--- a\/src\/devtools\/views\/Components\/Guideline.js\n+++ b\/src\/devtools\/views\/Components\/Guideline.js\n@@ -2,7 +2,6 @@\n \n import React, { useContext, useMemo } from 'react';\n import { TreeStateContext } from '.\/TreeContext';\n-import TreeFocusedContext from '.\/TreeFocusedContext';\n import { SettingsContext } from '..\/Settings\/SettingsContext';\n import { StoreContext } from '..\/context';\n import { useSubscription } from '..\/hooks';\n@@ -11,7 +10,6 @@ import Store from '..\/..\/store';\n import styles from '.\/Guideline.css';\n \n type Data = {|\n- depth: number,\n startIndex: number,\n stopIndex: number,\n |};\n@@ -20,7 +18,6 @@ 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@@ -61,7 +58,6 @@ export default function Guideline(_: {||}) {\n }\n \n return {\n- depth: element.depth,\n startIndex,\n stopIndex,\n };\n@@ -81,18 +77,16 @@ export default function Guideline(_: {||}) {\n return null;\n }\n \n- const { depth, startIndex, stopIndex } = data;\n+ const { startIndex, stopIndex } = data;\n \n return (\n \n );\ndiff --git a\/src\/devtools\/views\/Components\/HocBadges.css b\/src\/devtools\/views\/Components\/HocBadges.css\nnew file mode 100644\nindex 0000000000..04c5f92dc4\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/HocBadges.css\n@@ -0,0 +1,9 @@\n+.HocBadges {\n+ padding: 0.125rem 0.25rem;\n+ background-color: var(--color-background-selected);\n+ color: var(--color-text-selected);\n+ --color-component-badge-background: var(\n+ --color-component-badge-background-inverted\n+ );\n+ user-select: none;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/HocBadges.js b\/src\/devtools\/views\/Components\/HocBadges.js\nnew file mode 100644\nindex 0000000000..c9e7daff98\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/HocBadges.js\n@@ -0,0 +1,37 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+import { ElementTypeForwardRef, ElementTypeMemo } from 'src\/types';\n+import Badge from '.\/Badge';\n+import styles from '.\/HocBadges.css';\n+\n+import type { Element } from '.\/types';\n+\n+type Props = {|\n+ element: Element,\n+|};\n+\n+export default function HocBadges({ element }: Props) {\n+ const { hocDisplayNames, type } = ((element: any): Element);\n+\n+ let typeBadge = null;\n+ if (type === ElementTypeMemo) {\n+ typeBadge = 'Memo';\n+ } else if (type === ElementTypeForwardRef) {\n+ typeBadge = 'ForwardRef';\n+ }\n+\n+ if (hocDisplayNames === null && typeBadge === null) {\n+ return null;\n+ }\n+\n+ return (\n+

\n+ {typeBadge}<\/Badge>\n+ {hocDisplayNames !== null &&\n+ hocDisplayNames.map(hocDisplayName => (\n+ {hocDisplayName}<\/Badge>\n+ ))}\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Components\/InspectedElementContext.js b\/src\/devtools\/views\/Components\/InspectedElementContext.js\nindex 75b49f4898..c27d97eb8b 100644\n--- a\/src\/devtools\/views\/Components\/InspectedElementContext.js\n+++ b\/src\/devtools\/views\/Components\/InspectedElementContext.js\n@@ -12,6 +12,7 @@ import { createResource } from '..\/..\/cache';\n import { BridgeContext, StoreContext } from '..\/context';\n import { hydrate } from 'src\/hydration';\n import { TreeStateContext } from '.\/TreeContext';\n+import { separateDisplayNameAndHOCs } from 'src\/utils';\n \n import type {\n DehydratedData,\n@@ -95,8 +96,31 @@ function InspectedElementContextController({ children }: Props) {\n if (inspectedElement !== null && typeof inspectedElement === 'object') {\n const id = inspectedElement.id;\n \n+ const { displayName, type } = inspectedElement;\n+\n+ const [\n+ displayNameWithoutHOCs,\n+ hocDisplayNames,\n+ ] = separateDisplayNameAndHOCs(displayName, type);\n+\n inspectedElement = (({\n ...inspectedElement,\n+ displayName: displayNameWithoutHOCs,\n+ owners:\n+ inspectedElement.owners === null\n+ ? null\n+ : inspectedElement.owners.map(owner => {\n+ const [\n+ displayName,\n+ hocDisplayNames,\n+ ] = separateDisplayNameAndHOCs(owner.displayName, owner.type);\n+ return {\n+ ...owner,\n+ displayName,\n+ hocDisplayNames,\n+ };\n+ }),\n+ hocDisplayNames,\n context: hydrateHelper(inspectedElement.context),\n events: hydrateHelper(inspectedElement.events),\n hooks: hydrateHelper(inspectedElement.hooks),\ndiff --git a\/src\/devtools\/views\/Components\/OwnersListContext.js b\/src\/devtools\/views\/Components\/OwnersListContext.js\nindex 3720f3b2cc..f83b1a6d39 100644\n--- a\/src\/devtools\/views\/Components\/OwnersListContext.js\n+++ b\/src\/devtools\/views\/Components\/OwnersListContext.js\n@@ -9,6 +9,7 @@ import React, {\n import { createResource } from '..\/..\/cache';\n import { BridgeContext, StoreContext } from '..\/context';\n import { TreeStateContext } from '.\/TreeContext';\n+import { separateDisplayNameAndHOCs } from 'src\/utils';\n \n import type {\n Element,\n@@ -79,7 +80,23 @@ function OwnersListContextController({ children }: Props) {\n const request = inProgressRequests.get(element);\n if (request != null) {\n inProgressRequests.delete(element);\n- request.resolveFn(ownersList.owners);\n+\n+ request.resolveFn(\n+ ownersList.owners === null\n+ ? null\n+ : ownersList.owners.map(owner => {\n+ const [\n+ displayNameWithoutHOCs,\n+ hocDisplayNames,\n+ ] = separateDisplayNameAndHOCs(owner.displayName, owner.type);\n+\n+ return {\n+ ...owner,\n+ displayName: displayNameWithoutHOCs,\n+ hocDisplayNames,\n+ };\n+ })\n+ );\n }\n }\n };\ndiff --git a\/src\/devtools\/views\/Components\/SelectedElement.css b\/src\/devtools\/views\/Components\/SelectedElement.css\nindex d9ae086b4b..176fac717a 100644\n--- a\/src\/devtools\/views\/Components\/SelectedElement.css\n+++ b\/src\/devtools\/views\/Components\/SelectedElement.css\n@@ -69,7 +69,6 @@\n .Owner {\n border-radius: 0.25rem;\n padding: 0.125rem 0.25rem;\n- margin-left: 0.5rem;\n cursor: pointer;\n background: none;\n border: none;\n@@ -94,3 +93,9 @@\n color: var(--color-dim);\n cursor: default;\n }\n+\n+.OwnerButton {\n+ display: flex;\n+ align-items: center;\n+ margin-left: 0.5rem;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/SelectedElement.js b\/src\/devtools\/views\/Components\/SelectedElement.js\nindex aa831c11ad..a819ecbb02 100644\n--- a\/src\/devtools\/views\/Components\/SelectedElement.js\n+++ b\/src\/devtools\/views\/Components\/SelectedElement.js\n@@ -8,10 +8,12 @@ import ButtonIcon from '..\/ButtonIcon';\n import HooksTree from '.\/HooksTree';\n import EventsTree from '.\/EventsTree';\n import { ModalDialogContext } from '..\/ModalDialog';\n+import HocBadges from '.\/HocBadges';\n import InspectedElementTree from '.\/InspectedElementTree';\n import { InspectedElementContext } from '.\/InspectedElementContext';\n import ViewElementSourceContext from '.\/ViewElementSourceContext';\n import Toggle from '..\/Toggle';\n+import Badge from '.\/Badge';\n import {\n ComponentFilterElementType,\n ElementTypeClass,\n@@ -24,6 +26,7 @@ import {\n import styles from '.\/SelectedElement.css';\n \n import type { Element, InspectedElement } from '.\/types';\n+import type { ElementType } from 'src\/types';\n \n export type Props = {||};\n \n@@ -272,6 +275,7 @@ function InspectedElementView({\n \n return (\n

\n+ \n \n ))}\n <\/div>\n@@ -318,9 +324,21 @@ function InspectedElementView({\n );\n }\n \n-type OwnerViewProps = {| displayName: string, id: number, isInStore: boolean |};\n+type OwnerViewProps = {|\n+ displayName: string,\n+ hocDisplayNames: Array | null,\n+ id: number,\n+ isInStore: boolean,\n+ type: ElementType,\n+|};\n \n-function OwnerView({ displayName, id, isInStore }: OwnerViewProps) {\n+function OwnerView({\n+ displayName,\n+ hocDisplayNames,\n+ id,\n+ isInStore,\n+ type,\n+}: OwnerViewProps) {\n const dispatch = useContext(TreeDispatcherContext);\n \n const handleClick = useCallback(\n@@ -332,16 +350,30 @@ function OwnerView({ displayName, id, isInStore }: OwnerViewProps) {\n [dispatch, id]\n );\n \n+ let badge = null;\n+ if (hocDisplayNames !== null) {\n+ badge = hocDisplayNames.length === 1 ? hocDisplayNames[0] : '…';\n+ } else if (type === ElementTypeMemo) {\n+ badge = 'Memo';\n+ } else if (type === ElementTypeForwardRef) {\n+ badge = 'ForwardRef';\n+ }\n+\n return (\n- \n- {displayName}\n- <\/button>\n+ \n+ {displayName}\n+ <\/span>\n+ {badge}<\/Badge>\n+ <\/Button>\n );\n }\n \ndiff --git a\/src\/devtools\/views\/Components\/Tree.js b\/src\/devtools\/views\/Components\/Tree.js\nindex 3e5b75f99e..022be6353d 100644\n--- a\/src\/devtools\/views\/Components\/Tree.js\n+++ b\/src\/devtools\/views\/Components\/Tree.js\n@@ -322,34 +322,73 @@ export default function Tree(props: Props) {\n );\n }\n \n-function updateIndentationSizeVar(innerDiv: HTMLDivElement): void {\n- const list = ((innerDiv.parentElement: any): HTMLDivElement);\n+\/* TODO Debounce so newly added rows animate with pre-existing ones\n+let debounceTimeoutID: TimeoutID | null = null;\n+function debounce(callback: () => void, delay: number) {\n+ if (debounceTimeoutID !== null) {\n+ clearTimeout(debounceTimeoutID);\n+ }\n+ debounceTimeoutID = setTimeout(callback, delay);\n+}\n+*\/\n \n- let indentationSize =\n- parseFloat(getComputedStyle(list).getPropertyValue('--indentation-size')) ||\n- 12;\n+function updateIndentationSizeVar(\n+ innerDiv: HTMLDivElement,\n+ indentationSizeRef: {| current: number |},\n+ cachedChildWidths: WeakMap\n+): void {\n+ const list = ((innerDiv.parentElement: any): HTMLDivElement);\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+ const depth = parseInt(child.getAttribute('data-depth'), 10) || 0;\n+\n+ const cachedChildWidth = cachedChildWidths.get(child);\n+ if (cachedChildWidth != null) {\n+ maxChildWidth = Math.max(\n+ maxChildWidth,\n+ indentationSizeRef.current * depth + cachedChildWidth\n+ );\n+ } else {\n+ const { firstElementChild, lastElementChild } = child;\n+\n+ \/\/ Skip over e.g. the guideline element\n+ if (firstElementChild != null && lastElementChild != null) {\n+ const firstBounds = ((firstElementChild.getBoundingClientRect(): any): DOMRect);\n+ const lastBounds = ((lastElementChild.getBoundingClientRect(): any): DOMRect);\n+ const childWidth = lastBounds.x + lastBounds.width - firstBounds.x;\n+\n+ cachedChildWidths.set(child, childWidth);\n+\n+ maxChildWidth = Math.max(\n+ maxChildWidth,\n+ indentationSizeRef.current * depth + childWidth\n+ );\n+ }\n }\n }\n \n- indentationSize = Math.min(\n+ const indentationSize = Math.min(\n 12,\n- (list.clientWidth \/ maxChildWidth) * indentationSize\n+ (list.clientWidth \/ maxChildWidth) * indentationSizeRef.current\n );\n \n+ \/\/ TODO Debounce so newly added rows animate with pre-existing ones\n+ \/\/ debounce(() => {\n list.style.setProperty('--indentation-size', `${indentationSize}px`);\n+ indentationSizeRef.current = indentationSize;\n+ \/\/ }, 50);\n }\n \n function InnerElementType({ children, style, ...rest }) {\n const { ownerID } = useContext(TreeStateContext);\n \n+ const indentationSizeRef = useRef(12);\n+ const cachedChildWidths = useMemo>(\n+ () => new WeakMap(),\n+ []\n+ );\n+\n \/\/ The list may need to scroll horizontally due to deeply nested elements.\n \/\/ We don't know the maximum scroll width up front, because we're windowing.\n \/\/ What we can do instead, is passively measure the width of the current rows,\n@@ -361,7 +400,11 @@ function InnerElementType({ children, style, ...rest }) {\n \/\/ eslint-disable-next-line react-hooks\/exhaustive-deps\n useEffect(() => {\n if (divRef.current !== null) {\n- updateIndentationSizeVar(divRef.current);\n+ updateIndentationSizeVar(\n+ divRef.current,\n+ indentationSizeRef,\n+ cachedChildWidths\n+ );\n }\n });\n \n@@ -371,12 +414,16 @@ function InnerElementType({ children, style, ...rest }) {\n useEffect(() => {\n const invalidateMinWidth = () => {\n if (divRef.current !== null) {\n- updateIndentationSizeVar(divRef.current);\n+ updateIndentationSizeVar(\n+ divRef.current,\n+ indentationSizeRef,\n+ cachedChildWidths\n+ );\n }\n };\n window.addEventListener('resize', invalidateMinWidth);\n return () => window.removeEventListener('resize', invalidateMinWidth);\n- }, []);\n+ }, [cachedChildWidths]);\n \n \/\/ We shouldn't retain this width across different conceptual trees though,\n \/\/ so when the user opens the \"owners tree\" view, we should discard the previous width.\ndiff --git a\/src\/devtools\/views\/Components\/types.js b\/src\/devtools\/views\/Components\/types.js\nindex 5613e9c205..31c5c6c793 100644\n--- a\/src\/devtools\/views\/Components\/types.js\n+++ b\/src\/devtools\/views\/Components\/types.js\n@@ -14,6 +14,8 @@ export type Element = {|\n displayName: string | null,\n key: number | string | null,\n \n+ hocDisplayNames: null | Array,\n+\n \/\/ Should the elements children be visible in the tree?\n isCollapsed: boolean,\n \n@@ -33,6 +35,8 @@ export type Element = {|\n export type Owner = {|\n displayName: string | null,\n id: number,\n+ hocDisplayNames: Array | null,\n+ type: ElementType,\n |};\n \n export type OwnersList = {|\n@@ -69,6 +73,8 @@ export type InspectedElement = {|\n \n \/\/ Location of component in source coude.\n source: Object | null,\n+\n+ type: ElementType,\n |};\n \n \/\/ TODO: Add profiling type\ndiff --git a\/src\/devtools\/views\/root.css b\/src\/devtools\/views\/root.css\nindex f09eda35f8..4d27295233 100644\n--- a\/src\/devtools\/views\/root.css\n+++ b\/src\/devtools\/views\/root.css\n@@ -42,7 +42,7 @@\n --light-color-dimmer: #cfd1d5;\n --light-color-dimmest: #eff0f1;\n --light-color-expand-collapse-toggle: #777d88;\n- --light-color-guideline: rgba(0, 0, 0, 0.15);\n+ --light-color-guideline: rgba(0, 0, 0, 0.05);\n --light-color-jsx-arrow-brackets: #333333;\n --light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);\n --light-color-modal-background: rgba(255, 255, 255, 0.75);\n@@ -100,7 +100,7 @@\n --dark-color-dimmer: #777d88;\n --dark-color-dimmest: #4f5766;\n --dark-color-expand-collapse-toggle: #8f949d;\n- --dark-color-guideline: rgba(255, 255, 255, 0.15);\n+ --dark-color-guideline: rgba(255, 255, 255, 0.05);\n --dark-color-jsx-arrow-brackets: #777d88;\n --dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);\n --dark-color-modal-background: rgba(0, 0, 0, 0.75);\ndiff --git a\/src\/utils.js b\/src\/utils.js\nindex 3880bada6a..d763963ecb 100644\n--- a\/src\/utils.js\n+++ b\/src\/utils.js\n@@ -3,8 +3,14 @@\n import LRU from 'lru-cache';\n import { LOCAL_STORAGE_FILTER_PREFERENCES_KEY } from '.\/constants';\n import { ComponentFilterElementType, ElementTypeHostComponent } from '.\/types';\n+import {\n+ ElementTypeClass,\n+ ElementTypeForwardRef,\n+ ElementTypeFunction,\n+ ElementTypeMemo,\n+} from 'src\/types';\n \n-import type { ComponentFilter } from '.\/types';\n+import type { ComponentFilter, ElementType } from '.\/types';\n \n const FB_MODULE_RE = \/^(.*) \\[from (.*)\\]$\/;\n const cachedDisplayNames: WeakMap = new WeakMap();\n@@ -109,3 +115,33 @@ export function saveComponentFilters(\n JSON.stringify(componentFilters)\n );\n }\n+\n+export function separateDisplayNameAndHOCs(\n+ displayName: string | null,\n+ type: ElementType\n+): [string | null, Array | null] {\n+ if (displayName === null) {\n+ return [null, null];\n+ }\n+\n+ let hocDisplayNames = null;\n+\n+ switch (type) {\n+ case ElementTypeClass:\n+ case ElementTypeForwardRef:\n+ case ElementTypeFunction:\n+ case ElementTypeMemo:\n+ if (displayName.indexOf('(') >= 0) {\n+ const matches = displayName.match(\/[^()]+\/g);\n+ if (matches !== null) {\n+ displayName = matches.pop();\n+ hocDisplayNames = matches;\n+ }\n+ }\n+ break;\n+ default:\n+ break;\n+ }\n+\n+ return [displayName, hocDisplayNames];\n+}\n","parents":["19d95a1368076a5065449b6207d9b2351c1e9c44"]}

dillon1000/react

Files changed