Closed Bug 1509255 Opened 3 years ago Closed 2 years ago

responsive design mode does not simulate orientationchange event


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

63 Branch


(firefox68 verified, firefox69 verified)

Firefox 68
Tracking Status
firefox68 --- verified
firefox69 --- verified


(Reporter:, Assigned: mtigley)


(Blocks 1 open bug)


(Whiteboard: [rdm-mvp] [qa-68b-p2])


(2 files)

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 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.
Attached file orientationchange.htm
Possibly a duplicate of bug 826913 or bug 1357774.
Has STR: --- → yes
Component: Untriaged → Responsive Design Mode
OS: Unspecified → All
Product: Firefox → DevTools
Hardware: Unspecified → All
Severity: normal → enhancement
Priority: -- → P3
Ever confirmed: true
Priority: P3 → P2
Whiteboard: [rdm-mvp]
See Also: → 1357774
Assignee: nobody → mtigley
Priority: P2 → P1

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.

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

Pushed by
Simulate 'orientationchange' event when RDM viewport is rotated. r=gl

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


Failure push:

Failure log:

[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 - <<<<<<<

Flags: needinfo?(tigleym)
Pushed by
Simulate 'orientationchange' event when RDM viewport is rotated. r=gl
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 68
Flags: needinfo?(tigleym)
Whiteboard: [rdm-mvp] → [rdm-mvp] [qa-68b-p2]

Hi Guys, I was testing this issue using this link :

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 ?

Flags: needinfo?(mtigley)

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

Flags: needinfo?(mtigley)

I found that refreshing the page using will also trigger an orientationchange event, which shouldn't happen. I filed the appropriate bug at: Bug 1556533

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

You need to log in before you can comment on or make changes to this bug.