Closed Bug 1474224 Opened 2 years ago Closed 2 years ago

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

Categories

(DevTools :: General, enhancement, P3)

enhancement

Tracking

(firefox63 fixed)

RESOLVED FIXED
Firefox 63
Tracking Status
firefox63 --- fixed

People

(Reporter: birtles, Assigned: birtles)

References

(Blocks 1 open bug)

Details

Attachments

(6 files, 2 obsolete files)

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
Attached 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.
Attached patch Fix dock to bottom width (obsolete) — Splinter Review
Assignee: nobody → bbirtles
Status: NEW → ASSIGNED
Attached patch Update settings icon (obsolete) — Splinter Review
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.
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.
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)
Attachment #8993241 - Attachment is obsolete: true
Attachment #8993242 - Attachment is obsolete: true
Attachment #8993551 - Flags: review?(jdescottes)
Attachment #8993552 - Flags: review?(jdescottes)
Attachment #8993553 - Flags: review?(jdescottes)
Pre-emptively putting up for review.
I must make sure to update the icons in the photon icon library too once this is done.
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 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 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+
(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!
(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)
Thanks Victoria!
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
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: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 63
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.