838894 - [MWC2013] Animated Fox snippet

Status: VERIFIED FIXED

(Snippets :: Campaign, task)

Description

[Chris More [:cmore]]

Requirements and idea coming from Barry. Creating the bug for now.

Link: http://www.mozilla.org/mwc/

L10: TBD

Comment 1

[barry munsterteiger]

using the animated fox loop seen on the phone here:
https://www-demo2.allizom.org/en-US/firefox/partners/
   Username: iwannaseemwc
   Password: T6IKdnkEEjAeRRNpc7AyRPLzDzTZcmbk
replace the Firefox logo on About:home during the Mobile World Congress event driving people to the link Chris posted above.

snippet text copy will be "Blaze Your One Path" and will be translated per the localization in process for the MWC specific pages.

Comment 2

[Aubrey Anderson]

Initial work on the animation and snippet-isation is done.  Barry, that's in your email right now!

Comment 3

[Aubrey Anderson]

Attachment: build 4, featuring animation and fade-in / fade-out

please review attached build.  i've uploaded the whole sandbox as well for ease of testing, etc.

Comment 4

[Aubrey Anderson]

Attachment: build 5 contains vertical re-alignment, per Barry's request

Barry made some adjustments to the Flamin' Fox's placement, they are reflected in build 5, attached.  Only CSS changes.

Comment 5

[Chris More [:cmore]]

Attachment: CSS changes needed for snippet.

This is exactly what I see when I opened up the SandBox .xml file in Firefox 18.

Are you seeing this with Firefox 18?

Comment 6

[Chris More [:cmore]]

I've also uploaded this to the snippet stage server to verify that the same thing exist when it is deployed normally with the snippets stage server.

To view it in Firefox, go to about:config and search for updateURL. Change the value to:

https://snippets.stage.mozilla.com/%STARTPAGE_VERSION%/mwcflames/%VERSION%/%APPBUILDID%/%BUILD_TARGET%/%LOCALE%/%CHANNEL%/%OS_VERSION%/%DISTRIBUTION%/%DISTRIBUTION_VERSION%/

Then open the web console and run:

localStorage['snippets-last-update'] = 0

Close Firefox, and re-open.

Comment 7

[Aubrey Anderson]

i gather you're seeing... a black box?  that's certainly not as intended ;-)

entering the localStorage command throws this:

[20:47:43.672] [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMWindow.localStorage]"  nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)"  location: "JS frame :: Web Console :: <TOP_LEVEL> :: line 1"  data: no]

what did i miss?

does the snippet run ok for you when you just drag the SnippetSandbox.xhtml into your browser?

Comment 8

[Aubrey Anderson]

Attachment: alternate base64 encode

on the off chance that it was a dud base 64 encode for the image itself, please see attached snippet.html file with an alternate encoding.  i'm wondering if the black box issue might just be an inability to decode the string....

Comment 9

[Chris More [:cmore]]

Yes, black box. The animation is running because if I cmd+A, the black box inverses and I can see the animation. I replaced the code on the stage server with what is in comment 8 and no difference.

Yes, if I open the .xhtml file directly with Firefox 18, the black box shows up. What version of Firefox are you testing with?

Comment 10

[Aubrey Anderson]

ok so it must be another kind of encoding problem.  testing here with FF 18.02 on OS X.  i'll try a canvas-based encode right in FF today and update this bug with that....

Comment 11

[Aubrey Anderson]

Attachment: FF-native-encoded image url

Hi, 

Attached is a snippet.html file which contains a version of the base64 image encoded right in FF 18. Give this a try?

Comment 12

[Chris More [:cmore]]

No luck. Only happens in Firefox 18 and I don't have a retina display. I am using Firebug now and trying to find out what CSS needs to be adjusted for the black box to disappear.

Comment 13

[Chris More [:cmore]]

Aubrey: Do you have a non-retina display machine with Firefox 18 on it that you can test with? If you could Firebug it with Firefox 18, you may be able to find a workaround.

Comment 14

[Chris More [:cmore]]

The black box also shows up with Firefox 19.

Comment 15

[Chris More [:cmore]]

Attachment: Animated snippet works as-is in Firefox 20.

Comment 16

[Chris More [:cmore]]

Any luck with this based off of the feedback that I mentioned to Barry yesterday that manually setting background-color on the animation itself caused the black box to disappear? Can you review how the animation was implemented on the MWC website on our demo2 server? It does not have this issue in Firefox 18.

Comment 17

[Aubrey Anderson]

Attachment: animation via background-position move

This build animates by moving the BG position, at least in initial tests with Pete, this seems to address the problem!  See if you can confirm?

Comment 18

[[e-mail]]

Attachment: confirmed - snippet working in Fx 18.0.2

confirmed - that the snippet received today is working in Fx 18.0.2

hooray !!

Comment 19

[Chris More [:cmore]]

I've uploaded the snippet to the stage server and I have confirmed that it is working in Firefox 18. I will test other versions of fx now. To view it for yourself, your update URL to what it says in comment 6.

Comment 20

[Chris More [:cmore]]

We would still need to combine this snippet with the non-animated text snippets for a full experience. Without the text snippet, it is very obscure as the user will have no idea why the fox is there, what it means, and what to do. 

Winston: What is the status of the localized text snippets?

Comment 21

[Chris More [:cmore]]

It works in Firefox 18, 19, 20, and nightly.

Comment 22

[Winston Bowden]

Snippet copy is still being finalized and the image is coming some time this week.  I'll have more for you early Tuesday morning.

Comment 23

[[e-mail]]

answering comments received from Asa via email  Chris / Aubrey / Barry - can you please help fill in the blanks?

Wil this show for all Firefox release versions or just recent release versions? (I'm worried about performance impact) 
<< Firefox 18, 19, 20, and nightly >>

 What's the performance impact on Firefox start-up or home page loading? 
<< Should be imperceptible to the user >>

How is the animation implemented and do we expect it to be silky smooth and beautiful for all users who see it? 
<<animation is a .png sequence.   should be silky smooth for all users. >>

How long do you intend to include this snippet and is it part of the rotation or a full take-over? 
<<part of a rotation during week of MWC >>

Comment 24

[barry munsterteiger]

performance wise this one is significantly simpler than the olympic flames animation.  
The animation is entirely sprite based with an indexed CSS translate move across a transparent PNG image.  performance should be very predictable across a wide diversity of machines and configurations since we are not relying on 3D transforms or hoping the GPU will take over.

Comment 25

[Winston Bowden]

Attachment: Snippet icon

Snippet icon attached.  

Copy from Matej:

We've unleashed the fox to put the power of the Web into the hands of smartphone users everywhere. Learn more about Firefox OS.

Comment 26

[Chris More [:cmore]]

Attachment: Animated snippet + text snippet combined into one

It works and it is up on stage. I have the en-US one constructed and we only need to swap in/out the localized text for the other locales.

Comment 27

[Chris More [:cmore]]

Want to see this for real in your browser? Follow the steps in comment 6.

Comment 28

[Chris More [:cmore]]

:Stephend: We are going to need someone in QA to test out this snippet. I've already tested it in Firefox 18, 19, 20, and 21 and it appears to work fine. All that we are testing is that the animation displays and that the doesn't kill the CPU. It is up on stage now to test and comment 6 describes how to get your browser to pull in this snippet.

Comment 29

[Aubrey Anderson]

Attachment: Alternate animation

Attached is an alternate animation build based on feedback today from Barry and Pete. This is still awaiting final creative approval, but I figured I'd get it in the pipeline now just in case.  The alternate animation should have no impact on performance or rendering, there's just one additional graphic making the brand relationship clear.

Comment 30

[Chris More [:cmore]]

Attachment: Updated animation brand

Does anyone feel the Firefox icon below in the text snippet seems a bit redundant now?

Comment 31

[[e-mail]]

Hello all.  

Many thanks for the push to complete this for the launch of Mobile World Congress.  I just sat down with Chris B, who strongly feels that the landing environment for this snippet needs to convey much more to visitors than the contents of the current press release — or the MWC landing page v2.  

I'll define the messaging and requirements of the landing page over the next weeks so that we can move forward for a launch in early April.  This timing would coincide with other Firefox OS brand launch elements that are currently in the works. 

Many, many thanks again for the push on this. It looks fantastic and will be well received once live.

Comment 32

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

Is this going to be on Fennec, as well, or just desktop builds?

Comment 33

[Chris More [:cmore]]

(In reply to Stephen Donner [:stephend] from comment #32)
> Is this going to be on Fennec, as well, or just desktop builds?

This snippet project is now on hold and don't worry about QA right now. It will be for desktop builds only.

Comment 34

[Winston Bowden]

Hi - we've been talking about using this snippet during the Firefox OS launch.  What's the best way to get work rolling again?

Comment 35

[[e-mail]]

Thanks Winston.  

One of the concerns with launching this earlier was that the Landing environment was undefined.  

Is there a localized destination that makes sense now (assuming that the Snippet would be served only in a launch geography)?  

Is that environment a confirmed priority for Chris More's team?  
Is activating this Snippet a confirmed priority for Chris' team in Q2?

Also, is there a place where we can review the current Snippet without opening the web console?

Thanks
Pete

Comment 36

[Winston Bowden]

Hi Pete - great questions.  Comments inline.

(In reply to [e-mail] from comment #35)
> Thanks Winston.  
> 
> One of the concerns with launching this earlier was that the Landing
> environment was undefined.  Is there a localized destination that makes sense now (assuming that the
> Snippet would be served only in a launch geography)?  

In launch markets we would send folks to their country specific Firefox OS page.  If we decide it makes sense to do a global rollout to build general excitement, we'd send non-launch markets to the overview page that has the CTA to sign up for more information.  
> 
> Is that environment a confirmed priority for Chris More's team?  

I'm not sure.  But I think most of the work for this was completed and we were almost ready for QA.  Chris, can you confirm?

> Is activating this Snippet a confirmed priority for Chris' team in Q2?

Same as above.  
> 
> Also, is there a place where we can review the current Snippet without
> opening the web console?

I'll check with Barry/Chris. 

> 
> Thanks
> Pete

Thanks!

Comment 37

[Chris More [:cmore]]

(In reply to Winston Bowden from comment #34)
> Hi - we've been talking about using this snippet during the Firefox OS
> launch.  What's the best way to get work rolling again?

The snippet is sitting and waiting to be launched and we will just have to change the URL to point to he new Firefox OS consumer pages. The snippet was created by Aubrey and it should take much resources from the WebProd team unless the snippet is going to be completely re-created.

To see a preview of the snippet, follow the instructions in comment 6. It is not super easy to do if you have not touched about:config before.

I still recommend a different icon for the snippet down below as mentioned in comment 30.

Comment 38

[Osmose [:osmose, :mkelly]]

Since we like to have QA look at the final snippet, these are the things we need before QA can start looking at the snippet:

- Final text for the snippet (be sure to mention which part of the text to link!)
- Final link
- Whether we should keep the Firefox icon or change it as cmore suggests in comment 30.
- What channels this is intended for (I'm assuming just release Firefox for now).

retornam: CCing you, once we have those and I put it up can you QA this on release Firefox?

Comment 39

[Osmose [:osmose, :mkelly]]

Oh yeah, the instructions in comment 6 are a bit out of date, you should use this URL instead of the one in that comment:

https://snippets.allizom.org/%STARTPAGE_VERSION%/firefoxflames/%VERSION%/%APPBUILDID%/%BUILD_TARGET%/%LOCALE%/%CHANNEL%/%OS_VERSION%/%DISTRIBUTION%/%DISTRIBUTION_VERSION%/

Comment 40

[barry munsterteiger]

just noticed that the firefox logo on the phone and the one in the icon for the text portion of the snippet is the old logo.  will update and attach to the bug later today.

Comment 41

[barry munsterteiger]

Attachment: updated phone with revised logo

icon on the phone was old Firefox, this is the correct icon.

Comment 42

[barry munsterteiger]

Attachment: new snippet icon

Using another pose from the Firefox OS fox characters. this removes the repetition of the firefox logo.

Comment 43

[Osmose [:osmose, :mkelly]]

Attachment: Screenshot of current snippet

I've updated the snippet on staging to use the latest phone and icon. We still need confirmation on the text and need to know what link to use (currently the link is pointing directly to blog.mozilla.org). Once we have that we can QA and release.

Comment 44

[Winston Bowden]

Current text is:
Firefox OS is about to change the world. Celebrate with fans around the globe. <a href="Learn how"</a>.

However - we will probably want to test different versions of the copy.  

Jenn B - can you provide us with the final Firefox OS URL we will be directing visitors to?

Comment 45

[Jennifer Bertsch [:jbertsch]]

mozilla.org/firefox/os

Comment 46

[Winston Bowden]

Hi mkelly - are you all set with everything you need based on comments 44 and 45?

Comment 47

[Osmose [:osmose, :mkelly]]

(In reply to Winston Bowden from comment #46)
> Hi mkelly - are you all set with everything you need based on comments 44
> and 45?

Yes, I'll put it up on stage shortly.

Comment 48

[Osmose [:osmose, :mkelly]]

retornam: Can you QA this snippet? It's just an animation plus text and link. The link will 404 but should go to https://mozilla.org/firefox/os (with some querystring parameters). 

You can view the snippet using the instructions at https://wiki.mozilla.org/Firefox/Projects/Firefox_Start/Snippet_Service#Testing_Snippets_with_Local_or_Stage_Service and using the URL below for the updateURL value.

https://snippets.allizom.org/%STARTPAGE_VERSION%/firefoxflames/%VERSION%/%APPBUILDID%/%BUILD_TARGET%/%LOCALE%/%CHANNEL%/%OS_VERSION%/%DISTRIBUTION%/%DISTRIBUTION_VERSION%/

Comment 49

[Winston Bowden]

Thanks all - also - can you provide ETA on completion of QA?  We're planning on launching this late on Monday.

Comment 50

[raymond [:retornam] (inactive)]

(In reply to Michael Kelly [:mkelly] from comment #48)
> retornam: Can you QA this snippet? 

Yes I can.

It's just an animation plus text and
> link. The link will 404 but should go to https://mozilla.org/firefox/os
> (with some querystring parameters). 
 We are working on  this page on a stage site right now
> 
> You can view the snippet using the instructions at
> https://wiki.mozilla.org/Firefox/Projects/Firefox_Start/
> Snippet_Service#Testing_Snippets_with_Local_or_Stage_Service and using the
> URL below for the updateURL value.
> 
> https://snippets.allizom.org/%STARTPAGE_VERSION%/firefoxflames/%VERSION%/
> %APPBUILDID%/%BUILD_TARGET%/%LOCALE%/%CHANNEL%/%OS_VERSION%/%DISTRIBUTION%/
> %DISTRIBUTION_VERSION%/


I'll update this bug after I an done testing

Comment 51

[raymond [:retornam] (inactive)]

Attachment: live snippeet

Comment 52

[raymond [:retornam] (inactive)]

The snippet works.

Comment 53

[Osmose [:osmose, :mkelly]]

Reopening as this bug should probably be marked resolved once the snippet is live.

wbowden: I've put the snippet up on production as "Firefox Flames", let me know if you need anything else.

Comment 54

[raymond [:retornam] (inactive)]

Attachment: snippet-en-US

Snippet is live on prod

Comment 55

[[e-mail]]

thanks.  how can I preview it ?

Comment 56

[Osmose [:osmose, :mkelly]]

(In reply to [e-mail] from comment #55)
> thanks.  how can I preview it ?

Since it's live on prod, you can follow the instructions at https://wiki.mozilla.org/Firefox/Projects/Firefox_Start/Snippet_Service#Testing_Snippets_with_Local_or_Stage_Service starting at step #6.

Comment 57

[raymond [:retornam] (inactive)]

marking as verified fixed