DevTools: network log bars use CSS instead of pre-rendered images.

DevTools: network log bars use CSS instead of pre-rendered images.

This change removes the pre-rendered PNG images used by the bars shown
in the timeline in the Network panel, and relies on CSS to render the
bars. The colors in the CSS rules are picked from the PNG files that
they replace.

The immediate benefit of this change is that the Network view looks more
crisp on Retina displays and other high-resolution displays. A secondary
benefit is that adding new resource types (and thus new bar colors)
should be quite a bit easier.

BUG=330659
TEST=Browsed to a few sites in Chromium with the Network panel open.

Committed: https://src.chromium.org/viewvc/blink?view=rev&revision=164362

[pwnall-personal, 2013-12-25 18:30:51]

Can you please take a look and tell me what you think?

The screenshot in the bug is a good abstract for this CL.
https://drive.google.com/file/d/0B3bJJUr5NEHYYXBjMkpwa0NHSFE

The right side is "before", the left side is "after".

[pfeldman, 2013-12-26 04:56:46]

lgtm

Please attach the screenshot w/ hollow versions prior to landing.

[pfeldman, 2013-12-26 04:56:59]

https://codereview.chromium.org/99923009/diff/50001/LayoutTests/inspector/res...
File LayoutTests/inspector/resources/blink-fs.js (left):

https://codereview.chromium.org/99923009/diff/50001/LayoutTests/inspector/res...
LayoutTests/inspector/resources/blink-fs.js:351:
"./Source/devtools/front_end/Images/thumbHoverVert.png",
This file is unrelated, just poorly chosen test data.

[eustas, 2013-12-26 05:13:58]

lgtm

https://codereview.chromium.org/99923009/diff/50001/Source/devtools/front_end...
File Source/devtools/front_end/networkLogView.css (right):

https://codereview.chromium.org/99923009/diff/50001/Source/devtools/front_end...
Source/devtools/front_end/networkLogView.css:380: border-color: hsl(215, 48%,
52%);
Do we need to redefine border-color in .resource-cached rules?

https://codereview.chromium.org/99923009/diff/50001/Source/devtools/front_end...
Source/devtools/front_end/networkLogView.css:383: inset 0 0 0 2px hsl(215, 71%,
61%),
AFAIR, we prefer rgb/rgba for color.
(Though a little bit of hsl infiltrated to helpScreen.css)

https://codereview.chromium.org/99923009/diff/50001/Source/devtools/front_end...
Source/devtools/front_end/networkLogView.css:395: box-shadow: inset 0 1px 1px
0px rgba(255, 255, 255, 0.8),
Can't shadow be unified for all .resource-cached?

[pwnall-personal, 2013-12-26 05:26:04]

On 2013/12/26 04:56:46, pfeldman_ooo wrote:
> lgtm
> 
> Please attach the screenshot w/ hollow versions prior to landing.

https://docs.google.com/file/d/0B3bJJUr5NEHYNlFwbEF1UW9EcUk/edit?pli=1
(left = canary, right = Chromium build with my CL patched in)

What do you think?

[pfeldman, 2013-12-26 05:29:53]

Yep, figured it out now. I like the new look, hence lgtm

[pwnall-personal, 2013-12-26 05:39:56]

Thank you for your feedback, Eugene! Can you please look at my questions below?

https://codereview.chromium.org/99923009/diff/50001/LayoutTests/inspector/res...
File LayoutTests/inspector/resources/blink-fs.js (left):

https://codereview.chromium.org/99923009/diff/50001/LayoutTests/inspector/res...
LayoutTests/inspector/resources/blink-fs.js:351:
"./Source/devtools/front_end/Images/thumbHoverVert.png",
On 2013/12/26 04:56:59, pfeldman_ooo wrote:
> This file is unrelated, just poorly chosen test data.

Done.

Thank you very much! I removed this diff from the CL. Sorry, I got misled by the
file name.

https://codereview.chromium.org/99923009/diff/50001/Source/devtools/front_end...
File Source/devtools/front_end/networkLogView.css (right):

https://codereview.chromium.org/99923009/diff/50001/Source/devtools/front_end...
Source/devtools/front_end/networkLogView.css:380: border-color: hsl(215, 48%,
52%);
On 2013/12/26 05:13:58, eustas wrote:
> Do we need to redefine border-color in .resource-cached rules?

A couple of bars have the same border color, but most of them have slightly
different borders. Again, if losing a bit of accuracy vs the PNGs is OK, I can
make the colors more uniform. What do you think?

https://codereview.chromium.org/99923009/diff/50001/Source/devtools/front_end...
Source/devtools/front_end/networkLogView.css:383: inset 0 0 0 2px hsl(215, 71%,
61%),
On 2013/12/26 05:13:58, eustas wrote:
> AFAIR, we prefer rgb/rgba for color.
> (Though a little bit of hsl infiltrated to helpScreen.css)

I used HSL because all the colors in a bar have the same hue, so I used the hue
as an easy check against copy-paste errors. I figured it'd also make it easier
to tweak the colors later on.

Do you think consistency trumps ease of checking? If so, I'll change to rgb /
rgba. I did use rgba for white :D

https://codereview.chromium.org/99923009/diff/50001/Source/devtools/front_end...
Source/devtools/front_end/networkLogView.css:395: box-shadow: inset 0 1px 1px
0px rgba(255, 255, 255, 0.8),
On 2013/12/26 05:13:58, eustas wrote:
> Can't shadow be unified for all .resource-cached?

I did this to reproduce the .png files as accurately as possible. It seems like
the colors were manually tuned, I didn't see a constant pattern of deltas
between them. I can look into using alpha box-shadows, at the cost of having
colors differ slightly from the .png versions. Would that be acceptable?

[pfeldman, 2013-12-26 06:39:54]

Slight deviation from pngs is fine as long as it simplifies the code / makes it
more consistent. I also like the hsl-based definitions for the reasons you
listed. Original pngs were designed and rasterized in PS, so no wonder they are
hard to reverse engineer.

[pwnall-personal, 2013-12-26 07:29:35]

On 2013/12/26 06:39:54, pfeldman_ooo wrote:
> Slight deviation from pngs is fine as long as it simplifies the code / makes
it
> more consistent. I also like the hsl-based definitions for the reasons you
> listed. Original pngs were designed and rasterized in PS, so no wonder they
are
> hard to reverse engineer.

I removed the extra border-colors, and didn't notice a difference.

I haven't been able to figure out how to use a single box-shadow for the hollow
bars. The problem is I need a dark saturated color for the outside ring, and a
light saturated color for the inside of the bar. Alpha-blending with a gray
de-saturates my colors, so I end up with a grey-ish ring or with a white-ish
inside. I can't move the ring to the border, because the white shine on top of
it is also done with box-shadow, which can either go inside or outside the
border, but can't overlap it. I don't know of any CSS property that lets me
shade the border itself.

I'll sleep on it. Sorry if I'm missing something obvious.

[pwnall-personal, 2013-12-26 15:44:05]

https://codereview.chromium.org/99923009/diff/50001/Source/devtools/front_end...
File Source/devtools/front_end/networkLogView.css (right):

https://codereview.chromium.org/99923009/diff/50001/Source/devtools/front_end...
Source/devtools/front_end/networkLogView.css:395: box-shadow: inset 0 1px 1px
0px rgba(255, 255, 255, 0.8),
On 2013/12/26 05:13:58, eustas wrote:
> Can't shadow be unified for all .resource-cached?

Here is the best I could get:

https://drive.google.com/file/d/0B3bJJUr5NEHYWk56SFZ5VmN6RjA
(left=unified box-shadow, right=per-class box-shadow)

This looks decent on dark colors (purple, red, blue), but really bad on light
colors (green, yellow, orange). If I put together a rule that looks ok light
colors, it'll probably bad on dark colors.

Also, FWIW, the unified rule uses 4 shadows instead of 3, because I have to use
alpha for the ring, and looks blurry at extreme zoom levels.

What do you think?

[pwnall-personal, 2013-12-27 15:02:30]

Eugene: ping?

I'd like to land this CL. I think it's a step forward as it is, and I couldn't
figure out how to consolidate the CSS rules without degrading the appearance.
Also, I'll be happy to iterate on it if more ideas / feedback come up.

Are you OK with this?

On 2013/12/26 15:44:05, pwnall wrote:
>
https://codereview.chromium.org/99923009/diff/50001/Source/devtools/front_end...
> File Source/devtools/front_end/networkLogView.css (right):
> 
>
https://codereview.chromium.org/99923009/diff/50001/Source/devtools/front_end...
> Source/devtools/front_end/networkLogView.css:395: box-shadow: inset 0 1px 1px
> 0px rgba(255, 255, 255, 0.8),
> On 2013/12/26 05:13:58, eustas wrote:
> > Can't shadow be unified for all .resource-cached?
> 
> Here is the best I could get:
> 
> https://drive.google.com/file/d/0B3bJJUr5NEHYWk56SFZ5VmN6RjA
> (left=unified box-shadow, right=per-class box-shadow)
> 
> This looks decent on dark colors (purple, red, blue), but really bad on light
> colors (green, yellow, orange). If I put together a rule that looks ok light
> colors, it'll probably bad on dark colors.
> 
> Also, FWIW, the unified rule uses 4 shadows instead of 3, because I have to
use
> alpha for the ring, and looks blurry at extreme zoom levels.
> 
> What do you think?

[pfeldman, 2013-12-27 16:54:42]

Go ahead and land it.

[commit-bot: I haz the power, 2013-12-27 16:55:38]

CQ is trying da patch. Follow status at
https://chromium-status.appspot.com/cq/costan@gmail.com/99923009/280001

[pwnall-personal, 2013-12-27 16:56:29]

On 2013/12/27 16:54:42, pfeldman_ooo wrote:
> Go ahead and land it.

Thank you!

Sorry I had the wrong sharing permissions on the last image. It's visible to
anyone with the link now.

[commit-bot: I haz the power, 2013-12-27 18:02:17]

Change committed as 164362