976013 - Google Translate Widget box does not work (requires Flash for Firefox browsers)

Status: VERIFIED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Daniel Marschall]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Safari/537.36

Steps to reproduce:

Open www.kellers-ranch.de or oid-info.com


Actual results:

If I click the Google Translate Dropdown box, then there is only "Select language", but no languages listed.


Expected results:

Languages should be displayed like in every other browser (including the Android default browser)

Comment 1

[Daniel Marschall]

Additional information:
- Device: Samsung Galaxy Note 2
- I tried to clear the cache and cookies, no sucess
- It is unclear if the problem is at Mozilla's or Google's side. However, it is a problem that needs to be fixed. And alas, there is not possibility to contact Google. They also closed their Google Translate product forum, so I have no possibility telling them that their dropdown box doesn't work.

Comment 2

[Aaron Train [:aaronmt]]

Thanks for the report. This is reproducible. Added the widget from https://translate.google.com/manager/website/ over to a minimal page at http://people.mozilla.org/~atrain/mobile/tests/google-translate.html

This needs investigation into the menu that opens to see what the issue is.

Comment 3

[Mike Taylor [:miketaylr]]

line 8080 of a beautified https://translate.googleapis.com/translate_static/js/element/20/element_main.js:

  function eF(a, b) {
    var c = b || {}, d = c[Jc] || k, e = k[Tb](si), g = {Yh: e,Bb: void 0}, h = new VE(fF, g), l = null, q = null != c.timeout ? c.timeout : 5E3;
    0 < q && (l = f[Ic](function() {
      gF(e, !0);
      var b = new hF(1, Fi + a);
      XE(h);
      YE(h, !1, b)
    }, q), g.Bb = l);
    oa(e, pa(e, function() {
      e[Pb] && e[Pb] != Rn && e[Pb] != ml || (gF(e, c.Bj || !1, l), h.Cf(null))
    }));
    wa(e, function() {
      gF(e, !0, l);
      var b = new hF(0, Oh + a);
      XE(h);
      YE(h, !1, b)
    });
    tu(e, {type: qq,charset: Ji,src: a});
    iF(d)[r](e);
    return h
  }


In the iF(d)[r](e) part, just before the return: iF is a function that takes a document object and returns a reference to document.head. [r](e) calls appendChild on document.head and e is a script element:

"<script type="text/javascript" charset="UTF-8" src="https://translate.googleapis.com/translate_a/l?client=te&amp;alpha=true&amp;hl=en&amp;cb=_callbacks_._0hs6o56yo"></script>"

Which is a JSONP request with the following response/src:

_callbacks_._0hs6o56yo({
    sl: {
        auto: "Detect language",
        af: "Afrikaans",
        ...[SNIP]...
        zu: "Zulu"
    },
    al: {}
});

For some reason (not sure right now), that request is never made in Firefox for Android--even if we spoof UA to something else.

Comment 4

[Hallvord R. M. Steen [:hallvors]]

Huh - sounds like a fascinating problem 8-] I suppose Tb is 'createElement' and si is 'script' - but there's quite a lot of code doing stuff to e before appendChild(), more than I'd expect anyway. Perhaps commenting out some of that will make the request happen?

(If Tb is 'cloneNode' and si is true it might explain things too..)

Otherwise: are there any content security policies? Is the script inserted into the *right* document? If 

e = k[Tb](si)

is a document.createElement() call that creates the script element e, why is the document reference here *k* while the appendChild() call happens on *d*'s head?

Comment 5

[Mike Taylor [:miketaylr]]

Yeah, eF is OK. Crawling down the call stack (quite a bit):

P.Jd=function(a,b) {
  if(this.b[id]()) {
    var c=this.b,d={alpha:!0};
    b&&(d.hl=b);
    c.d[Ob](d,a)
   } else this.h(),a(null)
};

this.b[id] is a method isAvailable that returns true or false. For some reason, it's true in Desktop and false in Mobile. Manually changing this to if(true) fixes the problem--the final script request is made and widget gets its langauges. 

Now to figure out why isAvailable is false. For added fun--sometimes we bail earlier up the stack. Sometimes we make it to P.Jd.

Comment 6

[Mike Taylor [:miketaylr]]

OK, much closer to solving this--it comes down to whether Flash is enabled or not. If you block flash on desktop, you can reproduce the same issue that you get on Android.

Xa is a function that sets the "isAvailable" property on an object, based on a fn that returns a boolean. (One of) the relevant one(s) is here:

Xa(GF[E], function() {
  return null !== this.a && null !== this.a.oa && this.a.oa[id]();
});

When Flash is disabled, the GF object prototype has "a" set to null. With it enabled, this.a exists and has an oa property itself (which has an "a" property that is an <object> element used to host a swf). There is probably at least another isAvailable check that's failing as well, apart from the GF object one.

Now, the fun part is if you spoof as Chrome (Mobile) or Safari (Mobile), even with Flash blocked it works on Firefox Desktop--meaning they don't even try to use the Flash player for whatever they might be using it for (no clue). 

And if you have Flash disabled in Chrome and spoof as Firefox for Android... same broken behavior as reported by OP.

My recommendation would be to ask Google to send us the same non-flash code that they send Chrome (at whatever level that's happening).

Comment 9

[Karl Dubost💡 :karlcow]

This seems to be working now. I got a dropdown of languages and could translate.