Show DevTools backend and frontend versions in UI

packages/react-devtools-shared/src/backend/agent.js

@@ -185,6 +185,7 @@ export default class Agent extends EventEmitter<{|
     bridge.addListener('clearWarningsForFiberID', this.clearWarningsForFiberID);
     bridge.addListener('copyElementPath', this.copyElementPath);
     bridge.addListener('deletePath', this.deletePath);
+    bridge.addListener('getBackendVersion', this.getBackendVersion);
     bridge.addListener('getBridgeProtocol', this.getBridgeProtocol);
     bridge.addListener('getProfilingData', this.getProfilingData);
     bridge.addListener('getProfilingStatus', this.getProfilingStatus);
@@ -225,7 +226,12 @@ export default class Agent extends EventEmitter<{|
       bridge.send('profilingStatus', true);
     }
 
-    // Send the Bridge protocol after initialization in case the frontend has already requested it.
+    // Send the Bridge protocol and backend versions, after initialization, in case the frontend has already requested it.
+    // The Store may be instantiated beore the agent.
+    const version = process.env.DEVTOOLS_VERSION;
+    if (version) {
+      this._bridge.send('backendVersion', version);
+    }
     this._bridge.send('bridgeProtocol', currentBridgeProtocol);
 
     // Notify the frontend if the backend supports the Storage API (e.g. localStorage).
@@ -322,6 +328,13 @@ export default class Agent extends EventEmitter<{|
     return null;
   }
 
+  getBackendVersion = () => {
+    const version = process.env.DEVTOOLS_VERSION;
+    if (version) {
+      this._bridge.send('backendVersion', version);
+    }
+  };
+
   getBridgeProtocol = () => {
     this._bridge.send('bridgeProtocol', currentBridgeProtocol);
   };

packages/react-devtools-shared/src/bridge.js

@@ -185,6 +185,7 @@ type SavedPreferencesParams = {|
 |};
 
 export type BackendEvents = {|
+  backendVersion: [string],
   bridgeProtocol: [BridgeProtocol],
   extensionBackendInitialized: [],
   fastRefreshScheduled: [],
@@ -219,6 +220,7 @@ type FrontendEvents = {|
   clearWarningsForFiberID: [ElementAndRendererID],
   copyElementPath: [CopyElementPathParams],
   deletePath: [DeletePath],
+  getBackendVersion: [],
   getBridgeProtocol: [],
   getOwnersList: [ElementAndRendererID],
   getProfilingData: [{|rendererID: RendererID|}],

packages/react-devtools-shared/src/devtools/store.js

@@ -85,6 +85,7 @@ export type Capabilities = {|
  * ContextProviders can subscribe to the Store for specific things they want to provide.
  */
 export default class Store extends EventEmitter<{|
+  backendVersion: [],
   collapseNodesByDefault: [],
   componentFilters: [],
   error: [Error],
@@ -98,6 +99,10 @@ export default class Store extends EventEmitter<{|
   unsupportedBridgeProtocolDetected: [],
   unsupportedRendererVersionDetected: [],
 |}> {
+  // If the backend version is new enough to report its (NPM) version, this is it.
+  // This version may be displayed by the frontend for debugging purposes.
+  _backendVersion: string | null = null;
+
   _bridge: FrontendBridge;
 
   // Computed whenever _errorsAndWarnings Map changes.
@@ -264,6 +269,9 @@ export default class Store extends EventEmitter<{|
       bridge.addListener('bridgeProtocol', this.onBridgeProtocol);
       bridge.send('getBridgeProtocol');
     }
+
+    bridge.addListener('backendVersion', this.onBridgeBackendVersion);
+    bridge.send('getBackendVersion');
   }
 
   // This is only used in tests to avoid memory leaks.
@@ -301,6 +309,10 @@ export default class Store extends EventEmitter<{|
     }
   }
 
+  get backendVersion(): string | null {
+    return this._backendVersion;
+  }
+
   get collapseNodesByDefault(): boolean {
     return this._collapseNodesByDefault;
   }
@@ -1333,6 +1345,7 @@ export default class Store extends EventEmitter<{|
       'unsupportedRendererVersion',
       this.onBridgeUnsupportedRendererVersion,
     );
+    bridge.removeListener('backendVersion', this.onBridgeBackendVersion);
     bridge.removeListener('bridgeProtocol', this.onBridgeProtocol);
 
     if (this._onBridgeProtocolTimeoutID !== null) {
@@ -1359,6 +1372,11 @@ export default class Store extends EventEmitter<{|
     this.emit('unsupportedRendererVersionDetected');
   };
 
+  onBridgeBackendVersion = (backendVersion: string) => {
+    this._backendVersion = backendVersion;
+    this.emit('backendVersion');
+  };
+
   onBridgeProtocol = (bridgeProtocol: BridgeProtocol) => {
     if (this._onBridgeProtocolTimeoutID !== null) {
       clearTimeout(this._onBridgeProtocolTimeoutID);

packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js

@@ -8,13 +8,26 @@
  */
 
 import * as React from 'react';
-import {useContext} from 'react';
+import {useContext, useMemo} from 'react';
 import {SettingsContext} from './SettingsContext';
 import {StoreContext} from '../context';
 import {CHANGE_LOG_URL} from 'react-devtools-shared/src/constants';
 
 import styles from './SettingsShared.css';
 
+function getChangeLogUrl(version: ?string): string | null {
+  if (!version) {
+    return null;
+  }
+
+  // Version numbers are in the format of: <major>.<minor>.<patch>-<sha>
+  // e.g. "4.23.0-f0dd459e0"
+  // GitHub CHANGELOG headers are in the format of: <major>.<minor>.<patch>
+  // but the "." are stripped from anchor tags, becomming: <major><minor><patch>
+  const versionAnchor = version.replace(/^(\d+)\.(\d+)\.(\d+).*/, '$1$2$3');
+  return `${CHANGE_LOG_URL}#${versionAnchor}`;
+}
+
 export default function GeneralSettings(_: {||}) {
   const {
     displayDensity,
@@ -25,7 +38,11 @@ export default function GeneralSettings(_: {||}) {
     traceUpdatesEnabled,
   } = useContext(SettingsContext);
 
-  const {supportsTraceUpdates} = useContext(StoreContext);
+  const {backendVersion, supportsTraceUpdates} = useContext(StoreContext);
+  const frontendVersion = process.env.DEVTOOLS_VERSION;
+
+  const showBackendVersion =
+    backendVersion && backendVersion !== frontendVersion;
 
   return (
     <div className={styles.Settings}>
@@ -70,15 +87,51 @@ export default function GeneralSettings(_: {||}) {
       )}
 
       <div className={styles.ReleaseNotes}>
+        {showBackendVersion && (
+          <div>
+            <ul className={styles.VersionsList}>
+              <li>
+                <Version
+                  label="DevTools backend version:"
+                  version={backendVersion}
+                />
+              </li>
+              <li>
+                <Version
+                  label="DevTools frontend version:"
+                  version={frontendVersion}
+                />
+              </li>
+            </ul>
+          </div>
+        )}
+        {!showBackendVersion && (
+          <Version label="DevTools version:" version={frontendVersion} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Version({label, version}: {|label: string, version: ?string|}) {
+  const changelogLink = useMemo(() => {
+    return getChangeLogUrl(version);
+  }, [version]);
+
+  if (version == null) {
+    return null;
+  } else {
+    return (
+      <>
+        {label}{' '}
         <a
           className={styles.ReleaseNotesLink}
           target="_blank"
           rel="noopener noreferrer"
-          href={CHANGE_LOG_URL}>
-          View release notes
-        </a>{' '}
-        for DevTools version {process.env.DEVTOOLS_VERSION}
-      </div>
-    </div>
-  );
+          href={changelogLink}>
+          {version}
+        </a>
+      </>
+    );
+  }
 }

packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css

@@ -149,4 +149,10 @@
 
 .Warning {
   color: var(--color-error-text);
+}
+
+.VersionsList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }

packages/react-devtools-shell/src/app/index.js

@@ -10,7 +10,6 @@ import Iframe from './Iframe';
 import EditableProps from './EditableProps';
 import ElementTypes from './ElementTypes';
 import Hydration from './Hydration';
-import InlineWarnings from './InlineWarnings';
 import InspectableElements from './InspectableElements';
 import ReactNativeWeb from './ReactNativeWeb';
 import ToDoList from './ToDoList';
@@ -83,7 +82,6 @@ function mountTestApp() {
   mountApp(Hydration);
   mountApp(ElementTypes);
   mountApp(EditableProps);
-  mountApp(InlineWarnings);
   mountApp(ReactNativeWeb);
   mountApp(Toggle);
   mountApp(ErrorBoundaries);