Update emulated device presets [devtools/devtools-frontend : main]
Ben Zhou (Gerrit)
Ben Zhou added 1 comment![]( "Open in Gerrit")
Hi all! Could you please review this CL?
Context:
This is part of the Device Mode safe-area simulation work for DevTools.
Design doc: https://docs.google.com/document/d/1llC1BYEwqzt7S4edq6bMQdVpCdiTGaICC8gh_82ROSw/edit?tab=t.0#heading=h.7nki9mck5t64
Tracking bug: crbug.com/40718410
This CL:
- Adds newer iPhone and Pixel device presets to EmulatedDevices.ts.
- Verifies viewport dimensions and DPR values against official Apple/Google specs.
- Updates show-by-default so each iPhone/Pixel generation exposes one default device.
- Adds the corresponding Visual Elements context values for the default-visible presets.
Validation:
- CQ Dry Run passed.
- Ran presubmit during git cl upload.
- Ran `git diff --check -- front_end/ui/visual_logging/KnownContextValues.ts`.
- Verified new iPhone dimensions against Apple HIG device screen dimensions.
- Verified new Pixel display resolutions against official Google Pixel specs.
Planned CL sequence:
1. Back-end support for safe-area emulation: https://crrev.com/c/6253279
2. Device preset updates for DevTools Device Mode: this CL, already done.
3. Front-end safe-area support:
- Let DevTools use safe-area values when emulating a selected device.
4. Safe-area and cutout data:
- Add sourced safe-area and display-cutout data for supported iPhone and Pixel presets.
5. Display-cutout visualization:
- Show the device notch, Dynamic Island, hole-punch, or other cutout shape in Device Mode.
6. Custom device support:
- Allow custom devices to define their own safe-area and cutout values.
Related details
- Bramus Van Damme
- Danil Somsikov
- Philip Pfaffe
Code-Owners
Code-Review
Review-Enforcement
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Danil Somsikov (Gerrit)
Danil Somsikov added 3 comments![]( "Open in Gerrit")
'show-by-default': true,The commit message states that each iPhone/Pixel generation exposes *one* default device. However, both `Pixel 9` and `Pixel 9 Pro XL` (line 1175) are marked as `show-by-default: true`. Did you mean to only enable one of them?
'width': 360,Pixel 9's physical resolution is 1080x2424. Using a viewport width of `360` with a DPR of `3` correctly maps to this, but `360px` is a very narrow logical width that does not match Android's standard scaling for modern devices. For example, the `Pixel 8` preset (added above) uses a logical width of `412` and a DPR of `2.625`. Consider updating Pixel 9 to use `412x924` (with DPR `2.625`) to accurately reflect the real device's CSS viewport.
'width': 360,Similar to Pixel 9, this results in an unrealistically narrow 360px logical viewport. Consider updating this to `412x924` with DPR `2.625` to match standard Android viewport scaling for 1080p displays.
Related details
- Ben Zhou
- Bramus Van Damme
- Philip Pfaffe
Code-Owners
Code-Review
No-Unresolved-Comments
Review-Enforcement
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Ben Zhou (Gerrit)
Ben Zhou added 4 comments![]( "Open in Gerrit")
Replies to all comments. Thank you for the clarification!
'show-by-default': true,The commit message states that each iPhone/Pixel generation exposes *one* default device. However, both `Pixel 9` and `Pixel 9 Pro XL` (line 1175) are marked as `show-by-default: true`. Did you mean to only enable one of them?
Yes, in keeping with the CL's description, I only meant to enable the Pixel 9. The Pixel 9 Pro XL is no longer shown by default, so only Pixel 9 is default-visible for the Pixel 9 generation.
'width': 360,Pixel 9's physical resolution is 1080x2424. Using a viewport width of `360` with a DPR of `3` correctly maps to this, but `360px` is a very narrow logical width that does not match Android's standard scaling for modern devices. For example, the `Pixel 8` preset (added above) uses a logical width of `412` and a DPR of `2.625`. Consider updating Pixel 9 to use `412x924` (with DPR `2.625`) to accurately reflect the real device's CSS viewport.
Thanks for the clarification! Updated the Pixel 9 to use a 412x924 viewport with DPR 2.625.
'width': 360,Similar to Pixel 9, this results in an unrealistically narrow 360px logical viewport. Consider updating this to `412x924` with DPR `2.625` to match standard Android viewport scaling for 1080p displays.
- Bramus Van Damme
- Danil Somsikov
- Philip Pfaffe
Code-Owners
Code-Review
No-Unresolved-Comments
Review-Enforcement
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Danil Somsikov (Gerrit)
Danil Somsikov voted Code-Review+1![]( "Open in Gerrit")
- Ben Zhou
- Bramus Van Damme
- Philip Pfaffe
Code-Owners
Code-Review
No-Unresolved-Comments
Review-Enforcement
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Ben Zhou (Gerrit)
Ben Zhou added 4 comments![]( "Open in Gerrit")
Hey Philip and Bramus, could you take a look at this CL please and review it so this CL can potentially land this? Thanks!
'show-by-default': true,Ben ZhouThe commit message states that each iPhone/Pixel generation exposes *one* default device. However, both `Pixel 9` and `Pixel 9 Pro XL` (line 1175) are marked as `show-by-default: true`. Did you mean to only enable one of them?
Yes, in keeping with the CL's description, I only meant to enable the Pixel 9. The Pixel 9 Pro XL is no longer shown by default, so only Pixel 9 is default-visible for the Pixel 9 generation.
Done
'width': 360,Ben ZhouPixel 9's physical resolution is 1080x2424. Using a viewport width of `360` with a DPR of `3` correctly maps to this, but `360px` is a very narrow logical width that does not match Android's standard scaling for modern devices. For example, the `Pixel 8` preset (added above) uses a logical width of `412` and a DPR of `2.625`. Consider updating Pixel 9 to use `412x924` (with DPR `2.625`) to accurately reflect the real device's CSS viewport.
Thanks for the clarification! Updated the Pixel 9 to use a 412x924 viewport with DPR 2.625.
Done
'width': 360,Ben ZhouSimilar to Pixel 9, this results in an unrealistically narrow 360px logical viewport. Consider updating this to `412x924` with DPR `2.625` to match standard Android viewport scaling for 1080p displays.
Updated Pixel 10 to use a 412x924 viewport with DPR 2.625.
- Bramus Van Damme
- Philip Pfaffe
Code-Owners
Code-Review
Review-Enforcement
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |