Bug 1067318 - live preview of text editor changes in markup view
MozReview-Commit-ID: JNV8FkCxpNj
--- 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, "⇥")