Firefox+No Adobe Flash = Google translate dropdown does not work in Firefox 27.0 on Mac

[monfresh]

1. Go to http://smc-connect.org
2. Click on the Google Translate dropdown at the bottom of the page

Expected: a list of languages appears
Actual: no list appears

[anselmbradford]

Do you see any other variables with this bug? I can't reproduce it:

[monfresh]

I disabled all my extensions, and set all plugins to "Ask to Activate", and I can still reproduce it. Inspecting the element shows that the languages never loaded inside the dropdown. I don't see any errors in the Console. I'm on a late-2009 iMac with 10.8.5

[anselmbradford]

Hmm, I'm on 10.8.5 also (MBAir). I can't reproduce it in browserstack either. Let me know if you find any other configuration clues. Maybe check the Network tab and see that you have calls to translate.googleapis.com and related API calls present.

[anselmbradford]

Skills/resources required

• late-2009 iMac w/ Mac OSX 10.8.5
• Firefox 27

To Fix
Attempt to reproduce this issue in Firefox 27 on late-2009 iMac with 10.8.5 and attempt to identify the cause of this issue. Check other platforms also to see if it can be reproduced elsewhere.

Steps

• Check if able to reproduce this issue.
• Identify issue cause

[monfresh]

This is not limited to a late-2009 iMac. I can also reproduce it on my Mid 2012 MacBook Air 11" with 10.9.2 and Firefox 27. It's also not just www.smc-connect.org. I can reproduce it with www.auntbertha.com too.

[monfresh]

I found this: https://support.mozilla.org/en-US/questions/957611

@anselmbradford do you by any chance have Flash installed on your machine? If so, try disabling it: you can create an "Internet Plug-Ins (Disabled)" folder in your machine's root Library folder (not your user's Library folder), then move the flash plugin from "Internet Plug-Ins" to "Internet Plug-Ins (Disabled)". Then restart Firefox and see if you can reproduce the issue.

[monfresh]

This article also suggests the widget uses Flash which I find quite mind boggling, especially since it works in Safari and I don't have Flash installed at all on my machine: http://www.papayasoft.com/2010/01/26/google-translate-flashblock-firefox/

I downloaded the JS from here: http://translate.google.com/translate_a/element.js
and I do see a reference to an .swf file:

c._phf=h+'/translate_static/js/element/hrs.swf';

[monfresh]

This more recent Mozilla support ticket confirms that Flash is required:
https://support.mozilla.org/en-US/questions/977178

I find that insane. Why would it work in Safari without Flash, but not Firefox? That sounds like a Firefox issue to me.

[anselmbradford]

Nice investigating! Google does use Flash for fallbacks sometimes. They used to do this with their interactive doodles, not sure if they still do. This means it will work fine in Safari, etc. without Flash because it's using HTML5 APIs probably. But on (older) machines that don't have newer APIs, Flash can sometimes be used to reproduce the same functionality. An example of this is Youtube, which can use the newer <video> element, but also provide Flash video fallback for older browsers. This is a hard one to detect for because useragent strings are notoriously unreliable (for detecting the browser in use), and testing for the absence of Flash won't mean the drop-down necessarily will be broken. Yeah sounds like a FF/Google issue.

[anselmbradford]

[EDIT: UPDATED TITLE AND MOVED THIS POST TO https://github.com//issues/311#issuecomment-53117050]

[monfresh]

Are you saying that in 2014, the latest version of Firefox doesn't natively support whatever Google Translate is doing, so that the widget has to fall back to Flash?

[anselmbradford]

Looks like it. Google cares most about Webkit I presume, since Chrome is a Webkit browser. FF is not a Webkit browser and Mozilla is also stricter than Google, Apple and Microsoft in using open source software vs licensing things AFAIK. Each browser is in various states of implementing things from the HTML spec, and some things in the spec aren't implemented anywhere. Also, competing standards for how to do things arise. For instance, thus far the issue of providing a universal video codec for the web has not been settled, so video has to be encoded in at least two formats or Flash needs to be used as a fallback. http://www.w3.org/html/wiki/FAQs#Does_HTML5_provide_for_Royalty-Free_video_and_audio_codecs.3F

[anselmbradford]

In regard to how they use Flash in Google Translate, I'm not sure, but as a guess Flash provides things like its own storage space (like a cookie) that can circumvent a user clearing their cookies. Perhaps they are storing language settings there.

[anselmbradford]

That's probably it, last I checked the Web Storage API (a client-side database that is much larger and more powerful than cookies) had conflicting format support across browsers, like with video codecs. For instance, here's a polyfill to address that which uses Flash http://stackoverflow.com/questions/4692245/html5-local-storage-fallback-solutions

[anselmbradford]

Skills/resources required

• Firefox without Adobe Flash installed

To Fix
Firefox has an incompatibility with Google Translate when Adobe Flash isn't installed (see above commentary). Determine if there's a solution to detecting this scenario and hiding Google Translate in this case.

Steps

• Detect whether incompatible browser state (Firefox w/o Flash installed) can be reliably detected without false positives for other browsers.
• Disable/hide google translate functionality if the browser state does not support it.

[civicissuebot]

Hello! This issue looks like it still needs help!
It's been clicked on 6 times through the Civic Issue Finder!
Can this issue be closed or does it still need some assistance?

If you wrote this issue, you can always update the labels for specifying tasks, add more info in the description to make it easier to contribute, or re-write the title to make more contributors interested in helping out.
If you are an open source contributor, ask and see how you can help by commenting or check out more open issues in this repo at https://github.com/codeforamerica/ohana-web-search/issues.

Just doing a little 🌱 open source gardening 🌱 of Brigade projects!
For more info/tools for creating civic issues, check out Got Issues. Thank you!