{"patch":"diff --git a\/shells\/browser\/shared\/src\/background.js b\/shells\/browser\/shared\/src\/background.js\nindex da95e315d7..1625f3dfb4 100644\n--- a\/shells\/browser\/shared\/src\/background.js\n+++ b\/shells\/browser\/shared\/src\/background.js\n@@ -110,7 +110,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {\n setIconAndPopup(reactBuildType, sender.tab.id);\n }\n \n- if (request.downloadFile) {\n+ if (request.exportFile) {\n let { contents, filename } = request;\n if (!Array.isArray(contents)) {\n contents = [contents];\ndiff --git a\/shells\/browser\/shared\/src\/main.js b\/shells\/browser\/shared\/src\/main.js\nindex a867972f49..6e8f00a1e0 100644\n--- a\/shells\/browser\/shared\/src\/main.js\n+++ b\/shells\/browser\/shared\/src\/main.js\n@@ -67,9 +67,9 @@ function createPanelIfReactLoaded() {\n localStorage.setItem(SUPPORTS_PROFILING_KEY, 'true');\n chrome.devtools.inspectedWindow.eval('window.location.reload();');\n });\n- bridge.addListener('downloadFile', ({ contents, filename }) => {\n+ bridge.addListener('exportFile', ({ contents, filename }) => {\n chrome.runtime.sendMessage({\n- downloadFile: true,\n+ exportFile: true,\n contents,\n filename,\n });\n@@ -85,7 +85,7 @@ function createPanelIfReactLoaded() {\n }\n \n store = new Store(bridge, {\n- supportsDownloads: true,\n+ supportsFileDownloads: true,\n supportsReloadAndProfile: true,\n supportsProfiling,\n });\ndiff --git a\/src\/backend\/agent.js b\/src\/backend\/agent.js\nindex fc0c388786..ef363dbaae 100644\n--- a\/src\/backend\/agent.js\n+++ b\/src\/backend\/agent.js\n@@ -58,10 +58,7 @@ export default class Agent extends EventEmitter {\n addBridge(bridge: Bridge) {\n this._bridge = bridge;\n \n- bridge.addListener(\n- 'downloadProfilingSummary',\n- this.downloadProfilingSummary\n- );\n+ bridge.addListener('exportProfilingSummary', this.exportProfilingSummary);\n bridge.addListener('getCommitDetails', this.getCommitDetails);\n bridge.addListener('getInteractions', this.getInteractions);\n bridge.addListener('getProfilingStatus', this.getProfilingStatus);\n@@ -99,10 +96,14 @@ export default class Agent extends EventEmitter {\n return null;\n }\n \n- downloadProfilingSummary = ({\n+ exportProfilingSummary = ({\n+ profilingOperations,\n+ profilingSnapshot,\n rendererID,\n rootID,\n }: {\n+ profilingOperations: Array,\n+ profilingSnapshot: Array,\n rendererID: number,\n rootID: number,\n }) => {\n@@ -110,8 +111,17 @@ export default class Agent extends EventEmitter {\n if (renderer == null) {\n console.warn(`Invalid renderer id \"${rendererID}\"`);\n } else {\n- this._bridge.send('downloadFile', {\n- contents: renderer.getProfilingSummaryForDownload(rootID),\n+ const rendererData = renderer.getProfilingDataForDownload(rootID);\n+ this._bridge.send('exportFile', {\n+ contents: JSON.stringify(\n+ {\n+ ...rendererData,\n+ profilingOperations,\n+ profilingSnapshot,\n+ },\n+ null,\n+ 2\n+ ),\n filename: 'profile-data.json',\n });\n }\ndiff --git a\/src\/backend\/renderer.js b\/src\/backend\/renderer.js\nindex 476630717a..6a43c969ef 100644\n--- a\/src\/backend\/renderer.js\n+++ b\/src\/backend\/renderer.js\n@@ -1536,7 +1536,7 @@ export function attach(\n };\n }\n \n- function getProfilingSummaryForDownload(rootID: number): string {\n+ function getProfilingDataForDownload(rootID: number): Object {\n const commitDetails = [];\n const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(\n rootID\n@@ -1546,15 +1546,12 @@ export function attach(\n commitDetails.push(getCommitDetails(rootID, index));\n }\n }\n- return JSON.stringify(\n- {\n- summary: getProfilingSummary(rootID),\n- interactions: getInteractions(rootID),\n- commitDetails,\n- },\n- null,\n- 2\n- );\n+ return {\n+ version: 1,\n+ profilingSummary: getProfilingSummary(rootID),\n+ commitDetails,\n+ interactions: getInteractions(rootID),\n+ };\n }\n \n function getProfilingSummary(rootID: number): ProfilingSummary {\n@@ -1620,7 +1617,7 @@ export function attach(\n getFiberIDFromNative,\n getInteractions,\n getNativeFromReactElement,\n- getProfilingSummaryForDownload,\n+ getProfilingDataForDownload,\n getProfilingSummary,\n handleCommitFiberRoot,\n handleCommitFiberUnmount,\ndiff --git a\/src\/backend\/types.js b\/src\/backend\/types.js\nindex 1384692c19..9e85dac6d2 100644\n--- a\/src\/backend\/types.js\n+++ b\/src\/backend\/types.js\n@@ -89,7 +89,7 @@ export type RendererInterface = {\n findNearestUnfilteredAncestor?: boolean\n ) => number | null,\n getInteractions: (rootID: number) => Interactions,\n- getProfilingSummaryForDownload: (rootID: number) => string,\n+ getProfilingDataForDownload: (rootID: number) => Object,\n getProfilingSummary: (rootID: number) => ProfilingSummary,\n handleCommitFiberRoot: (fiber: Object) => void,\n handleCommitFiberUnmount: (fiber: Object) => void,\ndiff --git a\/src\/devtools\/ProfilingCache.js b\/src\/devtools\/ProfilingCache.js\nindex fa80195470..1699f95f8c 100644\n--- a\/src\/devtools\/ProfilingCache.js\n+++ b\/src\/devtools\/ProfilingCache.js\n@@ -51,8 +51,6 @@ type InteractionsParams = {|\n type GetCommitTreeParams = {|\n commitIndex: number,\n profilingSummary: ProfilingSummaryFrontend,\n- rendererID: number,\n- rootID: number,\n |};\n \n type ProfilingSummaryParams = {|\n@@ -85,13 +83,19 @@ export default class ProfilingCache {\n > = createResource(\n ({ commitIndex, rendererID, rootID }: CommitDetailsParams) => {\n return new Promise(resolve => {\n- if (!this._store.profilingOperations.has(rootID)) {\n- \/\/ If no profiling data was recorded for this root, skip the round trip.\n- resolve({\n- actualDurations: new Map(),\n- interactions: [],\n- });\n- } else {\n+ const importedProfilingData = this._store.importedProfilingData;\n+ if (importedProfilingData !== null) {\n+ const { commitDetails } = (importedProfilingData: any);\n+ if (commitDetails != null && commitIndex < commitDetails.length) {\n+ const response = commitDetails[commitIndex];\n+ this._pendingCommitDetailsMap.set(\n+ `${response.rootID}-${commitIndex}`,\n+ resolve\n+ );\n+ this.onCommitDetails(response);\n+ return;\n+ }\n+ } else if (this._store.profilingOperations.has(rootID)) {\n this._pendingCommitDetailsMap.set(\n `${rootID}-${commitIndex}`,\n resolve\n@@ -101,7 +105,16 @@ export default class ProfilingCache {\n rendererID,\n rootID,\n });\n+ return;\n }\n+\n+ \/\/ If no profiling data was recorded for this root, skip the round trip.\n+ resolve({\n+ rootID,\n+ commitIndex,\n+ actualDurations: new Map(),\n+ interactions: [],\n+ });\n });\n },\n ({ commitIndex, rendererID, rootID }: CommitDetailsParams) =>\n@@ -114,16 +127,25 @@ export default class ProfilingCache {\n > = createResource(\n ({ rendererID, rootID }: InteractionsParams) => {\n return new Promise(resolve => {\n- if (!this._store.profilingOperations.has(rootID)) {\n- \/\/ If no profiling data was recorded for this root, skip the round trip.\n- resolve([]);\n- } else {\n+ const importedProfilingData = this._store.importedProfilingData;\n+ if (importedProfilingData !== null) {\n+ const { interactions } = (importedProfilingData: any);\n+ if (interactions != null) {\n+ this._pendingInteractionsMap.set(interactions.rootID, resolve);\n+ this.onInteractions(interactions);\n+ return;\n+ }\n+ } else if (this._store.profilingOperations.has(rootID)) {\n this._pendingInteractionsMap.set(rootID, resolve);\n this._bridge.send('getInteractions', {\n rendererID,\n rootID,\n });\n+ return;\n }\n+\n+ \/\/ If no profiling data was recorded for this root, skip the round trip.\n+ resolve([]);\n });\n },\n ({ rendererID, rootID }: ProfilingSummaryParams) => rootID\n@@ -135,18 +157,31 @@ export default class ProfilingCache {\n > = createResource(\n ({ rendererID, rootID }: ProfilingSummaryParams) => {\n return new Promise(resolve => {\n- if (!this._store.profilingOperations.has(rootID)) {\n- \/\/ If no profiling data was recorded for this root, skip the round trip.\n- resolve({\n- commitDurations: [],\n- commitTimes: [],\n- initialTreeBaseDurations: new Map(),\n- interactionCount: 0,\n- });\n- } else {\n+ const importedProfilingData = this._store.importedProfilingData;\n+ if (importedProfilingData !== null) {\n+ const { profilingSummary } = (importedProfilingData: any);\n+ if (profilingSummary != null) {\n+ this._pendingProfileSummaryMap.set(\n+ profilingSummary.rootID,\n+ resolve\n+ );\n+ this.onProfileSummary(profilingSummary);\n+ return;\n+ }\n+ } else if (this._store.profilingOperations.has(rootID)) {\n this._pendingProfileSummaryMap.set(rootID, resolve);\n this._bridge.send('getProfilingSummary', { rendererID, rootID });\n+ return;\n }\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@@ -161,17 +196,10 @@ export default class ProfilingCache {\n bridge.addListener('profilingSummary', this.onProfileSummary);\n }\n \n- getCommitTree = ({\n- commitIndex,\n- profilingSummary,\n- rendererID,\n- rootID,\n- }: GetCommitTreeParams) =>\n+ getCommitTree = ({ commitIndex, profilingSummary }: GetCommitTreeParams) =>\n getCommitTree({\n commitIndex,\n profilingSummary,\n- rendererID,\n- rootID,\n store: this._store,\n });\n \n@@ -179,18 +207,15 @@ export default class ProfilingCache {\n commitDetails,\n commitIndex,\n commitTree,\n- rootID,\n }: {|\n commitDetails: CommitDetailsFrontend,\n commitIndex: number,\n commitTree: CommitTreeFrontend,\n- rootID: number,\n |}): FlamegraphChartData =>\n getFlamegraphChartData({\n commitDetails,\n commitIndex,\n commitTree,\n- rootID,\n });\n \n getInteractionsChartData = ({\n@@ -200,30 +225,25 @@ export default class ProfilingCache {\n }: {|\n interactions: Array,\n profilingSummary: ProfilingSummaryFrontend,\n- rootID: number,\n |}): InteractionsChartData =>\n getInteractionsChartData({\n interactions,\n profilingSummary,\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- rootID: number,\n |}): RankedChartData =>\n getRankedChartData({\n commitDetails,\n commitIndex,\n commitTree,\n- rootID,\n });\n \n invalidate() {\n@@ -257,6 +277,8 @@ export default class ProfilingCache {\n }\n \n resolve({\n+ rootID,\n+ commitIndex,\n actualDurations: actualDurationsMap,\n interactions,\n });\n@@ -291,6 +313,7 @@ export default class ProfilingCache {\n }\n \n resolve({\n+ rootID,\n commitDurations,\n commitTimes,\n initialTreeBaseDurations: initialTreeBaseDurationsMap,\ndiff --git a\/src\/devtools\/store.js b\/src\/devtools\/store.js\nindex 75fd3322c8..708f3ee50b 100644\n--- a\/src\/devtools\/store.js\n+++ b\/src\/devtools\/store.js\n@@ -14,6 +14,10 @@ import ProfilingCache from '.\/ProfilingCache';\n \n import type { ElementType } from '.\/types';\n import type { Element } from '.\/views\/Elements\/types';\n+import type {\n+ ImportedProfilingData,\n+ ProfilingSnapshotNode,\n+} from '.\/views\/Profiler\/types';\n import type { Bridge } from '..\/types';\n \n const debug = (methodName, ...args) => {\n@@ -28,18 +32,11 @@ const debug = (methodName, ...args) => {\n };\n \n type Config = {|\n- supportsDownloads?: boolean,\n+ supportsFileDownloads?: boolean,\n supportsReloadAndProfile?: boolean,\n supportsProfiling?: boolean,\n |};\n \n-type ProfilingSnapshotNode = {|\n- id: number,\n- children: Array,\n- displayName: string | null,\n- key: number | string | null,\n-|};\n-\n export type Capabilities = {|\n supportsProfiling: boolean,\n |};\n@@ -55,6 +52,9 @@ export default class Store extends EventEmitter {\n \/\/ Elements are mutable (for now) to avoid excessive cloning during tree updates.\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@@ -92,7 +92,7 @@ export default class Store extends EventEmitter {\n \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- _supportsDownloads: boolean = false;\n+ _supportsFileDownloads: boolean = false;\n _supportsProfiling: boolean = false;\n _supportsReloadAndProfile: boolean = false;\n \n@@ -103,12 +103,12 @@ export default class Store extends EventEmitter {\n \n if (config != null) {\n const {\n- supportsDownloads,\n+ supportsFileDownloads,\n supportsProfiling,\n supportsReloadAndProfile,\n } = config;\n- if (supportsDownloads) {\n- this._supportsDownloads = true;\n+ if (supportsFileDownloads) {\n+ this._supportsFileDownloads = true;\n }\n if (supportsProfiling) {\n this._supportsProfiling = true;\n@@ -132,7 +132,21 @@ export default class Store extends EventEmitter {\n \n \/\/ Profiling data has been recorded for at least one root.\n get hasProfilingData(): boolean {\n- return this._profilingOperations.size > 0;\n+ return (\n+ this._importedProfilingData !== null || this._profilingOperations.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._profilingOperations = new Map();\n+ this._profilingSnapshot = new Map();\n+ this._profilingCache.invalidate();\n+\n+ this.emit('importedProfilingData');\n }\n \n get isProfiling(): boolean {\n@@ -163,8 +177,8 @@ export default class Store extends EventEmitter {\n return this._roots;\n }\n \n- get supportsDownloads(): boolean {\n- return this._supportsDownloads;\n+ get supportsFileDownloads(): boolean {\n+ return this._supportsFileDownloads;\n }\n \n get supportsProfiling(): boolean {\n@@ -176,6 +190,7 @@ export default class Store extends EventEmitter {\n }\n \n clearProfilingData(): void {\n+ this._importedProfilingData = null;\n this._profilingOperations = new Map();\n this._profilingSnapshot = new Map();\n \n@@ -600,6 +615,7 @@ export default class Store extends EventEmitter {\n \n onProfilingStatus = (isProfiling: boolean) => {\n if (isProfiling) {\n+ this._importedProfilingData = null;\n this._profilingOperations = new Map();\n this._profilingSnapshot = new Map();\n this.roots.forEach(this._takeProfilingSnapshotRecursive);\ndiff --git a\/src\/devtools\/views\/ButtonIcon.js b\/src\/devtools\/views\/ButtonIcon.js\nindex fb6a14f522..6d423dca00 100644\n--- a\/src\/devtools\/views\/ButtonIcon.js\n+++ b\/src\/devtools\/views\/ButtonIcon.js\n@@ -9,8 +9,9 @@ export type IconType =\n | 'close'\n | 'copy'\n | 'down'\n- | 'download'\n+ | 'export'\n | 'filter'\n+ | 'import'\n | 'more'\n | 'next'\n | 'previous'\n@@ -44,12 +45,15 @@ export default function ButtonIcon({ type }: Props) {\n case 'down':\n pathData = PATH_DOWN;\n break;\n- case 'download':\n- pathData = PATH_DOWNLOAD;\n+ case 'export':\n+ pathData = PATH_EXPORT;\n break;\n case 'filter':\n pathData = PATH_FILTER;\n break;\n+ case 'import':\n+ pathData = PATH_IMPORT;\n+ break;\n case 'more':\n pathData = PATH_MORE;\n break;\n@@ -120,13 +124,12 @@ const PATH_COPY = `\n \n const PATH_DOWN = 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z';\n \n-const PATH_DOWNLOAD = `\n- M 21.855469 8.460938 L 16.214844 8.460938 L 16.214844 0 L 7.753906 0 L 7.753906 8.460938 L 2.113281 8.460938 L 11.984375\n- 18.332031 Z M 2.113281 21.152344 L 2.113281 23.972656 L 21.855469 23.972656 L 21.855469 21.152344 Z M 2.113281 21.152344\n-`;\n+const PATH_EXPORT = 'M15.82,2.14v7H21l-9,9L3,9.18H8.18v-7ZM3,20.13H21v1.73H3Z';\n \n const PATH_FILTER = 'M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z';\n \n+const PATH_IMPORT = 'M8.18,18.13v-7H3l9-8.95,9,9H15.82v7ZM3,20.13H21v1.73H3Z';\n+\n const PATH_MORE = `\n M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.97.89 1.66.89H22c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9\n 13.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm5 0c-.83\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\nindex a1923303b9..a44bce868b 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\n+++ b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\n@@ -56,15 +56,12 @@ export default function CommitFlamegraphAutoSizer(_: {||}) {\n commitTree = profilingCache.getCommitTree({\n commitIndex: selectedCommitIndex,\n profilingSummary,\n- rendererID: ((rendererID: any): number),\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 \ndiff --git a\/src\/devtools\/views\/Profiler\/CommitRanked.js b\/src\/devtools\/views\/Profiler\/CommitRanked.js\nindex e13f54d81a..238a7cbe3d 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitRanked.js\n+++ b\/src\/devtools\/views\/Profiler\/CommitRanked.js\n@@ -56,15 +56,12 @@ export default function CommitRankedAutoSizer(_: {||}) {\n commitTree = profilingCache.getCommitTree({\n commitIndex: selectedCommitIndex,\n profilingSummary,\n- rendererID: ((rendererID: any): number),\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 \ndiff --git a\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js b\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\nindex 6412aa819c..92e85c62ad 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\n+++ b\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\n@@ -34,16 +34,14 @@ const rootToCommitTreeMap: Map> = new Map();\n export function getCommitTree({\n commitIndex,\n profilingSummary,\n- rendererID,\n- rootID,\n store,\n }: {|\n commitIndex: number,\n profilingSummary: ProfilingSummaryFrontend,\n- rendererID: number,\n- rootID: number,\n store: Store,\n |}): CommitTree {\n+ const { rootID } = profilingSummary;\n+\n if (!rootToCommitTreeMap.has(rootID)) {\n rootToCommitTreeMap.set(rootID, []);\n }\n@@ -56,6 +54,12 @@ export function getCommitTree({\n return commitTrees[commitIndex];\n }\n \n+ const { importedProfilingData } = store;\n+ const profilingOperations =\n+ importedProfilingData != null\n+ ? importedProfilingData.profilingOperations\n+ : store.profilingOperations;\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 \/\/ Otherwise load (or generate) the previous commit and append a mutation to it.\n@@ -72,7 +76,7 @@ export function getCommitTree({\n );\n \n \/\/ Mutate the tree\n- const commitOperations = store.profilingOperations.get(rootID);\n+ const commitOperations = profilingOperations.get(rootID);\n if (commitOperations != null && commitIndex < commitOperations.length) {\n const commitTree = updateTree(\n { nodes, rootID },\n@@ -90,11 +94,9 @@ export function getCommitTree({\n const previousCommitTree = getCommitTree({\n commitIndex: commitIndex - 1,\n profilingSummary,\n- rendererID,\n- rootID,\n store,\n });\n- const commitOperations = store.profilingOperations.get(rootID);\n+ const commitOperations = profilingOperations.get(rootID);\n if (commitOperations != null && commitIndex < commitOperations.length) {\n const commitTree = updateTree(\n previousCommitTree,\n@@ -127,7 +129,12 @@ function recursivelyIniitliazeTree(\n initialTreeBaseDurations: Map,\n store: Store\n ): void {\n- const node = store.profilingSnapshot.get(id);\n+ const { importedProfilingData } = store;\n+ const profilingSnapshot =\n+ importedProfilingData != null\n+ ? importedProfilingData.profilingSnapshot\n+ : store.profilingSnapshot;\n+ const node = profilingSnapshot.get(id);\n if (node != null) {\n nodes.set(id, {\n id,\ndiff --git a\/src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js b\/src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js\nindex 347fa113b3..df183d63d9 100644\n--- a\/src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js\n+++ b\/src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js\n@@ -28,22 +28,19 @@ export function getChartData({\n commitDetails,\n commitIndex,\n commitTree,\n- rootID,\n }: {|\n commitDetails: CommitDetails,\n commitIndex: number,\n commitTree: CommitTree,\n- rootID: number,\n |}): ChartData {\n- const key = `${rootID}-${commitIndex}`;\n+ const { actualDurations, rootID } = commitDetails;\n+ const { nodes } = commitTree;\n \n+ const key = `${rootID}-${commitIndex}`;\n if (cachedChartData.has(key)) {\n return ((cachedChartData.get(key): any): ChartData);\n }\n \n- const { nodes } = commitTree;\n- const { actualDurations } = commitDetails;\n-\n const idToDepthMap: Map = new Map();\n const rows: Array> = [];\n \ndiff --git a\/src\/devtools\/views\/Profiler\/Interactions.js b\/src\/devtools\/views\/Profiler\/Interactions.js\nindex 868fb75a52..6ce175c245 100644\n--- a\/src\/devtools\/views\/Profiler\/Interactions.js\n+++ b\/src\/devtools\/views\/Profiler\/Interactions.js\n@@ -61,7 +61,6 @@ function Interactions({ height, width }: {| height: number, width: number |}) {\n const chartData = profilingCache.getInteractionsChartData({\n interactions,\n profilingSummary,\n- rootID: ((rootID: any): number),\n });\n \n const handleKeyDown = useCallback(\ndiff --git a\/src\/devtools\/views\/Profiler\/InteractionsChartBuilder.js b\/src\/devtools\/views\/Profiler\/InteractionsChartBuilder.js\nindex 17bc9d6610..b1391a6eea 100644\n--- a\/src\/devtools\/views\/Profiler\/InteractionsChartBuilder.js\n+++ b\/src\/devtools\/views\/Profiler\/InteractionsChartBuilder.js\n@@ -12,12 +12,12 @@ const cachedChartData: Map = new Map();\n export function getChartData({\n interactions,\n profilingSummary,\n- rootID,\n }: {|\n interactions: Array,\n profilingSummary: ProfilingSummary,\n- rootID: number,\n |}): ChartData {\n+ const { rootID } = profilingSummary;\n+\n if (cachedChartData.has(rootID)) {\n return ((cachedChartData.get(rootID): any): ChartData);\n }\ndiff --git a\/src\/devtools\/views\/Profiler\/Profiler.css b\/src\/devtools\/views\/Profiler\/Profiler.css\nindex f3718e2e60..346257bc5e 100644\n--- a\/src\/devtools\/views\/Profiler\/Profiler.css\n+++ b\/src\/devtools\/views\/Profiler\/Profiler.css\n@@ -66,8 +66,9 @@\n .VRule {\n height: 20px;\n width: 1px;\n- background-color: var(--color-border);\n- margin: 0 0.25rem;\n+ border-left: 1px solid var(--color-border);\n+ padding-left: 0.25rem;\n+ margin-left: 0.25rem;\n }\n \n .Spacer {\ndiff --git a\/src\/devtools\/views\/Profiler\/Profiler.js b\/src\/devtools\/views\/Profiler\/Profiler.js\nindex 7158e2bf29..49145e47bc 100644\n--- a\/src\/devtools\/views\/Profiler\/Profiler.js\n+++ b\/src\/devtools\/views\/Profiler\/Profiler.js\n@@ -15,7 +15,7 @@ import FilterModal from '.\/FilterModal';\n import Interactions from '.\/Interactions';\n import RecordToggle from '.\/RecordToggle';\n import ReloadAndProfileButton from '.\/ReloadAndProfileButton';\n-import SaveProfilingDataButton from '.\/SaveProfilingDataButton';\n+import ProfilingImportExportButtons from '.\/ProfilingImportExportButtons';\n import SnapshotSelector from '.\/SnapshotSelector';\n import SidebarCommitInfo from '.\/SidebarCommitInfo';\n import SidebarInteractions from '.\/SidebarInteractions';\n@@ -89,7 +89,7 @@ function NonSuspendingProfiler({\n \n \n \n- \n+ \n

\n \n \n \n- \n+ \n

\n ({\n getCurrentValue: () => ({\n hasProfilingData: store.hasProfilingData,\n+ importedProfilingData: store.importedProfilingData,\n isProfiling: store.isProfiling,\n }),\n subscribe: (callback: Function) => {\n+ store.addListener('importedProfilingData', callback);\n store.addListener('isProfiling', callback);\n- return () => store.removeListener('isProfiling', callback);\n+ return () => {\n+ store.removeListener('importedProfilingData', callback);\n+ store.removeListener('isProfiling', callback);\n+ };\n },\n }),\n [store]\n );\n- const { isProfiling, hasProfilingData } = useSubscription<\n- StoreProfilingState,\n- Store\n- >(subscription);\n+ const {\n+ isProfiling,\n+ hasProfilingData,\n+ importedProfilingData,\n+ } = useSubscription(subscription);\n \n let rendererID = null;\n let rootID = null;\n let rootHasProfilingData = false;\n- if (selectedElementID) {\n+ if (importedProfilingData !== null) {\n+ rootHasProfilingData = true;\n+ } else if (selectedElementID) {\n rendererID = store.getRendererIDForElement(\n ((selectedElementID: any): number)\n );\ndiff --git a\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.css b\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.css\nnew file mode 100644\nindex 0000000000..edfe2b3a6c\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.css\n@@ -0,0 +1,18 @@\n+.VRule {\n+ height: 20px;\n+ width: 1px;\n+ border-left: 1px solid var(--color-border);\n+ padding-left: 0.25rem;\n+ margin-left: 0.25rem;\n+}\n+\n+\/**\n+ * https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/File\/Using_files_from_web_applications\n+ *\/\n+.Input {\n+ position: absolute !important;\n+ height: 1px;\n+ width: 1px;\n+ overflow: hidden;\n+ clip: rect(1px, 1px, 1px, 1px);\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.js b\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.js\nnew file mode 100644\nindex 0000000000..b97c2a317c\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.js\n@@ -0,0 +1,107 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useContext, useCallback, useRef } from 'react';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import { BridgeContext, StoreContext } from '..\/context';\n+\n+import styles from '.\/ProfilingImportExportButtons.css';\n+\n+import type { ImportedProfilingData } 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 store = useContext(StoreContext);\n+\n+ const inputRef = useRef(null);\n+\n+ const downloadData = useCallback(() => {\n+ if (rootID === null) {\n+ return;\n+ }\n+\n+ const profilingOperationsForRoot = [];\n+ const operations = store.profilingOperations.get(rootID);\n+ if (operations != null) {\n+ operations.forEach(operations => {\n+ \/\/ Convert typed Array before JSON serialization, or it will be converted to an Object.\n+ profilingOperationsForRoot.push(Array.from(operations));\n+ });\n+ }\n+\n+ const profilingSnapshotForRoot = [];\n+ const queue = [rootID];\n+ while (queue.length) {\n+ const id = queue.pop();\n+ profilingSnapshotForRoot.push([id, store.profilingSnapshot.get(id)]);\n+ }\n+\n+ bridge.send('exportProfilingSummary', {\n+ profilingOperations: [[rootID, profilingOperationsForRoot]],\n+ profilingSnapshot: profilingSnapshotForRoot,\n+ rendererID,\n+ rootID,\n+ });\n+ }, [\n+ bridge,\n+ rendererID,\n+ rootID,\n+ store.profilingOperations,\n+ store.profilingSnapshot,\n+ ]);\n+\n+ const uploadData = useCallback(() => {\n+ if (inputRef.current !== null) {\n+ inputRef.current.click();\n+ }\n+ }, []);\n+\n+ const handleFiles = useCallback(() => {\n+ const input = inputRef.current;\n+ if (input !== null && input.files.length > 0) {\n+ const fileReader = new FileReader();\n+ fileReader.addEventListener('load', () => {\n+ const data = JSON.parse((fileReader.result: any));\n+ data.profilingOperations = new Map(data.profilingOperations);\n+ data.profilingSnapshot = new Map(data.profilingSnapshot);\n+\n+ \/\/ TODO (profiling) Version check; warn if older version.\n+\n+ store.importedProfilingData = ((data: any): ImportedProfilingData);\n+ });\n+ fileReader.readAsText(input.files[0]);\n+ }\n+ }, [store]);\n+\n+ return (\n+ \n+

\n+ \n+ \n+ \n+ <\/Button>\n+ {store.supportsFileDownloads && (\n+ \n+ \n+ <\/Button>\n+ )}\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js b\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js\nindex bf673f05d6..f900a6d3f0 100644\n--- a\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js\n+++ b\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js\n@@ -22,25 +22,23 @@ export function getChartData({\n commitDetails,\n commitIndex,\n commitTree,\n- rootID,\n }: {|\n commitDetails: CommitDetails,\n commitIndex: number,\n commitTree: CommitTree,\n- rootID: number,\n |}): ChartData {\n- const key = `${rootID}-${commitIndex}`;\n+ const { actualDurations, rootID } = commitDetails;\n+ const { nodes } = commitTree;\n \n+ const key = `${rootID}-${commitIndex}`;\n if (cachedChartData.has(key)) {\n return ((cachedChartData.get(key): any): ChartData);\n }\n \n- const { nodes } = commitTree;\n-\n let maxSelfDuration = 0;\n \n const chartNodes: Array = [];\n- commitDetails.actualDurations.forEach((actualDuration, id) => {\n+ actualDurations.forEach((actualDuration, id) => {\n const node = ((nodes.get(id): any): Node);\n \n \/\/ Don't show the root node in this chart.\ndiff --git a\/src\/devtools\/views\/Profiler\/SaveProfilingDataButton.js b\/src\/devtools\/views\/Profiler\/SaveProfilingDataButton.js\ndeleted file mode 100644\nindex 70fe798770..0000000000\n--- a\/src\/devtools\/views\/Profiler\/SaveProfilingDataButton.js\n+++ \/dev\/null\n@@ -1,33 +0,0 @@\n-\/\/ @flow\n-\n-import React, { useContext, useCallback } from 'react';\n-import { ProfilerContext } from '.\/ProfilerContext';\n-import Button from '..\/Button';\n-import ButtonIcon from '..\/ButtonIcon';\n-import { BridgeContext, StoreContext } from '..\/context';\n-\n-export default function SaveProfilingDataButton() {\n- const bridge = useContext(BridgeContext);\n- const { isProfiling, rendererID, rootHasProfilingData, rootID } = useContext(\n- ProfilerContext\n- );\n- const store = useContext(StoreContext);\n-\n- const saveProfiler = useCallback(() => {\n- bridge.send('downloadProfilingSummary', { rendererID, rootID });\n- }, [bridge, rendererID, rootID]);\n-\n- if (!store.supportsDownloads) {\n- return null;\n- }\n-\n- return (\n- \n- \n- <\/Button>\n- );\n-}\ndiff --git a\/src\/devtools\/views\/Profiler\/SidebarInteractions.js b\/src\/devtools\/views\/Profiler\/SidebarInteractions.js\nindex 9159cc8d29..22fb062e68 100644\n--- a\/src\/devtools\/views\/Profiler\/SidebarInteractions.js\n+++ b\/src\/devtools\/views\/Profiler\/SidebarInteractions.js\n@@ -40,7 +40,6 @@ export default function SidebarInteractions(_: Props) {\n const { maxCommitDuration } = profilingCache.getInteractionsChartData({\n interactions,\n profilingSummary,\n- rootID: ((rootID: any): number),\n });\n \n const { commitDurations, commitTimes } = profilingSummary;\ndiff --git a\/src\/devtools\/views\/Profiler\/SnapshotCommitList.css b\/src\/devtools\/views\/Profiler\/SnapshotCommitList.css\nindex 7324c034b1..53faae5c38 100644\n--- a\/src\/devtools\/views\/Profiler\/SnapshotCommitList.css\n+++ b\/src\/devtools\/views\/Profiler\/SnapshotCommitList.css\n@@ -5,5 +5,5 @@\n * There are two alternative navigation mechanisms (arrow keys and arrow buttons).\n * If necessary, we could also expand the click-and-drag mechanism to scroll.\n *\/\n- overflow-x: hidden;\n+ overflow-x: hidden !important;\n }\ndiff --git a\/src\/devtools\/views\/Profiler\/SnapshotSelector.js b\/src\/devtools\/views\/Profiler\/SnapshotSelector.js\nindex 5502218ddf..537b715517 100644\n--- a\/src\/devtools\/views\/Profiler\/SnapshotSelector.js\n+++ b\/src\/devtools\/views\/Profiler\/SnapshotSelector.js\n@@ -112,7 +112,7 @@ export default function SnapshotSelector(_: Props) {\n [viewNextCommit, viewPrevCommit]\n );\n \n- if (rendererID === null || rootID === null) {\n+ if (commitDurations.length === 0) {\n return null;\n }\n \ndiff --git a\/src\/devtools\/views\/Profiler\/types.js b\/src\/devtools\/views\/Profiler\/types.js\nindex 6efa951bd1..fc7d22e770 100644\n--- a\/src\/devtools\/views\/Profiler\/types.js\n+++ b\/src\/devtools\/views\/Profiler\/types.js\n@@ -28,11 +28,15 @@ export type InteractionWithCommits = {|\n export type Interactions = Array;\n \n export type CommitDetails = {|\n+ rootID: number,\n+ commitIndex: number,\n actualDurations: Map,\n interactions: Array,\n |};\n \n export type ProfilingSummary = {|\n+ rootID: number,\n+\n \/\/ Commit durations\n commitDurations: Array,\n \n@@ -44,3 +48,19 @@ export type ProfilingSummary = {|\n \n interactionCount: number,\n |};\n+\n+export type ProfilingSnapshotNode = {|\n+ id: number,\n+ children: Array,\n+ displayName: string | null,\n+ key: number | string | null,\n+|};\n+\n+export type ImportedProfilingData = {|\n+ version: number,\n+ profilingOperations: Map>,\n+ profilingSnapshot: Map,\n+ commitDetails: CommitDetails,\n+ interactions: Interactions,\n+ profilingSummary: ProfilingSummary,\n+|};\n","commit":{"authoredAt":"2019-03-31T17:02:30-07:00","subject":"Import\/export feature","authorName":"Brian Vaughn","revision":"bfb152f1608918020ae8356f682b37a362d3f045","shortRevision":"bfb152f160","authorEmail":"bvaughn@fb.com"},"files":[{"status":"M","path":"shells\/browser\/shared\/src\/background.js"},{"status":"M","path":"shells\/browser\/shared\/src\/main.js"},{"status":"M","path":"src\/backend\/agent.js"},{"status":"M","path":"src\/backend\/renderer.js"},{"status":"M","path":"src\/backend\/types.js"},{"status":"M","path":"src\/devtools\/ProfilingCache.js"},{"status":"M","path":"src\/devtools\/store.js"},{"status":"M","path":"src\/devtools\/views\/ButtonIcon.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/CommitFlamegraph.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/CommitRanked.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/CommitTreeBuilder.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/Interactions.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/InteractionsChartBuilder.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/Profiler.css"},{"status":"M","path":"src\/devtools\/views\/Profiler\/Profiler.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/ProfilerContext.js"},{"status":"A","path":"src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.css"},{"status":"A","path":"src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/RankedChartBuilder.js"},{"status":"D","path":"src\/devtools\/views\/Profiler\/SaveProfilingDataButton.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/SidebarInteractions.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/SnapshotCommitList.css"},{"status":"M","path":"src\/devtools\/views\/Profiler\/SnapshotSelector.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/types.js"}],"parents":["e5400f76f04a58714b41a70b6148104fb8d17cf4"],"body":""}

dillon1000/react

Files changed