DevTools: Replace multiline InplaceEditor with CodeMirrorTextEditor

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

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 790 matching lines @@
             child = child.nextSibling;
         }
         // Hide children item.
         if (this._childrenListNode)
             this._childrenListNode.style.display = "none";
         // Append editor.
         this.listItemElement.appendChild(this._htmlEditElement);
         this.listItemElement.classList.add("editing-as-html");
         this.treeOutline.element.addEventListener("mousedown", consume, false);
 
+        self.runtime.extension(WebInspector.TextEditorFactory).instance().then(gotFactory.bind(this));
+
         /**
-         * @param {!Element} element
-         * @param {string} newValue
+         * @param {!WebInspector.TextEditorFactory} factory
          * @this {WebInspector.ElementsTreeElement}
          */
-        function commit(element, newValue)
+        function gotFactory(factory)
         {
-            commitCallback(initialValue, newValue);
-            dispose.call(this);
+            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 {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;
+                }
+
+                if (!this.treeOutline)
+                    return;
+                this.treeOutline.element.removeEventListener("mousedown", consume, false);
+                this.treeOutline.focus();
+            }
+
+            /**
+             * @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();
+            }
         }
 
-        /**
-         * @this {WebInspector.ElementsTreeElement}
-         */
-        function dispose()
-        {
-            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;
-            }
-
-            this.treeOutline.element.removeEventListener("mousedown", consume, false);
-            this.treeOutline.focus();
-        }
-
-        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));
-
-        /**
-         * @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);
-        }
     },
 
     _attributeEditingCommitted: function(element, newText, oldText, attributeName, moveDirection)
     {
         delete this._editing;
 
         var treeOutline = this.treeOutline;
 
         /**
          * @param {?Protocol.Error=} error
@@ skipping 654 matching lines @@
             return;
         this._node.removeNode();
     },
 
     /**
      * @param {function(boolean)=} callback
      * @param {boolean=} startEditing
      */
     toggleEditAsHTML: function(callback, startEditing)
     {
-        if (this._editing && this._htmlEditElement && WebInspector.isBeingEdited(this._htmlEditElement)) {
+        if (this._editing && this._htmlEditElement) {
             this._editing.commit();
             return;
         }
 
         if (startEditing === false)
             return;
 
         /**
          * @param {?Protocol.Error} error
          */
@@ skipping 78 matching lines @@
     },
 
     _editAsHTML: function()
     {
         var promise = WebInspector.Revealer.revealPromise(this.node());
         promise.then(() => WebInspector.actionRegistry.action("elements.edit-as-html").execute());
     },
 
     __proto__: TreeElement.prototype
 }