Bugzilla

Some initial findings while testing this with attachment 9026896 [details] :

When we first open RDM, the viewport browser's [content frame script](https://searchfox.org/mozilla-central/source/devtools/client/responsive.html/browser/content.js) is executed AFTER the "DOMContentLoaded" event has been fired. This means one thing: the calls to `getBoundingClientRect()`, `width()`, `outerWidth()`, etc... are happening before we [load](https://searchfox.org/mozilla-central/source/devtools/client/responsive.html/browser/content.js#62) the [overlay scrollbar stylesheet](https://searchfox.org/mozilla-central/source/devtools/client/responsive.html/browser/content.js#19). This explains the initial 15px difference. 

I can observe this by either putting a `console.log` in the message handler for [ResponsiveMode:Start](https://searchfox.org/mozilla-central/source/devtools/client/responsive.html/browser/content.js#25), or putting breaks point at [Element::GetBoundingClientRect()](https://searchfox.org/mozilla-central/source/dom/base/Element.cpp#1023) and [nsDOMWindowUtils::LoadSheet](https://searchfox.org/mozilla-central/source/dom/base/nsDOMWindowUtils.cpp#3196). 

Now when the page is refreshed, I can observe the reverse for `Element::GetBoundingClientRect()` and `nsDOMWindowUtils::LoadSheet`, where loading the stylesheet happens before the call to `getBoundingClientRect()`. This gives us the correct values.

I think the next steps here are to track where and when the "DOMContentLoaded" event is being fired as the [RDM UI is initialized](https://searchfox.org/mozilla-central/source/devtools/client/responsive.html/manager.js#326). Perhaps it's possible we can apply this style sheet before the starting the frame script.

Some initial findings while testing this with attachment 9026896 [details] :

When we first open RDM, the viewport browser's [content frame script](https://searchfox.org/mozilla-central/source/devtools/client/responsive.html/browser/content.js) is executed AFTER the "DOMContentLoaded" event has been fired. This means one thing: the calls to `getBoundingClientRect()`, `width()`, `outerWidth()`, etc... are happening before we [load](https://searchfox.org/mozilla-central/source/devtools/client/responsive.html/browser/content.js#62) the [overlay scrollbar stylesheet](https://searchfox.org/mozilla-central/source/devtools/client/responsive.html/browser/content.js#19). This explains the initial 15px difference. 

I can observe this by either:

- putting a `console.log` in the message handler for [ResponsiveMode:Start](https://searchfox.org/mozilla-central/source/devtools/client/responsive.html/browser/content.js#25). Observe that the the outer width values are being printed before the console.log.
- putting breaks point at [Element::GetBoundingClientRect()](https://searchfox.org/mozilla-central/source/dom/base/Element.cpp#1023) and [nsDOMWindowUtils::LoadSheet](https://searchfox.org/mozilla-central/source/dom/base/nsDOMWindowUtils.cpp#3196). Observe that the breakpoint at GetBoundingRectClient is hit before LoadSheet.

Now when the page is refreshed, I can observe the reverse for `Element::GetBoundingClientRect()` and `nsDOMWindowUtils::LoadSheet`, where loading the stylesheet happens before the call to `getBoundingClientRect()`. This gives us the correct values.

I think the next steps here are to track where and when the "DOMContentLoaded" event is being fired as the [RDM UI is initialized](https://searchfox.org/mozilla-central/source/devtools/client/responsive.html/manager.js#326). Perhaps it's possible we can apply this style sheet before the starting the frame script.

Some initial findings while testing this with attachment 9026896 [details] :

When we first open RDM, the viewport browser's [content frame script](https://searchfox.org/mozilla-central/source/devtools/client/responsive.html/browser/content.js) is executed AFTER the "DOMContentLoaded" event has been fired. This means one thing: the calls to `getBoundingClientRect()`, `width()`, `outerWidth()`, etc... are happening before we [load](https://searchfox.org/mozilla-central/source/devtools/client/responsive.html/browser/content.js#62) the [overlay scrollbar stylesheet](https://searchfox.org/mozilla-central/source/devtools/client/responsive.html/browser/content.js#19). This explains the initial 15px difference. 

I can observe this by either:

- putting a `console.log` in the message handler for [ResponsiveMode:Start](https://searchfox.org/mozilla-central/source/devtools/client/responsive.html/browser/content.js#25). Observe that the outer width values are being printed before the console.log.
- putting breaks point at [Element::GetBoundingClientRect()](https://searchfox.org/mozilla-central/source/dom/base/Element.cpp#1023) and [nsDOMWindowUtils::LoadSheet](https://searchfox.org/mozilla-central/source/dom/base/nsDOMWindowUtils.cpp#3196) opening RDM. Observe that the breakpoint at GetBoundingRectClient is hit before LoadSheet.

Now when the page is refreshed while in RDM, I can observe the reverse for `Element::GetBoundingClientRect()` and `nsDOMWindowUtils::LoadSheet`, where loading the stylesheet happens before the call to `getBoundingClientRect()`. This gives us the correct values.

I think the next steps here are to track where and when the "DOMContentLoaded" event is being fired as the [RDM UI is initialized](https://searchfox.org/mozilla-central/source/devtools/client/responsive.html/manager.js#326). Perhaps it's possible we can apply this style sheet before the starting the frame script.