Page MenuHomePhabricator

Make icons size more consistent for Recent Changes filters
Closed, ResolvedPublic

Description

The new filters on Recent Changes use icons to signal different actions as the entry point for saved filters, the actions to save or clear the filters, and more recently the access to advanced filters. Several of those look a bit bigger than what they should.

These icons should fit into a 16x16px area, but currently they are shown bigger than that. The image below shows a blue 16x16px square to illustrate how some icons go outside that boundary:

Artboard.png (454×588 px, 47 KB)

(note that the image has been exported at 2x to make pixels easy to see, but you can see the original at F8530125)

Event Timeline

Pginer-WMF renamed this task from Make icons size more consistent for Recent Changes icons to Make icons size more consistent for Recent Changes filters.Jun 26 2017, 9:58 AM

As far as I can tell, this is a direct consequence of T97631: Change OOUI WikimediaUI theme to be optimized for font-size of 14px (0.875em×16px), instead of 12.8px (0.8em×16px), like MediaWiki's Vector skin. I checked and the outer boxes for the icons are 26.25x26.25 instead of 24x24, so the 16x16 boxes you are expecting would be correspondingly larger (17.5x17.5). If the icons all fit into a 17.5px box, then once we fix the icon sizes they'll fit in a 16px box. If they don't, then that's most likely an issue with the icon files themselves rather than the software.

(Please confirm the icons fit in 17.5px boxes; if they do, we can close this as a duplicate of T168089: Avoid blurred icons and pixel rounding errors by settling on unified font size or something.)

(Please confirm the icons fit in 17.5px boxes; if they do, we can close this as a duplicate of T168089: Avoid blurred icons and pixel rounding errors by settling on unified font size or something.)

Most icons do fit in 17.5px boxes, but the namespace icon goes slightly out of it (maybe just because of browser rounding/antialiasing), and the bookmark icon does so more prominently:

Screen Shot 2017-06-28 at 10.36.27.png (562×537 px, 17 KB)
Screen Shot 2017-06-28 at 10.36.41.png (548×548 px, 19 KB)

@Catrope @Pginer-WMF So this is ready to be merged in as duplicate?

@Catrope @Pginer-WMF So this is ready to be merged in as duplicate?

@Catrope mentioned in T168835#3385356 that in the case of the icons to fit a17.5px box this could be considered a duplicate, but there are some icons (as pointed in T168835#3385356) that are still bigger than those dimensions. So there may be some additional issue, not making this a duplicate.

@Pginer-WMF But what are the actions to take then? Scaling the icons in RCFilters to the 17.5px box?

@Pginer-WMF But what are the actions to take then? Scaling the icons in RCFilters to the 17.5px box?

The actions are:

  • Make icons smaller in general (which may get fixed by T97631 or consider it a specific instance of it, or even a duplicate)
  • Figure out why the bookmark icon is even larger than the rest, and reduce it to fit with the rest of the icons.

The 17.5px box was just a test that Roan proposed to identify if only the first action was required (i.e., the ticket was just a duplicate).

  • Figure out why the bookmark icon is even larger than the rest, and reduce it to fit with the rest of the icons.

I took a quick look and didn't see anything obvious, so someone should look into this in more detail. Right now I suspect that it's either a height: 100% rule applied to the icon by the ButtonElement styles, or something about the icon file itself (maybe it doesn't stay inside the 16x16 box inside the 24x24 viewbox that it's supposed to stay in).

Volker_E changed the task status from Open to Stalled.Sep 11 2017, 8:00 PM

Well, the reason is simple: The paths are different on the 24x24 px canvas:
Clip/unClip is 14x18 px versus trash/unTrash is 12x15 px versus article being 13x16 px.
As Design team is currently going through updating all icons and harmonize paths sizing with canvas across our icon set, I'd put this on stalled before introducing special treatment that is just around several weeks.

Mooeypoo subscribed.

Moving this to blocked, as per @Volker_E's comment. This is a standardization issue, and fixing/overriding it specifically in RCFilters may do more damage than good to overall support.

A user mentioned the icon size inconsistency in a recent comment.

Do we need to do anything about this or will the icons update automatically when they are fixed in the main repository?

@jmatazzoni I will lead the process. As soon as we settle discussion on T177432 I'm going to provide several patches against OOUI and following-up products like RCFilters. Together with help by @Pginer-WMF, @Mooeypoo, @Petar.petkovic and @Etonkovidova I'm positive that we can successfully accomplish this in a reasonable amount of time.

Volker_E claimed this task.
Volker_E added a subscriber: RHo.

I'm very happy to say, this has been resolved with T97631 & T177432. Thanks also to @RHo and @Pginer-WMF for the well-established guidelines that led to the 20dp canvas and the quick response times on identified issues – last example 'bookmark' icon.