Closed Bug 1516549 Opened 5 years ago Closed 4 years ago

[meta] Fix scrolling at narrow widths for each tool in the Inspector sidebar

Categories

(DevTools :: Inspector, defect, P3)

Product:
DevTools
Component:
Inspector
Type:
defect

Tracking

(firefox65 affected, firefox66 affected)

Status:
RESOLVED FIXED
Tracking Flags:
Tracking Status
firefox65 --- affected
firefox66 --- affected

People

(Reporter: JuliaC, Assigned: miker)

References

Details

(Keywords: meta)

Attachments

(1 obsolete file) 

[Affected versions]:
- 65.0b6 build1 (20181220174318)
- 66.0a1 (2018-12-27)

[Affected platforms]:
- Windows 10 x64
- macOs 10.13.6
- Ubuntu 18.04 x64

[Steps to reproduce]:
Preconditions:
- go to about:config and make sure that devtools.inspector.changes.enabled is set to true
1. Launch Firefox
2. Go to a random website
3. Right click on any element and select the Inspect Element context menu option
4. Make some changes in the Rules panel in order to populate the Changes tab 
5. Modify the Changes tab width 
6. Inspect the lower side of the Changes tab
7. Toggle the 3-pane inspector and repeat steps 5 and 6

[Expected result]:
- The horizontal scrollbar is displayed for the Changes tab on width low values

[Actual result]:
- The Changes tab doesn't get any horizontal scrollbar for low width values
- for more details, see the attached screencast https://drive.google.com/file/d/1a-gPFHe2afa3pOSyknVwmirOoxiFTKuy/view?usp=sharing

[Regression range]:
- I will provide more information as soon as possible
Priority: -- → P3
The issue is reproducible all the way back to 65.0a1 (2018-10-26), so this is not e regression.
This is not specific to the Changes panel and affects all Inspector sidebar panels while in 3-pane mode. I updated the title accordingly.

The culprit might be this minSize which is unitless 10 (defaults to pixels) instead of the explicit "10%".
https://searchfox.org/mozilla-central/source/devtools/client/inspector/inspector.js#557
No longer blocks: track-changes
Summary: [Track changes] - No horizontal scrollbar for width low values → Inspector sidebar gets unusably narrow and has no horizontal scrollbar
See Also: → 1472200
Assignee: nobody → mratcliffe
Status: NEW → ASSIGNED

No scrollbar on overflow:

  • Rule View
  • Layout view
  • Computed View
  • Changes View
  • Animation Panel

Scrollbar on overflow:

  • Font View

minSize does not cause this issue.

We kept the same minWidth because we have had bugs in the past because panels couldn't be narrowed "enough." The 10px size just ensures that users can always drag the panel again after making it really small (some users resize to hide the panel).

Attachment #9101253 - Attachment is obsolete: true
Summary: Inspector sidebar gets unusably narrow and has no horizontal scrollbar → [meta] Fix scrolling at narrow widths for each tool in the Inspector sidebar

I am changing this to a meta bug and fixing each tool as a separate bug... this will help me to focus.

Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: