Update the Twemoji loader to include the rainbow flag

[pento]

[38179] added support for the rainbow flag to core, but platform compatibility is a bit strange, because the flag was defined out of sync with the usual Unicode release cycle.

As such, we end up with a bit of weird scenario - Windows 10 and Android N beta support all Unicode 9.0 emoji, but don't support the rainbow flag. iOS 10 beta supports both the rainbow flag and all of Unicode 9.0, presumably OSX will be updated with the same support.

Given the cultural relevance of the rainbow flag, I expect it will be reasonably popular - Windows 10 and Android N will likely get an update to add support for it, but in the mean time, I think it's appropriate for us to step in and provide a seamless experience.

The Twemoji loader already has an exception for flags - it'll load if the browser supports everything but flags, and then only replace flag emoji, leaving everything else as native rendering.

I think it would be reasonable to add the rainbow flag to that test, and replace all flags if the browser doesn't support the rainbow flag.

This will also require updating window.wp.emoji.parse(), as the rainbow flag (and pirate flag, for that matter) don't match the usual flag byte sequences.

Related: #37543.

[pento]

37566.diff​ fixes this.

@ocean90: Do you have opinions on including this in 4.6?

[pento]

Needs testing and screenshots on:

• Windows 7 and 10
• iOS 9 and 10
• OSX 10.11 and 10.12
• Android N, and whatever older version

[ocean90]

@pento The loader has one job: provide a seamless experience of emoji on devices which don't fully support them. After [38179] we can't fully guarantee this anymore. This needs to be fixed.

The patch looks good, but I don't have Windows 10 or Android N handy to test it.

[pento]

Confirmed:

• Windows 7: All emoji render using Twemoji.
• iOS 9: All emoji render using Twemoji.
• OSX 10.11: All emoji render using Twemoji.
• Android 5.1: All emoji render using Twemoji.
• Android N: Only flag emoji render using Twemoji, all others are native.

OSX 10.12 doesn't have updated emoji yet, so there's no need to test it.

I'm downloading Windows 10 and Xcode 8 (with the iOS 10 simulator) to test them.

[pento]

Attached before/after screenshots in Android N.

[pento]

Windows 10: All emoji render using Twemoji. It seems that Edge hasn't been updated to use the new emoji set. Chrome behaves the same.

Firefox tries to use the new emoji set, but doesn't render Unicode 9 emoji correctly, so falls back to Twemoji as well.

[pento]

iOS 10 hasn't added Unicode 9 support, yet.

As can be seen in iOS 10.png​, when I disable the Unicode 9 test, it renders the rainbow flag correctly.

[ocean90]

This looks good.

[ocean90]

In 38194:

Emoji: Update the Twemoji loader to include the rainbow flag.

[38179] added support for the rainbow flag to core, but platform compatibility is a bit strange, because the flag was defined out of sync with the usual Unicode release cycle. For example Android N supports all Unicode 9.0 emoji, but doesn't support the rainbow flag thus the rainbow flag isn't rendered.
The Twemoji loader already has an exception for flags - it'll load if the browser supports everything but flags, and then only replace flag emoji, leaving everything else as native rendering. To provide a seamless experience for all flags the loader now uses the rainbow flag to test flag support.

Props pento.
See #37543.
Fixes #37566.

[ocean90]

In 38195:

Emoji: Update the Twemoji loader to include the rainbow flag.

[38179] added support for the rainbow flag to core, but platform compatibility is a bit strange, because the flag was defined out of sync with the usual Unicode release cycle. For example Android N supports all Unicode 9.0 emoji, but doesn't support the rainbow flag thus the rainbow flag isn't rendered.
The Twemoji loader already has an exception for flags - it'll load if the browser supports everything but flags, and then only replace flag emoji, leaving everything else as native rendering. To provide a seamless experience for all flags the loader now uses the rainbow flag to test flag support.

Merge of [38194] to the 4.6 branch.

Props pento.
See #37543.
See #37566.

[peterwilsoncc]

Why is the national flag test being kept? It seems safe to assume rainbow flag support indicates other flag combinations are supported.

Sorry for the tardiness of my comment, was offline.

[pento]

Windows 10, even with its latest emoji update, doesn't support national flags. Given how long they've held out on doing that, I don't really want to assume whether they'll add national flags, rainbow flag, or both in the future.