Replace emojione with twemoji + emojibase

[ara4n]

Fixes element-hq/element-web#9281
Review with element-hq/element-web#9766

[ara4n]

Right, this should generally work. Known problems are:

• keypad numbers (1️⃣etc) don't work on Firefox (but are okay on Chrome), potentially due to a bug in the twemoji font or how fallback works to it. (Filed as Twemoji "keycap asterisk" emoji doesn't work on Firefox element-hq/element-web#10079.) They are rendered as:

where the black square is a default layer glyph after my antics on https://github.com/mozilla/twemoji-colr/issues/50

• Kerning between the emoji is a bit tight - circular faces end up pretty much touching each other. (Filed as Kerning between the emoji is a bit tight element-hq/element-web#10081.) This might again be due to my bodge in Glyphs do not render on Firefox 66 or Chrome 74 on MacOS 10.14.4 mozilla/twemoji-colr#50:

• the emojibase shortcodes (e.g. :smile: etc) are different to emojione's, so they've all changed, sometimes rather unexpectedly. For instance, :smile: produces a grin of some kind, whereas :pleased: produces a more normal smiley... (@jryans: I think we've managed to just deal with the change.)
• we no longer get tooltips on emoji giving their shortcodes, as they are no longer images. This would need to be implemented with some additional JS (to avoid adding additional spans for emoji everywhere, which would take us back to where we were with emojione) (Filed as Emoji shortcode is missing on hover element-hq/element-web#9911.)
• any emoji glyphs which Nunito randomly decides to implement will take priority over Twemoji's glyphs. I haven't found any though. This may be more of a problem for whatever the monospace font is, especially as this is platform dependent currently, as per we don't define a consistent cross-platform monospace font element-hq/element-web#9765
• i deliberately reverted 9a272d4 given it applies the full emoji regexp to every keystroke in the composer, slowing things down. This means that users who have autocomplete turned on can't do sequences of emojis, but i think that regression is fine given the perf improvement.
• performancewise the autocompleter shouldn't have regressed, but it's nuts that we return 1724 autocomplete results every time someone types a colon :/
• twemoji-colr is at Emoji 11 (whereas 12 is latest from twemoji). We should get this for free once Update to Twemoji v12 mozilla/twemoji-colr#48 lands.
• Zooming the browser with command+ results in ugly raster sampling artefacts on Chrome. Firefox however correctly renders as vectors. (@jryans: I wasn't able to duplicate this in Chrome, will wait for others to report.)
• the current twitter emoji artwork has a slightly more cartoony and perhaps clunky aesthetic relative to emojione. this is only really a problem for bigemoji though.

I don't think any of these are hard blockers on merging this.

[turt2live]

out of interest, does this magically solve element-hq/element-web#7872 (I suspect it doesn't, but would be cool if it did)

[ara4n]

i doubt it will. in fact, it might make the fix harder, as text in general will need to be de-inverted whereas before the emoji CSS could be de-inverted. the correct fix there really is to stop using the invert filter hack.

[jryans]

I've only done a quick scan out of curiosity... 😁 @bwindels mentioned he'd do a proper review during our morning standup.

[bwindels]

Started reviewing, will continue tomorrow ...

[bwindels]

Apart from what looks like including two json files with emoji data in the bundle, looks great! Tried it out as well and OMG this feels so much nicer!!

[ara4n]

@bwindels thanks for the review :) the two points are basically things i'd deliberately skipped for now to avoid potentially lost work given the questions over how emojipicking will work in future. do you consider them hard blockers?

[bwindels]

No, no blockers. If we don't end up switching to emojimart for some reason we'll need to remember to come back to this, but I don't see why we wouldn't, so all good to go 👍

[ara4n]

If we don't end up switching to emojimart for some reason we'll need to remember to come back to this

have filed element-hq/element-web#9780 to track the stripped emoji mess.

[jryans]

I extracted the bits of #2995 (comment) that seemed like that really need follow up to separate issues which I've added into the comment.