Add the translation bar back to the site

[pmac]

Bedrock used to have a translation bar (part of an info bar) that would pop up if we detected that the user viewing a page preferred a language in which the page was available, but which wasn't the current translation being viewed. The code still exists in the info-bar repo.

This will be a much better UX than either continuing to use the current translation or finding the language switcher in the footer. It is also a step on the way to removing l10n redirects from the site.

[alexgibson]

If we're gonna do this can I suggest removing the jQuery dependency from that repo? We're actively trying to remove jQuery code from bedrock now that we're transitioning the site to Protocol.

[pmac]

The tabzilla.lang files will need to be restored when we do this. They were removed in:

https://github.com/mozilla-l10n/bedrock-l10n/commit/5a03cc088ec83f328e5c36bab5d63896821357ab

Or the translations will need to be migrated to Fluent.

[alexgibson]

Some time has passed since we had this feature, and it's something I agree would be nice to add back. Going to add this to the technical roadmap as a thing to migrate to modern code / standards.

[pmac]

Agreed. This would be a UX win.

[robhudson]

I'm going to work on this. It would be helpful to get a visual of what this used to look like if there is one. @alexgibson Do you have an old screenshot? Or recommendations on what this should look like if not?

I experimented with code on Friday and have the basics of the best available language based on the intersection of the in-page link[hreflang]s and the navigator.languages.

[alexgibson]

Do you have an old screenshot? Or recommendations on what this should look like if not?

I can't seem to find any old screenshots, but I remember the UI being pretty simple. It was a short horizontal bar that appeared right at the top of the page, above the navigation, spanning the full width of the viewport.

I did manage to find the original strings in git history:

• Would you like to see this page in your language?
• Yes, please!
• No, thanks.

Clicking yes would redirect, and clicking no would set a cookie to prevent the bar showing again.

Poking around in the original code, it looks like we also did a few other clever things, like disabling Chrome's translation bar when our own bar was shown: https://github.com/mozilla/mozilla-infobar/blob/master/js/infobar.js#L446-L447

[alexgibson]

@robhudson also, happy to help with any front-end bits if you need a hand here. Just let me know

[alexgibson]

This one needs info from Elise, who is working on some related UX work