Weird unicode text on page title

[ghost]

Visiting experiment detail pages show weird characters in the title bar. Screenshot @ https://www.evernote.com/shard/s3/sh/bf3f2560-af38-42e2-ae87-83246ca9c3e7/ee84a96f17b0ae021559351109aabd56

This is in Nightly on Linux, although I think Nick runs windows. The original report is bwinton/TabCenter#144

[ghost]

Experiment names are no longer in the titles, so, I guess this is fixed-ish

[ghost]

Experiment titles are back now and so is this bug...

[mathieuinottawa]

Looks different to me, but still not right:

[ScottDowne]

I noticed while the page is loading, it's fine. Then it hits setPageTitleL10N https://github.com/mozilla/testpilot/blob/master/frontend/src/app/containers/ExperimentPage.js#L214 and it updates the title, creating the issue. I think.

So maybe this is being caused by whatever is doing l10n?

[ScottDowne]

I think this and #1828 are related.

If you go here: https://github.com/l20n/l20n.js/blob/master/docs/html.md

At the bottom it says "If you care about IE11 you'll need the HTMLTemplateElement polyfill. L20n.js uses HTMLTemplateElements () to safely set contents of DOM nodes."

So maybe the weird characters are the broken template elements? They offer a solution which havn't looked into yet.

[ghost]

Yeah, interesting, although I can reproduce the page title ones in Firefox. /cc @stasm for the potential for an l20n tie-in

[ScottDowne]

Yeah, I think it's very likely l20n.js related, but I'm less sure it's <template> related.

I tried a few browser/OS combinations until I found one that failed (Windows + IE 11), I didn't find a FF that failed. I'm on Fedora (stable + nightly), and I also tried WIndows (stable and beta FF).

However, I also tried a template polyfil, and it didn't fix it.

I think a reduced test case to confirm this is in l20n.js and not something in test-pilot, would probably be the next thing I try.

[stasm]

L20n (and Fluent) use Unicode's FSI and PDI marks to isolate the direction of interpolated text. This is useful when the text around an interpolation has a different direction than the text inside of the interpolation. The bidi algorithm needs a bit of help to properly render punctuation marks in those cases.

Unfortunately, FSI and PDI don't render well on Windows on some browsers. Is this issue only reproducible on IE11? Do you know if Edge is affected?

It might be best to turn off this behavior in l20n.js for browsers that are known to not support FSI and PDI well.

[ScottDowne]

@stasm Yeah, Edge is fine.

[stasm]

Thanks for the information. I filed l20n/l20n.js#178. I'll be able to test it on Thursday.

[ghost]

I'm still reproducing this in Firefox Nightly on Ubuntu (and have been able since at least when this was filed). No one else sees this in Nightly's title bar (screenshot in first comment)?

Edit: The original screenshot was from Nick, not me. So, attaching what I see today:

[ScottDowne]

@wresuolc Yeah, it's fine for me on Fedora + nightly.

I'll see if I can wrangle a way to test on Ubuntu.

[ScottDowne]

I tested firefox and nightly on Ubuntu, and it didn't see this issue :(

I also tested l20n/l20n.js#178 best I could and could see a difference in IE 11.

[meandavejustice]

Ubuntu, xmobar/xmonad, Firefox 54.0a2

Same behavior as @ScottDowne describes above. Title is fine until page is finished loading, then it changes.

[ScottDowne]

Ah yes, interesting, for Linux it's probably more related to the status bar/desktop manager than the browser itself.

[johngruen]

ref #1714

[meandavejustice]

This appears to be fixed now, probably in #1714 woohoo!

[SoftVision-PaulOiegas]

@meandavejustice This still occurs on experiments details page on Windows 10 Edge browser.