bug #1130 [LiveComponent] Workaround for bad behavior with Chrome's translation feature (weaverryan)

This PR was merged into the 2.x branch.

Discussion
----------

[LiveComponent] Workaround for bad behavior with Chrome's translation feature

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | no
| Tickets       | Fix #1120
| License       | MIT

A bit of a hack, but works nicely locally. As `@smnandre` mentioned, Firefox and Safari are already ok, as they modify the page without triggering the MutationObserver or adding any ugly `font` tags ;).

Cheers!

Commits
-------

5204f83 [LiveComponent] Workaround for bad behavior with Chrome's translation feature

Author: weaverryan

src/LiveComponent/assets/dist/Rendering/ExternalMutationTracker.d.ts

@@ -22,4 +22,5 @@ export default class {
     private handleStyleAttributeMutation;
     private handleGenericAttributeMutation;
     private extractStyles;
+    private isElementAddedByTranslation;
 }

src/LiveComponent/assets/dist/live_controller.js

@@ -1565,6 +1565,9 @@ class ExternalMutationTracker {
             if (!this.shouldTrackChangeCallback(element)) {
                 continue;
             }
+            if (this.isElementAddedByTranslation(element)) {
+                continue;
+            }
             let isChangeInAddedElement = false;
             for (const addedElement of this.addedElements) {
                 if (addedElement.contains(element)) {
@@ -1603,6 +1606,9 @@ class ExternalMutationTracker {
                 this.removedElements.splice(this.removedElements.indexOf(node), 1);
                 return;
             }
+            if (this.isElementAddedByTranslation(node)) {
+                return;
+            }
             this.addedElements.push(node);
         });
         mutation.removedNodes.forEach((node) => {
@@ -1711,6 +1717,9 @@ class ExternalMutationTracker {
         });
         return styleObject;
     }
+    isElementAddedByTranslation(element) {
+        return element.tagName === 'FONT' && element.getAttribute('style') === 'vertical-align: inherit;';
+    }
 }
 
 class ChildComponentWrapper {

src/LiveComponent/assets/src/Rendering/ExternalMutationTracker.ts

@@ -75,6 +75,10 @@ export default class {
                 continue;
             }
 
+            if (this.isElementAddedByTranslation(element)) {
+                continue;
+            }
+
             // ignore changes in elements that were externally-added
             let isChangeInAddedElement = false;
             for (const addedElement of this.addedElements) {
@@ -133,6 +137,10 @@ export default class {
                 return;
             }
 
+            if (this.isElementAddedByTranslation(node)) {
+                return;
+            }
+
             this.addedElements.push(node);
         });
 
@@ -293,4 +301,16 @@ export default class {
 
         return styleObject;
     }
+
+    /**
+     * Helps avoid tracking changes by Chrome's translation feature.
+     *
+     * When Chrome translates, it mutates the dom in a way that triggers MutationObserver.
+     * This includes adding new elements wrapped in a <font> tag. This causes live
+     * components to incorrectly think that these new elements should persist through
+     * re-renders, causing duplicate text.
+     */
+    private isElementAddedByTranslation(element: Element): boolean {
+        return element.tagName === 'FONT' && element.getAttribute('style') === 'vertical-align: inherit;'
+    }
 }