1474224 - Make the "dock to bottom" icon the same width as the other icons

Status: RESOLVED FIXED

(DevTools :: General, enhancement, P3)

Description

[Brian Birtles (:birtles)]

This might become less important or even unnecessary once we do bug 1474223, but so long as the menu is in its current form, it would be easier to scan if the icons had the same width.

As reported here:

  https://twitter.com/fvsch/status/1015156057977520128

Comment 1

[Brian Birtles (:birtles)]

Attachment: Screenshot

I updated the dock to bottom button and settings icon.

I was also going to try using the Open in New icon to see how it looks but I ran out of time since I spent an hour or so recreating the settings icon to fit on a 16px grid (the icon from the Photon icon library is on a 24x24 grid and doesn't fill the box so it looked odd--and if I just update the viewbox it would have slightly narrower stroke width than 2px). So I had to try and work out arc math to get the segments in the right spots. I'm pretty sure this is spot on now.

Comment 2

[Brian Birtles (:birtles)]

Attachment: Fix dock to bottom width

Comment 3

[Brian Birtles (:birtles)]

Attachment: Update settings icon

Comment 4

[Brian Birtles (:birtles)]

Attachment: Screenshot with photonic "Open in New" icon

I tried updating the "Undock" icon to a slightly adapted version of the Photon "Open in New" icon that matches the proportions of the other dock icons.

Comment 5

[Brian Birtles (:birtles)]

Attachment: Screenshot with widths reversed

I tried Jens' suggestion from bug 1476536 comment 0--to invert the thickness of the lines--and while it might be more clear, it doesn't match the Photon style. It was worth checking anyway.

Comment 6

[Brian Birtles (:birtles)]

Hi Victoria, I tried using the Photon settings icon and Open in New icons. I needed to adapt them to the 16x16 grid and make the Open in New icon match the proportions of the other icons but I think they look ok. What do you think?

https://bug1474224.bmoattachments.org/attachment.cgi?id=8993549

Comment 7

[Brian Birtles (:birtles)]

Attachment: Bug 1474224 - Make the dock to bottom icon width the same as other icons;

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

Comment 8

[Brian Birtles (:birtles)]

Attachment: Bug 1474224 - Use Photon "Settings" icon in meatball menu;

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

Comment 9

[Brian Birtles (:birtles)]

Attachment: Bug 1474224 - Use Photon "Open in New" icon for undock icon;

This is not exactly the same as the one in the photon library but rather has
been adapted to match the proportions of the other icons and fit on a 16x16
grid.

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

Comment 10

[Brian Birtles (:birtles)]

Pre-emptively putting up for review.

Comment 11

[Brian Birtles (:birtles)]

I must make sure to update the icons in the photon icon library too once this is done.

Comment 12

[Julian Descottes [:jdescottes]]

Comment on attachment 8993551 [details]
Bug 1474224 - Make the dock to bottom icon width the same as other icons;

https://reviewboard.mozilla.org/r/258240/#review265306

Comment 13

[Julian Descottes [:jdescottes]]

Comment on attachment 8993552 [details]
Bug 1474224 - Use Photon "Settings" icon in meatball menu;

https://reviewboard.mozilla.org/r/258242/#review265308

::: commit-message-8e399:2
(Diff revision 1)
> +Bug 1474224 - Use standard settings icon in meatball menu; r?julian
> +

Could we explain what "standard" means, maybe a pointer to the original icon/resource this comes from?

Comment 14

[Julian Descottes [:jdescottes]]

Comment on attachment 8993553 [details]
Bug 1474224 - Use Photon "Open in New" icon for undock icon;

https://reviewboard.mozilla.org/r/258244/#review265312

Looks good to me, let's wait for Victoria to answer your needinfo? before landing.

For the record I tested on OSX, with high-dpi and non-high-dpi screens, as well as with both themes.

Comment 15

[Brian Birtles (:birtles)]

(In reply to Julian Descottes [:jdescottes][:julian] from comment #14)
> Comment on attachment 8993553 [details]
> Bug 1474224 - Use Photon "Open in New" icon for undock icon;
> 
> https://reviewboard.mozilla.org/r/258244/#review265312
> 
> Looks good to me, let's wait for Victoria to answer your needinfo? before
> landing.

Absolutely.

> For the record I tested on OSX, with high-dpi and non-high-dpi screens, as
> well as with both themes.

Thanks!

Comment 16

[Brian Birtles (:birtles)]

Comment on attachment 8993551 [details]
Bug 1474224 - Make the dock to bottom icon width the same as other icons;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/258240/diff/1-2/

Comment 17

[Brian Birtles (:birtles)]

Comment on attachment 8993552 [details]
Bug 1474224 - Use Photon "Settings" icon in meatball menu;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/258242/diff/1-2/

Comment 18

[Brian Birtles (:birtles)]

Comment on attachment 8993553 [details]
Bug 1474224 - Use Photon "Open in New" icon for undock icon;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/258244/diff/1-2/

Comment 19

[Jens]

(In reply to Brian Birtles (:birtles) from comment #5)
> Created attachment 8993550 [details]
> Screenshot with widths reversed
> 
> I tried Jens' suggestion from bug 1476536 comment 0--to invert the thickness
> of the lines--and while it might be more clear, it doesn't match the Photon
> style. It was worth checking anyway.


I personally think these looks nicer now (I really find myself reading/scanning the text with the new button before clicking the Dock button) but I can understand that you want to have these photonized. 

FWIW, I do not have this 'read the text before clicking' in Chrome which have a filled area for the DevTools part making it more obvious. So with this filled area the icon could be photonized and still emphasize what is going to happen. That is, filling the area between thick window and small line:

https://i.imgur.com/ytwb1fz.png

Just an idea I saw you're working on a collapsed chrome like version anyway so maybe this would make the icons more obvious.

Comment 20

[Florens Verschelde :fvsch]

I would recommend against the "thin outer line, thick inner line" style because it clashes with a common symbol for credit card icons:
https://duckduckgo.com/?q=credit+card+icon&iax=images&ia=images

Comment 21

[Victoria Wang [:victoria]]

(In reply to Brian Birtles (:birtles) from comment #6)
> Hi Victoria, I tried using the Photon settings icon and Open in New icons. I
> needed to adapt them to the 16x16 grid and make the Open in New icon match
> the proportions of the other icons but I think they look ok. What do you
> think?
> 
> https://bug1474224.bmoattachments.org/attachment.cgi?id=8993549

Thanks Brian, these icons look great! Seems good to move forward with these for now - we could potentially reconsider the icons in the 'icon row' bug.

Comment 22

[Brian Birtles (:birtles)]

Thanks Victoria!

Comment 23

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/fb9fecdf81ce
Make the dock to bottom icon width the same as other icons; r=jdescottes
https://hg.mozilla.org/integration/autoland/rev/ca6c54f3f397
Use Photon "Settings" icon in meatball menu; r=jdescottes
https://hg.mozilla.org/integration/autoland/rev/e5ec530fd95e
Use Photon "Open in New" icon for undock icon; r=jdescottes

Comment 24

[Raul Gurzau (:RaulG)]

https://hg.mozilla.org/mozilla-central/rev/fb9fecdf81ce
https://hg.mozilla.org/mozilla-central/rev/ca6c54f3f397
https://hg.mozilla.org/mozilla-central/rev/e5ec530fd95e

Comment 25

[Brian Birtles (:birtles)]

PR to update photon icons repo: https://github.com/FirefoxUX/photon-icons/pull/33