Make WordPress Core

Opened 12 years ago

Closed 11 years ago

Last modified 11 years ago

#21019 closed task (blessed) (fixed)

Retina All the Things

Reported by: matt's profile matt Owned by: azaozz's profile azaozz
Milestone: 3.5 Priority: normal
Severity: normal Version: 3.4
Component: Administration Keywords: has-patch
Focuses: Cc:

Description

We did an okay job of getting some menu icons and such Retina in 3.4, but we missed some key parts. Wanted to start a main ticket for all of these, so we don't miss anything. I think we should put these into the 3.4.1 update, and do a nice blog post about it. Places I've noticed missing 2x graphics so far:

  • WYSIWYG toolbar icons
  • Media upload icons
  • W favicon on Press This page
  • Spinner used on Press This, probably some other places
  • The "scheduling" calendar icon next to where you edit the date for a post.
  • The video media icon, when zoomed in on gallery page, probably other media icons - http://cl.ly/0E1u3O1c3x0H3f3Q1Q2N
  • Generic plugin menu item icon, possibly the arrow to collapse menu - http://cl.ly/1I0N470u1z2g3b1Y3N3Q
  • Screenshots on about.php (logo at top looks great)
  • Comment bubbles, icon at top, point at bottom, and centering of text - http://cl.ly/34100L3q1m120d1P3p0Q

Those are the bugs. Longer term we should think about enhancements, and probably new tickets, for:

  • Theme screenshots
  • Gravatars
  • Header graphics on plugin directory
  • .org showcase
  • Our Tracs

Attachments (96)

retina-border-weights.png (114.1 KB) - added by johnjamesjacoby 12 years ago.
media-icons_2x.png (2.2 KB) - added by chexee 12 years ago.
2x media upload icons
align-images.zip (4.1 KB) - added by helenyhou 12 years ago.
wpicons_2x.png (43.5 KB) - added by empireoflight 12 years ago.
tinymce_wp_sprite_2x.psd.zip (110.6 KB) - added by empireoflight 12 years ago.
Source file for retina tinyMCE editor icons
21019.patch (2.5 KB) - added by azaozz 12 years ago.
date-button-retina.gif (992 bytes) - added by empireoflight 12 years ago.
21019.curtime.diff (1.5 KB) - added by helenyhou 12 years ago.
21019.curdate.png (12.5 KB) - added by helenyhou 12 years ago.
date-button-13px.gif (227 bytes) - added by empireoflight 12 years ago.
13x13 pixel like the original
date-button.gif (400 bytes) - added by empireoflight 12 years ago.
16x16 with the border a little lighter
date-button.psd.zip (24.6 KB) - added by empireoflight 12 years ago.
New psd for date icon with 13x13 icon in it
wpicons-2x.png (122.5 KB) - added by lessbloat 12 years ago.
made some sprite positioning tweaks
list_64.png (2.0 KB) - added by empireoflight 12 years ago.
List expanded view icons at 2x resolution
list_64.psd (74.5 KB) - added by empireoflight 12 years ago.
list expanded view icons psd file for design repo
arrows.png (1.3 KB) - added by empireoflight 12 years ago.
2x retina arrows for help etc.
arrows.psd (41.5 KB) - added by empireoflight 12 years ago.
2x retina arrows for help etc. psd for design repo
video.png (1.0 KB) - added by empireoflight 12 years ago.
The video media icon on gallery page at 2x
video.psd (41.2 KB) - added by empireoflight 12 years ago.
The video media icon on gallery page at 2x, psd for design repo
wpicons-2x.tweaked.png (31.1 KB) - added by helenyhou 12 years ago.
2x TinyMCE icons, positions tweaked
1x-artifacting.png (18.9 KB) - added by johnjamesjacoby 12 years ago.
2x icons in 1x mode - bbPress vs WordPress
wpicons-2x.with.tweaks.png (122.9 KB) - added by lessbloat 12 years ago.
A couple of these still seemed off (including ABC icon) so I make a few tweaks.
21019.image-align.diff (1.0 KB) - added by helenyhou 12 years ago.
image-align-smushed.zip (4.0 KB) - added by helenyhou 12 years ago.
media icons_2x.psd (91.0 KB) - added by empireoflight 12 years ago.
This one has all 5 media icons.
media-icons_2x.2.png (3.2 KB) - added by empireoflight 12 years ago.
PNG of the media icons. Needs to be sliced or arranged in a sprite
arrows-dark.png (1.0 KB) - added by empireoflight 12 years ago.
2x dark grey arrows
arrows-vs-dark.png (1009 bytes) - added by empireoflight 12 years ago.
2x dark blue arrows
arrows-vs.png (1.2 KB) - added by empireoflight 12 years ago.
2x blue arrows
arrows.2.psd (92.6 KB) - added by empireoflight 12 years ago.
Arrows psd file
generic.psd (157.6 KB) - added by empireoflight 12 years ago.
Generic gear icon in 16,32,and 64, with color and VS versions. No color version for 64 since that's the header icon.
generic.zip (20.3 KB) - added by empireoflight 12 years ago.
Generic gear icon slices
img-edit-2x.psd (272.3 KB) - added by empireoflight 12 years ago.
Image editing icons at 2x, psd file for repo
imgedit-icons.png (16.7 KB) - added by empireoflight 12 years ago.
Image editing icons at 2x
imgedit-icons.psd (241.2 KB) - added by empireoflight 12 years ago.
Image editing icons psd for repo, please delete the other one
press-this.psd (47.4 KB) - added by empireoflight 12 years ago.
Press this icon psd for repo
press-this.png (2.2 KB) - added by empireoflight 12 years ago.
Press this icons 2x...the hand is very strange and I don' know what it does
star-2x.psd (32.2 KB) - added by empireoflight 12 years ago.
2x rating star psd for repo
star-2x.png (1.2 KB) - added by empireoflight 12 years ago.
2x rating star
wpspin_light-2x.gif (10.2 KB) - added by Joen 12 years ago.
Retina version of the light spinner
wpspin_dark-2x.gif (10.5 KB) - added by Joen 12 years ago.
Retina version of the dark spinner
light_dark_spinners_psds.zip (167.7 KB) - added by Joen 12 years ago.
Light and dark retina spinners, PSDs
xit2x.gif (823 bytes) - added by empireoflight 12 years ago.
xit2x.psd (34.4 KB) - added by empireoflight 12 years ago.
2x xit.gif psd for repo
rss-2x.psd (34.8 KB) - added by empireoflight 12 years ago.
rss 2x psd
rss-2x.png (1.4 KB) - added by empireoflight 12 years ago.
rss rx png
icon-pointer-flag2x.psd (31.8 KB) - added by empireoflight 12 years ago.
flag icon 2x psd
icon-pointer-flag-2x.png (1.9 KB) - added by empireoflight 12 years ago.
flag icon 2x png
media.dev.css-retinaized.diff (1.0 KB) - added by taylorde 12 years ago.
Adding standard HiDPI media query as well as -webkit prefixed version
media.dev.css-retinaized.2.diff (1.0 KB) - added by taylorde 12 years ago.
Retina background images added to media.dev.css
HiDPI_media_queries_classic_fresh_media.diff (11.9 KB) - added by taylorde 12 years ago.
HiDPI media queries for media.css, colors-fresh.css, colors-classic.css
HiDPI-wp-admin_css.diff (3.6 KB) - added by taylorde 12 years ago.
Media Queries for HiDPI files added to wp-admin.css
icon-pointer-flag-2x.2.png (1.5 KB) - added by lessbloat 12 years ago.
21019.diff (16.8 KB) - added by taylorde 12 years ago.
Consolidation of existing patches and some cleanup
21019.diff.images.zip (44.3 KB) - added by taylorde 12 years ago.
Images used in 21019.diff
menu-vs-2x.png (37.2 KB) - added by empireoflight 11 years ago.
menu-vs-2x.psd (572.4 KB) - added by empireoflight 11 years ago.
media-button-2x.png (1.1 KB) - added by empireoflight 11 years ago.
Media button at 2x resolution
media-button-2x.psd (65.3 KB) - added by empireoflight 11 years ago.
Media button at 2x resolution, psd file
media-button-2x.2.psd (65.3 KB) - added by empireoflight 11 years ago.
Media button at 2x resolution, psd file
file-type-icons.png (21.5 KB) - added by azaozz 11 years ago.
media-button-2x-scaled.png (8.7 KB) - added by helenyhou 11 years ago.
21019.media-icon-fullscreen.patch (644 bytes) - added by ocean90 11 years ago.
thickbox-retina.diff (6.0 KB) - added by lessbloat 11 years ago.
tb-close-2x.png (55.8 KB) - added by lessbloat 11 years ago.
loadingAnimation.gif (14.9 KB) - added by lessbloat 11 years ago.
21019.2.diff (5.4 KB) - added by nacin 11 years ago.
Patch expects that the generic sprite from empireoflight is merged into icons32.png, menu.png, menu-vs.png, and the 2x of all three.
menu-sprite-images.zip (442.4 KB) - added by lessbloat 11 years ago.
Goes with 21019.2-with-sprites.diff
21019.2-with-sprites.diff (6.5 KB) - added by lessbloat 11 years ago.
Updated CSS for 21019.2.diff​
resize-2x.gif (1.2 KB) - added by saracannon 11 years ago.
resize x2
resize-rtl-2x.gif (1.2 KB) - added by saracannon 11 years ago.
RTL resize x2
sort-2x.gif (1.2 KB) - added by saracannon 11 years ago.
sort retina version
bubble_bg-2x.gif (1.5 KB) - added by saracannon 11 years ago.
Retina Tails
bubble_bg.psd (43.2 KB) - added by saracannon 11 years ago.
Retina PSD for design repo
bubble_bg-rtl-2x.gif (1.5 KB) - added by saracannon 11 years ago.
RTL tails
comment-grey-bubble-2x.gif (1.3 KB) - added by saracannon 11 years ago.
Retina Grey Bubble
comment-grey-bubble.psd (21.0 KB) - added by saracannon 11 years ago.
Grey Bubble PSD for repo
stars-rtl.psd (36.1 KB) - added by empireoflight 11 years ago.
stars-rtl.png (2.2 KB) - added by empireoflight 11 years ago.
stars.psd (36.3 KB) - added by empireoflight 11 years ago.
stars.png (2.1 KB) - added by empireoflight 11 years ago.
arrow-pointer-blue.png (2.5 KB) - added by empireoflight 11 years ago.
arrow-pointer-blue.psd (38.4 KB) - added by empireoflight 11 years ago.
toggle-arrow-2x.png (1.4 KB) - added by empireoflight 11 years ago.
toggle-arrow-2x.psd (34.7 KB) - added by empireoflight 11 years ago.
down_arrow-2x.gif (865 bytes) - added by empireoflight 11 years ago.
down_arrow-2x.psd (26.2 KB) - added by empireoflight 11 years ago.
star-rating.png (2.2 KB) - added by azaozz 11 years ago.
21019.3.zip (39.3 KB) - added by lessbloat 11 years ago.
21019.3.diff (16.9 KB) - added by lessbloat 11 years ago.
2x-stars.png (24.1 KB) - added by azaozz 11 years ago.
stars-2x.png (2.4 KB) - added by empireoflight 11 years ago.
21019.4.diff (1009 bytes) - added by lessbloat 11 years ago.
stars-2x.2.png (51.1 KB) - added by lessbloat 11 years ago.
Works well with 21019.4.diff​ to get the stars looking the same whether retina or not.
stars-2x.3.png (1.2 KB) - added by helenyhou 11 years ago.
down_arrow-2x.2.gif (83 bytes) - added by helenyhou 11 years ago.

Change History (238)

#1 @ocean90
12 years ago

  • Cc ocean90 added

#2 @sabreuse
12 years ago

  • Cc sabreuse@… added

#3 @kirasong
12 years ago

  • Cc mike.schroder@… added

#4 @meliko
12 years ago

  • Cc melissachoyce@… added

#5 @Ipstenu
12 years ago

  • Cc ipstenu@… added

#6 @nacin
12 years ago

I've been thinking about how we should be handling retina images for a few days now. Ultimately, loading 2x images is not particularly easy. You can do it all via CSS, but that means you may need to know the height and width of the image (for background-size), and also the URL of the image. Not good when you want to potentially 2x every image on the page. Alternatives via JS could mean double-loading (1x then 2x).

There are a number of interesting techniques out there. The one I've liked the most is https://github.com/adamdbradley/foresight.js, mainly because its dense readme is very informative, and its challenges document clearly outlines a set of philosophies -- a manifesto, if you will. It also does a bandwidth check before deciding whether a device/browser should be served 2x images, which is appealing when a lot of retina devices are still operating over mobile networks.

foresight.js does something like this:

<img data-src="imagefile.jpg" data-width="320" data-height="240" class="fs-img">
<noscript>
    <img src="imagefile.jpg">
</noscript>

For search engines and those without JS, they get the standard 1x image. In order to get the 2x image, you have to pass the bandwidth test, and then the image tag can be set as either 1x or 2x.

It is clever. But I don't entirely like this. It's not a great experience especially on a content-heavy page to need to wait for the DOM to finish loading in order to even get an HTTP request to fire in order for an image to be displayed — which would include regular 1x browsers too. (It should be noted that sometimes, HTTP requests for images don't fire until after DOM ready, but only sometimes.)

I think the best thing is foresight.js with a twist: Since we can do bandwidth checks, we should forgo the idea of preventing a double-loading. (This crosses off the first bullet point on the challenges document.) And then we end up with something like this:

<img src="imagefile.jpg" width="320" height="240" class="fs-img">

Then we get an image, and then some JS can convert img.fs-img's src to -2x.jpg (or _2x, or @2x), and then they become sharper. It's progressive JPGs all over again.

#7 @johnjamesjacoby
12 years ago

The 2x images in WordPress core, look a bit... wimpy.

Since they are just recycled icon32 images, the borders don't pop like thy used to. You could argue this is a good thing, or intentional, but they just don't look as good as they used to in my opinion.

I had Chelsea redo the bbPress menu icons, without using their icon32 equivalent, so you could see the differences. I've attached a comparison between non-retina and retina, and while subtle, you'll notice the thicker borders on the bbPress icons have more contrast than the thinner borders on the others.

#8 @DrewAPicture
12 years ago

  • Cc xoodrew@… added

On 3.4 launch day there was some discussion in IRC about how adding the first set of retina graphics and screenshots added significant size to the WordPress footprint (from 3.8 to 4.8 mb or something).

Jane said it best:

Jane__: it's kind of lame that such a small percentage of users causes such a big file size increase

Do we have other options like remote-linking images or maybe doing a retina graphics pack plugin that would have less of an impact on the users who won't use/need these bigger graphics?

#9 @nacin
12 years ago

We currently pull in Browse Happy browser images from wordpress.org. I wouldn't object to doing it for screenshots on the about page, either. (And that could allow for localizing these graphics, too.)

I don't have any problem with the footprint for 2x images in general that are used throughout WordPress, but I do agree it'd be quite nice to offload all about screenshots to wordpress.org, as all of that together could pretty significantly bring down the zip size and thus speed up upgrades.

#10 @nacin
12 years ago

  • Milestone changed from Awaiting Review to 3.4.1

#11 @karmatosed
12 years ago

  • Cc karmatosed added

#12 @helenyhou
12 years ago

Related: #16461. Also, per dev chat, we should consider combining with #20980 while we're at it.

@chexee
12 years ago

2x media upload icons

#13 @mercime
12 years ago

  • Cc mercijavier@… added

#14 @tillkruess
12 years ago

  • Cc me@… added

#15 @matt
12 years ago

JJJ: let's not let the perfect be the enemy of the better. (Especially for a +0.0.1 release.) For now, let's get all these missing / broken things fixed, and then we can start tweaking and iterating.

#16 @pauldewouters
12 years ago

  • Cc pauldewouters added

#17 follow-ups: @chexee
12 years ago

I uploaded the media icon sprite Ben sent to us. The source file is committed in the design repo here: http://design.trac.wordpress.org/browser/production/wp-admin/images/media-2x.psd

I'm collecting as many source files as I can find so we can get more people redrawing them and not leave it all to Ben.

We should also keep what JJJ said in mind. The thinner borders give a much different look on Retina displays than the normal icons do on normal displays, but like Matt said, not necessary right now.

The scheduling icon will have to be redrawn, as I believe its from a pixelated icon set that was designed specifically for that pixel size. We might even want to think about Dunkle-izing that icon.

We should look into finding CSS3 shapes and rotation solutions for the comment bubbles, menu arrows, and similar shapes (similar to what we did for menu pointers).

#18 @helenyhou
12 years ago

Not mentioned above, but I thought I'd redraw something I can actually handle - the wp-admin/images/align-*.png images. I've committed the sliced PSD source to the design repo: http://design.trac.wordpress.org/browser/production/wp-admin/images/align-icons.psd

The redraw also cleans up some pretty ugly artifacting that was going on in the original images, which also means that the PNGs could be compressed much better - they are now around 120 bytes for the 1x and 150 bytes for the 2x versions, as opposed to being over 500 bytes each as they are currently in trunk. Uploaded here as align-images.zip. These are used in CSS, so we can patch it that way.

#19 in reply to: ↑ 17 ; follow-ups: @jane
12 years ago

  • Type changed from defect (bug) to enhancement

Replying to chexee:

The scheduling icon <snip> we might want to think about Dunkle-izing that icon.

Sounds good. Will ping him to take a stab.

#20 in reply to: ↑ 19 @empireoflight
12 years ago

Replying to jane:

Replying to chexee:

The scheduling icon <snip> we might want to think about Dunkle-izing that icon.

Sounds good. Will ping him to take a stab.

Sorry for being awol on this ticket-working on TINYMCE, bbpress and scheduling icons.

#21 follow-up: @azaozz
12 years ago

Replying to nacin:

I think the best thing is foresight.js with a twist: Since we can do bandwidth checks, we should forgo the idea of preventing a double-loading. (This crosses off the first bullet point on the challenges document.) And then we end up with something like this:

<img src="imagefile.jpg" width="320" height="240" class="fs-img">

Then we get an image, and then some JS can convert img.fs-img's src to -2x.jpg (or _2x, or @2x), and then they become sharper. It's progressive JPGs all over again.

This may work well for the screenshots on the About screen, but not for most of the other places. The problem is that most images are loaded as css backgrounds (all the sprites), so there aren't <img /> tags for them.

Another (big?) drawback of using JS is that replacing the images at DOM ready leaves the screen "imageless" for couple of seconds. What happens is the low-rez images start to load together with the html, at DOM ready all half-loaded low-rez images are replaced with the high-rez. That makes the browser send another set of requests for them before the requests for the low-rez images have completed. So now we have double the number of image requests.

During that time the html is rendered and since the "src" for the low-rez images is already replaced, they aren't shown. What makes this look worse is that the screen is rendered without any images and then they start to appear here and there.

Did some quick tests and on slower networks that may be several seconds.

Last edited 12 years ago by azaozz (previous) (diff)

#22 in reply to: ↑ 21 ; follow-up: @nacin
12 years ago

Replying to azaozz:

This may work well for the screenshots on the About screen, but not for most of the other places. The problem is that most images are loaded as css backgrounds (all the sprites), so there aren't <img /> tags for them.

Backgrounds = media queries. It's the <img> tags that are difficult and require this extra work.

Another (big?) drawback of using JS is that replacing the images at DOM ready leaves the screen "imageless" for couple of seconds. What happens is the low-rez images start to load together with the html, at DOM ready all half-loaded low-rez images are replaced with the high-rez. That makes the browser send another set of requests for them before the requests for the low-rez images have completed. So now we have double the number of image requests.

In comment 6, I specifically discuss double requests as a benefit, if done properly.

#23 in reply to: ↑ 22 ; follow-ups: @azaozz
12 years ago

Replying to nacin:

In comment 6, I specifically discuss double requests as a benefit, if done properly.

Right, it makes the coding for it easier. The problem is that the low-rez images are never shown, so there's no point in loading them at all.

Alternatively we can try pre-loading the high-rez images with JS and then replacing them after they have loaded. This would have the "progressive JPEGs" effect.

#24 in reply to: ↑ 23 @azaozz
12 years ago

Replying to azaozz:

Alternatively we can try pre-loading the high-rez images with JS and then replacing them after they have loaded. This would have the "progressive JPEGs" effect.

For this the JS that replaces them would have to run after window.loaded.

#25 in reply to: ↑ 23 ; follow-up: @nacin
12 years ago

Replying to azaozz:

Alternatively we can try pre-loading the high-rez images with JS and then replacing them after they have loaded. This would have the "progressive JPEGs" effect.

Yes, that's what I was suggesting.

@empireoflight
12 years ago

Source file for retina tinyMCE editor icons

#26 follow-ups: @empireoflight
12 years ago

What about SVG for a future release? We'd lose some of the subtlety, but scaling wouldn't be an issue. I did a WP home icon at http://bendunkle.com/wpsvg/ and showed how it scales up 200%, 400% etc.

#27 in reply to: ↑ 25 @azaozz
12 years ago

Replying to nacin:

Yes, that's what I was suggesting.

Ah, sry, foresight.js runs at DOM ready so I assumed you were suggesting the same.

In that case the "timeline" should be:

  • In the head: determine if 2x images should be loaded and cache that in a session cookie so we don't have to do it on each page load.
  • At DOM ready: start pre-loading 2x images.
  • As each 2x image loads, replace the original.

#28 in reply to: ↑ 26 @sabreuse
12 years ago

Replying to empireoflight:

What about SVG for a future release? We'd lose some of the subtlety, but scaling wouldn't be an issue. I did a WP home icon at http://bendunkle.com/wpsvg/ and showed how it scales up 200%, 400% etc.

+1 for SVG where possible - it would help with load time/size regardless of resolution, even aside from not needing to maintain multiple sets and helper scripts

#29 @azaozz
12 years ago

Yes, SVGs would be perfect for the icons assuming the browsers on retina display devices would "know" to render them in higher quality. The problem is... IE8 and under (surprise!). There is an Adobe plugin for IE < 9, not sure how reasonable it would be to force all users with these browsers to install it.

#30 in reply to: ↑ 26 ; follow-up: @helenyhou
12 years ago

Replying to empireoflight:

What about SVG for a future release? We'd lose some of the subtlety, but scaling wouldn't be an issue.

Well, vector sources for assets certainly wouldn't hurt. :)

I'm not sure I agree about using SVG at this moment. Given the level of detail, amount of color, and small sizes currently in use, I would be rather against leaving the end result of the scaling to the browser/OS, and of course then we have to worry about browser support. Good write-up about scaling issues and the need for hand hinting: http://www.pushing-pixels.org/2011/11/04/about-those-vector-icons.html

I'd say any further discussion about SVG usage would need to happen separately from this particular ticket since, at least to me, it implies a redraw and move to single-color/masked icons, which definitely should not happen for something scheduled for a maintenance release. I've seen discussion about making a custom icon font as well, somewhere in the WordPress world.

#31 in reply to: ↑ 30 @empireoflight
12 years ago

Replying to helenyhou:

Replying to empireoflight:

What about SVG for a future release? We'd lose some of the subtlety, but scaling wouldn't be an issue.

Well, vector sources for assets certainly wouldn't hurt. :)

I'm not sure I agree about using SVG at this moment. Given the level of detail, amount of color, and small sizes currently in use, I would be rather against leaving the end result of the scaling to the browser/OS, and of course then we have to worry about browser support. Good write-up about scaling issues and the need for hand hinting: http://www.pushing-pixels.org/2011/11/04/about-those-vector-icons.html

I'd say any further discussion about SVG usage would need to happen separately from this particular ticket since, at least to me, it implies a redraw and move to single-color/masked icons, which definitely should not happen for something scheduled for a maintenance release. I've seen discussion about making a custom icon font as well, somewhere in the WordPress world.

Thanks Helen; I've read similar articles about the drawbacks of vector icons at low resolutions, but that's the first I've seen that one.
Mainly the articles examine app icons, and not "action" icons, which can be much simpler, and I find that if you adhere/snap to a 16x16 pixel (8x8 is even better) grid, SVGs are crisp at any "2" exponential size (x2,x4, etc but not x3 or x6, I wish I could explain better but I'm bad at math), without hinting. We should definitely revisit this in a new thread.

@azaozz
12 years ago

#32 @azaozz
12 years ago

In [21101]:

Add 2x TinyMCE icons, props empireoflight, see #21019 for trunk

#33 @azaozz
12 years ago

In [21102]:

Add 2x TinyMCE icons, props empireoflight, see #21019 for 3.4

#34 in reply to: ↑ 17 @azaozz
12 years ago

Replying to chexee:

We should look into finding CSS3 shapes and rotation solutions for the comment bubbles, menu arrows, and similar shapes (similar to what we did for menu pointers).

Sounds good, but only for places where the shape can be missing or fall back to rectangle in IE :)

#35 in reply to: ↑ 19 @empireoflight
12 years ago

Attached with psd. I did a couple others in the psd, but this one's my favorite.
Is there any way we can put the actual day number in the calendar instead of 11?

Replying to jane:

Replying to chexee:

The scheduling icon <snip> we might want to think about Dunkle-izing that icon.

Sounds good. Will ping him to take a stab.

#36 @empireoflight
12 years ago

I just tested out the new date-button.gif and it's too big at 16x16, at least in Chrome on Mac.
I did this in developer tools:
.curtime #timestamp {
background-repeat: no-repeat;
background-position: left 1px;
padding-left: 18px;
padding-bottom: 2px;
padding-top: 5px;
position: relative;
top: 2px;
}

to get it looking right. We can either mess with

the css or I can do a 13x13 version, and I guess a 26x26 version for retina?

#37 follow-up: @helenyhou
12 years ago

Replying to empireoflight:

Is there any way we can put the actual day number in the calendar instead of 11?

There are certainly ways, but maybe something to think about in the future instead? Thoughts? I worry about things like how that will go over for a screen reader if it's text, and making every single one an image is pretty lame.

Replying to empireoflight:

I just tested out the new date-button.gif and it's too big at 16x16

It looks okay to me at the larger size on a regular display, and quite nice on a retina display. Patch: 21019.curtime.diff. Needs date-button-retina.gif renamed to date-button-2x.gif; patch doesn't SVN add it.

Screenshot from FF on OSX, also tested in Chrome and Safari - could probably use IE eyes just in case. I still need to get set up on my current machine.

http://core.trac.wordpress.org/raw-attachment/ticket/21019/21019.curdate.png

@empireoflight
12 years ago

13x13 pixel like the original

@empireoflight
12 years ago

16x16 with the border a little lighter

@empireoflight
12 years ago

New psd for date icon with 13x13 icon in it

#38 in reply to: ↑ 37 @empireoflight
12 years ago

Replying to helenyhou:That looks better than it did when I uploaded it to my wp install:
http://bendunkle.com/date.png (how do you insert an image into a reply???)
I added a 13x13 icon in case we just want to use that

Replying to empireoflight:

Is there any way we can put the actual day number in the calendar instead of 11?

There are certainly ways, but maybe something to think about in the future instead? Thoughts? I worry about things like how that will go over for a screen reader if it's text, and making every single one an image is pretty lame.

Replying to empireoflight:

I just tested out the new date-button.gif and it's too big at 16x16

It looks okay to me at the larger size on a regular display, and quite nice on a retina display. Patch: 21019.curtime.diff. Needs date-button-retina.gif renamed to date-button-2x.gif; patch doesn't SVN add it.

Screenshot from FF on OSX, also tested in Chrome and Safari - could probably use IE eyes just in case. I still need to get set up on my current machine.

http://core.trac.wordpress.org/raw-attachment/ticket/21019/21019.curdate.png

#39 follow-ups: @markjaquith
12 years ago

  • Milestone changed from 3.4.1 to 3.5

Talked to nacin and helenyhou about this. My conclusion is that full and well-thought-out HiDPI coverage for WordPress is going to take time. Many different people need to be wrangled, many assets to need to be re-made, and we face decisions like whether HiDPI screenshots should be in the package or should be hotlinked to WP.org (which has historically concerned people and is not something we like plugins doing). Also, if we take the time to do this really well and thoroughly, this gets to be a headline feature for 3.5, instead of a minor 3.4.x release. Therefore, changing the milestone.

Open question: do we keep the one HiDPI commit we have for 3.4?

#40 in reply to: ↑ 39 @helenyhou
12 years ago

Replying to markjaquith:

Open question: do we keep the one HiDPI commit we have for 3.4?

Only if you'll allow another commit to tweak some positioning of the icons within the sprite - to my eye it is imperfect, and I don't see why we should bloat the CSS to move things around a couple pixels.

#41 in reply to: ↑ 39 @azaozz
12 years ago

Replying to markjaquith:

Open question: do we keep the one HiDPI commit we have for 3.4?

If we revert it, that would give enough time to look at refreshing the editor toolbar looks too as discussed in #18141.

In any case the HiDPI sprite for the editor icons should be tweaked a little to position the icons better. There are 2 pixels for each pixel in the "LoDPI" sprite so the icons placement can be more precise. Think that's better than tweaking the positions in css.

#42 @nacin
12 years ago

In [21118]:

Revert [21102] for 3.4. see #21019.

#43 @matt
12 years ago

Found another place we've missed, the list / excerpt switchers on the edit posts page:

http://cl.ly/1l261I280o113D2y2H45

#44 @matt
12 years ago

Another, the arrow on the help tab:

http://cl.ly/3z00002L0i2W3W1N3A3g

@lessbloat
12 years ago

made some sprite positioning tweaks

#45 @brandondove
12 years ago

  • Cc brandon@… added

What about approaching this like github did? They created a symbol font with all of the icons they needed. That would allow for infinite scaling, it would simplify the iconography, and it would reduce the file size.

@empireoflight
12 years ago

List expanded view icons at 2x resolution

@empireoflight
12 years ago

list expanded view icons psd file for design repo

@empireoflight
12 years ago

2x retina arrows for help etc.

@empireoflight
12 years ago

2x retina arrows for help etc. psd for design repo

@empireoflight
12 years ago

The video media icon on gallery page at 2x

@empireoflight
12 years ago

The video media icon on gallery page at 2x, psd for design repo

@helenyhou
12 years ago

2x TinyMCE icons, positions tweaked

#46 @helenyhou
12 years ago

wpicons-2x.tweaked.png from lessbloat (smushed) looks good for 2x TinyMCE - better icon placements. Tweaked PSD committed to design repo.

#47 @azaozz
12 years ago

In [21245]:

TinyMCE icons sprite with tweaked positions, props lessbloat, see #21019

#48 @azaozz
12 years ago

In [21246]:

Add 2x icons for the list/excerpt switch on the Posts screen, props empireoflight, see #21019

#49 @desrosj
12 years ago

  • Cc desrosj@… added

#50 @johnbillion
12 years ago

  • Cc johnbillion added

#51 @johnjamesjacoby
12 years ago

desrosj has a plugin in the repo for adding retina support to core uploads.

Noting here if there's an opportunity to work together, and to see an already-existing approach.

http://wordpress.org/extend/plugins/simple-wp-retina/

@johnjamesjacoby
12 years ago

2x icons in 1x mode - bbPress vs WordPress

#52 follow-up: @johnjamesjacoby
12 years ago

In the above attachment (1x-artifacting.png) you'll see what happens when HiDPI mode is off, but 2x icons are rendered by the browser. To purposely duplicate this odd behavior:

  • Have a Retina MacBook Pro.
  • Connect Cinema Display.
  • Open Safari.
  • Move Safari 50% between the rMBP display, and the Cinema Display.

The bbPress icons with thicker line widths render normally, the WordPress core icons with thinner line widths render with artifacts as a result of the downsizing. Currently, apps and websites need to earn the right to render 2x content. 1x is the default display mode. If anything fails during this communication, and we push out 2x icons on a 1x display, slightly thicker lined, dedicated 2x icons render much more smoothly than the current icon32 implementation.

It's edge-case, and you can argue it's the browser or OS's problem to deal with, but ultimately it impacts millions of users, and it's within our power to control.

@lessbloat
12 years ago

A couple of these still seemed off (including ABC icon) so I make a few tweaks.

#53 in reply to: ↑ 52 ; follow-up: @azaozz
12 years ago

Replying to johnjamesjacoby:

In the above attachment (1x-artifacting.png) you'll see what happens when HiDPI mode is off, but 2x icons are rendered by the browser.

Not sure what we can do about it if the browser "thinks" it's on a high-density display. We only can detect whatever the browser has detected.

#54 @azaozz
12 years ago

@lessbloat I see why all these tweaks are necessary. The positions in the original 1x sprite are all over the place. To fix the 2x sprite we need to start with the 1x and then reset the tweaks in the css.

#55 @azaozz
12 years ago

In [21295]:

Retina: fix the icon positions in the original editor buttons sprite, reset the css tweaks and adjust the positions in the 2x sprite, see #21019

#56 @azaozz
12 years ago

In [21296]:

Add query args to refresh the sprite images, see #21019

#57 @helenyhou
12 years ago

Continuation from comment:18, finally:

21019.image-align.diff, needs the images in image-align-smushed.zip. Bonus: total size of the 8 files is 1025 bytes, compared to 2167 for the current 4 files.

#58 follow-up: @helenyhou
12 years ago

What's left:

Everything below needs 2x versions, likely .png files (smushed, please, and review the size of the original as well), source files (PSD, AI, or EPS, sliced and/or layered when appropriate), and a patch, which will probably be mostly CSS. Would love if we could aim for not increasing the overall package size too much - reviewing the compression of existing images is a good place to do that as well.

Really, anything in those images folders could use a 2x version for real retina support, but the following seem to be the most noticeable.

CSS-it

Some things can be done with CSS. Comment bubbles come to mind, as well as gradients. See #16461 for gradients.

wp-admin/images

  • Date/calendar icon (from publish metabox) - need to determine which versions to use; 21019.curtime.diff exists at the moment for a patch, may need position tweaking depending on what's chosen.
  • Arrows - empireoflight uploaded one version here of the gray. We need three more - dark gray, blue (-vs), and dark blue.
  • Media buttons - there are five of them, the most important being media-button.png. Need 2x + PSD with both sizes. Maybe consider generic classes in the admin CSS for plugins/themes to use to get the retina benefit, since we are keeping the other four icons due to high plugin usage (see #20980)
  • Generic admin menu icon - this is generic.png
  • Image edit icons
  • Press This icon
  • Ratings stars
  • Spinners - these are mostly the wpspin_*.gif files, but there are a couple others that need a review and might not be used at all (see #20980 again). The dark one could really just use a redraw, or be dropped from core (see #20957). The light one wouldn't hurt from a redraw, either :)
  • xit.gif

wp-includes/images

  • Media library/mimetype icons - we have the video one from empireoflight, but looking more closely, these are from the Crystal icon set. We should just regenerate from the largest set and hand-hint the resized versions (some really look terrible resized down, notably the music/midi one), unless somebody wants to do a real redraw in a more WP style. If hand-hinting from the Crystal set, would like a PSD with both sizes of each icon.
  • Admin pointer - blue arrow and flag icon
  • RSS icon - might even be worth using a new one entirely for both sizes
  • xit.gif - as above

And finally, if somebody wants to grab the current 2x version of the TinyMCE editor icons and move the pieces of the PSD in the design repo around, that would be great. chexee or I can commit the tweaked version. Would love to see the 1x version in PSD form if it exists as well. Source files for everything!

If I've missed anything, feel free to chime in. Just wanted to get a feel for where we are now and have a list to point to when getting people involved.

#59 in reply to: ↑ 53 @johnjamesjacoby
12 years ago

Replying to azaozz:

Replying to johnjamesjacoby:

In the above attachment (1x-artifacting.png) you'll see what happens when HiDPI mode is off, but 2x icons are rendered by the browser.

Not sure what we can do about it if the browser "thinks" it's on a high-density display. We only can detect whatever the browser has detected.

You're right, though a dedicated hidpi icon-set with thicker outlines and more contrast helps this tremendously.

#60 in reply to: ↑ 58 @empireoflight
12 years ago

OK, I'm going through these now...

Replying to helenyhou:

What's left:

Everything below needs 2x versions, likely .png files (smushed, please, and review the size of the original as well), source files (PSD, AI, or EPS, sliced and/or layered when appropriate), and a patch, which will probably be mostly CSS. Would love if we could aim for not increasing the overall package size too much - reviewing the compression of existing images is a good place to do that as well.

Really, anything in those images folders could use a 2x version for real retina support, but the following seem to be the most noticeable.

CSS-it

Some things can be done with CSS. Comment bubbles come to mind, as well as gradients. See #16461 for gradients.

wp-admin/images

  • Date/calendar icon (from publish metabox) - need to determine which versions to use; 21019.curtime.diff exists at the moment for a patch, may need position tweaking depending on what's chosen.
  • Arrows - empireoflight uploaded one version here of the gray. We need three more - dark gray, blue (-vs), and dark blue.
  • Media buttons - there are five of them, the most important being media-button.png. Need 2x + PSD with both sizes. Maybe consider generic classes in the admin CSS for plugins/themes to use to get the retina benefit, since we are keeping the other four icons due to high plugin usage (see #20980)
  • Generic admin menu icon - this is generic.png
  • Image edit icons
  • Press This icon
  • Ratings stars
  • Spinners - these are mostly the wpspin_*.gif files, but there are a couple others that need a review and might not be used at all (see #20980 again). The dark one could really just use a redraw, or be dropped from core (see #20957). The light one wouldn't hurt from a redraw, either :)
  • xit.gif

wp-includes/images

  • Media library/mimetype icons - we have the video one from empireoflight, but looking more closely, these are from the Crystal icon set. We should just regenerate from the largest set and hand-hint the resized versions (some really look terrible resized down, notably the music/midi one), unless somebody wants to do a real redraw in a more WP style. If hand-hinting from the Crystal set, would like a PSD with both sizes of each icon.
  • Admin pointer - blue arrow and flag icon
  • RSS icon - might even be worth using a new one entirely for both sizes
  • xit.gif - as above

And finally, if somebody wants to grab the current 2x version of the TinyMCE editor icons and move the pieces of the PSD in the design repo around, that would be great. chexee or I can commit the tweaked version. Would love to see the 1x version in PSD form if it exists as well. Source files for everything!

If I've missed anything, feel free to chime in. Just wanted to get a feel for where we are now and have a list to point to when getting people involved.

@empireoflight
12 years ago

This one has all 5 media icons.

@empireoflight
12 years ago

PNG of the media icons. Needs to be sliced or arranged in a sprite

@empireoflight
12 years ago

2x dark grey arrows

@empireoflight
12 years ago

2x dark blue arrows

@empireoflight
12 years ago

2x blue arrows

@empireoflight
12 years ago

Arrows psd file

@empireoflight
12 years ago

Generic gear icon in 16,32,and 64, with color and VS versions. No color version for 64 since that's the header icon.

@empireoflight
12 years ago

Generic gear icon slices

#61 @helenyhou
12 years ago

@empireoflight - just a note: uploading attachments doesn't trigger any email notifications, so whenever you've uploaded something or are done uploading a bunch of things, please leave a comment indicating what's been done so somebody knows to check on the ticket and follow up.

#62 @saracannon
12 years ago

  • Cc sararcannon@… added

#63 @nacin
12 years ago

Spun off #21388, retina theme screenshots.

#64 @nacin
12 years ago

Spun off #21389, retina custom headers.

@empireoflight
12 years ago

Image editing icons at 2x, psd file for repo

@empireoflight
12 years ago

Image editing icons at 2x

@empireoflight
12 years ago

Image editing icons psd for repo, please delete the other one

#65 @empireoflight
12 years ago

Image editing icons are done at 2x

@empireoflight
12 years ago

Press this icon psd for repo

@empireoflight
12 years ago

Press this icons 2x...the hand is very strange and I don' know what it does

#66 @empireoflight
12 years ago

Added press this icons png and psd

@empireoflight
12 years ago

2x rating star psd for repo

@empireoflight
12 years ago

2x rating star

#67 @empireoflight
12 years ago

I think I just uploaded the star used for the ratings...

@Joen
12 years ago

Retina version of the light spinner

@Joen
12 years ago

Retina version of the dark spinner

@Joen
12 years ago

Light and dark retina spinners, PSDs

#68 follow-up: @Joen
12 years ago

  • Cc Joen added

Added light and dark retina versions of the spinners used on widget pages, menu pages and edit post pages. Looks like the dark version isn't used anywhere anymore -- a grep reveals it's only linked in manifest.php and the widget page, and on the widget page it's never shown.

@empireoflight
12 years ago

@empireoflight
12 years ago

2x xit.gif psd for repo

#69 in reply to: ↑ 68 ; follow-ups: @empireoflight
12 years ago

I actually started doing these, and then thought about doing it as a png and using css to rotate it, and then just put it off-thanks for jumping in.
My only suggestion would be to use a 1px border to define the edge of the spinner, rather than 2px as you have it, since that's how all the other 2x icons are.

Replying to Joen:

Added light and dark retina versions of the spinners used on widget pages, menu pages and edit post pages. Looks like the dark version isn't used anywhere anymore -- a grep reveals it's only linked in manifest.php and the widget page, and on the widget page it's never shown.

#70 @empireoflight
12 years ago

Added 2x xit.gif icon. The pink in that icon is really hot.

@empireoflight
12 years ago

rss 2x psd

@empireoflight
12 years ago

rss rx png

#71 @empireoflight
12 years ago

Added rss icons at 2x

@empireoflight
12 years ago

flag icon 2x psd

@empireoflight
12 years ago

flag icon 2x png

#72 @empireoflight
12 years ago

Added flag icon at 2x psd png
could that be...everything?

#73 in reply to: ↑ 69 ; follow-up: @Joen
12 years ago

Replying to empireoflight:

I actually started doing these, and then thought about doing it as a png and using css to rotate it, and then just put it off-thanks for jumping in.
My only suggestion would be to use a 1px border to define the edge of the spinner, rather than 2px as you have it, since that's how all the other 2x icons are.

Glad you like them.

I'm concerned about using 1px border weights for retina screens. Keep in mind, the point of retina is that the pixel size remains the same, its density is just 2x higher. Which means if I were to make a 1px border width for the retina version spinner, when seen on a retina screen it would look like "half a pixel". So not only would it be stylistically different from the 1x version, the border width would be so thin it would be almost non existant. A colleage of mine has one of the new Macbooks, I've seen the pixels. They're REALLY small :)

#74 in reply to: ↑ 69 ; follow-up: @helenyhou
12 years ago

Replying to empireoflight:

My only suggestion would be to use a 1px border to define the edge of the spinner, rather than 2px as you have it, since that's how all the other 2x icons are.

I'm with Joen - I think we should leave it with the thicker border. Since the spinner is not used as a background image, we need to figure out how to deal with it. If we just let the browser scale it down for regular displays, then a 2px border is likely necessary.

#75 @nacin
12 years ago

  • Type changed from enhancement to task (blessed)

#76 in reply to: ↑ 74 @Joen
12 years ago

Replying to helenyhou:

Since the spinner is not used as a background image, we need to figure out how to deal with it. If we just let the browser scale it down for regular displays, then a 2px border is likely necessary.

One sort of hacky way, is this:

.cssclass img {
width: 16px;
height: 0;
padding-top: 16px;
background: url('spinner.png') no-repeat center center;
background-size: 16px 16px;
}

-- not super clean, essentially it pushes the actual image out of the img container, and shows the retina version as a bg image. Super easy, and works well, despite the hacky nature.

#77 in reply to: ↑ 73 @empireoflight
12 years ago

Replying to Joen:
Well now I have an excuse to go get one of those new retina macbooks ;)

Replying to empireoflight:

I actually started doing these, and then thought about doing it as a png and using css to rotate it, and then just put it off-thanks for jumping in.
My only suggestion would be to use a 1px border to define the edge of the spinner, rather than 2px as you have it, since that's how all the other 2x icons are.

Glad you like them.

I'm concerned about using 1px border weights for retina screens. Keep in mind, the point of retina is that the pixel size remains the same, its density is just 2x higher. Which means if I were to make a 1px border width for the retina version spinner, when seen on a retina screen it would look like "half a pixel". So not only would it be stylistically different from the 1x version, the border width would be so thin it would be almost non existant. A colleage of mine has one of the new Macbooks, I've seen the pixels. They're REALLY small :)

#78 @azaozz
12 years ago

In [21399]:

Retina: add image editor 2x icons, props empireoflight, see #21019

@taylorde
12 years ago

Adding standard HiDPI media query as well as -webkit prefixed version

@taylorde
12 years ago

Retina background images added to media.dev.css

#79 follow-up: @taylorde
12 years ago

  • Cc td@… added

I noticed we're using the -webkit prefixed version of the retina query. e.g. @media only screen and (-webkit-min-device-pixel-ratio: 1.5) but the non-prefixed version should probably used as well for future compatibility. Also, specifying the background-size using auto as one of the parameters will ensure the original aspect ratio of the image is kept. Attached media.dev.css-retinaized.diff and will start going through and adding the -webkit prefixed version to other areas as well

#80 in reply to: ↑ 79 ; follow-up: @azaozz
12 years ago

Replying to taylorde:

I noticed we're using the -webkit prefixed version of the retina query. e.g. @media only screen and (-webkit-min-device-pixel-ratio: 1.5) but the non-prefixed version should probably used as well for future compatibility.

There is an good article on this: http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/

So this should work everywhere:

@media (-webkit-min-device-pixel-ratio: 1.5), /* Webkit */
       (min-resolution: 150dpi)             /* Everyone else */ {
...
}

Also, specifying the background-size using auto as one of the parameters will ensure the original aspect ratio of the image is kept.

True, but the retina background images have to match exactly 2x the non-retina backgrounds, or the positions will shift.

#81 in reply to: ↑ 80 @taylorde
12 years ago

Replying to azaozz:

There is an good article on this: http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/

Oh, good article. So yes, the unprefixed version uses min-resolution. That same article suggests that for pixel ratios < 2 there are some inconsistent implementations and offers the dppx unit instead. i.e. this:

@media (-webkit-min-device-pixel-ratio: 1.5), /* Webkit */
       (min-resolution: 1.5dppx)              /* The Future */
...
}

Thoughts on using dppx vs. dpi?

True, but the retina background images have to match exactly 2x the non-retina backgrounds, or the positions will shift.

I think all of the incoming 2x graphics are exactly 2x, but I could be more explicit to avoid any issues. Thanks!

#82 @azaozz
12 years ago

Yes, dppx is "the future", only implemented in Firefox at the moment. The "early implementations" that are inconsistent seem to be in older browsers, not in use any more. Perhaps it would be safer to use dpi for now until dppx gets implemented everywhere.

When swapping the background images, the exact screen dpi doesn't really matter that much as long as we are on a high-density screen, i.e. the dpi is quite higher than the default CSS dpi of 96.

@taylorde
12 years ago

HiDPI media queries for media.css, colors-fresh.css, colors-classic.css

#83 @taylorde
12 years ago

Attached a .diff for HiDPI media queries for colors-fresh.css, colors-classic.css, media.css

Requires the following image files in wp-admin/images

  • align-none-2x.png
  • align-left-2x.png
  • align-center-2x.png
  • align-right-2x.png
  • xit-2x.gif
  • arrows-2x.png
  • arrows-dark-2x.png
  • list-2x.png
  • icons32-2x.png
  • menu-2x.png
  • arrows-dark-vs-2x.png
  • arrows-vs-2x.png
  • icons32-vs-2x.png

All of which are either already there, or are attached to this ticket already and needed to be (possibly) renamed and added. Also, for info, this doesn't cover all of the images possible (#header-logo used in press-this.php, for example) should probably be looked at as well. Ticket #16461 should take care of a lot of that, however.

@taylorde
12 years ago

Media Queries for HiDPI files added to wp-admin.css

#84 @taylorde
12 years ago

Added a patch file for wp-admin.css to add media queries for the above HiDPI images.

#85 @helenyhou
12 years ago

  • Owner set to azaozz
  • Status changed from new to reviewing

azaozz said he will review HiDPI_media_queries_classic_fresh_media.diff and HiDPI-wp-admin_css.diff, now that #16461 and #20980 are in.

#86 @azaozz
12 years ago

Thinking more about the @media queries:

  • WebKit requires -webkit-min-device-pixel-ratio.
  • No other browser supports HiDPI mode at the moment.
  • All current browsers support min-resolution in dpi, only Firefox nightlies support it in dppx.

If we use min-resolution in dpi we will be sending 2x images to all browsers but they won't be using/showing them in HiDPI. As the browsers add support for HiDPI mode, they would most likely be adding support for min-resolution in dppx as well. So dppx can be used as another "check" whether to send 2x images to the browser.

In that terms it would be logical to go with what @taylorde suggested above.

#87 @helenyhou
12 years ago

  • Keywords needs-patch added

Per dev chat today, let's go with just -webkit-min-device-pixel-ratio for now, and add support for things that don't really exist in the wild yet separately and comprehensively, since previous HiDPI additions don't have dppx or otherwise. taylorde is going to take a stab at refreshing and consolidating patches. See also lessbloat's upload of the 2x pointer flag.

@taylorde
12 years ago

Consolidation of existing patches and some cleanup

@taylorde
12 years ago

Images used in 21019.diff

#88 follow-up: @taylorde
12 years ago

Uploaded 21019.diff and a .zip of the images used in that patch as a way to consolidate all previous patches and the many images uploaded.

Added HiDPI Support for the header logo of "Press This" on both color schemes. 32x32 logos sourced from wordpress.org/about/logos

2x images needed:

The HiDPI menu icon sprite for the classic (blue) color scheme seems to be missing. Until that image is available, I'm using menu-2x.png.
wp-admin/images/menu-vs-2x.png

Other images that don't have a 2x counterpart, but could probably use one:
wp-admin/images/media-button-2x.png
wp-admin/images/bubble_bg-2x.gif
wp-admin/images/comment-grey-bubble-2x.gif

#89 in reply to: ↑ 88 @helenyhou
12 years ago

Replying to taylorde:

Uploaded 21019.diff and a .zip of the images used in that patch as a way to consolidate all previous patches and the many images uploaded.

Awesome. Things I noticed in the zip: while these may end up not being needed at all in the end, the image alignment icons actually have redrawn 1x versions as well, that are significantly smaller. I also don't think we need to worry about the spinners in this ticket, and the dark one is gone.

2x images needed:

The HiDPI menu icon sprite for the classic (blue) color scheme seems to be missing. Until that image is available, I'm using menu-2x.png.
wp-admin/images/menu-vs-2x.png

Other images that don't have a 2x counterpart, but could probably use one:

  • wp-admin/images/media-button-2x.png
  • wp-admin/images/bubble_bg-2x.gif
  • wp-admin/images/comment-grey-bubble-2x.gif

I think it'd be nice to see the bubbles done as CSS instead of cutting new images, and then we can use the IE stylesheet to fallback there, since I don't think we have to worry about HiDPI and versions of IE that don't support border-radius.

Other than that, though, would be good to see 2x version of the media button and the blue version of the menu icons.

#90 @helenyhou
12 years ago

  • Keywords has-patch added; needs-patch removed

#91 @empireoflight
11 years ago

Attached menu-vs-2x.png and menu-vs-2x.psd

@empireoflight
11 years ago

Media button at 2x resolution

@empireoflight
11 years ago

Media button at 2x resolution, psd file

@empireoflight
11 years ago

Media button at 2x resolution, psd file

#92 @empireoflight
11 years ago

Added media-button-2x png and psd

#93 @azaozz
11 years ago

In [21980]:

Add menu-vs-2x.png and 2x media-button.png, pngcrush all in wp-admin/images, props empireoflight, see #21019

#94 follow-up: @azaozz
11 years ago

Tried replacing the file type icons with 2x versions (from the 128px Crystal icons) but not looking that good at 1x (left: old 46x60 icons, right: new 96x120)


May need to convert these to backgrounds or use some CSS tricks to replace the images for HiDPI.

Alternatively the current icons can be enlarged and sharpened a bit to look good at 2x and 1x.

Last edited 11 years ago by azaozz (previous) (diff)

#95 in reply to: ↑ 94 ; follow-up: @empireoflight
11 years ago

Replying to azaozz:

Tried replacing the file type icons with 2x versions (from the 128px Crystal icons) but not looking that good at 1x (left: old 46x60 icons, right: new 96x120)


May need to convert these to backgrounds or use some CSS tricks to replace the images for HiDPI.

Alternatively the current icons can be enlarged and sharpened a bit to look good at 2x and 1x.

Should I do a new set at all sizes in the WP style?

#96 @helenyhou
11 years ago

2x media-button.png scaled down does not look very good, almost impossible to discern.

http://core.trac.wordpress.org/raw-attachment/ticket/21019/media-button-2x-scaled.png

#97 in reply to: ↑ 95 @azaozz
11 years ago

Replying to empireoflight:

No need, at least for now. We just have to figure out how it's going to work for these icons.

Replying to helenyhou:

Yeah, it doesn't look too different from the old one at least on my screen, but may need to bring it back (depending if that button/link changes).

#98 @ocean90
11 years ago

Last edited 11 years ago by ocean90 (previous) (diff)

#99 @azaozz
11 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In [22031]:

Consolidated patch for retina support, props taylorde, props empireoflight, fixes #21019

#100 @azaozz
11 years ago

In [22032]:

Fix image button in DFW, props ocean90, see #21019

#101 @TobiasBg
11 years ago

        background-image: url('../images/icon-pointer-flag.png'); 

in the corresponding HiDPI section of wp-pointer.css is missing the -2x, isn't it?

#102 @SergeyBiryukov
11 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

#103 @azaozz
11 years ago

In [22077]:

Fix "add media" icon in DFW for IE < 9, restore media-button.png, add media-button-2x.png and make them background images, see #21019

#104 @azaozz
11 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In [22078]:

Fix typo in wp-pointer.css, props TobiasBg, fixes #21019

#105 @miqrogroove
11 years ago

Added a quickie patch for Retina Gravatars at #22329.

#106 @lessbloat
11 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

I did a quick audit of retina images in trunk, here are some 2x images I found missing:

In wp-admin/images/

No 2x icon:

  • bubble_bg-rtl.gif
  • bubble_bg.gif
  • comment-grey-bubble.png
  • media-button-image.gif
  • media-button-music.gif
  • media-button-other.gif
  • media-button-video.gif
  • no.png
  • resize-rtl.gif
  • resize.gif
  • se.png
  • sort.gif
  • stars-rtl.png
  • stars.png
  • yes.png

Has 2x icon in attachment above, but hasn't been committed:

  • press-this.png
  • generic.png

In wp-includes/images/

No 2x icon:

  • arrow-pointer-blue.png
  • down_arrow.gif
  • rss.png
  • /smilies/
  • toggle-arrow.png
  • wpmini-blue.png

#107 @lessbloat
11 years ago

Images in thickbox plugin also needed 2x equivalents. Fixed in thickbox-retina.diff (should include new tb-close-2x.png and updated loadingAnimation.gif image).

Last edited 11 years ago by lessbloat (previous) (diff)

#108 follow-up: @nacin
11 years ago

So, of lessbloat's list, these need 2x in wp-admin:

  • bubble_bg.gif and bubble_bg-rtl.gif
  • comment-grey-bubble.png
  • resize.gif, resize-rtl.gif
  • stars.png, stars-rtl.png
  • sort.gif

And in wp-includes:

  • arrow-pointer-blue.png - part of pointers
  • down_arrow.gif - part of the editor
  • rss.png - part of the feed widget, and would be browser scaled down
  • wpmini-blue.png - used in the My Sites toolbar menu, and should really be moved into the admin-bar-sprite.png files
  • toggle-arrow.png - used in internal linking

These are no longer used in core and do not need 2x:

  • media-button-image.gif, media-button-music.gif, media-button-other.gif, media-button-video.gif - exception is video.gif in Press This, see #19569
  • yes.png, no.png - old media uploader
  • se.png

The big unknown would be smilies. Not sure what to do there.

#109 @nacin
11 years ago

Our smiley image tags are not bound by height or width, which means we can't just shove a 2x image in there, even if we re-create all 22. Consider retina smilies punted.

#110 @nacin
11 years ago

In 22377:

HiDPI Press This bookmarklet image. props empireoflight. see #21019.

@nacin
11 years ago

Patch expects that the generic sprite from empireoflight is merged into icons32.png, menu.png, menu-vs.png, and the 2x of all three.

#111 @nacin
11 years ago

In 22378:

Update Thickbox images for HiDPI. props lessbloat. see #21019.

@lessbloat
11 years ago

Goes with 21019.2-with-sprites.diff

@lessbloat
11 years ago

Updated CSS for 21019.2.diff​

#112 @nacin
11 years ago

In 22393:

HiDPI versions of the generic menu page icon. props empireoflight, lessbloat. see #21019.

#113 in reply to: ↑ 108 @empireoflight
11 years ago

I'll get working on these asap, especially if anyone has a a dribbble.com invite laying around... :)

Replying to nacin:

So, of lessbloat's list, these need 2x in wp-admin:

  • bubble_bg.gif and bubble_bg-rtl.gif
  • comment-grey-bubble.png
  • resize.gif, resize-rtl.gif
  • stars.png, stars-rtl.png
  • sort.gif

And in wp-includes:

  • arrow-pointer-blue.png - part of pointers
  • down_arrow.gif - part of the editor
  • rss.png - part of the feed widget, and would be browser scaled down
  • wpmini-blue.png - used in the My Sites toolbar menu, and should really be moved into the admin-bar-sprite.png files
  • toggle-arrow.png - used in internal linking

These are no longer used in core and do not need 2x:

  • media-button-image.gif, media-button-music.gif, media-button-other.gif, media-button-video.gif - exception is video.gif in Press This, see #19569
  • yes.png, no.png - old media uploader
  • se.png

The big unknown would be smilies. Not sure what to do there.

@saracannon
11 years ago

resize x2

@saracannon
11 years ago

RTL resize x2

@saracannon
11 years ago

sort retina version

#114 @saracannon
11 years ago

attached resize and sort x2 images.

@saracannon
11 years ago

Retina Tails

#115 @saracannon
11 years ago

Attached Retina tails: noticed that the name uses an underscore instead of a standard dash (incase we want to change)

@saracannon
11 years ago

Retina PSD for design repo

@saracannon
11 years ago

RTL tails

#116 @saracannon
11 years ago

Added in Retina Comment Tails RTL: I propose that we eventually plan on switching to CSS for this (does IE really need tails?) :)

@saracannon
11 years ago

Retina Grey Bubble

@saracannon
11 years ago

Grey Bubble PSD for repo

#117 @saracannon
11 years ago

uploaded comment-grey-bubble-2x.gif​

#118 @nacin
11 years ago

Thanks saracannon! That leaves four:

  • stars.png (and stars-rtl.png)
  • arrow-pointer-blue.png - part of pointers
  • down_arrow.gif - part of the editor
  • toggle-arrow.png - used in internal linking

@empireoflight
11 years ago

@empireoflight
11 years ago

#119 follow-up: @empireoflight
11 years ago

In the original, the solid star seems smaller than the outlined star. I made them the same size in these; not sure if that's right, please advise.

#120 @empireoflight
11 years ago

I think that;s everything. Forgot to add 2x to the stars and arrow pointer files, so someone should rename those.

#121 @lessbloat
11 years ago

Excellent! Thanks @saracannon and @empireoflight. I'll work up a patch of everything that's remaining later this afternoon.

@azaozz
11 years ago

#122 in reply to: ↑ 119 @azaozz
11 years ago

Replying to empireoflight:

In the original, the solid star seems smaller than the outlined star. I made them the same size in these; not sure if that's right, please advise.

Yes, they need to be different sizes. These are used in two overlayed divs so the yellow star fits inside the outline star (depending on ratings).


@lessbloat
11 years ago

@lessbloat
11 years ago

#124 follow-up: @lessbloat
11 years ago

A couple of notes for 21019.3.diff​:

  • I ran all images through ImageOptim.
  • I forced rss.png to display rss-2x.png all of the time (instead of having to add CSS into the theme). 2x version looks fine sized down on non-retina display.
  • RE: smaller yellow stars - @azaozz, I tried this with a couple of different sizes, and could never get it to look right on retina. Leaving the yellow star full size would be my recommendation (as it looks sharp, and doesn't result in any weirdness).

#125 @azaozz
11 years ago

In 22439:

More retina backgrounds and bits, props saracannon, empireoflight and lessbloat, see #21019

@azaozz
11 years ago

#126 in reply to: ↑ 124 ; follow-up: @azaozz
11 years ago

Replying to lessbloat:

...smaller yellow stars - @azaozz, I tried this with a couple of different sizes, and could never get it to look right on retina.

Perhaps we can ask @chexee to have a look. As far as I remember she made these :)

The stars don't look 100% on retina, the yellow is supposed to indicate the % rating so it may not show the whole star. Here is a screenshot from iPad (max zoom-in):


#127 in reply to: ↑ 126 @lessbloat
11 years ago

Replying to azaozz:

Perhaps we can ask @chexee to have a look. As far as I remember she made these :)

Yep, would love for someone else to give it a try. I tried reducing the size of the solid yellow star (at multiple dimensions), but there were always visible quirks on a retina display. For instance, there would be more white space at the bottom then the top.

#128 @empireoflight
11 years ago

In this one you could potentially just hide one as your reveal another instead of overlaying the solid one on the outlined one.

@lessbloat
11 years ago

#129 @lessbloat
11 years ago

@empireoflight's stars in comment:128 look good to me with a very slight tweak: 21019.4.diff

#130 @helenyhou
11 years ago

Can we please not change the look of the stars? Remember that they appear on .org as well, and I think they are rather nice as-is. Can see if chexee can recreate at 2x.

@lessbloat
11 years ago

Works well with 21019.4.diff​ to get the stars looking the same whether retina or not.

@helenyhou
11 years ago

#131 @helenyhou
11 years ago

stars-2x.3.png is courtesy of chexee. Probably just need a flip for RTL, if I remember correctly. Have the source as well - there's a lot here to go through and commit to design/asset repo whenever we're all set.

#132 @nacin
11 years ago

In 22479:

HiDPI rating stars. props chexee. see #21019.

#133 @nacin
11 years ago

rss-2x.png doesn't look like the formal RSS logo (which rss.png is), and it doesn't look as good when scaled down. Also, since this affects the front-end of the site, it is outside of the scope of this ticket.

wpmini-blue-2x.png looks good but could cause some compatibility issues with people overloading this and inserting actual favicons. I'm going to clean that up a bit.

#134 @nacin
11 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 22481:

Final HiDPI tweaks. Don't use rss-2x.png on a front-end widget. Improve selectors for favicons in the toolbar to avoid breaking existing images. Remove unnecessary RTL styles. FIXES #21019.

#135 follow-up: @miqrogroove
11 years ago

The anti-aliasing on the text alignment buttons looks really weird to me on my iPad 3. Retina images should be sharp instead of blurry. Left, center, right, and justify are my least favorite. The ordered list and unordered list buttons have a similar issue that is slightly less noticeable. By comparison, the new indent and outdent buttons look much better.

Everything else looks great.

#136 in reply to: ↑ 135 @nacin
11 years ago

Replying to miqrogroove:

The anti-aliasing on the text alignment buttons looks really weird to me on my iPad 3. Retina images should be sharp instead of blurry. Left, center, right, and justify are my least favorite. The ordered list and unordered list buttons have a similar issue that is slightly less noticeable. By comparison, the new indent and outdent buttons look much better.

I see what you mean. Worth a new ticket? A screenshot from a retina device (so, looking at them in context) could also help.

#138 @TobiasBg
11 years ago

Considering that WP 3.5 will be the "in-the-wild" version for a few months, and that we'll likely be promoting "Full Retina/HiDPI support" as a key feature for 3.5, wouldn't #22238 be a candidate for 3.5, given the steadily increasing support of HiDPI browsers/devices that we have seen in the past few months and that we will see in the upcoming months?
MT has done some nice testing of the media query in that ticket for wp.com already.

#139 @azaozz
11 years ago

In 22586:

TinyMCE: fix styles, add 2x background icons and load buttons.css in the Edit Image modal, remove wp-view styles from content.css, add 2x icons for the popup buttons (for editing image and gallery), fixes #22447, see #21019

#140 @helenyhou
11 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Looks like the down_arrow-2x.gif that went in inadvertently had a white background. Need to replace with down_arrow-2x.2.gif, via lessbloat.

#141 @helenyhou
11 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

Oh, right, new tickets. #22481

#142 @helenyhou
11 years ago

Committed source files provided in [D8], [D9], and [D10]. If I missed anything, let me know.

Note: See TracTickets for help on using tickets.