1547634 - Define better default size for columns

Status: NEW

(DevTools :: Netmonitor, enhancement, P3)

Description

[Jan Honza Odvarko [:Honza] (always need-info? me)]

The default column size should be improved

Some comments from Slack:

• Each column (besides Domain and File) should be just wide enough to fit the full header label + sort icon, as well as the longest typical content. This gives us more room for File as well as the waterfall

• This can be very difficult with different fonts on different operating systems (expect a +-10% variance), and especially difficult with localization of labels (many languages have labels that are +20% or even +50% the length of English ones).

• Reserving a minimum of 30% of the width for the waterfall could be nice.

Honza

Comment 1

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Some technical comments:

• Default size is defined through the following pref: devtools.netmonitor.columnsData

• The pref defines an array with the following structure:

{
  "name": "status",  // target column ID
  "minWidth": 30,    // minimal column width
  "width": 4.87      // default/current columns width
}

• The pref itself is defined here:

https://searchfox.org/mozilla-central/rev/66086345467c69685434dd1c5177b30a7511b1a5/devtools/client/preferences/devtools-client.js#170

Honza

Comment 2

[lloan alas:[lloanalas]]

Honza,

I'm interested in tackling this enhancement. Sounds like it might be fun. If it's okay, I'd like to be assigned to it.

Thanks!

Comment 3

[Victoria Wang [:victoria]]

Attachment: image.png

Re: Differing language lengths:

This graph shows the most common languages used by weekly/daily users. Looks like we should verify that the headers look good in Chinese, German, and French, at least.

Comment 4

[:Harald Kirschner :digitarald]

Taking a responsive design approach, couldn't we measure the header lengths in context and adjust minimum widths accordingly?

Comment 5

[Jan Honza Odvarko [:Honza] (always need-info? me)]

One note, the (default) columns size stored in preferences is in %, so it depends on the actual window size. If the user makes the browser window small enough (or docks the Toolbox to the side) some column-titles won't be fully visible.

We could set min size (which is in px and default is 30) to all columns, but (except of the Waterfall/Timeline) it doesn't seem like a good idea. The user should have a chance to make the column really small - even if the title isn't fully visible.

Also, summary of the column sizes (in %) should always be 100. So, it also depends what columns are currently visible and it's recalculated when the user shows/hides columns.

(In reply to :Harald Kirschner :digitarald from comment #4)

Taking a responsive design approach, couldn't we measure the header lengths in context and adjust minimum widths accordingly?

I like the idea. We could measure size of the label - one time (using the current font/OS/localization) and use the number (for some columns only?) to calculate the preferred size in %. Of course, in the end it depends what columns are visible and what is the available window size.

lloan: I am happy to assign this to you. Still interested? Any algorithmic suggestions about how we could implement the logic?

Honza

Comment 6

[Victoria Wang [:victoria]]

It might make sense to land a first version that's just better default widths in percentages. The next version can get more sophisticated.