-
Notifications
You must be signed in to change notification settings - Fork 21
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Network] Columns polish (width, and whether any can be dropped) #87
Comments
Thanks for all the info on this! Wow, that's really good to learn about Transferred vs Size. Definitely sounds like a part we should keep. Maybe I'd rename Size to "File Size". I just realized Chrome also doesn't have Cause, and it does seem mostly redundant with Type. That could be a better column to remove (or partially combine with Type) rather than removing Method. For the columns, I think it'd be easier to parse by changing the flexibility on columns that barely vary in content size to be not flexible, or less flexible. The parts that flex could be File and Waterfall (i.e. flex ratio 2?) and domain (flex 1). Everything else could have static spacing (which could still have some responsiveness for bottom vs side dock). Could look something like this: |
Great analysis, @fvsch! (should we show Size in general as multiples of Re columns: Cause and Type make sense to combine, and also thinking about Initiator. Chrome has a neat feature when holding shift and hover, could be reflected with an interactive offspring that combined Cause/Initiator. We also wanted to kick off a user testing session as Network panel is one of the most diverging between browsers and its hard to tell where we should converge without breaking existing users' workflow. @violasong I like the idea of tweaking the heuristics to apply resizing weighted based on the content's space needs. Status, size and co don't need more space; compared to File, Domain and co. It will probably be a bit complicated Looking at Chrome's Network column resizing, it has a few nice tweaks:
|
For the flexibility part, I think it might be doable since we use fixed table layout, for instance if you defined widths as:
It's okay if the sum of percentages plus fixed widths is not 100%. Fixed table layout will keep the fixed px widths as-is, and the percentages will share what space is left (so the values I used are kind of like flex 2, 3 and 4). So that is doable, but I'm not sure how we would handle resizing with this setup. (I have a few ideas but am not sure they improve on the way we do resizing right now.) If we want to still have some "flex" for those shorter columns, that could be done by mixing pixel and percentage values with calc(), for instance:
That works for display but I'm not sure we can make it work for resizing. :/
I think that's already the case in Firefox? Trying it out now, and at least on a large window it works like that. Maybe in a narrow window we constrain things a bit differently? In my experience it's the only part of resizing Network columns that is not maddeningly frustrating. |
This seems the easiest to code, but also to understand for users and it hopefully matches their expectations on which columns that want to shrink/grow.
The implementation is indeed a tougher case. It does feel this isn't based on percentages but something using |
This could be immensely simplified if we move the name column first, like in Chrome and Safari, so it gets less affected by the current resizing heuristic (which is inspired by Chrome, but works better there because of the default column sorting). |
Ongoing discussion here, nothing pressing. |
Feel free to file bugs that I have missed that came out of this. Seems like some white space improvements came out of this. |
The new Network columns are looking great! There are a few things that could make them even better.
From @fvsch, regarding the badges looking a little cramped, discussed in this bug:
For default column sizing, I'd also suggest slightly more width for the Size and slightly less width for Transferred/Cause. (Based on looking at what starts getting truncated at smaller sizes)
A bigger question is chrome parity. They don't seem to have Method or Transferred columns. Can we drop these?
The text was updated successfully, but these errors were encountered: