From a9f58f6f5f9b90aeeda116ad75e4d5dab38d083c Mon Sep 17 00:00:00 2001
From: N Bosma <dev.nibo@gmail.com>
Date: Fri, 26 Oct 2012 14:07:00 +0300
Subject: [PATCH] Bug 804400 - Inspector stops updating when badly formed
 attribute input is given in the markup panel. r=dcamp

---
 browser/devtools/markupview/MarkupView.jsm    | 23 +++++--
 .../test/browser_inspector_markup_edit.html   |  3 +
 .../test/browser_inspector_markup_edit.js     | 60 +++++++++++++++++++
 3 files changed, 80 insertions(+), 6 deletions(-)

diff --git a/browser/devtools/markupview/MarkupView.jsm b/browser/devtools/markupview/MarkupView.jsm
index f52d2fd0eb4..dacb62a914f 100644
--- a/browser/devtools/markupview/MarkupView.jsm
+++ b/browser/devtools/markupview/MarkupView.jsm
@@ -867,7 +867,11 @@ function ElementEditor(aContainer, aNode)
         return;
       }
 
-      this._applyAttributes(aVal);
+      try {
+        this._applyAttributes(aVal);
+      } catch (x) {
+        return;
+      }
     }.bind(this)
   });
 
@@ -962,11 +966,16 @@ ElementEditor.prototype = {
           this.undo.startBatch();
 
           // Remove the attribute stored in this editor and re-add any attributes
-          // parsed out of the input element.
-          this._removeAttribute(this.node, aAttr.name)
-          this._applyAttributes(aVal, attr);
-
-          this.undo.endBatch();
+          // parsed out of the input element. Restore original attribute if
+          // parsing fails.
+          this._removeAttribute(this.node, aAttr.name);
+          try {
+            this._applyAttributes(aVal, attr);
+            this.undo.endBatch();
+          } catch (e) {
+            this.undo.endBatch();
+            this.undo.undo();
+          }
         }.bind(this)
       });
 
@@ -987,6 +996,7 @@ ElementEditor.prototype = {
    * @param Element aAttrNode the attribute editor that created this
    *        set of attributes, used to place new attributes where the
    *        user put them.
+   * @throws SYNTAX_ERR if aValue is not well-formed.
    */
   _applyAttributes: function EE__applyAttributes(aValue, aAttrNode)
   {
@@ -996,6 +1006,7 @@ ElementEditor.prototype = {
     let parseTag = (this.node.namespaceURI.match(/svg/i) ? "svg" :
                    (this.node.namespaceURI.match(/mathml/i) ? "math" : "div"));
     let parseText = "<" + parseTag + " " + aValue + "/>";
+    // Throws exception if parseText is not well-formed.
     dummyNode.innerHTML = parseText;
     let parsedNode = dummyNode.firstChild;
 
diff --git a/browser/devtools/markupview/test/browser_inspector_markup_edit.html b/browser/devtools/markupview/test/browser_inspector_markup_edit.html
index cd8d30a50e3..a199cc48528 100644
--- a/browser/devtools/markupview/test/browser_inspector_markup_edit.html
+++ b/browser/devtools/markupview/test/browser_inspector_markup_edit.html
@@ -33,6 +33,9 @@
         </div>
       </div>
     </div>
+    <div id="node22" class="unchanged"></div>
+    <div id="node23"></div>
+    <div id="node24"></div>
     <div id="retag-me">
       <div id="retag-me-2"></div>
     </div>
diff --git a/browser/devtools/markupview/test/browser_inspector_markup_edit.js b/browser/devtools/markupview/test/browser_inspector_markup_edit.js
index 5445a2c477a..280f025dce5 100644
--- a/browser/devtools/markupview/test/browser_inspector_markup_edit.js
+++ b/browser/devtools/markupview/test/browser_inspector_markup_edit.js
@@ -73,6 +73,28 @@ function test() {
       }
     },
 
+    // Try change an attribute to a badly formed string
+    {
+      before: function() {
+        assertAttributes(doc.querySelector("#node22"), {
+          id: "node22",
+          class: "unchanged"
+        });
+      },
+      execute: function() {
+        let editor = markup.getContainer(doc.querySelector("#node22")).editor;
+        let attr = editor.attrs["class"].querySelector(".editable");
+        editField(attr, 'class="""');
+      },
+      after: function() {
+        assertAttributes(doc.querySelector("#node22"), {
+          id: "node22",
+          class: "unchanged"
+        });
+      }
+    },
+
+
     // Remove an attribute
     {
       before: function() {
@@ -114,6 +136,25 @@ function test() {
       }
     },
 
+    // Try add a badly formed attribute by clicking the empty space after a node
+    {
+      before: function() {
+        assertAttributes(doc.querySelector("#node23"), {
+          id: "node23",
+        });
+      },
+      execute: function() {
+        let editor = markup.getContainer(doc.querySelector("#node23")).editor;
+        let attr = editor.newAttr;
+        editField(attr, 'class="newclass" style="""');
+      },
+      after: function() {
+        assertAttributes(doc.querySelector("#node23"), {
+          id: "node23",
+        });
+      }
+    },
+
     // Add attributes by adding to an existing attribute's entry
     {
       setup: function() {
@@ -140,6 +181,25 @@ function test() {
       }
     },
 
+    // Try add attributes by adding to an existing attribute's entry
+    {
+      before: function() {
+        assertAttributes(doc.querySelector("#node24"), {
+          id: "node24",
+        });
+      },
+      execute: function() {
+        let editor = markup.getContainer(doc.querySelector("#node24")).editor;
+        let attr = editor.attrs["id"].querySelector(".editable");
+        editField(attr, attr.textContent + ' class="""');
+      },
+      after: function() {
+        assertAttributes(doc.querySelector("#node24"), {
+          id: "node24",
+        });
+      }
+    },
+
     // Remove an element with the delete key
     {
       before: function() {