HTML progress element not shown when device toolbar toggled on
Reported by
sc...@oharagroup.net,
May 3 2018
|
|||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36 Steps to reproduce the problem: 1. Open a new tab 2. Open DevTools Elements panel 3. Ensure "Toggle Device Mode" is OFF 4. Right-click on a visible DOM node, select Edit as HTML 5. Enter "<progress value="10" max="20"></progress>" inside the element content (i.e. create a new Progress element on the page) 6. Note that the progress element is shown 7. Toggle device mode ON 8. Note that the progress element is not shown What is the expected behavior? Progress element should show even when in device emulation mode What went wrong? Progress element not displayed Did this work before? N/A Chrome version: 66.0.3359.117 Channel: n/a OS Version: OS X 10.13.3 Flash Version:
,
May 7 2018
Able to reproduce this issue on reported version 66.0.3359.117 and latest canary 68.0.3423.0 using Mac 10.13.4. But issue is not seen in Windows 10 and Ubuntu 17.10. This issue is seen from M-60. Hence considering this issue as Non-Regression and marking as Untriaged. Thanks!
,
May 10 2018
,
May 14 2018
I think DevTools team is responsible for Device mode behavior.
,
May 14 2018
,
Jul 6
I'm the original reporter of this issue, so I decided to roll up my sleeves and dig into DevTools to see if I could offer any further diagnosis of the problem.
(Disclaimer: I'm neither a Chromium or DevTools contributor, so apologies if what I'm about to offer here is either obvious, or not useful)
In DevTools, I was able to determine that the problem only occurs when the `metrics` object passed to `SDK.EmulationModel.emulateDevice(metrics)` has its `mobile` property set to `true`.
In other words: in my initial report I incorrectly suggested that the problem occurred when toggling device mode on; when in fact the problem actually occurs when the user agent menu in the emulation toolbar is set to either 'Mobile' or 'Mobile (no touch)' (but does not occur in device mode when the user agent is set to 'Desktop' or 'Desktop (touch)').
Tracing further, I see that an "Emulation.setDeviceMetricsOverride" protocol message is sent to the backend, with parameters of the device to emulate. (At this point, we're leaving my relative comfort zone of JS, and straying into the C++ zone where I'm far less familiar)
The above protocol message appears to be handled in `EmulationHandler::SetDeviceMetricsOverride`, which sets `device_emulation_params.screen_position` to `blink::WebDeviceEmulationParams::kMobile` before calling `EmulationHandler::UpdateDeviceEmulationState()`.
Finally, those params are used in `host_->GetRenderWidgetHost()->Send(new ViewMsg_EnableDeviceEmulation(host_->GetRenderWidgetHost()->GetRoutingID(),device_emulation_params_));`, which sets the `RenderWidgetScreenMetricsEmulator.emulation_params` and calls `RenderWidgetScreenMetricsEmulator::Apply()`.
In `Apply()`, the only thing I could see was that there is a conditional for mobile vs desktop (`if (emulation_params_.screen_position == blink::WebDeviceEmulationParams::kDesktop) { ...`), but to my untrained eyes that only seems to set different screen metrics.
Beyond this, I was unsure where to look; so there ends my (fun) adventure into the Chromium source.
I hope this is (in some way) helpful.
|
|||||
►
Sign in to add a comment |
|||||
Comment 1 by susan.boorgula@chromium.org
, May 4 2018