{"body":"","patch":"diff --git a\/.flowconfig b\/.flowconfig\nindex 35306bd54a..c1209df273 100644\n--- a\/.flowconfig\n+++ b\/.flowconfig\n@@ -4,7 +4,6 @@\n .*node_modules\/archiver-utils\n .*node_modules\/babel.*\n .*node_modules\/browserify-zlib\/.*\n-.*node_modules\/classnames.*\n .*node_modules\/gh-pages\/.*\n .*node_modules\/invariant\/.*\n .*node_modules\/json-loader.*\ndiff --git a\/.gitignore b\/.gitignore\nindex 514ad873cd..ee4e445f06 100644\n--- a\/.gitignore\n+++ b\/.gitignore\n@@ -7,4 +7,5 @@ npm-debug.log\n yarn-error.log\n .DS_Store\n yarn-error.log\n-.vscode\n\\ No newline at end of file\n+.vscode\n+.idea\ndiff --git a\/package.json b\/package.json\nindex e843d0f133..68c3bc693e 100644\n--- a\/package.json\n+++ b\/package.json\n@@ -56,7 +56,6 @@\n \"cli-spinners\": \"^1.0.0\",\n \"clipboard-js\": \"^0.3.6\",\n \"css-loader\": \"^1.0.1\",\n- \"html2canvas\": \"^1.0.0-alpha.12\",\n \"error-stack-parser\": \"^2.0.2\",\n \"es6-symbol\": \"3.0.2\",\n \"escape-string-regexp\": \"^1.0.5\",\n@@ -78,13 +77,15 @@\n \"fbjs\": \"0.5.1\",\n \"fbjs-scripts\": \"0.7.0\",\n \"firefox-profile\": \"^1.0.2\",\n- \"flow-bin\": \"^0.94.0\",\n+ \"flow-bin\": \"^0.96.0\",\n \"fs-extra\": \"^3.0.1\",\n \"gh-pages\": \"^1.0.0\",\n+ \"html2canvas\": \"^1.0.0-alpha.12\",\n \"immutable\": \"3.7.6\",\n \"jest\": \"22.1.4\",\n \"lerna\": \"^2.8.0\",\n \"lint-staged\": \"^7.0.5\",\n+ \"lodash.throttle\": \"^4.1.1\",\n \"log-update\": \"^2.0.0\",\n \"lru-cache\": \"^4.1.3\",\n \"memoize-one\": \"^3.1.1\",\ndiff --git a\/shells\/browser\/shared\/src\/main.js b\/shells\/browser\/shared\/src\/main.js\nindex e96b10fd7c..ab86699f19 100644\n--- a\/shells\/browser\/shared\/src\/main.js\n+++ b\/shells\/browser\/shared\/src\/main.js\n@@ -154,6 +154,14 @@ function createPanelIfReactLoaded() {\n \n initBridgeAndStore();\n \n+ function ensureInitialHTMLIsCleared(container) {\n+ if (container._hasInitialHTMLBeenCleared) {\n+ return;\n+ }\n+ container.innerHTML = '';\n+ container._hasInitialHTMLBeenCleared = true;\n+ }\n+\n let currentPanel = null;\n \n chrome.devtools.panels.create('⚛ Components', '', 'panel.html', panel => {\n@@ -166,7 +174,7 @@ function createPanelIfReactLoaded() {\n componentsPortalContainer = panel.container;\n \n if (componentsPortalContainer != null) {\n- componentsPortalContainer.innerHTML = '';\n+ ensureInitialHTMLIsCleared(componentsPortalContainer);\n render('components');\n panel.injectStyles(cloneStyleTags);\n }\n@@ -188,7 +196,7 @@ function createPanelIfReactLoaded() {\n profilerPortalContainer = panel.container;\n \n if (profilerPortalContainer != null) {\n- profilerPortalContainer.innerHTML = '';\n+ ensureInitialHTMLIsCleared(profilerPortalContainer);\n render('profiler');\n panel.injectStyles(cloneStyleTags);\n }\n@@ -205,7 +213,7 @@ function createPanelIfReactLoaded() {\n settingsPortalContainer = panel.container;\n \n if (settingsPortalContainer != null) {\n- settingsPortalContainer.innerHTML = '';\n+ ensureInitialHTMLIsCleared(settingsPortalContainer);\n render('settings');\n panel.injectStyles(cloneStyleTags);\n }\ndiff --git a\/src\/backend\/agent.js b\/src\/backend\/agent.js\nindex 98cbb9acfa..a50598010a 100644\n--- a\/src\/backend\/agent.js\n+++ b\/src\/backend\/agent.js\n@@ -66,13 +66,19 @@ export default class Agent extends EventEmitter {\n this._bridge = bridge;\n \n bridge.addListener('captureScreenshot', this.captureScreenshot);\n+ bridge.addListener(\n+ 'clearHighlightedElementInDOM',\n+ this.clearHighlightedElementInDOM\n+ );\n bridge.addListener('exportProfilingSummary', this.exportProfilingSummary);\n bridge.addListener('getCommitDetails', this.getCommitDetails);\n+ bridge.addListener('getFiberCommits', this.getFiberCommits);\n bridge.addListener('getInteractions', this.getInteractions);\n bridge.addListener('getProfilingStatus', this.getProfilingStatus);\n bridge.addListener('getProfilingSummary', this.getProfilingSummary);\n bridge.addListener('highlightElementInDOM', this.highlightElementInDOM);\n bridge.addListener('inspectElement', this.inspectElement);\n+ bridge.addListener('logElementToConsole', this.logElementToConsole);\n bridge.addListener('overrideContext', this.overrideContext);\n bridge.addListener('overrideHookState', this.overrideHookState);\n bridge.addListener('overrideProps', this.overrideProps);\n@@ -161,6 +167,26 @@ export default class Agent extends EventEmitter {\n }\n };\n \n+ getFiberCommits = ({\n+ fiberID,\n+ rendererID,\n+ rootID,\n+ }: {\n+ fiberID: number,\n+ rendererID: number,\n+ rootID: number,\n+ }) => {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\"`);\n+ } else {\n+ this._bridge.send(\n+ 'fiberCommits',\n+ renderer.getFiberCommits(rootID, fiberID)\n+ );\n+ }\n+ };\n+\n getInteractions = ({\n rendererID,\n rootID,\n@@ -198,14 +224,22 @@ export default class Agent extends EventEmitter {\n }\n };\n \n+ clearHighlightedElementInDOM = () => {\n+ hideOverlay();\n+ };\n+\n highlightElementInDOM = ({\n displayName,\n+ hideAfterTimeout,\n id,\n rendererID,\n+ scrollIntoView,\n }: {\n displayName: string,\n+ hideAfterTimeout: boolean,\n id: number,\n rendererID: number,\n+ scrollIntoView: boolean,\n }) => {\n const renderer = this._rendererInterfaces[rendererID];\n if (renderer == null) {\n@@ -218,13 +252,12 @@ export default class Agent extends EventEmitter {\n }\n \n if (node != null) {\n- if (typeof node.scrollIntoView === 'function') {\n+ if (scrollIntoView && typeof node.scrollIntoView === 'function') {\n \/\/ If the node isn't visible show it before highlighting it.\n \/\/ We may want to reconsider this; it might be a little disruptive.\n node.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n }\n-\n- showOverlay(((node: any): HTMLElement), displayName);\n+ showOverlay(((node: any): HTMLElement), displayName, hideAfterTimeout);\n } else {\n hideOverlay();\n }\n@@ -239,6 +272,15 @@ export default class Agent extends EventEmitter {\n }\n };\n \n+ logElementToConsole = ({ id, rendererID }: InspectSelectParams) => {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n+ } else {\n+ renderer.logElementToConsole(id);\n+ }\n+ };\n+\n reloadAndProfile = () => {\n localStorage.setItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY, 'true');\n \n@@ -452,7 +494,7 @@ export default class Agent extends EventEmitter {\n const target = ((event.target: any): HTMLElement);\n \/\/ Don't pass the name explicitly.\n \/\/ It will be inferred from DOM tag and Fiber owner.\n- showOverlay(target);\n+ showOverlay(target, null, false);\n this._lastInspectedNode = target;\n };\n \ndiff --git a\/src\/backend\/renderer.js b\/src\/backend\/renderer.js\nindex 5d3c5b9991..0607b7c2ad 100644\n--- a\/src\/backend\/renderer.js\n+++ b\/src\/backend\/renderer.js\n@@ -32,6 +32,7 @@ import type {\n CommitDetails,\n DevToolsHook,\n Fiber,\n+ FiberCommits,\n FiberData,\n Interaction,\n Interactions,\n@@ -810,21 +811,6 @@ export function attach(\n }\n }\n \n- function unmountFiberRecursively(fiber, traverseSiblings = false) {\n- if (__DEBUG__) {\n- debug('unmountFiberRecursively()', fiber, traverseSiblings);\n- }\n- if (!shouldFilterFiber(fiber)) {\n- recordUnmount(fiber);\n- }\n- if (fiber.child !== null) {\n- unmountFiberRecursively(fiber.child, true);\n- }\n- if (traverseSiblings && fiber.sibling !== null) {\n- unmountFiberRecursively(fiber.sibling, true);\n- }\n- }\n-\n function maybeRecordUpdate(fiber: Fiber, hasChildOrderChanged: boolean) {\n if (__DEBUG__) {\n debug('maybeRecordUpdate()', fiber);\n@@ -1424,7 +1410,7 @@ export function attach(\n }\n }\n \n- function inspectElement(id: number): InspectedElement | null {\n+ function inspectElementRaw(id: number): InspectedElement | null {\n let fiber = idToFiberMap.get(id);\n \n if (fiber == null) {\n@@ -1505,7 +1491,7 @@ export function attach(\n if (context !== null) {\n \/\/ To simplify hydration and display logic for context, wrap in a value object.\n \/\/ Otherwise simple values (e.g. strings, booleans) become harder to handle.\n- context = cleanForBridge({ value: context });\n+ context = { value: context };\n }\n \n let owners = null;\n@@ -1544,16 +1530,16 @@ export function attach(\n \/\/ Can view component source location.\n canViewSource,\n \n+ displayName: getDataForFiber(fiber).displayName,\n+\n \/\/ Inspectable properties.\n \/\/ TODO Review sanitization approach for the below inspectable values.\n context,\n hooks: usesHooks\n- ? cleanForBridge(\n- inspectHooksOfFiber(fiber, (renderer.currentDispatcherRef: any))\n- )\n+ ? inspectHooksOfFiber(fiber, (renderer.currentDispatcherRef: any))\n : null,\n- props: cleanForBridge(memoizedProps),\n- state: usesHooks ? null : cleanForBridge(memoizedState),\n+ props: memoizedProps,\n+ state: usesHooks ? null : memoizedState,\n \n \/\/ List of owners\n owners,\n@@ -1563,6 +1549,56 @@ export function attach(\n };\n }\n \n+ function inspectElement(id: number): InspectedElement | null {\n+ let result = inspectElementRaw(id);\n+ if (result === null) {\n+ return null;\n+ }\n+ \/\/ TODO Review sanitization approach for the below inspectable values.\n+ result.context = cleanForBridge(result.context);\n+ result.hooks = cleanForBridge(result.hooks);\n+ result.props = cleanForBridge(result.props);\n+ result.state = cleanForBridge(result.state);\n+ return result;\n+ }\n+\n+ function logElementToConsole(id) {\n+ const result = inspectElementRaw(id);\n+ if (result === null) {\n+ console.warn(`Could not find Fiber with id \"${id}\"`);\n+ return;\n+ }\n+\n+ const supportsGroup = typeof console.groupCollapsed === 'function';\n+ const label =\n+ '[Click to expand] <' + (result.displayName || 'Component') + ' \/>';\n+\n+ if (supportsGroup) {\n+ console.groupCollapsed(label);\n+ }\n+ if (result.props !== null) {\n+ console.log('Props:', result.props);\n+ }\n+ if (result.state !== null) {\n+ console.log('State:', result.state);\n+ }\n+ if (result.hooks !== null) {\n+ console.log('Hooks:', result.hooks);\n+ }\n+ const nativeNode = findNativeByFiberID(id);\n+ if (nativeNode !== null) {\n+ console.log('Node:', nativeNode);\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.'\n+ );\n+ }\n+ if (supportsGroup) {\n+ console.groupEnd();\n+ }\n+ }\n+\n function setInHook(\n id: number,\n index: number,\n@@ -1667,6 +1703,39 @@ export function attach(\n };\n }\n \n+ function getFiberCommits(rootID: number, fiberID: number): FiberCommits {\n+ const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(\n+ rootID\n+ );\n+ if (commitProfilingMetadata != null) {\n+ const commitDurations = [];\n+ commitProfilingMetadata.forEach(({ actualDurations }, commitIndex) => {\n+ for (let i = 0; i < actualDurations.length; i += 2) {\n+ if (actualDurations[i] === fiberID) {\n+ commitDurations.push(commitIndex, actualDurations[i + 1]);\n+ break;\n+ }\n+ }\n+ });\n+\n+ return {\n+ commitDurations,\n+ fiberID,\n+ rootID,\n+ };\n+ }\n+\n+ console.warn(\n+ `getFiberCommits(): No profiling info recorded for root \"${rootID}\"`\n+ );\n+\n+ return {\n+ commitDurations: [],\n+ fiberID,\n+ rootID,\n+ };\n+ }\n+\n function getInteractions(rootID: number): Interactions {\n const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(\n rootID\n@@ -1832,6 +1901,7 @@ export function attach(\n flushInitialOperations,\n getCommitDetails,\n getFiberIDFromNative,\n+ getFiberCommits,\n getInteractions,\n findNativeByFiberID,\n getProfilingDataForDownload,\n@@ -1839,6 +1909,7 @@ export function attach(\n handleCommitFiberRoot,\n handleCommitFiberUnmount,\n inspectElement,\n+ logElementToConsole,\n prepareViewElementSource,\n overrideSuspense,\n renderer,\ndiff --git a\/src\/backend\/types.js b\/src\/backend\/types.js\nindex 0ee472a015..bd4562eef7 100644\n--- a\/src\/backend\/types.js\n+++ b\/src\/backend\/types.js\n@@ -66,6 +66,12 @@ export type CommitDetails = {|\n rootID: number,\n |};\n \n+export type FiberCommits = {|\n+ commitDurations: Array,\n+ fiberID: number,\n+ rootID: number,\n+|};\n+\n export type InteractionWithCommits = {|\n ...Interaction,\n commits: Array,\n@@ -93,12 +99,14 @@ export type RendererInterface = {\n component: NativeType,\n findNearestUnfilteredAncestor?: boolean\n ) => number | null,\n+ getFiberCommits: (rootID: number, fiberID: number) => FiberCommits,\n getInteractions: (rootID: number) => Interactions,\n getProfilingDataForDownload: (rootID: number) => Object,\n getProfilingSummary: (rootID: number) => ProfilingSummary,\n handleCommitFiberRoot: (fiber: Object) => void,\n handleCommitFiberUnmount: (fiber: Object) => void,\n inspectElement: (id: number) => InspectedElement | null,\n+ logElementToConsole: (id: number) => void,\n overrideSuspense: (id: number, forceFallback: boolean) => void,\n prepareViewElementSource: (id: number) => void,\n renderer: ReactRenderer | null,\ndiff --git a\/src\/backend\/views\/Highlighter.js b\/src\/backend\/views\/Highlighter.js\nindex fc98d4a134..c5339f6763 100644\n--- a\/src\/backend\/views\/Highlighter.js\n+++ b\/src\/backend\/views\/Highlighter.js\n@@ -18,7 +18,8 @@ export function hideOverlay() {\n \n export function showOverlay(\n element: HTMLElement | null,\n- componentName: string = ''\n+ componentName: string | null,\n+ hideAfterTimeout: boolean\n ) {\n if (timeoutID !== null) {\n clearTimeout(timeoutID);\n@@ -34,5 +35,7 @@ export function showOverlay(\n \n overlay.inspect(element, componentName);\n \n- timeoutID = setTimeout(hideOverlay, SHOW_DURATION);\n+ if (hideAfterTimeout) {\n+ timeoutID = setTimeout(hideOverlay, SHOW_DURATION);\n+ }\n }\ndiff --git a\/src\/backend\/views\/Overlay.js b\/src\/backend\/views\/Overlay.js\nindex 24b0933a43..60d0cb8156 100644\n--- a\/src\/backend\/views\/Overlay.js\n+++ b\/src\/backend\/views\/Overlay.js\n@@ -215,21 +215,21 @@ function findTipPos(dims, win) {\n return { top, left: dims.left + margin + 'px' };\n }\n \n-function getElementDimensions(domElement) {\n+export function getElementDimensions(domElement: Element) {\n const calculatedStyle = window.getComputedStyle(domElement);\n return {\n- borderLeft: +calculatedStyle.borderLeftWidth.match(\/[0-9]*\/)[0],\n- borderRight: +calculatedStyle.borderRightWidth.match(\/[0-9]*\/)[0],\n- borderTop: +calculatedStyle.borderTopWidth.match(\/[0-9]*\/)[0],\n- borderBottom: +calculatedStyle.borderBottomWidth.match(\/[0-9]*\/)[0],\n- marginLeft: +calculatedStyle.marginLeft.match(\/[0-9]*\/)[0],\n- marginRight: +calculatedStyle.marginRight.match(\/[0-9]*\/)[0],\n- marginTop: +calculatedStyle.marginTop.match(\/[0-9]*\/)[0],\n- marginBottom: +calculatedStyle.marginBottom.match(\/[0-9]*\/)[0],\n- paddingLeft: +calculatedStyle.paddingLeft.match(\/[0-9]*\/)[0],\n- paddingRight: +calculatedStyle.paddingRight.match(\/[0-9]*\/)[0],\n- paddingTop: +calculatedStyle.paddingTop.match(\/[0-9]*\/)[0],\n- paddingBottom: +calculatedStyle.paddingBottom.match(\/[0-9]*\/)[0],\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 \ndiff --git a\/src\/devtools\/ProfilingCache.js b\/src\/devtools\/ProfilingCache.js\nindex 1699f95f8c..e0b4cfabc9 100644\n--- a\/src\/devtools\/ProfilingCache.js\n+++ b\/src\/devtools\/ProfilingCache.js\n@@ -23,11 +23,13 @@ import type { Resource } from '.\/cache';\n import type { Bridge } from '..\/types';\n import type {\n CommitDetails as CommitDetailsBackend,\n+ FiberCommits as FiberCommitsBackend,\n Interactions as InteractionsBackend,\n ProfilingSummary as ProfilingSummaryBackend,\n } from 'src\/backend\/types';\n import type {\n CommitDetails as CommitDetailsFrontend,\n+ FiberCommits as FiberCommitsFrontend,\n Interactions as InteractionsFrontend,\n InteractionWithCommits,\n CommitTree as CommitTreeFrontend,\n@@ -39,13 +41,19 @@ import type { ChartData as RankedChartData } from 'src\/devtools\/views\/Profiler\/R\n \n type CommitDetailsParams = {|\n commitIndex: number,\n+ rendererID: number,\n rootID: number,\n+|};\n+\n+type FiberCommitsParams = {|\n+ fiberID: number,\n rendererID: number,\n+ rootID: number,\n |};\n \n type InteractionsParams = {|\n- rootID: number,\n rendererID: number,\n+ rootID: number,\n |};\n \n type GetCommitTreeParams = {|\n@@ -54,8 +62,8 @@ type GetCommitTreeParams = {|\n |};\n \n type ProfilingSummaryParams = {|\n- rootID: number,\n rendererID: number,\n+ rootID: number,\n |};\n \n export default class ProfilingCache {\n@@ -67,6 +75,11 @@ export default class ProfilingCache {\n (commitDetails: CommitDetailsFrontend) => void\n > = new Map();\n \n+ _pendingFiberCommitsMap: Map<\n+ string,\n+ (fiberCommits: FiberCommitsFrontend) => void\n+ > = new Map();\n+\n _pendingInteractionsMap: Map<\n number,\n (interactions: InteractionsFrontend) => void\n@@ -121,6 +134,38 @@ export default class ProfilingCache {\n `${rootID}-${commitIndex}`\n );\n \n+ FiberCommits: Resource<\n+ FiberCommitsParams,\n+ FiberCommitsFrontend\n+ > = createResource(\n+ ({ fiberID, rendererID, rootID }: FiberCommitsParams) => {\n+ return new Promise(resolve => {\n+ const importedProfilingData = this._store.importedProfilingData;\n+ if (importedProfilingData !== null) {\n+ \/\/ TODO (profiling) commit details\n+ \/\/ Copy from renderer getFiberCommits()\n+ } else if (this._store.profilingOperations.has(rootID)) {\n+ this._pendingFiberCommitsMap.set(`${rootID}-${fiberID}`, resolve);\n+ this._bridge.send('getFiberCommits', {\n+ fiberID,\n+ rendererID,\n+ rootID,\n+ });\n+ return;\n+ }\n+\n+ \/\/ If no profiling data was recorded for this root, skip the round trip.\n+ resolve({\n+ commitDurations: [],\n+ fiberID,\n+ rootID,\n+ });\n+ });\n+ },\n+ ({ fiberID, rendererID, rootID }: FiberCommitsParams) =>\n+ `${rootID}-${fiberID}`\n+ );\n+\n Interactions: Resource<\n InteractionsParams,\n InteractionsFrontend\n@@ -192,6 +237,7 @@ export default class ProfilingCache {\n this._store = store;\n \n bridge.addListener('commitDetails', this.onCommitDetails);\n+ bridge.addListener('fiberCommits', this.onFiberCommits);\n bridge.addListener('interactions', this.onInteractions);\n bridge.addListener('profilingSummary', this.onProfileSummary);\n }\n@@ -285,6 +331,24 @@ export default class ProfilingCache {\n }\n };\n \n+ onFiberCommits = ({\n+ commitDurations,\n+ fiberID,\n+ rootID,\n+ }: FiberCommitsBackend) => {\n+ const key = `${rootID}-${fiberID}`;\n+ const resolve = this._pendingFiberCommitsMap.get(key);\n+ if (resolve != null) {\n+ this._pendingFiberCommitsMap.delete(key);\n+\n+ resolve({\n+ commitDurations,\n+ fiberID,\n+ rootID,\n+ });\n+ }\n+ };\n+\n onInteractions = ({ interactions, rootID }: InteractionsBackend) => {\n const resolve = this._pendingInteractionsMap.get(rootID);\n if (resolve != null) {\n@@ -304,6 +368,7 @@ export default class ProfilingCache {\n const resolve = this._pendingProfileSummaryMap.get(rootID);\n if (resolve != null) {\n this._pendingProfileSummaryMap.delete(rootID);\n+\n const initialTreeBaseDurationsMap = new Map();\n for (let i = 0; i < initialTreeBaseDurations.length; i += 2) {\n initialTreeBaseDurationsMap.set(\ndiff --git a\/src\/devtools\/store.js b\/src\/devtools\/store.js\nindex 69dbf45133..225f9a8ac8 100644\n--- a\/src\/devtools\/store.js\n+++ b\/src\/devtools\/store.js\n@@ -1,6 +1,8 @@\n \/\/ @flow\n \n import EventEmitter from 'events';\n+import memoize from 'memoize-one';\n+import throttle from 'lodash.throttle';\n import {\n TREE_OPERATION_ADD,\n TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN,\n@@ -35,6 +37,8 @@ const debug = (methodName, ...args) => {\n const LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY =\n 'React::DevTools::captureScreenshots';\n \n+const THROTTLE_CAPTURE_SCREENSHOT_DURATION = 500;\n+\n type Config = {|\n isProfiling?: boolean,\n supportsCaptureScreenshots?: boolean,\n@@ -129,8 +133,8 @@ export default class Store extends EventEmitter {\n if (supportsCaptureScreenshots) {\n this._supportsCaptureScreenshots = true;\n this._captureScreenshots =\n- localStorage.getItem(LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY) !==\n- 'false';\n+ localStorage.getItem(LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY) ===\n+ 'true';\n }\n if (supportsFileDownloads) {\n this._supportsFileDownloads = true;\n@@ -416,6 +420,13 @@ export default class Store extends EventEmitter {\n this.emit('isProfiling');\n }\n \n+ _captureScreenshot = throttle(\n+ memoize((commitIndex: number) => {\n+ this._bridge.send('captureScreenshot', { commitIndex });\n+ }),\n+ THROTTLE_CAPTURE_SCREENSHOT_DURATION\n+ );\n+\n _takeProfilingSnapshotRecursive = (id: number) => {\n const element = this.getElementByID(id);\n if (element !== null) {\n@@ -454,10 +465,9 @@ export default class Store extends EventEmitter {\n profilingOperations.push(operations);\n }\n \n- const commitIndex = profilingOperations.length - 1;\n-\n if (this._captureScreenshots) {\n- this._bridge.send('captureScreenshot', { commitIndex });\n+ const commitIndex = profilingOperations.length - 1;\n+ this._captureScreenshot(commitIndex);\n }\n }\n \ndiff --git a\/src\/devtools\/views\/ButtonIcon.js b\/src\/devtools\/views\/ButtonIcon.js\nindex 6d423dca00..7aa08b3c6c 100644\n--- a\/src\/devtools\/views\/ButtonIcon.js\n+++ b\/src\/devtools\/views\/ButtonIcon.js\n@@ -12,6 +12,7 @@ export type IconType =\n | 'export'\n | 'filter'\n | 'import'\n+ | 'log-data'\n | 'more'\n | 'next'\n | 'previous'\n@@ -54,6 +55,9 @@ export default function ButtonIcon({ type }: Props) {\n case 'import':\n pathData = PATH_IMPORT;\n break;\n+ case 'log-data':\n+ pathData = PATH_LOG_DATA;\n+ break;\n case 'more':\n pathData = PATH_MORE;\n break;\n@@ -130,11 +134,16 @@ const PATH_FILTER = 'M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z';\n \n const PATH_IMPORT = 'M8.18,18.13v-7H3l9-8.95,9,9H15.82v7ZM3,20.13H21v1.73H3Z';\n \n+const PATH_LOG_DATA = `\n+ M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41\n+ 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04\n+ 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6\n+ 8h-4v-2h4v2zm0-4h-4v-2h4v2z\n+`;\n+\n const PATH_MORE = `\n- M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.97.89 1.66.89H22c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9\n- 13.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm5 0c-.83\n- 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm5 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5\n- 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z\n+ M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 \n+ 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\n `;\n \n const PATH_NEXT = 'M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z';\ndiff --git a\/src\/devtools\/views\/Components\/Element.js b\/src\/devtools\/views\/Components\/Element.js\nindex eef967d931..01f983c217 100644\n--- a\/src\/devtools\/views\/Components\/Element.js\n+++ b\/src\/devtools\/views\/Components\/Element.js\n@@ -4,24 +4,27 @@ import React, {\n Fragment,\n useCallback,\n useContext,\n- useEffect,\n+ useLayoutEffect,\n useMemo,\n useRef,\n } from 'react';\n import { ElementTypeClass, ElementTypeFunction } from 'src\/devtools\/types';\n import { createRegExp } from '..\/utils';\n import { TreeContext } from '.\/TreeContext';\n+import { BridgeContext, StoreContext } from '..\/context';\n \n+import type { ItemData } from '.\/Tree';\n import type { Element } from '.\/types';\n \n import styles from '.\/Element.css';\n \n type Props = {\n+ data: ItemData,\n index: number,\n style: Object,\n };\n \n-export default function ElementView({ index, style }: Props) {\n+export default function ElementView({ data, index, style }: Props) {\n const {\n baseDepth,\n getElementAtIndex,\n@@ -29,11 +32,14 @@ export default function ElementView({ index, style }: Props) {\n selectedElementID,\n selectElementByID,\n } = useContext(TreeContext);\n+ const bridge = useContext(BridgeContext);\n+ const store = useContext(StoreContext);\n \n const element = getElementAtIndex(index);\n \n const id = element === null ? null : element.id;\n const isSelected = selectedElementID === id;\n+ const lastScrolledIDRef = data.lastScrolledIDRef;\n \n const handleDoubleClick = useCallback(() => {\n if (id !== null) {\n@@ -43,8 +49,22 @@ export default function ElementView({ index, style }: Props) {\n \n const ref = useRef(null);\n \n- useEffect(() => {\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 if (ref.current !== null) {\n ref.current.scrollIntoView({\n behavior: 'auto',\n@@ -53,7 +73,7 @@ export default function ElementView({ index, style }: Props) {\n });\n }\n }\n- }, [isSelected]);\n+ }, [id, isSelected, lastScrolledIDRef]);\n \n \/\/ TODO Add click and key handlers for toggling element open\/close state.\n \n@@ -66,6 +86,21 @@ export default function ElementView({ index, style }: Props) {\n [id, selectElementByID]\n );\n \n+ const rendererID = id !== null ? store.getRendererIDForElement(id) : null;\n+ \/\/ Individual elements don't have a corresponding leave handler.\n+ \/\/ Instead, it's implemented on the tree level.\n+ const handleMouseEnter = useCallback(() => {\n+ if (element !== null && id !== null && rendererID !== null) {\n+ bridge.send('highlightElementInDOM', {\n+ displayName: element.displayName,\n+ hideAfterTimeout: false,\n+ id,\n+ rendererID,\n+ scrollIntoView: false,\n+ });\n+ }\n+ }, [bridge, element, id, rendererID]);\n+\n \/\/ Handle elements that are removed from the tree while an async render is in progress.\n if (element == null) {\n console.warn(` Could not find element at index ${index}`);\n@@ -84,6 +119,7 @@ export default function ElementView({ index, style }: Props) {\n return (\n (null);\n+ const isOverflowing = useIsOverflowing(elementsBarRef, elementsTotalWidth);\n+\n+ useLayoutEffect(() => {\n+ \/\/ If we're already overflowing, then we don't need to re-measure items.\n+ \/\/ That's because once the owners stack is open, it can only get larger (by driling in).\n+ \/\/ A totally new stack can only be reached by exiting this mode and re-entering it.\n+ if (elementsBarRef.current === null || isOverflowing) {\n+ return () => {};\n+ }\n+\n+ let elementsTotalWidth = 0;\n+ for (let i = 0; i < ownerStack.length; i++) {\n+ const element = elementsBarRef.current.children[i];\n+ const computedStyle = getComputedStyle(element);\n+\n+ elementsTotalWidth +=\n+ element.offsetWidth +\n+ parseInt(computedStyle.marginLeft, 10) +\n+ parseInt(computedStyle.marginRight, 10);\n+ }\n \n- const elements = ownerStack.map((id, index) => (\n- \n- ));\n+ setElementsTotalWidth(elementsTotalWidth);\n+ }, [elementsBarRef, isOverflowing, ownerStack.length]);\n \n return (\n

\n@@ -27,19 +59,97 @@ export default function OwnerStack() {\n \n <\/Button>\n

\n- {elements}\n+

\n+ {isOverflowing && (\n+ \n+ )}\n+ {isOverflowing ? (\n+ \n+ ) : (\n+ ownerStack.map((id, index) => (\n+ \n+ ))\n+ )}\n+ <\/div>\n <\/div>\n );\n }\n \n-type Props = {\n- id: number,\n- index: number,\n+type ElementsDropdownProps = {\n+ ownerStack: Array,\n+ ownerStackIndex: number | null,\n };\n+function ElementsDropdown({\n+ ownerStack,\n+ ownerStackIndex,\n+}: ElementsDropdownProps) {\n+ const store = useContext(StoreContext);\n+ const { selectOwner } = useContext(TreeContext);\n \n-function ElementView({ id, index }: Props) {\n- const { ownerStackIndex, selectOwner } = useContext(TreeContext);\n+ const [isDropdownVisible, setIsDropdownVisible] = useState(false);\n+\n+ const handleDropdownButtonClick = useCallback(() => {\n+ setIsDropdownVisible(!isDropdownVisible);\n+ }, [isDropdownVisible, setIsDropdownVisible]);\n+\n+ const handleElementClick = useCallback(\n+ (id: number) => {\n+ selectOwner(id);\n+ setIsDropdownVisible(false);\n+ },\n+ [selectOwner, setIsDropdownVisible]\n+ );\n+\n+ const modalRef = useRef(null);\n+ const dismissModal = useCallback(() => setIsDropdownVisible(false));\n+\n+ useModalDismissSignal(modalRef, dismissModal);\n+\n+ return (\n+ \n+ \n+ \n+ <\/Toggle>\n+ {isDropdownVisible && (\n+

\n+ {ownerStack.map((id, index) => (\n+ handleElementClick(id)}\n+ >\n+ {((store.getElementByID(id): any): Element).displayName}\n+ <\/button>\n+ ))}\n+ <\/div>\n+ )}\n+ <\/Fragment>\n+ );\n+}\n+\n+type ElementViewProps = {\n+ id: number,\n+ index: number | null,\n+};\n+function ElementView({ id, index }: ElementViewProps) {\n const store = useContext(StoreContext);\n+ const { ownerStackIndex, selectOwner } = useContext(TreeContext);\n+\n const { displayName } = ((store.getElementByID(id): any): Element);\n \n const isSelected = ownerStackIndex === index;\n@@ -52,7 +162,7 @@ function ElementView({ id, index }: Props) {\n \n return (\n \n {displayName}\ndiff --git a\/src\/devtools\/views\/Components\/SelectedElement.js b\/src\/devtools\/views\/Components\/SelectedElement.js\nindex 4f6295bce9..954b13f745 100644\n--- a\/src\/devtools\/views\/Components\/SelectedElement.js\n+++ b\/src\/devtools\/views\/Components\/SelectedElement.js\n@@ -40,18 +40,31 @@ export default function SelectedElement(_: Props) {\n \n const highlightElement = useCallback(() => {\n if (element !== null && selectedElementID !== null) {\n- const rendererID =\n- store.getRendererIDForElement(selectedElementID) || null;\n+ const rendererID = store.getRendererIDForElement(selectedElementID);\n if (rendererID !== null) {\n bridge.send('highlightElementInDOM', {\n displayName: element.displayName,\n+ hideAfterTimeout: true,\n id: selectedElementID,\n rendererID,\n+ scrollIntoView: true,\n });\n }\n }\n }, [bridge, element, selectedElementID, store]);\n \n+ const logElement = useCallback(() => {\n+ if (selectedElementID !== null) {\n+ const rendererID = store.getRendererIDForElement(selectedElementID);\n+ if (rendererID !== null) {\n+ bridge.send('logElementToConsole', {\n+ id: selectedElementID,\n+ rendererID,\n+ });\n+ }\n+ }\n+ }, [bridge, selectedElementID, store]);\n+\n const viewSource = useCallback(() => {\n if (viewElementSource != null && selectedElementID !== null) {\n viewElementSource(selectedElementID);\n@@ -87,6 +100,13 @@ export default function SelectedElement(_: Props) {\n >\n \n <\/Button>\n+ \n+ \n+ <\/Button>\n 0 && (\n

\n-

owner stack<\/div>\n+

rendered by<\/div>\n {owners.map(owner => (\n {};\n }\n \n- const rendererID = store.getRendererIDForElement(id) || null;\n+ const rendererID = store.getRendererIDForElement(id);\n \n \/\/ Update the $r variable.\n bridge.send('selectElement', { id, rendererID });\ndiff --git a\/src\/devtools\/views\/Components\/Tree.css b\/src\/devtools\/views\/Components\/Tree.css\nindex c526dd93ce..777e332ba7 100644\n--- a\/src\/devtools\/views\/Components\/Tree.css\n+++ b\/src\/devtools\/views\/Components\/Tree.css\n@@ -24,10 +24,6 @@\n font-family: var(--font-family-monospace);\n font-size: var(--font-size-monospace-normal);\n line-height: var(--line-height-data);\n- border: 0.25rem solid transparent;\n-}\n-.List:focus-within {\n- border-color: var(--color-button-background-focus);\n }\n \n .InnerElementType:focus {\ndiff --git a\/src\/devtools\/views\/Components\/Tree.js b\/src\/devtools\/views\/Components\/Tree.js\nindex 1d0599a20e..2c7d18f14a 100644\n--- a\/src\/devtools\/views\/Components\/Tree.js\n+++ b\/src\/devtools\/views\/Components\/Tree.js\n@@ -12,13 +12,23 @@ import AutoSizer from 'react-virtualized-auto-sizer';\n import { FixedSizeList } from 'react-window';\n import { TreeContext } from '.\/TreeContext';\n import { SettingsContext } from '..\/Settings\/SettingsContext';\n-import Element from '.\/Element';\n+import { BridgeContext } from '..\/context';\n+import ElementView from '.\/Element';\n import InspectHostNodesToggle from '.\/InspectHostNodesToggle';\n import OwnersStack from '.\/OwnersStack';\n import SearchInput from '.\/SearchInput';\n \n import styles from '.\/Tree.css';\n \n+import type { Element } from '.\/types';\n+\n+export type ItemData = {|\n+ baseDepth: number,\n+ numElements: number,\n+ getElementAtIndex: (index: number) => Element | null,\n+ lastScrolledIDRef: { current: number | null },\n+|};\n+\n type Props = {||};\n \n export default function Tree(props: Props) {\n@@ -32,19 +42,30 @@ export default function Tree(props: Props) {\n selectParentElementInTree,\n selectPreviousElementInTree,\n } = useContext(TreeContext);\n- const listRef = useRef | null>(null);\n+ const bridge = useContext(BridgeContext);\n+ \/\/ $FlowFixMe https:\/\/github.com\/facebook\/flow\/issues\/7341\n+ const listRef = useRef | null>(null);\n const treeRef = useRef(null);\n \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.\n+ \/\/ This is helpful for things like the owners list and search.\n useLayoutEffect(() => {\n if (selectedElementIndex !== null && listRef.current != null) {\n listRef.current.scrollToItem(selectedElementIndex);\n+ \/\/ Note this autoscroll only works for rows.\n+ \/\/ There's another autoscroll inside the elements\n+ \/\/ that ensures the component name is visible horizontally.\n+ \/\/ It's too early to do it now because the row might not exist yet.\n }\n }, [listRef, selectedElementIndex]);\n \n+ \/\/ This ref is passed down the context to elements.\n+ \/\/ It lets them avoid autoscrolling to the same item many times\n+ \/\/ when a selected virtual row goes in and out of the viewport.\n+ const lastScrolledIDRef = useRef(null);\n+\n \/\/ Navigate the tree with up\/down arrow keys.\n useEffect(() => {\n if (treeRef.current === null) {\n@@ -93,24 +114,30 @@ export default function Tree(props: Props) {\n \n \/\/ Let react-window know to re-render any time the underlying tree data changes.\n \/\/ This includes the owner context, since it controls a filtered view of the tree.\n- const itemData = useMemo(\n+ const itemData = useMemo(\n () => ({\n baseDepth,\n numElements,\n getElementAtIndex,\n+ lastScrolledIDRef,\n }),\n- [baseDepth, numElements, getElementAtIndex]\n+ [baseDepth, numElements, getElementAtIndex, lastScrolledIDRef]\n );\n \n+ const handleMouseLeave = useCallback(() => {\n+ bridge.send('clearHighlightedElementInDOM');\n+ }, [bridge]);\n+\n return (\n

\n {ownerStack.length > 0 ? : }\n \n <\/div>\n-

\n+

\n \n {({ height, width }) => (\n+ \/\/ $FlowFixMe https:\/\/github.com\/facebook\/flow\/issues\/7341\n \n- {Element}\n+ {ElementView}\n <\/FixedSizeList>\n )}\n <\/AutoSizer>\ndiff --git a\/src\/devtools\/views\/Components\/TreeContext.js b\/src\/devtools\/views\/Components\/TreeContext.js\nindex 940821c1a1..b83078f653 100644\n--- a\/src\/devtools\/views\/Components\/TreeContext.js\n+++ b\/src\/devtools\/views\/Components\/TreeContext.js\n@@ -383,7 +383,10 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {\n case 'RESET_OWNER_STACK':\n ownerStack = [];\n ownerStackIndex = null;\n- selectedElementIndex = null;\n+ selectedElementIndex =\n+ selectedElementID !== null\n+ ? store.getIndexOfElementID(selectedElementID)\n+ : null;\n _ownerFlatTree = null;\n break;\n case 'SELECT_ELEMENT_AT_INDEX':\ndiff --git a\/src\/devtools\/views\/Components\/types.js b\/src\/devtools\/views\/Components\/types.js\nindex 00d5a45844..fc71d5e9bb 100644\n--- a\/src\/devtools\/views\/Components\/types.js\n+++ b\/src\/devtools\/views\/Components\/types.js\n@@ -35,6 +35,8 @@ export type Owner = {|\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 \ndiff --git a\/src\/devtools\/views\/DevTools.js b\/src\/devtools\/views\/DevTools.js\nindex aec2f9961a..e5cad6eb9e 100644\n--- a\/src\/devtools\/views\/DevTools.js\n+++ b\/src\/devtools\/views\/DevTools.js\n@@ -107,25 +107,6 @@ export default function DevTools({\n };\n }, [store, supportsProfiling]);\n \n- let tabElement;\n- switch (tab) {\n- case 'profiler':\n- tabElement = (\n- \n- );\n- break;\n- case 'settings':\n- tabElement = ;\n- break;\n- case 'components':\n- default:\n- tabElement = ;\n- break;\n- }\n-\n return (\n \n \n@@ -158,7 +139,21 @@ export default function DevTools({\n \/>\n <\/div>\n )}\n-

{tabElement}<\/div>\n+ \n+ \n+ <\/div>\n+

\n+ \n+ <\/div>\n+

\n+ \n+ <\/div>\n <\/div>\n <\/ProfilerContextController>\n <\/TreeContextController>\ndiff --git a\/src\/devtools\/views\/Profiler\/ChartNode.css b\/src\/devtools\/views\/Profiler\/ChartNode.css\nindex e9ebea1a7a..3117ea1932 100644\n--- a\/src\/devtools\/views\/Profiler\/ChartNode.css\n+++ b\/src\/devtools\/views\/Profiler\/ChartNode.css\n@@ -18,10 +18,10 @@\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n- font-size: var(--font-family-sans);\n- font-family: var(--font-size-sans-normal);\n- margin-left: 4px;\n- margin-right: 4px;\n+ font-family: var(--font-family-sans);\n+ font-size: var(--font-size-sans-normal);\n+ margin-left: 0.25rem;\n+ margin-right: 0.25rem;\n line-height: 1.5;\n padding: 0 0 0;\n font-weight: 400;\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\nindex a44bce868b..a4ad534a82 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\n+++ b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\n@@ -20,7 +20,7 @@ export type ItemData = {|\n scaleX: (value: number, fallbackValue: number) => number,\n selectedChartNode: ChartNode,\n selectedChartNodeIndex: number,\n- selectFiber: (id: number | null) => void,\n+ selectFiber: (id: number | null, name: string | null) => void,\n width: number,\n |};\n \n@@ -33,7 +33,7 @@ export default function CommitFlamegraphAutoSizer(_: {||}) {\n const deselectCurrentFiber = useCallback(\n event => {\n event.stopPropagation();\n- selectFiber(null);\n+ selectFiber(null, null);\n },\n [selectFiber]\n );\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitFlamegraphListItem.js b\/src\/devtools\/views\/Profiler\/CommitFlamegraphListItem.js\nindex fb655e25f5..8d55d781b0 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitFlamegraphListItem.js\n+++ b\/src\/devtools\/views\/Profiler\/CommitFlamegraphListItem.js\n@@ -26,9 +26,9 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {\n const { maxSelfDuration, rows } = chartData;\n \n const handleClick = useCallback(\n- (event: MouseEvent, id: number) => {\n+ (event: MouseEvent, id: number, name: string) => {\n event.stopPropagation();\n- selectFiber(id);\n+ selectFiber(id, name);\n },\n [selectFiber]\n );\n@@ -50,6 +50,7 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {\n didRender,\n id,\n label,\n+ name,\n offset,\n selfDuration,\n treeBaseDuration,\n@@ -84,7 +85,7 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {\n isDimmed={index < selectedChartNodeIndex}\n key={id}\n label={label}\n- onClick={event => handleClick(event, id)}\n+ onClick={event => handleClick(event, id, name)}\n width={nodeWidth}\n x={nodeOffset - selectedNodeOffset}\n y={top}\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitRanked.js b\/src\/devtools\/views\/Profiler\/CommitRanked.js\nindex 238a7cbe3d..63cb41cd71 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitRanked.js\n+++ b\/src\/devtools\/views\/Profiler\/CommitRanked.js\n@@ -20,7 +20,7 @@ export type ItemData = {|\n scaleX: (value: number, fallbackValue: number) => number,\n selectedFiberID: number | null,\n selectedFiberIndex: number,\n- selectFiber: (id: number | null) => void,\n+ selectFiber: (id: number | null, name: string | null) => void,\n width: number,\n |};\n \n@@ -33,7 +33,7 @@ export default function CommitRankedAutoSizer(_: {||}) {\n const deselectCurrentFiber = useCallback(\n event => {\n event.stopPropagation();\n- selectFiber(null);\n+ selectFiber(null, null);\n },\n [selectFiber]\n );\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitRankedListItem.js b\/src\/devtools\/views\/Profiler\/CommitRankedListItem.js\nindex 6c37a6db46..996a207469 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitRankedListItem.js\n+++ b\/src\/devtools\/views\/Profiler\/CommitRankedListItem.js\n@@ -22,7 +22,7 @@ function CommitRankedListItem({ data, index, style }: Props) {\n const handleClick = useCallback(\n event => {\n event.stopPropagation();\n- selectFiber(node.id);\n+ selectFiber(node.id, node.name);\n },\n [node, selectFiber]\n );\ndiff --git a\/src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js b\/src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js\nindex 927f129181..bfb912adcc 100644\n--- a\/src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js\n+++ b\/src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js\n@@ -9,6 +9,7 @@ export type ChartNode = {|\n didRender: boolean,\n id: number,\n label: string,\n+ name: string,\n offset: number,\n selfDuration: number,\n treeBaseDuration: number,\n@@ -69,7 +70,7 @@ export function getChartData({\n \n let label = `${name}${maybeKey}`;\n if (didRender) {\n- label += ` (${selfDuration.toFixed(1)}ms) of ${actualDuration.toFixed(\n+ label += ` (${selfDuration.toFixed(1)}ms of ${actualDuration.toFixed(\n 1\n )}ms)`;\n }\n@@ -82,6 +83,7 @@ export function getChartData({\n didRender,\n id,\n label,\n+ name,\n offset: parentOffset,\n selfDuration,\n treeBaseDuration: node.treeBaseDuration,\ndiff --git a\/src\/devtools\/views\/Profiler\/Profiler.js b\/src\/devtools\/views\/Profiler\/Profiler.js\nindex 49145e47bc..4b346dd413 100644\n--- a\/src\/devtools\/views\/Profiler\/Profiler.js\n+++ b\/src\/devtools\/views\/Profiler\/Profiler.js\n@@ -19,6 +19,7 @@ import ProfilingImportExportButtons from '.\/ProfilingImportExportButtons';\n import SnapshotSelector from '.\/SnapshotSelector';\n import SidebarCommitInfo from '.\/SidebarCommitInfo';\n import SidebarInteractions from '.\/SidebarInteractions';\n+import SidebarSelectedFiberInfo from '.\/SidebarSelectedFiberInfo';\n import ToggleCommitFilterModalButton from '.\/ToggleCommitFilterModalButton';\n \n import styles from '.\/Profiler.css';\n@@ -118,7 +119,9 @@ function SnapshotSelectorFallback() {\n \/\/ This view's subtree uses suspense to request profiler data from the backend.\n \/\/ NOTE that the structure of this UI should mirror NonSuspendingProfiler.\n function SuspendingProfiler() {\n- const { selectedTabID, selectTab } = useContext(ProfilerContext);\n+ const { selectedFiberID, selectedTabID, selectTab } = useContext(\n+ ProfilerContext\n+ );\n const { isFilterModalShowing, setIsFilterModalShowing } = useContext(\n CommitFilterModalContext\n );\n@@ -147,7 +150,11 @@ function SuspendingProfiler() {\n break;\n case 'flame-chart':\n case 'ranked-chart':\n- sidebar = ;\n+ if (selectedFiberID !== null) {\n+ sidebar = ;\n+ } else {\n+ sidebar = ;\n+ }\n break;\n default:\n break;\ndiff --git a\/src\/devtools\/views\/Profiler\/ProfilerContext.js b\/src\/devtools\/views\/Profiler\/ProfilerContext.js\nindex bd5eb831d6..d06b5dab73 100644\n--- a\/src\/devtools\/views\/Profiler\/ProfilerContext.js\n+++ b\/src\/devtools\/views\/Profiler\/ProfilerContext.js\n@@ -56,7 +56,8 @@ type Context = {|\n \n \/\/ Which fiber is currently selected in the Ranked or Flamegraph charts?\n selectedFiberID: number | null,\n- selectFiber: (id: number | null) => void,\n+ selectedFiberName: string | null,\n+ selectFiber: (id: number | null, name: string | null) => void,\n \n \/\/ Which interaction is currently selected in the Interactions graph?\n selectedInteractionID: number | null,\n@@ -141,13 +142,15 @@ function ProfilerContextController({ children }: Props) {\n );\n const [selectedTabID, selectTab] = useState('flame-chart');\n const [selectedFiberID, selectFiberID] = useState(null);\n+ const [selectedFiberName, selectFiberName] = useState(null);\n const [selectedInteractionID, selectInteraction] = useState(\n null\n );\n \n const selectFiber = useCallback(\n- (id: number | null) => {\n+ (id: number | null, name: string | null) => {\n selectFiberID(id);\n+ selectFiberName(name);\n if (id !== null) {\n const index = store.getIndexOfElementID(id);\n if (index !== null) {\n@@ -155,7 +158,7 @@ function ProfilerContextController({ children }: Props) {\n }\n }\n },\n- [selectElementAtIndex, selectFiberID, store]\n+ [selectElementAtIndex, selectFiberID, selectFiberName, store]\n );\n \n if (isProfiling) {\n@@ -165,6 +168,7 @@ function ProfilerContextController({ children }: Props) {\n }\n if (selectedFiberID !== null) {\n selectFiberID(null);\n+ selectFiberName(null);\n }\n if (selectedInteractionID !== null) {\n selectInteraction(null);\n@@ -195,6 +199,7 @@ function ProfilerContextController({ children }: Props) {\n selectCommitIndex,\n \n selectedFiberID,\n+ selectedFiberName,\n selectFiber,\n \n selectedInteractionID,\n@@ -222,6 +227,7 @@ function ProfilerContextController({ children }: Props) {\n selectCommitIndex,\n \n selectedFiberID,\n+ selectedFiberName,\n selectFiber,\n \n selectedInteractionID,\ndiff --git a\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.js b\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.js\nindex b97c2a317c..a6c0b14b2b 100644\n--- a\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.js\n+++ b\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.js\n@@ -85,6 +85,7 @@ export default function ProfilingImportExportButtons() {\n className={styles.Input}\n type=\"file\"\n onChange={handleFiles}\n+ tabIndex={-1}\n \/>\n \n <\/li>\n-

\n+

\n Interactions<\/label>:\n-

\n {interactions.length === 0 ? (\n-

None<\/li>\n+

None<\/div>\n ) : null}\n {interactions.map((interaction, index) => (\n- viewInteraction(interaction)}\n >\n {interaction.name}\n- <\/li>\n+ <\/button>\n ))}\n- <\/ul>\n+ <\/div>\n <\/li>\n- {screenshot != null && (\n+ {captureScreenshots && (\n

\n- \n+ Screenshot<\/label>:\n+ {screenshot != null ? (\n+ \n+ ) : (\n+

\n+ No screenshot available\n+ <\/div>\n+ )}\n <\/li>\n )}\n {screenshot != null && isScreenshotModalVisible && (\ndiff --git a\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.css b\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.css\nnew file mode 100644\nindex 0000000000..a3759a1a6d\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.css\n@@ -0,0 +1,57 @@\n+.Toolbar {\n+ height: 2.25rem;\n+ padding: 0 0.5rem;\n+ flex: 0 0 auto;\n+ display: flex;\n+ align-items: center;\n+}\n+\n+.Content {\n+ padding: 0.5rem;\n+ user-select: none;\n+ border-top: 1px solid var(--color-border);\n+}\n+\n+.Component {\n+ flex: 1;\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+.Label {\n+ font-weight: bold;\n+ margin-bottom: 0.5rem;\n+}\n+\n+.CurrentCommit,\n+.Commit {\n+ display: block;\n+ width: 100%;\n+ text-align: left;\n+ background: none;\n+ border: none;\n+ padding: 0.25rem 0.5rem;\n+ color: var(--color-text);\n+}\n+.Commit:focus,\n+.Commit:hover {\n+ outline: none;\n+ background-color: var(--color-hover-background);\n+}\n+\n+.CurrentCommit {\n+ background-color: var(--color-selected-background);\n+ color: var(--color-selected-foreground);\n+}\n+.CurrentCommit:focus {\n+ outline: none;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.js b\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.js\nnew file mode 100644\nindex 0000000000..8739509575\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.js\n@@ -0,0 +1,78 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useContext } from 'react';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+import { formatDuration, formatTime } from '.\/utils';\n+import { StoreContext } from '..\/context';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+\n+import styles from '.\/SidebarSelectedFiberInfo.css';\n+\n+export type Props = {||};\n+\n+export default function SidebarSelectedFiberInfo(_: Props) {\n+ const { profilingCache } = useContext(StoreContext);\n+ const {\n+ rendererID,\n+ rootID,\n+ selectCommitIndex,\n+ selectedCommitIndex,\n+ selectedFiberID,\n+ selectedFiberName,\n+ selectFiber,\n+ } = useContext(ProfilerContext);\n+\n+ const { commitTimes } = profilingCache.ProfilingSummary.read({\n+ rendererID: ((rendererID: any): number),\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ const { commitDurations } = profilingCache.FiberCommits.read({\n+ fiberID: ((selectedFiberID: any): number),\n+ rendererID: ((rendererID: any): number),\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ const listItems = [];\n+ for (let i = 0; i < commitDurations.length; i += 2) {\n+ const commitIndex = commitDurations[i];\n+ const duration = commitDurations[i + 1];\n+ const time = commitTimes[commitIndex];\n+\n+ listItems.push(\n+ selectCommitIndex(commitIndex)}\n+ >\n+ {formatTime(time)}s for {formatDuration(duration)}ms\n+ <\/button>\n+ );\n+ }\n+\n+ return (\n+ \n+

\n+

\n+ {selectedFiberName || 'Selected component'}\n+ <\/div>\n+\n+ selectFiber(null, null)}\n+ title=\"Back to commit view\"\n+ >\n+ \n+ <\/Button>\n+ <\/div>\n+

\n+ Rendered at<\/label>: {listItems}\n+ <\/div>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SnapshotSelector.css b\/src\/devtools\/views\/Profiler\/SnapshotSelector.css\nindex 4a19d964bf..e4f8aec57d 100644\n--- a\/src\/devtools\/views\/Profiler\/SnapshotSelector.css\n+++ b\/src\/devtools\/views\/Profiler\/SnapshotSelector.css\n@@ -11,6 +11,7 @@\n }\n .Commits:focus {\n outline: none;\n+ background-color: var(--color-button-background-focus);\n }\n \n .IndexLabel {\ndiff --git a\/src\/devtools\/views\/Profiler\/types.js b\/src\/devtools\/views\/Profiler\/types.js\nindex fc7d22e770..eb9dd1b494 100644\n--- a\/src\/devtools\/views\/Profiler\/types.js\n+++ b\/src\/devtools\/views\/Profiler\/types.js\n@@ -34,6 +34,12 @@ export type CommitDetails = {|\n interactions: Array,\n |};\n \n+export type FiberCommits = {|\n+ commitDurations: Array,\n+ fiberID: number,\n+ rootID: number,\n+|};\n+\n export type ProfilingSummary = {|\n rootID: number,\n \ndiff --git a\/src\/devtools\/views\/Settings\/Settings.css b\/src\/devtools\/views\/Settings\/Settings.css\nindex 1b29a756a5..01afd5a23d 100644\n--- a\/src\/devtools\/views\/Settings\/Settings.css\n+++ b\/src\/devtools\/views\/Settings\/Settings.css\n@@ -51,3 +51,9 @@\n border-bottom-right-radius: 0.25rem;\n border-right: 1px solid var(--color-border);\n }\n+\n+.ScreenshotThrottling {\n+ background-color: var(--color-hover-background);\n+ padding: 0.25rem 0.5rem;\n+ border-radius: 0.25rem;\n+}\ndiff --git a\/src\/devtools\/views\/Settings\/Settings.js b\/src\/devtools\/views\/Settings\/Settings.js\nindex 808697ea4c..f647162a8a 100644\n--- a\/src\/devtools\/views\/Settings\/Settings.js\n+++ b\/src\/devtools\/views\/Settings\/Settings.js\n@@ -117,16 +117,20 @@ export default function Settings({ portalContainer }: Props) {\n {store.supportsCaptureScreenshots && (\n

Profiler<\/div>\n-

\n- \n- {' '}\n- Capture screenshots while profiling\n- <\/label>\n- <\/div>\n+ \n+ {' '}\n+ Capture screenshots while profiling\n+ {captureScreenshots && (\n+

\n+ Screenshots will be throttled in order to reduce the negative\n+ impact on performance.\n+ <\/p>\n+ )}\n+ <\/label>\n <\/div>\n )}\n <\/div>\ndiff --git a\/src\/devtools\/views\/TabBar.css b\/src\/devtools\/views\/TabBar.css\nindex 07362e6bde..e1a536e07f 100644\n--- a\/src\/devtools\/views\/TabBar.css\n+++ b\/src\/devtools\/views\/TabBar.css\n@@ -15,6 +15,10 @@\n .TabCurrent:hover {\n background-color: var(--color-hover-background);\n }\n+.Tab:focus-within,\n+.TabCurrent:focus-within {\n+ background-color: var(--color-hover-background);\n+}\n \n .TabCurrent {\n border-bottom: 3px solid var(--color-selected-border);\ndiff --git a\/src\/devtools\/views\/TabBar.js b\/src\/devtools\/views\/TabBar.js\nindex 81611fb7a2..d5ba8c5cb6 100644\n--- a\/src\/devtools\/views\/TabBar.js\n+++ b\/src\/devtools\/views\/TabBar.js\n@@ -1,5 +1,6 @@\n \/\/ @flow\n \n+import classNames from 'classnames';\n import React, { Fragment, useCallback } from 'react';\n import Icon from '.\/Icon';\n \n@@ -60,9 +61,11 @@ export default function TabBar({\n \n {tabs.map(({ icon, id, label, title }) => (\n void,\n+ title?: string,\n };\n \n export default function Toggle({\n@@ -18,6 +19,7 @@ export default function Toggle({\n isDisabled = false,\n isChecked,\n onChange,\n+ title,\n }: Props) {\n let defaultClassName;\n if (isDisabled) {\n@@ -36,7 +38,7 @@ export default function Toggle({\n );\n \n return (\n- \n+ \n (false);\n+\n+ \/\/ It's important to use a layout effect, so that we avoid showing a flash of overflowed content.\n+ useLayoutEffect(() => {\n+ if (containerRef.current === null) {\n+ return () => {};\n+ }\n+\n+ const container = ((containerRef.current: any): HTMLDivElement);\n+\n+ const handleResize = throttle(\n+ () => setIsOverflowing(container.clientWidth <= totalChildWidth),\n+ 100\n+ );\n+\n+ handleResize();\n+\n+ \/\/ It's important to listen to the ownerDocument.defaultView to support the browser extension.\n+ \/\/ Here we use portals to render individual tabs (e.g. Profiler),\n+ \/\/ and the root document might belong to a different window.\n+ const ownerWindow = container.ownerDocument.defaultView;\n+ ownerWindow.addEventListener('resize', handleResize);\n+ return () => ownerWindow.removeEventListener('resize', handleResize);\n+ }, [containerRef, totalChildWidth]);\n+\n+ return isOverflowing;\n+}\n+\n \/\/ Forked from https:\/\/usehooks.com\/useLocalStorage\/\n export function useLocalStorage(\n key: string,\n@@ -68,9 +101,15 @@ export function useModalDismissSignal(\n }\n };\n \n- const handleMouseOrTouch = ({ target }: any) => {\n+ const handleClick = (event: any) => {\n \/\/ $FlowFixMe\n- if (modalRef.current !== null && !modalRef.current.contains(target)) {\n+ if (\n+ modalRef.current !== null &&\n+ !modalRef.current.contains(event.target)\n+ ) {\n+ event.stopPropagation();\n+ event.preventDefault();\n+\n dismissCallback();\n }\n };\n@@ -80,13 +119,11 @@ export function useModalDismissSignal(\n \/\/ and the root document might belong to a different window.\n const ownerDocument = modalRef.current.ownerDocument;\n ownerDocument.addEventListener('keydown', handleKeyDown);\n- ownerDocument.addEventListener('mousedown', handleMouseOrTouch);\n- ownerDocument.addEventListener('touchstart', handleMouseOrTouch);\n+ ownerDocument.addEventListener('click', handleClick);\n \n return () => {\n ownerDocument.removeEventListener('keydown', handleKeyDown);\n- ownerDocument.removeEventListener('mousedown', handleMouseOrTouch);\n- ownerDocument.removeEventListener('touchstart', handleMouseOrTouch);\n+ ownerDocument.removeEventListener('click', handleClick);\n };\n }, [modalRef, dismissCallback]);\n }\ndiff --git a\/yarn.lock b\/yarn.lock\nindex 622ecd77fa..0f79da19d3 100644\n--- a\/yarn.lock\n+++ b\/yarn.lock\n@@ -4683,10 +4683,10 @@ flatstr@^1.0.4:\n version \"1.0.5\"\n resolved \"https:\/\/registry.yarnpkg.com\/flatstr\/-\/flatstr-1.0.5.tgz#5b451b08cbd48e2eac54a2bbe0bf46165aa14be3\"\n \n-flow-bin@^0.94.0:\n- version \"0.94.0\"\n- resolved \"https:\/\/registry.yarnpkg.com\/flow-bin\/-\/flow-bin-0.94.0.tgz#b5d58fe7559705b73a18229f97edfc3ab6ffffcb\"\n- integrity sha512-DYF7r9CJ\/AksfmmB4+q+TyLMoeQPRnqtF1Pk7KY3zgfkB\/nVuA3nXyzqgsIPIvnMSiFEXQcFK4z+iPxSLckZhQ==\n+flow-bin@^0.96.0:\n+ version \"0.96.0\"\n+ resolved \"https:\/\/registry.yarnpkg.com\/flow-bin\/-\/flow-bin-0.96.0.tgz#3b0379d97304dc1879ae6db627cd2d6819998661\"\n+ integrity sha512-OSxERs0EdhVxEVCst\/HmlT\/RcnXsQQIRqcfK9J9wC8\/93JQj+xQz4RtlsmYe1PSRYaozuDLyPS5pIA81Zwzaww==\n \n flush-write-stream@^1.0.0:\n version \"1.1.1\"\n@@ -7053,6 +7053,11 @@ lodash.templatesettings@^4.0.0:\n dependencies:\n lodash._reinterpolate \"~3.0.0\"\n \n+lodash.throttle@^4.1.1:\n+ version \"4.1.1\"\n+ resolved \"https:\/\/registry.yarnpkg.com\/lodash.throttle\/-\/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4\"\n+ integrity sha1-wj6RtxAkKscMN\/HhzaknTMOb8vQ=\n+\n lodash@3.10.1, lodash@^3.10.0:\n version \"3.10.1\"\n resolved \"https:\/\/registry.yarnpkg.com\/lodash\/-\/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6\"\n","commit":{"authorName":"Dan Abramov","authorEmail":"dan.abramov@gmail.com","authoredAt":"2019-04-08T20:50:58+01:00","shortRevision":"388677fcbc","subject":"Merge branch 'master' into continuous-select","revision":"388677fcbce398974b7dea1341096aaedddd3793"},"parents":["99593444b98bd0c0ae255fb897867a02c4a73d25","44ecff31e3b8d6963711dd375045e5deca068fc7"],"files":[{"status":"M","path":".flowconfig"},{"status":"M","path":".gitignore"},{"status":"M","path":"package.json"},{"status":"M","path":"shells\/browser\/shared\/src\/main.js"},{"status":"M","path":"src\/backend\/agent.js"},{"status":"M","path":"src\/backend\/renderer.js"},{"status":"M","path":"src\/backend\/types.js"},{"status":"M","path":"src\/backend\/views\/Highlighter.js"},{"status":"M","path":"src\/backend\/views\/Overlay.js"},{"status":"M","path":"src\/devtools\/ProfilingCache.js"},{"status":"M","path":"src\/devtools\/store.js"},{"status":"M","path":"src\/devtools\/views\/ButtonIcon.js"},{"status":"M","path":"src\/devtools\/views\/Components\/Element.js"},{"status":"M","path":"src\/devtools\/views\/Components\/OwnersStack.css"},{"status":"M","path":"src\/devtools\/views\/Components\/OwnersStack.js"},{"status":"M","path":"src\/devtools\/views\/Components\/SelectedElement.js"},{"status":"M","path":"src\/devtools\/views\/Components\/Tree.css"},{"status":"M","path":"src\/devtools\/views\/Components\/Tree.js"},{"status":"M","path":"src\/devtools\/views\/Components\/TreeContext.js"},{"status":"M","path":"src\/devtools\/views\/Components\/types.js"},{"status":"M","path":"src\/devtools\/views\/DevTools.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/ChartNode.css"},{"status":"M","path":"src\/devtools\/views\/Profiler\/CommitFlamegraph.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/CommitFlamegraphListItem.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/CommitRanked.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/CommitRankedListItem.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/Profiler.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/ProfilerContext.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/RankedChartBuilder.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/SidebarCommitInfo.css"},{"status":"M","path":"src\/devtools\/views\/Profiler\/SidebarCommitInfo.js"},{"status":"A","path":"src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.css"},{"status":"A","path":"src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/SnapshotSelector.css"},{"status":"M","path":"src\/devtools\/views\/Profiler\/types.js"},{"status":"M","path":"src\/devtools\/views\/Settings\/Settings.css"},{"status":"M","path":"src\/devtools\/views\/Settings\/Settings.js"},{"status":"M","path":"src\/devtools\/views\/TabBar.css"},{"status":"M","path":"src\/devtools\/views\/TabBar.js"},{"status":"M","path":"src\/devtools\/views\/Toggle.js"},{"status":"M","path":"src\/devtools\/views\/hooks.js"},{"status":"M","path":"yarn.lock"}]}

dillon1000/react

Files changed