mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-10-06 20:11:38 +08:00

Files

T

Tim van der Lippe b42cc464a5 Remove platform/utilities.ts

The `assertNever` function was a TypeScript utility, so let's move it
into typescript-utilities.ts. The onload implementation is no longer
required. Since our HTML pages include the JS link as the last one and
the full page has been loaded, it is effectively a noop and always
immediately calls `callback`. Therefore, we can inline the callbacks and
remove some hoops.

R=jacktfranklin@chromium.org

Bug: none
Change-Id: Ib530cb12324820fab8371e18f102c39ef6fbce51
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3327243
Auto-Submit: Tim Van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>

2021-12-10 09:33:07 +00:00

BUILD.gn

Remove toolbox.html

2021-07-19 11:23:00 +00:00

device_mode_emulation_frame.ts

Remove platform/utilities.ts

2021-12-10 09:33:07 +00:00

README.md

Rename toolbox to device_mode_emulation_frame

2021-07-13 12:31:20 +00:00

README.md

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_app via window.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 in devtools_app. Typically, these API's live in front_end/panels/emulation/AdvancedApp.ts