Closed Bug 1786509 Opened 2 years ago Closed 2 years ago

The Upgrading Users modals does not have scroll bars when the browser is resized

Categories

(Firefox :: Messaging System, defect, P1)

Desktop
All
defect

Tracking

()

VERIFIED FIXED
106 Branch
Iteration:
106.2 - Sept 5 - Sept 16
Tracking Status
firefox106 --- verified

People

(Reporter: avarro, Assigned: aminomancer)

References

(Blocks 2 open bugs)

Details

Attachments

(5 files)

Attached video Screen Recording.mov

[Affected versions]:

  • Firefox Nightly 106.0a1 - Build ID: 20220822190304

[Affected Platforms]:

  • Windows 10 x64
  • macOS 12.3.1
  • Linux Mint 20.2 x64

[Prerequisites]:

  • Have the Firefox browser installed and opened.
  • Have the “devtools.chrome.enabled” pref set to true.
  • Have the Browser Console opened.(Ctrl+Shift+J)
  • Have the “Cc["@mozilla.org/browser/browserglue;1"].getService().wrappedJSObject._showUpgradeDialog();” syntax copied to clipboard.

[Steps to reproduce]:

  1. Focus the browser console (Ctrl+Shift+J), paste the “Cc["@mozilla.org/browser/browserglue;1"].getService().wrappedJSObject._showUpgradeDialog();” string, and press “Enter” key.
  2. Modify the height by resizing the browser and observe the elements displayed on the browser’s page.

[Expected result]:

  • The modals are correctly rendered and have a scroll bar when the browser is resized.

[Actual result]:

  • The modals do not have a scroll bar when the browser is resized and a part of the elements cannot be accessed.

[Notes]:

  • This issue is not reproducible for new users.
  • Attached is a screen recording of the issue.

NI @mcoman to help confirm if scrollbar shows up if the window is initially small. Thanks

Flags: needinfo?(mcoman)

The scrollbar does appear if the height of the window is less than the height of the content when the modal opens (although it does feel a little janky because you can't scroll down to the secondary CTA). It also sticks around if the window starts small when you open the modal, then you scale the window up, then scale it back down. I think that is because the SubDialog styles are only set once, on dialog load.

As for the scrollport not accommodating the full modal, I think maybe we can fix it by using height: max(100vh, 100%) instead of height: 100vh. The top margin also contributes to the awkwardness for small heights, maybe this could be overridden with a relative value when max-height: 550px?

Edit: Actually, when max-height: 550px, maybe the block margins should just be 0. Since these dialogs overlay the whole window including the chrome, it kinda makes sense for the dialog content itself to cover the whole vertical span of the window when the window height is less than or equal to the dialog height. Alternatively, I guess it would be possible to add a more horizontally spread layout for (max-height: 550px) and (min-width: 800px), but with all the animations being added in bug 1776707, that seems like a lot of work

Edit: To clarify, I tested on Windows 10. I'll do some testing on macOS next.

Hello, Punam!
I’ve talked to @mcoman and I have retested this issue using the scenario you provided in comment 1. However, it seems that the scrollbars do not appear if the height of the browser’s window is initially reduced before triggering the Upgrading Users modals.

Flags: needinfo?(mcoman)
Iteration: --- → 106.1 - Aug 22 - Sept 2
Priority: -- → P1
Assignee: nobody → shughes
Status: NEW → ASSIGNED

Make the modal dialog frame for Spotlight cover the full window, disable
the fixed sizing in SubDialog for Spotlight (and future fullscreen
modals), and switch to using height instead of margin to control the
position of the Spotlight relative to its frame, so that the Spotlight's
top "margin" will be dynamic: maximum of 156px, but minimum of 0. That
also makes the scrollport accommodate the full Spotlight so it can be
scrolled, without wasting any scroll distance on margins. So, the top
margin will shrink with the window, like the other margins do.

Here's a screen recording of my first revision (621328)

Opening the dialog while it's taller than the window.

And opening the dialog while it's taller and wider than the window.

Iteration: 106.1 - Aug 22 - Sept 2 → 106.2 - Sept 5 - Sept 16
Blocks: 1789898
Blocks: 1790124
Pushed by elee@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/d1823131fc19
Fix Spotlight modal overflow scroll behavior. r=pdahiya

Backed out for causing mochitest failures on browser_modal_resize.js . CLOSED TREE
Backout link
Push with failures
Link to failure log
Failure line :
TEST-UNEXPECTED-FAIL | toolkit/components/printing/tests/browser_modal_resize.js | Uncaught exception in test - Wait for 492x304 - timed out after 50 tries

Please also check this new fail / failure line :
TEST-UNEXPECTED-FAIL | toolkit/components/printing/tests/browser_preview_navigation.js | Found an unexpected tab at the end of test run
It appears with Log parsing was skipped since the log exceeds the size limit.
Treeherder link

Flags: needinfo?(shughes)

Thanks for pushing this for me, Ed. I haven't checked any tests for this patch yet - I'll push it again when it's ready

Flags: needinfo?(shughes)
Pushed by elee@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/d35857c41f65
Fix Spotlight modal overflow scroll behavior. r=pdahiya
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → 106 Branch

I have verified this issue using the latest Firefox Nightly 106.0a1 (Build ID: 20220911214030) on Windows 10x64, macOS 12.3.1 and Linux Mint 20.2 x64 and I can confirm the following:

  • The scroll bars appear when the height of the browser’s window is resized.
  • The scroll bars appear if the height of the browser’s window is initially reduced before triggering the Upgrading Users modals.
Status: RESOLVED → VERIFIED
Blocks: 1790462
Duplicate of this bug: 1734605
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: