{"commit":{"subject":"Merge pull request #295 from bvaughn\/horizontal-compression","authorName":"Brian Vaughn","authorEmail":"bvaughn@fb.com","shortRevision":"7ed3f6815c","revision":"7ed3f6815c1125c85897e8b999f2527fad79225d","authoredAt":"2019-06-04T13:59:22-07:00"},"patch":"diff --git a\/shells\/dev\/app\/DeeplyNestedComponents\/index.js b\/shells\/dev\/app\/DeeplyNestedComponents\/index.js\nindex 61deec3754..ad4468d2eb 100644\n--- a\/shells\/dev\/app\/DeeplyNestedComponents\/index.js\n+++ b\/shells\/dev\/app\/DeeplyNestedComponents\/index.js\n@@ -6,7 +6,8 @@ function wrapWithHoc(Component, index) {\n function HOC() {\n return ;\n }\n- HOC.displayName = `HOC-${index}`;\n+ HOC.displayName = `withHoc${index}(${Component.displayName ||\n+ Component.name})`;\n return HOC;\n }\n \ndiff --git a\/src\/__tests__\/__snapshots__\/ownersListContext-test.js.snap b\/src\/__tests__\/__snapshots__\/ownersListContext-test.js.snap\nindex 0f1e213a05..0699eb5b18 100644\n--- a\/src\/__tests__\/__snapshots__\/ownersListContext-test.js.snap\n+++ b\/src\/__tests__\/__snapshots__\/ownersListContext-test.js.snap\n@@ -11,15 +11,21 @@ exports[`OwnersListContext should fetch the owners list for the selected element\n Array [\n Object {\n \"displayName\": \"Grandparent\",\n+ \"hocDisplayNames\": null,\n \"id\": 7,\n+ \"type\": 5,\n },\n Object {\n \"displayName\": \"Parent\",\n+ \"hocDisplayNames\": null,\n \"id\": 9,\n+ \"type\": 5,\n },\n Object {\n \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n \"id\": 8,\n+ \"type\": 5,\n },\n ]\n `;\n@@ -36,15 +42,21 @@ exports[`OwnersListContext should fetch the owners list for the selected element\n Array [\n Object {\n \"displayName\": \"Grandparent\",\n+ \"hocDisplayNames\": null,\n \"id\": 2,\n+ \"type\": 5,\n },\n Object {\n \"displayName\": \"Parent\",\n+ \"hocDisplayNames\": null,\n \"id\": 3,\n+ \"type\": 5,\n },\n Object {\n \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n \"id\": 4,\n+ \"type\": 5,\n },\n ]\n `;\n@@ -53,11 +65,15 @@ exports[`OwnersListContext should fetch the owners list for the selected element\n Array [\n Object {\n \"displayName\": \"Grandparent\",\n+ \"hocDisplayNames\": null,\n \"id\": 2,\n+ \"type\": 5,\n },\n Object {\n \"displayName\": \"Parent\",\n+ \"hocDisplayNames\": null,\n \"id\": 3,\n+ \"type\": 5,\n },\n ]\n `;\n@@ -71,7 +87,9 @@ exports[`OwnersListContext should include the current element even if there are\n Array [\n Object {\n \"displayName\": \"Grandparent\",\n+ \"hocDisplayNames\": null,\n \"id\": 5,\n+ \"type\": 5,\n },\n ]\n `;\ndiff --git a\/src\/__tests__\/__snapshots__\/treeContext-test.js.snap b\/src\/__tests__\/__snapshots__\/treeContext-test.js.snap\nindex 3a9149861b..d50b0a7172 100644\n--- a\/src\/__tests__\/__snapshots__\/treeContext-test.js.snap\n+++ b\/src\/__tests__\/__snapshots__\/treeContext-test.js.snap\n@@ -29,6 +29,7 @@ Object {\n \"children\": Array [],\n \"depth\": 0,\n \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n \"id\": 3,\n \"isCollapsed\": false,\n \"key\": null,\n@@ -70,6 +71,7 @@ Object {\n \"children\": Array [],\n \"depth\": 0,\n \"displayName\": \"Parent\",\n+ \"hocDisplayNames\": null,\n \"id\": 2,\n \"isCollapsed\": false,\n \"key\": null,\n@@ -136,6 +138,7 @@ Object {\n ],\n \"depth\": 0,\n \"displayName\": \"Parent\",\n+ \"hocDisplayNames\": null,\n \"id\": 3,\n \"isCollapsed\": false,\n \"key\": null,\n@@ -148,6 +151,7 @@ Object {\n \"children\": Array [],\n \"depth\": 1,\n \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n \"id\": 4,\n \"isCollapsed\": false,\n \"key\": \"0\",\n@@ -160,6 +164,7 @@ Object {\n \"children\": Array [],\n \"depth\": 1,\n \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n \"id\": 5,\n \"isCollapsed\": false,\n \"key\": \"1\",\n@@ -189,6 +194,7 @@ Object {\n ],\n \"depth\": 0,\n \"displayName\": \"Parent\",\n+ \"hocDisplayNames\": null,\n \"id\": 3,\n \"isCollapsed\": false,\n \"key\": null,\n@@ -201,6 +207,7 @@ Object {\n \"children\": Array [],\n \"depth\": 1,\n \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n \"id\": 4,\n \"isCollapsed\": false,\n \"key\": \"0\",\n@@ -228,6 +235,7 @@ Object {\n \"children\": Array [],\n \"depth\": 0,\n \"displayName\": \"Parent\",\n+ \"hocDisplayNames\": null,\n \"id\": 3,\n \"isCollapsed\": false,\n \"key\": null,\n@@ -280,6 +288,7 @@ Object {\n ],\n \"depth\": 0,\n \"displayName\": \"Parent\",\n+ \"hocDisplayNames\": null,\n \"id\": 3,\n \"isCollapsed\": false,\n \"key\": null,\n@@ -292,6 +301,7 @@ Object {\n \"children\": Array [],\n \"depth\": 1,\n \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n \"id\": 4,\n \"isCollapsed\": false,\n \"key\": null,\n@@ -304,6 +314,7 @@ Object {\n \"children\": Array [],\n \"depth\": 1,\n \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n \"id\": 5,\n \"isCollapsed\": false,\n \"key\": null,\ndiff --git a\/src\/backend\/agent.js b\/src\/backend\/agent.js\nindex 4b8873d475..5a7aa5740f 100644\n--- a\/src\/backend\/agent.js\n+++ b\/src\/backend\/agent.js\n@@ -11,12 +11,12 @@ import {\n import { hideOverlay, showOverlay } from '.\/views\/Highlighter';\n \n import type {\n+ OwnersList,\n PathFrame,\n PathMatch,\n RendererID,\n RendererInterface,\n } from '.\/types';\n-import type { OwnersList } from 'src\/devtools\/views\/Components\/types';\n import type { Bridge, ComponentFilter } from '..\/types';\n \n const debug = (methodName, ...args) => {\ndiff --git a\/src\/backend\/renderer.js b\/src\/backend\/renderer.js\nindex 70e5ecd7ce..ad099cf6df 100644\n--- a\/src\/backend\/renderer.js\n+++ b\/src\/backend\/renderer.js\n@@ -4,6 +4,7 @@ import { gte } from 'semver';\n import {\n ComponentFilterDisplayName,\n ComponentFilterElementType,\n+ ComponentFilterHOC,\n ComponentFilterLocation,\n ElementTypeClass,\n ElementTypeContext,\n@@ -39,6 +40,8 @@ import type {\n CommitDataBackend,\n DevToolsHook,\n Fiber,\n+ InspectedElement,\n+ Owner,\n PathFrame,\n PathMatch,\n ProfilingDataBackend,\n@@ -46,10 +49,6 @@ import type {\n ReactRenderer,\n RendererInterface,\n } from '.\/types';\n-import type {\n- InspectedElement,\n- Owner,\n-} from 'src\/devtools\/views\/Components\/types';\n import type { Interaction } from 'src\/devtools\/views\/Profiler\/types';\n import type { ComponentFilter, ElementType } from 'src\/types';\n \n@@ -321,6 +320,9 @@ export function attach(\n hideElementsWithPaths.add(new RegExp(componentFilter.value, 'i'));\n }\n break;\n+ case ComponentFilterHOC:\n+ hideElementsWithDisplayNames.add(new RegExp('\\\\('));\n+ break;\n default:\n console.warn(\n `Invalid component filter type \"${componentFilter.type}\"`\n@@ -1752,6 +1754,7 @@ export function attach(\n {\n displayName: getDisplayNameForFiber(fiber) || 'Anonymous',\n id,\n+ type: getElementTypeForFiber(fiber),\n },\n ];\n \n@@ -1761,6 +1764,7 @@ export function attach(\n owners.unshift({\n displayName: getDisplayNameForFiber(owner) || 'Anonymous',\n id: getFiberID(getPrimaryFiber(owner)),\n+ type: getElementTypeForFiber(owner),\n });\n owner = owner._debugOwner || null;\n }\n@@ -1858,6 +1862,7 @@ export function attach(\n owners.push({\n displayName: getDisplayNameForFiber(owner) || 'Anonymous',\n id: getFiberID(getPrimaryFiber(owner)),\n+ type: getElementTypeForFiber(owner),\n });\n owner = owner._debugOwner || null;\n }\n@@ -1904,6 +1909,7 @@ export function attach(\n canViewSource,\n \n displayName: getDisplayNameForFiber(fiber),\n+ type: getElementTypeForFiber(fiber),\n \n \/\/ Inspectable properties.\n \/\/ TODO Review sanitization approach for the below inspectable values.\n@@ -1919,7 +1925,7 @@ export function attach(\n owners,\n \n \/\/ Location of component in source coude.\n- source: _debugSource,\n+ source: _debugSource || null,\n };\n }\n \n@@ -1980,6 +1986,9 @@ export function attach(\n if (nativeNodes !== null) {\n console.log('Nodes:', nativeNodes);\n }\n+ if (result.source !== null) {\n+ console.log('Location:', result.source);\n+ }\n if (window.chrome || \/firefox\/i.test(navigator.userAgent)) {\n console.log(\n 'Right-click any value to save it as a global variable for further inspection.'\ndiff --git a\/src\/backend\/types.js b\/src\/backend\/types.js\nindex 8972fbd4e2..bce7238efd 100644\n--- a\/src\/backend\/types.js\n+++ b\/src\/backend\/types.js\n@@ -1,10 +1,6 @@\n \/\/ @flow\n \n import type { ComponentFilter, ElementType } from 'src\/types';\n-import type {\n- InspectedElement,\n- Owner,\n-} from 'src\/devtools\/views\/Components\/types';\n import type { Interaction } from 'src\/devtools\/views\/Profiler\/types';\n \n type BundleType =\n@@ -156,6 +152,50 @@ export type PathMatch = {|\n isFullMatch: boolean,\n |};\n \n+export type Owner = {|\n+ displayName: string | null,\n+ id: number,\n+ type: ElementType,\n+|};\n+\n+export type OwnersList = {|\n+ id: number,\n+ owners: Array | null,\n+|};\n+\n+export type InspectedElement = {|\n+ id: number,\n+\n+ displayName: string | null,\n+\n+ \/\/ Does the current renderer support editable hooks?\n+ canEditHooks: boolean,\n+\n+ \/\/ Does the current renderer support editable function props?\n+ canEditFunctionProps: boolean,\n+\n+ \/\/ Is this Suspense, and can its value be overriden now?\n+ canToggleSuspense: boolean,\n+\n+ \/\/ Can view component source location.\n+ canViewSource: boolean,\n+\n+ \/\/ Inspectable properties.\n+ context: Object | null,\n+ events: Object | null,\n+ hooks: Object | null,\n+ props: Object | null,\n+ state: Object | null,\n+\n+ \/\/ List of owners\n+ owners: Array | null,\n+\n+ \/\/ Location of component in source coude.\n+ source: Source | null,\n+\n+ type: ElementType,\n+|};\n+\n export type RendererInterface = {\n cleanup: () => void,\n findNativeNodesForFiberID: (id: number) => ?Array,\ndiff --git a\/src\/devtools\/store.js b\/src\/devtools\/store.js\nindex c3a8ccabb9..b1176baeed 100644\n--- a\/src\/devtools\/store.js\n+++ b\/src\/devtools\/store.js\n@@ -12,6 +12,7 @@ import { ElementTypeRoot } from '..\/types';\n import {\n getSavedComponentFilters,\n saveComponentFilters,\n+ separateDisplayNameAndHOCs,\n utfDecodeString,\n } from '..\/utils';\n import { __DEBUG__ } from '..\/constants';\n@@ -674,6 +675,7 @@ export default class Store extends EventEmitter {\n children: [],\n depth: -1,\n displayName: null,\n+ hocDisplayNames: null,\n id,\n isCollapsed: false, \/\/ Never collapse roots; it would hide the entire tree.\n key: null,\n@@ -717,10 +719,16 @@ export default class Store extends EventEmitter {\n ): any): Element);\n parentElement.children.push(id);\n \n+ const [\n+ displayNameWithoutHOCs,\n+ hocDisplayNames,\n+ ] = separateDisplayNameAndHOCs(displayName, type);\n+\n const element: Element = {\n children: [],\n depth: parentElement.depth + 1,\n- displayName,\n+ displayName: displayNameWithoutHOCs,\n+ hocDisplayNames,\n id,\n isCollapsed: this._collapseNodesByDefault,\n key,\ndiff --git a\/src\/devtools\/views\/Components\/Badge.css b\/src\/devtools\/views\/Components\/Badge.css\nnew file mode 100644\nindex 0000000000..22f749cc5b\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/Badge.css\n@@ -0,0 +1,17 @@\n+.Badge {\n+ display: inline-block;\n+ background-color: var(--color-component-badge-background);\n+ color: var(--color-text);\n+ padding: 0.125rem 0.25rem;\n+ line-height: normal;\n+ border-radius: 0.125rem;\n+ margin-right: 0.25rem;\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-small);\n+}\n+\n+.ExtraLabel {\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-small);\n+ color: var(--color-component-badge-count);\n+}\ndiff --git a\/src\/devtools\/views\/Components\/Badge.js b\/src\/devtools\/views\/Components\/Badge.js\nnew file mode 100644\nindex 0000000000..76ac7bf624\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/Badge.js\n@@ -0,0 +1,47 @@\n+\/\/ @flow\n+\n+import React, { Fragment } from 'react';\n+import { ElementTypeMemo, ElementTypeForwardRef } from 'src\/types';\n+import styles from '.\/Badge.css';\n+\n+import type { ElementType } from 'src\/types';\n+\n+type Props = {|\n+ className?: string,\n+ hocDisplayNames: Array | null,\n+ type: ElementType,\n+|};\n+\n+export default function Badge({ className, hocDisplayNames, type }: Props) {\n+ let hocDisplayName = null;\n+ let totalBadgeCount = 0;\n+ let typeLabel = null;\n+\n+ if (hocDisplayNames !== null) {\n+ hocDisplayName = hocDisplayNames[0];\n+ totalBadgeCount += hocDisplayNames.length;\n+ }\n+\n+ if (type === ElementTypeMemo) {\n+ typeLabel = 'Memo';\n+ totalBadgeCount++;\n+ } else if (type === ElementTypeForwardRef) {\n+ typeLabel = 'ForwardRef';\n+ totalBadgeCount++;\n+ }\n+\n+ if (hocDisplayNames === null && typeLabel === null) {\n+ return null;\n+ }\n+\n+ return (\n+ \n+

\n+ {hocDisplayName || typeLabel}\n+ <\/div>\n+ {totalBadgeCount > 1 && (\n+

+{totalBadgeCount - 1}<\/div>\n+ )}\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Components\/ComponentFiltersModal.js b\/src\/devtools\/views\/Components\/ComponentFiltersModal.js\nindex 7797dcbf24..53af031da5 100644\n--- a\/src\/devtools\/views\/Components\/ComponentFiltersModal.js\n+++ b\/src\/devtools\/views\/Components\/ComponentFiltersModal.js\n@@ -15,8 +15,9 @@ import ButtonIcon from '..\/ButtonIcon';\n import Toggle from '..\/Toggle';\n import Store from 'src\/devtools\/store';\n import {\n- ComponentFilterElementType,\n ComponentFilterDisplayName,\n+ ComponentFilterElementType,\n+ ComponentFilterHOC,\n ComponentFilterLocation,\n ElementTypeClass,\n ElementTypeContext,\n@@ -32,6 +33,7 @@ import {\n import styles from '.\/ComponentFiltersModal.css';\n \n import type {\n+ BooleanComponentFilter,\n ComponentFilter,\n ComponentFilterType,\n ElementType,\n@@ -170,15 +172,18 @@ function ComponentFiltersModal({ store, setIsModalShowing }: Props) {\n

dillon1000/react

Files changed