1389462 - Outdated compass icon for the middle click autoscroll

Status: VERIFIED FIXED

(Firefox :: Theme, defect, P1)

Description

[Matthieu "utybo" S.]

Attachment: New Photon compass icon

The middle click autoscroll compass icon does not respect the new Photon UI guidelines, and looks more of a native icon from Windows 7. As such, it does not respect Windows 8 or 10 icons style, nor does it respect the general Photon UI, and looks very out of place.

I have made a new icon, following the Photon guidelines(1) as well as the MDN SVG Cleanup guide(2). This compass can be used for all of the different compass types by simply disabling or enabling the "northsouth" and "westeast" components. Note that the icon has a light background to allow it to be seen even on dark backgrounds.

(This icon was made by me after reddit user u/Jop902 pointed out the outdated icon, and u/zbraniecki suggested I make a new one)


(1) http://design.firefox.com/photon/visual/icons.html
(2) https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/SVG_Guidelines

Comment 1

[Zibi Braniecki [:zbraniecki][:gandalf]]

Thank you for your contribution Matthieu!

:Gijs set the [triage] whiteboard status which will result in someone from the UX team evaluating if the icon needs any finetuning.

Once this is settled, I'll help you write a patch to get it into Firefox :)

Comment 2

[Dão Gottwald [:dao]]

Shorlander, does the middle-click / autoscroll image need an update? Does the attached one look good to you?

Comment 3

[Stephen Horlander [:shorlander]]

This looks great, thank you!

The only tweak I would suggest is matching the 45º angle of our other arrow heads: http://design.firefox.com/icons/viewer/#arrow

Comment 4

[Dão Gottwald [:dao]]

Matthieu, do you want to update the icon as Stephen suggests?

Comment 5

[Matthieu "utybo" S.]

Attachment: Compass icon with fixed arrows angles

I have fixed the icon following Stephen's suggestion. Does this look better?

Comment 6

[Stephen Horlander [:shorlander]]

(In reply to Matthieu "utybo" S. from comment #5)
> Created attachment 8900870 [details]
> Compass icon with fixed arrows angles
> 
> I have fixed the icon following Stephen's suggestion. Does this look better?

Yes, thank you.

Comment 7

[Dão Gottwald [:dao]]

Matthieu, would you also like to write the patch for integrating this icon?

Comment 8

[Tim Nguyen :ntim]

Attachment: compass-icon.svg

Optimized the SVG further and used context-fill.

Comment 9

[Tim Nguyen :ntim]

(In reply to Dão Gottwald [::dao] from comment #7)
> Matthieu, would you also like to write the patch for integrating this icon?

This search should help: https://dxr.mozilla.org/mozilla-central/search?q=autoscroll.png&redirect=false

Comment 10

[Dão Gottwald [:dao]]

(In reply to Tim Nguyen :ntim from comment #8)
> Created attachment 8901260 [details]
> compass-icon.svg
> 
> Optimized the SVG further and used context-fill.

Why would we use context-fill here?

Comment 11

[Tim Nguyen :ntim]

(In reply to Dão Gottwald [::dao] from comment #10)
> (In reply to Tim Nguyen :ntim from comment #8)
> > Created attachment 8901260 [details]
> > compass-icon.svg
> > 
> > Optimized the SVG further and used context-fill.
> 
> Why would we use context-fill here?

The original PNG has different states, so I thought it may be useful here.

Comment 12

[Tim Nguyen :ntim]

If it isn't, it could easily be removed anyway.

Comment 13

[Matthieu "utybo" S.]

(In reply to Dão Gottwald [::dao] from comment #7)
> Matthieu, would you also like to write the patch for integrating this icon?

I think I would prefer having someone else qualified write the patch, as I have no idea of how to do it and I do not feel comfortable with playing around with Firefox sources. Sorry :/

Comment 14

[Dão Gottwald [:dao]]

No problem, we can take care of this. Thanks for the image!

Comment 15

[Zibi Braniecki [:zbraniecki][:gandalf]]

:dao - what's needed in this bug? Is it an easy-first-bug?

Comment 16

[Dão Gottwald [:dao]]

We basically just need to update the references to autoscroll.png. It's not very heard but also not super trivial since autscroll.png has a weird format containing multiple icons.

Comment 17

[Zibi Braniecki [:zbraniecki][:gandalf]]

Ok. So the next step is to generate the updated autoscroll.png with the new icon.

Here's the current one:

 * Windows: http://searchfox.org/mozilla-central/source/toolkit/themes/windows/global/icons/autoscroll.png
 * Mac: http://searchfox.org/mozilla-central/source/toolkit/themes/osx/global/icons/autoscroll.png
 * Linux: http://searchfox.org/mozilla-central/source/toolkit/themes/linux/global/icons/autoscroll.png

It seems to me that Windows uses the right column for XP_WIN (Windows XP) and left column for others.

The Mac and Linux only use the right column.

:shorlander - do you want per-platform icons for the new one? If so, can you instruct how to alter them?

Comment 18

[Dão Gottwald [:dao]]

(In reply to Zibi Braniecki [:gandalf][:zibi] from comment #17)
> Ok. So the next step is to generate the updated autoscroll.png with the new
> icon.

No, we should update the CSS to reference the new SVG icon.

Comment 19

[Zibi Braniecki [:zbraniecki][:gandalf]]

> No, we should update the CSS to reference the new SVG icon.

Ok.

But we need three versions of the icon - for horizontal, vertical and both directions scrolling, right?

Comment 20

[Zibi Braniecki [:zbraniecki][:gandalf]]

Tim, I've seen your amazing work with icons all around! Congrats!

Is there any chance you'd be interested in helping with this bug? :)

Comment 21

[Dão Gottwald [:dao]]

(In reply to Zibi Braniecki [:gandalf][:zibi] from comment #19)
> > No, we should update the CSS to reference the new SVG icon.
> 
> Ok.
> 
> But we need three versions of the icon - for horizontal, vertical and both
> directions scrolling, right?

Yep, they're easy to produce from the attached SVG since Matthieu already grouped the "northsouth" and "westeast" paths.

Comment 22

[Tim Nguyen :ntim]

I only use my trackpad daily, sorry.

Comment 23

[Hamza Khan]

If this is a good first bug, I would like to try helping with it as long as someone can point me in the right direction. The concept seems simple but I haven't worked with SVG files before.

Comment 24

[Stephen Horlander [:shorlander]]

(In reply to Zibi Braniecki [:gandalf][:zibi] from comment #17)
> :shorlander - do you want per-platform icons for the new one? If so, can you
> instruct how to alter them?

No, I don't think there is anything platform specific we need to do here.

Comment 25

[Dão Gottwald [:dao]]

gandalf, still want to mentor this? There's interest in comment 23.

Comment 26

[Zibi Braniecki [:zbraniecki][:gandalf]]

I did my best to collect all the relevant information from the stakeholders.

I think at this point all that has to be done is:

 * generate the correct SVG file
 * generate the correct CSS to switch between states
 * place the SVG in the tree and update CSS code

I've never worked on SVG+CSS so I'm not sure how those two steps should be done, but I can help with the third.

Comment 27

[Dão Gottwald [:dao]]

Attachment: Bug 1389462 - Update autoscroll icon.

Review commit: https://reviewboard.mozilla.org/r/187208/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/187208/

Comment 28

[Dale Harvey (:daleharvey)]

Comment on attachment 8915941 [details]
Bug 1389462 - Update autoscroll icon.

https://reviewboard.mozilla.org/r/187208/#review192220

Wasnt able to test due to lack of mouse, but codewise the patch looks simple and correct, cheers

Comment 29

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5b41d7a0fe73
Update autoscroll icon. r=daleharvey

Comment 30

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

https://hg.mozilla.org/mozilla-central/rev/5b41d7a0fe73

Comment 31

[Dão Gottwald [:dao]]

Not going to try to uplift this to 57 -- let's have this ride the 58 release train.

Comment 32

[Zibi Braniecki [:zbraniecki][:gandalf]]

Thank you for your contribution Matthieu! :)

Comment 33

[slew]

I don't think this icon matches the default theme and cursors on Windows 7. Is it appropriate to add it to all platforms even if it doesn't match?

Right now it looks seriously out of place on my browser.

Comment 34

[Matthieu "utybo" S.]

Looks as if this is getting loads of criticism from r/firefox, you guys may want to have a look at it


https://www.reddit.com/r/firefox/comments/752s7x/thanks_to_mozilla_for_changing_the_middle_click/

Comment 35

[Adolfo Jayme]

IMHO this isn’t a UI element that needs to be “Photonized” to that extreme: even under Windows 10, the overly thick lines look quite ludicrous. It might look alright for high-contrast themes, though.

Comment 36

[Stephan Sokolow]

(In reply to Matthieu "utybo" S. from comment #34)
> Looks as if this is getting loads of criticism from r/firefox, you guys may
> want to have a look at it
> 
> 
> https://www.reddit.com/r/firefox/comments/752s7x/
> thanks_to_mozilla_for_changing_the_middle_click/

In case it helps, my intuitive expectation is that, unless everything including the default cursor has been re-themed (eg. in a game expected to run full-screen), all cursors are "OS elements" and, thus, should match the OS's design language rather than the application's.

(Or, to put it another way, consistency between cursors is paramount,)

Comment 37

[roxleitan]

Verified fixed using the latest Nightly (2017-10-13) on Windows 10 x64, Ubuntu 16.04 x64 and Mac OS X 10.12.