1352070 - window.outerHeight returns wrong value in Responsive Design mode

Status: RESOLVED FIXED

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

Description

[supersonicsnow]

Attachment: ff-bug.png

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/53.0.2785.143 Chrome/53.0.2785.143 Safari/537.36

Steps to reproduce:

Using 54.0a2 (2017-03-30) (64-bit)
I started responsive design mode to emulate a few mobile devices.

console.log(window.outerHeight);


Actual results:

window.outerHeight returns a value that has nothing to do with the height of the emulated mobile device screen, it shows a value that is the view area of the main firefox window, which is not in use at the time of emulating a mobile device, and totally irrelevant and harmful to emulating a mobile device properly.


Expected results:

Firefox should return the window height of the emulated mobile device.

Comment 1

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

Thanks for filing!

Looks like this is an issue with both old and new RDM.  So far, we've left these properties alone in RDM.  Chrome does appear to fix them up in their equivalent tool.

Comment 2

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

Some observations as I was investigating a potential solution:

The window's outerHeight property is writeable by both chrome and non-chrome, the difference is that if the caller is non-chrome, the value written to outerHeight acts as a Replaceable value. If the caller is chrome, then this value is directly written to window.outerHeight and modifies the window's height dimensions appropriately. See: https://searchfox.org/mozilla-central/source/dom/webidl/Window.webidl#205

Since the window can distinguish between a caller that's either chrome or not, a possible solution is to also do the same by checking the document's InRDMPane property and writing the passed outerHeight value as a Replaceable IDL property. See: https://searchfox.org/mozilla-central/source/dom/base/nsGlobalWindowInner.cpp#6655

I'll try this out.

UPDATE:

After further investigation into this, it makes more sense that the RDM iframe's outer window should just return its inner window's size values as its outer size. The reasoning for this is that the RDM browser will always represent the size of the browser viewport of the device it's simulating. So when we try to retrieve the RDM browser's outer size properties, the iframe's inner window will forward this call to the iframe's outer window. From here, we should check if the document is contained in the RDM pane and return the inner window's size values instead.

Comment 3

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

Attachment: Bug 1352070 - Part 1: In RDM, return the inner window size values of the RDM iframe when getting its outer size values via window.outerWidth/outerHeight

Comment 4

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

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

Comment 5

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

Attachment: Bug 1352070 - Part 2: RDM tests for ensuring that the values for the selected device's outerHeight/outerWidth properties are correct.

Comment 6

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

Part 2 try: https://treeherder.mozilla.org/#/jobs?repo=try&revision=85ecc5eb54cca5c51001c9fb72d84753a7b5c09a

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1986a2058bb1
Part 1: In RDM, return the inner window size values of the RDM iframe when getting its outer size values via window.outerWidth/outerHeight r=smaug
https://hg.mozilla.org/integration/autoland/rev/a3edc47a8b67
Part 2: RDM tests for ensuring that the values for the selected device's outerHeight/outerWidth properties are correct. r=bradwerth

Comment 8

[Andrei Ciure[:aciure]]

https://hg.mozilla.org/mozilla-central/rev/1986a2058bb1
https://hg.mozilla.org/mozilla-central/rev/a3edc47a8b67