mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-07 04:26:32 +08:00
Tim van der Lippe
01f28d4d90
The new name better reflects its intent. Additionally, add some documentation for future maintainers on the intracicies of this frame. R=jacktfranklin@chromium.org Bug: 1228264 Change-Id: I8618029a19e6f25e111b4ac7148100dd7c8f6788 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3023630 Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org> Auto-Submit: Tim van der Lippe <tvanderlippe@chromium.org> Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
1.5 KiB
1.5 KiB
Device mode emulation frame
DevTools has a feature to simulate device modes in the browser page. The emulation is implemented using a separate frame, called the "device mode emulation frame".
When a user turns on device mode emulation, a top bar with pre-defined device modes and page width/height is shown.
The UI is implemented in front_end/panels/emulation/.
However, the code that controls the UI runs in the context of the devtools_app.
As such, the JavaScript that runs in the devtools_app frame controls the UI in a separate frame.
This has several implications:
- It is not possible to inspect the device mode emulation frame with DevTools itself
- The device mode emulation frame communicates with
devtools_appviawindow.opener - Since the communication is cross-frame, it can only use web API's that support cross-frame communication
- Not all features that are available in the standard UI of DevTools can be reused in the device mode emulation frame. Some features are explicitly reconstructed in the other frame, to avoid cross-frame limitations
- Whenever the device mode emulation frame needs to access information that is available in
devtools_app(such as settings), it needs to access the information in the correct frame. For example, any information coming from localStorage has to be mediated via API's indevtools_app. Typically, these API's live in front_end/panels/emulation/AdvancedApp.ts