440811 - Theme browser doesn't show compatible themes

Status: VERIFIED FIXED

(addons.mozilla.org Graveyard :: Public Pages, defect, P3)

Description

[Basil Hashem [:baz]]

The current theme browser doesn't filter or show themes compatible with your version (or OS platform) unlike other listing views on the site.

This view shows no "install" button, and therefore no indication whether the available version is compatible.

To check compatibility the user must click through to each theme's page for
every available theme individually. Ugh.

Comment 1

[Basil Hashem [:baz]]

See also bug 440226

Comment 2

[Stephen Donner [:stephend] Not actively reading bugmail]

wenzel suggested graying-out the incompatible themes, rather than outright removing them from the view -- thoughts?

Comment 3

[Alfred Kayser]

My preference would be to add a checkbox to enable listing of compatible themes only (so to get the real top-10 themes for my current browser).

Comment 4

[Stephen Donner [:stephend] Not actively reading bugmail]

Yeah, that might work better, since iirc Fred said doing the compat check will be a bit of a perf hit.

Comment 5

[Dave Garrett]

(In reply to comment #3)
> My preference would be to add a checkbox to enable listing of compatible themes
> only (so to get the real top-10 themes for my current browser).

See also bug 437496

Comment 6

[Fred Wenzel [:wenzel]]

osunick: Do we have any UI for this?

Comment 7

[Fred Wenzel [:wenzel]]

I could implement some JS+CSS according to comment 2, if you like.

Comment 8

[Alfred Kayser]

Please do! Thanks in advance, Alfred

Comment 9

[Fred Wenzel [:wenzel]]

Attachment: Screenshot

This is what I have so far. Is this too subtle?

Comment 10

[Fred Wenzel [:wenzel]]

Attachment: Patch, rev. 1

This adds 30% transparency to incompatible add-ons in the list.

I also filed a followup bug to add an overlay to these add-ons that allows users to figure out what version range the add-on *is* compatible with, and also makes it easier to realize what translucency means in this context.

For now though, I think this is a good solution, as people who care can look at it, all others can choose to ignore it.

Comment 11

[Wil Clouser [:clouserw]]

It's an interesting idea - I'm not sure how accessible it is, but I'd be willing to try it in this case.  If an add-on is greyed out (and particularly if there is an overlay when I mouse over it) I would expect to not be able to click on it and see the detail page though.  However, without the overlay I think this is too subtle to notice.

Comment 12

[Fred Wenzel [:wenzel]]

Not sure if I'd disable the link altogether. That might upset people who want to inform themselves about the add-on in spite of their current browser not supporting it.

Also, do I interpret your comment correctly as, you want to r- it, not because the code isn't good, but because you don't think this should be deployed *without* the overlay at first?

Comment 13

[Wil Clouser [:clouserw]]

I'm just fishing for more ideas, but yeah, I think the overlay is necessary.

Comment 14

[Nick Nguyen [:osunick]]

I agree with Wil- we need an overlay.

Comment 15

[Fred Wenzel [:wenzel]]

Over to Neil then for mockup / sketch / playdoh model.

Comment 17

[Neil Lee [:neilio]]

Attachment: Compatible themes bar

Here's the mockup we chatted about in IRC, with stephend's text in it.

Hex colour for the bar is #b5d9e5. Unless we really need to make this look identical in IE I think we should just use CSS rounded corners, but that's just my 2 cents. :)

If you need graphics let me know.

Comment 18

[Fred Wenzel [:wenzel]]

(In reply to comment #17)
> Here's the mockup we chatted about in IRC, with stephend's text in it.

I thought this is for the followup bug. This bug adds an overlay, no?

Comment 19

[Neil Lee [:neilio]]

Attachment: Overlay graphic

Sorry, I got confused. Here's the overlay graphic (made larger in case you need to do sliding doors with it for text/l10n expansion) and the mockup is here:

http://snaps.beatnikpad.com/icompatible-themes-overlay-20090814-153622.png

Comment 20

[Dave Garrett]

(In reply to comment #19)
> http://snaps.beatnikpad.com/icompatible-themes-overlay-20090814-153622.png

From comment 10 / bug 510192, this should also state the compatibility range, not just the fact that it's incompatible.

Comment 21

[Fred Wenzel [:wenzel]]

Attachment: Patch, rev. 2

This patch adds an overlay on top of the "faded" list item.

Comment 22

[Fred Wenzel [:wenzel]]

Attachment: Fix Screenshot

A screenshot of the fix.

Comment 23

[Wil Clouser [:clouserw]]

Comment on attachment 394823 [details] [diff] [review]
Patch, rev. 2

This is looking good.  I don't like how long the notice stays on the screen when I move my mouse away, but I guess that's just my preference.

Comment 24

[Fred Wenzel [:wenzel]]

I made it faster. That didn't work for me yesterday, but I was probably doing something wrong.

In r49393 and r49394.

Comment 25

[Stephen Donner [:stephend] Not actively reading bugmail]

Tested using:

* Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.8.1.20) Gecko/20081217 Firefox/2.0.0.20
* Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.0.13) Gecko/2009073022 Firefox/3.0.13
* Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2
* Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.2a2pre) Gecko/20090820 Namoroka/3.6a2pre
* IE 7, Safari 4, Opera 9.64 (just to double-check for layout/style regressions)

mozwebqa: I could use sanity-checking here, thanks :-)

Comment 26

[Stephen Donner [:stephend] Not actively reading bugmail]

Pretty confident this is fine -- verified FIXED.