840414 - Make Click-to-Play UI readable on more backgrounds

Status: RESOLVED WONTFIX

(Core Graveyard :: Plug-ins, defect, P3)

Description

[Stephen Horlander [:shorlander]]

Attachment: Make CTP UI readable on more backgrounds - 01

The updated CTP UI look meshes well with a variety of backgrounds. But after using it for a few days I still find there are a lot of sites where it doesn't quite look readable enough. There a few adjustments I think we can make so it is readable on almost all backgrounds:

- A few color value adjustments
- Updated icons with an outside light border for more contrast with the inside
- More opaque background behind the CTP text

The more obvious text background makes it a little more in your face, but not too much so. Certainly still not approaching the previous visually heavy appearance.

Here is a page I have been using to test this: http://people.mozilla.com/~shorlander/ctp-test/ctp-test.html

Comment 1

[Stephen Horlander [:shorlander]]

Attachment: CTP UI visual tweaks - 01

Comment 2

[Jared Wein [:jaws] (please needinfo? me)]

Comment on attachment 712805 [details] [diff] [review]
Make CTP UI readable on more backgrounds - 01

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

/toolkit/themes/winstripe/mozapps/plugins/pluginProblem.css will need to be updated too.

::: toolkit/themes/pinstripe/mozapps/plugins/pluginProblem.css
@@ +170,5 @@
> +
> +:-moz-handler-clicktoplay .msgClickToPlayBackground {
> +  padding: 1px 10px;
> +  background-color: hsla(0,0%,98%,.5);
> +  border-radius: 10px;

I like this, but if this line wraps then the first line will have a non-rounded end. This will only happen with smaller plugins and/or large translations of this text.

Two ways around it, neither of them great:
1) Force the text to not wrap
2) Make the text a block level element. Since you only want the background behind the text and not the full width of the plugin, you'd have to set the width of the block element to something like 50% or some fixed amount.

If you're fine with the aforementioned downside of the non-rounded edge on the first line, then we can keep it. There may also be something that we could do with the :first-line pseudo-element, but I haven't tested it.

Comment 3

[Jared Wein [:jaws] (please needinfo? me)]

Here is a screenshot of a small add that would show the text wrapped, http://screencast.com/t/Bl88nnmQw

Comment 4

[Larissa Co [:lco]]

The background looks good to me from a visual design perspective. I also think the more opaque background behind the text makes the "Activate" text seem more button-y, and thus more actionable. I think this is a good thing :) (though we might get folks who think that they have to click the text to activate the plugin)

I don't know if we decided to stick with "Activate <plugin name>" which might get long, or go more generic, but I think this is something we can discuss separately after the user test.

Comment 5

[Sylvestre Ledru [:Sylvestre]]

Moving to p3 because no activity for at least 1 year(s).
See https://github.com/mozilla/bug-handling/blob/master/policy/triage-bugzilla.md#how-do-you-triage for more information

Comment 6

[Sylvestre Ledru [:Sylvestre]]

Moving to p3 because no activity for at least 1 year(s).
See https://github.com/mozilla/bug-handling/blob/master/policy/triage-bugzilla.md#how-do-you-triage for more information

Comment 7

[BMO Automation]

Resolving as wont fix, plugin support deprecated in Firefox 85.