DevTools: [Elements] F2 should commit changes in edit-as-html

Source/devtools/front_end/ui/InplaceEditor.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  */
 WebInspector.InplaceEditor = function()
 {
 }
@@ skipping 151 matching lines @@
         }
 
         /** @this {Element} */
         function editingCommitted()
         {
             cleanUpAfterEditing();
 
             committedCallback(this, self.editorContent(editingContext), editingContext.oldText, context, moveDirection);
         }
 
+        /**
+         * @param {!Event} event
+         * @return {string}
+         */
         function defaultFinishHandler(event)
         {
             var isMetaOrCtrl = WebInspector.isMac() ?
                 event.metaKey && !event.shiftKey && !event.ctrlKey && !event.altKey :
                 event.ctrlKey && !event.shiftKey && !event.metaKey && !event.altKey;
             if (isEnterKey(event) && (event.isMetaOrCtrlForTest || !isMultiline || isMetaOrCtrl))
                 return "commit";
             else if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code || event.keyIdentifier === "U+001B")
                 return "cancel";
             else if (!isMultiline && event.keyIdentifier === "U+0009") // Tab key
                 return "move-" + (event.shiftKey ? "backward" : "forward");
+            return "";
         }
 
         function handleEditingResult(result, event)
         {
             if (result === "commit") {
                 editingCommitted.call(element);
                 event.consume(true);
             } else if (result === "cancel") {
                 editingCancelled.call(element);
                 event.consume(true);
             } else if (result && result.startsWith("move-")) {
                 moveDirection = result.substring(5);
                 if (event.keyIdentifier !== "U+0009")
                     blurEventListener();
             }
         }
 
+        /**
+         * @param {!Event} event
+         */
         function pasteEventListener(event)
         {
             var result = pasteCallback(event);
             handleEditingResult(result, event);
         }
 
+        /**
+         * @param {!Event} event
+         */
         function keyDownEventListener(event)
         {
-            var handler = config.customFinishHandler || defaultFinishHandler;
-            var result = handler(event);
+            var result = defaultFinishHandler(event);
+            if (!result && config.postKeydownFinishHandler)
+                result = config.postKeydownFinishHandler(event);
             handleEditingResult(result, event);
         }
 
         element.addEventListener("blur", blurEventListener, isMultiline);
         element.addEventListener("keydown", keyDownEventListener, true);
         if (pasteCallback)
             element.addEventListener("paste", pasteEventListener, true);
 
         var handle = {
             cancel: editingCancelled.bind(element),
@@ skipping 14 matching lines @@
  * @template T
  */
 WebInspector.InplaceEditor.Config = function(commitHandler, cancelHandler, context, blurHandler)
 {
     this.commitHandler = commitHandler;
     this.cancelHandler = cancelHandler;
     this.context = context;
     this.blurHandler = blurHandler;
 
     /**
-     * Handles the "paste" event, return values are the same as those for customFinishHandler
-     * @type {function(!Element)|undefined}
+     * @type {function(!Event):string|undefined}
      */
     this.pasteHandler;
 
     /**
-     * Whether the edited element is multiline
      * @type {boolean|undefined}
      */
     this.multiline;
 
     /**
-     * Custom finish handler for the editing session (invoked on keydown)
-     * @type {function(!Element,*)|undefined}
+     * @type {function(!Event):string|undefined}
      */
-    this.customFinishHandler;
+    this.postKeydownFinishHandler;
 }
 
 WebInspector.InplaceEditor.Config.prototype = {
     setPasteHandler: function(pasteHandler)
     {
         this.pasteHandler = pasteHandler;
     },
 
     /**
      * @param {string} initialValue
      * @param {!Object} mode
      * @param {string} theme
      * @param {boolean=} lineWrapping
      * @param {boolean=} smartIndent
      */
     setMultilineOptions: function(initialValue, mode, theme, lineWrapping, smartIndent)
     {
         this.multiline = true;
         this.initialValue = initialValue;
         this.mode = mode;
         this.theme = theme;
         this.lineWrapping = lineWrapping;
         this.smartIndent = smartIndent;
     },
 
-    setCustomFinishHandler: function(customFinishHandler)
+    /**
+     * @param {function(!Event):string} postKeydownFinishHandler
+     */
+    setPostKeydownFinishHandler: function(postKeydownFinishHandler)
     {
-        this.customFinishHandler = customFinishHandler;
+        this.postKeydownFinishHandler = postKeydownFinishHandler;
     }
 }