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);
+    function gotFactory(factory) {
+      var editor = factory.createEditor({
+        lineNumbers: false,
+        lineWrapping: Common.moduleSetting('domWordWrap').get(),
+        mimeType: 'text/html',
+        autoHeight: false,
+        padBottom: false
+      });
+      this._editing =
+          {commit: commit.bind(this), cancel: dispose.bind(this), editor: editor, resize: resize.bind(this)};
+      resize.call(this);
+
+      editor.widget().show(this._htmlEditElement);
+      editor.setText(initialValue);
+      editor.widget().focus();
+      editor.widget().element.addEventListener('blur', this._editing.commit, true);
+      editor.widget().element.addEventListener('keydown', keydown.bind(this), true);
+
+      this.treeOutline.setMultilineEditing(this._editing);
+    }
+
+    /**
+     * @this {Elements.ElementsTreeElement}
+     */
+    function resize() {
+      this._htmlEditElement.style.width = this.treeOutline.visibleWidth() - this._computeLeftIndent() - 30 + 'px';
+      this._editing.editor.onResize();
+    }
+
+    /**
+     * @this {Elements.ElementsTreeElement}
+     */
+    function commit() {
+      commitCallback(initialValue, this._editing.editor.text());
       dispose.call(this);
     }
 
     /**
      * @this {Elements.ElementsTreeElement}
      */
     function dispose() {
-      disposeCallback();
+      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;
       }
 
-      this.treeOutline.element.removeEventListener('mousedown', consume, false);
-      this.treeOutline.focus();
+      if (this.treeOutline) {
+        this.treeOutline.setMultilineEditing(null);
+        this.treeOutline.element.removeEventListener('mousedown', consume, false);
+        this.treeOutline.focus();
+      }
+
+      disposeCallback();
     }
 
-    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 = UI.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!KeyboardEvent} */ (event)) &&
+          !event.altKey && !event.shiftKey;
+      if (isEnterKey(event) && (isMetaOrCtrl || event.isMetaOrCtrlForTest)) {
+        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']);
+
+/** @typedef {{cancel: function(), commit: function(), resize: function(), editor:!UI.TextEditor}} */
+Elements.MultilineEditorController;