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

RESOLVED FIXED in Firefox 63

Status

enhancement
P3
normal
RESOLVED FIXED
Last year
11 months ago

People

(Reporter: birtles, Assigned: birtles)

Tracking

(Blocks 1 bug)

unspecified
Firefox 63
Dependency tree / graph

Firefox Tracking Flags

(firefox63 fixed)

Details

Attachments

(6 attachments, 2 obsolete attachments)

Assignee

Description

Last year
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
Severity: normal → enhancement
Priority: -- → P3
Assignee

Comment 1

11 months ago
Posted image 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.
Assignee

Comment 2

11 months ago
Posted patch Fix dock to bottom width (obsolete) — Splinter Review
Assignee: nobody → bbirtles
Status: NEW → ASSIGNED
Assignee

Comment 3

11 months ago
Posted patch Update settings icon (obsolete) — Splinter Review
Assignee

Comment 4

11 months ago
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.
Assignee

Comment 5

11 months ago
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.
Assignee

Comment 6

11 months ago
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
Flags: needinfo?(victoria)
Assignee

Updated

11 months ago
Attachment #8993241 - Attachment is obsolete: true
Assignee

Updated

11 months ago
Attachment #8993242 - Attachment is obsolete: true
Comment hidden (mozreview-request)
Comment hidden (mozreview-request)
Assignee

Updated

11 months ago
Attachment #8993551 - Flags: review?(jdescottes)
Attachment #8993552 - Flags: review?(jdescottes)
Attachment #8993553 - Flags: review?(jdescottes)
Assignee

Comment 10

11 months ago
Pre-emptively putting up for review.
Assignee

Comment 11

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

Comment 12

11 months ago
mozreview-review
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
Attachment #8993551 - Flags: review?(jdescottes) → review+

Comment 13

11 months ago
mozreview-review
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?
Attachment #8993552 - Flags: review?(jdescottes) → review+

Comment 14

11 months ago
mozreview-review
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.
Attachment #8993553 - Flags: review?(jdescottes) → review+
Assignee

Comment 15

11 months ago
(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 hidden (mozreview-request)
Comment hidden (mozreview-request)
Comment hidden (mozreview-request)

Comment 19

11 months ago
(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.
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
(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.
Flags: needinfo?(victoria)
Assignee

Comment 22

11 months ago
Thanks Victoria!

Comment 23

11 months ago
Pushed by bbirtles@mozilla.com:
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

11 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/fb9fecdf81ce
https://hg.mozilla.org/mozilla-central/rev/ca6c54f3f397
https://hg.mozilla.org/mozilla-central/rev/e5ec530fd95e
Status: ASSIGNED → RESOLVED
Closed: 11 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 63
Assignee

Comment 25

11 months ago
PR to update photon icons repo: https://github.com/FirefoxUX/photon-icons/pull/33
You need to log in before you can comment on or make changes to this bug.