663222 - [HTML5 Snippets] Add persona preview upon hover functionality into snippet

Status: RESOLVED FIXED

(Snippets Graveyard :: General, defect)

Description

[Laura Forrest]

As part of this project (Bug 653784) we'd like to build persona preview functionality into snippets. Let's build out the functionality to preview 2 different personas in this bug.

Desired User Experience: 
Upon user mouse-over of anywhere within the snippet box show a preview of the persona, just like we do here: https://addons.mozilla.org/en-US/firefox/personas/

Next Steps: 
For now please build out the functioning code and use dummy copy. Maybe something like: "Personalize your  browser with personas! Just move your mouse over this box to try one on." I will work with creative to get final copy/graphics. 

Personas: 
Litefox https://addons.mozilla.org/en-US/firefox/addon/litefox/
Japanese Tatoo https://addons.mozilla.org/en-US/firefox/addon/japanese-tattoo/

Wiki Project Pages:
https://intranet.mozilla.org/Marketing/StartPageSnippets/Awesomeness
https://wiki.mozilla.org/Websites/Snippets/HTML5-Awesomeness

Comment 1

[Laura Forrest]

User Experience addition:
Include the "Wear It" and "Details" to the snippet once it's in preview state as we do here: http://www.getpersonas.com/en-US/

Comment 2

[Chris More [:cmore]]

Chris/Adrian: Would either of you two be interested in helping create a Firefox persona Snippet? The code has already been developed for the AMO website and others. It would just require retooling it for a Snippet and picking a relevant Snippet to highlight.

p.s. 5+ billion eyeballs... :)

Comment 3

[Laura Forrest]

(In reply to comment #1)
> User Experience addition:
> Include the "Wear It" and "Details" to the snippet once it's in preview
> state as we do here: http://www.getpersonas.com/en-US/

Note that we've simplified the interaction options to 1. Preview upon rollover and then  2. "Click to apply" within the graphics bug. 

For more details see this comment: https://bugzilla.mozilla.org/show_bug.cgi?id=664302#c3

Comment 4

[Laura Forrest]

Update: since this page would need to be white-listed w/in the Fx product for Personas to appear, which introduces security issues, we're currently checking to see if utilizing something like a iFrame will work.

Comment 5

[Laura Forrest]

Hey Chris - I'd still like to explore using a iFrame here as Google sometimes does as part of the Google Doodle on their homepage. Let's continue to develop with iFrame use in mind. 

Also - meeting with security to explore iFrame use this Wednesday.

Comment 6

[Chris More [:cmore]]

I've opened bug 666370 to discuss the HTML page on AMO for the persona and add-on Snippets.

Comment 7

[Laura Forrest]

Chris: in case it's not clear from above, we'd like to enable the user to not just preview the persona but also "wear" and install the persona as well. (like we did from the What's New page).

Comment 8

[Chris More [:cmore]]

Here is an example of one that is working that we can use as a template for the Javascript for the Snippet: http://www.getpersonas.com/en-US/external/mozilla/

Comment 9

[Chris More [:cmore]]

Mkelly:

Here is all of the pieces that you should need to make this Snippet.

1) Here is what the Snippet should look like: https://bug664302.bugzilla.mozilla.org/attachment.cgi?id=542606

2) Copy: "Dress up your Firefox with Personas. Roll over to try, click to apply.
Or visit the gallery for thousands more!" (The word "gallery" should be a link to http://www.getpersonas.com.)

3) The persona URL and associated icons are below:

a) Japanese Tattoo, http://www.getpersonas.com/en-US/persona/7610, icon: https://bugzilla.mozilla.org/attachment.cgi?id=542646

b) kanagawa wave, http://www.getpersonas.com/en-US/persona/141882, icon: https://bugzilla.mozilla.org/attachment.cgi?id=542647

c) Live with Music, http://www.getpersonas.com/en-US/persona/17926, icon: https://bugzilla.mozilla.org/attachment.cgi?id=542648

4) The text should be above the three thumbnails and the thumbnails should be anchored to the bottom of the Snippet as shown in the preview at the top of this message.

5) OnMouseOver should activate the persona preview and click should apply.

6) In Firefox, go to preferences, security, exceptions, and add localhost. This way, you could do an iframe src=localhost/foo.html as a test of the Snippet to see if it functions correctly. You can even run the HTML standalone until it works on localhost before we try moving it to AMO or getpersonas.com

Thanks!
Chris

Comment 10

[Laura Forrest]

Hey Chris/Mkelly - How's this going? It would be nice to have this live within the next two weeks, and we should spend ample time testing this out before pushing.

Comment 11

[Chris More [:cmore]]

Attachment: Persona preview snippet screenshot

This is just a screenshot of what the persona snippet looks like in our stage environment.

Comment 12

[Laura Forrest]

This is now working within staging. Woo-hoo!

Closing this bug.

Comment 13

[Laura Forrest]

Attachment: Click "view gallery" screenshot

Comment 14

[Laura Forrest]

I was just testing this and found that when I click the "view gallery" link within the snippet it opens within the iFrame instead of within a new tab on the browser. 

Reopening this bug. 

Screenshot above.