Page MenuHomePhabricator

IPInfo: Use infoFilled for the popup button
Closed, ResolvedPublic1 Estimated Story Points

Description

AC:
Use the infoFilled icon instead of info for the button that shows the IP Info popup. (icon reference)

Current design:

Screenshot 2022-02-17 at 9.20.07 AM.png (526×1 px, 128 KB)

Event Timeline

TThoabala set the point value for this task to 1.Feb 28 2022, 5:14 PM

Change 770970 had a related patch set uploaded (by TsepoThoabala; author: TsepoThoabala):

[mediawiki/extensions/IPInfo@master] Use infoFilled for the popup button

https://gerrit.wikimedia.org/r/770970

For QA and code review:
Please be on the look out as this patch might reintroduce https://phabricator.wikimedia.org/T268981 or https://phabricator.wikimedia.org/T298942
I tested on firefox 78 and 83 and I could not produce bugs mentioned there.

Change 770970 merged by jenkins-bot:

[mediawiki/extensions/IPInfo@master] Use infoFilled for the popup button

https://gerrit.wikimedia.org/r/770970

dom_walden subscribed.

For QA and code review:
Please be on the look out as this patch might reintroduce https://phabricator.wikimedia.org/T268981 or https://phabricator.wikimedia.org/T298942

Thanks for pointing this out. I can now reproduce T268981 again. I have reopened that bug.

For QA and code review:
Please be on the look out as this patch might reintroduce https://phabricator.wikimedia.org/T268981 or https://phabricator.wikimedia.org/T298942

Thanks for pointing this out. I can now reproduce T268981 again. I have reopened that bug.

Thanks, I have added a patch to fix both problems here https://gerrit.wikimedia.org/r/c/mediawiki/extensions/IPInfo/+/771840

On browsers: Firefox 91, Chromium 87, Safari 14:

  • Tested revision history, Recent Changes and Special:Log
  • On the 5 different skins: Vector 2010, Vector 2022, Minerva, Monobook, Timeless
  • At different zoom levels (100-170%)
  • I repeated the above in the Arabic language (to try to reproduce T298942)

I could reproduce T268981. The above testing may need to be repeated when the fix for that bug is merged.

I also found T304148, but I doubt that was caused by this change.

Test environment: https://en.wikipedia.beta.wmflabs.org IP Info 0.0.0 (500d7c1) 07:44, 18 March 2022.

@Prtksxna I've moved this into design review, since the infoFilled icon is larger than the info icon, and I'm not sure how good it looks. Here's a comparison:

infoinfoFilled
image.png (283×699 px, 94 KB)
image.png (283×702 px, 94 KB)

Do we want to keep infoFilled? (My understanding is that we shouldn't simply scale the infoFilled icon down; I believe we're not supposed to scale the icons, since they're drawn to the pixel.)

We talked about this and a related ticket (T280666: Extend color and size guidelines of the Wikimedia Design System icon set ) on the design Slack. Based on that I wanted to note some alternatives:

  1. Go back to using the old info icon
  2. Use the new infoFilled icon at 16px on Base30 (#72777d). The issue with this is that the icon will look pixelated and we'd probably have to use the opacity hack to get the icon to be the right color (no sure about this?)
  3. Update the info icon in OOUI (maybe use the Growth one F35027935) so that its more visible

Given that this tool will be on OOUI for at least a while I'd like an outcome where we can use something that works for our users in the long run. What do you think @Volker_E @bmartinezcalvo?

We talked about this and a related ticket (T280666: Extend color and size guidelines of the Wikimedia Design System icon set ) on the design Slack. Based on that I wanted to note some alternatives:

  1. Go back to using the old info icon
  2. Use the new infoFilled icon at 16px on Base30 (#72777d). The issue with this is that the icon will look pixelated and we'd probably have to use the opacity hack to get the icon to be the right color (no sure about this?)
  3. Update the info icon in OOUI (maybe use the Growth one F35027935) so that its more visible

Given that this tool will be on OOUI for at least a while I'd like an outcome where we can use something that works for our users in the long run. What do you think @Volker_E @bmartinezcalvo?

Commenting the same as last week in the Slack thread, I think we should start to enlarge our iconography sizes since 20px icon size doesn't work in many cases (e.g. in this example described in this task). I think the best solution to solve this problem with the sizes and pixelation of the icons would be to start designing our iconography in both 20px and 16px (we should test what new sizes would be the best solution but I think 16px would work well in cases where 20px is huge). With this solution, we would have our iconography available in 20px and 16px sizes and we could choose which size is the best for each component or use case.