1417727 - Hide toolbox panel icons before text overflows

Status: NEW

(DevTools :: General, enhancement, P2)

Description

[:Harald Kirschner :digitarald]

Attachment: small-panels-with-icons.PNG

Related: https://twitter.com/ManuelBieh/status/930531534804803584

This issue gets worse with additional panels installed via addons.

Comment 1

[:Harald Kirschner :digitarald]

Attachment: with-addons.PNG

Comment 2

[:Harald Kirschner :digitarald]

:vicoria feeback? on the general idea.

Comment 3

[Victoria Wang [:victoria]]

I agree with this idea and think it should be combined with the overflow idea (which I believe was filed by gl). 

As window gets narrower: 
- start squishing the padding
- then hide the toolbar icons
- then, as soon as the names are about to get uncomfortably close to each other, start hiding tabs into an overflow menu and show the overflow chevron

Comment 4

[Mantaroh Yoshinaga[:mantaroh]]

Attachment: Hide-icon-when-toolbox-is-narrow.mp4

Now, toolbox will hide the icon if toolbox width is narrow(under 700px)[1]. However, bug 1442531 removed this styles. This bug should change to hide the icon when toolbox width is narrow.

[1] https://searchfox.org/mozilla-central/rev/6bfadf95b4a6aaa8bb3b2a166d6c3545983e179a/devtools/client/themes/toolbox.css#95-109

This attachment video is WIP behavior. If toolbox width is smaller than the sum of tool tab width, the toolbox will hide the icon of a tab.

victoria,
Could you confirm this capture?

I tried that remove padding from tool tab[2], however, If toolbox removes the margin-inline style from tool tab, I feel that it is little hard to read the label.

What do you think about this behavior?

[2] https://screenshots.firefox.com/JuoMuWl8YYvCagje/null

Comment 5

[Victoria Wang [:victoria]]

Hi Mantaroh,

In the WIP video, the point at which the icons disappear/appear seems a bit jarring. I know the slow-resizing of DevTools won't be a common use case, but I was imagining that each tab width would be flexible, so the margin would squish for a while before hiding/showing the icons. Maybe this won't work as well as I thought, because there isn't that much spacing between tabs to begin with? (I agree that with no margin, it's too hard to read - there would need to be a certain minimum margin.)

Comment 6

[Patrick Brosset <:pbro>]

This bug has not been updated in the last 6 months. Resetting the assignee field.
Please, feel free to pick it up again and add a comment outlining your plans for it if you do still intend to work on it.
This is just trying to clean our backlog of bugs and make bugs available for people.