Repository navigation
feat(browser): set a default device size for the in-app preview - #2966
bajrangCoder merged 20 commits into
Conversation
|
This comment was marked as outdated.
This comment was marked as outdated.
| int width = Math.min( | ||
| prefs.getInt("default_width", widthSeekBar.getMax()), | ||
| widthSeekBar.getMax() | ||
| ); | ||
| int height = Math.min( | ||
| prefs.getInt("default_height", heightSeekBar.getMax()), | ||
| heightSeekBar.getMax() | ||
| ); | ||
|
|
||
| widthSeekBar.setProgress(width); | ||
| heightSeekBar.setProgress(height); | ||
| setMaxScale(width, height); | ||
| int scale = Math.min( | ||
| prefs.getInt("default_scale", 100), | ||
| scaleSeekBar.getMax() | ||
| ); | ||
| scaleSeekBar.setProgress(scale); | ||
|
|
||
| String name = prefs.getString("default_device", "Custom"); | ||
| for (Device device : deviceListView.devices) { | ||
| if (device.name.equals(name)) { | ||
| if (deviceListView.selectedDeviceView != null) { | ||
| deviceListView.selectedDeviceView.deselect(); | ||
| } | ||
| deviceListView.select(device); | ||
| selectedDevice = device; | ||
| break; | ||
| } | ||
| } |
There was a problem hiding this comment.
When the screen size changes, a saved preset comes back with the wrong shape.
The saved width/height are screen pixels taken after selectDevice fitted the preset to the screen at save time. Here they're clamped separately with Math.min, and then the preset is highlighted by name. selectDevice instead shrinks both sides by the same ratio.
Example: save "iPad" in portrait, then open the preview in landscape, split-screen, or on the other screen of a foldable. The width stays the same and only the height gets cut, but the list still shows "iPad". (BrowserActivity handles orientation|screenSize itself, so the screen size really does vary between opens.)
Suggestion: if the saved name is a preset, call selectDevice(device) so it refits to the current screen, then apply the saved scale. Keep the raw width/height restore only for "Custom".
There was a problem hiding this comment.
Good catch. A saved preset is now re-fitted with selectDevice() to the current screen, then the saved scale is applied. Raw width/height is only used for Custom. Tested by saving Laptop in portrait and reopening in landscape
|
|
||
| // Apply the saved mode before the first navigation so the page is not | ||
| // loaded with the wrong user agent and then reloaded. | ||
| setDesktopMode(true, false); |
There was a problem hiding this comment.
The desktop user agent is set before the first load (good), but the first page load still happens at full size, not at the saved size.
BrowserActivity.onCreate calls browser.setUrl(url) right after the constructor, before any layout happens. The saved size only arrives two layout passes later: first the webview's layout listener below, then the emulator's own listener in setReference, which calls restoreDefaultDevice. So the page starts loading at the full webview width and is resized partway through.
CSS media queries will adjust after the resize, but scripts that read innerWidth or measure the layout once on load will keep the full-size values. A fast localhost server may even finish the page before the resize. Switching Devices on by hand doesn't have this problem, because it reloads after the size is applied.
This depends on timing, so could you check it on a device with a page that logs innerWidth on load? If it reproduces, reload once after the saved size is applied, but only if the page has already started loading.
There was a problem hiding this comment.
The page now reloads once after the saved size is applied, and only if a page was already requested.
| menu.setChecked("Console", false); | ||
| menu.setVisible("Console", false); | ||
| addView(deviceEmulator); | ||
| fitWebViewTo( |
There was a problem hiding this comment.
Minor: at this point the emulator hasn't set up its sliders yet (setReference does that in a later layout pass). So this call shrinks the webview to a placeholder size and pushes that size into the page's viewport before the real size is applied. Switching Devices on by hand has the same flicker, but now it happens during the first page load. Could this call be skipped here and the size left to restoreDefaultDevice?
There was a problem hiding this comment.
restoreDefaultDevice handles sizing now
|
|
||
| private void updateDefaultItems(boolean emulatorOn) { | ||
| menu.setVisible("Set as Default", emulatorOn); | ||
| menu.setVisible("Clear Default", emulatorOn); |
There was a problem hiding this comment.
Nit: "Clear Default" shows up in Devices mode even when nothing is saved, and the toast still says "Default cleared". Show it only when Emulator.hasDefault(context) is true, and update its visibility after Set/Clear.
There was a problem hiding this comment.
Now shown only when hasDefault() is true, and refreshed after Set/Clear.
…e-Foundation#2966) * refactor(browser): keep a list of devices in the emulator device list * refactor(browser): register each device when added to the list * feat(browser): apply the saved default preview size once layout is ready * feat(browser): save and restore a default device preview size * feat(browser): add "Set as Default" and "Clear Default" menu items * feat(browser): handle "Set as Default" and "Clear Default" actions * feat(browser): show default menu items only while Devices mode is on * feat(browser): open the preview in Devices mode when a default is set * feat(browser): restore the default preview mode on startup * refactor(browser): allow applying desktop mode without reloading * refactor(browser): make the reload in setDesktopMode optional * fix(browser): apply saved desktop mode before the first load to avoid a reload * fix(browser): only apply dimensions after layout, not desktop mode * fix(browser): re-fit saved presets to the current screen on restore * fix(browser): reload once after the saved size is applied * fix(browser): don't resize the webview before the emulator is set up * fix(browser): add reloadAfterLayout helper, only when a page was requested * fix(browser): show "Clear Default" only when a default is saved * fix(browser): refresh default menu items after Set as Default * fix(browser): refresh default menu items after Clear Default

What
The in-app preview browser always opens in the phone's native mobile view. This adds a way to choose a default preview size.
How it works
Implementation
Values are stored in SharedPreferences (
acode_browser). Changes are limited toBrowser.javaandEmulator.java.Notes
Related: "Html Rendering options" feature request on Discord.