Hi!<\/div>;\n+\n+ const containerA = document.createElement('div');\n+ const containerB = document.createElement('div');\n+\n+ utils.act(() => {\n+ ReactDOM.render(, containerA);\n+ ReactDOM.render(, containerB);\n+ });\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+\n+ utils.act(() => {\n+ ReactDOM.render(, containerA);\n+ ReactDOM.render(, containerB);\n+ });\n+\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ const rootA = store.roots[0];\n+ const rootB = store.roots[1];\n+\n+ utils.act(() => ReactDOM.unmountComponentAtNode(containerB));\n+\n+ expect(store.profilerStore.getDataForRoot(rootA)).not.toBeNull();\n+\n+ utils.act(() => ReactDOM.unmountComponentAtNode(containerA));\n+\n+ expect(store.profilerStore.getDataForRoot(rootB)).not.toBeNull();\n+ });\n+});\ndiff --git a\/src\/__tests__\/profiling-test.js b\/src\/__tests__\/profiling-test.js\ndeleted file mode 100644\nindex d992e72a88..0000000000\n--- a\/src\/__tests__\/profiling-test.js\n+++ \/dev\/null\n@@ -1,574 +0,0 @@\n-\/\/ @flow\n-\n-import typeof ReactTestRenderer from 'react-test-renderer';\n-import type Bridge from 'src\/bridge';\n-import type Store from 'src\/devtools\/store';\n-\n-describe('profiling', () => {\n- let React;\n- let ReactDOM;\n- let Scheduler;\n- let SchedulerTracing;\n- let TestRenderer: ReactTestRenderer;\n- let bridge: Bridge;\n- let store: Store;\n- let utils;\n-\n- beforeEach(() => {\n- utils = require('.\/utils');\n- utils.beforeEachProfiling();\n-\n- bridge = global.bridge;\n- store = global.store;\n- store.collapseNodesByDefault = false;\n-\n- React = require('react');\n- ReactDOM = require('react-dom');\n- Scheduler = require('scheduler');\n- SchedulerTracing = require('scheduler\/tracing');\n- TestRenderer = utils.requireTestRenderer();\n- });\n-\n- it('should throw if importing older\/unsupported data', () => {\n- const {\n- prepareImportedProfilingData,\n- } = require('src\/devtools\/views\/Profiler\/utils');\n- expect(() =>\n- prepareImportedProfilingData(\n- JSON.stringify({\n- version: 0,\n- })\n- )\n- ).toThrow('Unsupported profiler export version \"0\"');\n- });\n-\n- describe('ProfilingSummary', () => {\n- it('should be collected for each commit', async done => {\n- const Parent = ({ count }) => {\n- Scheduler.advanceTime(10);\n- const children = new Array(count)\n- .fill(true)\n- .map((_, index) => );\n- return (\n- \n- {children}\n- \n- <\/React.Fragment>\n- );\n- };\n- const Child = ({ duration }) => {\n- Scheduler.advanceTime(duration);\n- return null;\n- };\n- const MemoizedChild = React.memo(Child);\n-\n- const container = document.createElement('div');\n-\n- utils.act(() => ReactDOM.render(, container));\n- utils.act(() => store.startProfiling());\n- utils.act(() => ReactDOM.render(, container));\n- utils.act(() => ReactDOM.render(, container));\n- utils.act(() => ReactDOM.render(, container));\n- utils.act(() => store.stopProfiling());\n-\n- let profilingSummary = null;\n-\n- function Suspender({ previousPofilingSummary, rendererID, rootID }) {\n- profilingSummary = store.profilingCache.ProfilingSummary.read({\n- rendererID,\n- rootID,\n- });\n- if (previousPofilingSummary != null) {\n- expect(profilingSummary).toEqual(previousPofilingSummary);\n- } else {\n- expect(profilingSummary).toMatchSnapshot('ProfilingSummary');\n- }\n- return null;\n- }\n-\n- const rendererID = utils.getRendererID();\n- const rootID = store.roots[0];\n-\n- await utils.actAsync(() =>\n- TestRenderer.create(\n- \n- \n- <\/React.Suspense>\n- )\n- );\n-\n- expect(profilingSummary).not.toBeNull();\n-\n- utils.exportImportHelper(bridge, store, rendererID, rootID);\n-\n- await utils.actAsync(() =>\n- TestRenderer.create(\n- \n- \n- <\/React.Suspense>\n- )\n- );\n-\n- done();\n- });\n- });\n-\n- describe('CommitDetails', () => {\n- it('should be collected for each commit', async done => {\n- const Parent = ({ count }) => {\n- Scheduler.advanceTime(10);\n- const children = new Array(count)\n- .fill(true)\n- .map((_, index) => );\n- return (\n- \n- {children}\n- \n- <\/React.Fragment>\n- );\n- };\n- const Child = ({ duration }) => {\n- Scheduler.advanceTime(duration);\n- return null;\n- };\n- const MemoizedChild = React.memo(Child);\n-\n- const container = document.createElement('div');\n-\n- utils.act(() => store.startProfiling());\n- utils.act(() => ReactDOM.render(, container));\n- utils.act(() => ReactDOM.render(, container));\n- utils.act(() => ReactDOM.render(, container));\n- utils.act(() => ReactDOM.render(, container));\n- utils.act(() => store.stopProfiling());\n-\n- const allCommitDetails = [];\n-\n- function Suspender({\n- commitIndex,\n- previousCommitDetails,\n- rendererID,\n- rootID,\n- }) {\n- const commitDetails = store.profilingCache.CommitDetails.read({\n- commitIndex,\n- rendererID,\n- rootID,\n- });\n- if (previousCommitDetails != null) {\n- expect(commitDetails).toEqual(previousCommitDetails);\n- } else {\n- allCommitDetails.push(commitDetails);\n- expect(commitDetails).toMatchSnapshot(\n- `CommitDetails commitIndex: ${commitIndex}`\n- );\n- }\n- return null;\n- }\n-\n- const rendererID = utils.getRendererID();\n- const rootID = store.roots[0];\n-\n- for (let commitIndex = 0; commitIndex < 4; commitIndex++) {\n- await utils.actAsync(() => {\n- TestRenderer.create(\n- \n- \n- <\/React.Suspense>\n- );\n- });\n- }\n-\n- expect(allCommitDetails).toHaveLength(4);\n-\n- utils.exportImportHelper(bridge, store, rendererID, rootID);\n-\n- for (let commitIndex = 0; commitIndex < 4; commitIndex++) {\n- await utils.actAsync(() => {\n- TestRenderer.create(\n- \n- \n- <\/React.Suspense>\n- );\n- });\n- }\n-\n- done();\n- });\n-\n- it('should calculate a self duration based on actual children (not filtered children)', async done => {\n- store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];\n-\n- const Grandparent = () => {\n- Scheduler.advanceTime(10);\n- return (\n- \n- \n- \n- <\/React.Fragment>\n- );\n- };\n- const Parent = () => {\n- Scheduler.advanceTime(2);\n- return ;\n- };\n- const Child = () => {\n- Scheduler.advanceTime(1);\n- return null;\n- };\n-\n- utils.act(() => store.startProfiling());\n- utils.act(() =>\n- ReactDOM.render(, document.createElement('div'))\n- );\n- utils.act(() => store.stopProfiling());\n-\n- let commitDetails = null;\n-\n- function Suspender({ commitIndex, rendererID, rootID }) {\n- commitDetails = store.profilingCache.CommitDetails.read({\n- commitIndex,\n- rendererID,\n- rootID,\n- });\n- expect(commitDetails).toMatchSnapshot(\n- `CommitDetails with filtered self durations`\n- );\n- return null;\n- }\n-\n- const rendererID = utils.getRendererID();\n- const rootID = store.roots[0];\n-\n- await utils.actAsync(() => {\n- TestRenderer.create(\n- \n- \n- <\/React.Suspense>\n- );\n- });\n-\n- expect(commitDetails).not.toBeNull();\n-\n- done();\n- });\n-\n- it('should calculate self duration correctly for suspended views', async done => {\n- let data;\n- const getData = () => {\n- if (data) {\n- return data;\n- } else {\n- throw new Promise(resolve => {\n- data = 'abc';\n- resolve(data);\n- });\n- }\n- };\n-\n- const Parent = () => {\n- Scheduler.advanceTime(10);\n- return (\n- }>\n- \n- <\/React.Suspense>\n- );\n- };\n- const Fallback = () => {\n- Scheduler.advanceTime(2);\n- return 'Fallback...';\n- };\n- const Async = () => {\n- Scheduler.advanceTime(3);\n- const data = getData();\n- return data;\n- };\n-\n- utils.act(() => store.startProfiling());\n- await utils.actAsync(() =>\n- ReactDOM.render(, document.createElement('div'))\n- );\n- utils.act(() => store.stopProfiling());\n-\n- const allCommitDetails = [];\n-\n- function Suspender({ commitIndex, rendererID, rootID }) {\n- const commitDetails = store.profilingCache.CommitDetails.read({\n- commitIndex,\n- rendererID,\n- rootID,\n- });\n- allCommitDetails.push(commitDetails);\n- expect(commitDetails).toMatchSnapshot(\n- `CommitDetails with filtered self durations`\n- );\n- return null;\n- }\n-\n- const rendererID = utils.getRendererID();\n- const rootID = store.roots[0];\n-\n- for (let commitIndex = 0; commitIndex < 2; commitIndex++) {\n- await utils.actAsync(() => {\n- TestRenderer.create(\n- \n- \n- <\/React.Suspense>\n- );\n- });\n- }\n-\n- expect(allCommitDetails).toHaveLength(2);\n-\n- done();\n- });\n- });\n-\n- describe('FiberCommits', () => {\n- it('should be collected for each rendered fiber', async done => {\n- const Parent = ({ count }) => {\n- Scheduler.advanceTime(10);\n- const children = new Array(count)\n- .fill(true)\n- .map((_, index) => );\n- return (\n- \n- {children}\n- \n- <\/React.Fragment>\n- );\n- };\n- const Child = ({ duration }) => {\n- Scheduler.advanceTime(duration);\n- return null;\n- };\n- const MemoizedChild = React.memo(Child);\n-\n- const container = document.createElement('div');\n-\n- utils.act(() => store.startProfiling());\n- utils.act(() => ReactDOM.render(, container));\n- utils.act(() => ReactDOM.render(, container));\n- utils.act(() => ReactDOM.render(, container));\n- utils.act(() => store.stopProfiling());\n-\n- const allFiberCommits = [];\n-\n- function Suspender({\n- fiberID,\n- previousFiberCommits,\n- rendererID,\n- rootID,\n- }) {\n- const fiberCommits = store.profilingCache.FiberCommits.read({\n- fiberID,\n- rendererID,\n- rootID,\n- });\n- if (previousFiberCommits != null) {\n- expect(fiberCommits).toEqual(previousFiberCommits);\n- } else {\n- allFiberCommits.push(fiberCommits);\n- expect(fiberCommits).toMatchSnapshot(\n- `FiberCommits: element ${fiberID}`\n- );\n- }\n- return null;\n- }\n-\n- const rendererID = utils.getRendererID();\n- const rootID = store.roots[0];\n-\n- for (let index = 0; index < store.numElements; index++) {\n- await utils.actAsync(() => {\n- const fiberID = store.getElementIDAtIndex(index);\n- if (fiberID == null) {\n- throw Error(`Unexpected null ID for element at index ${index}`);\n- }\n- TestRenderer.create(\n- \n- \n- <\/React.Suspense>\n- );\n- });\n- }\n-\n- expect(allFiberCommits).toHaveLength(store.numElements);\n-\n- utils.exportImportHelper(bridge, store, rendererID, rootID);\n-\n- for (let index = 0; index < store.numElements; index++) {\n- await utils.actAsync(() => {\n- const fiberID = store.getElementIDAtIndex(index);\n- if (fiberID == null) {\n- throw Error(`Unexpected null ID for element at index ${index}`);\n- }\n- TestRenderer.create(\n- \n- \n- <\/React.Suspense>\n- );\n- });\n- }\n-\n- done();\n- });\n- });\n-\n- describe('Interactions', () => {\n- it('should be collected for every traced interaction', async done => {\n- const Parent = ({ count }) => {\n- Scheduler.advanceTime(10);\n- const children = new Array(count)\n- .fill(true)\n- .map((_, index) => );\n- return (\n- \n- {children}\n- \n- <\/React.Fragment>\n- );\n- };\n- const Child = ({ duration }) => {\n- Scheduler.advanceTime(duration);\n- return null;\n- };\n- const MemoizedChild = React.memo(Child);\n-\n- const container = document.createElement('div');\n-\n- utils.act(() => store.startProfiling());\n- utils.act(() =>\n- SchedulerTracing.unstable_trace(\n- 'mount: one child',\n- Scheduler.unstable_now(),\n- () => ReactDOM.render(, container)\n- )\n- );\n- utils.act(() =>\n- SchedulerTracing.unstable_trace(\n- 'update: two children',\n- Scheduler.unstable_now(),\n- () => ReactDOM.render(, container)\n- )\n- );\n- utils.act(() => store.stopProfiling());\n-\n- let interactions = null;\n-\n- function Suspender({ previousInteractions, rendererID, rootID }) {\n- interactions = store.profilingCache.Interactions.read({\n- rendererID,\n- rootID,\n- });\n- if (previousInteractions != null) {\n- expect(interactions).toEqual(previousInteractions);\n- } else {\n- expect(interactions).toMatchSnapshot('Interactions');\n- }\n- return null;\n- }\n-\n- const rendererID = utils.getRendererID();\n- const rootID = store.roots[0];\n-\n- await utils.actAsync(() =>\n- TestRenderer.create(\n- \n- \n- <\/React.Suspense>\n- )\n- );\n-\n- expect(interactions).not.toBeNull();\n-\n- utils.exportImportHelper(bridge, store, rendererID, rootID);\n-\n- await utils.actAsync(() =>\n- TestRenderer.create(\n- \n- \n- <\/React.Suspense>\n- )\n- );\n-\n- done();\n- });\n- });\n-\n- it('should remove profiling data when roots are unmounted', async () => {\n- const Parent = ({ count }) =>\n- new Array(count)\n- .fill(true)\n- .map((_, index) => );\n- const Child = () =>

Hi!<\/div>;\n-\n- const containerA = document.createElement('div');\n- const containerB = document.createElement('div');\n-\n- utils.act(() => {\n- ReactDOM.render(, containerA);\n- ReactDOM.render(, containerB);\n- });\n-\n- utils.act(() => store.startProfiling());\n-\n- utils.act(() => {\n- ReactDOM.render(, containerA);\n- ReactDOM.render(, containerB);\n- });\n-\n- utils.act(() => ReactDOM.unmountComponentAtNode(containerB));\n-\n- utils.act(() => ReactDOM.unmountComponentAtNode(containerA));\n-\n- utils.act(() => store.stopProfiling());\n-\n- \/\/ Assert all maps are empty\n- store.assertExpectedRootMapSizes();\n- });\n-});\ndiff --git a\/src\/__tests__\/profilingCache-test.js b\/src\/__tests__\/profilingCache-test.js\nnew file mode 100644\nindex 0000000000..c93d347ea8\n--- \/dev\/null\n+++ b\/src\/__tests__\/profilingCache-test.js\n@@ -0,0 +1,455 @@\n+\/\/ @flow\n+\n+import typeof ReactTestRenderer from 'react-test-renderer';\n+import type Bridge from 'src\/bridge';\n+import type Store from 'src\/devtools\/store';\n+\n+describe('ProfilingCache', () => {\n+ let React;\n+ let ReactDOM;\n+ let Scheduler;\n+ let SchedulerTracing;\n+ let TestRenderer: ReactTestRenderer;\n+ let bridge: Bridge;\n+ let store: Store;\n+ let utils;\n+\n+ beforeEach(() => {\n+ utils = require('.\/utils');\n+ utils.beforeEachProfiling();\n+\n+ bridge = global.bridge;\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ Scheduler = require('scheduler');\n+ SchedulerTracing = require('scheduler\/tracing');\n+ TestRenderer = utils.requireTestRenderer();\n+ });\n+\n+ it('should collect data for each root (including ones added or mounted after profiling started)', () => {\n+ const Parent = ({ count }) => {\n+ Scheduler.advanceTime(10);\n+ const children = new Array(count)\n+ .fill(true)\n+ .map((_, index) => );\n+ return (\n+ \n+ {children}\n+ \n+ <\/React.Fragment>\n+ );\n+ };\n+ const Child = ({ duration }) => {\n+ Scheduler.advanceTime(duration);\n+ return null;\n+ };\n+ const MemoizedChild = React.memo(Child);\n+\n+ const containerA = document.createElement('div');\n+ const containerB = document.createElement('div');\n+ const containerC = document.createElement('div');\n+\n+ utils.act(() => ReactDOM.render(, containerA));\n+ utils.act(() => ReactDOM.render(, containerB));\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() => ReactDOM.render(, containerA));\n+ utils.act(() => ReactDOM.render(, containerC));\n+ utils.act(() => ReactDOM.render(, containerA));\n+ utils.act(() => ReactDOM.unmountComponentAtNode(containerB));\n+ utils.act(() => ReactDOM.render(, containerA));\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ let allProfilingDataForRoots = [];\n+\n+ function Validator({ previousProfilingDataForRoot, rootID }) {\n+ const profilingDataForRoot = store.profilerStore.getDataForRoot(rootID);\n+ if (previousProfilingDataForRoot != null) {\n+ expect(profilingDataForRoot).toEqual(previousProfilingDataForRoot);\n+ } else {\n+ expect(profilingDataForRoot).toMatchSnapshot(\n+ `Data for root ${profilingDataForRoot.displayName}`\n+ );\n+ }\n+ allProfilingDataForRoots.push(profilingDataForRoot);\n+ return null;\n+ }\n+\n+ const dataForRoots =\n+ store.profilerStore.profilingData !== null\n+ ? store.profilerStore.profilingData.dataForRoots\n+ : null;\n+\n+ expect(dataForRoots).not.toBeNull();\n+\n+ if (dataForRoots !== null) {\n+ dataForRoots.forEach(dataForRoot => {\n+ utils.act(() =>\n+ TestRenderer.create(\n+ \n+ )\n+ );\n+ });\n+ }\n+\n+ expect(allProfilingDataForRoots).toHaveLength(3);\n+\n+ utils.exportImportHelper(bridge, store);\n+\n+ allProfilingDataForRoots.forEach(profilingDataForRoot => {\n+ utils.act(() =>\n+ TestRenderer.create(\n+ \n+ )\n+ );\n+ });\n+ });\n+\n+ it('should collect data for each commit', () => {\n+ const Parent = ({ count }) => {\n+ Scheduler.advanceTime(10);\n+ const children = new Array(count)\n+ .fill(true)\n+ .map((_, index) => );\n+ return (\n+ \n+ {children}\n+ \n+ <\/React.Fragment>\n+ );\n+ };\n+ const Child = ({ duration }) => {\n+ Scheduler.advanceTime(duration);\n+ return null;\n+ };\n+ const MemoizedChild = React.memo(Child);\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() => ReactDOM.render(, container));\n+ utils.act(() => ReactDOM.render(, container));\n+ utils.act(() => ReactDOM.render(, container));\n+ utils.act(() => ReactDOM.render(, container));\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ const allCommitData = [];\n+\n+ function Validator({ commitIndex, previousCommitDetails, rootID }) {\n+ const commitData = store.profilerStore.getCommitData(rootID, commitIndex);\n+ if (previousCommitDetails != null) {\n+ expect(commitData).toEqual(previousCommitDetails);\n+ } else {\n+ allCommitData.push(commitData);\n+ expect(commitData).toMatchSnapshot(\n+ `CommitDetails commitIndex: ${commitIndex}`\n+ );\n+ }\n+ return null;\n+ }\n+\n+ const rootID = store.roots[0];\n+\n+ for (let commitIndex = 0; commitIndex < 4; commitIndex++) {\n+ utils.act(() => {\n+ TestRenderer.create(\n+ \n+ );\n+ });\n+ }\n+\n+ expect(allCommitData).toHaveLength(4);\n+\n+ utils.exportImportHelper(bridge, store);\n+\n+ for (let commitIndex = 0; commitIndex < 4; commitIndex++) {\n+ utils.act(() => {\n+ TestRenderer.create(\n+ \n+ );\n+ });\n+ }\n+ });\n+\n+ it('should calculate a self duration based on actual children (not filtered children)', () => {\n+ store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];\n+\n+ const Grandparent = () => {\n+ Scheduler.advanceTime(10);\n+ return (\n+ \n+ \n+ \n+ <\/React.Fragment>\n+ );\n+ };\n+ const Parent = () => {\n+ Scheduler.advanceTime(2);\n+ return ;\n+ };\n+ const Child = () => {\n+ Scheduler.advanceTime(1);\n+ return null;\n+ };\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() =>\n+ ReactDOM.render(, document.createElement('div'))\n+ );\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ let commitData = null;\n+\n+ function Validator({ commitIndex, rootID }) {\n+ commitData = store.profilerStore.getCommitData(rootID, commitIndex);\n+ expect(commitData).toMatchSnapshot(\n+ `CommitDetails with filtered self durations`\n+ );\n+ return null;\n+ }\n+\n+ const rootID = store.roots[0];\n+\n+ utils.act(() => {\n+ TestRenderer.create();\n+ });\n+\n+ expect(commitData).not.toBeNull();\n+ });\n+\n+ it('should calculate self duration correctly for suspended views', async done => {\n+ let data;\n+ const getData = () => {\n+ if (data) {\n+ return data;\n+ } else {\n+ throw new Promise(resolve => {\n+ data = 'abc';\n+ resolve(data);\n+ });\n+ }\n+ };\n+\n+ const Parent = () => {\n+ Scheduler.advanceTime(10);\n+ return (\n+ }>\n+ \n+ <\/React.Suspense>\n+ );\n+ };\n+ const Fallback = () => {\n+ Scheduler.advanceTime(2);\n+ return 'Fallback...';\n+ };\n+ const Async = () => {\n+ Scheduler.advanceTime(3);\n+ const data = getData();\n+ return data;\n+ };\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ await utils.actAsync(() =>\n+ ReactDOM.render(, document.createElement('div'))\n+ );\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ const allCommitData = [];\n+\n+ function Validator({ commitIndex, rootID }) {\n+ const commitData = store.profilerStore.getCommitData(rootID, commitIndex);\n+ allCommitData.push(commitData);\n+ expect(commitData).toMatchSnapshot(\n+ `CommitDetails with filtered self durations`\n+ );\n+ return null;\n+ }\n+\n+ const rootID = store.roots[0];\n+\n+ for (let commitIndex = 0; commitIndex < 2; commitIndex++) {\n+ utils.act(() => {\n+ TestRenderer.create(\n+ \n+ );\n+ });\n+ }\n+\n+ expect(allCommitData).toHaveLength(2);\n+\n+ done();\n+ });\n+\n+ it('should collect data for each rendered fiber', () => {\n+ const Parent = ({ count }) => {\n+ Scheduler.advanceTime(10);\n+ const children = new Array(count)\n+ .fill(true)\n+ .map((_, index) => );\n+ return (\n+ \n+ {children}\n+ \n+ <\/React.Fragment>\n+ );\n+ };\n+ const Child = ({ duration }) => {\n+ Scheduler.advanceTime(duration);\n+ return null;\n+ };\n+ const MemoizedChild = React.memo(Child);\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() => ReactDOM.render(, container));\n+ utils.act(() => ReactDOM.render(, container));\n+ utils.act(() => ReactDOM.render(, container));\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ const allFiberCommits = [];\n+\n+ function Validator({ fiberID, previousFiberCommits, rootID }) {\n+ const fiberCommits = store.profilerStore.profilingCache.getFiberCommits({\n+ fiberID,\n+ rootID,\n+ });\n+ if (previousFiberCommits != null) {\n+ expect(fiberCommits).toEqual(previousFiberCommits);\n+ } else {\n+ allFiberCommits.push(fiberCommits);\n+ expect(fiberCommits).toMatchSnapshot(\n+ `FiberCommits: element ${fiberID}`\n+ );\n+ }\n+ return null;\n+ }\n+\n+ const rootID = store.roots[0];\n+\n+ for (let index = 0; index < store.numElements; index++) {\n+ utils.act(() => {\n+ const fiberID = store.getElementIDAtIndex(index);\n+ if (fiberID == null) {\n+ throw Error(`Unexpected null ID for element at index ${index}`);\n+ }\n+ TestRenderer.create(\n+ \n+ );\n+ });\n+ }\n+\n+ expect(allFiberCommits).toHaveLength(store.numElements);\n+\n+ utils.exportImportHelper(bridge, store);\n+\n+ for (let index = 0; index < store.numElements; index++) {\n+ utils.act(() => {\n+ const fiberID = store.getElementIDAtIndex(index);\n+ if (fiberID == null) {\n+ throw Error(`Unexpected null ID for element at index ${index}`);\n+ }\n+ TestRenderer.create(\n+ \n+ );\n+ });\n+ }\n+ });\n+\n+ it('should report every traced interaction', () => {\n+ const Parent = ({ count }) => {\n+ Scheduler.advanceTime(10);\n+ const children = new Array(count)\n+ .fill(true)\n+ .map((_, index) => );\n+ return (\n+ \n+ {children}\n+ \n+ <\/React.Fragment>\n+ );\n+ };\n+ const Child = ({ duration }) => {\n+ Scheduler.advanceTime(duration);\n+ return null;\n+ };\n+ const MemoizedChild = React.memo(Child);\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() =>\n+ SchedulerTracing.unstable_trace(\n+ 'mount: one child',\n+ Scheduler.unstable_now(),\n+ () => ReactDOM.render(, container)\n+ )\n+ );\n+ utils.act(() =>\n+ SchedulerTracing.unstable_trace(\n+ 'update: two children',\n+ Scheduler.unstable_now(),\n+ () => ReactDOM.render(, container)\n+ )\n+ );\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ let interactions = null;\n+\n+ function Validator({ previousInteractions, rootID }) {\n+ interactions = store.profilerStore.profilingCache.getInteractionsChartData(\n+ {\n+ rootID,\n+ }\n+ ).interactions;\n+ if (previousInteractions != null) {\n+ expect(interactions).toEqual(previousInteractions);\n+ } else {\n+ expect(interactions).toMatchSnapshot('Interactions');\n+ }\n+ return null;\n+ }\n+\n+ const rootID = store.roots[0];\n+\n+ utils.act(() =>\n+ TestRenderer.create(\n+ \n+ )\n+ );\n+\n+ expect(interactions).not.toBeNull();\n+\n+ utils.exportImportHelper(bridge, store);\n+\n+ utils.act(() =>\n+ TestRenderer.create(\n+ \n+ )\n+ );\n+ });\n+});\ndiff --git a\/src\/__tests__\/profilingCharts-test.js b\/src\/__tests__\/profilingCharts-test.js\nindex 62e2c40b30..d83f8b5a0f 100644\n--- a\/src\/__tests__\/profilingCharts-test.js\n+++ b\/src\/__tests__\/profilingCharts-test.js\n@@ -27,7 +27,7 @@ describe('profiling charts', () => {\n });\n \n describe('flamegraph chart', () => {\n- it('should contain valid data', async done => {\n+ it('should contain valid data', () => {\n const Parent = ({ count }) => {\n Scheduler.advanceTime(10);\n return (\n@@ -47,7 +47,7 @@ describe('profiling charts', () => {\n \n const container = document.createElement('div');\n \n- utils.act(() => store.startProfiling());\n+ utils.act(() => store.profilerStore.startProfiling());\n utils.act(() =>\n SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>\n ReactDOM.render(, container)\n@@ -60,68 +60,50 @@ describe('profiling charts', () => {\n () => ReactDOM.render(, container)\n )\n );\n- utils.act(() => store.stopProfiling());\n+ utils.act(() => store.profilerStore.stopProfiling());\n \n- let suspenseResolved = false;\n+ let renderFinished = false;\n \n- function Suspender({ commitIndex, rendererID, rootID }) {\n- const profilingSummary = store.profilingCache.ProfilingSummary.read({\n- rendererID,\n- rootID,\n- });\n- const commitDetails = store.profilingCache.CommitDetails.read({\n+ function Validator({ commitIndex, rootID }) {\n+ const commitTree = store.profilerStore.profilingCache.getCommitTree({\n commitIndex,\n- rendererID,\n rootID,\n });\n- suspenseResolved = true;\n- const commitTree = store.profilingCache.getCommitTree({\n- commitIndex,\n- profilingSummary,\n- });\n- const chartData = store.profilingCache.getFlamegraphChartData({\n- commitDetails,\n- commitIndex,\n- commitTree,\n- });\n+ const chartData = store.profilerStore.profilingCache.getFlamegraphChartData(\n+ {\n+ commitIndex,\n+ commitTree,\n+ rootID,\n+ }\n+ );\n expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);\n expect(chartData).toMatchSnapshot(\n `${commitIndex}: FlamegraphChartData`\n );\n+ renderFinished = true;\n return null;\n }\n \n- const rendererID = utils.getRendererID();\n const rootID = store.roots[0];\n \n for (let commitIndex = 0; commitIndex < 2; commitIndex++) {\n- suspenseResolved = false;\n-\n- await utils.actAsync(\n- () =>\n- TestRenderer.create(\n- \n- \n- <\/React.Suspense>\n- ),\n- 3\n- );\n+ renderFinished = false;\n \n- expect(suspenseResolved).toBe(true);\n- }\n+ utils.act(() => {\n+ TestRenderer.create(\n+ \n+ );\n+ });\n \n- expect(suspenseResolved).toBe(true);\n+ expect(renderFinished).toBe(true);\n+ }\n \n- done();\n+ expect(renderFinished).toBe(true);\n });\n });\n \n describe('ranked chart', () => {\n- it('should contain valid data', async done => {\n+ it('should contain valid data', () => {\n const Parent = ({ count }) => {\n Scheduler.advanceTime(10);\n return (\n@@ -141,7 +123,7 @@ describe('profiling charts', () => {\n \n const container = document.createElement('div');\n \n- utils.act(() => store.startProfiling());\n+ utils.act(() => store.profilerStore.startProfiling());\n utils.act(() =>\n SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>\n ReactDOM.render(, container)\n@@ -154,64 +136,46 @@ describe('profiling charts', () => {\n () => ReactDOM.render(, container)\n )\n );\n- utils.act(() => store.stopProfiling());\n+ utils.act(() => store.profilerStore.stopProfiling());\n \n- let suspenseResolved = false;\n+ let renderFinished = false;\n \n- function Suspender({ commitIndex, rendererID, rootID }) {\n- const profilingSummary = store.profilingCache.ProfilingSummary.read({\n- rendererID,\n- rootID,\n- });\n- const commitDetails = store.profilingCache.CommitDetails.read({\n+ function Validator({ commitIndex, rootID }) {\n+ const commitTree = store.profilerStore.profilingCache.getCommitTree({\n commitIndex,\n- rendererID,\n rootID,\n });\n- suspenseResolved = true;\n- const commitTree = store.profilingCache.getCommitTree({\n- commitIndex,\n- profilingSummary,\n- });\n- const chartData = store.profilingCache.getRankedChartData({\n- commitDetails,\n- commitIndex,\n- commitTree,\n- });\n+ const chartData = store.profilerStore.profilingCache.getRankedChartData(\n+ {\n+ commitIndex,\n+ commitTree,\n+ rootID,\n+ }\n+ );\n expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);\n expect(chartData).toMatchSnapshot(`${commitIndex}: RankedChartData`);\n+ renderFinished = true;\n return null;\n }\n \n- const rendererID = utils.getRendererID();\n const rootID = store.roots[0];\n \n for (let commitIndex = 0; commitIndex < 2; commitIndex++) {\n- suspenseResolved = false;\n-\n- await utils.actAsync(\n- () =>\n- TestRenderer.create(\n- \n- \n- <\/React.Suspense>\n- ),\n- 3\n- );\n+ renderFinished = false;\n \n- expect(suspenseResolved).toBe(true);\n- }\n+ utils.act(() => {\n+ TestRenderer.create(\n+ \n+ );\n+ });\n \n- done();\n+ expect(renderFinished).toBe(true);\n+ }\n });\n });\n \n describe('interactions', () => {\n- it('should contain valid data', async done => {\n+ it('should contain valid data', () => {\n const Parent = ({ count }) => {\n Scheduler.advanceTime(10);\n return (\n@@ -231,7 +195,7 @@ describe('profiling charts', () => {\n \n const container = document.createElement('div');\n \n- utils.act(() => store.startProfiling());\n+ utils.act(() => store.profilerStore.startProfiling());\n utils.act(() =>\n SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>\n ReactDOM.render(, container)\n@@ -244,52 +208,34 @@ describe('profiling charts', () => {\n () => ReactDOM.render(, container)\n )\n );\n- utils.act(() => store.stopProfiling());\n+ utils.act(() => store.profilerStore.stopProfiling());\n \n- let suspenseResolved = false;\n+ let renderFinished = false;\n \n- function Suspender({ commitIndex, rendererID, rootID }) {\n- const profilingSummary = store.profilingCache.ProfilingSummary.read({\n- rendererID,\n- rootID,\n- });\n- const { interactions } = store.profilingCache.Interactions.read({\n- rendererID,\n- rootID,\n- });\n- suspenseResolved = true;\n- const chartData = store.profilingCache.getInteractionsChartData({\n- interactions,\n- profilingSummary,\n- });\n+ function Validator({ commitIndex, rootID }) {\n+ const chartData = store.profilerStore.profilingCache.getInteractionsChartData(\n+ {\n+ rootID,\n+ }\n+ );\n expect(chartData).toMatchSnapshot('Interactions');\n+ renderFinished = true;\n return null;\n }\n \n- const rendererID = utils.getRendererID();\n const rootID = store.roots[0];\n \n for (let commitIndex = 0; commitIndex < 2; commitIndex++) {\n- suspenseResolved = false;\n-\n- await utils.actAsync(\n- () =>\n- TestRenderer.create(\n- \n- \n- <\/React.Suspense>\n- ),\n- 3\n- );\n+ renderFinished = false;\n \n- expect(suspenseResolved).toBe(true);\n- }\n+ utils.act(() => {\n+ TestRenderer.create(\n+ \n+ );\n+ });\n \n- done();\n+ expect(renderFinished).toBe(true);\n+ }\n });\n });\n });\ndiff --git a\/src\/__tests__\/profilingCommitTreeBuilder-test.js b\/src\/__tests__\/profilingCommitTreeBuilder-test.js\nindex 8356a0fd4a..e6c98c1d5e 100644\n--- a\/src\/__tests__\/profilingCommitTreeBuilder-test.js\n+++ b\/src\/__tests__\/profilingCommitTreeBuilder-test.js\n@@ -24,7 +24,7 @@ describe('commit tree', () => {\n TestRenderer = utils.requireTestRenderer();\n });\n \n- it('should be able to rebuild the store tree for each commit', async done => {\n+ it('should be able to rebuild the store tree for each commit', () => {\n const Parent = ({ count }) => {\n Scheduler.advanceTime(10);\n return new Array(count)\n@@ -38,52 +38,37 @@ describe('commit tree', () => {\n \n const container = document.createElement('div');\n \n- utils.act(() => store.startProfiling());\n+ utils.act(() => store.profilerStore.startProfiling());\n utils.act(() => ReactDOM.render(, container));\n utils.act(() => ReactDOM.render(, container));\n utils.act(() => ReactDOM.render(, container));\n utils.act(() => ReactDOM.render(, container));\n- utils.act(() => store.stopProfiling());\n+ utils.act(() => store.profilerStore.stopProfiling());\n \n- let suspenseResolved = false;\n+ let renderFinished = false;\n \n- function Suspender({ commitIndex, rendererID, rootID }) {\n- const profilingSummary = store.profilingCache.ProfilingSummary.read({\n- rendererID,\n- rootID,\n- });\n- suspenseResolved = true;\n- const commitTree = store.profilingCache.getCommitTree({\n+ function Validator({ commitIndex, rootID }) {\n+ const commitTree = store.profilerStore.profilingCache.getCommitTree({\n commitIndex,\n- profilingSummary,\n+ rootID,\n });\n expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);\n+ renderFinished = true;\n return null;\n }\n \n- const rendererID = utils.getRendererID();\n const rootID = store.roots[0];\n \n for (let commitIndex = 0; commitIndex < 4; commitIndex++) {\n- suspenseResolved = false;\n+ renderFinished = false;\n \n- await utils.actAsync(\n- () =>\n- TestRenderer.create(\n- \n- \n- <\/React.Suspense>\n- ),\n- 3\n- );\n+ utils.act(() => {\n+ TestRenderer.create(\n+ \n+ );\n+ });\n \n- expect(suspenseResolved).toBe(true);\n+ expect(renderFinished).toBe(true);\n }\n-\n- done();\n });\n });\ndiff --git a\/src\/__tests__\/profilingUtils-test.js b\/src\/__tests__\/profilingUtils-test.js\nnew file mode 100644\nindex 0000000000..66029a2568\n--- \/dev\/null\n+++ b\/src\/__tests__\/profilingUtils-test.js\n@@ -0,0 +1,20 @@\n+\/\/ @flow\n+\n+describe('profiling utils', () => {\n+ let utils;\n+\n+ beforeEach(() => {\n+ utils = require('src\/devtools\/views\/Profiler\/utils');\n+ });\n+\n+ it('should throw if importing older\/unsupported data', () => {\n+ expect(() =>\n+ utils.prepareProfilingDataFrontendFromExport(\n+ ({\n+ version: 0,\n+ dataForRoots: [],\n+ }: any)\n+ )\n+ ).toThrow('Unsupported profiler export version \"0\"');\n+ });\n+});\ndiff --git a\/src\/__tests__\/storeComponentFilters-test.js b\/src\/__tests__\/storeComponentFilters-test.js\nindex 3030646bf6..dff169e924 100644\n--- a\/src\/__tests__\/storeComponentFilters-test.js\n+++ b\/src\/__tests__\/storeComponentFilters-test.js\n@@ -1,11 +1,13 @@\n \/\/ @flow\n \n+import type Store from 'src\/devtools\/store';\n+\n describe('Store component filters', () => {\n let React;\n let ReactDOM;\n let TestUtils;\n let Types;\n- let store;\n+ let store: Store;\n let utils;\n \n const act = (callback: Function) => {\n@@ -28,7 +30,7 @@ describe('Store component filters', () => {\n });\n \n it('should throw if filters are updated while profiling', () => {\n- act(() => store.startProfiling());\n+ act(() => store.profilerStore.startProfiling());\n expect(() => (store.componentFilters = [])).toThrow(\n 'Cannot modify filter preferences while profiling'\n );\ndiff --git a\/src\/__tests__\/utils.js b\/src\/__tests__\/utils.js\nindex 20d7bb511c..d30b9a7d3c 100644\n--- a\/src\/__tests__\/utils.js\n+++ b\/src\/__tests__\/utils.js\n@@ -2,10 +2,10 @@\n \n import typeof ReactTestRenderer from 'react-test-renderer';\n \n-import type { ElementType } from 'src\/types';\n-\n import type Bridge from 'src\/bridge';\n import type Store from 'src\/devtools\/store';\n+import type { ProfilingDataFrontend } from 'src\/devtools\/views\/Profiler\/types';\n+import type { ElementType } from 'src\/types';\n \n export function act(callback: Function): void {\n const TestUtils = require('react-dom\/test-utils');\n@@ -133,57 +133,43 @@ export function requireTestRenderer(): ReactTestRenderer {\n }\n }\n \n-export function exportImportHelper(\n- bridge: Bridge,\n- store: Store,\n- rendererID: number,\n- rootID: number\n-): void {\n+export function exportImportHelper(bridge: Bridge, store: Store): void {\n const { act } = require('.\/utils');\n const {\n- prepareExportedProfilingSummary,\n- prepareImportedProfilingData,\n+ prepareProfilingDataExport,\n+ prepareProfilingDataFrontendFromExport,\n } = require('src\/devtools\/views\/Profiler\/utils');\n \n- let exportedProfilingDataJsonString = '';\n- const onExportFile = ({ contents }) => {\n- if (typeof contents === 'string') {\n- exportedProfilingDataJsonString = (contents: string);\n- }\n- };\n- bridge.addListener('exportFile', onExportFile);\n-\n- act(() => {\n- const exportProfilingSummary = prepareExportedProfilingSummary(\n- store.profilingOperations,\n- store.profilingSnapshots,\n- rendererID,\n- rootID\n- );\n- bridge.send('exportProfilingSummary', exportProfilingSummary);\n- });\n+ const { profilerStore } = store;\n \n- \/\/ Cleanup to be able to call this again on the same bridge without memory leaks.\n- bridge.removeListener('exportFile', onExportFile);\n+ expect(profilerStore.profilingData).not.toBeNull();\n \n- expect(typeof exportedProfilingDataJsonString).toBe('string');\n- expect(exportedProfilingDataJsonString).not.toBe('');\n+ const profilingDataFrontendInitial = ((profilerStore.profilingData: any): ProfilingDataFrontend);\n \n- const importedProfilingData = prepareImportedProfilingData(\n- exportedProfilingDataJsonString\n+ const profilingDataExport = prepareProfilingDataExport(\n+ profilingDataFrontendInitial\n );\n- \/\/ Sanity check that profiling snapshots are serialized correctly.\n- expect(store.profilingSnapshots.get(rootID)).toEqual(\n- importedProfilingData.profilingSnapshots.get(rootID)\n+\n+ \/\/ Simulate writing\/reading to disk.\n+ const serializedProfilingDataExport = JSON.stringify(\n+ profilingDataExport,\n+ null,\n+ 2\n );\n- expect(store.profilingOperations.get(rootID)).toEqual(\n- importedProfilingData.profilingOperations.get(rootID)\n+ const parsedProfilingDataExport = JSON.parse(serializedProfilingDataExport);\n+\n+ const profilingDataFrontend = prepareProfilingDataFrontendFromExport(\n+ (parsedProfilingDataExport: any)\n );\n \n+ \/\/ Sanity check that profiling snapshots are serialized correctly.\n+ expect(profilingDataFrontendInitial).toEqual(profilingDataFrontend);\n+\n \/\/ Snapshot the JSON-parsed object, rather than the raw string, because Jest formats the diff nicer.\n- expect(importedProfilingData).toMatchSnapshot('imported data');\n+ expect(parsedProfilingDataExport).toMatchSnapshot('imported data');\n \n act(() => {\n- store.importedProfilingData = importedProfilingData;\n+ \/\/ Apply the new exported-then-reimported data so tests can re-run assertions.\n+ profilerStore.profilingData = profilingDataFrontend;\n });\n }\ndiff --git a\/src\/backend\/agent.js b\/src\/backend\/agent.js\nindex 097ad00827..08469d4d47 100644\n--- a\/src\/backend\/agent.js\n+++ b\/src\/backend\/agent.js\n@@ -10,7 +10,6 @@ import {\n } from '..\/constants';\n import { hideOverlay, showOverlay } from '.\/views\/Highlighter';\n \n-import type { ExportedProfilingSummaryFromFrontend } from 'src\/devtools\/views\/Profiler\/types';\n import type {\n PathFrame,\n PathMatch,\n@@ -20,8 +19,6 @@ import type {\n import type { OwnersList } from 'src\/devtools\/views\/Components\/types';\n import type { Bridge, ComponentFilter } from '..\/types';\n \n-import { prepareExportedProfilingData } from 'src\/devtools\/views\/Profiler\/utils';\n-\n const debug = (methodName, ...args) => {\n if (__DEBUG__) {\n console.log(\n@@ -96,12 +93,8 @@ export default class Agent extends EventEmitter {\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('getProfilingData', this.getProfilingData);\n bridge.addListener('getProfilingStatus', this.getProfilingStatus);\n- bridge.addListener('getProfilingSummary', this.getProfilingSummary);\n bridge.addListener('highlightElementInDOM', this.highlightElementInDOM);\n bridge.addListener('getOwnersList', this.getOwnersList);\n bridge.addListener('inspectElement', this.inspectElement);\n@@ -154,109 +147,19 @@ export default class Agent extends EventEmitter {\n return null;\n }\n \n- exportProfilingSummary = (\n- exportedProfilingSummary: ExportedProfilingSummaryFromFrontend\n- ): void => {\n- const { rendererID, rootID } = exportedProfilingSummary;\n+ getProfilingData = ({ rendererID }: {| rendererID: RendererID |}) => {\n const renderer = this._rendererInterfaces[rendererID];\n if (renderer == null) {\n console.warn(`Invalid renderer id \"${rendererID}\"`);\n- return;\n- }\n- try {\n- const exportedProfilingDataFromRenderer = renderer.getExportedProfilingData(\n- rootID\n- );\n- const exportedProfilingData = prepareExportedProfilingData(\n- exportedProfilingDataFromRenderer,\n- exportedProfilingSummary\n- );\n- this._bridge.send('exportFile', {\n- contents: JSON.stringify(exportedProfilingData, null, 2),\n- filename: 'profile-data.json',\n- });\n- } catch (error) {\n- console.warn(`Unable to export file: ${error.stack}`);\n }\n- };\n \n- getCommitDetails = ({\n- commitIndex,\n- rendererID,\n- rootID,\n- }: {\n- commitIndex: 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- 'commitDetails',\n- renderer.getCommitDetails(rootID, commitIndex)\n- );\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- }: {\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('interactions', renderer.getInteractions(rootID));\n- }\n+ this._bridge.send('profilingData', renderer.getProfilingData());\n };\n \n getProfilingStatus = () => {\n this._bridge.send('profilingStatus', this._isProfiling);\n };\n \n- getProfilingSummary = ({\n- rendererID,\n- rootID,\n- }: {\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- 'profilingSummary',\n- renderer.getProfilingSummary(rootID)\n- );\n- }\n- };\n-\n clearHighlightedElementInDOM = () => {\n hideOverlay();\n };\ndiff --git a\/src\/backend\/renderer.js b\/src\/backend\/renderer.js\nindex b0532eefae..f4e8a6ffe9 100644\n--- a\/src\/backend\/renderer.js\n+++ b\/src\/backend\/renderer.js\n@@ -18,7 +18,6 @@ import {\n ElementTypeRoot,\n ElementTypeSuspense,\n } from 'src\/types';\n-import { PROFILER_EXPORT_VERSION } from 'src\/constants';\n import {\n getDisplayName,\n getDefaultComponentFilters,\n@@ -37,17 +36,13 @@ import {\n import { inspectHooksOfFiber } from '.\/ReactDebugHooks';\n \n import type {\n- CommitDetailsBackend,\n+ CommitDataBackend,\n DevToolsHook,\n- ExportedProfilingDataFromRenderer,\n Fiber,\n- FiberCommitsBackend,\n- InteractionBackend,\n- InteractionsBackend,\n- InteractionWithCommitsBackend,\n PathFrame,\n PathMatch,\n- ProfilingSummaryBackend,\n+ ProfilingDataBackend,\n+ ProfilingDataForRootBackend,\n ReactRenderer,\n RendererInterface,\n } from '.\/types';\n@@ -55,6 +50,7 @@ import type {\n InspectedElement,\n Owner,\n } from 'src\/devtools\/views\/Components\/types';\n+import type { Interaction } from 'src\/devtools\/views\/Profiler\/types';\n import type { ComponentFilter, ElementType } from 'src\/types';\n \n function getInternalReactConstants(version) {\n@@ -820,6 +816,12 @@ export function attach(\n pushOperation(ElementTypeRoot);\n pushOperation(isProfilingSupported ? 1 : 0);\n pushOperation(hasOwnerMetadata ? 1 : 0);\n+\n+ if (isProfiling) {\n+ if (displayNamesByRootID !== null) {\n+ displayNamesByRootID.set(id, getDisplayNameForRoot(fiber));\n+ }\n+ }\n } else {\n const { key } = fiber;\n const displayName = getDisplayNameForFiber(fiber);\n@@ -1286,7 +1288,7 @@ export function attach(\n durations: [],\n commitTime: performance.now() - profilingStartTime,\n interactions: Array.from(root.memoizedInteractions).map(\n- (interaction: InteractionBackend) => ({\n+ (interaction: Interaction) => ({\n ...interaction,\n timestamp: interaction.timestamp - profilingStartTime,\n })\n@@ -1329,7 +1331,7 @@ export function attach(\n durations: [],\n commitTime: performance.now() - profilingStartTime,\n interactions: Array.from(root.memoizedInteractions).map(\n- (interaction: InteractionBackend) => ({\n+ (interaction: Interaction) => ({\n ...interaction,\n timestamp: interaction.timestamp - profilingStartTime,\n })\n@@ -1981,188 +1983,113 @@ export function attach(\n type CommitProfilingData = {|\n commitTime: number,\n durations: Array,\n- interactions: Array,\n+ interactions: Array,\n maxActualDuration: number,\n priorityLevel: string | null,\n |};\n \n type CommitProfilingMetadataMap = Map>;\n+ type DisplayNamesByRootID = Map;\n \n let currentCommitProfilingMetadata: CommitProfilingData | null = null;\n+ let displayNamesByRootID: DisplayNamesByRootID | null = null;\n let initialTreeBaseDurationsMap: Map | null = null;\n let initialIDToRootMap: Map | null = null;\n let isProfiling: boolean = false;\n let profilingStartTime: number = 0;\n let rootToCommitProfilingMetadataMap: CommitProfilingMetadataMap | null = null;\n \n- function getCommitDetails(\n- rootID: number,\n- commitIndex: number\n- ): CommitDetailsBackend {\n- const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(\n- rootID\n- );\n- if (commitProfilingMetadata != null) {\n- const commitProfilingData = commitProfilingMetadata[commitIndex];\n- if (commitProfilingData != null) {\n- return {\n- commitIndex,\n- durations: commitProfilingData.durations,\n- interactions: commitProfilingData.interactions,\n- priorityLevel: commitProfilingData.priorityLevel,\n- rootID,\n- };\n- }\n+ function getProfilingData(): ProfilingDataBackend {\n+ const dataForRoots: Array = [];\n+\n+ if (rootToCommitProfilingMetadataMap === null) {\n+ throw Error(\n+ 'getProfilingData() called before any profiling data was recorded'\n+ );\n }\n \n- console.warn(\n- `getCommitDetails(): No profiling info recorded for root \"${rootID}\" and commit ${commitIndex}`\n- );\n+ rootToCommitProfilingMetadataMap.forEach(\n+ (commitProfilingMetadata, rootID) => {\n+ const commitData: Array = [];\n+ const initialTreeBaseDurations: Array<[number, number]> = [];\n+ const allInteractions: Map = new Map();\n+ const interactionCommits: Map> = new Map();\n \n- return {\n- commitIndex,\n- durations: [],\n- interactions: [],\n- priorityLevel: null,\n- rootID,\n- };\n- }\n+ const displayName =\n+ (displayNamesByRootID !== null && displayNamesByRootID.get(rootID)) ||\n+ 'Unknown';\n \n- function getFiberCommits(\n- rootID: number,\n- fiberID: number\n- ): FiberCommitsBackend {\n- const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(\n- rootID\n- );\n- if (commitProfilingMetadata != null) {\n- const commitDurations = [];\n- commitProfilingMetadata.forEach(({ durations }, commitIndex) => {\n- for (let i = 0; i < durations.length; i += 3) {\n- if (durations[i] === fiberID) {\n- commitDurations.push(commitIndex, durations[i + 2]);\n- break;\n- }\n+ if (initialTreeBaseDurationsMap != null) {\n+ initialTreeBaseDurationsMap.forEach((treeBaseDuration, id) => {\n+ if (\n+ initialIDToRootMap != null &&\n+ initialIDToRootMap.get(id) === rootID\n+ ) {\n+ \/\/ We don't need to convert milliseconds to microseconds in this case,\n+ \/\/ because the profiling summary is JSON serialized.\n+ initialTreeBaseDurations.push([id, treeBaseDuration]);\n+ }\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+ commitProfilingMetadata.forEach((commitProfilingData, commitIndex) => {\n+ const {\n+ durations,\n+ interactions,\n+ maxActualDuration,\n+ priorityLevel,\n+ commitTime,\n+ } = commitProfilingData;\n \n- return {\n- commitDurations: [],\n- fiberID,\n- rootID,\n- };\n- }\n+ const interactionIDs: Array = [];\n \n- function getInteractions(rootID: number): InteractionsBackend {\n- const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(\n- rootID\n- );\n- if (commitProfilingMetadata != null) {\n- const interactionsMap: Map<\n- number,\n- InteractionWithCommitsBackend\n- > = new Map();\n-\n- commitProfilingMetadata.forEach((commitProfilingData, commitIndex) => {\n- commitProfilingData.interactions.forEach(interaction => {\n- const interactionWithCommits = interactionsMap.get(interaction.id);\n- if (interactionWithCommits != null) {\n- interactionWithCommits.commits.push(commitIndex);\n- } else {\n- interactionsMap.set(interaction.id, {\n- ...interaction,\n- commits: [commitIndex],\n- });\n- }\n- });\n- });\n+ interactions.forEach(interaction => {\n+ if (!allInteractions.has(interaction.id)) {\n+ allInteractions.set(interaction.id, interaction);\n+ }\n \n- return {\n- interactions: Array.from(interactionsMap.values()),\n- rootID,\n- };\n- }\n+ interactionIDs.push(interaction.id);\n \n- console.warn(\n- `getInteractions(): No interactions recorded for root \"${rootID}\"`\n- );\n+ const commitIndices = interactionCommits.get(interaction.id);\n+ if (commitIndices != null) {\n+ commitIndices.push(commitIndex);\n+ } else {\n+ interactionCommits.set(interaction.id, [commitIndex]);\n+ }\n+ });\n+\n+ const fiberActualDurations: Array<[number, number]> = [];\n+ const fiberSelfDurations: Array<[number, number]> = [];\n+ for (let i = 0; i < durations.length; i += 3) {\n+ const fiberID = durations[i];\n+ fiberActualDurations.push([fiberID, durations[i + 1]]);\n+ fiberSelfDurations.push([fiberID, durations[i + 2]]);\n+ }\n \n- return {\n- interactions: [],\n- rootID,\n- };\n- }\n+ commitData.push({\n+ duration: maxActualDuration,\n+ fiberActualDurations,\n+ fiberSelfDurations,\n+ interactionIDs,\n+ priorityLevel,\n+ timestamp: commitTime,\n+ });\n+ });\n \n- function getExportedProfilingData(\n- rootID: number\n- ): ExportedProfilingDataFromRenderer {\n- const commitDetailsForEachCommit = [];\n- const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(\n- rootID\n- );\n- if (commitProfilingMetadata != null) {\n- for (let index = 0; index < commitProfilingMetadata.length; index++) {\n- commitDetailsForEachCommit.push(getCommitDetails(rootID, index));\n+ dataForRoots.push({\n+ commitData,\n+ displayName,\n+ initialTreeBaseDurations,\n+ interactionCommits: Array.from(interactionCommits.entries()),\n+ interactions: Array.from(allInteractions.entries()),\n+ rootID,\n+ });\n }\n- }\n-\n- return {\n- version: PROFILER_EXPORT_VERSION,\n- profilingSummary: getProfilingSummary(rootID),\n- commitDetails: commitDetailsForEachCommit,\n- interactions: getInteractions(rootID),\n- };\n- }\n-\n- function getProfilingSummary(rootID: number): ProfilingSummaryBackend {\n- const interactions = new Set();\n- const commitDurations = [];\n- const commitTimes = [];\n-\n- const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(\n- rootID\n );\n- if (commitProfilingMetadata != null) {\n- commitProfilingMetadata.forEach(metadata => {\n- commitDurations.push(metadata.maxActualDuration);\n- commitTimes.push(metadata.commitTime);\n- metadata.interactions.forEach(({ name, timestamp }) => {\n- interactions.add(`${timestamp}:${name}`);\n- });\n- });\n- }\n-\n- const initialTreeBaseDurations = [];\n- if (initialTreeBaseDurationsMap != null) {\n- initialTreeBaseDurationsMap.forEach((treeBaseDuration, id) => {\n- if (\n- initialIDToRootMap != null &&\n- initialIDToRootMap.get(id) === rootID\n- ) {\n- \/\/ We don't need to convert milliseconds to microseconds in this case,\n- \/\/ because the profiling summary is JSON serialized.\n- initialTreeBaseDurations.push(id, treeBaseDuration);\n- }\n- });\n- }\n \n return {\n- commitDurations,\n- commitTimes,\n- initialTreeBaseDurations,\n- interactionCount: interactions.size,\n- rootID,\n+ dataForRoots,\n+ rendererID,\n };\n }\n \n@@ -2175,9 +2102,18 @@ export function attach(\n \/\/ It's important we snapshot both the durations and the id-to-root map,\n \/\/ since either of these may change during the profiling session\n \/\/ (e.g. when a fiber is re-rendered or when a fiber gets removed).\n+ displayNamesByRootID = new Map();\n initialTreeBaseDurationsMap = new Map(idToTreeBaseDurationMap);\n initialIDToRootMap = new Map(idToRootMap);\n \n+ hook.getFiberRoots(rendererID).forEach(root => {\n+ const rootID = getFiberID(getPrimaryFiber(root.current));\n+ ((displayNamesByRootID: any): DisplayNamesByRootID).set(\n+ rootID,\n+ getDisplayNameForRoot(root.current)\n+ );\n+ });\n+\n isProfiling = true;\n profilingStartTime = performance.now();\n rootToCommitProfilingMetadataMap = new Map();\n@@ -2313,6 +2249,32 @@ export function attach(\n const rootDisplayNameCounter: Map = new Map();\n \n function setRootPseudoKey(id: number, fiber: Fiber) {\n+ const name = getDisplayNameForRoot(fiber);\n+ const counter = rootDisplayNameCounter.get(name) || 0;\n+ rootDisplayNameCounter.set(name, counter + 1);\n+ const pseudoKey = `${name}:${counter}`;\n+ rootPseudoKeys.set(id, pseudoKey);\n+ }\n+\n+ function removeRootPseudoKey(id: number) {\n+ const pseudoKey = rootPseudoKeys.get(id);\n+ if (pseudoKey === undefined) {\n+ throw new Error('Expected root pseudo key to be known.');\n+ }\n+ const name = pseudoKey.substring(0, pseudoKey.lastIndexOf(':'));\n+ const counter = rootDisplayNameCounter.get(name);\n+ if (counter === undefined) {\n+ throw new Error('Expected counter to be known.');\n+ }\n+ if (counter > 1) {\n+ rootDisplayNameCounter.set(name, counter - 1);\n+ } else {\n+ rootDisplayNameCounter.delete(name);\n+ }\n+ rootPseudoKeys.delete(id);\n+ }\n+\n+ function getDisplayNameForRoot(fiber: Fiber): string {\n let preferredDisplayName = null;\n let fallbackDisplayName = null;\n let child = fiber.child;\n@@ -2339,29 +2301,7 @@ export function attach(\n }\n child = child.child;\n }\n- const name = preferredDisplayName || fallbackDisplayName || 'Anonymous';\n- const counter = rootDisplayNameCounter.get(name) || 0;\n- rootDisplayNameCounter.set(name, counter + 1);\n- const pseudoKey = `${name}:${counter}`;\n- rootPseudoKeys.set(id, pseudoKey);\n- }\n-\n- function removeRootPseudoKey(id: number) {\n- const pseudoKey = rootPseudoKeys.get(id);\n- if (pseudoKey === undefined) {\n- throw new Error('Expected root pseudo key to be known.');\n- }\n- const name = pseudoKey.substring(0, pseudoKey.lastIndexOf(':'));\n- const counter = rootDisplayNameCounter.get(name);\n- if (counter === undefined) {\n- throw new Error('Expected counter to be known.');\n- }\n- if (counter > 1) {\n- rootDisplayNameCounter.set(name, counter - 1);\n- } else {\n- rootDisplayNameCounter.delete(name);\n- }\n- rootPseudoKeys.delete(id);\n+ return preferredDisplayName || fallbackDisplayName || 'Anonymous';\n }\n \n function getPathFrame(fiber: Fiber): PathFrame {\n@@ -2459,15 +2399,11 @@ export function attach(\n cleanup,\n flushInitialOperations,\n getBestMatchForTrackedPath,\n- getCommitDetails,\n getFiberIDFromNative,\n- getFiberCommits,\n- getInteractions,\n findNativeByFiberID,\n getOwnersList,\n getPathForElement,\n- getExportedProfilingData,\n- getProfilingSummary,\n+ getProfilingData,\n handleCommitFiberRoot,\n handleCommitFiberUnmount,\n inspectElement,\ndiff --git a\/src\/backend\/types.js b\/src\/backend\/types.js\nindex 431619db15..a2a17dd5a1 100644\n--- a\/src\/backend\/types.js\n+++ b\/src\/backend\/types.js\n@@ -5,6 +5,7 @@ import type {\n InspectedElement,\n Owner,\n } from 'src\/devtools\/views\/Components\/types';\n+import type { Interaction } from 'src\/devtools\/views\/Profiler\/types';\n \n type BundleType =\n | 0 \/\/ PROD\n@@ -115,51 +116,33 @@ export type ReactRenderer = {\n currentDispatcherRef?: {| current: null | Dispatcher |},\n };\n \n-export type InteractionBackend = {|\n- id: number,\n- name: string,\n- timestamp: number,\n-|};\n-\n-export type CommitDetailsBackend = {|\n- commitIndex: number,\n- \/\/ An interleaved array: fiberID at [i], actualDuration at [i + 1], computed selfDuration at [i + 2].\n- durations: Array,\n- interactions: Array,\n+export type CommitDataBackend = {|\n+ duration: number,\n+ \/\/ Tuple of fiber ID and actual duration\n+ fiberActualDurations: Array<[number, number]>,\n+ \/\/ Tuple of fiber ID and computed \"self\" duration\n+ fiberSelfDurations: Array<[number, number]>,\n+ interactionIDs: Array,\n priorityLevel: string | null,\n- rootID: number,\n-|};\n-\n-export type FiberCommitsBackend = {|\n- commitDurations: Array,\n- fiberID: number,\n- rootID: number,\n-|};\n-\n-export type InteractionWithCommitsBackend = {|\n- ...InteractionBackend,\n- commits: Array,\n-|};\n-\n-export type InteractionsBackend = {|\n- interactions: Array,\n- rootID: number,\n+ timestamp: number,\n |};\n \n-export type ProfilingSummaryBackend = {|\n- commitDurations: Array,\n- commitTimes: Array,\n- \/\/ An interleaved array: fiberID at [i], initialTreeBaseDuration at [i + 1].\n- initialTreeBaseDurations: Array,\n- interactionCount: number,\n+export type ProfilingDataForRootBackend = {|\n+ commitData: Array,\n+ displayName: string,\n+ \/\/ Tuple of Fiber ID and base duration\n+ initialTreeBaseDurations: Array<[number, number]>,\n+ \/\/ Tuple of Interaction ID and commit indices\n+ interactionCommits: Array<[number, Array]>,\n+ interactions: Array<[number, Interaction]>,\n rootID: number,\n |};\n \n-export type ExportedProfilingDataFromRenderer = {|\n- version: 3,\n- profilingSummary: ProfilingSummaryBackend,\n- commitDetails: Array,\n- interactions: InteractionsBackend,\n+\/\/ Profiling data collected by the renderer interface.\n+\/\/ This information will be passed to the frontend and combined with info it collects.\n+export type ProfilingDataBackend = {|\n+ dataForRoots: Array,\n+ rendererID: number,\n |};\n \n export type PathFrame = {|\n@@ -178,21 +161,12 @@ export type RendererInterface = {\n findNativeByFiberID: (id: number) => ?Array,\n flushInitialOperations: () => void,\n getBestMatchForTrackedPath: () => PathMatch | null,\n- getCommitDetails: (\n- rootID: number,\n- commitIndex: number\n- ) => CommitDetailsBackend,\n getFiberIDFromNative: (\n component: NativeType,\n findNearestUnfilteredAncestor?: boolean\n ) => number | null,\n- getFiberCommits: (rootID: number, fiberID: number) => FiberCommitsBackend,\n- getInteractions: (rootID: number) => InteractionsBackend,\n+ getProfilingData(): ProfilingDataBackend,\n getOwnersList: (id: number) => Array | null,\n- getExportedProfilingData: (\n- rootID: number\n- ) => ExportedProfilingDataFromRenderer,\n- getProfilingSummary: (rootID: number) => ProfilingSummaryBackend,\n getPathForElement: (id: number) => Array | null,\n handleCommitFiberRoot: (fiber: Object, commitPriority?: number) => void,\n handleCommitFiberUnmount: (fiber: Object) => void,\ndiff --git a\/src\/constants.js b\/src\/constants.js\nindex 66341ac584..3097a0749e 100644\n--- a\/src\/constants.js\n+++ b\/src\/constants.js\n@@ -16,4 +16,4 @@ export const SESSION_STORAGE_LAST_SELECTION_KEY =\n \n export const __DEBUG__ = false;\n \n-export const PROFILER_EXPORT_VERSION = 3;\n+export const PROFILER_EXPORT_VERSION = 4;\ndiff --git a\/src\/devtools\/ProfilerStore.js b\/src\/devtools\/ProfilerStore.js\nnew file mode 100644\nindex 0000000000..c6d714cb05\n--- \/dev\/null\n+++ b\/src\/devtools\/ProfilerStore.js\n@@ -0,0 +1,346 @@\n+\/\/ @flow\n+\n+import EventEmitter from 'events';\n+import memoize from 'memoize-one';\n+import throttle from 'lodash.throttle';\n+import { prepareProfilingDataFrontendFromBackendAndStore } from '.\/views\/Profiler\/utils';\n+import ProfilingCache from '.\/ProfilingCache';\n+import Store from '.\/store';\n+\n+import type { ProfilingDataBackend } from 'src\/backend\/types';\n+import type {\n+ CommitDataFrontend,\n+ ProfilingDataForRootFrontend,\n+ ProfilingDataFrontend,\n+ SnapshotNode,\n+} from '.\/views\/Profiler\/types';\n+import type { Bridge } from '..\/types';\n+\n+const THROTTLE_CAPTURE_SCREENSHOT_DURATION = 500;\n+\n+export default class ProfilerStore extends EventEmitter {\n+ _bridge: Bridge;\n+\n+ \/\/ Suspense cache for lazily calculating derived profiling data.\n+ _cache: ProfilingCache;\n+\n+ \/\/ Temporary store of profiling data from the backend renderer(s).\n+ \/\/ This data will be converted to the ProfilingDataFrontend format after being collected from all renderers.\n+ _dataBackends: Array = [];\n+\n+ \/\/ Data from the most recently completed profiling session,\n+ \/\/ or data that has been imported from a previously exported session.\n+ \/\/ This object contains all necessary data to drive the Profiler UI interface,\n+ \/\/ even though some of it is lazily parsed\/derived via the ProfilingCache.\n+ _dataFrontend: ProfilingDataFrontend | null = null;\n+\n+ \/\/ Snapshot of the state of the main Store (including all roots) when profiling started.\n+ \/\/ Once profiling is finished, this snapshot can be used along with \"operations\" messages emitted during profiling,\n+ \/\/ to reconstruct the state of each root for each commit.\n+ \/\/ It's okay to use a single root to store this information because node IDs are unique across all roots.\n+ \/\/\n+ \/\/ This map is only updated while profiling is in progress;\n+ \/\/ Upon completion, it is converted into the exportable ProfilingDataFrontend format.\n+ _initialSnapshotsByRootID: Map> = new Map();\n+\n+ \/\/ Map of root (id) to a list of tree mutation that occur during profiling.\n+ \/\/ Once profiling is finished, these mutations can be used, along with the initial tree snapshots,\n+ \/\/ to reconstruct the state of each root for each commit.\n+ \/\/\n+ \/\/ This map is only updated while profiling is in progress;\n+ \/\/ Upon completion, it is converted into the exportable ProfilingDataFrontend format.\n+ _inProgressOperationsByRootID: Map> = new Map();\n+\n+ \/\/ Map of root (id) to a Map of screenshots by commit ID.\n+ \/\/ Stores screenshots for each commit (when profiling).\n+ \/\/\n+ \/\/ This map is only updated while profiling is in progress;\n+ \/\/ Upon completion, it is converted into the exportable ProfilingDataFrontend format.\n+ _inProgressScreenshotsByRootID: Map> = new Map();\n+\n+ \/\/ The backend is currently profiling.\n+ \/\/ When profiling is in progress, operations are stored so that we can later reconstruct past commit trees.\n+ _isProfiling: boolean = false;\n+\n+ \/\/ After profiling, data is requested from each attached renderer using this queue.\n+ \/\/ So long as this queue is not empty, the store is retrieving and processing profiling data from the backend.\n+ _rendererQueue: Set = new Set();\n+\n+ _store: Store;\n+\n+ constructor(bridge: Bridge, store: Store, defaultIsProfiling: boolean) {\n+ super();\n+\n+ this._bridge = bridge;\n+ this._isProfiling = defaultIsProfiling;\n+ this._store = store;\n+\n+ bridge.addListener('operations', this.onBridgeOperations);\n+ bridge.addListener('profilingData', this.onBridgeProfilingData);\n+ bridge.addListener('profilingStatus', this.onProfilingStatus);\n+ bridge.addListener('shutdown', this.onBridgeShutdown);\n+\n+ \/\/ It's possible that profiling has already started (e.g. \"reload and start profiling\")\n+ \/\/ so the frontend needs to ask the backend for its status after mounting.\n+ bridge.send('getProfilingStatus');\n+\n+ this._cache = new ProfilingCache(this);\n+ }\n+\n+ getCommitData(rootID: number, commitIndex: number): CommitDataFrontend {\n+ if (this._dataFrontend !== null) {\n+ const dataForRoot = this._dataFrontend.dataForRoots.get(rootID);\n+ if (dataForRoot != null) {\n+ const commitDatum = dataForRoot.commitData[commitIndex];\n+ if (commitDatum != null) {\n+ return commitDatum;\n+ }\n+ }\n+ }\n+\n+ throw Error(\n+ `Could not find commit data for root \"${rootID}\" and commit ${commitIndex}`\n+ );\n+ }\n+\n+ getDataForRoot(rootID: number): ProfilingDataForRootFrontend {\n+ if (this._dataFrontend !== null) {\n+ const dataForRoot = this._dataFrontend.dataForRoots.get(rootID);\n+ if (dataForRoot != null) {\n+ return dataForRoot;\n+ }\n+ }\n+\n+ throw Error(`Could not find commit data for root \"${rootID}\"`);\n+ }\n+\n+ \/\/ Profiling data has been recorded for at least one root.\n+ get hasProfilingData(): boolean {\n+ return (\n+ this._dataFrontend !== null && this._dataFrontend.dataForRoots.size > 0\n+ );\n+ }\n+\n+ get isProcessingData(): boolean {\n+ return this._rendererQueue.size > 0 || this._dataBackends.length > 0;\n+ }\n+\n+ get isProfiling(): boolean {\n+ return this._isProfiling;\n+ }\n+\n+ get profilingCache(): ProfilingCache {\n+ return this._cache;\n+ }\n+\n+ get profilingData(): ProfilingDataFrontend | null {\n+ return this._dataFrontend;\n+ }\n+ set profilingData(value: ProfilingDataFrontend | null): void {\n+ this._dataBackends.splice(0);\n+ this._dataFrontend = value;\n+ this._initialSnapshotsByRootID.clear();\n+ this._inProgressOperationsByRootID.clear();\n+ this._inProgressScreenshotsByRootID.clear();\n+ this._cache.invalidate();\n+\n+ this.emit('profilingData');\n+ }\n+\n+ clear(): void {\n+ this._dataBackends.splice(0);\n+ this._dataFrontend = null;\n+ this._initialSnapshotsByRootID.clear();\n+ this._inProgressOperationsByRootID.clear();\n+ this._inProgressScreenshotsByRootID.clear();\n+ this._rendererQueue.clear();\n+\n+ \/\/ Invalidate suspense cache if profiling data is being (re-)recorded.\n+ \/\/ Note that we clear now because any existing data is \"stale\".\n+ this._cache.invalidate();\n+\n+ this.emit('profilingData');\n+ }\n+\n+ startProfiling(): void {\n+ this._bridge.send('startProfiling');\n+\n+ \/\/ Don't actually update the local profiling boolean yet!\n+ \/\/ Wait for onProfilingStatus() to confirm the status has changed.\n+ \/\/ This ensures the frontend and backend are in sync wrt which commits were profiled.\n+ \/\/ We do this to avoid mismatches on e.g. CommitTreeBuilder that would cause errors.\n+ }\n+\n+ stopProfiling(): void {\n+ this._bridge.send('stopProfiling');\n+\n+ \/\/ Don't actually update the local profiling boolean yet!\n+ \/\/ Wait for onProfilingStatus() to confirm the status has changed.\n+ \/\/ This ensures the frontend and backend are in sync wrt which commits were profiled.\n+ \/\/ We do this to avoid mismatches on e.g. CommitTreeBuilder that would cause errors.\n+ }\n+\n+ _captureScreenshot = throttle(\n+ memoize((rootID: number, commitIndex: number) => {\n+ this._bridge.send('captureScreenshot', { commitIndex, rootID });\n+ }),\n+ THROTTLE_CAPTURE_SCREENSHOT_DURATION\n+ );\n+\n+ _takeProfilingSnapshotRecursive = (\n+ elementID: number,\n+ profilingSnapshots: Map\n+ ) => {\n+ const element = this._store.getElementByID(elementID);\n+ if (element !== null) {\n+ const snapshotNode: SnapshotNode = {\n+ id: elementID,\n+ children: element.children.slice(0),\n+ displayName: element.displayName,\n+ key: element.key,\n+ type: element.type,\n+ };\n+ profilingSnapshots.set(elementID, snapshotNode);\n+\n+ element.children.forEach(childID =>\n+ this._takeProfilingSnapshotRecursive(childID, profilingSnapshots)\n+ );\n+ }\n+ };\n+\n+ onBridgeOperations = (operations: Uint32Array) => {\n+ if (!(operations instanceof Uint32Array)) {\n+ \/\/ $FlowFixMe TODO HACK Temporary workaround for the fact that Chrome is not transferring the typed array.\n+ operations = Uint32Array.from(Object.values(operations));\n+ }\n+\n+ \/\/ The first two values are always rendererID and rootID\n+ const rootID = operations[1];\n+\n+ if (this._isProfiling) {\n+ let profilingOperations = this._inProgressOperationsByRootID.get(rootID);\n+ if (profilingOperations == null) {\n+ profilingOperations = [operations];\n+ this._inProgressOperationsByRootID.set(rootID, profilingOperations);\n+ } else {\n+ profilingOperations.push(operations);\n+ }\n+\n+ if (!this._initialSnapshotsByRootID.has(rootID)) {\n+ this._initialSnapshotsByRootID.set(rootID, new Map());\n+ }\n+\n+ if (this._store.captureScreenshots) {\n+ const commitIndex = profilingOperations.length - 1;\n+ this._captureScreenshot(rootID, commitIndex);\n+ }\n+ }\n+ };\n+\n+ onBridgeProfilingData = (dataBackend: ProfilingDataBackend) => {\n+ if (this._isProfiling) {\n+ \/\/ This should never happen, but if it does- ignore previous profiling data.\n+ return;\n+ }\n+\n+ const { rendererID } = dataBackend;\n+\n+ if (!this._rendererQueue.has(rendererID)) {\n+ throw Error(\n+ `Unexpected profiling data update from renderer \"${rendererID}\"`\n+ );\n+ }\n+\n+ this._dataBackends.push(dataBackend);\n+ this._rendererQueue.delete(rendererID);\n+\n+ if (this._rendererQueue.size === 0) {\n+ this._dataFrontend = prepareProfilingDataFrontendFromBackendAndStore(\n+ this._dataBackends,\n+ this._inProgressOperationsByRootID,\n+ this._inProgressScreenshotsByRootID,\n+ this._initialSnapshotsByRootID\n+ );\n+\n+ this._dataBackends.splice(0);\n+\n+ this.emit('isProcessingData');\n+ }\n+ };\n+\n+ onBridgeShutdown = () => {\n+ this._bridge.removeListener('operations', this.onBridgeOperations);\n+ this._bridge.removeListener('profilingStatus', this.onProfilingStatus);\n+ this._bridge.removeListener('shutdown', this.onBridgeShutdown);\n+ };\n+\n+ onProfilingStatus = (isProfiling: boolean) => {\n+ if (isProfiling) {\n+ this._dataBackends.splice(0);\n+ this._dataFrontend = null;\n+ this._initialSnapshotsByRootID.clear();\n+ this._inProgressOperationsByRootID.clear();\n+ this._inProgressScreenshotsByRootID.clear();\n+ this._rendererQueue.clear();\n+\n+ \/\/ Record snapshot of tree at the time profiling is started.\n+ \/\/ This info is required to handle cases of e.g. nodes being removed during profiling.\n+ this._store.roots.forEach(rootID => {\n+ const profilingSnapshots = new Map();\n+ this._initialSnapshotsByRootID.set(rootID, profilingSnapshots);\n+ this._takeProfilingSnapshotRecursive(rootID, profilingSnapshots);\n+ });\n+ }\n+\n+ if (this._isProfiling !== isProfiling) {\n+ this._isProfiling = isProfiling;\n+\n+ \/\/ Invalidate suspense cache if profiling data is being (re-)recorded.\n+ \/\/ Note that we clear again, in case any views read from the cache while profiling.\n+ \/\/ (That would have resolved a now-stale value without any profiling data.)\n+ this._cache.invalidate();\n+\n+ this.emit('isProfiling');\n+\n+ \/\/ If we've just finished a profiling session, we need to fetch data stored in each renderer interface\n+ \/\/ and re-assemble it on the front-end into a format (ProfilingDataFrontend) that can power the Profiler UI.\n+ \/\/ During this time, DevTools UI should probably not be interactive.\n+ if (!isProfiling) {\n+ this._dataBackends.splice(0);\n+ this._rendererQueue.clear();\n+\n+ for (let rendererID of this._store.rootIDToRendererID.values()) {\n+ if (!this._rendererQueue.has(rendererID)) {\n+ this._rendererQueue.add(rendererID);\n+\n+ this._bridge.send('getProfilingData', { rendererID });\n+ }\n+ }\n+\n+ this.emit('isProcessingData');\n+ }\n+ }\n+ };\n+\n+ onScreenshotCaptured = ({\n+ commitIndex,\n+ dataURL,\n+ rootID,\n+ }: {|\n+ commitIndex: number,\n+ dataURL: string,\n+ rootID: number,\n+ |}) => {\n+ let screenshotsForRootByCommitIndex = this._inProgressScreenshotsByRootID.get(\n+ rootID\n+ );\n+ if (!screenshotsForRootByCommitIndex) {\n+ screenshotsForRootByCommitIndex = new Map();\n+ this._inProgressScreenshotsByRootID.set(\n+ rootID,\n+ screenshotsForRootByCommitIndex\n+ );\n+ }\n+ screenshotsForRootByCommitIndex.set(commitIndex, dataURL);\n+ };\n+}\ndiff --git a\/src\/devtools\/ProfilingCache.js b\/src\/devtools\/ProfilingCache.js\nindex c2f370f635..d8f1819ddb 100644\n--- a\/src\/devtools\/ProfilingCache.js\n+++ b\/src\/devtools\/ProfilingCache.js\n@@ -1,7 +1,6 @@\n \/\/ @flow\n \n-import { createResource } from '.\/cache';\n-import Store from '.\/store';\n+import ProfilerStore from '.\/ProfilerStore';\n import {\n getCommitTree,\n invalidateCommitTrees,\n@@ -19,416 +18,105 @@ import {\n invalidateChartData as invalidateRankedChartData,\n } from 'src\/devtools\/views\/Profiler\/RankedChartBuilder';\n \n-import type { Resource } from '.\/cache';\n-import type {\n- CommitDetailsBackend,\n- FiberCommitsBackend,\n- InteractionsBackend,\n- ProfilingSummaryBackend,\n-} from 'src\/backend\/types';\n-import type {\n- CommitDetailsFrontend,\n- FiberCommitsFrontend,\n- InteractionsFrontend,\n- InteractionWithCommitsFrontend,\n- CommitTreeFrontend,\n- ProfilingSummaryFrontend,\n-} from 'src\/devtools\/views\/Profiler\/types';\n+import type { CommitTree } from 'src\/devtools\/views\/Profiler\/types';\n import type { ChartData as FlamegraphChartData } from 'src\/devtools\/views\/Profiler\/FlamegraphChartBuilder';\n import type { ChartData as InteractionsChartData } from 'src\/devtools\/views\/Profiler\/InteractionsChartBuilder';\n import type { ChartData as RankedChartData } from 'src\/devtools\/views\/Profiler\/RankedChartBuilder';\n-import type { Bridge } from 'src\/types';\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- rendererID: number,\n- rootID: number,\n-|};\n-\n-type GetCommitTreeParams = {|\n- commitIndex: number,\n- profilingSummary: ProfilingSummaryFrontend,\n-|};\n-\n-type ProfilingSummaryParams = {|\n- rendererID: number,\n- rootID: number,\n-|};\n \n export default class ProfilingCache {\n- _bridge: Bridge;\n- _store: Store;\n-\n- _pendingCommitDetailsMap: Map<\n- string,\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- > = new Map();\n-\n- _pendingProfileSummaryMap: Map<\n- number,\n- (profilingSummary: ProfilingSummaryFrontend) => void\n- > = new Map();\n-\n- CommitDetails: Resource<\n- CommitDetailsParams,\n- string,\n- CommitDetailsFrontend\n- > = createResource(\n- ({ commitIndex, rendererID, rootID }: CommitDetailsParams) => {\n- return new Promise(resolve => {\n- const pendingKey = `${rootID}-${commitIndex}`;\n- const importedProfilingData = this._store.importedProfilingData;\n- if (importedProfilingData !== null) {\n- const commitDetailsByCommitIndex =\n- importedProfilingData.commitDetails;\n- if (\n- commitDetailsByCommitIndex != null &&\n- commitIndex < commitDetailsByCommitIndex.length\n- ) {\n- const commitDetails = commitDetailsByCommitIndex[commitIndex];\n- if (commitDetails != null) {\n- this._pendingCommitDetailsMap.delete(pendingKey);\n- resolve(commitDetails);\n- return;\n- }\n- }\n- } else if (this._store.profilingOperations.has(rootID)) {\n- this._pendingCommitDetailsMap.set(pendingKey, resolve);\n- this._bridge.send('getCommitDetails', {\n- commitIndex,\n- rendererID,\n- rootID,\n- });\n- return;\n- }\n-\n- this._pendingCommitDetailsMap.delete(pendingKey);\n-\n- \/\/ If no profiling data was recorded for this root, skip the round trip.\n- resolve({\n- rootID,\n- commitIndex,\n- actualDurations: new Map(),\n- priorityLevel: null,\n- interactions: [],\n- selfDurations: new Map(),\n- });\n- });\n- },\n- ({ commitIndex, rendererID, rootID }: CommitDetailsParams) =>\n- `${rootID}-${commitIndex}`\n- );\n-\n- FiberCommits: Resource<\n- FiberCommitsParams,\n- string,\n- FiberCommitsFrontend\n- > = createResource(\n- ({ fiberID, rendererID, rootID }: FiberCommitsParams) => {\n- return new Promise(resolve => {\n- const pendingKey = `${rootID}-${fiberID}`;\n- const importedProfilingData = this._store.importedProfilingData;\n- if (importedProfilingData !== null) {\n- const { commitDetails } = importedProfilingData;\n- const commitDurations = [];\n- commitDetails.forEach(({ selfDurations }, commitIndex) => {\n- const selfDuration = selfDurations.get(fiberID);\n- if (selfDuration != null) {\n- commitDurations.push(commitIndex, selfDuration);\n- }\n- });\n- this._pendingFiberCommitsMap.delete(pendingKey);\n- resolve({\n- commitDurations,\n- fiberID,\n- rootID,\n- });\n- return;\n- } else if (this._store.profilingOperations.has(rootID)) {\n- this._pendingFiberCommitsMap.set(pendingKey, resolve);\n- this._bridge.send('getFiberCommits', {\n- fiberID,\n- rendererID,\n- rootID,\n- });\n- return;\n- }\n-\n- this._pendingFiberCommitsMap.delete(pendingKey);\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- number,\n- InteractionsFrontend\n- > = createResource(\n- ({ rendererID, rootID }: InteractionsParams) => {\n- return new Promise(resolve => {\n- const pendingKey = rootID;\n- const importedProfilingData = this._store.importedProfilingData;\n- if (importedProfilingData !== null) {\n- const interactionsFrontend: InteractionsFrontend =\n- importedProfilingData.interactions;\n- if (interactionsFrontend != null) {\n- this._pendingInteractionsMap.delete(pendingKey);\n- resolve(interactionsFrontend);\n- return;\n- }\n- } else if (this._store.profilingOperations.has(rootID)) {\n- this._pendingInteractionsMap.set(pendingKey, resolve);\n- this._bridge.send('getInteractions', {\n- rendererID,\n- rootID,\n- });\n- return;\n- }\n-\n- this._pendingInteractionsMap.delete(pendingKey);\n+ _fiberCommits: Map> = new Map();\n+ _profilerStore: ProfilerStore;\n \n- \/\/ If no profiling data was recorded for this root, skip the round trip.\n- resolve({\n- interactions: [],\n- rootID,\n- });\n- });\n- },\n- ({ rendererID, rootID }: ProfilingSummaryParams) => rootID\n- );\n-\n- ProfilingSummary: Resource<\n- ProfilingSummaryParams,\n- number,\n- ProfilingSummaryFrontend\n- > = createResource(\n- ({ rendererID, rootID }: ProfilingSummaryParams) => {\n- return new Promise(resolve => {\n- const pendingKey = rootID;\n- const importedProfilingData = this._store.importedProfilingData;\n- if (importedProfilingData !== null) {\n- const profilingSummaryFrontend: ProfilingSummaryFrontend =\n- importedProfilingData.profilingSummary;\n- if (profilingSummaryFrontend != null) {\n- this._pendingProfileSummaryMap.delete(pendingKey);\n- resolve(profilingSummaryFrontend);\n- return;\n- }\n- } else if (this._store.profilingOperations.has(rootID)) {\n- this._pendingProfileSummaryMap.set(pendingKey, resolve);\n- this._bridge.send('getProfilingSummary', { rendererID, rootID });\n- return;\n- }\n-\n- this._pendingProfileSummaryMap.delete(pendingKey);\n-\n- \/\/ If no profiling data was recorded for this root, skip the round trip.\n- resolve({\n- rootID,\n- commitDurations: [],\n- commitTimes: [],\n- initialTreeBaseDurations: new Map(),\n- interactionCount: 0,\n- });\n- });\n- },\n- ({ rendererID, rootID }: ProfilingSummaryParams) => rootID\n- );\n-\n- constructor(bridge: Bridge, store: Store) {\n- this._bridge = bridge;\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+ constructor(profilerStore: ProfilerStore) {\n+ this._profilerStore = profilerStore;\n }\n \n- getCommitTree = ({ commitIndex, profilingSummary }: GetCommitTreeParams) =>\n+ getCommitTree = ({\n+ commitIndex,\n+ rootID,\n+ }: {|\n+ commitIndex: number,\n+ rootID: number,\n+ |}) =>\n getCommitTree({\n commitIndex,\n- profilingSummary,\n- store: this._store,\n+ profilerStore: this._profilerStore,\n+ rootID,\n+ });\n+\n+ getFiberCommits = ({\n+ fiberID,\n+ rootID,\n+ }: {|\n+ fiberID: number,\n+ rootID: number,\n+ |}): Array => {\n+ const cachedFiberCommits = this._fiberCommits.get(fiberID);\n+ if (cachedFiberCommits != null) {\n+ return cachedFiberCommits;\n+ }\n+\n+ const fiberCommits = [];\n+ const dataForRoot = this._profilerStore.getDataForRoot(rootID);\n+ dataForRoot.commitData.forEach((commitDatum, commitIndex) => {\n+ if (commitDatum.fiberActualDurations.has(fiberID)) {\n+ fiberCommits.push(commitIndex);\n+ }\n });\n \n+ this._fiberCommits.set(fiberID, fiberCommits);\n+\n+ return fiberCommits;\n+ };\n+\n getFlamegraphChartData = ({\n- commitDetails,\n commitIndex,\n commitTree,\n+ rootID,\n }: {|\n- commitDetails: CommitDetailsFrontend,\n commitIndex: number,\n- commitTree: CommitTreeFrontend,\n+ commitTree: CommitTree,\n+ rootID: number,\n |}): FlamegraphChartData =>\n getFlamegraphChartData({\n- commitDetails,\n commitIndex,\n commitTree,\n+ profilerStore: this._profilerStore,\n+ rootID,\n });\n \n getInteractionsChartData = ({\n- interactions,\n- profilingSummary,\n+ rootID,\n }: {|\n- interactions: Array,\n- profilingSummary: ProfilingSummaryFrontend,\n+ rootID: number,\n |}): InteractionsChartData =>\n getInteractionsChartData({\n- interactions,\n- profilingSummary,\n+ profilerStore: this._profilerStore,\n+ rootID,\n });\n \n getRankedChartData = ({\n- commitDetails,\n commitIndex,\n commitTree,\n+ rootID,\n }: {|\n- commitDetails: CommitDetailsFrontend,\n commitIndex: number,\n- commitTree: CommitTreeFrontend,\n+ commitTree: CommitTree,\n+ rootID: number,\n |}): RankedChartData =>\n getRankedChartData({\n- commitDetails,\n commitIndex,\n commitTree,\n+ profilerStore: this._profilerStore,\n+ rootID,\n });\n \n invalidate() {\n- \/\/ Invalidate Suspense caches.\n- this.CommitDetails.clear();\n- this.FiberCommits.clear();\n- this.Interactions.clear();\n- this.ProfilingSummary.clear();\n+ this._fiberCommits.clear();\n \n- \/\/ Invalidate non-Suspense caches too.\n invalidateCommitTrees();\n invalidateFlamegraphChartData();\n invalidateInteractionsChartData();\n invalidateRankedChartData();\n-\n- this._pendingCommitDetailsMap.clear();\n- this._pendingFiberCommitsMap.clear();\n- this._pendingInteractionsMap.clear();\n- this._pendingProfileSummaryMap.clear();\n }\n-\n- onCommitDetails = ({\n- commitIndex,\n- durations,\n- interactions,\n- priorityLevel,\n- rootID,\n- }: CommitDetailsBackend) => {\n- const key = `${rootID}-${commitIndex}`;\n- const resolve = this._pendingCommitDetailsMap.get(key);\n- if (resolve != null) {\n- this._pendingCommitDetailsMap.delete(key);\n-\n- const actualDurationsMap = new Map();\n- const selfDurationsMap = new Map();\n- for (let i = 0; i < durations.length; i += 3) {\n- const fiberID = durations[i];\n- actualDurationsMap.set(fiberID, durations[i + 1]);\n- selfDurationsMap.set(fiberID, durations[i + 2]);\n- }\n-\n- resolve({\n- actualDurations: actualDurationsMap,\n- commitIndex,\n- interactions,\n- priorityLevel,\n- rootID,\n- selfDurations: selfDurationsMap,\n- });\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- this._pendingInteractionsMap.delete(rootID);\n-\n- resolve({\n- interactions,\n- rootID,\n- });\n- }\n- };\n-\n- onProfileSummary = ({\n- commitDurations,\n- commitTimes,\n- initialTreeBaseDurations,\n- interactionCount,\n- rootID,\n- }: ProfilingSummaryBackend) => {\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- const fiberID = initialTreeBaseDurations[i];\n- const initialTreeBaseDuration = initialTreeBaseDurations[i + 1];\n- initialTreeBaseDurationsMap.set(fiberID, initialTreeBaseDuration);\n- }\n-\n- resolve({\n- commitDurations,\n- commitTimes,\n- initialTreeBaseDurations: initialTreeBaseDurationsMap,\n- interactionCount,\n- rootID,\n- });\n- }\n- };\n }\ndiff --git a\/src\/devtools\/store.js b\/src\/devtools\/store.js\nindex 1155b6fe18..41b4534cc0 100644\n--- a\/src\/devtools\/store.js\n+++ b\/src\/devtools\/store.js\n@@ -1,8 +1,6 @@\n \/\/ @flow\n \n import EventEmitter from 'events';\n-import memoize from 'memoize-one';\n-import throttle from 'lodash.throttle';\n import { inspect } from 'util';\n import {\n TREE_OPERATION_ADD,\n@@ -17,14 +15,10 @@ import {\n utfDecodeString,\n } from '..\/utils';\n import { __DEBUG__ } from '..\/constants';\n-import ProfilingCache from '.\/ProfilingCache';\n import { printStore } from 'src\/__tests__\/storeSerializer';\n+import ProfilerStore from '.\/ProfilerStore';\n \n import type { Element } from '.\/views\/Components\/types';\n-import type {\n- ImportedProfilingData,\n- ProfilingSnapshotNode,\n-} from '.\/views\/Profiler\/types';\n import type { Bridge, ComponentFilter, ElementType } from '..\/types';\n \n const debug = (methodName, ...args) => {\n@@ -43,12 +37,9 @@ const LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY =\n const LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY =\n 'React::DevTools::collapseNodesByDefault';\n \n-const THROTTLE_CAPTURE_SCREENSHOT_DURATION = 500;\n-\n type Config = {|\n isProfiling?: boolean,\n supportsCaptureScreenshots?: boolean,\n- supportsFileDownloads?: boolean,\n supportsReloadAndProfile?: boolean,\n supportsProfiling?: boolean,\n |};\n@@ -80,37 +71,11 @@ export default class Store extends EventEmitter {\n \/\/ The InspectedElementContext also relies on this mutability for its WeakMap usage.\n _idToElement: Map = new Map();\n \n- \/\/ The user has imported a previously exported profiling session.\n- _importedProfilingData: ImportedProfilingData | null = null;\n-\n- \/\/ The backend is currently profiling.\n- \/\/ When profiling is in progress, operations are stored so that we can later reconstruct past commit trees.\n- _isProfiling: boolean = false;\n-\n \/\/ Map of element (id) to the set of elements (ids) it owns.\n \/\/ This map enables getOwnersListForElement() to avoid traversing the entire tree.\n _ownersMap: Map> = new Map();\n \n- \/\/ Suspense cache for reading profiling data.\n- _profilingCache: ProfilingCache;\n-\n- \/\/ Map of root (id) to a list of tree mutation that occur during profiling.\n- \/\/ Once profiling is finished, these mutations can be used, along with the initial tree snapshots,\n- \/\/ to reconstruct the state of each root for each commit.\n- _profilingOperationsByRootID: Map> = new Map();\n-\n- \/\/ Map of root (id) to a Map of screenshots by commit ID.\n- \/\/ Stores screenshots for each commit (when profiling).\n- _profilingScreenshotsByRootID: Map> = new Map();\n-\n- \/\/ Snapshot of the state of the main Store (including all roots) when profiling started.\n- \/\/ Once profiling is finished, this snapshot can be used along with \"operations\" messages emitted during profiling,\n- \/\/ to reconstruct the state of each root for each commit.\n- \/\/ It's okay to use a single root to store this information because node IDs are unique across all roots.\n- _profilingSnapshotsByRootID: Map<\n- number,\n- Map\n- > = new Map();\n+ _profilerStore: ProfilerStore;\n \n \/\/ Incremented each time the store is mutated.\n \/\/ This enables a passive effect to detect a mutation between render and commit phase.\n@@ -128,7 +93,6 @@ export default class Store extends EventEmitter {\n \/\/ These options may be initially set by a confiugraiton option when constructing the Store.\n \/\/ In the case of \"supportsProfiling\", the option may be updated based on the injected renderers.\n _supportsCaptureScreenshots: boolean = false;\n- _supportsFileDownloads: boolean = false;\n _supportsProfiling: boolean = false;\n _supportsReloadAndProfile: boolean = false;\n \n@@ -150,26 +114,21 @@ export default class Store extends EventEmitter {\n \n this._componentFilters = getSavedComponentFilters();\n \n+ let isProfiling = false;\n if (config != null) {\n+ isProfiling = config.isProfiling === true;\n+\n const {\n- isProfiling,\n supportsCaptureScreenshots,\n- supportsFileDownloads,\n supportsProfiling,\n supportsReloadAndProfile,\n } = config;\n- if (isProfiling) {\n- this._isProfiling = true;\n- }\n if (supportsCaptureScreenshots) {\n this._supportsCaptureScreenshots = true;\n this._captureScreenshots =\n localStorage.getItem(LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY) ===\n 'true';\n }\n- if (supportsFileDownloads) {\n- this._supportsFileDownloads = true;\n- }\n if (supportsProfiling) {\n this._supportsProfiling = true;\n }\n@@ -180,15 +139,9 @@ export default class Store extends EventEmitter {\n \n this._bridge = bridge;\n bridge.addListener('operations', this.onBridgeOperations);\n- bridge.addListener('profilingStatus', this.onProfilingStatus);\n- bridge.addListener('screenshotCaptured', this.onScreenshotCaptured);\n bridge.addListener('shutdown', this.onBridgeShutdown);\n \n- \/\/ It's possible that profiling has already started (e.g. \"reload and start profiling\")\n- \/\/ so the frontend needs to ask the backend for its status after mounting.\n- bridge.send('getProfilingStatus');\n-\n- this._profilingCache = new ProfilingCache(bridge, this);\n+ this._profilerStore = new ProfilerStore(bridge, this, isProfiling);\n }\n \n \/\/ This is only used in tests to avoid memory leaks.\n@@ -197,23 +150,6 @@ export default class Store extends EventEmitter {\n \/\/ The only safe time to assert these maps are empty is when the store is empty.\n this.assertMapSizeMatchesRootCount(this._idToElement, '_idToElement');\n this.assertMapSizeMatchesRootCount(this._ownersMap, '_ownersMap');\n-\n- \/\/ These maps will be empty unless profiling mode has been started.\n- \/\/ After this, their size should always match the number of roots,\n- \/\/ but unless we want to track additional metadata about profiling history,\n- \/\/ the only safe time to assert this is when the store is empty.\n- this.assertMapSizeMatchesRootCount(\n- this._profilingOperationsByRootID,\n- '_profilingOperationsByRootID'\n- );\n- this.assertMapSizeMatchesRootCount(\n- this._profilingScreenshotsByRootID,\n- '_profilingScreenshotsByRootID'\n- );\n- this.assertMapSizeMatchesRootCount(\n- this._profilingSnapshotsByRootID,\n- '_profilingSnapshotsByRootID'\n- );\n }\n \n \/\/ These maps should always be the same size as the number of roots\n@@ -273,7 +209,7 @@ export default class Store extends EventEmitter {\n return this._componentFilters;\n }\n set componentFilters(value: Array): void {\n- if (this._isProfiling) {\n+ if (this._profilerStore.isProfiling) {\n \/\/ Re-mounting a tree while profiling is in progress might break a lot of assumptions.\n \/\/ If necessary, we could support this- but it doesn't seem like a necessary use case.\n throw Error('Cannot modify filter preferences while profiling');\n@@ -295,55 +231,22 @@ export default class Store extends EventEmitter {\n return this._hasOwnerMetadata;\n }\n \n- \/\/ Profiling data has been recorded for at least one root.\n- get hasProfilingData(): boolean {\n- return (\n- this._importedProfilingData !== null ||\n- this._profilingOperationsByRootID.size > 0\n- );\n- }\n-\n- get importedProfilingData(): ImportedProfilingData | null {\n- return this._importedProfilingData;\n- }\n- set importedProfilingData(value: ImportedProfilingData | null): void {\n- this._importedProfilingData = value;\n- this._profilingOperationsByRootID = new Map();\n- this._profilingScreenshotsByRootID = new Map();\n- this._profilingSnapshotsByRootID = new Map();\n- this._profilingCache.invalidate();\n-\n- this.emit('importedProfilingData');\n- }\n-\n- get isProfiling(): boolean {\n- return this._isProfiling;\n- }\n-\n get numElements(): number {\n return this._weightAcrossRoots;\n }\n \n- get profilingCache(): ProfilingCache {\n- return this._profilingCache;\n- }\n-\n- get profilingOperations(): Map> {\n- return this._profilingOperationsByRootID;\n- }\n-\n- get profilingScreenshots(): Map> {\n- return this._profilingScreenshotsByRootID;\n- }\n-\n- get profilingSnapshots(): Map> {\n- return this._profilingSnapshotsByRootID;\n+ get profilerStore(): ProfilerStore {\n+ return this._profilerStore;\n }\n \n get revision(): number {\n return this._revision;\n }\n \n+ get rootIDToRendererID(): Map {\n+ return this._rootIDToRendererID;\n+ }\n+\n get roots(): $ReadOnlyArray {\n return this._roots;\n }\n@@ -352,10 +255,6 @@ export default class Store extends EventEmitter {\n return this._supportsCaptureScreenshots;\n }\n \n- get supportsFileDownloads(): boolean {\n- return this._supportsFileDownloads;\n- }\n-\n get supportsProfiling(): boolean {\n return this._supportsProfiling;\n }\n@@ -364,19 +263,6 @@ export default class Store extends EventEmitter {\n return this._supportsReloadAndProfile;\n }\n \n- clearProfilingData(): void {\n- this._importedProfilingData = null;\n- this._profilingOperationsByRootID = new Map();\n- this._profilingScreenshotsByRootID = new Map();\n- this._profilingSnapshotsByRootID = new Map();\n-\n- \/\/ Invalidate suspense cache if profiling data is being (re-)recorded.\n- \/\/ Note that we clear now because any existing data is \"stale\".\n- this._profilingCache.invalidate();\n-\n- this.emit('isProfiling');\n- }\n-\n containsElement(id: number): boolean {\n return this._idToElement.get(id) != null;\n }\n@@ -602,24 +488,6 @@ export default class Store extends EventEmitter {\n return false;\n }\n \n- startProfiling(): void {\n- this._bridge.send('startProfiling');\n-\n- \/\/ Don't actually update the local profiling boolean yet!\n- \/\/ Wait for onProfilingStatus() to confirm the status has changed.\n- \/\/ This ensures the frontend and backend are in sync wrt which commits were profiled.\n- \/\/ We do this to avoid mismatches on e.g. CommitTreeBuilder that would cause errors.\n- }\n-\n- stopProfiling(): void {\n- this._bridge.send('stopProfiling');\n-\n- \/\/ Don't actually update the local profiling boolean yet!\n- \/\/ Wait for onProfilingStatus() to confirm the status has changed.\n- \/\/ This ensures the frontend and backend are in sync wrt which commits were profiled.\n- \/\/ We do this to avoid mismatches on e.g. CommitTreeBuilder that would cause errors.\n- }\n-\n \/\/ TODO Maybe split this into two methods: expand() and collapse()\n toggleIsCollapsed(id: number, isCollapsed: boolean): void {\n let didMutate = false;\n@@ -702,34 +570,6 @@ export default class Store extends EventEmitter {\n }\n }\n \n- _captureScreenshot = throttle(\n- memoize((rootID: number, commitIndex: number) => {\n- this._bridge.send('captureScreenshot', { commitIndex, rootID });\n- }),\n- THROTTLE_CAPTURE_SCREENSHOT_DURATION\n- );\n-\n- _takeProfilingSnapshotRecursive = (\n- elementID: number,\n- profilingSnapshots: Map\n- ) => {\n- const element = this.getElementByID(elementID);\n- if (element !== null) {\n- const snapshotNode: ProfilingSnapshotNode = {\n- id: elementID,\n- children: element.children.slice(0),\n- displayName: element.displayName,\n- key: element.key,\n- type: element.type,\n- };\n- profilingSnapshots.set(elementID, snapshotNode);\n-\n- element.children.forEach(childID =>\n- this._takeProfilingSnapshotRecursive(childID, profilingSnapshots)\n- );\n- }\n- };\n-\n _adjustParentTreeWeight = (\n parentElement: Element | null,\n weightDelta: number\n@@ -770,23 +610,8 @@ export default class Store extends EventEmitter {\n \n let haveRootsChanged = false;\n \n+ \/\/ The first two values are always rendererID and rootID\n const rendererID = operations[0];\n- const rootID = operations[1];\n-\n- if (this._isProfiling) {\n- let profilingOperations = this._profilingOperationsByRootID.get(rootID);\n- if (profilingOperations == null) {\n- profilingOperations = [operations];\n- this._profilingOperationsByRootID.set(rootID, profilingOperations);\n- } else {\n- profilingOperations.push(operations);\n- }\n-\n- if (this._captureScreenshots) {\n- const commitIndex = profilingOperations.length - 1;\n- this._captureScreenshot(rootID, commitIndex);\n- }\n- }\n \n const addedElementIDs: Array = [];\n \/\/ This is a mapping of removed ID -> parent ID:\n@@ -858,10 +683,6 @@ export default class Store extends EventEmitter {\n weight: 0,\n });\n \n- if (this._isProfiling) {\n- this._profilingSnapshotsByRootID.set(id, new Map());\n- }\n-\n haveRootsChanged = true;\n } else {\n parentID = ((operations[i]: any): number);\n@@ -957,10 +778,6 @@ export default class Store extends EventEmitter {\n this._rootIDToRendererID.delete(id);\n this._rootIDToCapabilities.delete(id);\n \n- this._profilingOperationsByRootID.delete(id);\n- this._profilingScreenshotsByRootID.delete(id);\n- this._profilingSnapshotsByRootID.delete(id);\n-\n haveRootsChanged = true;\n } else {\n if (__DEBUG__) {\n@@ -1066,60 +883,12 @@ export default class Store extends EventEmitter {\n this.emit('mutated', [addedElementIDs, removedElementIDs]);\n };\n \n- onProfilingStatus = (isProfiling: boolean) => {\n- if (isProfiling) {\n- this._importedProfilingData = null;\n- this._profilingOperationsByRootID = new Map();\n- this._profilingScreenshotsByRootID = new Map();\n- this._profilingSnapshotsByRootID = new Map();\n- this.roots.forEach(rootID => {\n- const profilingSnapshots = new Map();\n- this._profilingSnapshotsByRootID.set(rootID, profilingSnapshots);\n- this._takeProfilingSnapshotRecursive(rootID, profilingSnapshots);\n- });\n- }\n-\n- if (this._isProfiling !== isProfiling) {\n- this._isProfiling = isProfiling;\n-\n- \/\/ Invalidate suspense cache if profiling data is being (re-)recorded.\n- \/\/ Note that we clear again, in case any views read from the cache while profiling.\n- \/\/ (That would have resolved a now-stale value without any profiling data.)\n- this._profilingCache.invalidate();\n-\n- this.emit('isProfiling');\n- }\n- };\n-\n- onScreenshotCaptured = ({\n- commitIndex,\n- dataURL,\n- rootID,\n- }: {|\n- commitIndex: number,\n- dataURL: string,\n- rootID: number,\n- |}) => {\n- let profilingScreenshotsForRootByCommitIndex = this._profilingScreenshotsByRootID.get(\n- rootID\n- );\n- if (!profilingScreenshotsForRootByCommitIndex) {\n- profilingScreenshotsForRootByCommitIndex = new Map();\n- this._profilingScreenshotsByRootID.set(\n- rootID,\n- profilingScreenshotsForRootByCommitIndex\n- );\n- }\n- profilingScreenshotsForRootByCommitIndex.set(commitIndex, dataURL);\n- };\n-\n onBridgeShutdown = () => {\n if (__DEBUG__) {\n debug('onBridgeShutdown', 'unsubscribing from Bridge');\n }\n \n this._bridge.removeListener('operations', this.onBridgeOperations);\n- this._bridge.removeListener('profilingStatus', this.onProfilingStatus);\n this._bridge.removeListener('shutdown', this.onBridgeShutdown);\n };\n }\ndiff --git a\/src\/devtools\/views\/Components\/ComponentFiltersModal.js b\/src\/devtools\/views\/Components\/ComponentFiltersModal.js\nindex 45e00b7ff4..7797dcbf24 100644\n--- a\/src\/devtools\/views\/Components\/ComponentFiltersModal.js\n+++ b\/src\/devtools\/views\/Components\/ComponentFiltersModal.js\n@@ -41,6 +41,7 @@ import type {\n \n export default function ComponentFiltersModalWrapper(_: {||}) {\n const store = useContext(StoreContext);\n+ const { profilerStore } = store;\n \n const { isModalShowing, setIsModalShowing } = useContext(\n ComponentFiltersModalContext\n@@ -50,13 +51,13 @@ export default function ComponentFiltersModalWrapper(_: {||}) {\n \/\/ If necessary, we could support this- but it doesn't seem like a necessary use case.\n const isProfilingSubscription = useMemo(\n () => ({\n- getCurrentValue: () => store.isProfiling,\n+ getCurrentValue: () => profilerStore.isProfiling,\n subscribe: (callback: Function) => {\n- store.addListener('isProfiling', callback);\n- return () => store.removeListener('isProfiling', callback);\n+ profilerStore.addListener('isProfiling', callback);\n+ return () => profilerStore.removeListener('isProfiling', callback);\n },\n }),\n- [store]\n+ [profilerStore]\n );\n const isProfiling = useSubscription(isProfilingSubscription);\n if (isProfiling && isModalShowing) {\ndiff --git a\/src\/devtools\/views\/Components\/ToggleComponentFiltersModalButton.js b\/src\/devtools\/views\/Components\/ToggleComponentFiltersModalButton.js\nindex 189454d349..e1d237f33a 100644\n--- a\/src\/devtools\/views\/Components\/ToggleComponentFiltersModalButton.js\n+++ b\/src\/devtools\/views\/Components\/ToggleComponentFiltersModalButton.js\n@@ -14,6 +14,7 @@ import type { ComponentFilter } from 'src\/types';\n \n export default function ToggleComponentFiltersModalButton() {\n const store = useContext(StoreContext);\n+ const { profilerStore } = store;\n \n const { isModalShowing, setIsModalShowing } = useContext(\n ComponentFiltersModalContext\n@@ -23,13 +24,13 @@ export default function ToggleComponentFiltersModalButton() {\n \/\/ If necessary, we could support this- but it doesn't seem like a necessary use case.\n const isProfilingSubscription = useMemo(\n () => ({\n- getCurrentValue: () => store.isProfiling,\n+ getCurrentValue: () => profilerStore.isProfiling,\n subscribe: (callback: Function) => {\n- store.addListener('isProfiling', callback);\n- return () => store.removeListener('isProfiling', callback);\n+ profilerStore.addListener('isProfiling', callback);\n+ return () => profilerStore.removeListener('isProfiling', callback);\n },\n }),\n- [store]\n+ [profilerStore]\n );\n const isProfiling = useSubscription(isProfilingSubscription);\n \ndiff --git a\/src\/devtools\/views\/Profiler\/ClearProfilingDataButton.js b\/src\/devtools\/views\/Profiler\/ClearProfilingDataButton.js\nindex a8be6b0f6c..c99f370fce 100644\n--- a\/src\/devtools\/views\/Profiler\/ClearProfilingDataButton.js\n+++ b\/src\/devtools\/views\/Profiler\/ClearProfilingDataButton.js\n@@ -8,13 +8,14 @@ import { StoreContext } from '..\/context';\n \n export default function ClearProfilingDataButton() {\n const store = useContext(StoreContext);\n- const { isProfiling } = useContext(ProfilerContext);\n+ const { hasProfilingData, isProfiling } = useContext(ProfilerContext);\n+ const { profilerStore } = store;\n \n- const clear = useCallback(() => store.clearProfilingData(), [store]);\n+ const clear = useCallback(() => profilerStore.clear(), [profilerStore]);\n \n return (\n \ndiff --git a\/src\/devtools\/views\/Profiler\/CommitFilterModal.js b\/src\/devtools\/views\/Profiler\/CommitFilterModal.js\nindex c47c254e0a..8b359479af 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitFilterModal.js\n+++ b\/src\/devtools\/views\/Profiler\/CommitFilterModal.js\n@@ -8,6 +8,16 @@ import { useModalDismissSignal } from '..\/hooks';\n import styles from '.\/CommitFilterModal.css';\n \n export default function FilterModal(_: {||}) {\n+ const { isModalShowing } = useContext(CommitFilterModalContext);\n+\n+ if (!isModalShowing) {\n+ return null;\n+ }\n+\n+ return ;\n+}\n+\n+function FilterModalImpl(_: {||}) {\n const {\n isCommitFilterEnabled,\n minCommitDuration,\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\nindex 091fd96b61..e9f8718d16 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\n+++ b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\n@@ -13,7 +13,7 @@ import { StoreContext } from '..\/context';\n import styles from '.\/CommitFlamegraph.css';\n \n import type { ChartData, ChartNode } from '.\/FlamegraphChartBuilder';\n-import type { CommitDetailsFrontend, CommitTreeFrontend } from '.\/types';\n+import type { CommitTree } from '.\/types';\n \n export type ItemData = {|\n chartData: ChartData,\n@@ -25,10 +25,11 @@ export type ItemData = {|\n |};\n \n export default function CommitFlamegraphAutoSizer(_: {||}) {\n- const { profilingCache } = useContext(StoreContext);\n- const { rendererID, rootID, selectedCommitIndex, selectFiber } = useContext(\n+ const { profilerStore } = useContext(StoreContext);\n+ const { rootID, selectedCommitIndex, selectFiber } = useContext(\n ProfilerContext\n );\n+ const { profilingCache } = profilerStore;\n \n const deselectCurrentFiber = useCallback(\n event => {\n@@ -38,39 +39,22 @@ export default function CommitFlamegraphAutoSizer(_: {||}) {\n [selectFiber]\n );\n \n- const profilingSummary = profilingCache.ProfilingSummary.read({\n- rendererID: ((rendererID: any): number),\n- rootID: ((rootID: any): number),\n- });\n-\n- let commitDetails: CommitDetailsFrontend | null = null;\n- let commitTree: CommitTreeFrontend | null = null;\n+ let commitTree: CommitTree | null = null;\n let chartData: ChartData | null = null;\n if (selectedCommitIndex !== null) {\n- commitDetails = profilingCache.CommitDetails.read({\n- commitIndex: selectedCommitIndex,\n- rendererID: ((rendererID: any): number),\n- rootID: ((rootID: any): number),\n- });\n-\n commitTree = profilingCache.getCommitTree({\n commitIndex: selectedCommitIndex,\n- profilingSummary,\n+ rootID: ((rootID: any): number),\n });\n \n chartData = profilingCache.getFlamegraphChartData({\n- commitDetails,\n commitIndex: selectedCommitIndex,\n commitTree,\n+ rootID: ((rootID: any): number),\n });\n }\n \n- if (\n- commitDetails != null &&\n- commitTree != null &&\n- chartData != null &&\n- chartData.depth > 0\n- ) {\n+ if (commitTree != null && chartData != null && chartData.depth > 0) {\n return (\n

\n \n@@ -79,8 +63,7 @@ export default function CommitFlamegraphAutoSizer(_: {||}) {\n \/\/ by the time this render prop function is called, the values of the `let` variables have not changed.\n \n@@ -95,19 +78,12 @@ export default function CommitFlamegraphAutoSizer(_: {||}) {\n \n type Props = {|\n chartData: ChartData,\n- commitDetails: CommitDetailsFrontend,\n- commitTree: CommitTreeFrontend,\n+ commitTree: CommitTree,\n height: number,\n width: number,\n |};\n \n-function CommitFlamegraph({\n- chartData,\n- commitDetails,\n- commitTree,\n- height,\n- width,\n-}: Props) {\n+function CommitFlamegraph({ chartData, commitTree, height, width }: Props) {\n const { selectFiber, selectedFiberID } = useContext(ProfilerContext);\n \n const selectedChartNodeIndex = useMemo(() => {\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitRanked.js b\/src\/devtools\/views\/Profiler\/CommitRanked.js\nindex 63200f37ba..55e039ae90 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitRanked.js\n+++ b\/src\/devtools\/views\/Profiler\/CommitRanked.js\n@@ -13,7 +13,7 @@ import { StoreContext } from '..\/context';\n import styles from '.\/CommitRanked.css';\n \n import type { ChartData } from '.\/RankedChartBuilder';\n-import type { CommitDetailsFrontend, CommitTreeFrontend } from '.\/types';\n+import type { CommitTree } from '.\/types';\n \n export type ItemData = {|\n chartData: ChartData,\n@@ -25,10 +25,11 @@ export type ItemData = {|\n |};\n \n export default function CommitRankedAutoSizer(_: {||}) {\n- const { profilingCache } = useContext(StoreContext);\n- const { rendererID, rootID, selectedCommitIndex, selectFiber } = useContext(\n+ const { profilerStore } = useContext(StoreContext);\n+ const { rootID, selectedCommitIndex, selectFiber } = useContext(\n ProfilerContext\n );\n+ const { profilingCache } = profilerStore;\n \n const deselectCurrentFiber = useCallback(\n event => {\n@@ -38,47 +39,29 @@ export default function CommitRankedAutoSizer(_: {||}) {\n [selectFiber]\n );\n \n- const profilingSummary = profilingCache.ProfilingSummary.read({\n- rendererID: ((rendererID: any): number),\n- rootID: ((rootID: any): number),\n- });\n-\n- let commitDetails: CommitDetailsFrontend | null = null;\n- let commitTree: CommitTreeFrontend | null = null;\n+ let commitTree: CommitTree | null = null;\n let chartData: ChartData | null = null;\n if (selectedCommitIndex !== null) {\n- commitDetails = profilingCache.CommitDetails.read({\n- commitIndex: selectedCommitIndex,\n- rendererID: ((rendererID: any): number),\n- rootID: ((rootID: any): number),\n- });\n-\n commitTree = profilingCache.getCommitTree({\n commitIndex: selectedCommitIndex,\n- profilingSummary,\n+ rootID: ((rootID: any): number),\n });\n \n chartData = profilingCache.getRankedChartData({\n- commitDetails,\n commitIndex: selectedCommitIndex,\n commitTree,\n+ rootID: ((rootID: any): number),\n });\n }\n \n- if (\n- commitDetails != null &&\n- commitTree != null &&\n- chartData != null &&\n- chartData.nodes.length > 0\n- ) {\n+ if (commitTree != null && chartData != null && chartData.nodes.length > 0) {\n return (\n

\n \n {({ height, width }) => (\n \n@@ -93,19 +76,12 @@ export default function CommitRankedAutoSizer(_: {||}) {\n \n type Props = {|\n chartData: ChartData,\n- commitDetails: CommitDetailsFrontend,\n- commitTree: CommitTreeFrontend,\n+ commitTree: CommitTree,\n height: number,\n width: number,\n |};\n \n-function CommitRanked({\n- chartData,\n- commitDetails,\n- commitTree,\n- height,\n- width,\n-}: Props) {\n+function CommitRanked({ chartData, commitTree, height, width }: Props) {\n const { selectedFiberID, selectFiber } = useContext(ProfilerContext);\n \n const selectedFiberIndex = useMemo(\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js b\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\nindex 3d4ec90aed..ea18a53812 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\n+++ b\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\n@@ -9,14 +9,13 @@ import {\n } from 'src\/constants';\n import { utfDecodeString } from 'src\/utils';\n import { ElementTypeRoot } from 'src\/types';\n-import Store from 'src\/devtools\/store';\n+import ProfilerStore from 'src\/devtools\/ProfilerStore';\n \n import type { ElementType } from 'src\/types';\n import type {\n- CommitTreeFrontend,\n- CommitTreeNodeFrontend,\n- ProfilingSnapshotNode,\n- ProfilingSummaryFrontend,\n+ CommitTree,\n+ CommitTreeNode,\n+ ProfilingDataForRootFrontend,\n } from 'src\/devtools\/views\/Profiler\/types';\n \n const debug = (methodName, ...args) => {\n@@ -30,36 +29,40 @@ const debug = (methodName, ...args) => {\n }\n };\n \n-const rootToCommitTreeMap: Map> = new Map();\n+const rootToCommitTreeMap: Map> = new Map();\n \n export function getCommitTree({\n commitIndex,\n- profilingSummary,\n- store,\n+ profilerStore,\n+ rootID,\n }: {|\n commitIndex: number,\n- profilingSummary: ProfilingSummaryFrontend,\n- store: Store,\n-|}): CommitTreeFrontend {\n- const { rootID } = profilingSummary;\n-\n+ profilerStore: ProfilerStore,\n+ rootID: number,\n+|}): CommitTree {\n if (!rootToCommitTreeMap.has(rootID)) {\n rootToCommitTreeMap.set(rootID, []);\n }\n \n const commitTrees = ((rootToCommitTreeMap.get(\n rootID\n- ): any): Array);\n+ ): any): Array);\n \n if (commitIndex < commitTrees.length) {\n return commitTrees[commitIndex];\n }\n \n- const { importedProfilingData } = store;\n- const profilingOperations =\n- importedProfilingData != null\n- ? importedProfilingData.profilingOperations\n- : store.profilingOperations;\n+ const { profilingData } = profilerStore;\n+ if (profilingData === null) {\n+ throw Error(`No profiling data available`);\n+ }\n+\n+ const dataForRoot = profilingData.dataForRoots.get(rootID);\n+ if (dataForRoot == null) {\n+ throw Error(`Could not find profiling data for root \"${rootID}\"`);\n+ }\n+\n+ const { operations } = dataForRoot;\n \n \/\/ Commits are generated sequentially and cached.\n \/\/ If this is the very first commit, start with the cached snapshot and apply the first mutation.\n@@ -67,32 +70,12 @@ export function getCommitTree({\n if (commitIndex === 0) {\n const nodes = new Map();\n \n- const { importedProfilingData } = store;\n- const profilingSnapshots =\n- importedProfilingData != null\n- ? importedProfilingData.profilingSnapshots.get(rootID)\n- : store.profilingSnapshots.get(rootID);\n-\n- if (profilingSnapshots == null) {\n- throw Error(`Could not find profiling snapshot for root \"${rootID}\"`);\n- }\n-\n \/\/ Construct the initial tree.\n- recursivelyInitializeTree(\n- rootID,\n- 0,\n- nodes,\n- profilingSummary.initialTreeBaseDurations,\n- profilingSnapshots\n- );\n+ recursivelyInitializeTree(rootID, 0, nodes, dataForRoot);\n \n \/\/ Mutate the tree\n- const commitOperations = profilingOperations.get(rootID);\n- if (commitOperations != null && commitIndex < commitOperations.length) {\n- const commitTree = updateTree(\n- { nodes, rootID },\n- commitOperations[commitIndex]\n- );\n+ if (operations != null && commitIndex < operations.length) {\n+ const commitTree = updateTree({ nodes, rootID }, operations[commitIndex]);\n \n if (__DEBUG__) {\n __printTree(commitTree);\n@@ -104,14 +87,14 @@ export function getCommitTree({\n } else {\n const previousCommitTree = getCommitTree({\n commitIndex: commitIndex - 1,\n- profilingSummary,\n- store,\n+ profilerStore,\n+ rootID,\n });\n- const commitOperations = profilingOperations.get(rootID);\n- if (commitOperations != null && commitIndex < commitOperations.length) {\n+\n+ if (operations != null && commitIndex < operations.length) {\n const commitTree = updateTree(\n previousCommitTree,\n- commitOperations[commitIndex]\n+ operations[commitIndex]\n );\n \n if (__DEBUG__) {\n@@ -131,11 +114,10 @@ export function getCommitTree({\n function recursivelyInitializeTree(\n id: number,\n parentID: number,\n- nodes: Map,\n- initialTreeBaseDurations: Map,\n- profilingSnapshots: Map\n+ nodes: Map,\n+ dataForRoot: ProfilingDataForRootFrontend\n ): void {\n- const node = profilingSnapshots.get(id);\n+ const node = dataForRoot.snapshots.get(id);\n if (node != null) {\n nodes.set(id, {\n id,\n@@ -143,35 +125,31 @@ function recursivelyInitializeTree(\n displayName: node.displayName,\n key: node.key,\n parentID,\n- treeBaseDuration: ((initialTreeBaseDurations.get(id): any): number),\n+ treeBaseDuration: ((dataForRoot.initialTreeBaseDurations.get(\n+ id\n+ ): any): number),\n type: node.type,\n });\n \n node.children.forEach(childID =>\n- recursivelyInitializeTree(\n- childID,\n- id,\n- nodes,\n- initialTreeBaseDurations,\n- profilingSnapshots\n- )\n+ recursivelyInitializeTree(childID, id, nodes, dataForRoot)\n );\n }\n }\n \n function updateTree(\n- commitTree: CommitTreeFrontend,\n+ commitTree: CommitTree,\n operations: Uint32Array\n-): CommitTreeFrontend {\n+): CommitTree {\n \/\/ Clone the original tree so edits don't affect it.\n const nodes = new Map(commitTree.nodes);\n \n \/\/ Clone nodes before mutating them so edits don't affect them.\n- const getClonedNode = (id: number): CommitTreeNodeFrontend => {\n+ const getClonedNode = (id: number): CommitTreeNode => {\n const clonedNode = ((Object.assign(\n {},\n nodes.get(id)\n- ): any): CommitTreeNodeFrontend);\n+ ): any): CommitTreeNode);\n nodes.set(id, clonedNode);\n return clonedNode;\n };\n@@ -219,7 +197,7 @@ function updateTree(\n debug('Add', `new root fiber ${id}`);\n }\n \n- const node: CommitTreeNodeFrontend = {\n+ const node: CommitTreeNode = {\n children: [],\n displayName: null,\n id,\n@@ -254,7 +232,7 @@ function updateTree(\n const parentNode = getClonedNode(parentID);\n parentNode.children = parentNode.children.concat(id);\n \n- const node: CommitTreeNodeFrontend = {\n+ const node: CommitTreeNode = {\n children: [],\n displayName,\n id,\n@@ -355,7 +333,7 @@ export function invalidateCommitTrees(): void {\n }\n \n \/\/ DEBUG\n-const __printTree = (commitTree: CommitTreeFrontend) => {\n+const __printTree = (commitTree: CommitTree) => {\n if (__DEBUG__) {\n const { nodes, rootID } = commitTree;\n console.group('__printTree()');\ndiff --git a\/src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js b\/src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js\nindex 994a08c777..7287d09189 100644\n--- a\/src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js\n+++ b\/src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js\n@@ -2,8 +2,9 @@\n \n import { ElementTypeForwardRef, ElementTypeMemo } from 'src\/types';\n import { formatDuration } from '.\/utils';\n+import ProfilerStore from 'src\/devtools\/ProfilerStore';\n \n-import type { CommitDetailsFrontend, CommitTreeFrontend } from '.\/types';\n+import type { CommitTree } from '.\/types';\n \n export type ChartNode = {|\n actualDuration: number,\n@@ -28,15 +29,19 @@ export type ChartData = {|\n const cachedChartData: Map = new Map();\n \n export function getChartData({\n- commitDetails,\n commitIndex,\n commitTree,\n+ profilerStore,\n+ rootID,\n }: {|\n- commitDetails: CommitDetailsFrontend,\n commitIndex: number,\n- commitTree: CommitTreeFrontend,\n+ commitTree: CommitTree,\n+ profilerStore: ProfilerStore,\n+ rootID: number,\n |}): ChartData {\n- const { actualDurations, rootID, selfDurations } = commitDetails;\n+ const commitDatum = profilerStore.getCommitData(rootID, commitIndex);\n+\n+ const { fiberActualDurations, fiberSelfDurations } = commitDatum;\n const { nodes } = commitTree;\n \n const key = `${rootID}-${commitIndex}`;\n@@ -62,9 +67,9 @@ export function getChartData({\n \n const { children, displayName, key, treeBaseDuration, type } = node;\n \n- const actualDuration = actualDurations.get(id) || 0;\n- const selfDuration = selfDurations.get(id) || 0;\n- const didRender = actualDurations.has(id);\n+ const actualDuration = fiberActualDurations.get(id) || 0;\n+ const selfDuration = fiberSelfDurations.get(id) || 0;\n+ const didRender = fiberActualDurations.has(id);\n \n const name = displayName || 'Anonymous';\n const maybeKey = key !== null ? ` key=\"${key}\"` : '';\n@@ -131,7 +136,7 @@ export function getChartData({\n walkTree(id, baseDuration, 1);\n }\n \n- actualDurations.forEach((duration, id) => {\n+ fiberActualDurations.forEach((duration, id) => {\n const node = nodes.get(id);\n if (node != null) {\n let currentID = node.parentID;\ndiff --git a\/src\/devtools\/views\/Profiler\/InteractionListItem.js b\/src\/devtools\/views\/Profiler\/InteractionListItem.js\nindex a4e3cd7054..4e6d8c746b 100644\n--- a\/src\/devtools\/views\/Profiler\/InteractionListItem.js\n+++ b\/src\/devtools\/views\/Profiler\/InteractionListItem.js\n@@ -17,9 +17,8 @@ type Props = {\n function InteractionListItem({ data: itemData, index, style }: Props) {\n const {\n chartData,\n- interactions,\n+ dataForRoot,\n labelWidth,\n- profilingSummary,\n scaleX,\n selectedInteractionID,\n selectCommitIndex,\n@@ -27,20 +26,22 @@ function InteractionListItem({ data: itemData, index, style }: Props) {\n selectTab,\n } = itemData;\n \n- const { maxCommitDuration } = chartData;\n- const { commitDurations, commitTimes } = profilingSummary;\n+ const { commitData, interactionCommits } = dataForRoot;\n+ const { interactions, lastInteractionTime, maxCommitDuration } = chartData;\n \n const interaction = interactions[index];\n+ if (interaction == null) {\n+ throw Error(`Could not find interaction #${index}`);\n+ }\n \n const handleClick = useCallback(() => {\n selectInteraction(interaction.id);\n }, [interaction, selectInteraction]);\n \n+ const commits = interactionCommits.get(interaction.id) || [];\n+\n const startTime = interaction.timestamp;\n- const stopTime =\n- interaction.commits.length > 0\n- ? commitTimes[interaction.commits[interaction.commits.length - 1]]\n- : interaction.timestamp;\n+ const stopTime = lastInteractionTime;\n \n const viewCommit = (commitIndex: number) => {\n selectTab('flame-chart');\n@@ -71,7 +72,7 @@ function InteractionListItem({ data: itemData, index, style }: Props) {\n width: scaleX(stopTime - startTime, 0),\n }}\n \/>\n- {interaction.commits.map(commitIndex => (\n+ {commits.map(commitIndex => (\n \n ))}\ndiff --git a\/src\/devtools\/views\/Profiler\/Interactions.js b\/src\/devtools\/views\/Profiler\/Interactions.js\nindex c9c5d3f14f..1ec5597603 100644\n--- a\/src\/devtools\/views\/Profiler\/Interactions.js\n+++ b\/src\/devtools\/views\/Profiler\/Interactions.js\n@@ -11,18 +11,14 @@ import { scale } from '.\/utils';\n \n import styles from '.\/Interactions.css';\n \n+import type { ProfilingDataForRootFrontend } from '.\/types';\n import type { ChartData } from '.\/InteractionsChartBuilder';\n import type { TabID } from '.\/ProfilerContext';\n-import type {\n- InteractionWithCommitsFrontend,\n- ProfilingSummaryFrontend,\n-} from '.\/types';\n \n export type ItemData = {|\n chartData: ChartData,\n- interactions: Array,\n+ dataForRoot: ProfilingDataForRootFrontend,\n labelWidth: number,\n- profilingSummary: ProfilingSummaryFrontend,\n scaleX: (value: number, fallbackValue: number) => number,\n selectedInteractionID: number | null,\n selectCommitIndex: (id: number | null) => void,\n@@ -42,29 +38,22 @@ export default function InteractionsAutoSizer(_: {||}) {\n \n function Interactions({ height, width }: {| height: number, width: number |}) {\n const {\n- rendererID,\n rootID,\n selectedInteractionID,\n selectInteraction,\n selectCommitIndex,\n selectTab,\n } = useContext(ProfilerContext);\n- const { profilingCache } = useContext(StoreContext);\n+ const { profilerStore } = useContext(StoreContext);\n+ const { profilingCache } = profilerStore;\n \n- const { interactions } = profilingCache.Interactions.read({\n- rendererID: ((rendererID: any): number),\n- rootID: ((rootID: any): number),\n- });\n+ const dataForRoot = profilerStore.getDataForRoot(((rootID: any): number));\n \n- const profilingSummary = profilingCache.ProfilingSummary.read({\n- rendererID: ((rendererID: any): number),\n+ const chartData = profilingCache.getInteractionsChartData({\n rootID: ((rootID: any): number),\n });\n \n- const chartData = profilingCache.getInteractionsChartData({\n- interactions,\n- profilingSummary,\n- });\n+ const { interactions } = chartData;\n \n const handleKeyDown = useCallback(\n event => {\n@@ -110,9 +99,8 @@ function Interactions({ height, width }: {| height: number, width: number |}) {\n \n return {\n chartData,\n- interactions,\n+ dataForRoot,\n labelWidth,\n- profilingSummary,\n scaleX: scale(0, chartData.lastInteractionTime, 0, timelineWidth),\n selectedInteractionID,\n selectCommitIndex,\n@@ -121,8 +109,7 @@ function Interactions({ height, width }: {| height: number, width: number |}) {\n };\n }, [\n chartData,\n- interactions,\n- profilingSummary,\n+ dataForRoot,\n selectedInteractionID,\n selectCommitIndex,\n selectInteraction,\ndiff --git a\/src\/devtools\/views\/Profiler\/InteractionsChartBuilder.js b\/src\/devtools\/views\/Profiler\/InteractionsChartBuilder.js\nindex 08bf71be00..6171749ef0 100644\n--- a\/src\/devtools\/views\/Profiler\/InteractionsChartBuilder.js\n+++ b\/src\/devtools\/views\/Profiler\/InteractionsChartBuilder.js\n@@ -1,11 +1,11 @@\n \/\/ @flow\n \n-import type {\n- InteractionWithCommitsFrontend,\n- ProfilingSummaryFrontend,\n-} from '.\/types';\n+import ProfilerStore from 'src\/devtools\/ProfilerStore';\n+\n+import type { Interaction } from '.\/types';\n \n export type ChartData = {|\n+ interactions: Array,\n lastInteractionTime: number,\n maxCommitDuration: number,\n |};\n@@ -13,30 +13,37 @@ export type ChartData = {|\n const cachedChartData: Map = new Map();\n \n export function getChartData({\n- interactions,\n- profilingSummary,\n+ profilerStore,\n+ rootID,\n }: {|\n- interactions: Array,\n- profilingSummary: ProfilingSummaryFrontend,\n+ profilerStore: ProfilerStore,\n+ rootID: number,\n |}): ChartData {\n- const { rootID } = profilingSummary;\n-\n if (cachedChartData.has(rootID)) {\n return ((cachedChartData.get(rootID): any): ChartData);\n }\n \n- const { commitDurations, commitTimes } = profilingSummary;\n+ const dataForRoot = profilerStore.getDataForRoot(rootID);\n+ if (dataForRoot == null) {\n+ throw Error(`Could not find profiling data for root \"${rootID}\"`);\n+ }\n+\n+ const { commitData, interactions } = dataForRoot;\n \n const lastInteractionTime =\n- commitTimes.length > 0 ? commitTimes[commitTimes.length - 1] : 0;\n+ commitData.length > 0 ? commitData[commitData.length - 1].timestamp : 0;\n \n let maxCommitDuration = 0;\n \n- commitDurations.forEach(commitDuration => {\n- maxCommitDuration = Math.max(maxCommitDuration, commitDuration);\n+ commitData.forEach(commitDatum => {\n+ maxCommitDuration = Math.max(maxCommitDuration, commitDatum.duration);\n });\n \n- const chartData = { lastInteractionTime, maxCommitDuration };\n+ const chartData = {\n+ interactions: Array.from(interactions.values()),\n+ lastInteractionTime,\n+ maxCommitDuration,\n+ };\n \n cachedChartData.set(rootID, chartData);\n \ndiff --git a\/src\/devtools\/views\/Profiler\/NoCommitData.js b\/src\/devtools\/views\/Profiler\/NoCommitData.js\nindex 3e0dab4a2d..f16cd9aa96 100644\n--- a\/src\/devtools\/views\/Profiler\/NoCommitData.js\n+++ b\/src\/devtools\/views\/Profiler\/NoCommitData.js\n@@ -1,37 +1,19 @@\n \/\/ @flow\n \n-import React, { useContext } from 'react';\n-import { ProfilerContext } from '.\/ProfilerContext';\n+import React from 'react';\n import ToggleCommitFilterModalButton from '.\/ToggleCommitFilterModalButton';\n \n import styles from '.\/NoCommitData.css';\n \n export default function NoCommitData(_: {||}) {\n- const { rootHasProfilingData } = useContext(ProfilerContext);\n-\n- if (rootHasProfilingData) {\n- return (\n-

\n-

\n- There is no data matching the current filter criteria.\n- <\/div>\n-

\n- Try adjusting the commit filter \n- <\/div>\n+ return (\n+

\n+

\n+ There is no data matching the current filter criteria.\n <\/div>\n- );\n- } else {\n- return (\n-

\n-

\n- There is no timing data to display for the currently selected commit.\n- <\/div>\n-

\n- This can indicate that a render occurred too quickly for the timing\n- API to measure. Try selecting another commit in the upper, right-hand\n- corner.\n- <\/div>\n+

\n+ Try adjusting the commit filter \n <\/div>\n- );\n- }\n+ <\/div>\n+ );\n }\ndiff --git a\/src\/devtools\/views\/Profiler\/Profiler.js b\/src\/devtools\/views\/Profiler\/Profiler.js\nindex 656076c6e6..643aa362ef 100644\n--- a\/src\/devtools\/views\/Profiler\/Profiler.js\n+++ b\/src\/devtools\/views\/Profiler\/Profiler.js\n@@ -1,10 +1,7 @@\n \/\/ @flow\n \n-import React, { Suspense, useContext } from 'react';\n-import {\n- CommitFilterModalContext,\n- CommitFilterModalContextController,\n-} from '.\/CommitFilterModalContext';\n+import React, { useContext } from 'react';\n+import { CommitFilterModalContextController } from '.\/CommitFilterModalContext';\n import { ModalDialog } from '..\/ModalDialog';\n import { ProfilerContext } from '.\/ProfilerContext';\n import TabBar from '..\/TabBar';\n@@ -13,6 +10,7 @@ import CommitFlamegraph from '.\/CommitFlamegraph';\n import CommitRanked from '.\/CommitRanked';\n import CommitFilterModal from '.\/CommitFilterModal';\n import Interactions from '.\/Interactions';\n+import RootSelector from '.\/RootSelector';\n import RecordToggle from '.\/RecordToggle';\n import ReloadAndProfileButton from '.\/ReloadAndProfileButton';\n import ProfilingImportExportButtons from '.\/ProfilingImportExportButtons';\n@@ -30,163 +28,91 @@ export type Props = {|\n |};\n \n function Profiler({ supportsProfiling }: Props) {\n- const { hasProfilingData, isProfiling, rootHasProfilingData } = useContext(\n- ProfilerContext\n- );\n-\n- if (isProfiling || !rootHasProfilingData) {\n- return (\n- \n- );\n- } else {\n- return (\n- \n- \n- <\/CommitFilterModalContextController>\n- );\n- }\n-}\n+ const {\n+ hasProfilingData,\n+ isProcessingData,\n+ isProfiling,\n+ selectedFiberID,\n+ selectedTabID,\n+ selectTab,\n+ } = useContext(ProfilerContext);\n \n-\/\/ This view is rendered when there is no profiler data (either we haven't profiled yet or we're currently profiling).\n-\/\/ Nothing in this view's subtree suspends.\n-\/\/ By not suspending while profiling is in progress, we avoid potential cache invalidation trickiness.\n-\/\/ NOTE that the structure of this UI should mirror SuspendingProfiler.\n-function NonSuspendingProfiler({\n- hasProfilingData,\n- isProfiling,\n- supportsProfiling,\n-}: {|\n- hasProfilingData: boolean,\n- isProfiling: boolean,\n- supportsProfiling: boolean,\n-|}) {\n let view = null;\n if (!supportsProfiling) {\n view = ;\n } else if (isProfiling) {\n- view = ;\n+ view = ;\n+ } else if (isProcessingData) {\n+ view = ;\n } else if (!hasProfilingData) {\n view = ;\n } else {\n- view = ;\n- }\n-\n- return (\n-

\n-

\n- \n- \n- \n- \n-

\n- {}}\n- size=\"small\"\n- tabs={tabs}\n- \/>\n- <\/div>\n-

\n- {view}\n- \n- <\/div>\n- <\/div>\n- <\/div>\n- );\n-}\n-\n-function ContentFallback() {\n- return

Loading...<\/div>;\n-}\n-\n-function SnapshotSelectorFallback() {\n- return

Loading...<\/div>;\n-}\n-\n-\/\/ This view is rendered when there is profiler data (even though there may not be any for the currently selected root).\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 { selectedFiberID, selectedTabID, selectTab } = useContext(\n- ProfilerContext\n- );\n-\n- const { isModalShowing: isFilterModalShowing } = useContext(\n- CommitFilterModalContext\n- );\n-\n- let view = null;\n- switch (selectedTabID) {\n- case 'flame-chart':\n- view = ;\n- break;\n- case 'ranked-chart':\n- view = ;\n- break;\n- case 'interactions':\n- view = ;\n- break;\n- default:\n- break;\n+ switch (selectedTabID) {\n+ case 'flame-chart':\n+ view = ;\n+ break;\n+ case 'ranked-chart':\n+ view = ;\n+ break;\n+ case 'interactions':\n+ view = ;\n+ break;\n+ default:\n+ break;\n+ }\n }\n \n let sidebar = null;\n- switch (selectedTabID) {\n- case 'interactions':\n- sidebar = ;\n- break;\n- case 'flame-chart':\n- case 'ranked-chart':\n- if (selectedFiberID !== null) {\n- sidebar = ;\n- } else {\n- sidebar = ;\n- }\n- break;\n- default:\n- break;\n+ if (!isProfiling && !isProcessingData && hasProfilingData) {\n+ switch (selectedTabID) {\n+ case 'interactions':\n+ sidebar = ;\n+ break;\n+ case 'flame-chart':\n+ case 'ranked-chart':\n+ if (selectedFiberID !== null) {\n+ sidebar = ;\n+ } else {\n+ sidebar = ;\n+ }\n+ break;\n+ default:\n+ break;\n+ }\n }\n \n return (\n-

\n-

\n- \n- \n- \n- \n-

\n- \n-

\n- }>\n- \n- <\/Suspense>\n+ \n+

\n+

\n+ \n+ \n+ \n+ \n+

\n+ \n+ \n+

\n+ \n+

\n+ {hasProfilingData && }\n+ <\/div>\n+

\n+ {view}\n+ \n+ \n+ <\/div>\n <\/div>\n-

\n- }>{view}<\/Suspense>\n- {isFilterModalShowing && }\n- \n- <\/div>\n- <\/div>\n-

\n- }>{sidebar}<\/Suspense>\n+

{sidebar}<\/div>\n <\/div>\n- <\/div>\n+ <\/CommitFilterModalContextController>\n );\n }\n \n@@ -220,18 +146,6 @@ const NoProfilingData = () => (\n <\/div>\n );\n \n-const NoProfilingDataForRoot = () => (\n-

\n-

\n- No profiling data has been recorded for the selected root.\n- <\/div>\n-

\n- Select a different root in the elements panel, or click the record button{' '}\n- to start recording.\n- <\/div>\n- <\/div>\n-);\n-\n const ProfilingNotSupported = () => (\n

Profiling not supported.<\/div>\n@@ -256,7 +170,14 @@ const ProfilingNotSupported = () => (\n <\/div>\n );\n \n-const RecortdingInProgress = () => (\n+const ProcessingData = () => (\n+

\n+

Processing data...<\/div>\n+

This should only take a minute.<\/div>\n+ <\/div>\n+);\n+\n+const RecordingInProgress = () => (\n

Profiling is in progress...<\/div>\n

\ndiff --git a\/src\/devtools\/views\/Profiler\/ProfilerContext.js b\/src\/devtools\/views\/Profiler\/ProfilerContext.js\nindex c2fd4b5a5d..ac4b3b17e6 100644\n--- a\/src\/devtools\/views\/Profiler\/ProfilerContext.js\n+++ b\/src\/devtools\/views\/Profiler\/ProfilerContext.js\n@@ -16,7 +16,7 @@ import {\n import { StoreContext } from '..\/context';\n import Store from '..\/..\/store';\n \n-import type { ImportedProfilingData } from '.\/types';\n+import type { ProfilingDataFrontend } from '.\/types';\n \n export type TabID = 'flame-chart' | 'ranked-chart' | 'interactions';\n \n@@ -31,16 +31,18 @@ type Context = {|\n \/\/ or from the backend itself (after a reload-and-profile action).\n \/\/ It is synced between the backend and frontend via a Store subscription.\n hasProfilingData: boolean,\n+ isProcessingData: boolean,\n isProfiling: boolean,\n+ profilingData: ProfilingDataFrontend | null,\n startProfiling(value: boolean): void,\n stopProfiling(value: boolean): void,\n \n- \/\/ Which renderer and root should profiling data be shown for?\n- \/\/ Often this will correspond to the selected renderer and root in the Elements panel.\n- \/\/ If nothing is selected though, this will default to the first root.\n- rendererID: number | null,\n+ \/\/ Which root should profiling data be shown for?\n+ \/\/ This value should be initialized to either:\n+ \/\/ 1. The selected root in the Components tree (if it has any profiling data) or\n+ \/\/ 2. The first root in the list with profiling data.\n rootID: number | null,\n- rootHasProfilingData: boolean,\n+ setRootID: (id: number) => void,\n \n \/\/ Controls whether commits are filtered by duration.\n \/\/ This value is controlled by a filter toggle UI in the Profiler toolbar.\n@@ -72,8 +74,9 @@ ProfilerContext.displayName = 'ProfilerContext';\n \n type StoreProfilingState = {|\n hasProfilingData: boolean,\n- importedProfilingData: ImportedProfilingData | null,\n+ isProcessingData: boolean,\n isProfiling: boolean,\n+ profilingData: ProfilingDataFrontend | null,\n |};\n \n type Props = {|\n@@ -85,49 +88,66 @@ function ProfilerContextController({ children }: Props) {\n const { selectedElementID } = useContext(TreeStateContext);\n const dispatch = useContext(TreeDispatcherContext);\n \n+ const { profilerStore } = store;\n+\n const subscription = useMemo(\n () => ({\n getCurrentValue: () => ({\n- hasProfilingData: store.hasProfilingData,\n- importedProfilingData: store.importedProfilingData,\n- isProfiling: store.isProfiling,\n+ hasProfilingData: profilerStore.hasProfilingData,\n+ isProcessingData: profilerStore.isProcessingData,\n+ isProfiling: profilerStore.isProfiling,\n+ profilingData: profilerStore.profilingData,\n }),\n subscribe: (callback: Function) => {\n- store.addListener('importedProfilingData', callback);\n- store.addListener('isProfiling', callback);\n+ profilerStore.addListener('profilingData', callback);\n+ profilerStore.addListener('isProcessingData', callback);\n+ profilerStore.addListener('isProfiling', callback);\n return () => {\n- store.removeListener('importedProfilingData', callback);\n- store.removeListener('isProfiling', callback);\n+ profilerStore.removeListener('profilingData', callback);\n+ profilerStore.removeListener('isProcessingData', callback);\n+ profilerStore.removeListener('isProfiling', callback);\n };\n },\n }),\n- [store]\n+ [profilerStore]\n );\n const {\n- isProfiling,\n hasProfilingData,\n- importedProfilingData,\n+ isProcessingData,\n+ isProfiling,\n+ profilingData,\n } = useSubscription(subscription);\n \n- let rendererID = null;\n- let rootID = null;\n- let rootHasProfilingData = false;\n- if (importedProfilingData !== null) {\n- rootHasProfilingData = true;\n- } else if (selectedElementID !== null) {\n- rendererID = store.getRendererIDForElement(selectedElementID);\n- rootID = store.getRootIDForElement(selectedElementID);\n- rootHasProfilingData =\n- rootID === null ? false : store.profilingOperations.has(rootID);\n- } else if (store.roots.length > 0) {\n- \/\/ If no root is selected, assume the first root; many React apps are single root anyway.\n- rootID = store.roots[0];\n- rootHasProfilingData = store.profilingOperations.has(rootID);\n- rendererID = store.getRendererIDForElement(rootID);\n+ const [rootID, setRootID] = useState(null);\n+\n+ const dataForRoots =\n+ profilingData !== null ? profilingData.dataForRoots : null;\n+ if (dataForRoots != null) {\n+ const firstRootID = dataForRoots.keys().next().value || null;\n+\n+ if (rootID === null || !dataForRoots.has(rootID)) {\n+ let selectedElementRootID = null;\n+ if (selectedElementID !== null) {\n+ selectedElementRootID = store.getRootIDForElement(selectedElementID);\n+ }\n+ if (\n+ selectedElementRootID !== null &&\n+ dataForRoots.has(selectedElementRootID)\n+ ) {\n+ setRootID(selectedElementRootID);\n+ } else {\n+ setRootID(firstRootID);\n+ }\n+ }\n }\n \n- const startProfiling = useCallback(() => store.startProfiling(), [store]);\n- const stopProfiling = useCallback(() => store.stopProfiling(), [store]);\n+ const startProfiling = useCallback(\n+ () => store.profilerStore.startProfiling(),\n+ [store]\n+ );\n+ const stopProfiling = useCallback(() => store.profilerStore.stopProfiling(), [\n+ store,\n+ ]);\n \n const [\n isCommitFilterEnabled,\n@@ -187,13 +207,14 @@ function ProfilerContextController({ children }: Props) {\n selectTab,\n \n hasProfilingData,\n+ isProcessingData,\n isProfiling,\n+ profilingData,\n startProfiling,\n stopProfiling,\n \n- rendererID,\n rootID,\n- rootHasProfilingData,\n+ setRootID,\n \n isCommitFilterEnabled,\n setIsCommitFilterEnabled,\n@@ -215,13 +236,14 @@ function ProfilerContextController({ children }: Props) {\n selectTab,\n \n hasProfilingData,\n+ isProcessingData,\n isProfiling,\n+ profilingData,\n startProfiling,\n stopProfiling,\n \n- rendererID,\n rootID,\n- rootHasProfilingData,\n+ setRootID,\n \n isCommitFilterEnabled,\n setIsCommitFilterEnabled,\ndiff --git a\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.js b\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.js\nindex caa01dffbc..eebe91d97e 100644\n--- a\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.js\n+++ b\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.js\n@@ -5,44 +5,52 @@ import { ProfilerContext } from '.\/ProfilerContext';\n import { ModalDialogContext } from '..\/ModalDialog';\n import Button from '..\/Button';\n import ButtonIcon from '..\/ButtonIcon';\n-import { BridgeContext, StoreContext } from '..\/context';\n+import { StoreContext } from '..\/context';\n import {\n- prepareExportedProfilingSummary,\n- prepareImportedProfilingData,\n+ prepareProfilingDataExport,\n+ prepareProfilingDataFrontendFromExport,\n } from '.\/utils';\n+import { downloadFile } from '..\/utils';\n \n import styles from '.\/ProfilingImportExportButtons.css';\n \n+import type { ProfilingDataExport } from '.\/types';\n+\n export default function ProfilingImportExportButtons() {\n- const bridge = useContext(BridgeContext);\n- const { isProfiling, rendererID, rootHasProfilingData, rootID } = useContext(\n- ProfilerContext\n- );\n+ const { isProfiling, profilingData, rootID } = useContext(ProfilerContext);\n const store = useContext(StoreContext);\n+ const { profilerStore } = store;\n \n const inputRef = useRef(null);\n \n const { dispatch: modalDialogDispatch } = useContext(ModalDialogContext);\n \n const downloadData = useCallback(() => {\n- if (rendererID === null || rootID === null) {\n+ if (rootID === null) {\n return;\n }\n \n- const exportedProfilingSummary = prepareExportedProfilingSummary(\n- store.profilingOperations,\n- store.profilingSnapshots,\n- rootID,\n- rendererID\n- );\n- bridge.send('exportProfilingSummary', exportedProfilingSummary);\n- }, [\n- bridge,\n- rendererID,\n- rootID,\n- store.profilingOperations,\n- store.profilingSnapshots,\n- ]);\n+ if (profilingData !== null) {\n+ const profilingDataExport = prepareProfilingDataExport(profilingData);\n+ const date = new Date();\n+ const dateString = date\n+ .toLocaleDateString(undefined, {\n+ year: 'numeric',\n+ month: '2-digit',\n+ day: '2-digit',\n+ })\n+ .replace(\/\\\/\/g, '-');\n+ const timeString = date\n+ .toLocaleTimeString(undefined, {\n+ hour12: false,\n+ })\n+ .replace(\/:\/g, '-');\n+ downloadFile(\n+ `profiling-data.${dateString}.${timeString}.json`,\n+ JSON.stringify(profilingDataExport, null, 2)\n+ );\n+ }\n+ }, [rootID, profilingData]);\n \n const uploadData = useCallback(() => {\n if (inputRef.current !== null) {\n@@ -57,7 +65,12 @@ export default function ProfilingImportExportButtons() {\n fileReader.addEventListener('load', () => {\n try {\n const raw = ((fileReader.result: any): string);\n- store.importedProfilingData = prepareImportedProfilingData(raw);\n+ const profilingDataExport = ((JSON.parse(\n+ raw\n+ ): any): ProfilingDataExport);\n+ profilerStore.profilingData = prepareProfilingDataFrontendFromExport(\n+ profilingDataExport\n+ );\n } catch (error) {\n modalDialogDispatch({\n type: 'SHOW',\n@@ -76,7 +89,7 @@ export default function ProfilingImportExportButtons() {\n \/\/ TODO (profiling) Handle fileReader errors.\n fileReader.readAsText(input.files[0]);\n }\n- }, [modalDialogDispatch, store]);\n+ }, [modalDialogDispatch, profilerStore]);\n \n return (\n \n@@ -95,15 +108,13 @@ export default function ProfilingImportExportButtons() {\n >\n \n <\/Button>\n- {store.supportsFileDownloads && (\n- \n- \n- <\/Button>\n- )}\n+ \n+ \n+ <\/Button>\n <\/Fragment>\n );\n }\ndiff --git a\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js b\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js\nindex 9b53af9dbb..67b38fccbf 100644\n--- a\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js\n+++ b\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js\n@@ -2,8 +2,9 @@\n \n import { ElementTypeForwardRef, ElementTypeMemo } from 'src\/types';\n import { formatDuration } from '.\/utils';\n+import ProfilerStore from 'src\/devtools\/ProfilerStore';\n \n-import type { CommitDetailsFrontend, CommitTreeFrontend } from '.\/types';\n+import type { CommitTree } from '.\/types';\n \n export type ChartNode = {|\n id: number,\n@@ -20,15 +21,19 @@ export type ChartData = {|\n const cachedChartData: Map = new Map();\n \n export function getChartData({\n- commitDetails,\n commitIndex,\n commitTree,\n+ profilerStore,\n+ rootID,\n }: {|\n- commitDetails: CommitDetailsFrontend,\n commitIndex: number,\n- commitTree: CommitTreeFrontend,\n+ commitTree: CommitTree,\n+ profilerStore: ProfilerStore,\n+ rootID: number,\n |}): ChartData {\n- const { actualDurations, rootID, selfDurations } = commitDetails;\n+ const commitDatum = profilerStore.getCommitData(rootID, commitIndex);\n+\n+ const { fiberActualDurations, fiberSelfDurations } = commitDatum;\n const { nodes } = commitTree;\n \n const key = `${rootID}-${commitIndex}`;\n@@ -39,7 +44,7 @@ export function getChartData({\n let maxSelfDuration = 0;\n \n const chartNodes: Array = [];\n- actualDurations.forEach((actualDuration, id) => {\n+ fiberActualDurations.forEach((actualDuration, id) => {\n const node = nodes.get(id);\n \n if (node == null) {\n@@ -52,7 +57,7 @@ export function getChartData({\n if (parentID === 0) {\n return;\n }\n- const selfDuration = selfDurations.get(id) || 0;\n+ const selfDuration = fiberSelfDurations.get(id) || 0;\n maxSelfDuration = Math.max(maxSelfDuration, selfDuration);\n \n const name = displayName || 'Anonymous';\ndiff --git a\/src\/devtools\/views\/Profiler\/RootSelector.css b\/src\/devtools\/views\/Profiler\/RootSelector.css\nnew file mode 100644\nindex 0000000000..ff1a970d46\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/RootSelector.css\n@@ -0,0 +1,3 @@\n+.Spacer {\n+ flex: 1;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/RootSelector.js b\/src\/devtools\/views\/Profiler\/RootSelector.js\nnew file mode 100644\nindex 0000000000..b4e89af824\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/RootSelector.js\n@@ -0,0 +1,42 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useCallback, useContext } from 'react';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+\n+import styles from '.\/RootSelector.css';\n+\n+export default function RootSelector(_: {||}) {\n+ const { profilingData, rootID, setRootID } = useContext(ProfilerContext);\n+\n+ const options = [];\n+ if (profilingData !== null) {\n+ profilingData.dataForRoots.forEach((dataForRoot, rootID) => {\n+ options.push(\n+

dillon1000/react

Files changed