528280 - Create PluginCheck web badge

Status: RESOLVED FIXED

(www.mozilla.org :: General, defect)

Description

[Austin King [:ozten]]

Create a Firefox only web badge.
We will get 3 images
- unknown (loading)
- outdated
- current

Their will be an HTML snippet like:
<a href="https://www.mozilla.com/en-US/plugincheck/"><a href="https://www.mozilla.com/img/tignish/plugincheck/unknown_plugincheck_badge.png" /></a>
<script src="https://www.mozilla.com/js/affiliate/plugincheck_badge.js" />

Behavior:
On Firefox:
1) unknown image and link is displayed
2) Perfidies analyzes plugins
3) If an out of date or worse plugin is detected
3.1) Perfidies is stopped
3.2) badge image is switched to outdated
4) or if all plugins are current or unknown
4.1) badge image is switched to current

Other Browsers:
1) unknown image and link is displayed
2) Perfidies is not used

Rewrite Rule:
the affiliate part of the url will be pulled out and added as a query string param. param name TBD.

Hosting: 
Details TBD, this badge will be hosted on the plugincheck page initially.

Comment 1

[Laura Mesa [:lmesa] [:lvmesa]]

Attachment: Default Image

Comment 2

[Laura Mesa [:lmesa] [:lvmesa]]

Attachment: Safe Image

Comment 3

[Laura Mesa [:lmesa] [:lvmesa]]

Attachment: Update Image

Comment 4

[Laura Mesa [:lmesa] [:lvmesa]]

Need anything else from me here?

Comment 5

[Austin King [:ozten]]

(In reply to comment #4)
So far, I think we're good.

I have it functioning, but it needs more work. Check it out:
http://ozten.com/psto/2009/11/18/meritmail-free-snail-mail-for-changing-the-world/

It's 98k so I need to do more work to get the file size down.
I need to do some cross-browser testing (for errors or weirdness)

We still need to integrate the snippet into mozilla.com's plugincheck page.

Comment 6

[Austin King [:ozten]]

Got the file size down and reorganized the code a bit.

Also updated www-trunk plugincheck page with a blurb to promote the badge.

@morgamic have a look http://www-trunk.stage.mozilla.com/en-US/plugincheck/ and feel free to change it, I know you wanted to do this portion of the task.

Comment 7

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

Looking really good; a couple comments:

English major uber-nit alert!  "JavaScript powered badge" should be "JavaScript-powered badge".

Isn't the include from http://www-trunk.stage.mozilla.com/en-US/plugincheck/:

<a href="https://www-trunk.stage.mozilla.com/en-US/plugincheck/"><img id="mozilla_plugin_checker_badge" src="https://www-trunk.stage.mozilla.com/img/tignish/plugincheck/webbadge/loading.png" width="180" height="150" alt="We can check your plugins and stuff" border="0" /></a>

missing the JS file?

Your include:

<div class="textwidget"><a href="http://www.mozilla.com/en-US/plugincheck/"><img id="mozilla_plugin_checker_badge" src="http://www-trunk.stage.mozilla.com/img/tignish/plugincheck/webbadge/loading.png" width="180" height="150" alt="We can check your plugins and stuff" border="0" /></a>
<script type="text/javascript" src="http://www-trunk.stage.mozilla.com/js/plugincheck_badge.js"></script>

Comment 8

[Laura Mesa [:lmesa] [:lvmesa]]

Attachment: Other button sizes!

Comment 9

[Michael Morgan [:morgamic]]

I think we should launch this early next week, too late to do it today.

Comment 10

[Austin King [:ozten]]

(In reply to comment #7)
Added <script> tag into snippet.

Moved below the screenshot.

Changed code to use prod images so now code changes once it's tested.

r56706. on www-trunk.

Comment 11

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

Do we want the include code for all the various sizes?  Only the 180x150 button-include code is on http://www-trunk.stage.mozilla.com/en-US/plugincheck/.

Comment 12

[Austin King [:ozten]]

(In reply to comment #11)
Does someone want to take a stab at the page layout with the various sizes incorporated and then I can wire it all up.

Comment 13

[Laura Mesa [:lmesa] [:lvmesa]]

I love the look of the page so far, and the copy looks really good--for the buttons, can we do some a layout with the two smaller buttons on top and the larger one on the bottom...?
  -----1---------2-----
  ---------3-----------

Comment 14

[Wil Clouser [:clouserw]]

HAY GUYS WHATS GOING ON IN HERE?

Comment 15

[Laura Mesa [:lmesa] [:lvmesa]]

Austin,  can you make the formatting changes?

Once we have that we're ready to go live.

Thanks!

Comment 16

[Giuliano Masseroni [:jooliaan]]

Please let me know when it is time to localize the badges.

Thank you! :)

Comment 17

[Michael Morgan [:morgamic]]

I can add the sizes.

Comment 18

[Michael Morgan [:morgamic]]

I wonder if we should not use images for text...

Comment 19

[Michael Morgan [:morgamic]]

So, should be possible to use the background images for the boxes and overlay the text, but that'd obviously take more time.  Should we do that first then launch, or do en-US first?  What do you guys think?

Comment 20

[Laura Mesa [:lmesa] [:lvmesa]]

I'm open to either...

Although I told Beltzner last week that this would probably launch this week...

Comment 21

[Austin King [:ozten]]

(In reply to comment #18)
This will increase the size and complexity of the badge snippet, since this would be a div, text, and css in the snippet.

Comment 22

[Austin King [:ozten]]

Prepared images for L10n. 3 sizes now live at:

plugincheck/wb/en-US/728_90/upyourplug.png
plugincheck/wb/en-US/728_90/loading.png
plugincheck/wb/en-US/728_90/safe.png

plugincheck/wb/en-US/300_250/upyourplug.png
plugincheck/wb/en-US/300_250/loading.png
plugincheck/wb/en-US/300_250/safe.png

plugincheck/wb/en-US/180_150/upyourplug.png
plugincheck/wb/en-US/180_150/loading.png
plugincheck/wb/en-US/180_150/safe.png

Created display_badge function which uses $lang and takes a $size for displaying the badge(s). The web badge JavaScript externalizes the image paths, so we can do locale specific web badges, including 0 or more badges by editing the $locale/plugincheck/index.html page.