From 7a72ee5ac04ddbac0d3bab738df5978ec7274da5 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Sat, 8 Jun 2019 17:01:38 -0700 Subject: [PATCH] Added context changes to sidebar; fixed a initial-mount detection bug --- .../__snapshots__/profilingCache-test.js.snap | 956 +++++++++--------- src/backend/renderer.js | 54 +- src/backend/types.js | 1 + .../Profiler/SidebarSelectedFiberInfo.js | 30 +- src/devtools/views/Profiler/types.js | 1 + 5 files changed, 526 insertions(+), 516 deletions(-) diff --git a/src/__tests__/__snapshots__/profilingCache-test.js.snap b/src/__tests__/__snapshots__/profilingCache-test.js.snap index 484bfcd9de..85291acdac 100644 --- a/src/__tests__/__snapshots__/profilingCache-test.js.snap +++ b/src/__tests__/__snapshots__/profilingCache-test.js.snap @@ -2,7 +2,29 @@ exports[`ProfilingCache should calculate a self duration based on actual children (not filtered children): CommitDetails with filtered self durations 1`] = ` Object { - "changeDescriptions": Map {}, + "changeDescriptions": Map { + 2 => Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + 3 => Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + 5 => Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + }, "duration": 16, "fiberActualDurations": Map { 1 => 16, @@ -25,7 +47,22 @@ Object { exports[`ProfilingCache should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 1`] = ` Object { - "changeDescriptions": Map {}, + "changeDescriptions": Map { + 2 => Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + 4 => Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + }, "duration": 15, "fiberActualDurations": Map { 1 => 15, @@ -48,7 +85,15 @@ Object { exports[`ProfilingCache should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 2`] = ` Object { - "changeDescriptions": Map {}, + "changeDescriptions": Map { + 5 => Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + }, "duration": 3, "fiberActualDurations": Map { 5 => 3, @@ -67,7 +112,36 @@ Object { exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 0 1`] = ` Object { - "changeDescriptions": Map {}, + "changeDescriptions": Map { + 2 => Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + 3 => Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + 4 => Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + 5 => Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + }, "duration": 12, "fiberActualDurations": Map { 1 => 12, @@ -96,18 +170,28 @@ Object { 3 => Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, 4 => Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, + 6 => Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, 2 => Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [ "count", ], @@ -142,12 +226,14 @@ Object { 3 => Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, 2 => Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [ "count", ], @@ -178,6 +264,7 @@ Object { 2 => Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [ "count", ], @@ -206,7 +293,48 @@ Object { Object { "commitData": Array [ Object { - "changeDescriptions": Array [], + "changeDescriptions": Array [ + Array [ + 2, + Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + ], + Array [ + 3, + Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + ], + Array [ + 4, + Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + ], + Array [ + 5, + Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + ], + ], "duration": 12, "fiberActualDurations": Array [ Array [ @@ -264,6 +392,7 @@ Object { Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, @@ -273,15 +402,27 @@ Object { Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, ], + Array [ + 6, + Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + ], Array [ 2, Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [ "count", ], @@ -346,6 +487,7 @@ Object { Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, @@ -355,6 +497,7 @@ Object { Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [ "count", ], @@ -403,6 +546,7 @@ Object { Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [ "count", ], @@ -626,7 +770,38 @@ Object { Object { "commitData": Array [ Object { - "changeDescriptions": Array [], + "changeDescriptions": Array [ + Array [ + 2, + Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + ], + Array [ + 3, + Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + ], + Array [ + 4, + Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + ], + ], "duration": 11, "fiberActualDurations": Array [ Array [ @@ -676,15 +851,27 @@ Object { Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, ], + Array [ + 5, + Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + ], Array [ 2, Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [ "count", ], @@ -741,6 +928,7 @@ Object { Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, @@ -750,15 +938,27 @@ Object { Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, ], + Array [ + 6, + Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + ], Array [ 2, Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [ "count", ], @@ -968,18 +1168,28 @@ Object { 3 => Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, 4 => Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, + 10 => Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, 2 => Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [ "count", ], @@ -1011,12 +1221,14 @@ Object { 3 => Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, 2 => Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [ "count", ], @@ -1044,6 +1256,7 @@ Object { 2 => Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [ "count", ], @@ -1192,7 +1405,29 @@ exports[`ProfilingCache should collect data for each root (including ones added Object { "commitData": Array [ Object { - "changeDescriptions": Map {}, + "changeDescriptions": Map { + 12 => Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + 13 => Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + 14 => Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + }, "duration": 11, "fiberActualDurations": Map { 11 => 11, @@ -1368,6 +1603,7 @@ Object { Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, @@ -1377,15 +1613,27 @@ Object { Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, ], + Array [ + 10, + Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + ], Array [ 2, Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [ "count", ], @@ -1450,6 +1698,7 @@ Object { Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, @@ -1459,6 +1708,7 @@ Object { Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [ "count", ], @@ -1507,6 +1757,7 @@ Object { Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [ "count", ], @@ -1695,7 +1946,38 @@ Object { Object { "commitData": Array [ Object { - "changeDescriptions": Array [], + "changeDescriptions": Array [ + Array [ + 12, + Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + ], + Array [ + 13, + Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + ], + Array [ + 14, + Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + ], + ], "duration": 11, "fiberActualDurations": Array [ Array [ @@ -1909,7 +2191,43 @@ Object { exports[`ProfilingCache should record changed props/state/context/hooks: CommitDetails commitIndex: 0 1`] = ` Object { - "changeDescriptions": Map {}, + "changeDescriptions": Map { + 2 => Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + 4 => Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + 5 => Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + 6 => Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + 7 => Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + }, "duration": 0, "fiberActualDurations": Map { 1 => 0, @@ -1942,6 +2260,7 @@ Object { 5 => Object { "context": null, "didHooksChange": true, + "isFirstMount": false, "props": Array [ "count", ], @@ -1950,12 +2269,14 @@ Object { 4 => Object { "context": true, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, 7 => Object { "context": null, "didHooksChange": true, + "isFirstMount": false, "props": Array [ "count", ], @@ -1966,12 +2287,14 @@ Object { "count", ], "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, 2 => Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": Array [ "count", @@ -2008,30 +2331,35 @@ Object { 5 => Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, 4 => Object { "context": false, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, 7 => Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, 6 => Object { "context": Array [], "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, 2 => Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [ "foo", ], @@ -2070,30 +2398,35 @@ Object { 5 => Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, 4 => Object { "context": false, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, 7 => Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, 6 => Object { "context": Array [], "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, 2 => Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [ "foo", "bar", @@ -2133,30 +2466,35 @@ Object { 5 => Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, 4 => Object { "context": false, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, 7 => Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, 6 => Object { "context": Array [], "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, 2 => Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [ "bar", ], @@ -2195,7 +2533,58 @@ Object { Object { "commitData": Array [ Object { - "changeDescriptions": Array [], + "changeDescriptions": Array [ + Array [ + 2, + Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + ], + Array [ + 4, + Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + ], + Array [ + 5, + Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + ], + Array [ + 6, + Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + ], + Array [ + 7, + Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + ], + ], "duration": 0, "fiberActualDurations": Array [ Array [ @@ -2269,6 +2658,7 @@ Object { Object { "context": null, "didHooksChange": true, + "isFirstMount": false, "props": Array [ "count", ], @@ -2280,6 +2670,7 @@ Object { Object { "context": true, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, @@ -2289,6 +2680,7 @@ Object { Object { "context": null, "didHooksChange": true, + "isFirstMount": false, "props": Array [ "count", ], @@ -2302,6 +2694,7 @@ Object { "count", ], "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, @@ -2311,6 +2704,7 @@ Object { Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": Array [ "count", @@ -2383,6 +2777,7 @@ Object { Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, @@ -2392,6 +2787,7 @@ Object { Object { "context": false, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, @@ -2401,6 +2797,7 @@ Object { Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, @@ -2410,6 +2807,7 @@ Object { Object { "context": Array [], "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, @@ -2419,6 +2817,7 @@ Object { Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [ "foo", ], @@ -2499,6 +2898,7 @@ Object { Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, @@ -2508,6 +2908,7 @@ Object { Object { "context": false, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, @@ -2517,6 +2918,7 @@ Object { Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, @@ -2526,6 +2928,7 @@ Object { Object { "context": Array [], "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, @@ -2535,6 +2938,7 @@ Object { Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [ "foo", "bar", @@ -2616,6 +3020,7 @@ Object { Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, @@ -2625,6 +3030,7 @@ Object { Object { "context": false, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, @@ -2634,6 +3040,7 @@ Object { Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, @@ -2643,6 +3050,7 @@ Object { Object { "context": Array [], "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, @@ -2652,6 +3060,7 @@ Object { Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [ "bar", ], @@ -2940,488 +3349,6 @@ Object { } `; -exports[`ProfilingCache should record when props/state/hooks change: CommitDetails commitIndex: 0 1`] = ` -Object { - "changeDescriptions": Map {}, - "duration": 0, - "fiberActualDurations": Map { - 1 => 0, - 2 => 0, - 3 => 0, - 4 => 0, - 5 => 0, - 6 => 0, - 7 => 0, - }, - "fiberSelfDurations": Map { - 1 => 0, - 2 => 0, - 3 => 0, - 4 => 0, - 5 => 0, - 6 => 0, - 7 => 0, - }, - "interactionIDs": Array [], - "priorityLevel": "Immediate", - "screenshot": null, - "timestamp": 0, -} -`; - -exports[`ProfilingCache should record when props/state/hooks change: CommitDetails commitIndex: 1 1`] = ` -Object { - "changeDescriptions": Map { - 5 => Object { - "context": null, - "didHooksChange": true, - "props": Array [ - "count", - ], - "state": null, - }, - 4 => Object { - "context": true, - "didHooksChange": false, - "props": Array [], - "state": null, - }, - 7 => Object { - "context": null, - "didHooksChange": true, - "props": Array [ - "count", - ], - "state": null, - }, - 6 => Object { - "context": Array [ - "count", - ], - "didHooksChange": false, - "props": Array [], - "state": null, - }, - 2 => Object { - "context": null, - "didHooksChange": false, - "props": Array [], - "state": Array [ - "count", - ], - }, - }, - "duration": 0, - "fiberActualDurations": Map { - 5 => 0, - 4 => 0, - 7 => 0, - 6 => 0, - 3 => 0, - 2 => 0, - }, - "fiberSelfDurations": Map { - 5 => 0, - 4 => 0, - 7 => 0, - 6 => 0, - 3 => 0, - 2 => 0, - }, - "interactionIDs": Array [], - "priorityLevel": "Immediate", - "screenshot": null, - "timestamp": 0, -} -`; - -exports[`ProfilingCache should record when props/state/hooks change: imported data 1`] = ` -Object { - "dataForRoots": Array [ - Object { - "commitData": Array [ - Object { - "changeDescriptions": Array [], - "duration": 0, - "fiberActualDurations": Array [ - Array [ - 1, - 0, - ], - Array [ - 2, - 0, - ], - Array [ - 3, - 0, - ], - Array [ - 4, - 0, - ], - Array [ - 5, - 0, - ], - Array [ - 6, - 0, - ], - Array [ - 7, - 0, - ], - ], - "fiberSelfDurations": Array [ - Array [ - 1, - 0, - ], - Array [ - 2, - 0, - ], - Array [ - 3, - 0, - ], - Array [ - 4, - 0, - ], - Array [ - 5, - 0, - ], - Array [ - 6, - 0, - ], - Array [ - 7, - 0, - ], - ], - "interactionIDs": Array [], - "priorityLevel": "Immediate", - "screenshot": null, - "timestamp": 0, - }, - Object { - "changeDescriptions": Array [ - Array [ - 5, - Object { - "context": null, - "didHooksChange": true, - "props": Array [ - "count", - ], - "state": null, - }, - ], - Array [ - 4, - Object { - "context": true, - "didHooksChange": false, - "props": Array [], - "state": null, - }, - ], - Array [ - 7, - Object { - "context": null, - "didHooksChange": true, - "props": Array [ - "count", - ], - "state": null, - }, - ], - Array [ - 6, - Object { - "context": Array [ - "count", - ], - "didHooksChange": false, - "props": Array [], - "state": null, - }, - ], - Array [ - 2, - Object { - "context": null, - "didHooksChange": false, - "props": Array [], - "state": Array [ - "count", - ], - }, - ], - ], - "duration": 0, - "fiberActualDurations": Array [ - Array [ - 5, - 0, - ], - Array [ - 4, - 0, - ], - Array [ - 7, - 0, - ], - Array [ - 6, - 0, - ], - Array [ - 3, - 0, - ], - Array [ - 2, - 0, - ], - ], - "fiberSelfDurations": Array [ - Array [ - 5, - 0, - ], - Array [ - 4, - 0, - ], - Array [ - 7, - 0, - ], - Array [ - 6, - 0, - ], - Array [ - 3, - 0, - ], - Array [ - 2, - 0, - ], - ], - "interactionIDs": Array [], - "priorityLevel": "Immediate", - "screenshot": null, - "timestamp": 0, - }, - ], - "displayName": "LegacyContextProvider", - "initialTreeBaseDurations": Array [], - "interactionCommits": Array [], - "interactions": Array [], - "operations": Array [ - Array [ - 1, - 1, - 110, - 21, - 76, - 101, - 103, - 97, - 99, - 121, - 67, - 111, - 110, - 116, - 101, - 120, - 116, - 80, - 114, - 111, - 118, - 105, - 100, - 101, - 114, - 16, - 67, - 111, - 110, - 116, - 101, - 120, - 116, - 46, - 80, - 114, - 111, - 118, - 105, - 100, - 101, - 114, - 21, - 77, - 111, - 100, - 101, - 114, - 110, - 67, - 111, - 110, - 116, - 101, - 120, - 116, - 67, - 111, - 110, - 115, - 117, - 109, - 101, - 114, - 26, - 70, - 117, - 110, - 99, - 116, - 105, - 111, - 110, - 67, - 111, - 109, - 112, - 111, - 110, - 101, - 110, - 116, - 87, - 105, - 116, - 104, - 72, - 111, - 111, - 107, - 115, - 21, - 76, - 101, - 103, - 97, - 99, - 121, - 67, - 111, - 110, - 116, - 101, - 120, - 116, - 67, - 111, - 110, - 115, - 117, - 109, - 101, - 114, - 1, - 1, - 11, - 1, - 1, - 1, - 2, - 1, - 1, - 0, - 1, - 0, - 4, - 2, - 0, - 1, - 3, - 2, - 2, - 2, - 2, - 0, - 4, - 3, - 0, - 1, - 4, - 1, - 3, - 2, - 3, - 0, - 4, - 4, - 0, - 1, - 5, - 5, - 4, - 4, - 4, - 0, - 4, - 5, - 0, - 1, - 6, - 1, - 3, - 2, - 5, - 0, - 4, - 6, - 0, - 1, - 7, - 5, - 6, - 6, - 4, - 0, - 4, - 7, - 0, - ], - Array [ - 1, - 1, - 0, - ], - ], - "rootID": 1, - "snapshots": Array [], - }, - ], - "version": 4, -} -`; - exports[`ProfilingCache should report every traced interaction: Interactions 1`] = ` Array [ Object { @@ -3445,7 +3372,38 @@ Object { Object { "commitData": Array [ Object { - "changeDescriptions": Array [], + "changeDescriptions": Array [ + Array [ + 2, + Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + ], + Array [ + 3, + Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + ], + Array [ + 4, + Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + ], + ], "duration": 11, "fiberActualDurations": Array [ Array [ @@ -3497,15 +3455,27 @@ Object { Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [], "state": null, }, ], + Array [ + 5, + Object { + "context": null, + "didHooksChange": false, + "isFirstMount": true, + "props": null, + "state": null, + }, + ], Array [ 2, Object { "context": null, "didHooksChange": false, + "isFirstMount": false, "props": Array [ "count", ], diff --git a/src/backend/renderer.js b/src/backend/renderer.js index 90accb8feb..18f22ff39b 100644 --- a/src/backend/renderer.js +++ b/src/backend/renderer.js @@ -649,7 +649,7 @@ export function attach( } function getChangeDescription( - prevFiber: Fiber, + prevFiber: Fiber | null, nextFiber: Fiber ): ChangeDescription | null { switch (getElementTypeForFiber(nextFiber)) { @@ -657,21 +657,32 @@ export function attach( case ElementTypeFunction: case ElementTypeMemo: case ElementTypeForwardRef: - return { - didHooksChange: didHooksChange( - prevFiber.memoizedState, - nextFiber.memoizedState - ), - context: getContextChangedKeys(nextFiber), - props: getChangedKeys( - prevFiber.memoizedProps, - nextFiber.memoizedProps - ), - state: getChangedKeys( - prevFiber.memoizedState, - nextFiber.memoizedState - ), - }; + if (prevFiber === null) { + return { + context: null, + didHooksChange: false, + isFirstMount: true, + props: null, + state: null, + }; + } else { + return { + context: getContextChangedKeys(nextFiber), + didHooksChange: didHooksChange( + prevFiber.memoizedState, + nextFiber.memoizedState + ), + isFirstMount: false, + props: getChangedKeys( + prevFiber.memoizedProps, + nextFiber.memoizedProps + ), + state: getChangedKeys( + prevFiber.memoizedState, + nextFiber.memoizedState + ), + }; + } default: return null; } @@ -1214,13 +1225,12 @@ export function attach( actualDuration ); - if (recordChangeDescriptions && metadata.changeDescriptions) { - const changeDescription = - alternate === null - ? null - : getChangeDescription(alternate, fiber); + if (recordChangeDescriptions) { + const changeDescription = getChangeDescription(alternate, fiber); if (changeDescription !== null) { - metadata.changeDescriptions.set(id, changeDescription); + if (metadata.changeDescriptions !== null) { + metadata.changeDescriptions.set(id, changeDescription); + } } updateContextsForFiber(fiber); diff --git a/src/backend/types.js b/src/backend/types.js index 5b55945742..587e0cdd2c 100644 --- a/src/backend/types.js +++ b/src/backend/types.js @@ -116,6 +116,7 @@ export type ReactRenderer = { export type ChangeDescription = {| context: Array | boolean | null, didHooksChange: boolean, + isFirstMount: boolean, props: Array | null, state: Array | null, |}; diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js index 33c29de268..0fba2d766d 100644 --- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js +++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js @@ -104,7 +104,10 @@ function WhatChanged({ const changeDescription = changeDescriptions.get(fiberID); if (changeDescription == null) { - // This indicates that the component mounted during this commit + return null; + } + + if (changeDescription.isFirstMount) { return (
@@ -117,6 +120,29 @@ function WhatChanged({ const changes = []; + if (changeDescription.context === true) { + changes.push( +
+ • Context changed +
+ ); + } else if ( + typeof changeDescription.context === 'object' && + changeDescription.context !== null && + changeDescription.context.length !== 0 + ) { + changes.push( +
+ • Context changed: + {changeDescription.context.map(key => ( + + {key} + + ))} +
+ ); + } + if (changeDescription.didHooksChange) { changes.push(
@@ -124,6 +150,7 @@ function WhatChanged({
); } + if ( changeDescription.props !== null && changeDescription.props.length !== 0 @@ -139,6 +166,7 @@ function WhatChanged({
); } + if ( changeDescription.state !== null && changeDescription.state.length !== 0 diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js index 514ff815cf..a736a2ee9d 100644 --- a/src/devtools/views/Profiler/types.js +++ b/src/devtools/views/Profiler/types.js @@ -35,6 +35,7 @@ export type SnapshotNode = {| export type ChangeDescription = {| context: Array | boolean | null, didHooksChange: boolean, + isFirstMount: boolean, props: Array | null, state: Array | null, |};