Auto-refresh inspected element right after cleaning warings/errors

This is a temporary solution until we are using a more modern Cache in DevTools.

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});
     }
   }
 

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,
     ],
   );

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 (