Closed Bug 988068 Opened 10 years ago Closed 10 years ago

Add-on options are ugly

Categories

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

ARM
Android
defect
Not set
normal

Tracking

(firefox30 verified, firefox31 verified)

VERIFIED FIXED
Firefox 31
Tracking Status
firefox30 --- verified
firefox31 --- verified

People

(Reporter: Margaret, Assigned: Margaret)

Details

Attachments

(4 files, 2 obsolete files)

Attached image 2014-03-25 23.17.29.png (obsolete) —
See the screenshot. The add-on manager is perpetually a low priority, but maybe there is something we can do here to make this look at least a little bit better.
What's our scope here? Polish what we have, or move this into Settings as per bug 891115?

Because yeah this is pretty butt ugly :P
I would vote to bite the bullet and do the real move, but I would guess thats a FF32 feature at best. If we think hub add-ons might want this, maybe its better to do some quick polish.
For quick polish, I was thinking refining the background/border colors, and maybe making a test add-on with all the different controls we support to see if we can polish those up a bit. I definitely wouldn't want a developer to spend very much time on this.

wesj, are you talking about completely re-writing the add-ons manager? I've been wanting to do that for a long time, but yeah, that will be a big project. However, looking at bug 892125, it seems like that might be something we're already aiming to do for 32. But if we are, somebody needs to start working on that soon, since I expect it will be difficult, especially if we support these add-on options.
ibarlow, if you spent 15 minutes making a mock-up of some polish tweaks (font/color/padding), I would love to implement them.

I just spent some time looking into our about:addons CSS, and there are like 10 different shades of gray, I feel like a simple pass to clean this up could make a big improvement.

Also, if we are just making some CSS tweaks, we could uplift this to Aurora, which would be really nice for Fx30. My world cup add-on uses these settings, and right now I'm kinda embarrassed to tell users to go use them.

I started playing around with this a little, but I still think it looks pretty terrible:
https://dl.dropboxusercontent.com/u/3358452/2014-04-15%2023.23.57.png

Let me know what ideas you have!
Assignee: nobody → margaret.leibovic
Flags: needinfo?(ibarlow)
Attached image mockup
Here is an initial pass that could help clean things up a bit. I'd still like to do a much deeper cleaning of our in content UI as a whole, but this should help make our add-ons options a little more approachable in the mean time.

Overall changes

* removed all of our weird "bevelled" line styles, and replaced them with a simple 1dp grey line
* moved the addon options up, so they now live right under the summary 
* changed spinner menu style to look more holo like
Flags: needinfo?(ibarlow)
Attached patch Improve about:addons styling (obsolete) — Splinter Review
I give up! I spent too much time on this already. This at least makes selects look better, which I want for my world cup add-on. I couldn't get menulists and selects to look the same, but if someone mixes and matches those, I don't know what they're doing.

I also couldn't figure out how to make the checkboxes look less blurry, since you can't inspect anonymous content, so it's mostly trial and error to fix these XBL things :/

This also makes spacing/text size of the regular add-on list look a bit better, and that also impacts similar pages like about:apps (scope creep, I know, but it's a small tweak and an improvment).
Attachment #8408623 - Flags: review?(mark.finkle)
Attached image before
Here's a before screenshot with my kitchen sink add-on.
Attachment #8396792 - Attachment is obsolete: true
Attached image after
And after. Not perfect, but let's keep this before/after comparison in mind :)
Comment on attachment 8408623 [details] [diff] [review]
Improve about:addons styling

>diff --git a/mobile/android/chrome/content/aboutAddons.js b/mobile/android/chrome/content/aboutAddons.js
>diff --git a/mobile/android/themes/core/aboutAddons.css b/mobile/android/themes/core/aboutAddons.css

> .checkbox-check {
>   background: url("chrome://browser/skin/images/checkbox_unchecked.png") no-repeat 50% 50%;
>   border: 0 transparent;
>-  width: 2.6em;
>-  height: 2.6em;
>+  height: 48px;
>+  width: 48px;

Did you test this on different DPI phones/tablets?

>diff --git a/mobile/android/themes/core/aboutBase.css b/mobile/android/themes/core/aboutBase.css

> html {
>   font-family: Roboto,"Droid Sans",helvetica,arial,clean,sans-serif;

I wonder if we should file a bug to add Clear Sans or Open Sans as the first font

>-  font-size: 12px;
>-  background-color: #ced7de;
>+  font-size: 14px;

> .title {
>-  font-size: 1.2em;

> #browse-title {
>-  margin-top: 1em;
>+  margin: 0.5em 0;

Are these changes affecting any other about pages? If so, did you test that nothing looks whack on those too?

r+ but look into the questions
Attachment #8408623 - Flags: review?(mark.finkle) → review+
(In reply to Mark Finkle (:mfinkle) from comment #9)
> Comment on attachment 8408623 [details] [diff] [review]
> Improve about:addons styling
> 
> >diff --git a/mobile/android/chrome/content/aboutAddons.js b/mobile/android/chrome/content/aboutAddons.js
> >diff --git a/mobile/android/themes/core/aboutAddons.css b/mobile/android/themes/core/aboutAddons.css
> 
> > .checkbox-check {
> >   background: url("chrome://browser/skin/images/checkbox_unchecked.png") no-repeat 50% 50%;
> >   border: 0 transparent;
> >-  width: 2.6em;
> >-  height: 2.6em;
> >+  height: 48px;
> >+  width: 48px;
> 
> Did you test this on different DPI phones/tablets?

We only include one set of images, and those images are 48x48, so it seems like this was broken. However, testing on a screen with a smaller resolution made me realize that the textbox/menulist options can get too squished trying to put the control and label all on one line, so I'm going to update my patch to put those back on separate lines like they were before.

> >diff --git a/mobile/android/themes/core/aboutBase.css b/mobile/android/themes/core/aboutBase.css
> 
> > html {
> >   font-family: Roboto,"Droid Sans",helvetica,arial,clean,sans-serif;
> 
> I wonder if we should file a bug to add Clear Sans or Open Sans as the first
> font

I'll ask ibarlow.

> >-  font-size: 12px;
> >-  background-color: #ced7de;
> >+  font-size: 14px;
> 
> > .title {
> >-  font-size: 1.2em;
> 
> > #browse-title {
> >-  margin-top: 1em;
> >+  margin: 0.5em 0;
> 
> Are these changes affecting any other about pages? If so, did you test that
> nothing looks whack on those too?

Yes, this affects about:apps and about:downloads. I did check them out, and they look better with these chnages as well.
https://hg.mozilla.org/integration/fx-team/rev/a00af396554a

This looks good on Nexus 4/7/S.

Also updated my test add-on to show some setting descriptions as well: http://people.mozilla.org/~mleibovic/optionskitchensink.xpi
https://hg.mozilla.org/mozilla-central/rev/a00af396554a
Status: NEW → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 31
[Approval Request Comment]
Bug caused by (feature/regressing bug #): not a regression, but we want to feature add-ons in fx30, so it would be good to have this fix ready for that
User impact if declined: add-on options are ugly
Testing completed (on m-c, etc.): landed on m-c 4/21, tested locally on multiple devices
Risk to taking this patch (and alternatives if risky): low-risk, CSS polish for about:addons 
String or IDL/UUID changes made by this patch: none
Attachment #8408623 - Attachment is obsolete: true
Attachment #8410399 - Flags: approval-mozilla-aurora?
Attachment #8410399 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
Verified as fixed in builds:
- 30 beta 1;
- 31.0a2 (2014-04-29);
Device: Asus Transformer Tab (Android 4.0.3).
Status: RESOLVED → VERIFIED
Product: Firefox for Android → Firefox for Android Graveyard
You need to log in before you can comment on or make changes to this bug.