Twemoji fallback doesn't kick in on subsequent DOM mutations

[rmccue]

Fun bug I found and tracked down with @pento:

1. Set an element's content via innerHTML to an emoji character
2. Observe the content has been replaced with Twemoji correctly
3. Set the element's content to the exact same value again
4. Observe the content has been not replaced

You can try this on any page our Twemoji replacement is loaded on:

window.setInterval(function () { document.querySelector('div').innerHTML = '\ud83d\ude3d'; }, 500);

[rmccue]

With the example code, you can see Firefox will continue toggling back and forth between Twemoji and native every 0.5s; Chrome will only toggle once, then stick on native.

[pento]

34640.diff​ fixes the bug, but I'd like second opinion from @azaozz or @iseulde, if they think this is the best way to go about it.

[iseulde]

That whole conditional is there to detect an image error, so if Twemoji reverts an image to text. If we add an attribute to detect the error instead, we can remove everything else in the conditional. Maybe we should also add onerror as a setting instead of patching Twemoji?

[iseulde]

Summary of the problem: if you replace an emoji image with the emoji text, we think it's an error, the observer will ignore it, and Twemoji won't parse at that time.

[pento]

@iseulde: Good idea, I've revised the patch so that onerror is now an option - we can easily contribute that back upstream.

Unfortunately, we need to keep several of the checks in that conditional (need to make sure removedNodes[0] will be defined, and that nodeName === 'IMG', because text nodes don't have the getAttribute() method. I just left the conditional the same in 34640.2.diff​, but if you're comfortable removing some of the checks, I'm cool with that.

[iseulde]

Ah onerror is not an option? Sorry, thought it was since all the other properties were options.

[pento]

Submitted upstream: ​https://github.com/twitter/twemoji/pull/100

[pento]

In 35637:

Emoji: Ensure twemoji kicks in on certain DOM mutations.

Twemoji will replace the img with the emoji character, in the event that the image fails to load. We deliberately avoid trying to change that emoji character when it's changed back. We do need to replace emoji characters that are changed by something other than Twemoji, which this rectifies.

Fixes #34640.