New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 330659 link

Starred by 3 users

Issue metadata

Status: Fixed
Owner: ----
Closed: Dec 2013
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

The network bars in Developer Tools aren't Retina-friendly

Project Member Reported by cos...@gmail.com, Dec 25 2013

Issue description

Chrome Version       : 34.0.1760.0
OS Version: OS X 10.9.1

What steps will reproduce the problem?
0. Get Canary (or any recent Chrome, really) and run it on a MacBookPro with a Retina display.
1. Open the Developer Tools, then the Network panel.
2. Navigate to some site like www.facebook.com (google.com is too fast, not as good of an example)
3. Click on the red recording button after a few seconds, to stop the requests from coming in.
4. Look at the colored bars carefully.

What is the expected result?

Crisp images.

What happens instead of that?

The network bars are rendered using .png images, so they look pixelated and fuzzy on Retina displays.

Please provide any additional information below. Attach a screenshot if
possible.

I will submit a CL that fixes this bug soon.

Screenshot:  https://drive.google.com/file/d/0B3bJJUr5NEHYYXBjMkpwa0NHSFE

Current-Chromium is on the right. Compare with crisp, clear Chromium on the right, which is what my CL produces. 

UserAgentString: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1760.0 Safari/537.36
 
So which exactly is on the right? Also, what about the hollow ones? (cached entries).

Comment 2 by cos...@gmail.com, Dec 26 2013

Old screenshot: https://drive.google.com/file/d/0B3bJJUr5NEHYYXBjMkpwa0NHSFE
left=my CL, right=Canary

Screenshot with some hollow bars: https://docs.google.com/file/d/0B3bJJUr5NEHYNlFwbEF1UW9EcUk/edit?pli=1
left=Canary, right=my CL

Sorry for the confusion. At 800% zoom, one can easily guess which is which. 

Comment 3 by meh...@chromium.org, Dec 26 2013

Labels: Cr-UI-HighDPI Cr-Platform-DevTools
Project Member

Comment 4 by bugdroid1@chromium.org, Dec 27 2013

The following revision refers to this bug:
    http://src.chromium.org/viewvc/blink?view=rev&rev=164362

------------------------------------------------------------------------
r164362 | costan@gmail.com | 2013-12-27T18:02:15.890901Z

Changed paths:
   D http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/Images/timelineHollowPillGreen.png?r1=164362&r2=164361&pathrev=164362
   D http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/Images/timelineHollowPillGray.png?r1=164362&r2=164361&pathrev=164362
   D http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/Images/timelinePillBlue.png?r1=164362&r2=164361&pathrev=164362
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/devtools.gypi?r1=164362&r2=164361&pathrev=164362
   D http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/Images/timelineHollowPillPurple.png?r1=164362&r2=164361&pathrev=164362
   D http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/Images/timelineHollowPillRed.png?r1=164362&r2=164361&pathrev=164362
   D http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/Images/timelineHollowPillOrange.png?r1=164362&r2=164361&pathrev=164362
   D http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/Images/timelineHollowPillYellow.png?r1=164362&r2=164361&pathrev=164362
   D http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/Images/timelinePillGreen.png?r1=164362&r2=164361&pathrev=164362
   D http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/Images/timelinePillGray.png?r1=164362&r2=164361&pathrev=164362
   D http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/Images/timelinePillPurple.png?r1=164362&r2=164361&pathrev=164362
   D http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/Images/timelinePillRed.png?r1=164362&r2=164361&pathrev=164362
   D http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/Images/timelinePillOrange.png?r1=164362&r2=164361&pathrev=164362
   D http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/Images/timelinePillYellow.png?r1=164362&r2=164361&pathrev=164362
   D http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/Images/timelineHollowPillBlue.png?r1=164362&r2=164361&pathrev=164362
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/networkLogView.css?r1=164362&r2=164361&pathrev=164362

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.

Review URL: https://codereview.chromium.org/99923009
------------------------------------------------------------------------

Comment 5 by cos...@gmail.com, Dec 27 2013

This issue can be closed as fixed. Yay!

Comment 6 by eustas@chromium.org, Dec 30 2013

Status: Fixed

Sign in to add a comment