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 b370c306e56d354bb79ee383c18a20447d08ffa6..03b0f44bac78b99af85342de3dd3525cd1673096 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeElement.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeElement.js
@@ -757,23 +757,45 @@ Elements.ElementsTreeElement = class extends UI.TreeElement {
     this.listItemElement.classList.add('editing-as-html');
     this.treeOutline.element.addEventListener('mousedown', consume, false);
 
+    self.runtime.extension(UI.TextEditorFactory).instance().then(gotFactory.bind(this));
+
     /**
-     * @param {!Element} element
-     * @param {string} newValue
+     * @param {!UI.TextEditorFactory} factory
      * @this {Elements.ElementsTreeElement}
      */
-    function commit(element, newValue) {
-      commitCallback(initialValue, newValue);
-      dispose.call(this);
+    function gotFactory(factory) {
+      var editor = factory.createEditor({
+        lineNumbers: false,
+        lineWrapping: Common.moduleSetting('domWordWrap').get(),
+        mimeType: 'text/html',
+        autoHeight: false,
+        padBottom: false
+      });
+      this._htmlEditElement.style.width = this.treeOutline.visibleWidth() - this._computeLeftIndent() - 30 + 'px';
+      editor.widget().show(this._htmlEditElement);
+      editor.setText(initialValue);
+      editor.widget().focus();
+      this._editing = {commit: commit.bind(this), cancel: cancel.bind(this), editor: 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 {Elements.ElementsTreeElement}
      */
-    function dispose() {
-      disposeCallback();
+    function commit() {
+      commitCallback(initialValue, this._editing.editor.text());
+      this._editing.cancel();
+    }
+
+    /**
+     * @this {Elements.ElementsTreeElement}
+     */
+    function cancel() {

[lushnikov, 2017/03/01 23:52:48]

let's name this dispose (and call dispose.all(this) in commit())

[einbinder, 2017/03/02 00:25:09]

Done.

+      this._editing.editor.widget().element.removeEventListener('blur', this._editing.commit, true);
+      this._editing.editor.widget().detach();
       delete this._editing;
-      this.treeOutline.setMultilineEditing(null);
 
       this.listItemElement.classList.remove('editing-as-html');
       // Remove editor.
@@ -789,24 +811,28 @@ Elements.ElementsTreeElement = class extends UI.TreeElement {
         child = child.nextSibling;
       }
 
+      disposeCallback();

[lushnikov, 2017/03/01 23:52:47]

let's call this as the very-last line of the method

[einbinder, 2017/03/02 00:25:09]

Done.

+      if (!this.treeOutline)
+        return;
+
       this.treeOutline.element.removeEventListener('mousedown', consume, false);
       this.treeOutline.focus();
     }
 
-    var config = new UI.InplaceEditor.Config(commit.bind(this), dispose.bind(this));
-    config.setMultilineOptions(
-        initialValue, {name: 'xml', htmlMode: true}, 'web-inspector-html', Common.moduleSetting('domWordWrap').get(),
-        true);
-    UI.InplaceEditor.startMultilineEditing(this._htmlEditElement, config).then(markAsBeingEdited.bind(this));
-
     /**
-     * @param {!Object} controller
-     * @this {Elements.ElementsTreeElement}
+     * @param {!Event} event
+     * @this {!Elements.ElementsTreeElement}
      */
-    function markAsBeingEdited(controller) {
-      this._editing = /** @type {!UI.InplaceEditor.Controller} */ (controller);
-      this._editing.setWidth(this.treeOutline.visibleWidth() - this._computeLeftIndent());
-      this.treeOutline.setMultilineEditing(this._editing);
+    function keydown(event) {
+      var isMetaOrCtrl = Host.isMac() ? event.metaKey && !event.shiftKey && !event.ctrlKey && !event.altKey :

[lushnikov, 2017/03/01 23:52:47]

KeyboardShortcuts.eventHasCtrlOrMeta

[einbinder, 2017/03/02 00:25:09]

Done.

+                                        event.ctrlKey && !event.shiftKey && !event.metaKey && !event.altKey;
+      if (isEnterKey(event) && (isMetaOrCtrl || event.isMetaOrCtrlForTest)) {

[lushnikov, 2017/03/01 23:52:48]

Occassionally i hit this exception:

ElementsTreeElement.js:796 Uncaught (in promise) TypeError: Cannot read property
'editor' of undefined
    at Elements.ElementsTreeElement.cancel (ElementsTreeElement.js:796)
    at Elements.ElementsTreeOutline.setVisible (ElementsTreeOutline.js:300)
    at Elements.ElementsPanel.willHide (ElementsPanel.js:342)
    at Elements.ElementsPanel._notify (Widget.js:227)
    at Elements.ElementsPanel._processWillHide (Widget.js:204)
    at UI.ViewManager._ContainerWidget._callOnVisibleChildren (Widget.js:174)
    at UI.ViewManager._ContainerWidget._processWillHide (Widget.js:203)
    at UI.ViewManager._ContainerWidget._hideWidget (Widget.js:347)
    at UI.ViewManager._ContainerWidget.detach (Widget.js:371)
    at UI.TabbedPane._hideTab (TabbedPane.js:788)

[einbinder, 2017/03/02 00:25:09]

Done.

+        event.consume(true);
+        this._editing.commit();
+      } else if (event.keyCode === UI.KeyboardShortcut.Keys.Esc.code || event.key === 'Escape') {
+        event.consume(true);
+        this._editing.cancel();
+      }
     }
   }
 
@@ -1472,7 +1498,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement {
    * @param {boolean=} startEditing
    */
   toggleEditAsHTML(callback, startEditing) {
-    if (this._editing && this._htmlEditElement && UI.isBeingEdited(this._htmlEditElement)) {
+    if (this._editing && this._htmlEditElement) {
       this._editing.commit();
       return;
     }