DevTools: Replace multiline InplaceEditor with CodeMirrorTextEditor

third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeElement.js

Index: third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeElement.js
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeElement.js b/third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeElement.js
index d722dde46065877c64aaa632d4fb50b1a1a9ea89..fef85fb3924bb8ee9921d422847a305096dfbbbd 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeElement.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeElement.js
@@ -808,58 +808,95 @@ WebInspector.ElementsTreeElement.prototype = {
         this.listItemElement.classList.add("editing-as-html");
         this.treeOutline.element.addEventListener("mousedown", consume, false);
 
-        /**
-         * @param {!Element} element
-         * @param {string} newValue
-         * @this {WebInspector.ElementsTreeElement}
-         */
-        function commit(element, newValue)
-        {
-            commitCallback(initialValue, newValue);
-            dispose.call(this);
-        }
+        self.runtime.extension(WebInspector.TextEditorFactory).instance().then(gotFactory.bind(this));
 
         /**
+         * @param {!WebInspector.TextEditorFactory} factory
          * @this {WebInspector.ElementsTreeElement}
          */
-        function dispose()
+        function gotFactory(factory)
         {
-            disposeCallback();
-            delete this._editing;
-            this.treeOutline.setMultilineEditing(null);
-
-            this.listItemElement.classList.remove("editing-as-html");
-            // Remove editor.
-            this.listItemElement.removeChild(this._htmlEditElement);
-            delete this._htmlEditElement;
-            // Unhide children item.
-            if (this._childrenListNode)
-                this._childrenListNode.style.removeProperty("display");
-            // Unhide header items.
-            var child = this.listItemElement.firstChild;
-            while (child) {
-                child.style.removeProperty("display");
-                child = child.nextSibling;
+            var editor = factory.createEditor({
+                lineNumbers: false,
+                lineWrapping: WebInspector.moduleSetting("domWordWrap").get(),
+                mimeType: "text/html",
+                autoHeight: false
+            });
+            this._htmlEditElement.classList.toggle("multiline-editor", true);

[lushnikov, 2016/09/27 18:28:40]

can we re-use existing css class for this?

[einbinder, 2016/09/29 17:36:50]

Done.

+            editor.widget().show(this._htmlEditElement);
+            editor.setText(initialValue);
+            editor.widget().focus();
+            var cancelled = false;
+            this._editing = {
+                commit: commit.bind(this),
+                cancel: cancel.bind(this),
+                editorForTest: editor
             }
+            this.treeOutline.setMultilineEditing(this._editing);
+            editor.widget().element.addEventListener("blur", this._editing.commit, true);
+            editor.widget().element.addEventListener("keydown", keydown.bind(this), true);
 
-            this.treeOutline.element.removeEventListener("mousedown", consume, false);
-            this.treeOutline.focus();
-        }
+            /**
+             * @this {WebInspector.ElementsTreeElement}
+             */
+            function cancel()
+            {
+                if (cancelled)

[lushnikov, 2016/09/27 18:28:41]

maybe you can remove blur listener somewhere?

[einbinder, 2016/09/29 17:36:51]

Done.

+                    return;
+                cancelled = true;
+                editor.widget().detach();
+                this._htmlEditElement.classList.toggle("multiline-editor", false);

[lushnikov, 2016/09/27 18:28:41]

you probably can just throw away the this._htmlEditElement

[einbinder, 2016/09/29 17:36:51]

done.

+                disposeCallback();

[lushnikov, 2016/09/27 18:28:41]

can we move this to the very end of the cancel function()

[einbinder, 2016/09/29 17:36:50]

We can move to to right before we focus the treeOutline.

+                delete this._editing;
+
+                this.listItemElement.classList.remove("editing-as-html");
+                // Remove editor.
+                this.listItemElement.removeChild(this._htmlEditElement);
+                delete this._htmlEditElement;
+                // Unhide children item.
+                if (this._childrenListNode)
+                    this._childrenListNode.style.removeProperty("display");
+                // Unhide header items.
+                var child = this.listItemElement.firstChild;
+                while (child) {
+                    child.style.removeProperty("display");
+                    child = child.nextSibling;
+                }
 
-        var config = new WebInspector.InplaceEditor.Config(commit.bind(this), dispose.bind(this));
-        config.setMultilineOptions(initialValue, { name: "xml", htmlMode: true }, "web-inspector-html", WebInspector.moduleSetting("domWordWrap").get(), true);
-        WebInspector.InplaceEditor.startMultilineEditing(this._htmlEditElement, config).then(markAsBeingEdited.bind(this));
+                if (!this.treeOutline)
+                    return;
+                this.treeOutline.element.removeEventListener("mousedown", consume, false);
+                this.treeOutline.focus();
+            }
 
-        /**
-         * @param {!Object} controller
-         * @this {WebInspector.ElementsTreeElement}
-         */
-        function markAsBeingEdited(controller)
-        {
-            this._editing = /** @type {!WebInspector.InplaceEditor.Controller} */ (controller);
-            this._editing.setWidth(this.treeOutline.visibleWidth());
-            this.treeOutline.setMultilineEditing(this._editing);
+            /**
+             * @this {WebInspector.ElementsTreeElement}
+             */
+            function commit()
+            {
+                if (cancelled)
+                    return;
+                commitCallback(initialValue, editor.text());
+                this._editing.cancel.call(this);
+            }
+
+            /**
+             * @param {!Event} event
+             * @this {WebInspector.ElementsTreeElement}
+             */
+            function keydown(event)
+            {
+                var isMetaOrCtrl = WebInspector.isMac() ?
+                    event.metaKey && !event.shiftKey && !event.ctrlKey && !event.altKey :
+                    event.ctrlKey && !event.shiftKey && !event.metaKey && !event.altKey;
+
+                if (isEnterKey(event) && (isMetaOrCtrl || event.isMetaOrCtrlForTest))
+                    this._editing.commit();
+                else if (event.key === "Escape")
+                    this._editing.cancel();
+            }
         }
+
     },
 
     _attributeEditingCommitted: function(element, newText, oldText, attributeName, moveDirection)
@@ -1534,7 +1571,7 @@ WebInspector.ElementsTreeElement.prototype = {
      */
     toggleEditAsHTML: function(callback, startEditing)
     {
-        if (this._editing && this._htmlEditElement && WebInspector.isBeingEdited(this._htmlEditElement)) {
+        if (this._editing && this._htmlEditElement) {
             this._editing.commit();
             return;
         }