Bug 1067318 - live preview of text editor changes in markup view draft
authorJulian Descottes <jdescottes@mozilla.com>
Fri, 10 Feb 2017 13:45:40 +0100
changeset 581147 84c3962d6adf1dac1d41ab2492ed61730fc4f6e9
parent 581146 ff0040fdd61b123a90b2072dd58d540c081f603e
child 581148 6eff0f199756e19a6dcf0510f4a16413358aef9a
push id59782
push userjdescottes@mozilla.com
push dateFri, 19 May 2017 10:02:20 +0000
bugs1067318
milestone55.0a1
Bug 1067318 - live preview of text editor changes in markup view MozReview-Commit-ID: JNV8FkCxpNj
devtools/client/inspector/markup/views/text-container.js
devtools/client/inspector/markup/views/text-editor.js
--- a/devtools/client/inspector/markup/views/text-container.js
+++ b/devtools/client/inspector/markup/views/text-container.js
@@ -27,14 +27,16 @@ function MarkupTextContainer(markupView,
   if (node.nodeType == nodeConstants.TEXT_NODE) {
     this.editor = new TextEditor(this, node, "text");
   } else if (node.nodeType == nodeConstants.COMMENT_NODE) {
     this.editor = new TextEditor(this, node, "comment");
   } else {
     throw new Error("Invalid node for MarkupTextContainer");
   }
 
+  this.tagLine.setAttribute("actor-id", node.actorID);
+
   this.tagLine.appendChild(this.editor.elt);
 }
 
 MarkupTextContainer.prototype = extend(MarkupContainer.prototype, {});
 
 module.exports = MarkupTextContainer;
--- a/devtools/client/inspector/markup/views/text-editor.js
+++ b/devtools/client/inspector/markup/views/text-editor.js
@@ -22,41 +22,43 @@ const INSPECTOR_L10N =
  *         The node being edited.
  * @param  {String} type
  *         The type of editor to build. This can be either 'text' or 'comment'.
  */
 function TextEditor(container, node, type) {
   this.container = container;
   this.markup = this.container.markup;
   this.node = node;
+  this.currentValue = null;
   this._selected = false;
 
   this.buildMarkup(type);
 
   editableField({
     element: this.value,
     stopOnReturn: true,
     trigger: "dblclick",
     multiline: true,
     maxWidth: () => getAutocompleteMaxWidth(this.value, this.container.elt),
     trimOutput: false,
+    change: (val) => {
+      this.node.setNodeValue(val);
+    },
     done: (val, commit) => {
+      let currentValue = this.currentValue;
       if (!commit) {
+        // If we are not committing the value, revert to the previous one.
+        this.node.setNodeValue(currentValue);
         return;
       }
-      this.node.getNodeValue().then(longstr => {
-        longstr.string().then(oldValue => {
-          longstr.release().then(null, console.error);
 
-          this.container.undo.do(() => {
-            this.node.setNodeValue(val);
-          }, () => {
-            this.node.setNodeValue(oldValue);
-          });
-        });
+      this.container.undo.do(() => {
+        this.node.setNodeValue(val);
+      }, () => {
+        this.node.setNodeValue(currentValue);
       });
     },
     cssProperties: getCssProperties(this.markup.toolbox),
     contextMenu: this.markup.inspector.onTextBoxContextMenu
   });
 
   this.update();
 }
@@ -101,16 +103,21 @@ TextEditor.prototype = {
   },
 
   update: function () {
     let longstr = null;
     this.node.getNodeValue().then(ret => {
       longstr = ret;
       return longstr.string();
     }).then(str => {
+      if (!this.value.inplaceEditor) {
+        // only update the currentValue if we are not editing the field.
+        this.currentValue = str;
+      }
+
       longstr.release().then(null, console.error);
       this.value.textContent = str;
 
       let isWhitespace = !/[^\s]/.exec(str);
       this.value.classList.toggle("whitespace", isWhitespace);
 
       let chars = str.replace(/\n/g, "⏎")
                      .replace(/\t/g, "⇥")