{"commit":{"revision":"0545f366d4d6b5959f4bb172e810c745f74b9513","shortRevision":"0545f366d4","authorEmail":"bvaughn@fb.com","authoredAt":"2019-10-03T11:07:18-07:00","subject":"Added trace updates feature (DOM only) (#16989)","authorName":"Brian Vaughn"},"body":"* Added trace updates feature (DOM only)\r\n* Updated DevTools CHANGELOG","patch":"diff --git a\/packages\/react-devtools-core\/src\/backend.js b\/packages\/react-devtools-core\/src\/backend.js\nindex e84a07fd3e..df8cb0c07e 100644\n--- a\/packages\/react-devtools-core\/src\/backend.js\n+++ b\/packages\/react-devtools-core\/src\/backend.js\n@@ -114,7 +114,7 @@ export function connectToDevTools(options: ?ConnectOptions) {\n }\n \n if (bridge !== null) {\n- bridge.emit('shutdown');\n+ bridge.shutdown();\n }\n \n scheduleRetry();\ndiff --git a\/packages\/react-devtools-extensions\/src\/backend.js b\/packages\/react-devtools-extensions\/src\/backend.js\nindex 072e8de09f..6a8fe9c3e5 100644\n--- a\/packages\/react-devtools-extensions\/src\/backend.js\n+++ b\/packages\/react-devtools-extensions\/src\/backend.js\n@@ -67,6 +67,10 @@ function setup(hook) {\n \n initBackend(hook, agent, window);\n \n+ \/\/ Let the frontend know that the backend has attached listeners and is ready for messages.\n+ \/\/ This covers the case of of syncing saved values after reloading\/navigating while DevTools remain open.\n+ bridge.send('extensionBackendInitialized');\n+\n \/\/ Setup React Native style editor if a renderer like react-native-web has injected it.\n if (hook.resolveRNStyle) {\n setupNativeStyleEditor(\ndiff --git a\/packages\/react-devtools-extensions\/src\/main.js b\/packages\/react-devtools-extensions\/src\/main.js\nindex d535ba7303..229eab5c6a 100644\n--- a\/packages\/react-devtools-extensions\/src\/main.js\n+++ b\/packages\/react-devtools-extensions\/src\/main.js\n@@ -9,6 +9,7 @@ import {\n getBrowserName,\n getBrowserTheme,\n } from '.\/utils';\n+import {LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY} from 'react-devtools-shared\/src\/constants';\n import {\n getSavedComponentFilters,\n getAppendComponentStack,\n@@ -125,10 +126,21 @@ function createPanelIfReactLoaded() {\n profilingData = store.profilerStore.profilingData;\n }\n \n+ bridge.addListener('extensionBackendInitialized', () => {\n+ \/\/ Initialize the renderer's trace-updates setting.\n+ \/\/ This handles the case of navigating to a new page after the DevTools have already been shown.\n+ bridge.send(\n+ 'setTraceUpdatesEnabled',\n+ localStorageGetItem(LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY) ===\n+ 'true',\n+ );\n+ });\n+\n store = new Store(bridge, {\n isProfiling,\n supportsReloadAndProfile: isChrome,\n supportsProfiling,\n+ supportsTraceUpdates: true,\n });\n store.profilerStore.profilingData = profilingData;\n \ndiff --git a\/packages\/react-devtools-inline\/src\/frontend.js b\/packages\/react-devtools-inline\/src\/frontend.js\nindex 286d1c28a6..86f3300d4b 100644\n--- a\/packages\/react-devtools-inline\/src\/frontend.js\n+++ b\/packages\/react-devtools-inline\/src\/frontend.js\n@@ -64,7 +64,7 @@ export function initialize(\n },\n });\n \n- const store: Store = new Store(bridge);\n+ const store: Store = new Store(bridge, {supportsTraceUpdates: true});\n \n const ForwardRef = forwardRef((props, ref) => (\n \ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/agent.js b\/packages\/react-devtools-shared\/src\/backend\/agent.js\nindex 3e73c0f750..5161b434c5 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/agent.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/agent.js\n@@ -21,6 +21,10 @@ import {\n sessionStorageSetItem,\n } from 'react-devtools-shared\/src\/storage';\n import setupHighlighter from '.\/views\/Highlighter';\n+import {\n+ initialize as setupTraceUpdates,\n+ toggleEnabled as setTraceUpdatesEnabled,\n+} from '.\/views\/TraceUpdates';\n import {patch as patchConsole, unpatch as unpatchConsole} from '.\/console';\n \n import type {BackendBridge} from 'react-devtools-shared\/src\/bridge';\n@@ -87,6 +91,7 @@ export default class Agent extends EventEmitter<{|\n hideNativeHighlight: [],\n showNativeHighlight: [NativeType],\n shutdown: [],\n+ traceUpdates: [Set],\n |}> {\n _bridge: BackendBridge;\n _isProfiling: boolean = false;\n@@ -94,6 +99,7 @@ export default class Agent extends EventEmitter<{|\n _rendererInterfaces: {[key: RendererID]: RendererInterface} = {};\n _persistedSelection: PersistedSelection | null = null;\n _persistedSelectionMatch: PathMatch | null = null;\n+ _traceUpdatesEnabled: boolean = false;\n \n constructor(bridge: BackendBridge) {\n super();\n@@ -131,6 +137,7 @@ export default class Agent extends EventEmitter<{|\n bridge.addListener('overrideState', this.overrideState);\n bridge.addListener('overrideSuspense', this.overrideSuspense);\n bridge.addListener('reloadAndProfile', this.reloadAndProfile);\n+ bridge.addListener('setTraceUpdatesEnabled', this.setTraceUpdatesEnabled);\n bridge.addListener('startProfiling', this.startProfiling);\n bridge.addListener('stopProfiling', this.stopProfiling);\n bridge.addListener(\n@@ -159,6 +166,7 @@ export default class Agent extends EventEmitter<{|\n bridge.send('isBackendStorageAPISupported', isBackendStorageAPISupported);\n \n setupHighlighter(bridge, this);\n+ setupTraceUpdates(this);\n }\n \n get rendererInterfaces(): {[key: RendererID]: RendererInterface} {\n@@ -340,6 +348,8 @@ export default class Agent extends EventEmitter<{|\n rendererInterface.startProfiling(this._recordChangeDescriptions);\n }\n \n+ rendererInterface.setTraceUpdatesEnabled(this._traceUpdatesEnabled);\n+\n \/\/ When the renderer is attached, we need to tell it whether\n \/\/ we remember the previous selection that we'd like to restore.\n \/\/ It'll start tracking mounts for matches to the last selection path.\n@@ -349,6 +359,19 @@ export default class Agent extends EventEmitter<{|\n }\n }\n \n+ setTraceUpdatesEnabled = (traceUpdatesEnabled: boolean) => {\n+ this._traceUpdatesEnabled = traceUpdatesEnabled;\n+\n+ setTraceUpdatesEnabled(traceUpdatesEnabled);\n+\n+ for (let rendererID in this._rendererInterfaces) {\n+ const renderer = ((this._rendererInterfaces[\n+ (rendererID: any)\n+ ]: any): RendererInterface);\n+ renderer.setTraceUpdatesEnabled(traceUpdatesEnabled);\n+ }\n+ };\n+\n syncSelectionFromNativeElementsPanel = () => {\n const target = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0;\n if (target == null) {\n@@ -416,6 +439,10 @@ export default class Agent extends EventEmitter<{|\n }\n };\n \n+ onTraceUpdates = (nodes: Set) => {\n+ this.emit('traceUpdates', nodes);\n+ };\n+\n onHookOperations = (operations: Array) => {\n if (__DEBUG__) {\n debug('onHookOperations', operations);\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/index.js b\/packages\/react-devtools-shared\/src\/backend\/index.js\nindex 73e6c9f8f2..4af370046f 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/index.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/index.js\n@@ -44,6 +44,7 @@ export function initBackend(\n }),\n \n hook.sub('operations', agent.onHookOperations),\n+ hook.sub('traceUpdates', agent.onTraceUpdates),\n \n \/\/ TODO Add additional subscriptions required for profiling mode\n ];\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/legacy\/renderer.js b\/packages\/react-devtools-shared\/src\/backend\/legacy\/renderer.js\nindex bc2fb30ccf..3e72328745 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/legacy\/renderer.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/legacy\/renderer.js\n@@ -912,6 +912,10 @@ export function attach(\n \/\/ Not implemented.\n }\n \n+ function setTraceUpdatesEnabled(enabled: boolean) {\n+ \/\/ Not implemented.\n+ }\n+\n function setTrackedPath(path: Array | null) {\n \/\/ Not implemented.\n }\n@@ -945,6 +949,7 @@ export function attach(\n setInHook,\n setInProps,\n setInState,\n+ setTraceUpdatesEnabled,\n setTrackedPath,\n startProfiling,\n stopProfiling,\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/renderer.js b\/packages\/react-devtools-shared\/src\/backend\/renderer.js\nindex 7a5268f632..6f285495c0 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/renderer.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/renderer.js\n@@ -57,6 +57,7 @@ import type {\n InspectedElement,\n InspectedElementPayload,\n InstanceAndStyle,\n+ NativeType,\n Owner,\n PathFrame,\n PathMatch,\n@@ -532,6 +533,10 @@ export function attach(\n const hideElementsWithPaths: Set = new Set();\n const hideElementsWithTypes: Set = new Set();\n \n+ \/\/ Highlight updates\n+ let traceUpdatesEnabled: boolean = false;\n+ let traceUpdatesForNodes: Set = new Set();\n+\n function applyComponentFilters(componentFilters: Array) {\n hideElementsWithTypes.clear();\n hideElementsWithDisplayNames.clear();\n@@ -613,7 +618,7 @@ export function attach(\n hook.getFiberRoots(rendererID).forEach(root => {\n currentRootID = getFiberID(getPrimaryFiber(root.current));\n setRootPseudoKey(currentRootID, root.current);\n- mountFiberRecursively(root.current, null);\n+ mountFiberRecursively(root.current, null, false, false);\n flushPendingEvents(root);\n currentRootID = -1;\n });\n@@ -1227,7 +1232,8 @@ export function attach(\n function mountFiberRecursively(\n fiber: Fiber,\n parentFiber: Fiber | null,\n- traverseSiblings = false,\n+ traverseSiblings: boolean,\n+ traceNearestHostComponentUpdate: boolean,\n ) {\n if (__DEBUG__) {\n debug('mountFiberRecursively()', fiber, parentFiber);\n@@ -1244,6 +1250,20 @@ export function attach(\n recordMount(fiber, parentFiber);\n }\n \n+ if (traceUpdatesEnabled) {\n+ if (traceNearestHostComponentUpdate) {\n+ const elementType = getElementTypeForFiber(fiber);\n+ \/\/ If an ancestor updated, we should mark the nearest host nodes for highlighting.\n+ if (elementType === ElementTypeHostComponent) {\n+ traceUpdatesForNodes.add(fiber.stateNode);\n+ traceNearestHostComponentUpdate = false;\n+ }\n+ }\n+\n+ \/\/ We intentionally do not re-enable the traceNearestHostComponentUpdate flag in this branch,\n+ \/\/ because we don't want to highlight every host node inside of a newly mounted subtree.\n+ }\n+\n const isTimedOutSuspense =\n fiber.tag === ReactTypeOfWork.SuspenseComponent &&\n fiber.memoizedState !== null;\n@@ -1264,6 +1284,7 @@ export function attach(\n fallbackChild,\n shouldIncludeInTree ? fiber : parentFiber,\n true,\n+ traceNearestHostComponentUpdate,\n );\n }\n } else {\n@@ -1272,6 +1293,7 @@ export function attach(\n fiber.child,\n shouldIncludeInTree ? fiber : parentFiber,\n true,\n+ traceNearestHostComponentUpdate,\n );\n }\n }\n@@ -1281,7 +1303,12 @@ export function attach(\n updateTrackedPathStateAfterMount(mightSiblingsBeOnTrackedPath);\n \n if (traverseSiblings && fiber.sibling !== null) {\n- mountFiberRecursively(fiber.sibling, parentFiber, true);\n+ mountFiberRecursively(\n+ fiber.sibling,\n+ parentFiber,\n+ true,\n+ traceNearestHostComponentUpdate,\n+ );\n }\n }\n \n@@ -1430,11 +1457,35 @@ export function attach(\n nextFiber: Fiber,\n prevFiber: Fiber,\n parentFiber: Fiber | null,\n+ traceNearestHostComponentUpdate: boolean,\n ): boolean {\n if (__DEBUG__) {\n debug('updateFiberRecursively()', nextFiber, parentFiber);\n }\n \n+ if (traceUpdatesEnabled) {\n+ const elementType = getElementTypeForFiber(nextFiber);\n+ if (traceNearestHostComponentUpdate) {\n+ \/\/ If an ancestor updated, we should mark the nearest host nodes for highlighting.\n+ if (elementType === ElementTypeHostComponent) {\n+ traceUpdatesForNodes.add(nextFiber.stateNode);\n+ traceNearestHostComponentUpdate = false;\n+ }\n+ } else {\n+ if (\n+ elementType === ElementTypeFunction ||\n+ elementType === ElementTypeClass ||\n+ elementType === ElementTypeContext\n+ ) {\n+ \/\/ Otherwise if this is a traced ancestor, flag for the nearest host descendant(s).\n+ traceNearestHostComponentUpdate = didFiberRender(\n+ prevFiber,\n+ nextFiber,\n+ );\n+ }\n+ }\n+ }\n+\n if (\n mostRecentlyInspectedElement !== null &&\n mostRecentlyInspectedElement.id ===\n@@ -1481,6 +1532,7 @@ export function attach(\n nextFallbackChildSet,\n prevFallbackChildSet,\n nextFiber,\n+ traceNearestHostComponentUpdate,\n )\n ) {\n shouldResetChildren = true;\n@@ -1492,7 +1544,12 @@ export function attach(\n \/\/ 2. Mount primary set\n const nextPrimaryChildSet = nextFiber.child;\n if (nextPrimaryChildSet !== null) {\n- mountFiberRecursively(nextPrimaryChildSet, nextFiber, true);\n+ mountFiberRecursively(\n+ nextPrimaryChildSet,\n+ nextFiber,\n+ true,\n+ traceNearestHostComponentUpdate,\n+ );\n }\n shouldResetChildren = true;\n } else if (!prevDidTimeout && nextDidTimeOut) {\n@@ -1507,7 +1564,12 @@ export function attach(\n ? nextFiberChild.sibling\n : null;\n if (nextFallbackChildSet != null) {\n- mountFiberRecursively(nextFallbackChildSet, nextFiber, true);\n+ mountFiberRecursively(\n+ nextFallbackChildSet,\n+ nextFiber,\n+ true,\n+ traceNearestHostComponentUpdate,\n+ );\n shouldResetChildren = true;\n }\n } else {\n@@ -1530,6 +1592,7 @@ export function attach(\n nextChild,\n prevChild,\n shouldIncludeInTree ? nextFiber : parentFiber,\n+ traceNearestHostComponentUpdate,\n )\n ) {\n \/\/ If a nested tree child order changed but it can't handle its own\n@@ -1547,6 +1610,8 @@ export function attach(\n mountFiberRecursively(\n nextChild,\n shouldIncludeInTree ? nextFiber : parentFiber,\n+ false,\n+ traceNearestHostComponentUpdate,\n );\n shouldResetChildren = true;\n }\n@@ -1562,6 +1627,19 @@ export function attach(\n if (prevChildAtSameIndex !== null) {\n shouldResetChildren = true;\n }\n+ } else {\n+ if (traceUpdatesEnabled) {\n+ \/\/ If we're tracing updates and we've bailed out before reaching a host node,\n+ \/\/ we should fall back to recursively marking the nearest host descendates for highlight.\n+ if (traceNearestHostComponentUpdate) {\n+ const hostFibers = findAllCurrentHostFibers(\n+ getFiberID(getPrimaryFiber(nextFiber)),\n+ );\n+ hostFibers.forEach(hostFiber => {\n+ traceUpdatesForNodes.add(hostFiber.stateNode);\n+ });\n+ }\n+ }\n }\n }\n if (shouldIncludeInTree) {\n@@ -1645,7 +1723,7 @@ export function attach(\n };\n }\n \n- mountFiberRecursively(root.current, null);\n+ mountFiberRecursively(root.current, null, false, false);\n flushPendingEvents(root);\n currentRootID = -1;\n });\n@@ -1671,6 +1749,10 @@ export function attach(\n mightBeOnTrackedPath = true;\n }\n \n+ if (traceUpdatesEnabled) {\n+ traceUpdatesForNodes.clear();\n+ }\n+\n \/\/ Checking root.memoizedInteractions handles multi-renderer edge-case-\n \/\/ where some v16 renderers support profiling and others don't.\n const isProfilingSupported = root.memoizedInteractions != null;\n@@ -1704,10 +1786,10 @@ export function attach(\n if (!wasMounted && isMounted) {\n \/\/ Mount a new root.\n setRootPseudoKey(currentRootID, current);\n- mountFiberRecursively(current, null);\n+ mountFiberRecursively(current, null, false, false);\n } else if (wasMounted && isMounted) {\n \/\/ Update an existing root.\n- updateFiberRecursively(current, alternate, null);\n+ updateFiberRecursively(current, alternate, null, false);\n } else if (wasMounted && !isMounted) {\n \/\/ Unmount an existing root.\n removeRootPseudoKey(currentRootID);\n@@ -1716,7 +1798,7 @@ export function attach(\n } else {\n \/\/ Mount a new root.\n setRootPseudoKey(currentRootID, current);\n- mountFiberRecursively(current, null);\n+ mountFiberRecursively(current, null, false, false);\n }\n \n if (isProfiling && isProfilingSupported) {\n@@ -1738,6 +1820,10 @@ export function attach(\n \/\/ We're done here.\n flushPendingEvents(root);\n \n+ if (traceUpdatesEnabled) {\n+ hook.emit('traceUpdates', traceUpdatesForNodes);\n+ }\n+\n currentRootID = -1;\n }\n \n@@ -3015,6 +3101,10 @@ export function attach(\n }\n };\n \n+ function setTraceUpdatesEnabled(isEnabled: boolean): void {\n+ traceUpdatesEnabled = isEnabled;\n+ }\n+\n return {\n cleanup,\n findNativeNodesForFiberID,\n@@ -3036,6 +3126,7 @@ export function attach(\n setInHook,\n setInProps,\n setInState,\n+ setTraceUpdatesEnabled,\n setTrackedPath,\n startProfiling,\n stopProfiling,\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/types.js b\/packages\/react-devtools-shared\/src\/backend\/types.js\nindex bf6a4c7286..118049abc2 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/types.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/types.js\n@@ -252,10 +252,11 @@ export type RendererInterface = {\n ) => void,\n setInProps: (id: number, path: Array, value: any) => void,\n setInState: (id: number, path: Array, value: any) => void,\n+ setTraceUpdatesEnabled: (enabled: boolean) => void,\n setTrackedPath: (path: Array | null) => void,\n startProfiling: (recordChangeDescriptions: boolean) => void,\n stopProfiling: () => void,\n- updateComponentFilters: (somponentFilters: Array) => void,\n+ updateComponentFilters: (componentFilters: Array) => void,\n };\n \n export type Handler = (data: any) => void;\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/views\/Highlighter\/Overlay.js b\/packages\/react-devtools-shared\/src\/backend\/views\/Highlighter\/Overlay.js\nindex 4cf78b264c..cc2ac643d5 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/views\/Highlighter\/Overlay.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/views\/Highlighter\/Overlay.js\n@@ -8,15 +8,9 @@\n *\/\n \n import assign from 'object-assign';\n+import {getElementDimensions, getNestedBoundingClientRect} from '..\/utils';\n \n-type Rect = {\n- bottom: number,\n- height: number,\n- left: number,\n- right: number,\n- top: number,\n- width: number,\n-};\n+import type {Rect} from '..\/utils';\n \n type Box = {|top: number, left: number, width: number, height: number|};\n \n@@ -333,116 +327,6 @@ function findTipPos(dims, bounds, tipSize) {\n };\n }\n \n-export function getElementDimensions(domElement: Element) {\n- const calculatedStyle = window.getComputedStyle(domElement);\n- return {\n- borderLeft: parseInt(calculatedStyle.borderLeftWidth, 10),\n- borderRight: parseInt(calculatedStyle.borderRightWidth, 10),\n- borderTop: parseInt(calculatedStyle.borderTopWidth, 10),\n- borderBottom: parseInt(calculatedStyle.borderBottomWidth, 10),\n- marginLeft: parseInt(calculatedStyle.marginLeft, 10),\n- marginRight: parseInt(calculatedStyle.marginRight, 10),\n- marginTop: parseInt(calculatedStyle.marginTop, 10),\n- marginBottom: parseInt(calculatedStyle.marginBottom, 10),\n- paddingLeft: parseInt(calculatedStyle.paddingLeft, 10),\n- paddingRight: parseInt(calculatedStyle.paddingRight, 10),\n- paddingTop: parseInt(calculatedStyle.paddingTop, 10),\n- paddingBottom: parseInt(calculatedStyle.paddingBottom, 10),\n- };\n-}\n-\n-\/\/ Get the window object for the document that a node belongs to,\n-\/\/ or return null if it cannot be found (node not attached to DOM,\n-\/\/ etc).\n-function getOwnerWindow(node: HTMLElement): typeof window | null {\n- if (!node.ownerDocument) {\n- return null;\n- }\n- return node.ownerDocument.defaultView;\n-}\n-\n-\/\/ Get the iframe containing a node, or return null if it cannot\n-\/\/ be found (node not within iframe, etc).\n-function getOwnerIframe(node: HTMLElement): HTMLElement | null {\n- const nodeWindow = getOwnerWindow(node);\n- if (nodeWindow) {\n- return nodeWindow.frameElement;\n- }\n- return null;\n-}\n-\n-\/\/ Get a bounding client rect for a node, with an\n-\/\/ offset added to compensate for its border.\n-function getBoundingClientRectWithBorderOffset(node: HTMLElement) {\n- const dimensions = getElementDimensions(node);\n- return mergeRectOffsets([\n- node.getBoundingClientRect(),\n- {\n- top: dimensions.borderTop,\n- left: dimensions.borderLeft,\n- bottom: dimensions.borderBottom,\n- right: dimensions.borderRight,\n- \/\/ This width and height won't get used by mergeRectOffsets (since this\n- \/\/ is not the first rect in the array), but we set them so that this\n- \/\/ object typechecks as a ClientRect.\n- width: 0,\n- height: 0,\n- },\n- ]);\n-}\n-\n-\/\/ Add together the top, left, bottom, and right properties of\n-\/\/ each ClientRect, but keep the width and height of the first one.\n-function mergeRectOffsets(rects: Array): Rect {\n- return rects.reduce((previousRect, rect) => {\n- if (previousRect == null) {\n- return rect;\n- }\n-\n- return {\n- top: previousRect.top + rect.top,\n- left: previousRect.left + rect.left,\n- width: previousRect.width,\n- height: previousRect.height,\n- bottom: previousRect.bottom + rect.bottom,\n- right: previousRect.right + rect.right,\n- };\n- });\n-}\n-\n-\/\/ Calculate a boundingClientRect for a node relative to boundaryWindow,\n-\/\/ taking into account any offsets caused by intermediate iframes.\n-function getNestedBoundingClientRect(\n- node: HTMLElement,\n- boundaryWindow: typeof window,\n-): Rect {\n- const ownerIframe = getOwnerIframe(node);\n- if (ownerIframe && ownerIframe !== boundaryWindow) {\n- const rects = [node.getBoundingClientRect()];\n- let currentIframe = ownerIframe;\n- let onlyOneMore = false;\n- while (currentIframe) {\n- const rect = getBoundingClientRectWithBorderOffset(currentIframe);\n- rects.push(rect);\n- currentIframe = getOwnerIframe(currentIframe);\n-\n- if (onlyOneMore) {\n- break;\n- }\n- \/\/ We don't want to calculate iframe offsets upwards beyond\n- \/\/ the iframe containing the boundaryWindow, but we\n- \/\/ need to calculate the offset relative to the boundaryWindow.\n- if (currentIframe && getOwnerWindow(currentIframe) === boundaryWindow) {\n- onlyOneMore = true;\n- }\n- }\n-\n- return mergeRectOffsets(rects);\n- } else {\n- return node.getBoundingClientRect();\n- }\n-}\n-\n function boxWrap(dims, what, node) {\n assign(node.style, {\n borderTopWidth: dims[what + 'Top'] + 'px',\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/views\/TraceUpdates\/canvas.js b\/packages\/react-devtools-shared\/src\/backend\/views\/TraceUpdates\/canvas.js\nnew file mode 100644\nindex 0000000000..4acdbef21a\n--- \/dev\/null\n+++ b\/packages\/react-devtools-shared\/src\/backend\/views\/TraceUpdates\/canvas.js\n@@ -0,0 +1,107 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @flow\n+ *\/\n+\n+import type {Data} from '.\/index';\n+import type {Rect} from '..\/utils';\n+import type {NativeType} from '..\/..\/types';\n+\n+const OUTLINE_COLOR = '#f0f0f0';\n+\n+\/\/ Note these colors are in sync with DevTools Profiler chart colors.\n+const COLORS = [\n+ '#37afa9',\n+ '#63b19e',\n+ '#80b393',\n+ '#97b488',\n+ '#abb67d',\n+ '#beb771',\n+ '#cfb965',\n+ '#dfba57',\n+ '#efbb49',\n+ '#febc38',\n+];\n+\n+let canvas: HTMLCanvasElement | null = null;\n+\n+export function draw(nodeToData: Map): void {\n+ if (canvas === null) {\n+ initialize();\n+ }\n+\n+ const canvasFlow: HTMLCanvasElement = ((canvas: any): HTMLCanvasElement);\n+ canvasFlow.width = window.screen.availWidth;\n+ canvasFlow.height = window.screen.availHeight;\n+\n+ const context = canvasFlow.getContext('2d');\n+ context.clearRect(0, 0, canvasFlow.width, canvasFlow.height);\n+\n+ nodeToData.forEach(({count, rect}) => {\n+ if (rect !== null) {\n+ const colorIndex = Math.min(COLORS.length - 1, count - 1);\n+ const color = COLORS[colorIndex];\n+\n+ drawBorder(context, rect, color);\n+ }\n+ });\n+}\n+\n+function drawBorder(\n+ context: CanvasRenderingContext2D,\n+ rect: Rect,\n+ color: string,\n+): void {\n+ const {height, left, top, width} = rect;\n+\n+ \/\/ outline\n+ context.lineWidth = 1;\n+ context.strokeStyle = OUTLINE_COLOR;\n+\n+ context.strokeRect(left - 1, top - 1, width + 2, height + 2);\n+\n+ \/\/ inset\n+ context.lineWidth = 1;\n+ context.strokeStyle = OUTLINE_COLOR;\n+ context.strokeRect(left + 1, top + 1, width - 1, height - 1);\n+ context.strokeStyle = color;\n+\n+ context.setLineDash([0]);\n+\n+ \/\/ border\n+ context.lineWidth = 1;\n+ context.strokeRect(left, top, width - 1, height - 1);\n+\n+ context.setLineDash([0]);\n+}\n+\n+export function destroy(): void {\n+ if (canvas !== null) {\n+ if (canvas.parentNode != null) {\n+ canvas.parentNode.removeChild(canvas);\n+ }\n+ canvas = null;\n+ }\n+}\n+\n+function initialize(): void {\n+ canvas = window.document.createElement('canvas');\n+ canvas.style.cssText = `\n+ xx-background-color: red;\n+ xx-opacity: 0.5;\n+ bottom: 0;\n+ left: 0;\n+ pointer-events: none;\n+ position: fixed;\n+ right: 0;\n+ top: 0;\n+ z-index: 1000000000;\n+ `;\n+\n+ const root = window.document.documentElement;\n+ root.insertBefore(canvas, root.firstChild);\n+}\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/views\/TraceUpdates\/index.js b\/packages\/react-devtools-shared\/src\/backend\/views\/TraceUpdates\/index.js\nnew file mode 100644\nindex 0000000000..1861b7d155\n--- \/dev\/null\n+++ b\/packages\/react-devtools-shared\/src\/backend\/views\/TraceUpdates\/index.js\n@@ -0,0 +1,141 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @flow\n+ *\/\n+\n+import Agent from 'react-devtools-shared\/src\/backend\/agent';\n+import {destroy as destroyCanvas, draw} from '.\/canvas';\n+import {getNestedBoundingClientRect} from '..\/utils';\n+\n+import type {NativeType} from '..\/..\/types';\n+import type {Rect} from '..\/utils';\n+\n+\/\/ How long the rect should be shown for?\n+const DISPLAY_DURATION = 250;\n+\n+\/\/ What's the longest we are willing to show the overlay for?\n+\/\/ This can be important if we're getting a flurry of events (e.g. scroll update).\n+const MAX_DISPLAY_DURATION = 3000;\n+\n+\/\/ How long should a rect be considered valid for?\n+const REMEASUREMENT_AFTER_DURATION = 250;\n+\n+\/\/ Some environments (e.g. React Native \/ Hermes) don't support the performace API yet.\n+const getCurrentTime =\n+ typeof performance === 'object' && typeof performance.now === 'function'\n+ ? () => performance.now()\n+ : () => Date.now();\n+\n+export type Data = {|\n+ count: number,\n+ expirationTime: number,\n+ lastMeasuredAt: number,\n+ rect: Rect | null,\n+|};\n+\n+const nodeToData: Map = new Map();\n+\n+let agent: Agent = ((null: any): Agent);\n+let drawAnimationFrameID: AnimationFrameID | null = null;\n+let isEnabled: boolean = false;\n+let redrawTimeoutID: TimeoutID | null = null;\n+\n+export function initialize(injectedAgent: Agent): void {\n+ agent = injectedAgent;\n+ agent.addListener('traceUpdates', traceUpdates);\n+}\n+\n+export function toggleEnabled(value: boolean): void {\n+ isEnabled = value;\n+\n+ if (!isEnabled) {\n+ nodeToData.clear();\n+\n+ if (drawAnimationFrameID !== null) {\n+ cancelAnimationFrame(drawAnimationFrameID);\n+ drawAnimationFrameID = null;\n+ }\n+\n+ if (redrawTimeoutID !== null) {\n+ clearTimeout(redrawTimeoutID);\n+ redrawTimeoutID = null;\n+ }\n+\n+ destroyCanvas();\n+ }\n+}\n+\n+function traceUpdates(nodes: Set): void {\n+ if (!isEnabled) {\n+ return;\n+ }\n+\n+ nodes.forEach(node => {\n+ const data = nodeToData.get(node);\n+ const now = getCurrentTime();\n+\n+ let lastMeasuredAt = data != null ? data.lastMeasuredAt : 0;\n+ let rect = data != null ? data.rect : null;\n+ if (rect === null || lastMeasuredAt + REMEASUREMENT_AFTER_DURATION < now) {\n+ lastMeasuredAt = now;\n+ rect = measureNode(node);\n+ }\n+\n+ nodeToData.set(node, {\n+ count: data != null ? data.count + 1 : 1,\n+ expirationTime:\n+ data != null\n+ ? Math.min(\n+ now + MAX_DISPLAY_DURATION,\n+ data.expirationTime + DISPLAY_DURATION,\n+ )\n+ : now + DISPLAY_DURATION,\n+ lastMeasuredAt,\n+ rect,\n+ });\n+ });\n+\n+ if (redrawTimeoutID !== null) {\n+ clearTimeout(redrawTimeoutID);\n+ redrawTimeoutID = null;\n+ }\n+\n+ if (drawAnimationFrameID === null) {\n+ drawAnimationFrameID = requestAnimationFrame(prepareToDraw);\n+ }\n+}\n+\n+function prepareToDraw(): void {\n+ drawAnimationFrameID = null;\n+ redrawTimeoutID = null;\n+\n+ const now = getCurrentTime();\n+ let earliestExpiration = Number.MAX_VALUE;\n+\n+ \/\/ Remove any items that have already expired.\n+ nodeToData.forEach((data, node) => {\n+ if (data.expirationTime < now) {\n+ nodeToData.delete(node);\n+ } else {\n+ earliestExpiration = Math.min(earliestExpiration, data.expirationTime);\n+ }\n+ });\n+\n+ draw(nodeToData);\n+\n+ redrawTimeoutID = setTimeout(prepareToDraw, earliestExpiration - now);\n+}\n+\n+function measureNode(node: Object): Rect | null {\n+ if (!node || typeof node.getBoundingClientRect !== 'function') {\n+ return null;\n+ }\n+\n+ let currentWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;\n+\n+ return getNestedBoundingClientRect(node, currentWindow);\n+}\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/views\/utils.js b\/packages\/react-devtools-shared\/src\/backend\/views\/utils.js\nnew file mode 100644\nindex 0000000000..fa779a574d\n--- \/dev\/null\n+++ b\/packages\/react-devtools-shared\/src\/backend\/views\/utils.js\n@@ -0,0 +1,127 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @flow\n+ *\/\n+\n+export type Rect = {\n+ bottom: number,\n+ height: number,\n+ left: number,\n+ right: number,\n+ top: number,\n+ width: number,\n+};\n+\n+\/\/ Get the window object for the document that a node belongs to,\n+\/\/ or return null if it cannot be found (node not attached to DOM,\n+\/\/ etc).\n+export function getOwnerWindow(node: HTMLElement): typeof window | null {\n+ if (!node.ownerDocument) {\n+ return null;\n+ }\n+ return node.ownerDocument.defaultView;\n+}\n+\n+\/\/ Get the iframe containing a node, or return null if it cannot\n+\/\/ be found (node not within iframe, etc).\n+export function getOwnerIframe(node: HTMLElement): HTMLElement | null {\n+ const nodeWindow = getOwnerWindow(node);\n+ if (nodeWindow) {\n+ return nodeWindow.frameElement;\n+ }\n+ return null;\n+}\n+\n+\/\/ Get a bounding client rect for a node, with an\n+\/\/ offset added to compensate for its border.\n+export function getBoundingClientRectWithBorderOffset(node: HTMLElement) {\n+ const dimensions = getElementDimensions(node);\n+ return mergeRectOffsets([\n+ node.getBoundingClientRect(),\n+ {\n+ top: dimensions.borderTop,\n+ left: dimensions.borderLeft,\n+ bottom: dimensions.borderBottom,\n+ right: dimensions.borderRight,\n+ \/\/ This width and height won't get used by mergeRectOffsets (since this\n+ \/\/ is not the first rect in the array), but we set them so that this\n+ \/\/ object typechecks as a ClientRect.\n+ width: 0,\n+ height: 0,\n+ },\n+ ]);\n+}\n+\n+\/\/ Add together the top, left, bottom, and right properties of\n+\/\/ each ClientRect, but keep the width and height of the first one.\n+export function mergeRectOffsets(rects: Array): Rect {\n+ return rects.reduce((previousRect, rect) => {\n+ if (previousRect == null) {\n+ return rect;\n+ }\n+\n+ return {\n+ top: previousRect.top + rect.top,\n+ left: previousRect.left + rect.left,\n+ width: previousRect.width,\n+ height: previousRect.height,\n+ bottom: previousRect.bottom + rect.bottom,\n+ right: previousRect.right + rect.right,\n+ };\n+ });\n+}\n+\n+\/\/ Calculate a boundingClientRect for a node relative to boundaryWindow,\n+\/\/ taking into account any offsets caused by intermediate iframes.\n+export function getNestedBoundingClientRect(\n+ node: HTMLElement,\n+ boundaryWindow: typeof window,\n+): Rect {\n+ const ownerIframe = getOwnerIframe(node);\n+ if (ownerIframe && ownerIframe !== boundaryWindow) {\n+ const rects = [node.getBoundingClientRect()];\n+ let currentIframe = ownerIframe;\n+ let onlyOneMore = false;\n+ while (currentIframe) {\n+ const rect = getBoundingClientRectWithBorderOffset(currentIframe);\n+ rects.push(rect);\n+ currentIframe = getOwnerIframe(currentIframe);\n+\n+ if (onlyOneMore) {\n+ break;\n+ }\n+ \/\/ We don't want to calculate iframe offsets upwards beyond\n+ \/\/ the iframe containing the boundaryWindow, but we\n+ \/\/ need to calculate the offset relative to the boundaryWindow.\n+ if (currentIframe && getOwnerWindow(currentIframe) === boundaryWindow) {\n+ onlyOneMore = true;\n+ }\n+ }\n+\n+ return mergeRectOffsets(rects);\n+ } else {\n+ return node.getBoundingClientRect();\n+ }\n+}\n+\n+export function getElementDimensions(domElement: Element) {\n+ const calculatedStyle = window.getComputedStyle(domElement);\n+ return {\n+ borderLeft: parseInt(calculatedStyle.borderLeftWidth, 10),\n+ borderRight: parseInt(calculatedStyle.borderRightWidth, 10),\n+ borderTop: parseInt(calculatedStyle.borderTopWidth, 10),\n+ borderBottom: parseInt(calculatedStyle.borderBottomWidth, 10),\n+ marginLeft: parseInt(calculatedStyle.marginLeft, 10),\n+ marginRight: parseInt(calculatedStyle.marginRight, 10),\n+ marginTop: parseInt(calculatedStyle.marginTop, 10),\n+ marginBottom: parseInt(calculatedStyle.marginBottom, 10),\n+ paddingLeft: parseInt(calculatedStyle.paddingLeft, 10),\n+ paddingRight: parseInt(calculatedStyle.paddingRight, 10),\n+ paddingTop: parseInt(calculatedStyle.paddingTop, 10),\n+ paddingBottom: parseInt(calculatedStyle.paddingBottom, 10),\n+ };\n+}\ndiff --git a\/packages\/react-devtools-shared\/src\/bridge.js b\/packages\/react-devtools-shared\/src\/bridge.js\nindex 695121d08c..f6b39afac7 100644\n--- a\/packages\/react-devtools-shared\/src\/bridge.js\n+++ b\/packages\/react-devtools-shared\/src\/bridge.js\n@@ -70,6 +70,7 @@ type NativeStyleEditor_SetValueParams = {|\n |};\n \n type BackendEvents = {|\n+ extensionBackendInitialized: [],\n inspectedElement: [InspectedElementPayload],\n isBackendStorageAPISupported: [boolean],\n operations: [Array],\n@@ -108,6 +109,7 @@ type FrontendEvents = {|\n profilingData: [ProfilingDataBackend],\n reloadAndProfile: [boolean],\n selectFiber: [number],\n+ setTraceUpdatesEnabled: [boolean],\n shutdown: [],\n startInspectingNative: [],\n startProfiling: [boolean],\ndiff --git a\/packages\/react-devtools-shared\/src\/constants.js b\/packages\/react-devtools-shared\/src\/constants.js\nindex d0f0a89807..e6e2a8ad35 100644\n--- a\/packages\/react-devtools-shared\/src\/constants.js\n+++ b\/packages\/react-devtools-shared\/src\/constants.js\n@@ -30,6 +30,9 @@ export const SESSION_STORAGE_RELOAD_AND_PROFILE_KEY =\n export const LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY =\n 'React::DevTools::appendComponentStack';\n \n+export const LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY =\n+ 'React::DevTools::traceUpdatesEnabled';\n+\n export const PROFILER_EXPORT_VERSION = 4;\n \n export const CHANGE_LOG_URL =\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/store.js b\/packages\/react-devtools-shared\/src\/devtools\/store.js\nindex efbcf02196..5cb23a4d2e 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/store.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/store.js\n@@ -53,6 +53,7 @@ type Config = {|\n supportsNativeInspection?: boolean,\n supportsReloadAndProfile?: boolean,\n supportsProfiling?: boolean,\n+ supportsTraceUpdates?: boolean,\n |};\n \n export type Capabilities = {|\n@@ -125,6 +126,7 @@ export default class Store extends EventEmitter<{|\n _supportsNativeInspection: boolean = true;\n _supportsProfiling: boolean = false;\n _supportsReloadAndProfile: boolean = false;\n+ _supportsTraceUpdates: boolean = false;\n \n _unsupportedRendererVersionDetected: boolean = false;\n \n@@ -157,6 +159,7 @@ export default class Store extends EventEmitter<{|\n supportsNativeInspection,\n supportsProfiling,\n supportsReloadAndProfile,\n+ supportsTraceUpdates,\n } = config;\n this._supportsNativeInspection = supportsNativeInspection !== false;\n if (supportsProfiling) {\n@@ -165,6 +168,9 @@ export default class Store extends EventEmitter<{|\n if (supportsReloadAndProfile) {\n this._supportsReloadAndProfile = true;\n }\n+ if (supportsTraceUpdates) {\n+ this._supportsTraceUpdates = true;\n+ }\n }\n \n this._bridge = bridge;\n@@ -336,7 +342,6 @@ export default class Store extends EventEmitter<{|\n get supportsProfiling(): boolean {\n return this._supportsProfiling;\n }\n-\n get supportsReloadAndProfile(): boolean {\n \/\/ Does the DevTools shell support reloading and eagerly injecting the renderer interface?\n \/\/ And if so, can the backend use the localStorage API?\n@@ -344,6 +349,10 @@ export default class Store extends EventEmitter<{|\n return this._supportsReloadAndProfile && this._isBackendStorageAPISupported;\n }\n \n+ get supportsTraceUpdates(): boolean {\n+ return this._supportsTraceUpdates;\n+ }\n+\n get unsupportedRendererVersionDetected(): boolean {\n return this._unsupportedRendererVersionDetected;\n }\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/GeneralSettings.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/GeneralSettings.js\nindex c896a14152..4e7ce6357c 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/GeneralSettings.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/GeneralSettings.js\n@@ -9,31 +9,33 @@\n \n import React, {useContext} from 'react';\n import {SettingsContext} from '.\/SettingsContext';\n+import {StoreContext} from '..\/context';\n import {CHANGE_LOG_URL} from 'react-devtools-shared\/src\/constants';\n \n import styles from '.\/SettingsShared.css';\n \n export default function GeneralSettings(_: {||}) {\n const {\n+ appendComponentStack,\n displayDensity,\n+ setAppendComponentStack,\n setDisplayDensity,\n- theme,\n setTheme,\n- appendComponentStack,\n- setAppendComponentStack,\n+ setTraceUpdatesEnabled,\n+ theme,\n+ traceUpdatesEnabled,\n } = useContext(SettingsContext);\n \n- const updateDisplayDensity = ({currentTarget}) =>\n- setDisplayDensity(currentTarget.value);\n- const updateTheme = ({currentTarget}) => setTheme(currentTarget.value);\n- const updateappendComponentStack = ({currentTarget}) =>\n- setAppendComponentStack(currentTarget.checked);\n+ const {supportsTraceUpdates} = useContext(StoreContext);\n \n return (\n

Theme<\/div>\n-

dillon1000/react

Files changed