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 739 matching lines @@
       child = child.nextSibling;
     }
     // Hide children item.
     if (this.childrenListElement)
       this.childrenListElement.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(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.
       this.listItemElement.removeChild(this._htmlEditElement);
       delete this._htmlEditElement;
       // Unhide children item.
       if (this.childrenListElement)
         this.childrenListElement.style.removeProperty('display');
       // Unhide header items.
       var child = this.listItemElement.firstChild;
       while (child) {
         child.style.removeProperty('display');
         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();
+      }
     }
   }
 
   _attributeEditingCommitted(element, newText, oldText, attributeName, moveDirection) {
     delete this._editing;
 
     var treeOutline = this.treeOutline;
 
     /**
      * @param {?Protocol.Error=} error
@@ skipping 645 matching lines @@
     if (!this._node.parentNode || this._node.parentNode.nodeType() === Node.DOCUMENT_NODE)
       return;
     this._node.removeNode();
   }
 
   /**
    * @param {function(boolean)=} callback
    * @param {boolean=} startEditing
    */
   toggleEditAsHTML(callback, startEditing) {
-    if (this._editing && this._htmlEditElement && UI.isBeingEdited(this._htmlEditElement)) {
+    if (this._editing && this._htmlEditElement) {
       this._editing.commit();
       return;
     }
 
     if (startEditing === false)
       return;
 
     /**
      * @param {?Protocol.Error} error
      */
@@ skipping 80 matching lines @@
 
 // A union of HTML4 and HTML5-Draft elements that explicitly
 // or implicitly (for HTML5) forbid the closing tag.
 Elements.ElementsTreeElement.ForbiddenClosingTagElements = new Set([
   'area', 'base',  'basefont', 'br',   'canvas',   'col',  'command', 'embed',  'frame', 'hr',
   'img',  'input', 'keygen',   'link', 'menuitem', 'meta', 'param',   'source', 'track', 'wbr'
 ]);
 
 // These tags we do not allow editing their tag name.
 Elements.ElementsTreeElement.EditTagBlacklist = new Set(['html', 'head', 'body']);