Use editor transactions when modifying elements in editor DOM, b=102607, r=brade, sr=kin

editor/ui/dialogs/content/EdAECSSAttributes.js

@@ -139,13 +139,14 @@ function UpdateCSSAttributes()
     else
       styleString += name + ": " + value + "; ";
   }
-  if (styleString.length > 0)
+  if (styleString)
   {
-    gElement.removeAttribute("style");
-    gElement.setAttribute("style",styleString);  // NOTE BUG 18894!!!
+    // Use editor transactions if modifying the element directly in the document
+    doRemoveAttribute("style");
+    doSetAttribute("style", styleString);  // NOTE BUG 18894!!!
   } 
   else if (gElement.getAttribute("style"))
-    gElement.removeAttribute("style");
+    doRemoveAttribute("style");
 }
 
 function RemoveCSSAttribute()

editor/ui/dialogs/content/EdAEHTMLAttributes.js

@@ -161,6 +161,7 @@ function ClearHTMLInputWidgets()
 
 function onSelectHTMLTreeItem()
 {
+dump(" ** Calling onSelectHTMLTreeItem gDoOnSelectTree="+gDoOnSelectTree+"\n");
   if (!gDoOnSelectTree)
     return;
 
@@ -187,6 +188,7 @@ function onSelectHTMLTreeItem()
 
 function onInputHTMLAttributeName()
 {
+dump(" ** Calling onInputHTMLAttributeName\n");
   var attName = TrimString(dialog.AddHTMLAttributeNameInput.value).toLowerCase();
 
   // Clear value widget, but prevent triggering update in tree
@@ -289,6 +291,9 @@ function onInputHTMLAttributeValue()
     // (Do not use "LimitStringLength()" and "forceInteger()"
     //  to avoid multiple reseting of input's value and flickering)
     var selectedItem = dialog.AddHTMLAttributeNameInput.selectedItem;
+
+dump("*** onInputHTMLAttributeValue: selectedItem="+selectedItem+"\n");
+
     if (selectedItem)
     {
       if ( selectedItem.getAttribute("forceOneChar") == "true" &&
@@ -356,14 +361,14 @@ function UpdateHTMLAttributes()
     //  exists for attributes that don't require a value
     // This gets the attribute NODE from the attributes NamedNodeMap
     if (gElement.attributes.getNamedItem(name))
-      gElement.removeAttribute(name);
+      doRemoveAttribute(name);
   }
 
   // Set added or changed attributes
   for( i = 0; i < HTMLAList.childNodes.length; i++)
   {
     var item = HTMLAList.childNodes[i];
-    gElement.setAttribute( GetTreeItemAttributeStr(item), GetTreeItemValueStr(item) );
+    doSetAttribute( GetTreeItemAttributeStr(item), GetTreeItemValueStr(item));
   }
 }
 

editor/ui/dialogs/content/EdAEJSEAttributes.js

@@ -184,7 +184,7 @@ function UpdateJSEAttributes()
   {
     name = JSERAttrs[i];
     if (gElement.getAttribute(name))
-      gElement.removeAttribute(name);
+      doRemoveAttribute(gElement, name);
   }
 
   // Add events
@@ -193,7 +193,7 @@ function UpdateJSEAttributes()
     var item = JSEAList.childNodes[i];
 
     // set the event handler
-    gElement.setAttribute( GetTreeItemAttributeStr(item), GetTreeItemValueStr(item) );
+    doSetAttribute( GetTreeItemAttributeStr(item), GetTreeItemValueStr(item) );
   }
 }
 

editor/ui/dialogs/content/EdAdvancedEdit.js

@@ -123,10 +123,16 @@ function Startup()
  **/
 function onOK()
 {
-  // Update our gElement attributes
-  UpdateHTMLAttributes();
-  UpdateCSSAttributes();
-  UpdateJSEAttributes();
+  editorShell.BeginBatchChanges();
+  try {
+    // Update our gElement attributes
+    UpdateHTMLAttributes();
+    UpdateCSSAttributes();
+    UpdateJSEAttributes();
+  } catch(ex) {
+    dump(ex);
+  }
+  editorShell.EndBatchChanges();
 
   window.opener.AdvancedEditOK = true;
   SaveWindowLocation();
@@ -134,6 +140,25 @@ function onOK()
   return true; // do close the window
 }
 
+// Helpers for removing and setting attributes
+// Use editor transactions if modifying the element already in the document
+// (Temporary element from a property dialog won't have a parent node)
+function doRemoveAttribute(attrib)
+{
+  if (gElement.parentNode)
+    editorShell.RemoveAttribute(gElement, attrib);
+  else
+    gElement.removeAttribute(attrib);
+}
+
+function doSetAttribute(attrib, value)
+{
+  if (gElement.parentNode)
+    editorShell.SetAttribute(gElement, attrib, value);
+  else
+    gElement.setAttribute(attrib, value);
+}
+
 /**
  * function   : bool CheckAttributeNameSimilarity ( string attName, array attArray );
  * parameters : attribute to look for, array of current attributes