Create PluginCheck web badge

RESOLVED FIXED

Status

RESOLVED FIXED
9 years ago
6 years ago

People

(Reporter: ozten, Assigned: ozten)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(4 attachments)

(Assignee)

Description

9 years ago
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.
OS: Mac OS X → All
Hardware: x86 → All
Need anything else from me here?
(Assignee)

Comment 5

9 years ago
(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.
(Assignee)

Comment 6

9 years ago
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.
Assignee: nobody → ozten.bugs
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>
Created attachment 413724 [details]
Other button sizes!
I think we should launch this early next week, too late to do it today.
(Assignee)

Comment 10

9 years ago
(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.
Status: NEW → RESOLVED
Last Resolved: 9 years ago
Resolution: --- → FIXED
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/.
(Assignee)

Comment 12

9 years ago
(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.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
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-----------
HAY GUYS WHATS GOING ON IN HERE?
Austin,  can you make the formatting changes?

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

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

Thank you! :)
I can add the sizes.
I wonder if we should not use images for text...
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?
I'm open to either...

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

Comment 21

9 years ago
(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.
(Assignee)

Comment 22

9 years ago
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.
Status: REOPENED → RESOLVED
Last Resolved: 9 years ago9 years ago
Resolution: --- → FIXED
Component: www.mozilla.org/firefox → www.mozilla.org
Product: Websites → Websites
Component: www.mozilla.org → General
Product: Websites → www.mozilla.org
You need to log in before you can comment on or make changes to this bug.