1918617 - Alert/prompt/confirm dialogue text missing in responsive design mode

Status: VERIFIED FIXED

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

Description

[matthew.french]

Attachment: Screenshot 2024-09-13 at 10.57.26.png

Steps to reproduce:

Testing a confirm dialogue in responsive design mode (iPhone 11 Pro iOs 14.6, for example).

Actual results:

The text of the dialogue is not displayed.

Expected results:

The text of the dialogue should be displayed as it is on desktop (non responsive design mode).

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:Sylvestre, could you have a look please?

For more information, please visit BugBot documentation.

Comment 2

[Julian Descottes [:jdescottes]]

Seems to work on 115, recent regression.

Nicolas, can you run mozregression, thanks!

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

This was regressed by Bug 1897095

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

There's now an extra margin-top which pushed the dialog content down https://searchfox.org/mozilla-release/rev/bad2bcb1b74cce00563fde8aab67ae924befe3c2/devtools/client/responsive/responsive-browser.css#21,34-37

.browserContainer.responsive-mode > .rdm-toolbar {
...
  + .browserStack > .dialogStack > .dialogTemplate > .dialogBox {
    margin-top: var(--rdm-toolbar-height);
  }
}

removing the declaration makes the dialog text appear

Comment 5

[BugBot [:suhaib / :marco/ :calixte]]

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

:niklas, since you are the author of the regressor, bug 1897095, could you take a look?

For more information, please visit BugBot documentation.

Comment 6

[Niklas Baumgardner [:niklas]]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #4)

There's now an extra margin-top which pushed the dialog content down https://searchfox.org/mozilla-release/rev/bad2bcb1b74cce00563fde8aab67ae924befe3c2/devtools/client/responsive/responsive-browser.css#21,34-37

.browserContainer.responsive-mode > .rdm-toolbar {
...
  + .browserStack > .dialogStack > .dialogTemplate > .dialogBox {
    margin-top: var(--rdm-toolbar-height);
  }
}

removing the declaration makes the dialog text appear

Maybe we could update the query to not apply when we have the sizeto="limitheight" attribute?

something like .dialogBox:not([sizeto='limitheight'])?

Comment 7

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Niklas Baumgardner [:niklas] from comment #6)

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #4)

There's now an extra margin-top which pushed the dialog content down https://searchfox.org/mozilla-release/rev/bad2bcb1b74cce00563fde8aab67ae924befe3c2/devtools/client/responsive/responsive-browser.css#21,34-37

.browserContainer.responsive-mode > .rdm-toolbar {
...
  + .browserStack > .dialogStack > .dialogTemplate > .dialogBox {
    margin-top: var(--rdm-toolbar-height);
  }
}

removing the declaration makes the dialog text appear

Maybe we could update the query to not apply when we have the sizeto="limitheight" attribute?

something like .dialogBox:not([sizeto='limitheight'])?

or maybe discriminate on the dialogStack element? for example & + .browserStack > .dialogStack:not(.content-prompt-dialog) > .dialogTemplate > .dialogBox as .content-prompt-dialog is the class where we decide to center the children on the grid, which means we don't need the top margin? Using sizeto seems risky as we could have an item that wouldn't be set in the center but needs to have a limited height, and would still do need the top margin. Not sure what can happen, so I'm happy to go with your suggestion if you think it makes more sense

Comment 8

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1918617 - [devtools] Don't apply top margin on prompt dialogs when RDM is enabled. r=niklas.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/20422f409008
[devtools] Don't apply top margin on prompt dialogs when RDM is enabled. r=niklas,devtools-reviewers,ochameau.

Comment 10

[tszentpeteri]

https://hg.mozilla.org/mozilla-central/rev/20422f409008

Comment 11

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1918617 - [devtools] Don't apply top margin on prompt dialogs when RDM is enabled. r=niklas.

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

Comment 12

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1918617 - [devtools] Don't apply top margin on prompt dialogs when RDM is enabled. r=niklas.

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

Comment 13

[Phabricator Automation]

beta Uplift Approval Request

• User impact if declined: content for alert/confirm/prompt dialog is hidden when Responsive Design Mode is opened
• Code covered by automated testing: no
• Fix verified in Nightly: no
• Needs manual QE test: yes
• Steps to reproduce for manual QE testing: Open the DevTools console, enable responsive design mode, in the console, evaluate alert("hello"). In the dialog that opened, check that "hello" is visible
• Risk associated with taking this patch: low
• Explanation of risk level: one liner CSS fix only impacting Responsive Design Mode
• String changes made/needed: -
• Is Android affected?: no

Comment 14

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-beta/rev/f48f0475d741

Comment 15

[Daniel Bodea [:danibodea]]

I can reproduce this issue in Beta v132.0b1 and confirm the fix in Beta v132.0b3 and Nightly v133.0a1. Testing was performed on Windows 10, Ubuntu 22 and MacOS11.

Comment 16

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9429031 [details]
Bug 1918617 - [devtools] Don't apply top margin on prompt dialogs when RDM is enabled. r=niklas.

Approved for 128.4esr.

Comment 17

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-esr128/rev/01a2aa0f4c1b

Comment 19

[Daniel Bodea [:danibodea]]

I can confirm that the fix also works fine in ESR v128.4.0esr. Testing was performed on Windows 10, MacOS 11 and Ubuntu 22.