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)
Tracking
(firefox30 verified, firefox31 verified)
VERIFIED
FIXED
Firefox 31
People
(Reporter: Margaret, Assigned: Margaret)
Details
Attachments
(4 files, 2 obsolete files)
72.66 KB,
image/png
|
Details | |
64.81 KB,
image/png
|
Details | |
76.29 KB,
image/png
|
Details | |
14.22 KB,
patch
|
lsblakk
:
approval-mozilla-aurora+
|
Details | Diff | Splinter Review |
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.
Comment 1•10 years ago
|
||
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
Comment 2•10 years ago
|
||
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.
Assignee | ||
Comment 3•10 years ago
|
||
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.
Assignee | ||
Comment 4•10 years ago
|
||
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)
Comment 5•10 years ago
|
||
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)
Assignee | ||
Comment 6•10 years ago
|
||
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)
Assignee | ||
Comment 7•10 years ago
|
||
Here's a before screenshot with my kitchen sink add-on.
Attachment #8396792 -
Attachment is obsolete: true
Assignee | ||
Comment 8•10 years ago
|
||
And after. Not perfect, but let's keep this before/after comparison in mind :)
Comment 9•10 years ago
|
||
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+
Assignee | ||
Comment 10•10 years ago
|
||
(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.
Assignee | ||
Comment 11•10 years ago
|
||
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
Comment 12•10 years ago
|
||
https://hg.mozilla.org/mozilla-central/rev/a00af396554a
Status: NEW → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 31
Assignee | ||
Comment 13•10 years ago
|
||
[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?
Updated•10 years ago
|
Attachment #8410399 -
Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
Assignee | ||
Comment 14•10 years ago
|
||
https://hg.mozilla.org/releases/mozilla-aurora/rev/283b42b59b7f
status-firefox30:
--- → fixed
status-firefox31:
--- → fixed
Comment 15•10 years ago
|
||
Verified as fixed in builds: - 30 beta 1; - 31.0a2 (2014-04-29); Device: Asus Transformer Tab (Android 4.0.3).
Updated•3 years ago
|
Product: Firefox for Android → Firefox for Android Graveyard
You need to log in
before you can comment on or make changes to this bug.
Description
•