1932455 - Responsive design mode device list shows no scrollbar to view all the devices

Status: VERIFIED FIXED

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

Description

[Karan Yadav]

Attachment: firefox-devtools-devices-menu-bug-full-window-screenshot.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:132.0) Gecko/20100101 Firefox/132.0

Steps to reproduce:

Here are the steps to reproduce:

1. Hit Ctrl + Shift + M to open Responsive device mode
2. Open device list
   • If you don't have the large number of devices, then enter Edit List and add them
   • After adding again, open the device list

Actual results:

Actual:
Not able to see all the devices which I have added from the device list.

Expected results:

Expected:
There should be a scrollbar so that I can see all the devices, means it's an issue with the styling of devices menu.

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Thanks for reporting the issue, I can reproduce it

Comment 2

[Karan Yadav]

Hi, I'd like to contribute by fixing this issue. Is there any specific approach you'd recommend?

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Karan Yadav from comment #2)

Hi, I'd like to contribute by fixing this issue. Is there any specific approach you'd recommend?

Thanks for offering help :)
If this is the first time you're contributing to Firefox, you need to follow https://firefox-source-docs.mozilla.org/contributing/contribution_quickref.html to setup the work environment.
Then for this specific issue, you can use the Browser Toolbox (https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html) to be able to inspect Firefox UI. Since the device select is a tooltip, you should check the "Disable popup autohide" in the … menu.
You can then inspect the element you want to work on, see what's missing and try things in the Rules view.

Let me know if you have any questions :)

Comment 4

[Karan Yadav]

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

(In reply to Karan Yadav from comment #2)

Hi, I'd like to contribute by fixing this issue. Is there any specific approach you'd recommend?

Thanks for offering help :)
If this is the first time you're contributing to Firefox, you need to follow https://firefox-source-docs.mozilla.org/contributing/contribution_quickref.html to setup the work environment.
Then for this specific issue, you can use the Browser Toolbox (https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html) to be able to inspect Firefox UI. Since the device select is a tooltip, you should check the "Disable popup autohide" in the … menu.
You can then inspect the element you want to work on, see what's missing and try things in the Rules view.

Let me know if you have any questions :)

Thank you for the detailed instructions and helpful links!

I’ve set up my development environment as per the contribution guide and started exploring the issue using the Browser Toolbox. The tip about disabling popup autohide was particularly useful—thanks for pointing that out! I'll inspect the relevant elements and test potential fixes in the Rules view.

I’ll post an update soon with my findings or any questions I encounter along the way.

Comment 5

[Karan Yadav]

Attachment: Here is the video showing the expected UI

Comment 6

[Karan Yadav]

Attachment: Bug 1932455 - [devtools] Ensure tooltip content is scrollable by adding max-height and overflow properties, directly targetting the RDM using the HTML element id attribute. r=#devtools-reviewers

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f3b6b9e8acd6
[devtools] Ensure tooltip content is scrollable by adding max-height and overflow properties, directly targetting the RDM using the HTML element id attribute. r=devtools-reviewers,nchevobbe

Comment 8

[Norisz Fay [:noriszfay]]

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

Comment 9

[Bianca Hidecuti, Desktop Test Engineering [:bhidecuti] (PTO until July 28. Please ni? [:mboldan])]

I was able to reproduce the issue on an affected Firefox Nightly 134.0a1 from 2024-11-20, using Ubuntu 22.04, while following the steps from Comment 0.
Verified as fixed on Firefox 135.0b2 using Windows 11, macOS 13.6 and Ubuntu 22.04. Responsive design mode device list shows a scrollbar to view all the devices.