{"patch":"diff --git a\/flow.js b\/flow.js\nindex fbbc999554..740d69f34b 100644\n--- a\/flow.js\n+++ b\/flow.js\n@@ -1,11 +1,17 @@\n \/\/ @flow\n \n declare module 'events' {\n- declare class EventEmitter {\n- addListener: (type: string, fn: Function) => void;\n- emit: (type: string, data: any) => void;\n- removeListener: (type: string, fn: Function) => void;\n- removeAllListeners: (type?: string) => void;\n+ declare class EventEmitter {\n+ addListener>(\n+ event: Event,\n+ listener: (...$ElementType) => any\n+ ): void;\n+ emit: >(\n+ event: Event,\n+ ...$ElementType\n+ ) => void;\n+ removeListener(event: $Keys, listener: Function): void;\n+ removeAllListeners(event?: $Keys): void;\n }\n \n declare export default typeof EventEmitter;\ndiff --git a\/src\/__tests__\/__snapshots__\/profilingCache-test.js.snap b\/src\/__tests__\/__snapshots__\/profilingCache-test.js.snap\nindex f9901da82a..85291acdac 100644\n--- a\/src\/__tests__\/__snapshots__\/profilingCache-test.js.snap\n+++ b\/src\/__tests__\/__snapshots__\/profilingCache-test.js.snap\n@@ -2,6 +2,29 @@\n \n exports[`ProfilingCache should calculate a self duration based on actual children (not filtered children): CommitDetails with filtered self durations 1`] = `\n Object {\n+ \"changeDescriptions\": Map {\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 3 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 5 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ },\n \"duration\": 16,\n \"fiberActualDurations\": Map {\n 1 => 16,\n@@ -24,6 +47,22 @@ Object {\n \n exports[`ProfilingCache should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 1`] = `\n Object {\n+ \"changeDescriptions\": Map {\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ },\n \"duration\": 15,\n \"fiberActualDurations\": Map {\n 1 => 15,\n@@ -46,6 +85,15 @@ Object {\n \n exports[`ProfilingCache should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 2`] = `\n Object {\n+ \"changeDescriptions\": Map {\n+ 5 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ },\n \"duration\": 3,\n \"fiberActualDurations\": Map {\n 5 => 3,\n@@ -64,6 +112,36 @@ Object {\n \n exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 0 1`] = `\n Object {\n+ \"changeDescriptions\": Map {\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 3 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 5 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ },\n \"duration\": 12,\n \"fiberActualDurations\": Map {\n 1 => 12,\n@@ -88,6 +166,38 @@ Object {\n \n exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 1 1`] = `\n Object {\n+ \"changeDescriptions\": Map {\n+ 3 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 6 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ },\n \"duration\": 13,\n \"fiberActualDurations\": Map {\n 3 => 0,\n@@ -112,6 +222,24 @@ Object {\n \n exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 2 1`] = `\n Object {\n+ \"changeDescriptions\": Map {\n+ 3 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ },\n \"duration\": 10,\n \"fiberActualDurations\": Map {\n 3 => 0,\n@@ -132,6 +260,17 @@ Object {\n \n exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 3 1`] = `\n Object {\n+ \"changeDescriptions\": Map {\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ },\n \"duration\": 10,\n \"fiberActualDurations\": Map {\n 2 => 10,\n@@ -154,6 +293,48 @@ Object {\n Object {\n \"commitData\": Array [\n Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n \"duration\": 12,\n \"fiberActualDurations\": Array [\n Array [\n@@ -205,6 +386,50 @@ Object {\n \"timestamp\": 12,\n },\n Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 6,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n \"duration\": 13,\n \"fiberActualDurations\": Array [\n Array [\n@@ -256,6 +481,30 @@ Object {\n \"timestamp\": 25,\n },\n Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n \"duration\": 10,\n \"fiberActualDurations\": Array [\n Array [\n@@ -291,6 +540,20 @@ Object {\n \"timestamp\": 35,\n },\n Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n \"duration\": 10,\n \"fiberActualDurations\": Array [\n Array [\n@@ -507,6 +770,38 @@ Object {\n Object {\n \"commitData\": Array [\n Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n \"duration\": 11,\n \"fiberActualDurations\": Array [\n Array [\n@@ -550,6 +845,40 @@ Object {\n \"timestamp\": 11,\n },\n Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n \"duration\": 11,\n \"fiberActualDurations\": Array [\n Array [\n@@ -593,6 +922,50 @@ Object {\n \"timestamp\": 22,\n },\n Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 6,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n \"duration\": 13,\n \"fiberActualDurations\": Array [\n Array [\n@@ -791,6 +1164,38 @@ exports[`ProfilingCache should collect data for each root (including ones added\n Object {\n \"commitData\": Array [\n Object {\n+ \"changeDescriptions\": Map {\n+ 3 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 10 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ },\n \"duration\": 13,\n \"fiberActualDurations\": Map {\n 3 => 0,\n@@ -812,6 +1217,24 @@ Object {\n \"timestamp\": 13,\n },\n Object {\n+ \"changeDescriptions\": Map {\n+ 3 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ },\n \"duration\": 10,\n \"fiberActualDurations\": Map {\n 3 => 0,\n@@ -829,6 +1252,17 @@ Object {\n \"timestamp\": 34,\n },\n Object {\n+ \"changeDescriptions\": Map {\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ },\n \"duration\": 10,\n \"fiberActualDurations\": Map {\n 2 => 10,\n@@ -971,6 +1405,29 @@ exports[`ProfilingCache should collect data for each root (including ones added\n Object {\n \"commitData\": Array [\n Object {\n+ \"changeDescriptions\": Map {\n+ 12 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 13 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 14 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ },\n \"duration\": 11,\n \"fiberActualDurations\": Map {\n 11 => 11,\n@@ -1063,6 +1520,7 @@ exports[`ProfilingCache should collect data for each root (including ones added\n Object {\n \"commitData\": Array [\n Object {\n+ \"changeDescriptions\": Map {},\n \"duration\": 0,\n \"fiberActualDurations\": Map {},\n \"fiberSelfDurations\": Map {},\n@@ -1139,6 +1597,50 @@ Object {\n Object {\n \"commitData\": Array [\n Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 10,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n \"duration\": 13,\n \"fiberActualDurations\": Array [\n Array [\n@@ -1190,6 +1692,30 @@ Object {\n \"timestamp\": 13,\n },\n Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n \"duration\": 10,\n \"fiberActualDurations\": Array [\n Array [\n@@ -1225,6 +1751,20 @@ Object {\n \"timestamp\": 34,\n },\n Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n \"duration\": 10,\n \"fiberActualDurations\": Array [\n Array [\n@@ -1406,6 +1946,38 @@ Object {\n Object {\n \"commitData\": Array [\n Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 12,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 13,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 14,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n \"duration\": 11,\n \"fiberActualDurations\": Array [\n Array [\n@@ -1519,6 +2091,7 @@ Object {\n Object {\n \"commitData\": Array [\n Object {\n+ \"changeDescriptions\": Array [],\n \"duration\": 0,\n \"fiberActualDurations\": Array [],\n \"fiberSelfDurations\": Array [],\n@@ -1616,74 +2189,1300 @@ Object {\n }\n `;\n \n-exports[`ProfilingCache should report every traced interaction: Interactions 1`] = `\n-Array [\n- Object {\n- \"__count\": 1,\n- \"id\": 0,\n- \"name\": \"mount: one child\",\n- \"timestamp\": 0,\n+exports[`ProfilingCache should record changed props\/state\/context\/hooks: CommitDetails commitIndex: 0 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 5 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 6 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 7 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n },\n- Object {\n- \"__count\": 0,\n- \"id\": 1,\n- \"name\": \"update: two children\",\n- \"timestamp\": 11,\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Map {\n+ 1 => 0,\n+ 2 => 0,\n+ 3 => 0,\n+ 4 => 0,\n+ 5 => 0,\n+ 6 => 0,\n+ 7 => 0,\n },\n-]\n+ \"fiberSelfDurations\": Map {\n+ 1 => 0,\n+ 2 => 0,\n+ 3 => 0,\n+ 4 => 0,\n+ 5 => 0,\n+ 6 => 0,\n+ 7 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"screenshot\": null,\n+ \"timestamp\": 0,\n+}\n `;\n \n-exports[`ProfilingCache should report every traced interaction: imported data 1`] = `\n+exports[`ProfilingCache should record changed props\/state\/context\/hooks: CommitDetails commitIndex: 1 1`] = `\n Object {\n- \"dataForRoots\": Array [\n- Object {\n- \"commitData\": Array [\n- Object {\n- \"duration\": 11,\n- \"fiberActualDurations\": Array [\n- Array [\n- 1,\n- 11,\n- ],\n- Array [\n- 2,\n- 11,\n- ],\n- Array [\n- 3,\n- 0,\n- ],\n- Array [\n- 4,\n- 1,\n- ],\n- ],\n- \"fiberSelfDurations\": Array [\n- Array [\n- 1,\n- 0,\n- ],\n- Array [\n- 2,\n- 10,\n- ],\n- Array [\n- 3,\n- 0,\n- ],\n- Array [\n- 4,\n- 1,\n- ],\n- ],\n- \"interactionIDs\": Array [\n- 0,\n- ],\n- \"priorityLevel\": \"Immediate\",\n- \"screenshot\": null,\n- \"timestamp\": 11,\n- },\n- Object {\n+ \"changeDescriptions\": Map {\n+ 5 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": true,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": true,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 7 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": true,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ 6 => Object {\n+ \"context\": Array [\n+ \"count\",\n+ ],\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": Array [\n+ \"count\",\n+ ],\n+ },\n+ },\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Map {\n+ 5 => 0,\n+ 4 => 0,\n+ 7 => 0,\n+ 6 => 0,\n+ 3 => 0,\n+ 2 => 0,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 5 => 0,\n+ 4 => 0,\n+ 7 => 0,\n+ 6 => 0,\n+ 3 => 0,\n+ 2 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"screenshot\": null,\n+ \"timestamp\": 0,\n+}\n+`;\n+\n+exports[`ProfilingCache should record changed props\/state\/context\/hooks: CommitDetails commitIndex: 2 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 5 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": false,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 7 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 6 => Object {\n+ \"context\": Array [],\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"foo\",\n+ ],\n+ \"state\": Array [],\n+ },\n+ },\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Map {\n+ 5 => 0,\n+ 4 => 0,\n+ 7 => 0,\n+ 6 => 0,\n+ 3 => 0,\n+ 2 => 0,\n+ 1 => 0,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 5 => 0,\n+ 4 => 0,\n+ 7 => 0,\n+ 6 => 0,\n+ 3 => 0,\n+ 2 => 0,\n+ 1 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"screenshot\": null,\n+ \"timestamp\": 0,\n+}\n+`;\n+\n+exports[`ProfilingCache should record changed props\/state\/context\/hooks: CommitDetails commitIndex: 3 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 5 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": false,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 7 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 6 => Object {\n+ \"context\": Array [],\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"foo\",\n+ \"bar\",\n+ ],\n+ \"state\": Array [],\n+ },\n+ },\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Map {\n+ 5 => 0,\n+ 4 => 0,\n+ 7 => 0,\n+ 6 => 0,\n+ 3 => 0,\n+ 2 => 0,\n+ 1 => 0,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 5 => 0,\n+ 4 => 0,\n+ 7 => 0,\n+ 6 => 0,\n+ 3 => 0,\n+ 2 => 0,\n+ 1 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"screenshot\": null,\n+ \"timestamp\": 0,\n+}\n+`;\n+\n+exports[`ProfilingCache should record changed props\/state\/context\/hooks: CommitDetails commitIndex: 4 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 5 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": false,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 7 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 6 => Object {\n+ \"context\": Array [],\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"bar\",\n+ ],\n+ \"state\": Array [],\n+ },\n+ },\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Map {\n+ 5 => 0,\n+ 4 => 0,\n+ 7 => 0,\n+ 6 => 0,\n+ 3 => 0,\n+ 2 => 0,\n+ 1 => 0,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 5 => 0,\n+ 4 => 0,\n+ 7 => 0,\n+ 6 => 0,\n+ 3 => 0,\n+ 2 => 0,\n+ 1 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"screenshot\": null,\n+ \"timestamp\": 0,\n+}\n+`;\n+\n+exports[`ProfilingCache should record changed props\/state\/context\/hooks: imported data 1`] = `\n+Object {\n+ \"dataForRoots\": Array [\n+ Object {\n+ \"commitData\": Array [\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 6,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 7,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"screenshot\": null,\n+ \"timestamp\": 0,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": true,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": true,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 7,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": true,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 6,\n+ Object {\n+ \"context\": Array [\n+ \"count\",\n+ ],\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": Array [\n+ \"count\",\n+ ],\n+ },\n+ ],\n+ ],\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"screenshot\": null,\n+ \"timestamp\": 0,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": false,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 7,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 6,\n+ Object {\n+ \"context\": Array [],\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"foo\",\n+ ],\n+ \"state\": Array [],\n+ },\n+ ],\n+ ],\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"screenshot\": null,\n+ \"timestamp\": 0,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": false,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 7,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 6,\n+ Object {\n+ \"context\": Array [],\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"foo\",\n+ \"bar\",\n+ ],\n+ \"state\": Array [],\n+ },\n+ ],\n+ ],\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"screenshot\": null,\n+ \"timestamp\": 0,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": false,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 7,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 6,\n+ Object {\n+ \"context\": Array [],\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"bar\",\n+ ],\n+ \"state\": Array [],\n+ },\n+ ],\n+ ],\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"screenshot\": null,\n+ \"timestamp\": 0,\n+ },\n+ ],\n+ \"displayName\": \"LegacyContextProvider\",\n+ \"initialTreeBaseDurations\": Array [],\n+ \"interactionCommits\": Array [],\n+ \"interactions\": Array [],\n+ \"operations\": Array [\n+ Array [\n+ 1,\n+ 1,\n+ 110,\n+ 21,\n+ 76,\n+ 101,\n+ 103,\n+ 97,\n+ 99,\n+ 121,\n+ 67,\n+ 111,\n+ 110,\n+ 116,\n+ 101,\n+ 120,\n+ 116,\n+ 80,\n+ 114,\n+ 111,\n+ 118,\n+ 105,\n+ 100,\n+ 101,\n+ 114,\n+ 16,\n+ 67,\n+ 111,\n+ 110,\n+ 116,\n+ 101,\n+ 120,\n+ 116,\n+ 46,\n+ 80,\n+ 114,\n+ 111,\n+ 118,\n+ 105,\n+ 100,\n+ 101,\n+ 114,\n+ 21,\n+ 77,\n+ 111,\n+ 100,\n+ 101,\n+ 114,\n+ 110,\n+ 67,\n+ 111,\n+ 110,\n+ 116,\n+ 101,\n+ 120,\n+ 116,\n+ 67,\n+ 111,\n+ 110,\n+ 115,\n+ 117,\n+ 109,\n+ 101,\n+ 114,\n+ 26,\n+ 70,\n+ 117,\n+ 110,\n+ 99,\n+ 116,\n+ 105,\n+ 111,\n+ 110,\n+ 67,\n+ 111,\n+ 109,\n+ 112,\n+ 111,\n+ 110,\n+ 101,\n+ 110,\n+ 116,\n+ 87,\n+ 105,\n+ 116,\n+ 104,\n+ 72,\n+ 111,\n+ 111,\n+ 107,\n+ 115,\n+ 21,\n+ 76,\n+ 101,\n+ 103,\n+ 97,\n+ 99,\n+ 121,\n+ 67,\n+ 111,\n+ 110,\n+ 116,\n+ 101,\n+ 120,\n+ 116,\n+ 67,\n+ 111,\n+ 110,\n+ 115,\n+ 117,\n+ 109,\n+ 101,\n+ 114,\n+ 1,\n+ 1,\n+ 11,\n+ 1,\n+ 1,\n+ 1,\n+ 2,\n+ 1,\n+ 1,\n+ 0,\n+ 1,\n+ 0,\n+ 4,\n+ 2,\n+ 0,\n+ 1,\n+ 3,\n+ 2,\n+ 2,\n+ 2,\n+ 2,\n+ 0,\n+ 4,\n+ 3,\n+ 0,\n+ 1,\n+ 4,\n+ 1,\n+ 3,\n+ 2,\n+ 3,\n+ 0,\n+ 4,\n+ 4,\n+ 0,\n+ 1,\n+ 5,\n+ 5,\n+ 4,\n+ 4,\n+ 4,\n+ 0,\n+ 4,\n+ 5,\n+ 0,\n+ 1,\n+ 6,\n+ 1,\n+ 3,\n+ 2,\n+ 5,\n+ 0,\n+ 4,\n+ 6,\n+ 0,\n+ 1,\n+ 7,\n+ 5,\n+ 6,\n+ 6,\n+ 4,\n+ 0,\n+ 4,\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"rootID\": 1,\n+ \"snapshots\": Array [],\n+ },\n+ ],\n+ \"version\": 4,\n+}\n+`;\n+\n+exports[`ProfilingCache should report every traced interaction: Interactions 1`] = `\n+Array [\n+ Object {\n+ \"__count\": 1,\n+ \"id\": 0,\n+ \"name\": \"mount: one child\",\n+ \"timestamp\": 0,\n+ },\n+ Object {\n+ \"__count\": 0,\n+ \"id\": 1,\n+ \"name\": \"update: two children\",\n+ \"timestamp\": 11,\n+ },\n+]\n+`;\n+\n+exports[`ProfilingCache should report every traced interaction: imported data 1`] = `\n+Object {\n+ \"dataForRoots\": Array [\n+ Object {\n+ \"commitData\": Array [\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 11,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 1,\n+ 11,\n+ ],\n+ Array [\n+ 2,\n+ 11,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 1,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 1,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [\n+ 0,\n+ ],\n+ \"priorityLevel\": \"Immediate\",\n+ \"screenshot\": null,\n+ \"timestamp\": 11,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n \"duration\": 11,\n \"fiberActualDurations\": Array [\n Array [\ndiff --git a\/src\/__tests__\/profilerContext-test.js b\/src\/__tests__\/profilerContext-test.js\nindex 3d3a68f591..6857ddb407 100644\n--- a\/src\/__tests__\/profilerContext-test.js\n+++ b\/src\/__tests__\/profilerContext-test.js\n@@ -29,6 +29,7 @@ describe('ProfilerContext', () => {\n bridge = global.bridge;\n store = global.store;\n store.collapseNodesByDefault = false;\n+ store.recordChangeDescriptions = true;\n \n React = require('react');\n ReactDOM = require('react-dom');\ndiff --git a\/src\/__tests__\/profilerStore-test.js b\/src\/__tests__\/profilerStore-test.js\nindex f6ffcfe783..0f4074f165 100644\n--- a\/src\/__tests__\/profilerStore-test.js\n+++ b\/src\/__tests__\/profilerStore-test.js\n@@ -14,6 +14,7 @@ describe('ProfilerStore', () => {\n \n store = global.store;\n store.collapseNodesByDefault = false;\n+ store.recordChangeDescriptions = true;\n \n React = require('react');\n ReactDOM = require('react-dom');\ndiff --git a\/src\/__tests__\/profilingCache-test.js b\/src\/__tests__\/profilingCache-test.js\nindex c93d347ea8..4e1688a778 100644\n--- a\/src\/__tests__\/profilingCache-test.js\n+++ b\/src\/__tests__\/profilingCache-test.js\n@@ -5,6 +5,7 @@ import type Bridge from 'src\/bridge';\n import type Store from 'src\/devtools\/store';\n \n describe('ProfilingCache', () => {\n+ let PropTypes;\n let React;\n let ReactDOM;\n let Scheduler;\n@@ -21,7 +22,9 @@ describe('ProfilingCache', () => {\n bridge = global.bridge;\n store = global.store;\n store.collapseNodesByDefault = false;\n+ store.recordChangeDescriptions = true;\n \n+ PropTypes = require('prop-types');\n React = require('react');\n ReactDOM = require('react-dom');\n Scheduler = require('scheduler');\n@@ -187,6 +190,117 @@ describe('ProfilingCache', () => {\n }\n });\n \n+ it('should record changed props\/state\/context\/hooks', () => {\n+ let instance = null;\n+\n+ const ModernContext = React.createContext(0);\n+\n+ class LegacyContextProvider extends React.Component<\n+ any,\n+ {| count: number |}\n+ > {\n+ static childContextTypes = {\n+ count: PropTypes.number,\n+ };\n+ state = { count: 0 };\n+ getChildContext() {\n+ return this.state;\n+ }\n+ render() {\n+ instance = this;\n+ return (\n+ \n+ \n+ \n+ \n+ <\/React.Fragment>\n+ <\/ModernContext.Provider>\n+ );\n+ }\n+ }\n+\n+ const FunctionComponentWithHooks = ({ count }) => {\n+ React.useMemo(() => count, [count]);\n+ return null;\n+ };\n+\n+ class ModernContextConsumer extends React.Component {\n+ static contextType = ModernContext;\n+ render() {\n+ return ;\n+ }\n+ }\n+\n+ class LegacyContextConsumer extends React.Component {\n+ static contextTypes = {\n+ count: PropTypes.number,\n+ };\n+ render() {\n+ return ;\n+ }\n+ }\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() => ReactDOM.render(, container));\n+ expect(instance).not.toBeNull();\n+ utils.act(() => (instance: any).setState({ count: 1 }));\n+ utils.act(() =>\n+ ReactDOM.render(, container)\n+ );\n+ utils.act(() =>\n+ ReactDOM.render(, container)\n+ );\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 < 5; commitIndex++) {\n+ utils.act(() => {\n+ TestRenderer.create(\n+ \n+ );\n+ });\n+ }\n+\n+ expect(allCommitData).toHaveLength(5);\n+\n+ utils.exportImportHelper(bridge, store);\n+\n+ for (let commitIndex = 0; commitIndex < 5; 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 \ndiff --git a\/src\/__tests__\/profilingCharts-test.js b\/src\/__tests__\/profilingCharts-test.js\nindex d83f8b5a0f..9cb6d25d6f 100644\n--- a\/src\/__tests__\/profilingCharts-test.js\n+++ b\/src\/__tests__\/profilingCharts-test.js\n@@ -18,6 +18,7 @@ describe('profiling charts', () => {\n \n store = global.store;\n store.collapseNodesByDefault = false;\n+ store.recordChangeDescriptions = true;\n \n React = require('react');\n ReactDOM = require('react-dom');\ndiff --git a\/src\/__tests__\/profilingCommitTreeBuilder-test.js b\/src\/__tests__\/profilingCommitTreeBuilder-test.js\nindex e6c98c1d5e..68d42961ea 100644\n--- a\/src\/__tests__\/profilingCommitTreeBuilder-test.js\n+++ b\/src\/__tests__\/profilingCommitTreeBuilder-test.js\n@@ -17,6 +17,7 @@ describe('commit tree', () => {\n \n store = global.store;\n store.collapseNodesByDefault = false;\n+ store.recordChangeDescriptions = true;\n \n React = require('react');\n ReactDOM = require('react-dom');\ndiff --git a\/src\/__tests__\/storeComponentFilters-test.js b\/src\/__tests__\/storeComponentFilters-test.js\nindex 6627912b8d..16b028abcb 100644\n--- a\/src\/__tests__\/storeComponentFilters-test.js\n+++ b\/src\/__tests__\/storeComponentFilters-test.js\n@@ -21,6 +21,7 @@ describe('Store component filters', () => {\n store = global.store;\n store.collapseNodesByDefault = false;\n store.componentFilters = [];\n+ store.recordChangeDescriptions = true;\n \n React = require('react');\n ReactDOM = require('react-dom');\ndiff --git a\/src\/backend\/agent.js b\/src\/backend\/agent.js\nindex 4c1bf1b4c9..d8dcc15862 100644\n--- a\/src\/backend\/agent.js\n+++ b\/src\/backend\/agent.js\n@@ -3,9 +3,11 @@\n import EventEmitter from 'events';\n import memoize from 'memoize-one';\n import throttle from 'lodash.throttle';\n+import Bridge from 'src\/bridge';\n import {\n SESSION_STORAGE_LAST_SELECTION_KEY,\n SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,\n+ SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,\n __DEBUG__,\n } from '..\/constants';\n import {\n@@ -22,7 +24,7 @@ import type {\n RendererID,\n RendererInterface,\n } from '.\/types';\n-import type { Bridge, ComponentFilter } from '..\/types';\n+import type { ComponentFilter } from '..\/types';\n \n const debug = (methodName, ...args) => {\n if (__DEBUG__) {\n@@ -66,9 +68,12 @@ type PersistedSelection = {|\n path: Array,\n |};\n \n-export default class Agent extends EventEmitter {\n+export default class Agent extends EventEmitter<{|\n+ shutdown: [],\n+|}> {\n _bridge: Bridge;\n _isProfiling: boolean = false;\n+ _recordChangeDescriptions: boolean = false;\n _rendererInterfaces: { [key: RendererID]: RendererInterface } = {};\n _persistedSelection: PersistedSelection | null = null;\n _persistedSelectionMatch: PathMatch | null = null;\n@@ -79,8 +84,13 @@ export default class Agent extends EventEmitter {\n if (\n sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true'\n ) {\n+ this._recordChangeDescriptions =\n+ sessionStorageGetItem(\n+ SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY\n+ ) === 'true';\n this._isProfiling = true;\n \n+ sessionStorageRemoveItem(SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY);\n sessionStorageRemoveItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY);\n }\n \n@@ -250,8 +260,12 @@ export default class Agent extends EventEmitter {\n }\n };\n \n- reloadAndProfile = () => {\n+ reloadAndProfile = (recordChangeDescriptions: boolean) => {\n sessionStorageSetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY, 'true');\n+ sessionStorageSetItem(\n+ SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,\n+ recordChangeDescriptions ? 'true' : 'false'\n+ );\n \n \/\/ This code path should only be hit if the shell has explicitly told the Store that it supports profiling.\n \/\/ In that case, the shell must also listen for this specific message to know when it needs to reload the app.\n@@ -262,9 +276,11 @@ export default class Agent extends EventEmitter {\n screenshotCaptured = ({\n commitIndex,\n dataURL,\n+ rootID,\n }: {|\n commitIndex: number,\n dataURL: string,\n+ rootID: number,\n |}) => {\n this._bridge.send('screenshotCaptured', { commitIndex, dataURL });\n };\n@@ -358,7 +374,7 @@ export default class Agent extends EventEmitter {\n this._rendererInterfaces[rendererID] = rendererInterface;\n \n if (this._isProfiling) {\n- rendererInterface.startProfiling();\n+ rendererInterface.startProfiling(this._recordChangeDescriptions);\n }\n \n \/\/ When the renderer is attached, we need to tell it whether\n@@ -397,13 +413,14 @@ export default class Agent extends EventEmitter {\n window.addEventListener('pointerup', this._onPointerUp, true);\n };\n \n- startProfiling = () => {\n+ startProfiling = (recordChangeDescriptions: boolean) => {\n+ this._recordChangeDescriptions = recordChangeDescriptions;\n this._isProfiling = true;\n for (let rendererID in this._rendererInterfaces) {\n const renderer = ((this._rendererInterfaces[\n (rendererID: any)\n ]: any): RendererInterface);\n- renderer.startProfiling();\n+ renderer.startProfiling(recordChangeDescriptions);\n }\n this._bridge.send('profilingStatus', this._isProfiling);\n };\n@@ -422,6 +439,7 @@ export default class Agent extends EventEmitter {\n \n stopProfiling = () => {\n this._isProfiling = false;\n+ this._recordChangeDescriptions = false;\n for (let rendererID in this._rendererInterfaces) {\n const renderer = ((this._rendererInterfaces[\n (rendererID: any)\ndiff --git a\/src\/backend\/renderer.js b\/src\/backend\/renderer.js\nindex df28dd45fb..79ed649c89 100644\n--- a\/src\/backend\/renderer.js\n+++ b\/src\/backend\/renderer.js\n@@ -30,6 +30,7 @@ import { cleanForBridge, copyWithSet, setInObject } from '.\/utils';\n import {\n __DEBUG__,\n SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,\n+ SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,\n TREE_OPERATION_ADD,\n TREE_OPERATION_REMOVE,\n TREE_OPERATION_REORDER_CHILDREN,\n@@ -38,6 +39,7 @@ import {\n import { inspectHooksOfFiber } from '.\/ReactDebugHooks';\n \n import type {\n+ ChangeDescription,\n CommitDataBackend,\n DevToolsHook,\n Fiber,\n@@ -350,7 +352,7 @@ export function attach(\n \/\/ The unmount operations are already significantly smaller than mount opreations though.\n \/\/ This is something to keep in mind for later.\n function updateComponentFilters(componentFilters: Array) {\n- if (this._isProfiling) {\n+ if (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@@ -646,8 +648,185 @@ export function attach(\n return ((fiberToIDMap.get(primaryFiber): any): number);\n }\n \n+ function getChangeDescription(\n+ prevFiber: Fiber | null,\n+ nextFiber: Fiber\n+ ): ChangeDescription | null {\n+ switch (getElementTypeForFiber(nextFiber)) {\n+ case ElementTypeClass:\n+ case ElementTypeFunction:\n+ case ElementTypeMemo:\n+ case ElementTypeForwardRef:\n+ if (prevFiber === null) {\n+ return {\n+ context: null,\n+ didHooksChange: false,\n+ isFirstMount: true,\n+ props: null,\n+ state: null,\n+ };\n+ } else {\n+ return {\n+ context: getContextChangedKeys(nextFiber),\n+ didHooksChange: didHooksChange(\n+ prevFiber.memoizedState,\n+ nextFiber.memoizedState\n+ ),\n+ isFirstMount: false,\n+ props: getChangedKeys(\n+ prevFiber.memoizedProps,\n+ nextFiber.memoizedProps\n+ ),\n+ state: getChangedKeys(\n+ prevFiber.memoizedState,\n+ nextFiber.memoizedState\n+ ),\n+ };\n+ }\n+ default:\n+ return null;\n+ }\n+ }\n+\n+ function updateContextsForFiber(fiber: Fiber) {\n+ switch (getElementTypeForFiber(fiber)) {\n+ case ElementTypeClass:\n+ if (idToContextsMap !== null) {\n+ const id = getFiberID(getPrimaryFiber(fiber));\n+ const contexts = getContextsForFiber(fiber);\n+ if (contexts !== null) {\n+ idToContextsMap.set(id, contexts);\n+ }\n+ }\n+ break;\n+ default:\n+ break;\n+ }\n+ }\n+\n+ \/\/ Differentiates between a null context value and no context.\n+ const NO_CONTEXT = {};\n+\n+ function getContextsForFiber(fiber: Fiber): [Object, any] | null {\n+ switch (getElementTypeForFiber(fiber)) {\n+ case ElementTypeClass:\n+ const instance = fiber.stateNode;\n+ let legacyContext = NO_CONTEXT;\n+ let modernContext = NO_CONTEXT;\n+ if (instance != null) {\n+ if (\n+ instance.constructor &&\n+ instance.constructor.contextType != null\n+ ) {\n+ modernContext = instance.context;\n+ } else {\n+ legacyContext = instance.context;\n+ if (legacyContext && Object.keys(legacyContext).length === 0) {\n+ legacyContext = NO_CONTEXT;\n+ }\n+ }\n+ }\n+ return [legacyContext, modernContext];\n+ default:\n+ return null;\n+ }\n+ }\n+\n+ \/\/ Record all contexts at the time profiling is started.\n+ \/\/ Fibers only store the current context value,\n+ \/\/ so we need to track them separatenly in order to determine changed keys.\n+ function crawlToInitializeContextsMap(fiber: Fiber) {\n+ updateContextsForFiber(fiber);\n+ let current = fiber.child;\n+ while (current !== null) {\n+ crawlToInitializeContextsMap(current);\n+ current = current.sibling;\n+ }\n+ }\n+\n+ function getContextChangedKeys(fiber: Fiber): null | boolean | Array {\n+ switch (getElementTypeForFiber(fiber)) {\n+ case ElementTypeClass:\n+ if (idToContextsMap !== null) {\n+ const id = getFiberID(getPrimaryFiber(fiber));\n+ const prevContexts = idToContextsMap.has(id)\n+ ? idToContextsMap.get(id)\n+ : null;\n+ const nextContexts = getContextsForFiber(fiber);\n+\n+ if (prevContexts == null || nextContexts == null) {\n+ return null;\n+ }\n+\n+ const [prevLegacyContext, prevModernContext] = prevContexts;\n+ const [nextLegacyContext, nextModernContext] = nextContexts;\n+\n+ if (nextLegacyContext !== NO_CONTEXT) {\n+ return getChangedKeys(prevLegacyContext, nextLegacyContext);\n+ } else if (nextModernContext !== NO_CONTEXT) {\n+ return prevModernContext !== nextModernContext;\n+ }\n+ }\n+ break;\n+ default:\n+ break;\n+ }\n+ return null;\n+ }\n+\n+ function didHooksChange(prev: any, next: any): boolean {\n+ if (next == null) {\n+ return false;\n+ }\n+\n+ \/\/ We can't report anything meaningful for hooks changes.\n+ if (\n+ next.hasOwnProperty('baseState') &&\n+ next.hasOwnProperty('memoizedState') &&\n+ next.hasOwnProperty('next') &&\n+ next.hasOwnProperty('queue')\n+ ) {\n+ while (next !== null) {\n+ if (next.memoizedState !== prev.memoizedState) {\n+ return true;\n+ } else {\n+ next = next.next;\n+ prev = prev.next;\n+ }\n+ }\n+ }\n+\n+ return false;\n+ }\n+\n+ function getChangedKeys(prev: any, next: any): null | Array {\n+ if (prev == null || next == null) {\n+ return null;\n+ }\n+\n+ \/\/ We can't report anything meaningful for hooks changes.\n+ if (\n+ next.hasOwnProperty('baseState') &&\n+ next.hasOwnProperty('memoizedState') &&\n+ next.hasOwnProperty('next') &&\n+ next.hasOwnProperty('queue')\n+ ) {\n+ return null;\n+ }\n+\n+ const keys = new Set([...Object.keys(prev), ...Object.keys(next)]);\n+ const changedKeys = [];\n+ for (let key of keys) {\n+ if (prev[key] !== next[key]) {\n+ changedKeys.push(key);\n+ }\n+ }\n+\n+ return changedKeys;\n+ }\n+\n \/\/ eslint-disable-next-line no-unused-vars\n- function hasDataChanged(prevFiber: Fiber, nextFiber: Fiber): boolean {\n+ function didFiberRender(prevFiber: Fiber, nextFiber: Fiber): boolean {\n switch (nextFiber.tag) {\n case ClassComponent:\n case FunctionComponent:\n@@ -1024,7 +1203,7 @@ export function attach(\n pushOperation(treeBaseDuration);\n }\n \n- if (alternate == null || hasDataChanged(alternate, fiber)) {\n+ if (alternate == null || didFiberRender(alternate, fiber)) {\n if (actualDuration != null) {\n \/\/ The actual duration reported by React includes time spent working on children.\n \/\/ This is useful information, but it's also useful to be able to exclude child durations.\n@@ -1049,6 +1228,17 @@ export function attach(\n metadata.maxActualDuration,\n actualDuration\n );\n+\n+ if (recordChangeDescriptions) {\n+ const changeDescription = getChangeDescription(alternate, fiber);\n+ if (changeDescription !== null) {\n+ if (metadata.changeDescriptions !== null) {\n+ metadata.changeDescriptions.set(id, changeDescription);\n+ }\n+ }\n+\n+ updateContextsForFiber(fiber);\n+ }\n }\n }\n }\n@@ -1110,7 +1300,7 @@ export function attach(\n mostRecentlyInspectedElementID !== null &&\n mostRecentlyInspectedElementID ===\n getFiberID(getPrimaryFiber(nextFiber)) &&\n- hasDataChanged(prevFiber, nextFiber)\n+ didFiberRender(prevFiber, nextFiber)\n ) {\n \/\/ If this Fiber has updated, clear cached inspected data.\n \/\/ If it is inspected again, it may need to be re-run to obtain updated hooks values.\n@@ -1300,6 +1490,7 @@ export function attach(\n \/\/ If profiling is active, store commit time and duration, and the current interactions.\n \/\/ The frontend may request this information after profiling has stopped.\n currentCommitProfilingMetadata = {\n+ changeDescriptions: recordChangeDescriptions ? new Map() : null,\n durations: [],\n commitTime: performance.now() - profilingStartTime,\n interactions: Array.from(root.memoizedInteractions).map(\n@@ -1343,6 +1534,7 @@ export function attach(\n \/\/ If profiling is active, store commit time and duration, and the current interactions.\n \/\/ The frontend may request this information after profiling has stopped.\n currentCommitProfilingMetadata = {\n+ changeDescriptions: recordChangeDescriptions ? new Map() : null,\n durations: [],\n commitTime: performance.now() - profilingStartTime,\n interactions: Array.from(root.memoizedInteractions).map(\n@@ -2058,6 +2250,7 @@ export function attach(\n }\n \n type CommitProfilingData = {|\n+ changeDescriptions: Map | null,\n commitTime: number,\n durations: Array,\n interactions: Array,\n@@ -2070,10 +2263,12 @@ export function attach(\n \n let currentCommitProfilingMetadata: CommitProfilingData | null = null;\n let displayNamesByRootID: DisplayNamesByRootID | null = null;\n+ let idToContextsMap: Map | 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 recordChangeDescriptions: boolean = false;\n let rootToCommitProfilingMetadataMap: CommitProfilingMetadataMap | null = null;\n \n function getProfilingData(): ProfilingDataBackend {\n@@ -2111,6 +2306,7 @@ export function attach(\n \n commitProfilingMetadata.forEach((commitProfilingData, commitIndex) => {\n const {\n+ changeDescriptions,\n durations,\n interactions,\n maxActualDuration,\n@@ -2144,6 +2340,10 @@ export function attach(\n }\n \n commitData.push({\n+ changeDescriptions:\n+ changeDescriptions !== null\n+ ? Array.from(changeDescriptions.entries())\n+ : null,\n duration: maxActualDuration,\n fiberActualDurations,\n fiberSelfDurations,\n@@ -2170,11 +2370,13 @@ export function attach(\n };\n }\n \n- function startProfiling() {\n+ function startProfiling(shouldRecordChangeDescriptions: boolean) {\n if (isProfiling) {\n return;\n }\n \n+ recordChangeDescriptions = shouldRecordChangeDescriptions;\n+\n \/\/ Capture initial values as of the time profiling starts.\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@@ -2182,6 +2384,7 @@ export function attach(\n displayNamesByRootID = new Map();\n initialTreeBaseDurationsMap = new Map(idToTreeBaseDurationMap);\n initialIDToRootMap = new Map(idToRootMap);\n+ idToContextsMap = new Map();\n \n hook.getFiberRoots(rendererID).forEach(root => {\n const rootID = getFiberID(getPrimaryFiber(root.current));\n@@ -2189,6 +2392,13 @@ export function attach(\n rootID,\n getDisplayNameForRoot(root.current)\n );\n+\n+ if (shouldRecordChangeDescriptions) {\n+ \/\/ Record all contexts at the time profiling is started.\n+ \/\/ Fibers only store the current context value,\n+ \/\/ so we need to track them separatenly in order to determine changed keys.\n+ crawlToInitializeContextsMap(root.current);\n+ }\n });\n \n isProfiling = true;\n@@ -2198,13 +2408,17 @@ export function attach(\n \n function stopProfiling() {\n isProfiling = false;\n+ recordChangeDescriptions = false;\n }\n \n \/\/ Automatically start profiling so that we don't miss timing info from initial \"mount\".\n if (\n sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true'\n ) {\n- startProfiling();\n+ startProfiling(\n+ sessionStorageGetItem(SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY) ===\n+ 'true'\n+ );\n }\n \n \/\/ React will switch between these implementations depending on whether\ndiff --git a\/src\/backend\/types.js b\/src\/backend\/types.js\nindex ac7f429804..af2cdd2923 100644\n--- a\/src\/backend\/types.js\n+++ b\/src\/backend\/types.js\n@@ -13,10 +13,10 @@ export type ExpirationTime = number;\n export type RefObject = {|\n current: any,\n |};\n-export type Source = {\n+export type Source = {|\n fileName: string,\n lineNumber: number,\n-};\n+|};\n export type HookType =\n | 'useState'\n | 'useReducer'\n@@ -118,7 +118,17 @@ export type ReactRenderer = {\n currentDispatcherRef?: {| current: null | Dispatcher |},\n };\n \n+export type ChangeDescription = {|\n+ context: Array | boolean | null,\n+ didHooksChange: boolean,\n+ isFirstMount: boolean,\n+ props: Array | null,\n+ state: Array | null,\n+|};\n+\n export type CommitDataBackend = {|\n+ \/\/ Tuple of fiber ID and change description\n+ changeDescriptions: Array<[number, ChangeDescription]> | null,\n duration: number,\n \/\/ Tuple of fiber ID and actual duration\n fiberActualDurations: Array<[number, number]>,\n@@ -229,7 +239,7 @@ export type RendererInterface = {\n setInProps: (id: number, path: Array, value: any) => void,\n setInState: (id: number, path: Array, value: any) => void,\n setTrackedPath: (path: Array | null) => void,\n- startProfiling: () => void,\n+ startProfiling: (recordChangeDescriptions: boolean) => void,\n stopProfiling: () => void,\n updateComponentFilters: (somponentFilters: Array) => void,\n };\ndiff --git a\/src\/bridge.js b\/src\/bridge.js\nindex 1619e51852..c6c3f1b223 100644\n--- a\/src\/bridge.js\n+++ b\/src\/bridge.js\n@@ -2,16 +2,85 @@\n \n import EventEmitter from 'events';\n \n-import type { Wall } from '.\/types';\n+import type { ComponentFilter, Wall } from '.\/types';\n+import type {\n+ InspectedElement,\n+ OwnersList,\n+ ProfilingDataBackend,\n+ RendererID,\n+} from 'src\/backend\/types';\n \n const BATCH_DURATION = 100;\n \n+type ElementAndRendererID = {| id: number, rendererID: RendererID |};\n+\n type Message = {|\n event: string,\n payload: any,\n |};\n \n-export default class Bridge extends EventEmitter {\n+type HighlightElementInDOM = {|\n+ ...ElementAndRendererID,\n+ displayName: string,\n+ hideAfterTimeout: boolean,\n+ openNativeElementsPanel: boolean,\n+ scrollIntoView: boolean,\n+|};\n+\n+type OverrideValue = {|\n+ ...ElementAndRendererID,\n+ path: Array,\n+ value: any,\n+|};\n+\n+type OverrideHookState = {|\n+ ...OverrideValue,\n+ hookID: number,\n+|};\n+\n+type OverrideSuspense = {|\n+ ...ElementAndRendererID,\n+ forceFallback: boolean,\n+|};\n+\n+export default class Bridge extends EventEmitter<{|\n+ captureScreenshot: [{| commitIndex: number, rootID: number |}],\n+ clearHighlightedElementInDOM: [],\n+ getOwnersList: [ElementAndRendererID],\n+ getProfilingData: [{| rendererID: RendererID |}],\n+ getProfilingStatus: [],\n+ highlightElementInDOM: [HighlightElementInDOM],\n+ init: [],\n+ inspectElement: [ElementAndRendererID],\n+ inspectedElement: [InspectedElement | number | null],\n+ isBackendStorageAPISupported: [boolean],\n+ logElementToConsole: [ElementAndRendererID],\n+ operations: [Uint32Array],\n+ ownersList: [OwnersList],\n+ overrideContext: [OverrideValue],\n+ overrideHookState: [OverrideHookState],\n+ overrideProps: [OverrideValue],\n+ overrideState: [OverrideValue],\n+ overrideSuspense: [OverrideSuspense],\n+ profilingData: [ProfilingDataBackend],\n+ profilingStatus: [boolean],\n+ reloadAndProfile: [boolean],\n+ reloadAppForProfiling: [],\n+ screenshotCaptured: [\n+ {| commitIndex: number, dataURL: string, rootID: number |},\n+ ],\n+ selectElement: [ElementAndRendererID],\n+ selectFiber: [number],\n+ shutdown: [],\n+ startInspectingDOM: [],\n+ startProfiling: [boolean],\n+ stopInspectingDOM: [boolean],\n+ stopProfiling: [],\n+ syncSelectionFromNativeElementsPanel: [],\n+ syncSelectionToNativeElementsPanel: [],\n+ updateComponentFilters: [Array],\n+ viewElementSource: [ElementAndRendererID],\n+|}> {\n _isShutdown: boolean = false;\n _messageQueue: Array = [];\n _timeoutID: TimeoutID | null = null;\n@@ -25,7 +94,7 @@ export default class Bridge extends EventEmitter {\n \n this._wallUnlisten =\n wall.listen((message: Message) => {\n- this.emit(message.event, message.payload);\n+ (this: any).emit(message.event, message.payload);\n }) || null;\n }\n \n@@ -64,7 +133,9 @@ export default class Bridge extends EventEmitter {\n this._isShutdown = true;\n \n \/\/ Disable the API inherited from EventEmitter that can add more listeners and send more messages.\n+ \/\/ $FlowFixMe This property is not writable.\n this.addListener = function() {};\n+ \/\/ $FlowFixMe This property is not writable.\n this.emit = function() {};\n \/\/ NOTE: There's also EventEmitter API like `on` and `prependListener` that we didn't add to our Flow type of EventEmitter.\n \ndiff --git a\/src\/constants.js b\/src\/constants.js\nindex b06ebcfa22..9267c53e4b 100644\n--- a\/src\/constants.js\n+++ b\/src\/constants.js\n@@ -14,6 +14,9 @@ export const LOCAL_STORAGE_FILTER_PREFERENCES_KEY =\n export const SESSION_STORAGE_LAST_SELECTION_KEY =\n 'React::DevTools::lastSelection';\n \n+export const SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =\n+ 'React::DevTools::recordChangeDescriptions';\n+\n export const SESSION_STORAGE_RELOAD_AND_PROFILE_KEY =\n 'React::DevTools::reloadAndProfile';\n \ndiff --git a\/src\/devtools\/ProfilerStore.js b\/src\/devtools\/ProfilerStore.js\nindex f4901287ea..1f20fa2a05 100644\n--- a\/src\/devtools\/ProfilerStore.js\n+++ b\/src\/devtools\/ProfilerStore.js\n@@ -3,6 +3,7 @@\n import EventEmitter from 'events';\n import memoize from 'memoize-one';\n import throttle from 'lodash.throttle';\n+import Bridge from 'src\/bridge';\n import { prepareProfilingDataFrontendFromBackendAndStore } from '.\/views\/Profiler\/utils';\n import ProfilingCache from '.\/ProfilingCache';\n import Store from '.\/store';\n@@ -14,11 +15,14 @@ import type {\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+export default class ProfilerStore extends EventEmitter<{|\n+ isProcessingData: [],\n+ isProfiling: [],\n+ profilingData: [],\n+|}> {\n _bridge: Bridge;\n \n \/\/ Suspense cache for lazily calculating derived profiling data.\n@@ -179,7 +183,7 @@ export default class ProfilerStore extends EventEmitter {\n }\n \n startProfiling(): void {\n- this._bridge.send('startProfiling');\n+ this._bridge.send('startProfiling', this._store.recordChangeDescriptions);\n \n \/\/ Don't actually update the local profiling boolean yet!\n \/\/ Wait for onProfilingStatus() to confirm the status has changed.\ndiff --git a\/src\/devtools\/index.js b\/src\/devtools\/index.js\nindex e656198314..b41b51a110 100644\n--- a\/src\/devtools\/index.js\n+++ b\/src\/devtools\/index.js\n@@ -1,6 +1,6 @@\n \/\/ @flow\n \n-import type { Bridge } from '..\/types';\n+import Bridge from 'src\/bridge';\n \n type Shell = {|\n connect: (callback: Function) => void,\ndiff --git a\/src\/devtools\/store.js b\/src\/devtools\/store.js\nindex 6ad34d7e7b..5e2e14d983 100644\n--- a\/src\/devtools\/store.js\n+++ b\/src\/devtools\/store.js\n@@ -2,6 +2,7 @@\n \n import EventEmitter from 'events';\n import { inspect } from 'util';\n+import Bridge from 'src\/bridge';\n import {\n TREE_OPERATION_ADD,\n TREE_OPERATION_REMOVE,\n@@ -21,7 +22,7 @@ import { printStore } from 'src\/__tests__\/storeSerializer';\n import ProfilerStore from '.\/ProfilerStore';\n \n import type { Element } from '.\/views\/Components\/types';\n-import type { Bridge, ComponentFilter, ElementType } from '..\/types';\n+import type { ComponentFilter, ElementType } from '..\/types';\n \n const debug = (methodName, ...args) => {\n if (__DEBUG__) {\n@@ -38,6 +39,8 @@ const LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY =\n 'React::DevTools::captureScreenshots';\n const LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY =\n 'React::DevTools::collapseNodesByDefault';\n+const LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =\n+ 'React::DevTools::recordChangeDescriptions';\n \n type Config = {|\n isProfiling?: boolean,\n@@ -55,7 +58,16 @@ export type Capabilities = {|\n * The store is the single source of truth for updates from the backend.\n * ContextProviders can subscribe to the Store for specific things they want to provide.\n *\/\n-export default class Store extends EventEmitter {\n+export default class Store extends EventEmitter<{|\n+ captureScreenshots: [],\n+ collapseNodesByDefault: [],\n+ componentFilters: [],\n+ mutated: [[Array, Map]],\n+ recordChangeDescriptions: [],\n+ roots: [],\n+ supportsProfiling: [],\n+ supportsReloadAndProfile: [],\n+|}> {\n _bridge: Bridge;\n \n _captureScreenshots: boolean = false;\n@@ -83,6 +95,8 @@ export default class Store extends EventEmitter {\n \n _profilerStore: ProfilerStore;\n \n+ _recordChangeDescriptions: boolean = false;\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 _revision: number = 0;\n@@ -118,6 +132,10 @@ export default class Store extends EventEmitter {\n localStorageGetItem(LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY) !==\n 'false';\n \n+ this._recordChangeDescriptions =\n+ localStorageGetItem(LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY) ===\n+ 'true';\n+\n this._componentFilters = getSavedComponentFilters();\n \n let isProfiling = false;\n@@ -248,6 +266,20 @@ export default class Store extends EventEmitter {\n return this._profilerStore;\n }\n \n+ get recordChangeDescriptions(): boolean {\n+ return this._recordChangeDescriptions;\n+ }\n+ set recordChangeDescriptions(value: boolean): void {\n+ this._recordChangeDescriptions = value;\n+\n+ localStorageSetItem(\n+ LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,\n+ value ? 'true' : 'false'\n+ );\n+\n+ this.emit('recordChangeDescriptions');\n+ }\n+\n get revision(): number {\n return this._revision;\n }\ndiff --git a\/src\/devtools\/views\/Components\/InspectedElementContext.js b\/src\/devtools\/views\/Components\/InspectedElementContext.js\nindex c27d97eb8b..119cb47d9e 100644\n--- a\/src\/devtools\/views\/Components\/InspectedElementContext.js\n+++ b\/src\/devtools\/views\/Components\/InspectedElementContext.js\n@@ -14,28 +14,33 @@ import { hydrate } from 'src\/hydration';\n import { TreeStateContext } from '.\/TreeContext';\n import { separateDisplayNameAndHOCs } from 'src\/utils';\n \n+import type { InspectedElement as InspectedElementBackend } from 'src\/backend\/types';\n import type {\n DehydratedData,\n Element,\n- InspectedElement,\n+ InspectedElement as InspectedElementFrontend,\n } from 'src\/devtools\/views\/Components\/types';\n import type { Resource, Thenable } from '..\/..\/cache';\n \n type Context = {|\n- read(id: number): InspectedElement | null,\n+ read(id: number): InspectedElementFrontend | null,\n |};\n \n const InspectedElementContext = createContext(((null: any): Context));\n InspectedElementContext.displayName = 'InspectedElementContext';\n \n-type ResolveFn = (inspectedElement: InspectedElement) => void;\n+type ResolveFn = (inspectedElement: InspectedElementFrontend) => void;\n type InProgressRequest = {|\n- promise: Thenable,\n+ promise: Thenable,\n resolveFn: ResolveFn,\n |};\n \n const inProgressRequests: WeakMap = new WeakMap();\n-const resource: Resource = createResource(\n+const resource: Resource<\n+ Element,\n+ Element,\n+ InspectedElementFrontend\n+> = createResource(\n (element: Element) => {\n let request = inProgressRequests.get(element);\n if (request != null) {\n@@ -85,7 +90,7 @@ function InspectedElementContextController({ children }: Props) {\n \/\/ This effect handler invalidates the suspense cache and schedules rendering updates with React.\n useEffect(() => {\n const onInspectedElement = (\n- inspectedElement: InspectedElement | number | null\n+ data: InspectedElementBackend | number | null\n ) => {\n \/\/ A null value means that the element no longer exists in the backend.\n \/\/ If it's the same element that's currently selected, that selection will be removed once the Store updates.\n@@ -93,23 +98,21 @@ function InspectedElementContextController({ children }: Props) {\n \/\/ Either way there is nothing we need to do in this case.\n \/\/ A numeric value indicates that the element hasn't changed since we last requested its data,\n \/\/ in which case we don't need to invalidate the cache and re-render anything in the DevTools.\n- if (inspectedElement !== null && typeof inspectedElement === 'object') {\n- const id = inspectedElement.id;\n-\n- const { displayName, type } = inspectedElement;\n-\n- const [\n- displayNameWithoutHOCs,\n- hocDisplayNames,\n- ] = separateDisplayNameAndHOCs(displayName, type);\n-\n- inspectedElement = (({\n- ...inspectedElement,\n- displayName: displayNameWithoutHOCs,\n+ if (data !== null && typeof data === 'object') {\n+ const id = data.id;\n+\n+ const inspectedElement: InspectedElementFrontend = {\n+ canEditFunctionProps: data.canEditFunctionProps,\n+ canEditHooks: data.canEditHooks,\n+ canToggleSuspense: data.canToggleSuspense,\n+ canViewSource: data.canViewSource,\n+ id: data.id,\n+ source: data.source,\n+ type: data.type,\n owners:\n- inspectedElement.owners === null\n+ data.owners === null\n ? null\n- : inspectedElement.owners.map(owner => {\n+ : data.owners.map(owner => {\n const [\n displayName,\n hocDisplayNames,\n@@ -120,13 +123,12 @@ function InspectedElementContextController({ children }: Props) {\n hocDisplayNames,\n };\n }),\n- hocDisplayNames,\n- context: hydrateHelper(inspectedElement.context),\n- events: hydrateHelper(inspectedElement.events),\n- hooks: hydrateHelper(inspectedElement.hooks),\n- props: hydrateHelper(inspectedElement.props),\n- state: hydrateHelper(inspectedElement.state),\n- }: any): InspectedElement);\n+ context: hydrateHelper(data.context),\n+ events: hydrateHelper(data.events),\n+ hooks: hydrateHelper(data.hooks),\n+ props: hydrateHelper(data.props),\n+ state: hydrateHelper(data.state),\n+ };\n \n const element = store.getElementByID(id);\n if (element !== null) {\n@@ -174,16 +176,13 @@ function InspectedElementContextController({ children }: Props) {\n bridge.send('selectElement', { id: selectedElementID, rendererID });\n \n const onInspectedElement = (\n- inspectedElement: InspectedElement | number | null\n+ data: InspectedElementBackend | number | null\n ) => {\n- if (inspectedElement !== null) {\n+ if (data !== null) {\n \/\/ If this is the element we requested, wait a little bit and then ask for an update.\n- if (inspectedElement === selectedElementID) {\n+ if (data === selectedElementID) {\n timeoutID = setTimeout(sendRequest, 1000);\n- } else if (\n- typeof inspectedElement === 'object' &&\n- inspectedElement.id === selectedElementID\n- ) {\n+ } else if (typeof data === 'object' && data.id === selectedElementID) {\n timeoutID = setTimeout(sendRequest, 1000);\n }\n }\ndiff --git a\/src\/devtools\/views\/Components\/OwnersListContext.js b\/src\/devtools\/views\/Components\/OwnersListContext.js\nindex f83b1a6d39..aa7e2dab05 100644\n--- a\/src\/devtools\/views\/Components\/OwnersListContext.js\n+++ b\/src\/devtools\/views\/Components\/OwnersListContext.js\n@@ -11,11 +11,8 @@ import { BridgeContext, StoreContext } from '..\/context';\n import { TreeStateContext } from '.\/TreeContext';\n import { separateDisplayNameAndHOCs } from 'src\/utils';\n \n-import type {\n- Element,\n- Owner,\n- OwnersList,\n-} from 'src\/devtools\/views\/Components\/types';\n+import type { OwnersList } from 'src\/backend\/types';\n+import type { Element, Owner } from 'src\/devtools\/views\/Components\/types';\n import type { Resource, Thenable } from '..\/..\/cache';\n \n type Context = (id: number) => Array | null;\ndiff --git a\/src\/devtools\/views\/Components\/types.js b\/src\/devtools\/views\/Components\/types.js\nindex 106b184ac5..a1c2a2b80c 100644\n--- a\/src\/devtools\/views\/Components\/types.js\n+++ b\/src\/devtools\/views\/Components\/types.js\n@@ -52,8 +52,6 @@ export type Source = {|\n export type InspectedElement = {|\n id: number,\n \n- displayName: string | null,\n-\n \/\/ Does the current renderer support editable hooks?\n canEditHooks: boolean,\n \ndiff --git a\/src\/devtools\/views\/DevTools.js b\/src\/devtools\/views\/DevTools.js\nindex c02eef4fe1..606ffb706a 100644\n--- a\/src\/devtools\/views\/DevTools.js\n+++ b\/src\/devtools\/views\/DevTools.js\n@@ -6,6 +6,7 @@ import '@reach\/menu-button\/styles.css';\n import '@reach\/tooltip\/styles.css';\n \n import React, { useState } from 'react';\n+import Bridge from 'src\/bridge';\n import Store from '..\/store';\n import { BridgeContext, StoreContext } from '.\/context';\n import Components from '.\/Components\/Components';\n@@ -23,8 +24,6 @@ import styles from '.\/DevTools.css';\n \n import '.\/root.css';\n \n-import type { Bridge } from '..\/..\/types';\n-\n export type BrowserName = 'Chrome' | 'Firefox';\n export type BrowserTheme = 'dark' | 'light';\n export type TabID = 'components' | 'profiler' | 'settings';\ndiff --git a\/src\/devtools\/views\/Profiler\/Profiler.css b\/src\/devtools\/views\/Profiler\/Profiler.css\nindex 5ab888906d..22d26a1cf6 100644\n--- a\/src\/devtools\/views\/Profiler\/Profiler.css\n+++ b\/src\/devtools\/views\/Profiler\/Profiler.css\n@@ -14,6 +14,7 @@\n display: flex;\n flex-direction: column;\n flex: 2 1 200px;\n+ border-top: 1px solid var(--color-border);\n }\n \n .RightColumn {\n@@ -21,6 +22,7 @@\n flex-direction: column;\n flex: 1 1 100px;\n max-width: 300px;\n+ overflow-x: hidden;\n border-left: 1px solid var(--color-border);\n border-top: 1px solid var(--color-border);\n }\n@@ -60,7 +62,6 @@\n display: flex;\n align-items: center;\n border-bottom: 1px solid var(--color-border);\n- border-top: 1px solid var(--color-border);\n }\n \n .VRule {\ndiff --git a\/src\/devtools\/views\/Profiler\/ReloadAndProfileButton.js b\/src\/devtools\/views\/Profiler\/ReloadAndProfileButton.js\nindex 110a1b61a4..933d453ab0 100644\n--- a\/src\/devtools\/views\/Profiler\/ReloadAndProfileButton.js\n+++ b\/src\/devtools\/views\/Profiler\/ReloadAndProfileButton.js\n@@ -7,27 +7,41 @@ import { BridgeContext, StoreContext } from '..\/context';\n import { useSubscription } from '..\/hooks';\n import Store from 'src\/devtools\/store';\n \n+type SubscriptionData = {|\n+ recordChangeDescriptions: boolean,\n+ supportsReloadAndProfile: boolean,\n+|};\n+\n export default function ReloadAndProfileButton() {\n const bridge = useContext(BridgeContext);\n const store = useContext(StoreContext);\n \n- const supportsReloadAndProfileSubscription = useMemo(\n+ const subscription = useMemo(\n () => ({\n- getCurrentValue: () => store.supportsReloadAndProfile,\n+ getCurrentValue: () => ({\n+ recordChangeDescriptions: store.recordChangeDescriptions,\n+ supportsReloadAndProfile: store.supportsReloadAndProfile,\n+ }),\n subscribe: (callback: Function) => {\n+ store.addListener('recordChangeDescriptions', callback);\n store.addListener('supportsReloadAndProfile', callback);\n- return () => store.removeListener('supportsReloadAndProfile', callback);\n+ return () => {\n+ store.removeListener('recordChangeDescriptions', callback);\n+ store.removeListener('supportsReloadAndProfile', callback);\n+ };\n },\n }),\n [store]\n );\n- const supportsReloadAndProfile = useSubscription(\n- supportsReloadAndProfileSubscription\n- );\n+ const {\n+ recordChangeDescriptions,\n+ supportsReloadAndProfile,\n+ } = useSubscription(subscription);\n \n- const reloadAndProfile = useCallback(() => bridge.send('reloadAndProfile'), [\n- bridge,\n- ]);\n+ const reloadAndProfile = useCallback(\n+ () => bridge.send('reloadAndProfile', recordChangeDescriptions),\n+ [bridge, recordChangeDescriptions]\n+ );\n \n if (!supportsReloadAndProfile) {\n return null;\ndiff --git a\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.css b\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.css\nindex 0bbe667432..6a835e64a2 100644\n--- a\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.css\n+++ b\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.css\n@@ -4,12 +4,12 @@\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n+ border-bottom: 1px solid var(--color-border);\n }\n \n .Content {\n padding: 0.5rem;\n user-select: none;\n- border-top: 1px solid var(--color-border);\n overflow: auto;\n }\n \ndiff --git a\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.css b\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.css\nindex 30097488c7..a89175b622 100644\n--- a\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.css\n+++ b\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.css\n@@ -4,18 +4,21 @@\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n+ border-bottom: 1px solid var(--color-border);\n }\n \n .Content {\n padding: 0.5rem;\n user-select: none;\n- border-top: 1px solid var(--color-border);\n overflow-y: auto;\n }\n \n .Component {\n flex: 1;\n color: var(--color-component-name);\n+ white-space: nowrap;\n+ overflow-x: hidden;\n+ text-overflow: ellipsis;\n }\n .Component:before {\n white-space: nowrap;\n@@ -56,3 +59,22 @@\n .CurrentCommit:focus {\n outline: none;\n }\n+\n+.WhatChangedItem {\n+ margin-top: 0.25rem;\n+}\n+\n+.WhatChangedKey {\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-small);\n+ line-height: 1;\n+}\n+.WhatChangedKey:first-of-type::before {\n+ content: ' (';\n+}\n+.WhatChangedKey::after {\n+ content: ', ';\n+}\n+.WhatChangedKey:last-of-type::after {\n+ content: ')';\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.js b\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.js\nindex c83b0bc00e..839b95d2fd 100644\n--- a\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.js\n+++ b\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.js\n@@ -1,6 +1,7 @@\n \/\/ @flow\n \n import React, { Fragment, useContext } from 'react';\n+import ProfilerStore from 'src\/devtools\/ProfilerStore';\n import { ProfilerContext } from '.\/ProfilerContext';\n import { formatDuration, formatTime } from '.\/utils';\n import { StoreContext } from '..\/context';\n@@ -29,7 +30,7 @@ export default function SidebarSelectedFiberInfo(_: Props) {\n });\n \n const listItems = [];\n- for (let i = 0; i < commitIndices.length; i += 2) {\n+ for (let i = 0; i < commitIndices.length; i++) {\n const commitIndex = commitIndices[i];\n \n const { duration, timestamp } = profilerStore.getCommitData(\n@@ -67,9 +68,140 @@ export default function SidebarSelectedFiberInfo(_: Props) {\n \n <\/Button>\n <\/div>\n+ \n

\n- Rendered at<\/label>: {listItems}\n+ {listItems.length > 0 && (\n+ \n+ Rendered at<\/label>: {listItems}\n+ <\/Fragment>\n+ )}\n+ {listItems.length === 0 && (\n+

Did not render during this profiling session.<\/div>\n+ )}\n <\/div>\n <\/Fragment>\n );\n }\n+\n+type WhatChangedProps = {|\n+ commitIndex: number,\n+ fiberID: number,\n+ profilerStore: ProfilerStore,\n+ rootID: number,\n+|};\n+\n+function WhatChanged({\n+ commitIndex,\n+ fiberID,\n+ profilerStore,\n+ rootID,\n+}: WhatChangedProps) {\n+ const { changeDescriptions } = profilerStore.getCommitData(\n+ ((rootID: any): number),\n+ commitIndex\n+ );\n+ if (changeDescriptions === null) {\n+ return null;\n+ }\n+\n+ const changeDescription = changeDescriptions.get(fiberID);\n+ if (changeDescription == null) {\n+ return null;\n+ }\n+\n+ if (changeDescription.isFirstMount) {\n+ return (\n+

\n+ Why did this render?<\/label>\n+

\n+ This is the first time the component rendered.\n+ <\/div>\n+ <\/div>\n+ );\n+ }\n+\n+ const changes = [];\n+\n+ if (changeDescription.context === true) {\n+ changes.push(\n+

\n+ • Context changed\n+ <\/div>\n+ );\n+ } else if (\n+ typeof changeDescription.context === 'object' &&\n+ changeDescription.context !== null &&\n+ changeDescription.context.length !== 0\n+ ) {\n+ changes.push(\n+

\n+ • Context changed:\n+ {changeDescription.context.map(key => (\n+ \n+ {key}\n+ <\/span>\n+ ))}\n+ <\/div>\n+ );\n+ }\n+\n+ if (changeDescription.didHooksChange) {\n+ changes.push(\n+

\n+ • Hooks changed\n+ <\/div>\n+ );\n+ }\n+\n+ if (\n+ changeDescription.props !== null &&\n+ changeDescription.props.length !== 0\n+ ) {\n+ changes.push(\n+

\n+ • Props changed:\n+ {changeDescription.props.map(key => (\n+ \n+ {key}\n+ <\/span>\n+ ))}\n+ <\/div>\n+ );\n+ }\n+\n+ if (\n+ changeDescription.state !== null &&\n+ changeDescription.state.length !== 0\n+ ) {\n+ changes.push(\n+

\n+ • State changed:\n+ {changeDescription.state.map(key => (\n+ \n+ {key}\n+ <\/span>\n+ ))}\n+ <\/div>\n+ );\n+ }\n+\n+ if (changes.length === 0) {\n+ changes.push(\n+

\n+ The parent component rendered.\n+ <\/div>\n+ );\n+ }\n+\n+ return (\n+

\n+ Why did this render?<\/label>\n+ {changes}\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/types.js b\/src\/devtools\/views\/Profiler\/types.js\nindex 9af30779be..c99a79fed8 100644\n--- a\/src\/devtools\/views\/Profiler\/types.js\n+++ b\/src\/devtools\/views\/Profiler\/types.js\n@@ -31,7 +31,18 @@ export type SnapshotNode = {|\n type: ElementType,\n |};\n \n+export type ChangeDescription = {|\n+ context: Array | boolean | null,\n+ didHooksChange: boolean,\n+ isFirstMount: boolean,\n+ props: Array | null,\n+ state: Array | null,\n+|};\n+\n export type CommitDataFrontend = {|\n+ \/\/ Map of Fiber (ID) to a description of what changed in this commit.\n+ changeDescriptions: Map | null,\n+\n \/\/ How long was this commit?\n duration: number,\n \n@@ -93,6 +104,7 @@ export type ProfilingDataFrontend = {|\n |};\n \n export type CommitDataExport = {|\n+ changeDescriptions: Array<[number, ChangeDescription]> | null,\n duration: number,\n \/\/ Tuple of fiber ID and actual duration\n fiberActualDurations: Array<[number, number]>,\ndiff --git a\/src\/devtools\/views\/Profiler\/utils.js b\/src\/devtools\/views\/Profiler\/utils.js\nindex f192520f4f..bd4d1e9f31 100644\n--- a\/src\/devtools\/views\/Profiler\/utils.js\n+++ b\/src\/devtools\/views\/Profiler\/utils.js\n@@ -58,6 +58,10 @@ export function prepareProfilingDataFrontendFromBackendAndStore(\n \n dataForRoots.set(rootID, {\n commitData: commitData.map((commitDataBackend, commitIndex) => ({\n+ changeDescriptions:\n+ commitDataBackend.changeDescriptions != null\n+ ? new Map(commitDataBackend.changeDescriptions)\n+ : null,\n duration: commitDataBackend.duration,\n fiberActualDurations: new Map(\n commitDataBackend.fiberActualDurations\n@@ -109,6 +113,7 @@ export function prepareProfilingDataFrontendFromExport(\n dataForRoots.set(rootID, {\n commitData: commitData.map(\n ({\n+ changeDescriptions,\n duration,\n fiberActualDurations,\n fiberSelfDurations,\n@@ -117,6 +122,8 @@ export function prepareProfilingDataFrontendFromExport(\n screenshot,\n timestamp,\n }) => ({\n+ changeDescriptions:\n+ changeDescriptions != null ? new Map(changeDescriptions) : null,\n duration,\n fiberActualDurations: new Map(fiberActualDurations),\n fiberSelfDurations: new Map(fiberSelfDurations),\n@@ -159,6 +166,7 @@ export function prepareProfilingDataExport(\n dataForRoots.push({\n commitData: commitData.map(\n ({\n+ changeDescriptions,\n duration,\n fiberActualDurations,\n fiberSelfDurations,\n@@ -167,6 +175,10 @@ export function prepareProfilingDataExport(\n screenshot,\n timestamp,\n }) => ({\n+ changeDescriptions:\n+ changeDescriptions != null\n+ ? Array.from(changeDescriptions.entries())\n+ : null,\n duration,\n fiberActualDurations: Array.from(fiberActualDurations.entries()),\n fiberSelfDurations: Array.from(fiberSelfDurations.entries()),\ndiff --git a\/src\/devtools\/views\/Settings\/Settings.js b\/src\/devtools\/views\/Settings\/Settings.js\nindex 645ee25422..3e29c19d3b 100644\n--- a\/src\/devtools\/views\/Settings\/Settings.js\n+++ b\/src\/devtools\/views\/Settings\/Settings.js\n@@ -1,6 +1,6 @@\n \/\/ @flow\n \n-import React, { useCallback, useContext, useMemo } from 'react';\n+import React, { Fragment, useCallback, useContext, useMemo } from 'react';\n import { useSubscription } from '..\/hooks';\n import { StoreContext } from '..\/context';\n import { SettingsContext } from '.\/SettingsContext';\n@@ -43,6 +43,20 @@ function Settings(_: {||}) {\n collapseNodesByDefaultSubscription\n );\n \n+ const recordChangeDescriptionsSubscription = useMemo(\n+ () => ({\n+ getCurrentValue: () => store.recordChangeDescriptions,\n+ subscribe: (callback: Function) => {\n+ store.addListener('recordChangeDescriptions', callback);\n+ return () => store.removeListener('recordChangeDescriptions', callback);\n+ },\n+ }),\n+ [store]\n+ );\n+ const recordChangeDescriptions = useSubscription(\n+ recordChangeDescriptionsSubscription\n+ );\n+\n const updateDisplayDensity = useCallback(\n ({ currentTarget }) => {\n setDisplayDensity(currentTarget.value);\n@@ -69,6 +83,12 @@ function Settings(_: {||}) {\n },\n [store]\n );\n+ const updateRecordChangeDescriptions = useCallback(\n+ ({ currentTarget }) => {\n+ store.recordChangeDescriptions = currentTarget.checked;\n+ },\n+ [store]\n+ );\n \n return (\n

\n@@ -145,25 +165,37 @@ function Settings(_: {||}) {\n <\/label>\n <\/div>\n \n- {store.supportsCaptureScreenshots && (\n-

\n-

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

\n- Screenshots will be throttled in order to reduce the negative\n- impact on performance.\n- <\/div>\n- )}\n- <\/div>\n- )}\n+

\n+

Profiler<\/div>\n+\n+ \n+ {' '}\n+ Record why each component rendered while profiling.\n+ <\/label>\n+\n+ {store.supportsCaptureScreenshots && (\n+ \n+ \n+ {' '}\n+ Capture screenshots while profiling\n+ <\/label>\n+ {captureScreenshots && (\n+

\n+ Screenshots will be throttled in order to reduce the negative\n+ impact on performance.\n+ <\/div>\n+ )}\n+ <\/Fragment>\n+ )}\n+ <\/div>\n <\/div>\n );\n }\ndiff --git a\/src\/devtools\/views\/context.js b\/src\/devtools\/views\/context.js\nindex 5e25f1940e..e5ede9ef48 100644\n--- a\/src\/devtools\/views\/context.js\n+++ b\/src\/devtools\/views\/context.js\n@@ -1,8 +1,7 @@\n \/\/ @flow\n \n import { createContext } from 'react';\n-\n-import type { Bridge } from '..\/..\/types';\n+import Bridge from 'src\/bridge';\n \n import Store from '..\/store';\n \ndiff --git a\/src\/types.js b\/src\/types.js\nindex ca1329af9d..446e63ddc7 100644\n--- a\/src\/types.js\n+++ b\/src\/types.js\n@@ -1,11 +1,5 @@\n \/\/ @flow\n \n-export type Bridge = {\n- addListener(type: string, callback: Function): void,\n- removeListener(type: string, callback: Function): void,\n- send(event: string, payload: any, transferable?: Array): void,\n-};\n-\n export type Wall = {|\n \/\/ `listen` returns the \"unlisten\" function.\n listen: (fn: Function) => Function,\n","body":"","files":[{"path":"flow.js","status":"M"},{"path":"src\/__tests__\/__snapshots__\/profilingCache-test.js.snap","status":"M"},{"path":"src\/__tests__\/profilerContext-test.js","status":"M"},{"path":"src\/__tests__\/profilerStore-test.js","status":"M"},{"path":"src\/__tests__\/profilingCache-test.js","status":"M"},{"path":"src\/__tests__\/profilingCharts-test.js","status":"M"},{"path":"src\/__tests__\/profilingCommitTreeBuilder-test.js","status":"M"},{"path":"src\/__tests__\/storeComponentFilters-test.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\/bridge.js","status":"M"},{"path":"src\/constants.js","status":"M"},{"path":"src\/devtools\/ProfilerStore.js","status":"M"},{"path":"src\/devtools\/index.js","status":"M"},{"path":"src\/devtools\/store.js","status":"M"},{"path":"src\/devtools\/views\/Components\/InspectedElementContext.js","status":"M"},{"path":"src\/devtools\/views\/Components\/OwnersListContext.js","status":"M"},{"path":"src\/devtools\/views\/Components\/types.js","status":"M"},{"path":"src\/devtools\/views\/DevTools.js","status":"M"},{"path":"src\/devtools\/views\/Profiler\/Profiler.css","status":"M"},{"path":"src\/devtools\/views\/Profiler\/ReloadAndProfileButton.js","status":"M"},{"path":"src\/devtools\/views\/Profiler\/SidebarCommitInfo.css","status":"M"},{"path":"src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.css","status":"M"},{"path":"src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.js","status":"M"},{"path":"src\/devtools\/views\/Profiler\/types.js","status":"M"},{"path":"src\/devtools\/views\/Profiler\/utils.js","status":"M"},{"path":"src\/devtools\/views\/Settings\/Settings.js","status":"M"},{"path":"src\/devtools\/views\/context.js","status":"M"},{"path":"src\/types.js","status":"M"}],"commit":{"authoredAt":"2019-06-09T16:00:12-07:00","shortRevision":"80bf1ba0eb","authorName":"Brian Vaughn","subject":"Merge branch 'master' into legacy","authorEmail":"bvaughn@fb.com","revision":"80bf1ba0eb178765c8ee49ab59998f2aa9ed8234"},"parents":["fdc5ca4ba6227d35df89c404542be4ea3f6504d2","ea03ddd583baad7790f36959fb4abe308e85ac24"]}

dillon1000/react

Files changed