1019318 - Polish button toast appearance

Status: RESOLVED FIXED

(Firefox for Android Graveyard :: Theme and Visual Design, defect)

Description

[:Margaret Leibovic]

Splitting this off from the conversation happening in bug 997288.

Right now antlam is talking about adding some transparency and tweaking the positioning. Want to make a mock-up?

Comment 1

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: preview_newtoast.png

Got a WIP for you guys right here!

I've shrunk the overall size of it so that the rounded corners can complete the "pill" shape on both ends. Also, I've added a transparency (~85%) to the toast matte and moved the positioning of the toast a little bit lower. The color is also less brown and taken from the tab tray background itself. 

It still covers the URL bar there and I'm still not happy about it but thought I'd post just to keep the ball rolling.

Thoughts?

Comment 2

[:Margaret Leibovic]

Do we need to have separate styles for different Android versions? Or is this bug just an attempt to improve the most modern style? I haven't done an assessment of the different toast styles in different versions, so I'm not sure what we're working wiht here.

nalexander worked on the lastest sets of styles, so I want to know what he thinks.

Comment 3

[Nick Alexander :nalexander [he/him]]

(In reply to :Margaret Leibovic from comment #2)
> Do we need to have separate styles for different Android versions? Or is
> this bug just an attempt to improve the most modern style? I haven't done an
> assessment of the different toast styles in different versions, so I'm not
> sure what we're working wiht here.
> 
> nalexander worked on the lastest sets of styles, so I want to know what he
> thinks.

I think we do want to keep styles depending on Android version, because we mix toasts (styled per Android version, by Android) and button toasts (styled by us) throughout Fennec.

I followed the convention that wesj started, but implemented it in XML rather than in 9-patch PNGs.  My guess is that wesj found 9-patch PNGs in a good form to drop in, and that's a great way to get the platform-exact look.  I needed to really control padding and margins, and the 9-patch PNGs had different padding values depending on platform, so I replicated the PNGs, and later moved to Anthony's mocks, in XML.

That said, there are two axes at play:

Android version <v19 vs. v19+
Phone vs tablet

Technically, there's a shared StyleBase, and style Style with parent=StyleBase in each of the subdirectories.

Comment 4

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

I was just experimenting with the latest Android version here (the rounded ends) but I think we could adjust for the older versions of Android too, depending on what version the user is on.

Comment 5

[:Margaret Leibovic]

I will get to work on writing a patch for the latest styles, but in the meantime could we start brainstorming how this should work on older devices?

nalexander, how many sets of styles do we currently support? I'm hoping it's just two.

Comment 6

[Wesley Johnston (:wesj)]

(In reply to Nick Alexander :nalexander from comment #3)
> I followed the convention that wesj started, but implemented it in XML
> rather than in 9-patch PNGs.  My guess is that wesj found 9-patch PNGs in a
> good form to drop in, and that's a great way to get the platform-exact look.

Yes. I was hoping to just steal the platform specific styles originally, but they don't fit buttons well :( So instead we just took the platform default drawables and modified them where we needed to. You could still use 9-patches for what you were doing. You'd just need to chop of the left side (right on rtl if we ever support it) and make sure they overlapped correctly. But the current stuff works fine too :)

Basically you two have hit problems because you're using icons, which we'd basically given up on in our other attempts. Personally, I still think you might be better to drop them here as well. They add visual clutter without much benefit (IMO), but this is the third time UX has wanted them in so I'm assuming they really want it :)

Comment 7

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: specs_snippet_mock1.png

Not sure if this helps, but I drew up what it would look like for the squarer toasts. I also took the liberty to try and draw up some specs around spacing and what not. Let me know if this helps..

These were done on an XXHDPI canvas and so the units would have to be converted as such.

Comment 8

[:Margaret Leibovic]

(In reply to :Margaret Leibovic from comment #5)

> nalexander, how many sets of styles do we currently support? I'm hoping it's
> just two.

I'm sorry, you already answered this is comment 3.

Comment 9

[:Margaret Leibovic]

Attachment: Polish button toast appearance

Worked with antlam on IRC to come up with this. This makes the v19+/v19- styles a bit more similar, reduces the height of the toast to be more consistent with regular toasts, and uses a more black/transparent background.

Here's a build to test: https://dl.dropboxusercontent.com/u/3358452/fennec-toast-polish.apk

This is definitely looking good on my 4.4 devices, but unfortunately I don't have a 4.0-4.3 device with me to test. I tested on my 2.3 device, and there the button toast is a bit inconsistent with the regular toast, but it's actually more consistent than it was before this patch. I don't think we ever designed these button toasts for 2.3 (and I don't really care to optimize for that case).

Comment 10

[:Margaret Leibovic]

Comment on attachment 8438686 [details] [diff] [review]
Polish button toast appearance

Review of attachment 8438686 [details] [diff] [review]:
-----------------------------------------------------------------

::: mobile/android/base/resources/values-v19/styles.xml
@@ +14,5 @@
>          <item name="android:background">@null</item>
>          <item name="android:paddingLeft">24dp</item>
>          <item name="android:paddingRight">24dp</item>
> +        <item name="android:paddingTop">11dp</item>
> +        <item name="android:paddingBottom">11dp</item>

Oh, I just got rid of these two lines locally (since they match the parent style), but I forgot to qrefresh.

Comment 11

[:Margaret Leibovic]

(In reply to :Margaret Leibovic from comment #10)
> Comment on attachment 8438686 [details] [diff] [review]
> Polish button toast appearance
> 
> Review of attachment 8438686 [details] [diff] [review]:
> -----------------------------------------------------------------
> 
> ::: mobile/android/base/resources/values-v19/styles.xml
> @@ +14,5 @@
> >          <item name="android:background">@null</item>
> >          <item name="android:paddingLeft">24dp</item>
> >          <item name="android:paddingRight">24dp</item>
> > +        <item name="android:paddingTop">11dp</item>
> > +        <item name="android:paddingBottom">11dp</item>
> 
> Oh, I just got rid of these two lines locally (since they match the parent
> style), but I forgot to qrefresh.

Actually, I shouldn't have done that, it doesn't work!

Comment 12

[Nick Alexander :nalexander [he/him]]

Comment on attachment 8438686 [details] [diff] [review]
Polish button toast appearance

Review of attachment 8438686 [details] [diff] [review]:
-----------------------------------------------------------------

Code looks fine to me, and so does the APK.  I agree that you need the modified padding in both styles.xml -- *Base is not inheriting from anything common.

Comment 13

[:Margaret Leibovic]

https://hg.mozilla.org/integration/fx-team/rev/c7457e8f1cce

Comment 14

[Wesley Johnston (:wesj)]

Attachment: ICS screenshot

These don't have quite as much padding as the mockups. You can force a KitKat phone to show them if you want to.

Also, I probably would have also removed the item for non_active/checked button states entirely rather than just making it draw with a transparent color. I don't really trust that Android optimizes out the extra work there (and its junk code we don't need anymore).

Comment 15

[:Margaret Leibovic]

(In reply to Wesley Johnston (:wesj) from comment #14)
> Created attachment 8439315 [details]
> ICS screenshot
> 
> These don't have quite as much padding as the mockups.

But do the mock-ups match the system toasts? I don't know that I like the extra padding just for button toasts :)

> You can force a
> KitKat phone to show them if you want to.

How do I do that?
 
> Also, I probably would have also removed the item for non_active/checked
> button states entirely rather than just making it draw with a transparent
> color. I don't really trust that Android optimizes out the extra work there
> (and its junk code we don't need anymore).

That wasn't working when I tried it. It appeared to me that you did need to keep the separate item. We could file a follow-up to try to optimize, though.

Comment 16

[Wesley Johnston (:wesj)]

(In reply to :Margaret Leibovic from comment #15)
> But do the mock-ups match the system toasts? I don't know that I like the
> extra padding just for button toasts :)

These don't match system toasts anymore. We've thrown away the dropshadow. There's a subtle gradient on the normal ones. etc. I'm not worried about trying to match native anymore. Just trying to match mockups, or at least come to a result that makes UX happy. Up to antlam if he likes this I guess...

> How do I do that?
Dump the drawables/styles into the kitkat folder, or delete the kitkat resources so that we'll use the more generic ones.

> That wasn't working when I tried it. It appeared to me that you did need to
> keep the separate item. We could file a follow-up to try to optimize, though.
Hmm... I tried this locally and it worked.

Comment 17

[:Margaret Leibovic]

(In reply to Wesley Johnston (:wesj) from comment #16)
> (In reply to :Margaret Leibovic from comment #15)
> > But do the mock-ups match the system toasts? I don't know that I like the
> > extra padding just for button toasts :)
> 
> These don't match system toasts anymore. We've thrown away the dropshadow.
> There's a subtle gradient on the normal ones. etc. I'm not worried about
> trying to match native anymore. Just trying to match mockups, or at least
> come to a result that makes UX happy. Up to antlam if he likes this I
> guess...

I don't care about matching directly, but I do think that part of the problem here was that these toasts were way too tall.

antlam and I didn't explicitly discuss the height for ICS styles, but he did say that he was fine with them being more similar to what we're doing for v19+ (such as the background colors).

> > How do I do that?
> Dump the drawables/styles into the kitkat folder, or delete the kitkat
> resources so that we'll use the more generic ones.

Oh, but that wouldn't change the style of the system toasts, which is what I wanted to compare to.

I tested this on a 2.3 phone, so I have seen what these styles look like on a device.

Comment 18

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

(In reply to :Margaret Leibovic from comment #17)
> (In reply to Wesley Johnston (:wesj) from comment #16)
> > (In reply to :Margaret Leibovic from comment #15)
> > > But do the mock-ups match the system toasts? I don't know that I like the
> > > extra padding just for button toasts :)
> > 
> > These don't match system toasts anymore. We've thrown away the dropshadow.
> > There's a subtle gradient on the normal ones. etc. I'm not worried about
> > trying to match native anymore. Just trying to match mockups, or at least
> > come to a result that makes UX happy. Up to antlam if he likes this I
> > guess...
> 
> I don't care about matching directly, but I do think that part of the
> problem here was that these toasts were way too tall.
> 
> antlam and I didn't explicitly discuss the height for ICS styles, but he did
> say that he was fine with them being more similar to what we're doing for
> v19+ (such as the background colors).

These toasts look fine to me. I'm not too worried about conforming completely from a visual standpoint because the experience of these toasts (where they appear, how they function, etc) translate pretty well.

From a usability standpoint, I can see these maybe being too short and hard to tap? But since this is the height of the native ones for >v19 then we should just keep it.

Comment 19

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/c7457e8f1cce