1163233 - Update design spec for about:logins list view

Status: RESOLVED INCOMPLETE

(Firefox for Android Graveyard :: Logins, Passwords and Form Fill, defect, P3)

Description

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

I think we currently reuse the "list" layout in some of our other about pages like about:addons so we should definitely clean up the specifics as I'm not sure where we are pulling the designs from either.

I can put up a spec or just clean up the CSS directly if we know exactly which style sheet we're referencing here. 

Ally? any ideas? bonus points if you get me the current specs :D We should try to clean this up for Q2.

Comment 1

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

Attachment: prev_pw_mock4.png

Attaching preview of the specifics. I've basically inherited from the UI we use to display webpages in list format in our Panels.

Specs to come

Comment 2

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

Attachment: spec_pw_aboutlist.png

This spec should be good. I tried to spec out all our favicon situations as well to see where we would use the "bounding box" of color and where we wouldn't. 

Since this is web based, it took me a while to (hopefully) get the math right.

Favicon situations we have:
 1) 32px x 32px (and above) - we simply use the favicon and pad it accordingly (24px all around)

 2) less than 32px x 32px - we apply the "bounding box", specifics in the image (sized at 32px x 32px)


 3) no favicon - we use the globe (light grey from tabs tray) set at 20px x 20px 

I hope this is useful. I'll likely want to spec out something very similar (just dp based) for our Android lists too (will file another bug of course)

Comment 3

[Barbara Bermes [:barbara] - NI please!]

I remember antlam, you showed me this bug as an improvement for v2, unless I'm mistaken, could you please clarify the status of this

Comment 4

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

Yes, ally mentioned this will have to be pushed to V2. It is also not blocking bug 1170786 (list of the "V1" bugs)

Comment 5

[Allison Naaktgeboren :ally]

Anthony, the css for the list is http://mxr.mozilla.org/mozilla-central/source/mobile/android/themes/core/aboutBase.css#46 . The list-item class is probably what you want to study carefully as that has most of the impact on the layout.

52 .list-item {
53   color: #363B40;
54   background-color: @color_about_item@;
55   border-bottom: 1px solid @color_about_item_border@;
56   position: relative;
57   list-style-type: none;
58   list-style-image: none;
59   margin: 0px;
60   padding: 0px;
61   min-height: calc(var(--icon-size) + var(--icon-margin) * 2);
62 }



It is also used in aboutAddons.xhtml and aboutDownloads.xhtml

Comment 6

[Sylvestre Ledru [:Sylvestre]]

Moving to p3 because no activity for at least 24 weeks.

Comment 7

[BMO Automation]

We have completed our launch of our new Firefox on Android. The development of the new versions use GitHub for issue tracking. If the bug report still reproduces in a current version of [Firefox on Android nightly](https://play.google.com/store/apps/details?id=org.mozilla.fenix) an issue can be reported at the [Fenix GitHub project](https://github.com/mozilla-mobile/fenix/). If you want to discuss your report please use [Mozilla's chat](https://wiki.mozilla.org/Matrix#Connect_to_Matrix) server https://chat.mozilla.org and join the [#fenix](https://chat.mozilla.org/#/room/#fenix:mozilla.org) channel.