Guard against legacy context being not supported in DevTools fixture

Legacy context was removed from experimental builds so the default setup would hide important fixtures.

Now it just assumes that any crash within the tree rendering legacy context is due to legacy context not being supported.

I didn't remove since this fixture can be used with older versions of React where we would want to check if legacy
context still works.

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

@@ -273,15 +273,43 @@ class ModernClassContextConsumerWithUpdates extends Component<any> {
  }
 }
 
+class LegacyContext extends React.Component {
+ state = {supportsLegacyContext: true};
+
+ static getDerivedStateFromError(error: any) {
+ return {supportsLegacyContext: false};
+ }
+
+ componentDidCatch(error: any, info: any) {
+ console.info(
+ 'Assuming legacy context is not supported in this React version due to: ',
+ error,
+ info,
+ );
+ }
+
+ render() {
+ if (!this.state.supportsLegacyContext) {
+ return <p>This version of React does not support legacy context.</p>;
+ }
+
+ return (
+ <React.Fragment>
+ <LegacyContextProvider>
+ <LegacyContextConsumer />
+ </LegacyContextProvider>
+ <LegacyContextProviderWithUpdates />
+ </React.Fragment>
+ );
+ }
+}
+
 export default function Contexts(): React.Node {
  return (
  <div>
  <h1>Contexts</h1>
  <ul>
- <LegacyContextProvider>
- <LegacyContextConsumer />
- </LegacyContextProvider>
- <LegacyContextProviderWithUpdates />
+ <LegacyContext />
  <ModernContext.Provider value={contextData}>
  <ModernContext.Consumer>
  {(value: $FlowFixMe) =>