Misc small things: Updated OVERVIEW, TODO, debug log, and minor forma…

…tting changes
facebook · Dec 21, 2020 · 6f15c87 · 6f15c87
1 parent b79d1d9
commit 6f15c87
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 7 deletions.
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
@@ -1017,8 +1017,10 @@ export default class Store extends EventEmitter<{|
         case TREE_OPERATION_REMOVE_ROOT: {
           i += 1;
 
+          const id = operations[1];
+
           if (__DEBUG__) {
-            debug('Remove all fibers');
+            debug(`Remove root ${id}`);
           }
 
           const recursivelyDeleteElements = elementID => {
@@ -1032,7 +1034,6 @@ export default class Store extends EventEmitter<{|
             }
           };
 
-          const id = operations[1];
           const root = ((this._idToElement.get(id): any): Element);
           recursivelyDeleteElements(id);
 

diff --git a/...ct-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js b/...ct-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
@@ -36,7 +36,7 @@ export default function InspectedElementErrorsAndWarningsTree({
 
   const {errors, warnings} = inspectedElement;
 
-  // TODO Would be nice if there were some way to either:
+  // TODO (inline errors) Would be nice if there were some way to either:
   // (1) Temporarily disable the button after click (unstable_useTransition?) or
   // (2) Immediately reflect the cleared list of warnings/errors.
   // The current clear button feels a little unresponsive because we wait to poll for new values.

diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
@@ -210,7 +210,7 @@ export function printOperationsArray(operations: Array<number>) {
       case TREE_OPERATION_REMOVE_ROOT: {
         i += 1;
 
-        logs.push(`Remove all nodes`);
+        logs.push(`Remove root ${rootID}`);
         break;
       }
       case TREE_OPERATION_REORDER_CHILDREN: {

diff --git a/packages/react-devtools/OVERVIEW.md b/packages/react-devtools/OVERVIEW.md
@@ -141,6 +141,7 @@ While profiling is in progress, we send an extra operation any time a fiber is a
 For example, updating the base duration for a fiber with an id of 1:
 ```js
 [
+  4,  // update tree base duration operation
   4,  // tree base duration operation
   1,  // fiber id
   32, // new tree base duration value
@@ -156,18 +157,24 @@ We only send the serialized messages as part of the `inspectElement` event.
 
 ```js
 [
+  5, // update error/warning counts operation
   4, // fiber id
   0, // number of calls to console.error from that fiber
   3, // number of calls to console.warn from that fiber
 ]
 ```
 
-#### Clearing a root
+#### Removing a root
 
-Special case of unmounting a fiber. Lets us avoid sending all the fiber ids of this root (reducing bridge traffic) and preserves fiber ids if we immediately remount when e.g. applying a component filter.
+Special case of unmounting an entire root (include its decsendants). This specialized message replaces what would otherwise be a series of remove-node operations. It is currently only used in one case: updating component filters. The primary motivation for this is actually to preserve fiber ids for components that are re-added to the tree after the updated filters have been applied. This preserves mappings between the Fiber (id) and things like error and warning logs.
 
-This operation has no additional payload because the root id is already sent in the second entry of the update.
+```js
+[
+  6, // remove root operation
+]
+```
 
+This operation has no additional payload because renderer and root ids are already sent at the beginning of every operations payload.
 
 ## Reconstructing the tree