2062153 - RDM "Device Settings" modal isn't positioned properly

Status: RESOLVED FIXED

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

Description

[Nicolas Chevobbe [:nchevobbe][PTO back September 7]]

Attachment: Device Settings dialog

The Device Settings Dialog is displayed at the top of the responsive content page and is pretty small
It used to cover it entirely (as well as the bottom DevTools toolbox if there's one)

That's because it's positioned in the grid row we setup for the RDM toolbar, so we need to change that

Comment 1

[Nicolas Chevobbe [:nchevobbe][PTO back September 7]]

Attachment: Bug 2062153 - [devtools] Fix RDM Device Settings modal. r=jdescottes.

When the dialog is displayed, span the RDM iframe to the bottom row so it overlaps the browser stack,
as well as a potential bottom-docked DevTools toolbox.
We also need to adjust the z-index so it's displayed
on top of the browser stack.

Comment 2

[BugBot [:suhaib / :marco]]

The Bugbug bot thinks this bug should belong to the 'DevTools::Responsive Design Mode' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 3

[BugBot [:suhaib / :marco]]

Set release status flags based on info from the regressing bug 2049244

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/07c342e3e5d5
https://hg.mozilla.org/integration/autoland/rev/ce4b1454d612
[devtools] Fix RDM Device Settings modal. r=jdescottes,desktop-theme-reviewers,tabbrowser-reviewers,sclements,hjones,devtools-reviewers.

Comment 5

[Cosmin Sabou [:CosminS]]

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

Comment 6

[BugBot [:suhaib / :marco]]

The patch landed in nightly and beta is affected.
:nchevobbe, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
  • See https://wiki.mozilla.org/Release_Management/Requesting_an_Uplift for documentation on how to request an uplift.
• If no, please set status-firefox155 to wontfix.

For more information, please visit BugBot documentation.

Comment 7

[Nicolas Chevobbe [:nchevobbe][PTO back September 7]]

(In reply to BugBot [:suhaib / :marco] from comment #6)

The patch landed in nightly and beta is affected.
:nchevobbe, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
  • See https://wiki.mozilla.org/Release_Management/Requesting_an_Uplift for documentation on how to request an uplift.
• If no, please set status-firefox155 to wontfix.

For more information, please visit BugBot documentation.

requested the uplift

Comment 8

[Phabricator Automation]

firefox-beta Uplift Approval Request

• User impact if declined/Reason for urgency: Dialog to select/edit devices for Responsive Design Mode wouldn't be displayed properly, potentially hiding some options
• Code covered by automated testing?: no
• Fix verified in Nightly?: no
• Needs manual QE testing?: no
• Steps to reproduce for manual QE testing: -
• Risk associated with taking this patch: low
• Explanation of risk level: Simple, mostly CSS, change, that is only visible when Responsive Design Mode is enabled
• String changes made/needed?: -
• Is Android affected?: no

Comment 9

[Nicolas Chevobbe [:nchevobbe][PTO back September 7]]

Attachment: Bug 2062153 - [devtools] Fix RDM Device Settings modal. .

When the dialog is displayed, span the RDM iframe to the bottom row so it overlaps the browser stack,
as well as a potential bottom-docked DevTools toolbox.
We also need to adjust the z-index so it's displayed on top of the browser stack.
Finally, we set the accomodate-ua class on the .browserContainer element, and
use it to udpate the --rdm-toolbar-height variable, that we then use to set
the grid row's height; this way the row is always the same height, even when
we open the dialog (if we wouldn't do that, the row would grow, and we wouldn't
have the same space between the RDM toolbar and the content page).

Original Revision: https://phabricator.services.mozilla.com/D317419

Comment 10

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/36f9a88f8fde
https://hg.mozilla.org/releases/mozilla-beta/rev/645eb5721e80