General menu visual improvements & change to material 3-dot menu/add-tab icons

RESOLVED FIXED in Firefox 43

Status

()

defect
RESOLVED FIXED
4 years ago
3 years ago

People

(Reporter: antlam, Assigned: mcomella, Mentored)

Tracking

(Blocks 3 bugs)

unspecified
Firefox 43
x86
Android
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox43 verified, relnote-firefox 43+, fennec43+)

Details

Attachments

(15 attachments)

96.95 KB, image/png
antlam
: feedback+
Details
43.93 KB, image/png
antlam
: feedback+
Details
26.40 KB, image/png
antlam
: feedback-
Details
26.75 KB, image/png
antlam
: feedback-
Details
2.88 KB, application/zip
Details
26.47 KB, image/png
antlam
: feedback+
Details
193.19 KB, image/png
antlam
: feedback+
Details
40 bytes, text/x-review-board-request
mhaigh
: review+
Details
40 bytes, text/x-review-board-request
mhaigh
: review+
Details
40 bytes, text/x-review-board-request
mhaigh
: review+
Details
40 bytes, text/x-review-board-request
mhaigh
: review+
Details
40 bytes, text/x-review-board-request
mhaigh
: review+
Details
40 bytes, text/x-review-board-request
mhaigh
: review+
Details
40 bytes, text/x-review-board-request
mhaigh
: review+
Details
162.59 KB, image/png
Details
Breaking this up from the Meta. 

Basically, right now it doesn't look like it's the right color. Is it just me? Pressed state should be "Toolbar grey pressed" (#D7D7DC).

Comment 1

4 years ago
Google states within in the Material Design guidelines that buttons in their pressed state should be 20% #999999

http://www.google.co.uk/design/spec/components/buttons.html#buttons-flat-raised-buttons
Mentor: michael.l.comella
(In reply to Paul [pwd] from comment #1)
> Google states within in the Material Design guidelines that buttons in their
> pressed state should be 20% #999999
> 
> http://www.google.co.uk/design/spec/components/buttons.html#buttons-flat-
> raised-buttons

Thanks Paul. I am aware of what Google is doing in Material design. Their guidelines are pretty well done and documented. But, these are our colors that are a part of our guidelines. Rest assured, we aren't choosing these arbitrarily/ on a whim either. :)
Going with the 3-dot menu from bug 1183601 and the visual improvements from bug 1140169:

(In reply to Anthony Lam (:antlam) from bug 1140169 comment #0)
> Namely:
>  - Pressed state should be "Toolbar grey pressed" (#D7D7DC)
...
>  - Add 15dp left padding to labels (I don't think I ever specified this
> value anywhere but 15dp would keep it consistent in other areas of our UI
> that are close to "edges")
>  - Dividers in between each row seem to be (#C9D3DC), we should update this
> to (#D7D9DB) like our toolbar divider.
Summary: Change menu list items pressed color to "Toolbar grey pressed" → General menu visual improvements
Assignee: nobody → michael.l.comella
Anthony, what do you think?
Attachment #8650771 - Flags: feedback?(alam)
Comment on attachment 8650771 [details]
Screenshot post-patch

MUCH better! Like music to my... eyes!

Is the font color for disabled text (like Find in Page and Page) here consistent with our disabled grey?
Flags: needinfo?(michael.l.comella)
Attachment #8650771 - Flags: feedback?(alam) → feedback+
Comment on attachment 8651326 [details]
Screenshot post-patch (tablet)

Material menu overflow icon? looks good!
Attachment #8651326 - Flags: feedback?(alam) → feedback+
Posted image Tabs panel
Tabs panel looks a bit goofy to me – the button needs to be bigger.
Attachment #8652003 - Flags: feedback?(alam)
Here's the menu button in the tabs panel if I don't constrain the height.
Attachment #8652005 - Flags: feedback?(alam)

Comment 11

4 years ago
The non-adjusted isn't the most aesthetically pleasing. It's hard for anything to look good next to such a cross as the new tab button though.
(In reply to Paul [pwd] from comment #11)
> The non-adjusted isn't the most aesthetically pleasing. It's hard for
> anything to look good next to such a cross as the new tab button though.

Google's Material add button [1] looks fairly similar – perhaps it's just a size issue? Anthony, perhaps you have some new size specs?

[1]: https://www.google.com/design/icons/#ic_add
(In reply to Anthony Lam (:antlam) from comment #6)
> Is the font color for disabled text (like Find in Page and Page) here
> consistent with our disabled grey?

I've been spending a bit too long on this so I filed bug 1198050.
Flags: needinfo?(michael.l.comella)
Attachment #8652005 - Flags: feedback?(alam) → feedback-
Comment on attachment 8652003 [details]
Tabs panel

Thanks for posting these, I appreciate it!

I think you're right. I designed a + and - icon to use originally in the tablet redesign. 

I'll attach them here.
Attachment #8652003 - Flags: feedback?(alam) → feedback-
Posted file icon_add.zip
I think we should update our + icons now. Give this a try and we can file another bug if we want to go through and swap it in all parts of our UI too (I think I filed that bug somewhere before)
Flags: needinfo?(michael.l.comella)
As for sizing/ dimensions: the "+" is 18dp, then it's centered inside a square container that is created by the action bar height of 48 dp.
Note that we also need assets for private browsing mode.
Flags: needinfo?(michael.l.comella) → needinfo?(alam)
Attachment #8652415 - Flags: feedback?(alam)
Turns out the same asset is used in the tabs strip (though I can fork the assets and not change it for an APK size increase).
Attachment #8652416 - Flags: feedback?(alam)
Comment on attachment 8652415 [details]
Add tab asset (phone)

Looks good!

RE: Private browsing asset - I think we should unify here and just use a single "add" icon. 

The small mask is kinda hard to see and especially with the latest UI changes we did in bug 864958, it's pretty obvious that you're in private browsing mode, and thus, will be adding a private browsing tab.
Attachment #8652415 - Flags: feedback?(alam) → feedback+
Comment on attachment 8652416 [details]
Add tab asset in tab strip (tablet)

Awesome!
Flags: needinfo?(alam)
Attachment #8652416 - Flags: feedback?(alam) → feedback+
Bug 1148550 - Update GeckoMenu pressed color. r=mhaigh

This also involved moving a redundant background declaration to only the
containing style.
Attachment #8652604 - Flags: review?(mhaigh)
Bug 1148550 - Add new Material 3-dot menu assets. r=mhaigh

And replace the older assets.

These are the 36dp icons from Google's material design page:
  https://www.google.com/design/icons/#ic_more_vert

Then we trim off the whitespace with image magick:
  convert icon.png -trim out.png

And compress with ImageOptim.
Attachment #8652605 - Flags: review?(mhaigh)
Bug 1148550 - Update 3-dot menu icon to Material on toolbar. r=mhaigh

Other 3-dot menu button locations to follow.

I tested that the colors are correct in the various states (e.g. private
browsing).

This patch additionally:
* Restructured the menu button (which allowed the removal of a setVisibility
  call
* Removed the now unused tablet assets.
Attachment #8652606 - Flags: review?(mhaigh)
Bug 1148550 - Update 3-dot menu icon to Material in tabs panel. r=mhaigh
Attachment #8652607 - Flags: review?(mhaigh)
Bug 1148550 - Remove add_tab private browsing and dark assets. r=mhaigh

Replace dark assets with tinting.
Attachment #8652609 - Flags: review?(mhaigh)
Comment on attachment 8652603 [details]
MozReview Request: Bug 1148550 - Change menu padding left to 15dp. r=mhaigh

https://reviewboard.mozilla.org/r/17221/#review16001
Attachment #8652603 - Flags: review?(mhaigh) → review+
Comment on attachment 8652604 [details]
MozReview Request: Bug 1148550 - Update GeckoMenu pressed color. r=mhaigh

https://reviewboard.mozilla.org/r/17223/#review16005
Attachment #8652604 - Flags: review?(mhaigh) → review+
Comment on attachment 8652605 [details]
MozReview Request: Bug 1148550 - Add new Material 3-dot menu assets. r=mhaigh

https://reviewboard.mozilla.org/r/17225/#review16007
Attachment #8652605 - Flags: review?(mhaigh) → review+
Comment on attachment 8652606 [details]
MozReview Request: Bug 1148550 - Update 3-dot menu icon to Material on toolbar. r=mhaigh

https://reviewboard.mozilla.org/r/17227/#review16011
Attachment #8652606 - Flags: review?(mhaigh) → review+
Comment on attachment 8652607 [details]
MozReview Request: Bug 1148550 - Update 3-dot menu icon to Material in tabs panel. r=mhaigh

https://reviewboard.mozilla.org/r/17229/#review16013
Attachment #8652607 - Flags: review?(mhaigh) → review+
Comment on attachment 8652608 [details]
MozReview Request: Bug 1148550 - Replace new tab asset with Material one. r=mhaigh

https://reviewboard.mozilla.org/r/17231/#review16015
Attachment #8652608 - Flags: review?(mhaigh) → review+
Comment on attachment 8652609 [details]
MozReview Request: Bug 1148550 - Remove add_tab private browsing and dark assets. r=mhaigh

https://reviewboard.mozilla.org/r/17233/#review16017

::: mobile/android/base/resources/color-large-v11/tab_new_tab_strip_colors.xml:1
(Diff revision 1)
> +<?xml version="1.0" encoding="utf-8"?>

Is this file used anywhere?
Attachment #8652609 - Flags: review?(mhaigh) → review+
https://reviewboard.mozilla.org/r/17233/#review16017

> Is this file used anywhere?

Yes, in `layout-large-v11/tab_strip_inner.xml`.
Summary: General menu visual improvements → General menu visual improvements & change to material 3-dot menu/add-tab icons
tracking-fennec: --- → ?
can we combine this with https://bugzilla.mozilla.org/show_bug.cgi?id=1140048 and ship in 44?
Flags: needinfo?(michael.l.comella)
(In reply to Barbara Bermes [:bbermes] from comment #38)
> can we combine this with
> https://bugzilla.mozilla.org/show_bug.cgi?id=1140048 and ship in 44?

We clarified this via email – we're shipping this bug in 43 (we try not to hold back work) and tracking bug 1140048 in 44.
Flags: needinfo?(michael.l.comella)
tracking-fennec: ? → 43+

Comment 40

4 years ago
The new icons are beyond awesome. For something seemingly so small, they add so much polish to Fennec. Great work :antlam and Michael.
Release Note Request (optional, but appreciated)
[Why is this notable]: The UI started to look dated (imo) so we added a little bit of Google's Material design, the latest Android UI design. In particular, we rounded the 3-dot menu icon and adjusted the menu's padding.

[Suggested wording]: Updated toolbar menu with Material design conventions

[Links (documentation, blog post, etc)]: N/A
relnote-firefox: --- → ?
Tested using:
Device: LG G4 (Android 5.1)
Build: Firefox for Android 43.0a2 (2015-09-22)
Added to release notes for 43.
Duplicate of this bug: 1115401
You need to log in before you can comment on or make changes to this bug.