626201 - re-style (camino-ify) the missing/blocked/disabled plug-ins UI

Status: RESOLVED FIXED

(Camino Graveyard :: General, defect)

Description

[philippe (part-time)]

[2:38pm] phiw: those icons are actually not bad
[2:38pm] phiw: except pluginCrashed.png
[2:46pm] sauron: the grey, especially the stripes, is a bit overwhelming
[2:47pm] phiw: you prefer a more flat color ?
[2:48pm] sauron: yes
[2:49pm] phiw: grey seems a fitting color though
[2:49pm] sauron: and/or something less Stalinist drab
...
[3:06pm] phiw: a darkish grey background and icons with a pinch of color and a bit more 3D
[3:07pm] phiw: would that fit ?
[3:07pm] sauron: sounds OK
[3:08pm] phiw: I'll play with it. Do you have a deadline somewhere ?
[3:08pm] sauron: no

Comment 1

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

I think the blocked plug-in should definitely use the red/white badge that we use elsewhere.

In that vein, missing should use the green download arrow (or, perhaps, the OS help (?) purple globe, in that we're not actually running PFS and downloading/installing plug-ins like Firefox is when users click there, and instead offering them help for a missing plug-in).

For disabled, the stop/cancel metaphor?  I worry that's too close to blocked, though.  (Frankly, the difference between X and (-) in the default UI leaves something to be desired; blocked? broken? disabled?)  Or maybe something that's easily recognizable as on/off?  Like the light-switch (General prefPane), except I'm not sure that shrinks well enough to this size.

Comment 2

[Stuart Morgan]

> I think the blocked plug-in should definitely use the red/white badge that we
> use elsewhere.

I actually disagree; I feel like that is associated with user-controlled privacy for us, and we are using blocking for hard-coded compat enforcement. I'd say for what we are doing a grey circle-with-slash over the plugin icon would be more appropriate.

Comment 3

[Stuart Morgan]

I guess I'm thinking of "this plugin is broken", the same way a really horked app in the Finder is badged to show it won't launch.

Comment 4

[philippe (part-time)]

For blocked plugins, I was indeed thinking about using the circle-with-slash image as Stuart suggest. I'm not sure yet about the (user-) disabled icon; a cross-mark is the closest one I could think about.

While checking this in Firefox 3.6 I noticed that for main plugins, the disabled UI didn't show up and instead the site/plugin showed an image-link to download the plugin (QuickTime on Apple's site, Silverlight on the MS site).

For the missing plugin, I am leaning towards a question mark a this time given that clicking on the icon or link on't initiate a download.

On a related note - when massaging the the stylesheets, I'll remove the cursor: pointer that appears over the whole UI - only the text link is currently triggering a user action as far as I can tell…

Comment 5

[philippe (part-time)]

Attachment: screenshot - proposed icons

Clockwise from top-left: disabled / missing / blocked / blocked-with-some-color

(Smokey seems to prefer blocked-with-some-color - I'd rather go with white)

Simulation more or less (although always the same string):
http://dev.l-c-n.com/camino/pluginUI/t4.html

Comment 6

[Stuart Morgan]

Comment on attachment 507051 [details]
screenshot - proposed icons

I like these, with a slight preference for the white block indicator over the red one.

Just to see what it looks like, could you do one without the transparency in the block indicator, with the top, right, and lower-left bits drawn on top? (Keeping the sizes the same).

Comment 7

[philippe (part-time)]

Attachment: patch

This forks the 2 relevant stylesheets (pluginProblemContent.css and pluginProblemLorentz.css), and registers all the necessary files in geckochrome/jar.mm

I didn't fork the empty pluginProblem.css which we don't use. I'd argue that the link to that stylesheet should be removed from pluginProblem.xml – I didn't do it in this patch as to not cause problems for bug 626477.

changes from the toolkit css files:
* removed cursor: pointer for the missing plugin ui (commented out in pluginProblemContent.css)
* changed background of the box to a flat grey
* made the inset effect slightly less pronounced
* made the shadow under the text less blurred (less glow) / increased contrast with background
* changed the size of the images / icon holder-box (leaving more space for the text in smaller plugin boxes


Simulation:
http://dev.l-c-n.com/camino/pluginUI/t_f.html

screenshots:
* flash - missing - from: http://www.adobe.com/software/flash/about/
http://dev.l-c-n.com/camino/pluginUI/flash.png
* java - from http://browserspy.dk/java.php
http://dev.l-c-n.com/camino/pluginUI/java.png

Comment 8

[philippe (part-time)]

Attachment: the icons

screenshot ( Preview, with the same background as used in the html / patch):
http://dev.l-c-n.com/camino/pluginUI/plugin-ui.png

Comment 9

[philippe (part-time)]

Attachment: alternate icons

For consideration, icons further optimised with pngOUT
These are converted to grayscale files by pngOUT
The files are roughly 35% smaller.

screenshot alt. icons:
http://dev.l-c-n.com/camino/pluginUI/plugin-ui_alt.png

Comment 10

[philippe (part-time)]

Attachment: changes to the css files

For easier review, the changes to the css files, as a diff

Comment 11

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

Comment on attachment 510512 [details] [diff] [review]
patch

>diff --git a/geckochrome/content/mozapps/plugins/pluginProblemLorentz.css b/geckochrome/content/mozapps/plugins/pluginProblemLorentz.css

>+.mainBox {
[...]
>+    -moz-user-select: none;
>+}

As long as this is not one giant clickable mess (which is why, I assume, biesi added this to begin with), I'd rather this at least be "text".  Stuff that looks like text should be selectable :P

>diff --git a/geckochrome/jar.mn b/geckochrome/jar.mn
>--- a/geckochrome/jar.mn
>+++ b/geckochrome/jar.mn
>@@ -13,16 +13,21 @@ toolkit.jar:
> # Uh, yeah.  In Gecko 2, this can move to classic.jar, though; see bug 520364.
> +  content/global/aboutMemory.css                          (skin/classic/global/aboutMemory.css)
> # Stop shipping the useless comm.jar.  This can be removed in Gecko 2, which does the same thing.
> %  content xbl-marquee %content/xbl-marquee/ xpcnativewrappers=yes
>    content/xbl-marquee/xbl-marquee.xml                     (/layout/style/xbl-marquee/xbl-marquee.xml)
>    content/xbl-marquee/xbl-marquee.css                     (/layout/style/xbl-marquee/xbl-marquee.css)
> # Plug-ins UI
> +  content/mozapps/plugins/pluginProblem.xml               (content/mozapps/plugins/pluginProblem.xml)
>++  content/mozapps/plugins/pluginProblemContent.css        (content/mozapps/plugins/pluginProblemContent.css)
>++  content/mozapps/plugins/pluginProblemLorentz.css        (content/mozapps/plugins/pluginProblemLorentz.css)
>++  content/mozapps/plugins/pluginBlocked.png               (content/mozapps/plugins/pluginBlocked.png)
>++  content/mozapps/plugins/pluginDisabled.png              (content/mozapps/plugins/pluginDisabled.png)
>++  content/mozapps/plugins/pluginDownload.png              (content/mozapps/plugins/pluginDownload.png)

Add a note for the Plug-ins UI section that references the changes in Gecko 2 (see http://mxr.mozilla.org/mozilla1.9.2/source/toolkit/themes/pinstripe/mozapps/plugins/pluginProblem.css?force=1) (we'd have to update the XBL for new URLs, but we'd probably have to update the XBL anyway).

r=ardissone with those changes.

Comment 12

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

Comment on attachment 510514 [details]
alternate icons

These are identical to my eyes, so we may as well use the smaller byte-sized ones.  (I still don't like the lack of color, but Stuart does, so oh well…)

Comment 13

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

Comment on attachment 510513 [details]
the icons

These are fine, but per comment 12 let's use the other ones.

Comment 14

[philippe (part-time)]

Attachment: patch - v2

Updated patch incorporating Smokey's review comments.

Comment 15

[Stuart Morgan]

Comment on attachment 511664 [details] [diff] [review]
patch - v2

sr=smorgan

Comment 16

[Stuart Morgan]

Comment on attachment 510514 [details]
alternate icons

sr=smorgan

I'm not 100% convinced I like my suggestion (the puzzle on top of the block circle) now that I see it, but I think it's probably time we just paint the bikeshed :)

Comment 17

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

The bikeshed has been painted: http://hg.mozilla.org/camino/rev/ecc9b7d46248