Closed Bug 1075219 Opened 10 years ago Closed 10 years ago

Update the colors of about pages styled from aboutBase.css

Categories

(Firefox for Android Graveyard :: Add-on Manager, defect)

35 Branch
All
Android
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED
Firefox 35

People

(Reporter: Margaret, Assigned: Margaret)

References

Details

Attachments

(5 files, 1 obsolete file)

The add-on manager uses some old ugly grays, let's update it to match the new toolbar.

If we do something really minimal here, we could probably try to uplift it to go with the new toolbar. I'm thinking something as simple as updating only color values would be a win.

The one complication is that multiple pages use the same shared styles in aboutBase.css, but maybe they can all get a color refresh together.

For reference, here are the style sheets we're using now:
http://mxr.mozilla.org/mozilla-central/source/mobile/android/themes/core/aboutBase.css
http://mxr.mozilla.org/mozilla-central/source/mobile/android/themes/core/aboutAddons.css

The other pages that use aboutBase are:
* about:downloads
* about:apps
* about:devices (I don't think this has ever gotten style love, and I'm unsure whether or not it's intended to be advertised to users)
Flags: needinfo?(alam)
Thanks for filing this!

I've noticed this but mainly been neglecting it cause I know many pages share the same style sheet.

But, now that I've got more of the palette figured out and the toolbar is updated. I think I can take a crack at this. 

Leaving NI on so I can get to this this week.
^Also, I think Nalexander mentioned that the About:devices page was not meant to be user-facing but we might as well take a first pass at it too I think.
Attached image prev_colorupdate1.png
Attaching a quick WIP that stays in the scope of this bug (just updating the colors).

I've taken these from the Sync Panel design (bug 1064304) and the Menu bg color updates (bug 1055536).

Header: #F5F5F5
li: #FFFFFF
dividers in between: #D7D9DB

File name: #363B40
file details: #BFBFBF
Flags: needinfo?(alam)
^ Just noticed the font family in the style sheet. Could we use Roboto for these too?
Flags: needinfo?(margaret.leibovic)
(In reply to Anthony Lam (:antlam) from comment #4)
> ^ Just noticed the font family in the style sheet. Could we use Roboto for
> these too?

It looks like we used to do that, but we changed that in bug 999069.

No matter what we do, we should be consistent and have a policy around what fonts we're using. I would say we should move this font issue into a different bug if we want to change things.
Assignee: nobody → margaret.leibovic
Flags: needinfo?(margaret.leibovic) → needinfo?(alam)
Yeah - it looks like that came from our conversations after Project Chameleon. At the time, these pages were identified as a "quick win" for branding that wasn't going to break a lot of the UI. 

That's fine, let's just stay in the scope of this and update colors. :)
Flags: needinfo?(alam)
Summary: Update the colors of about:addons → Update the colors of about pages styled from aboutBase.css
Attached patch Update the colors of about pages (obsolete) — Splinter Review
I tried to keep this as minimal as possible, but I couldn't resist some CSS cleanup. I also found a regression in the button style I introduced when cleaning up the options styles :/ I really want to get rid of that XUL stuff.

Asking for feedback for now, since I want antlam to answer a few questions:

* What color do we want for private downloads?
* What should the active color be when these things are tapped?

Here's a build, but I'll also attach some screenshots:
http://people.mozilla.org/~mleibovic/colors.apk
Attachment #8499544 - Flags: feedback?(wjohnston)
Attached image about:addons
Attached image about:downloads
Attached image about:apps
(I filed bug 1077407 about getting rid of the extra marketplace link.)
Oops, forgot to NI antlam here for some feedback. I'm thinking for the active color we could just take the active color we use for about:home lists.

I really want to land this patch and see if we can uplift it to aurora before the merge, since it's low-risk and a really nice improvement.
Flags: needinfo?(alam)
Here's an APK to test:
http://people.mozilla.org/~mleibovic/colors.apk

wesj and bnicholson, you can compete to review this :)
Attachment #8500624 - Flags: review?(wjohnston)
Attachment #8500624 - Flags: review?(bnicholson)
Attachment #8500624 - Flags: feedback?(randersen)
I think it looks great, carry on! I'll leave antlam's NI on in case he wants to chime in when he returns, but I would say go for it.
Attachment #8499544 - Attachment is obsolete: true
Attachment #8499544 - Flags: feedback?(wjohnston)
(In reply to :Margaret Leibovic from comment #11)
> Oops, forgot to NI antlam here for some feedback. I'm thinking for the
> active color we could just take the active color we use for about:home lists.

Good idea. 

Btw, is this currently the dark grey I'm seeing in comment 9? or is that only when the download is "downloading"?
Flags: needinfo?(alam)
(In reply to Anthony Lam (:antlam) from comment #14)
> (In reply to :Margaret Leibovic from comment #11)
> > Oops, forgot to NI antlam here for some feedback. I'm thinking for the
> > active color we could just take the active color we use for about:home lists.
> 
> Good idea. 
> 
> Btw, is this currently the dark grey I'm seeing in comment 9? or is that
> only when the download is "downloading"?

The dark grey is from a download initiated while in Private Browsing mode.
Blocks: 905192
Blocks: 1053397
Comment on attachment 8500624 [details] [diff] [review]
Update the colors of about pages

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

::: mobile/android/themes/core/aboutBase.css
@@ +55,5 @@
>    list-style-type: none;
>    list-style-image: none;
>    margin: 0px;
>    padding: 0px;
> +  min-height: 4.5em;  /* .icon height + .icon top * 2 */

Rather than a comment explaining where this result came from, can you factor these values into vars and use calc()?

@@ +70,3 @@
>  .inner {
> +  /* .icon margin (1.35 * 2) + .icon width (1.8em) - .inner padding (1em) */
> +  -moz-margin-start: 3.5em;

Same question here.
Attachment #8500624 - Flags: review?(bnicholson) → review+
(In reply to Brian Nicholson (:bnicholson) from comment #16)

> ::: mobile/android/themes/core/aboutBase.css
> @@ +55,5 @@
> >    list-style-type: none;
> >    list-style-image: none;
> >    margin: 0px;
> >    padding: 0px;
> > +  min-height: 4.5em;  /* .icon height + .icon top * 2 */
> 
> Rather than a comment explaining where this result came from, can you factor
> these values into vars and use calc()?

I always forget about new fancy CSS. Updated!

https://hg.mozilla.org/integration/fx-team/rev/e85576df8227
Attachment #8500624 - Flags: review?(wjohnston)
Attachment #8500624 - Flags: feedback?(randersen)
I didn't realize calc() was un-prefixed now. Here's a follow-up push to fix that:
https://hg.mozilla.org/integration/fx-team/rev/1b31dbd88b6a
https://hg.mozilla.org/mozilla-central/rev/e85576df8227
https://hg.mozilla.org/mozilla-central/rev/1b31dbd88b6a
Status: NEW → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 35
Product: Firefox for Android → Firefox for Android Graveyard
You need to log in before you can comment on or make changes to this bug.