1187278 - Evaluate variants for setting tabContentStart padding on "Scrollable Tabs"

Status: RESOLVED FIXED

(Firefox for Android Graveyard :: Awesomescreen, defect)

Description

[Sebastian Kaspari (:sebastian; :pocmo)]

Attachment: tab_content_start_variations.png

There has been some discussion about the padding that has been added to the left-most tab when we switched to "scrollable tabs" (bug 1073053).

This has been added following the material design guidelines for scrollable tabs:
https://www.google.de/design/spec/components/tabs.html#tabs-types-of-tabs

In these guidelines for scrollable tabs (as opposed to fixed tabs) the left-most tab should align with the keyline, see:
https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsQ2l2R1lSU0hzZkE/components_tabs_usage_specs11.png

More on Material design and keylines here:
https://www.google.de/design/spec/layout/metrics-keylines.html

As we do not have anything else align with the keyline (for now) it takes some time getting used to this. In the guidelines the toolbar title is always aligned to this keyline as well - but we don't have anything like that.

I created some variations and attached an image showing them:

* Variation 1: That's how it's right now: 72dp padding from left to the start of the 'strip'.

* Variation 2: I think that's how it is actually meant in the guidelines: 72dp padding from left to the start of the tab title.

* Variation 3: No padding at all. Like 'Fixed tabs' in the guidelines.

* Variation 4: Aligning with top sites tiles, 12 dp.

Comment 1

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

I agree. Without some sort of title text there right now ("Page title" in the example above), it might make the most sense to pad it left aligned for now. 

If we go left align, I think the 12dp is nice as fixed tabs are butted right against the edge in Material. This 12dp gives us that separation, but also it aligns nicely with the current padding for our top sites tiles.

I'm ok with going for the 12dp for now :)

Comment 2

[Sebastian Kaspari (:sebastian; :pocmo)]

I agree, 12 dp is my favorite too. How do we want to proceed on tablets? Our top sites tiles are centered there and 12dp will not create this effect of alignment.

Comment 3

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

I think we should keep this scope within Mobile for now. Tablets are trickier and maybe something we should leave until we get some help from the Support Lib

Comment 4

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

^ Sorry I probably could've been clearer.

I mean to say, let's leave the padding as you have it already (aligned to the same vertical break as the text in the input bar).

Comment 5

[Sebastian Kaspari (:sebastian; :pocmo)]

Attachment: MozReview Request: Bug 1187278 - Adjust tabContentStart for "scrollable tabs" on phones. r?mhaigh

Bug 1187278 - Adjust tabContentStart for "scrollable tabs" on phones. r?mhaigh

Comment 6

[Martyn Haigh (:mhaigh)]

Comment on attachment 8639961 [details]
MozReview Request: Bug 1187278 - Adjust tabContentStart for "scrollable tabs" on phones. r?mhaigh

https://reviewboard.mozilla.org/r/14261/#review13051

Ship It!

Comment 7

[Sebastian Kaspari (:sebastian; :pocmo)]

url:        https://hg.mozilla.org/integration/fx-team/rev/be626b9af2fd4faae6d7be2d2f3790d9c73d8231
changeset:  be626b9af2fd4faae6d7be2d2f3790d9c73d8231
user:       Sebastian Kaspari <[e-mail]>
date:       Tue Jul 28 19:20:02 2015 +0200
description:
Bug 1187278 - Adjust tabContentStart for "scrollable tabs" on phones. r=mhaigh

Comment 8

[Carsten Book [:Tomcat]]

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