[pull] main from facebook:main

packages/react-debug-tools/src/ReactDebugHooks.js

@@ -467,9 +467,11 @@ function useSyncExternalStore<T>(
   // useSyncExternalStore() composes multiple hooks internally.
   // Advance the current hook index the same number of times
   // so that subsequent hooks have the right memoized state.
-  nextHook(); // SyncExternalStore
+  const hook = nextHook(); // SyncExternalStore
   nextHook(); // Effect
-  const value = getSnapshot();
+  // Read from hook.memoizedState to get the value that was used during render,
+  // not the current value from getSnapshot() which may have changed.
+  const value = hook !== null ? hook.memoizedState : getSnapshot();
   hookLog.push({
     displayName: null,
     primitive: 'SyncExternalStore',

packages/react-devtools-extensions/src/main/elementSelection.js

@@ -32,7 +32,7 @@ export function setReactSelectionFromBrowser(bridge) {
           return;
         }
 
-        // Remember to sync the selection next time we show Components tab.
+        // Remember to sync the selection next time we show inspected element
         bridge.send('syncSelectionFromBuiltinElementsPanel');
       }
     },

packages/react-devtools-extensions/src/main/index.js

@@ -206,6 +206,7 @@ function createBridgeAndStore() {
         bridge,
         browserTheme: getBrowserTheme(),
         componentsPortalContainer,
+        inspectedElementPortalContainer,
         profilerPortalContainer,
         editorPortalContainer,
         currentSelectedSource,
@@ -278,6 +279,51 @@ function createComponentsPanel() {
   );
 }
 
+function createElementsInspectPanel() {
+  if (inspectedElementPortalContainer) {
+    // Panel is created and user opened it at least once
+    ensureInitialHTMLIsCleared(inspectedElementPortalContainer);
+    render();
+
+    return;
+  }
+
+  if (inspectedElementPane) {
+    // Panel is created, but wasn't opened yet, so no document is present for it
+    return;
+  }
+
+  const elementsPanel = chrome.devtools.panels.elements;
+  if (__IS_FIREFOX__ || !elementsPanel || !elementsPanel.createSidebarPane) {
+    // Firefox will not pass the window to the onShown listener despite setPage
+    // being called.
+    // See https://bugzilla.mozilla.org/show_bug.cgi?id=2010549
+
+    // May not be supported in some browsers.
+    // See https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools/panels/ElementsPanel/createSidebarPane#browser_compatibility
+    return;
+  }
+
+  elementsPanel.createSidebarPane('React Element ⚛', createdPane => {
+    inspectedElementPane = createdPane;
+
+    createdPane.setPage('panel.html');
+    createdPane.setHeight('75px');
+
+    createdPane.onShown.addListener(portal => {
+      inspectedElementPortalContainer = portal.container;
+      if (inspectedElementPortalContainer != null && render) {
+        ensureInitialHTMLIsCleared(inspectedElementPortalContainer);
+
+        render();
+        portal.injectStyles(cloneStyleTags);
+
+        logEvent({event_name: 'selected-inspected-element-pane'});
+      }
+    });
+  });
+}
+
 function createProfilerPanel() {
   if (profilerPortalContainer) {
     // Panel is created and user opened it at least once
@@ -508,6 +554,7 @@ function mountReactDevTools() {
   createComponentsPanel();
   createProfilerPanel();
   createSourcesEditorPanel();
+  createElementsInspectPanel();
   // Suspense Tab is created via the hook
   // TODO(enableSuspenseTab): Create eagerly once Suspense tab is stable
 }
@@ -556,10 +603,12 @@ let componentsPanel = null;
 let profilerPanel = null;
 let suspensePanel = null;
 let editorPane = null;
+let inspectedElementPane = null;
 let componentsPortalContainer = null;
 let profilerPortalContainer = null;
 let suspensePortalContainer = null;
 let editorPortalContainer = null;
+let inspectedElementPortalContainer = null;
 
 let mostRecentOverrideTab = null;
 let render = null;

packages/react-devtools-shared/src/__tests__/profilerChangeDescriptions-test.js

@@ -90,7 +90,7 @@ describe('Profiler change descriptions', () => {
       {
         "context": true,
         "didHooksChange": false,
-        "hooks": null,
+        "hooks": [],
         "isFirstMount": false,
         "props": [],
         "state": null,
@@ -110,7 +110,7 @@ describe('Profiler change descriptions', () => {
       {
         "context": true,
         "didHooksChange": false,
-        "hooks": null,
+        "hooks": [],
         "isFirstMount": false,
         "props": [],
         "state": null,
@@ -125,7 +125,7 @@ describe('Profiler change descriptions', () => {
       {
         "context": false,
         "didHooksChange": false,
-        "hooks": null,
+        "hooks": [],
         "isFirstMount": false,
         "props": [],
         "state": null,
@@ -140,7 +140,7 @@ describe('Profiler change descriptions', () => {
       {
         "context": true,
         "didHooksChange": false,
-        "hooks": null,
+        "hooks": [],
         "isFirstMount": false,
         "props": [],
         "state": null,