Bug 147523

Summary: Web Inspector: Add backbars to sequential data in data grid
Product: WebKit Reporter: Nikita Vasilyev <nvasilyev>
Component: Web InspectorAssignee: Nikita Vasilyev <nvasilyev>
Status: ASSIGNED    
Severity: Normal CC: graouts, hi, inspector-bugzilla-changes, jonowells, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
Attachments:
Description Flags
[Image] Backbars for resource sizes none

Nikita Vasilyev
Reported 2015-08-01 00:11:19 PDT
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."
Attachments
[Image] Backbars for resource sizes (75.22 KB, image/png)
2015-08-01 00:11 PDT, Nikita Vasilyev 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Timothy Hatcher
Comment 1 2015-08-01 03:17:50 PDT
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
Comment 2 2015-08-01 05:22:47 PDT
(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
Comment 3 2015-08-01 09:26:32 PDT
(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
Comment 4 2015-08-27 21:44:07 PDT
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
Comment 5 2015-08-27 21:44:26 PDT
<rdar://problem/22470003>
Timothy Hatcher
Comment 6 2015-08-28 09:22:49 PDT
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
Comment 7 2015-08-28 17:45:48 PDT
(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
Comment 8 2015-08-31 10:04:14 PDT
(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.
Note You need to log in before you can comment on or make changes to this bug.