1357774 - Update orientation state (window.screen.orientation) in Responsive Design Mode

Status: RESOLVED FIXED

(DevTools :: Responsive Design Mode, defect, P1)

Description

[C. Martin]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:52.0) Gecko/20100101 Firefox/52.0
Build ID: 20170323105023

Steps to reproduce:

Tested a responsive site in Responsive Design Mode that lazyloads images in portrait or landscape format depending on the device orientation.



Actual results:

I found out that window.orientation remains undefined.


Expected results:

window.orientation should be set according to the emulated device being in portrait or landscape mode.

Comment 1

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

I think the API you are looking for is `window.screen.orientation`?  If so, it's not `undefined`, but it is true that it remains set to `{ type: "landscape-primary", angle: 0, onchange: null }` even after you rotate.

Seems like a good feature request, thanks for filing!

Comment 2

[C. Martin]

>Seems like a good feature request, thanks for filing!
Glad you think so, too.

>I think the API you are looking for is `window.screen.orientation`?
To my knowledge all mobile browsers (including mobile Firefox) support "window.orientation", but Safari for iOS does not support the "window.screen.orientation" object (while mobile Chrome does).

Comment 3

[C. Martin]

P.S.
Not that it matters much, but mobile IE also only supports "window.orientation" - I just checked.

Comment 4

[C. Martin]

P.P.S.
Interesting: On a Surface 3 Pro the only Browser to correctly indicate the screen orientation is Chrome - but only through the "window.screen.orientation" object. Firefox always reports angle 0, Edge knows nothing ;)
So no desktop browser supports "window.orientation" but all mobile browsers do.
Seems to me with the increase of tablet/convertible PCs it would make sense to have that information available on desktop browsers, too.

Comment 5

[Martin Balfanz [:mbalfanz]]

window.orientation is deprecated according to https://developer.mozilla.org/en-US/docs/Web/API/Window/orientation so I will close this bug as wontfix.

Comment 6

[C. Martin]

Please don't close this. The point is not if window.orientation or window.screen.orientation but that the state doesn't get updated/set in responsive view in either; e.g. when you choose iPad or iPhone in portrait mode the screenOrientation object shows angle: 0; type: "landscape-primary"

Comment 7

[Brad Werth [:bradwerth] | Out until Feb 2025]

It looks like window.screen.orientation is still supported and we can re-orient the bug around updating that object's behavior.

Comment 8

[Martin Balfanz [:mbalfanz]]

Good point, I got carried away with the window.orientation example but indeed we need to fix it for window.screen.orientation. I added it to our quality backlog.

Comment 9

[Brad Werth [:bradwerth] | Out until Feb 2025]

Spec algorithm for determining proper value of screen.orientation is at: https://w3c.github.io/screen-orientation/#updating-the-orientation-information

Comment 10

[Micah [:mtigley] (she/her)]

Following the suggested approach here, we can extend the "orientationchange" event handler to update the values of window.screen.orientation and even window.screen.angle on the content document.

Since orientation and angle are readonly attributes we can't simply modify them directly. Perhaps the next step here is to expose some webidl property allows setting these values only while in RDM. We may be able to reuse SetCurrentOrientationsomewhere.

Comment 11

[Micah [:mtigley] (she/her)]

Attachment: Bug 1357774 - Part 1: Add a 'SetCurrentRDMPaneOrientation' WebIDL extension on the Document

Comment 12

[Micah [:mtigley] (she/her)]

Attachment: Bug 1357774 - Part 2: Add the ability to update orientation state of a simulated device in RDM

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/90ff166702b5
Part 1: Add a 'SetCurrentRDMPaneOrientation' WebIDL extension on the Document r=bradwerth,smaug

Comment 14

[Cristian Brindusan [:cbrindusan]]

Backed out changeset 90ff166702b5 (Bug 1357774) for build bustages at AndroidHal.cpp

Backout: https://hg.mozilla.org/integration/autoland/rev/9c251c872a3370203295a8196c970195abc3bcca

Push that started the failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&resultStatus=pending%2Crunning%2Csuccess%2Ctestfailed%2Cbusted%2Cexception&revision=90ff166702b5dd7e9848eef62746457b11d8fe92&selectedJob=246511687

Failure log: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=246511687&repo=autoland&lineNumber=13159

Comment 15

[Micah [:mtigley] (she/her)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=875087704d11384667e946bb0fe009fc51017b16

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1256739720ca
Part 1: Add a 'SetCurrentRDMPaneOrientation' WebIDL extension on the Document r=bradwerth,smaug

Comment 17

[Stefan Hindli [:stefan_hindli]]

https://hg.mozilla.org/mozilla-central/rev/1256739720ca

Comment 18

[Micah [:mtigley] (she/her)]

Part 2 Try: https://treeherder.mozilla.org/testview.html?repo=try&revision=346162dec4ab91496e26cc082d2e5ad9efe0b17f

Comment 19

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b638269d62f1
Part 2: Add the ability to update orientation state of a simulated device in RDM r=gl

Comment 20

[Daniel Varga [:dvarga]]

https://hg.mozilla.org/mozilla-central/rev/b638269d62f1