Skip to content

Commit 93ff544

Browse files
hoxyqhoxyq
committed
[DevTools] Use Popover API for TraceUpdates highlighting (#32614)
## Summary When using React DevTools to highlight component updates, the highlights would sometimes appear behind elements that use the browser's [top-layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer) (such as `<dialog>` elements or components using the Popover API). This made it difficult to see which components were updating when they were inside or behind top-layer elements. This PR fixes the issue by using the Popover API to ensure that highlighting appears on top of all content, including elements in the top-layer. The implementation maintains backward compatibility with browsers that don't support the Popover API. ## How did you test this change? I tested this change in the following ways: 1. Manually tested in Chrome (which supports the Popover API) with: - Created a test application with React components inside `<dialog>` elements and custom elements using the Popover API - Verified that component highlighting appears above these elements when they update - Confirmed that highlighting displays correctly for nested components within top-layer elements 2. Verified backward compatibility: - Tested in browsers without Popover API support to ensure fallback behavior works correctly - Confirmed that no errors occur and highlighting still functions as before 3. Ran the React DevTools test suite: - All tests pass successfully - No regressions were introduced [demo-page](https://devtools-toplayer-demo.vercel.app/) [demo-repo](https://github.com/yongsk0066/devtools-toplayer-demo) ### AS-IS https://github.com/user-attachments/assets/dc2e1281-969f-4f61-82c3-480153916969 ### TO-BE https://github.com/user-attachments/assets/dd52ce35-816c-42f0-819b-0d5d0a8a21e5 DiffTrain build for [53c9f81](53c9f81)
1 parent 8b54080 commit 93ff544

24 files changed

+87
-87
lines changed

‎compiled-rn/VERSION_NATIVE_FB‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
19.2.0-native-fb-e5a8de81-20250506
1+
19.2.0-native-fb-53c9f810-20250507

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-dev.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<499336b510771eac34cdb1f2efd2783c>>
10+
* @generated SignedSource<<86589b21e071f6b4eb4375e25b361e51>>
1111
*/
1212

1313
"use strict";
@@ -404,5 +404,5 @@ __DEV__ &&
404404
exports.useFormStatus = function () {
405405
return resolveDispatcher().useHostTransitionStatus();
406406
};
407-
exports.version = "19.2.0-native-fb-e5a8de81-20250506";
407+
exports.version = "19.2.0-native-fb-53c9f810-20250507";
408408
})();

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-prod.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<e0055236c23545f61906397ccc9a19f8>>
10+
* @generated SignedSource<<b90ef3a4861d2976f835ec6186efee00>>
1111
*/
1212

1313
"use strict";
@@ -203,4 +203,4 @@ exports.useFormState = function (action, initialState, permalink) {
203203
exports.useFormStatus = function () {
204204
return ReactSharedInternals.H.useHostTransitionStatus();
205205
};
206-
exports.version = "19.2.0-native-fb-e5a8de81-20250506";
206+
exports.version = "19.2.0-native-fb-53c9f810-20250507";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-profiling.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<e0055236c23545f61906397ccc9a19f8>>
10+
* @generated SignedSource<<b90ef3a4861d2976f835ec6186efee00>>
1111
*/
1212

1313
"use strict";
@@ -203,4 +203,4 @@ exports.useFormState = function (action, initialState, permalink) {
203203
exports.useFormStatus = function () {
204204
return ReactSharedInternals.H.useHostTransitionStatus();
205205
};
206-
exports.version = "19.2.0-native-fb-e5a8de81-20250506";
206+
exports.version = "19.2.0-native-fb-53c9f810-20250507";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-dev.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<5aabad7dd74ffabe114d71475e5da8aa>>
10+
* @generated SignedSource<<4822ba3bdc01381ae0a4645f59c9786c>>
1111
*/
1212

1313
/*
@@ -26951,11 +26951,11 @@ __DEV__ &&
2695126951
};
2695226952
(function () {
2695326953
var isomorphicReactPackageVersion = React.version;
26954-
if ("19.2.0-native-fb-e5a8de81-20250506" !== isomorphicReactPackageVersion)
26954+
if ("19.2.0-native-fb-53c9f810-20250507" !== isomorphicReactPackageVersion)
2695526955
throw Error(
2695626956
'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' +
2695726957
(isomorphicReactPackageVersion +
26958-
"\n - react-dom: 19.2.0-native-fb-e5a8de81-20250506\nLearn more: https://react.dev/warnings/version-mismatch")
26958+
"\n - react-dom: 19.2.0-native-fb-53c9f810-20250507\nLearn more: https://react.dev/warnings/version-mismatch")
2695926959
);
2696026960
})();
2696126961
("function" === typeof Map &&
@@ -26992,10 +26992,10 @@ __DEV__ &&
2699226992
!(function () {
2699326993
var internals = {
2699426994
bundleType: 1,
26995-
version: "19.2.0-native-fb-e5a8de81-20250506",
26995+
version: "19.2.0-native-fb-53c9f810-20250507",
2699626996
rendererPackageName: "react-dom",
2699726997
currentDispatcherRef: ReactSharedInternals,
26998-
reconcilerVersion: "19.2.0-native-fb-e5a8de81-20250506"
26998+
reconcilerVersion: "19.2.0-native-fb-53c9f810-20250507"
2699926999
};
2700027000
internals.overrideHookState = overrideHookState;
2700127001
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -27139,5 +27139,5 @@ __DEV__ &&
2713927139
listenToAllSupportedEvents(container);
2714027140
return new ReactDOMHydrationRoot(initialChildren);
2714127141
};
27142-
exports.version = "19.2.0-native-fb-e5a8de81-20250506";
27142+
exports.version = "19.2.0-native-fb-53c9f810-20250507";
2714327143
})();

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-prod.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<9add4e267b5a9049b3ee99c22c81f534>>
10+
* @generated SignedSource<<330a8901e89c2bc5e88145c9c850b8e7>>
1111
*/
1212

1313
/*
@@ -17040,14 +17040,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1704017040
};
1704117041
var isomorphicReactPackageVersion$jscomp$inline_2009 = React.version;
1704217042
if (
17043-
"19.2.0-native-fb-e5a8de81-20250506" !==
17043+
"19.2.0-native-fb-53c9f810-20250507" !==
1704417044
isomorphicReactPackageVersion$jscomp$inline_2009
1704517045
)
1704617046
throw Error(
1704717047
formatProdErrorMessage(
1704817048
527,
1704917049
isomorphicReactPackageVersion$jscomp$inline_2009,
17050-
"19.2.0-native-fb-e5a8de81-20250506"
17050+
"19.2.0-native-fb-53c9f810-20250507"
1705117051
)
1705217052
);
1705317053
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -17069,10 +17069,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1706917069
};
1707017070
var internals$jscomp$inline_2528 = {
1707117071
bundleType: 0,
17072-
version: "19.2.0-native-fb-e5a8de81-20250506",
17072+
version: "19.2.0-native-fb-53c9f810-20250507",
1707317073
rendererPackageName: "react-dom",
1707417074
currentDispatcherRef: ReactSharedInternals,
17075-
reconcilerVersion: "19.2.0-native-fb-e5a8de81-20250506"
17075+
reconcilerVersion: "19.2.0-native-fb-53c9f810-20250507"
1707617076
};
1707717077
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1707817078
var hook$jscomp$inline_2529 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -17176,4 +17176,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
1717617176
listenToAllSupportedEvents(container);
1717717177
return new ReactDOMHydrationRoot(initialChildren);
1717817178
};
17179-
exports.version = "19.2.0-native-fb-e5a8de81-20250506";
17179+
exports.version = "19.2.0-native-fb-53c9f810-20250507";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-profiling.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<e91ecf876a5d825215a227c777791f01>>
10+
* @generated SignedSource<<58d8dc7322762854477f550a1af33f29>>
1111
*/
1212

1313
/*
@@ -17750,14 +17750,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1775017750
};
1775117751
var isomorphicReactPackageVersion$jscomp$inline_2112 = React.version;
1775217752
if (
17753-
"19.2.0-native-fb-e5a8de81-20250506" !==
17753+
"19.2.0-native-fb-53c9f810-20250507" !==
1775417754
isomorphicReactPackageVersion$jscomp$inline_2112
1775517755
)
1775617756
throw Error(
1775717757
formatProdErrorMessage(
1775817758
527,
1775917759
isomorphicReactPackageVersion$jscomp$inline_2112,
17760-
"19.2.0-native-fb-e5a8de81-20250506"
17760+
"19.2.0-native-fb-53c9f810-20250507"
1776117761
)
1776217762
);
1776317763
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -17779,10 +17779,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1777917779
};
1778017780
var internals$jscomp$inline_2119 = {
1778117781
bundleType: 0,
17782-
version: "19.2.0-native-fb-e5a8de81-20250506",
17782+
version: "19.2.0-native-fb-53c9f810-20250507",
1778317783
rendererPackageName: "react-dom",
1778417784
currentDispatcherRef: ReactSharedInternals,
17785-
reconcilerVersion: "19.2.0-native-fb-e5a8de81-20250506",
17785+
reconcilerVersion: "19.2.0-native-fb-53c9f810-20250507",
1778617786
getLaneLabelMap: function () {
1778717787
for (
1778817788
var map = new Map(), lane = 1, index$309 = 0;
@@ -17901,4 +17901,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
1790117901
listenToAllSupportedEvents(container);
1790217902
return new ReactDOMHydrationRoot(initialChildren);
1790317903
};
17904-
exports.version = "19.2.0-native-fb-e5a8de81-20250506";
17904+
exports.version = "19.2.0-native-fb-53c9f810-20250507";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMProfiling-dev.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<8a6c99b290c3896575ae28cbc004d3ec>>
10+
* @generated SignedSource<<15aa7a63dc4c6902e54a93b9ee1658c0>>
1111
*/
1212

1313
/*
@@ -27012,11 +27012,11 @@ __DEV__ &&
2701227012
};
2701327013
(function () {
2701427014
var isomorphicReactPackageVersion = React.version;
27015-
if ("19.2.0-native-fb-e5a8de81-20250506" !== isomorphicReactPackageVersion)
27015+
if ("19.2.0-native-fb-53c9f810-20250507" !== isomorphicReactPackageVersion)
2701627016
throw Error(
2701727017
'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' +
2701827018
(isomorphicReactPackageVersion +
27019-
"\n - react-dom: 19.2.0-native-fb-e5a8de81-20250506\nLearn more: https://react.dev/warnings/version-mismatch")
27019+
"\n - react-dom: 19.2.0-native-fb-53c9f810-20250507\nLearn more: https://react.dev/warnings/version-mismatch")
2702027020
);
2702127021
})();
2702227022
("function" === typeof Map &&
@@ -27053,10 +27053,10 @@ __DEV__ &&
2705327053
!(function () {
2705427054
var internals = {
2705527055
bundleType: 1,
27056-
version: "19.2.0-native-fb-e5a8de81-20250506",
27056+
version: "19.2.0-native-fb-53c9f810-20250507",
2705727057
rendererPackageName: "react-dom",
2705827058
currentDispatcherRef: ReactSharedInternals,
27059-
reconcilerVersion: "19.2.0-native-fb-e5a8de81-20250506"
27059+
reconcilerVersion: "19.2.0-native-fb-53c9f810-20250507"
2706027060
};
2706127061
internals.overrideHookState = overrideHookState;
2706227062
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -27516,7 +27516,7 @@ __DEV__ &&
2751627516
exports.useFormStatus = function () {
2751727517
return resolveDispatcher().useHostTransitionStatus();
2751827518
};
27519-
exports.version = "19.2.0-native-fb-e5a8de81-20250506";
27519+
exports.version = "19.2.0-native-fb-53c9f810-20250507";
2752027520
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
2752127521
"function" ===
2752227522
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMProfiling-prod.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<5a79a7927538bc1711217f830a4d33e5>>
10+
* @generated SignedSource<<d076dc13809fe6f69e6a4db17e7b4e0e>>
1111
*/
1212

1313
/*
@@ -17051,14 +17051,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1705117051
};
1705217052
var isomorphicReactPackageVersion$jscomp$inline_2010 = React.version;
1705317053
if (
17054-
"19.2.0-native-fb-e5a8de81-20250506" !==
17054+
"19.2.0-native-fb-53c9f810-20250507" !==
1705517055
isomorphicReactPackageVersion$jscomp$inline_2010
1705617056
)
1705717057
throw Error(
1705817058
formatProdErrorMessage(
1705917059
527,
1706017060
isomorphicReactPackageVersion$jscomp$inline_2010,
17061-
"19.2.0-native-fb-e5a8de81-20250506"
17061+
"19.2.0-native-fb-53c9f810-20250507"
1706217062
)
1706317063
);
1706417064
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -17080,10 +17080,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1708017080
};
1708117081
var internals$jscomp$inline_2531 = {
1708217082
bundleType: 0,
17083-
version: "19.2.0-native-fb-e5a8de81-20250506",
17083+
version: "19.2.0-native-fb-53c9f810-20250507",
1708417084
rendererPackageName: "react-dom",
1708517085
currentDispatcherRef: ReactSharedInternals,
17086-
reconcilerVersion: "19.2.0-native-fb-e5a8de81-20250506"
17086+
reconcilerVersion: "19.2.0-native-fb-53c9f810-20250507"
1708717087
};
1708817088
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1708917089
var hook$jscomp$inline_2532 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -17341,4 +17341,4 @@ exports.useFormState = function (action, initialState, permalink) {
1734117341
exports.useFormStatus = function () {
1734217342
return ReactSharedInternals.H.useHostTransitionStatus();
1734317343
};
17344-
exports.version = "19.2.0-native-fb-e5a8de81-20250506";
17344+
exports.version = "19.2.0-native-fb-53c9f810-20250507";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMProfiling-profiling.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<5410934b1bba6d599a04df94bd0e0a42>>
10+
* @generated SignedSource<<b8c65ac11eadc3de3fe5d9ed9d52d00b>>
1111
*/
1212

1313
/*
@@ -17765,14 +17765,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1776517765
};
1776617766
var isomorphicReactPackageVersion$jscomp$inline_2113 = React.version;
1776717767
if (
17768-
"19.2.0-native-fb-e5a8de81-20250506" !==
17768+
"19.2.0-native-fb-53c9f810-20250507" !==
1776917769
isomorphicReactPackageVersion$jscomp$inline_2113
1777017770
)
1777117771
throw Error(
1777217772
formatProdErrorMessage(
1777317773
527,
1777417774
isomorphicReactPackageVersion$jscomp$inline_2113,
17775-
"19.2.0-native-fb-e5a8de81-20250506"
17775+
"19.2.0-native-fb-53c9f810-20250507"
1777617776
)
1777717777
);
1777817778
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -17794,10 +17794,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1779417794
};
1779517795
var internals$jscomp$inline_2120 = {
1779617796
bundleType: 0,
17797-
version: "19.2.0-native-fb-e5a8de81-20250506",
17797+
version: "19.2.0-native-fb-53c9f810-20250507",
1779817798
rendererPackageName: "react-dom",
1779917799
currentDispatcherRef: ReactSharedInternals,
17800-
reconcilerVersion: "19.2.0-native-fb-e5a8de81-20250506",
17800+
reconcilerVersion: "19.2.0-native-fb-53c9f810-20250507",
1780117801
getLaneLabelMap: function () {
1780217802
for (
1780317803
var map = new Map(), lane = 1, index$309 = 0;
@@ -18070,7 +18070,7 @@ exports.useFormState = function (action, initialState, permalink) {
1807018070
exports.useFormStatus = function () {
1807118071
return ReactSharedInternals.H.useHostTransitionStatus();
1807218072
};
18073-
exports.version = "19.2.0-native-fb-e5a8de81-20250506";
18073+
exports.version = "19.2.0-native-fb-53c9f810-20250507";
1807418074
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
1807518075
"function" ===
1807618076
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

0 commit comments

Comments
 (0)