1253654 - Update section header UI in History panel

Status: RESOLVED FIXED

(Firefox for Android Graveyard :: General, defect)

Description

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

Attachment: prev_history_mock4.png

Currently used in the History panel, but given the abundance of UX work that might be happening in this panel. These need a lighter UI to help clear the clutter and establish a better visual hierarchy.

NOTE: mock for the section headers only, the rest of the UI is not a part of this bug.

Comment 1

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

Attachment: spec_devicefolder_label.png

Comment 2

[Chenxia Liu [:liuche]]

From antlam: the text color should be #BFBFBF (@color/disabled_grey) not #363B40.

Comment 3

[Chenxia Liu [:liuche]]

JanH, if you want to continue working on home panels, this is another bug that you could take a look at!

Comment 4

[Jan Henning [:JanH]]

I can take a look at it together with the other follow-up bugs.

Comment 5

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

(In reply to Jan Henning [:JanH] from comment #4)
> I can take a look at it together with the other follow-up bugs.

Awesome! thanks JanH!

Comment 6

[Jan Henning [:JanH]]

Attachment: Screenshot_2016-07-09-15-37-19.png

First attempt:
http://archive.mozilla.org/pub/mobile/try-builds/[e-mail]-1c147288a83675cd04de955bfa59907917e0e611/try-android-api-15/fennec-50.0a1.en-US.android-arm.apk

Comment 7

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

(In reply to Jan Henning [:JanH] from comment #6)
> Created attachment 8769435 [details]
> Screenshot_2016-07-09-15-37-19.png

Looking good! 

Is it possible to remove the divider underneath the label? I.e. inbetween "Yesterday" and the first item underneath it.

To double check, does this follow the type specs in comment 1?

Thanks JanH!

Comment 8

[Jan Henning [:JanH]]

Attachment: Screenshot_2016-07-12-20-12-05.png

(In reply to Anthony Lam (:antlam) from comment #7)
> Is it possible to remove the divider underneath the label? I.e. inbetween
> "Yesterday" and the first item underneath it.

I feel that the bottom padding/total height might be a bit too large now without the divider. But yes, it's possible.

http://archive.mozilla.org/pub/mobile/try-builds/[e-mail]-193130a3dd184fdc94461f4dd970afbd31fa33fb/try-android-api-15/fennec-50.0a1.en-US.android-arm.apk

Comment 9

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

(In reply to Jan Henning [:JanH] from comment #8)
> Created attachment 8770251 [details]
> Screenshot_2016-07-12-20-12-05.png
> 
> (In reply to Anthony Lam (:antlam) from comment #7)
> > Is it possible to remove the divider underneath the label? I.e. inbetween
> > "Yesterday" and the first item underneath it.
> 
> I feel that the bottom padding/total height might be a bit too large now
> without the divider. But yes, it's possible.
> 
> http://archive.mozilla.org/pub/mobile/try-builds/[e-mail]-
> 193130a3dd184fdc94461f4dd970afbd31fa33fb/try-android-api-15/fennec-50.0a1.en-
> US.android-arm.apk

This looks great! Thanks JanH! 

I don't think the "padding" is an issue. It's actually really helpful that it allows our eyes to just fall into the item and creates an obvious hierarchy for these sections. Especially when they're butted against each other like in your screenshot.

ship it! \o/

Comment 10

[Jan Henning [:JanH]]

Attachment: Bug 1253654 - Part 1 - Update home panels section header styling.

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

Comment 11

[Jan Henning [:JanH]]

Attachment: Bug 1253654 - Part 2 - Don't show the item divider in the history panel after a section header.

That way, the section headers (e.g. "Today", "Yesterday", "Last 7 days" etc.) blend better with the following item.

The correct hiding of the divider depends on the view type reported for the respective RecylerView child items. Because the view type is stored a simple number, this means that any other RecylerView wanting to use this divider decoration implementation must use the same item types as the history panel in order to remain compatible, otherwise the divider could be unexpectedly hidden. Therefore, we rename the DividerItemDecoration to underline its intended usage scope.

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

Comment 12

[Chenxia Liu [:liuche]]

Comment on attachment 8771052 [details]
Bug 1253654 - Part 1 - Update home panels section header styling.

https://reviewboard.mozilla.org/r/64304/#review61716

Comment 13

[Chenxia Liu [:liuche]]

Comment on attachment 8771053 [details]
Bug 1253654 - Part 2 - Don't show the item divider in the history panel after a section header.

https://reviewboard.mozilla.org/r/64306/#review61718

This looks great, thanks for picking up this bug :)

Comment 14

[Jan Henning [:JanH]]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=4e684f8ee1e5

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/fx-team/rev/1557fb4540f2
Part 1 - Update home panels section header styling. r=liuche
https://hg.mozilla.org/integration/fx-team/rev/23bdc280b66e
Part 2 - Don't show the item divider in the history panel after a section header. r=liuche

Comment 16

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/1557fb4540f2
https://hg.mozilla.org/mozilla-central/rev/23bdc280b66e