Minimize attribute churn when retranslating DOM Overlays (#354)

Author: zbraniecki

fluent-dom/src/overlay.js

@@ -128,6 +128,18 @@ function overlayChildNodes(fromFragment, toElement) {
   toElement.appendChild(fromFragment);
 }
 
+function hasAttribute(attributes, name) {
+  if (!attributes) {
+    return false;
+  }
+  for (let attr of attributes) {
+    if (attr.name === name) {
+      return true;
+    }
+  }
+  return false;
+}
+
 /**
  * Transplant localizable attributes of an element to another element.
  *
@@ -144,9 +156,11 @@ function overlayAttributes(fromElement, toElement) {
       .split(",").map(i => i.trim())
     : null;
 
-  // Remove existing localizable attributes.
+  // Remove existing localizable attributes if they
+  // will not be used in the new translation.
   for (const attr of Array.from(toElement.attributes)) {
-    if (isAttrNameLocalizable(attr.name, toElement, explicitlyAllowed)) {
+    if (isAttrNameLocalizable(attr.name, toElement, explicitlyAllowed)
+      && !hasAttribute(fromElement.attributes, attr.name)) {
       toElement.removeAttribute(attr.name);
     }
   }
@@ -160,7 +174,8 @@ function overlayAttributes(fromElement, toElement) {
 
   // Set localizable attributes.
   for (const attr of Array.from(fromElement.attributes)) {
-    if (isAttrNameLocalizable(attr.name, toElement, explicitlyAllowed)) {
+    if (isAttrNameLocalizable(attr.name, toElement, explicitlyAllowed)
+      && toElement.getAttribute(attr.name) !== attr.value) {
       toElement.setAttribute(attr.name, attr.value);
     }
   }