1509255 - responsive design mode does not simulate orientationchange event

Status: VERIFIED FIXED

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

Description

[baptx]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:63.0) Gecko/20100101 Firefox/63.0

Steps to reproduce:

1) Open the attachment (based on https://developer.mozilla.org/en-US/docs/Web/Events/orientationchange#Example) in Firefox desktop browser
2) Open the web console (Ctrl+Shift+K shortcut) and responsive design mode (Ctrl+Shift+M shortcut)
3) Click on the "rotate viewport" button


Actual results:

No alert box or console message is displayed. The responsive design mode in Firefox does not simulate orientationchange event, unlike other browsers like Chrome / Chromium.
This a problem if we want to test a web app using this event from a desktop computer and it can also result in an accessibility problem if we can't simulate this event on a website that was designed for mobile devices only. For example, a wep app allowed only the portrait view instead of the horizontal view so I was unable to use the web app to simulate the vertical view with Firefox on a desktop computer.


Expected results:

The orientationchange event should be fired when we click on the "rotate viewport" button. In addition, the JavaScript variable screen.orientation.angle should be set correctly (for example 0 for vertical view and 90 for horizontal view like Chromium is doing in the responsive design mode).
By the way, I noticed the responsive design mode does not allow alert boxes in Firefox, only console messages can be displayed. Let me know if I should report a separate issue for this.

Comment 1

[baptx]

Attachment: orientationchange.htm

Comment 2

[Gingerbread Man]

Possibly a duplicate of bug 826913 or bug 1357774.

Comment 3

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

Since the "orientationchange" event seems to be only for mobile devices (i.e: see here ), we will have to simulate this same event on the content window whenever the viewport is rotated via the RDM UI. To do this I believe we can fake this by having RDM's emulation actor's target window dispatch a custom "orientationchange" event when the toolbar's rotate button is clicked. So:

So, the first step is to modify the Emulation actor with the following:

• Add a new method on the emulation actor called rotateViewport. This will be used by the ResponsiveUIManager to communicate to the server that the viewport has been rotated so dispatch the custom "orientationchange" event.

Next we wire up the client to have the rotate button tell the ResponsiveUIManager the user has pressed:

• The rotate button dispatches a ROTATE_VIEWPORT action when pressed. In this same action we can use postMessage to communicate with the ResponsiveUIManager.
• In ResponsiveUIManager's handleMessage, add a case for the rotate viewport message where we handle calling the emulation front's rotateViewport method.

Once the server receives the rotateViewport message from the client, a custom event called "orientationchange" will be dispatched to be received by the target window.

Comment 4

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

Note that the above does not update window.screen.orientation's value. This will be fixed in Bug 1357774.

Comment 5

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

Attachment: Bug 1509255 - Simulate 'orientationchange' event when RDM viewport is rotated.

Comment 6

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

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

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/20874bfade8e
Simulate 'orientationchange' event when RDM viewport is rotated. r=gl

Comment 8

[Cristina Coroiu [:ccoroiu]]

Backed out changeset 20874bfade8e (bug 1509255) for xpcshell failures at devtools/client/responsive.html/test/unit/test_rotate_viewport.js

Backout: https://hg.mozilla.org/integration/autoland/rev/8f500d15db58b1c794f029c56b30af26bca317fe

Failure push: https://treeherder.mozilla.org/#/jobs?repo=autoland&selectedJob=244497253&revision=20874bfade8ee324a3d4b1c54501a690e8d34a6b

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

[task 2019-05-03T14:57:31.514Z] 14:57:31 INFO - TEST-START | devtools/client/responsive.html/test/unit/test_rotate_viewport.js
[task 2019-05-03T14:57:32.073Z] 14:57:32 WARNING - TEST-UNEXPECTED-FAIL | devtools/client/responsive.html/test/unit/test_rotate_viewport.js | xpcshell return code: 0
[task 2019-05-03T14:57:32.073Z] 14:57:32 INFO - TEST-INFO took 559ms
[task 2019-05-03T14:57:32.074Z] 14:57:32 INFO - >>>>>>>
[task 2019-05-03T14:57:32.075Z] 14:57:32 INFO - PID 11523 | JavaScript strict warning: resource://devtools/shared/Loader.jsm, line 231: ReferenceError: reference to undefined property "name"
[task 2019-05-03T14:57:32.076Z] 14:57:32 INFO - (xpcshell/head.js) | test MAIN run_test pending (1)
[task 2019-05-03T14:57:32.077Z] 14:57:32 INFO - (xpcshell/head.js) | test run_next_test 0 pending (2)
[task 2019-05-03T14:57:32.077Z] 14:57:32 INFO - (xpcshell/head.js) | test MAIN run_test finished (2)
[task 2019-05-03T14:57:32.078Z] 14:57:32 INFO - running event loop
[task 2019-05-03T14:57:32.080Z] 14:57:32 INFO - "CONSOLE_MESSAGE: (warn) [JavaScript Warning: "ReferenceError: reference to undefined property "name"" {file: "resource://devtools/shared/Loader.jsm" line: 231}]"
[task 2019-05-03T14:57:32.085Z] 14:57:32 INFO - devtools/client/responsive.html/test/unit/test_rotate_viewport.js | Starting
[task 2019-05-03T14:57:32.085Z] 14:57:32 INFO - (xpcshell/head.js) | test pending (2)
[task 2019-05-03T14:57:32.087Z] 14:57:32 INFO - PID 11523 | console.log: "[DISPATCH] action type:" "ADD_VIEWPORT"
[task 2019-05-03T14:57:32.088Z] 14:57:32 INFO - TEST-PASS | devtools/client/responsive.html/test/unit/test_rotate_viewport.js | - Default width of 320 - 320 == 320
[task 2019-05-03T14:57:32.089Z] 14:57:32 INFO - TEST-PASS | devtools/client/responsive.html/test/unit/test_rotate_viewport.js | - Default height of 480 - 480 == 480
[task 2019-05-03T14:57:32.089Z] 14:57:32 INFO - (xpcshell/head.js) | test run_next_test 0 finished (2)
[task 2019-05-03T14:57:32.090Z] 14:57:32 INFO - Unexpected exception ReferenceError: window is not defined at resource://devtools/client/responsive.html/actions/viewports.js:99
[task 2019-05-03T14:57:32.090Z] 14:57:32 INFO - rotateViewport@resource://devtools/client/responsive.html/actions/viewports.js:99:5
[task 2019-05-03T14:57:32.091Z] 14:57:32 INFO - @/builds/worker/workspace/build/tests/xpcshell/tests/devtools/client/responsive.html/test/unit/test_rotate_viewport.js:21:12
[task 2019-05-03T14:57:32.092Z] 14:57:32 INFO - run_next_test/_run_next_test/<@/builds/worker/workspace/build/tests/xpcshell/head.js:1437:22
[task 2019-05-03T14:57:32.092Z] 14:57:32 INFO - _run_next_test@/builds/worker/workspace/build/tests/xpcshell/head.js:1437:38
[task 2019-05-03T14:57:32.093Z] 14:57:32 INFO - run@/builds/worker/workspace/build/tests/xpcshell/head.js:688:9
[task 2019-05-03T14:57:32.094Z] 14:57:32 INFO - _do_main@/builds/worker/workspace/build/tests/xpcshell/head.js:227:6
[task 2019-05-03T14:57:32.095Z] 14:57:32 INFO - _execute_test@/builds/worker/workspace/build/tests/xpcshell/head.js:529:5
[task 2019-05-03T14:57:32.095Z] 14:57:32 INFO - @-e:1:1
[task 2019-05-03T14:57:32.096Z] 14:57:32 INFO - exiting test
[task 2019-05-03T14:57:32.097Z] 14:57:32 INFO - <<<<<<<

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/01e77d5c83c4
Simulate 'orientationchange' event when RDM viewport is rotated. r=gl

Comment 10

[Alexandru Michis [:malexandru]]

https://hg.mozilla.org/mozilla-central/rev/01e77d5c83c4

Comment 11

[Rares Doghi, Desktop QA]

Hi Guys, I was testing this issue using this link : https://bug1509255.bmoattachments.org/attachment.cgi?id=9026900

and for the Vertical alignment I'm getting 0 for the orientation of the device but when using landscape instead of 90, i'm getting 270 and I'm not sure its correct.

Can you please let me know if this is ok or is there another issue logged for it ?

Comment 12

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

Hi, yes it should be 90 instead of 270. I filed an issue for this at: Bug 1554695

Comment 13

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

I found that refreshing the page using https://bug1509255.bmoattachments.org/attachment.cgi?id=9026900 will also trigger an orientationchange event, which shouldn't happen. I filed the appropriate bug at: Bug 1556533

Comment 14

[Rares Doghi, Desktop QA]

This issue is verified as fixed in our nightly 69.0a1 (2019-06-03).