Web Inspector: Add backbars to sequential data in data grid

• Component: Web Inspector
• Status: ASSIGNED ---

[Nikita Vasilyev]

Created attachment 257999 [details]
[Image] Backbars for resource sizes

This is the earliest reference of backbars I could find:

https://web.archive.org/web/20101203063601/http://elzr.com/backbars

"The idea is to give you subtle non-verbal clues to improve your browsing experience almost subconsciously. The backbars don’t replace the count they represent, what they do is convey you its magnitude unobtrusively, and, crucially, compare that magnitude to those around it. So you can now see, almost without thinking, that, say, some comment [on Reddit] is popular, but that there’s a comment around that’s twice as popular."

[Timothy Hatcher]

Neat! I like the idea, I just think we need to iterate on the styling of them some more. Running into the letters (especially the thin line) is the main issue I think I am having with the current mockup.

[Nikita Vasilyev]

(In reply to comment #1)
> Neat! I like the idea, I just think we need to iterate on the styling of
> them some more. Running into the letters (especially the thin line) is the
> main issue I think I am having with the current mockup.

The thin line could be lighter.

Also, I think the bars should be aligned to left, even though the text is aligned to right.

[Timothy Hatcher]

(In reply to comment #2)
> (In reply to comment #1)
> > Neat! I like the idea, I just think we need to iterate on the styling of
> > them some more. Running into the letters (especially the thin line) is the
> > main issue I think I am having with the current mockup.
> 
> The thin line could be lighter.
> 
> Also, I think the bars should be aligned to left, even though the text is
> aligned to right.

I think matching the text alignment is better.

[Nikita Vasilyev]

Chrome DevTools implemented backbars in Canary.
https://developers.google.com/web/updates/2015/07/23/devtools-digest-aggregated-timeline-details-color-palettes-and-more#better-blame-perf-issues-aggregated-details-in-timeline

I have to admit, I like how they used an underlying line. It isn't running into the letters as in my mockup.

[Radar WebKit Bug Importer]

<rdar://problem/22470003>

[Timothy Hatcher]

Yeah, that works well.

Though I think we could do the vertical line, if you add a text stroke that matches the background color. Then when it intersects the line, it does a cut out.

Perhaps even a top, bottom and side vertical line. To form an outlined bar. The single line kind of bothers me the more I look at it, it isn't grounded/connected to anything.

[Matt Baker]

(In reply to comment #6)
> Yeah, that works well.
> 
> Though I think we could do the vertical line, if you add a text stroke that
> matches the background color. Then when it intersects the line, it does a
> cut out.

Which background color, the backbar or grid cell? If we use the backbar color, text will look odd against the grid cell where there is no backbar coloring. If we use the grid cell, the text may appear too busy with a white background against the backbar.

> Perhaps even a top, bottom and side vertical line. To form an outlined bar.
> The single line kind of bothers me the more I look at it, it isn't
> grounded/connected to anything.

I prefer the single vertical line, but think top and bottom borders may look a bit heavy, especially against the grid cell borders and other backbar borders.

[Timothy Hatcher]

(In reply to comment #7)
> (In reply to comment #6)
> > Yeah, that works well.
> > 
> > Though I think we could do the vertical line, if you add a text stroke that
> > matches the background color. Then when it intersects the line, it does a
> > cut out.
> 
> Which background color, the backbar or grid cell? If we use the backbar
> color, text will look odd against the grid cell where there is no backbar
> coloring. If we use the grid cell, the text may appear too busy with a white
> background against the backbar.

Ah, yes. I forgot there would be two background colors here.

> > Perhaps even a top, bottom and side vertical line. To form an outlined bar.
> > The single line kind of bothers me the more I look at it, it isn't
> > grounded/connected to anything.
> 
> I prefer the single vertical line, but think top and bottom borders may look
> a bit heavy, especially against the grid cell borders and other backbar
> borders.

Yeah maybe so.