Auto-refresh inspected element right after cleaning warings/errors

Brian Vaughn · Brian Vaughn · commit 5d10e4133835 · 2020-12-21T10:58:53.000-05:00
This is a temporary solution until we are using a more modern Cache in DevTools.
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
@@ -396,10 +396,6 @@ export default class Store extends EventEmitter<{|
         rendererID,
         id,
       });
-
-      // Immediately refresh the inspected element.
-      // Waiting for the polling timer makes the action feel less responsive.
-      this._bridge.send('inspectElement', {id, rendererID});
     }
   }
 
@@ -414,10 +410,6 @@ export default class Store extends EventEmitter<{|
         rendererID,
         id,
       });
-
-      // Immediately refresh the inspected element.
-      // Waiting for the polling timer makes the action feel less responsive.
-      this._bridge.send('inspectElement', {id, rendererID});
     }
   }
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -51,10 +51,13 @@ export type GetInspectedElement = (
   id: number,
 ) => InspectedElementFrontend | null;
 
+type RefreshInspectedElement = () => void;
+
 export type InspectedElementContextType = {|
   copyInspectedElementPath: CopyInspectedElementPath,
   getInspectedElementPath: GetInspectedElementPath,
   getInspectedElement: GetInspectedElement,
+  refreshInspectedElement: RefreshInspectedElement,
   storeAsGlobal: StoreAsGlobal,
 |};
 
@@ -159,6 +162,15 @@ function InspectedElementContextController({children}: Props) {
   // would itself be blocked by the same render that suspends (waiting for the data).
   const {selectedElementID} = useContext(TreeStateContext);
 
+  const refreshInspectedElement = useCallback<RefreshInspectedElement>(() => {
+    if (selectedElementID !== null) {
+      const rendererID = store.getRendererIDForElement(selectedElementID);
+      if (rendererID !== null) {
+        bridge.send('inspectElement', {id: selectedElementID, rendererID});
+      }
+    }
+  }, [bridge, selectedElementID]);
+
   const [
     currentlyInspectedElement,
     setCurrentlyInspectedElement,
@@ -347,6 +359,7 @@ function InspectedElementContextController({children}: Props) {
       copyInspectedElementPath,
       getInspectedElement,
       getInspectedElementPath,
+      refreshInspectedElement,
       storeAsGlobal,
     }),
     // InspectedElement is used to invalidate the cache and schedule an update with React.
@@ -355,6 +368,7 @@ function InspectedElementContextController({children}: Props) {
       currentlyInspectedElement,
       getInspectedElement,
       getInspectedElementPath,
+      refreshInspectedElement,
       storeAsGlobal,
     ],
   );
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
@@ -8,12 +8,14 @@
  */
 
 import * as React from 'react';
+import {useContext} from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import Store from '../../store';
 import sharedStyles from './InspectedElementSharedStyles.css';
 import styles from './InspectedElementErrorsAndWarningsTree.css';
 import {SettingsContext} from '../Settings/SettingsContext';
+import {InspectedElementContext} from './InspectedElementContext';
 
 import type {InspectedElement} from './types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
@@ -29,19 +31,33 @@ export default function InspectedElementErrorsAndWarningsTree({
   inspectedElement,
   store,
 }: Props) {
-  const {showInlineWarningsAndErrors} = React.useContext(SettingsContext);
+  const {refreshInspectedElement} = useContext(InspectedElementContext);
+
+  const {showInlineWarningsAndErrors} = useContext(SettingsContext);
   if (!showInlineWarningsAndErrors) {
     return null;
   }
 
   const {errors, warnings} = inspectedElement;
 
   const clearErrors = () => {
-    store.clearErrorsForElement(inspectedElement.id);
+    const {id} = inspectedElement;
+    store.clearErrorsForElement(id);
+
+    // Immediately poll for updated data.
+    // This avoids a delay between clicking the clear button and refreshing errors.
+    // Ideally this would be done with useTranstion but that requires updating to a newer Cache strategy.
+    refreshInspectedElement();
   };
 
   const clearWarnings = () => {
-    store.clearWarningsForElement(inspectedElement.id);
+    const {id} = inspectedElement;
+    store.clearWarningsForElement(id);
+
+    // Immediately poll for updated data.
+    // This avoids a delay between clicking the clear button and refreshing warnings.
+    // Ideally this would be done with useTranstion but that requires updating to a newer Cache strategy.
+    refreshInspectedElement();
   };
 
   return (

Original file line number	Diff line number	Diff line change
`@@ -396,10 +396,6 @@ export default class Store extends EventEmitter<{\|`
`396`	`396`	`rendererID,`
`397`	`397`	`id,`
`398`	`398`	`});`
`399`		`-`
`400`		`- // Immediately refresh the inspected element.`
`401`		`- // Waiting for the polling timer makes the action feel less responsive.`
`402`		`- this._bridge.send('inspectElement', {id, rendererID});`
`403`	`399`	`}`
`404`	`400`	`}`
`405`	`401`
`@@ -414,10 +410,6 @@ export default class Store extends EventEmitter<{\|`
`414`	`410`	`rendererID,`
`415`	`411`	`id,`
`416`	`412`	`});`
`417`		`-`
`418`		`- // Immediately refresh the inspected element.`
`419`		`- // Waiting for the polling timer makes the action feel less responsive.`
`420`		`- this._bridge.send('inspectElement', {id, rendererID});`
`421`	`413`	`}`
`422`	`414`	`}`
`423`	`415`