feat(devtools): Allow editing context value

Author: eps1lon

packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js

@@ -33,6 +33,7 @@ import {
   ElementTypeFunction,
   ElementTypeMemo,
   ElementTypeSuspense,
+  ElementTypeContext,
 } from 'react-devtools-shared/src/types';
 
 import styles from './SelectedElement.css';
@@ -362,6 +363,13 @@ function InspectedElementView({
         });
       }
     };
+  } else if (type === ElementTypeContext) {
+    overridePropsFn = (path: Array<string | number>, value: any) => {
+      const rendererID = store.getRendererIDForElement(id);
+      if (rendererID !== null) {
+        bridge.send('overrideProps', {id, path, rendererID, value});
+      }
+    };
   }
 
   return (
@@ -375,7 +383,9 @@ function InspectedElementView({
           overrideValueFn={overridePropsFn}
           pathRoot="props"
           showWhenEmpty={true}
-          canAddEntries={typeof overridePropsFn === 'function'}
+          canAddEntries={
+            typeof overridePropsFn === 'function' && type !== ElementTypeContext
+          }
         />
         {type === ElementTypeSuspense ? (
           <InspectedElementTree

packages/react-devtools-shell/src/app/InspectableElements/Contexts.js

@@ -104,7 +104,9 @@ export default function Contexts() {
         <LegacyContextConsumer />
       </LegacyContextProvider>
       <ModernContext.Provider value={contextData}>
-        <ModernContext.Consumer>{value => null}</ModernContext.Consumer>
+        <ModernContext.Consumer>
+          {value => <pre>{JSON.stringify(value, null, 2)}</pre>}
+        </ModernContext.Consumer>
         <ModernContextType />
       </ModernContext.Provider>
       <FunctionalContextConsumer />