DevTools: [SSP] fix live edit of property values

Source/devtools/front_end/elements/StylesSidebarPane.js

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * 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
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 2661 matching lines @@
  * @param {boolean} overloaded
  */
 WebInspector.StylePropertyTreeElement = function(stylesPane, styleRule, style, property, isShorthand, inherited, overloaded)
 {
     WebInspector.StylePropertyTreeElementBase.call(this, styleRule, style, property, inherited, overloaded, isShorthand);
     this._parentPane = stylesPane;
     this.isShorthand = isShorthand;
     this._applyStyleThrottler = new WebInspector.Throttler(0);
 }
 
+/** @typedef {{expanded: boolean, hasChildren: boolean, isEditingName: boolean, previousContent: string}} */
+WebInspector.StylePropertyTreeElement.Context;
+
 WebInspector.StylePropertyTreeElement.prototype = {
     /**
      * @return {?WebInspector.DOMNode}
      */
     node: function()
     {
         return this._parentPane._node;
     },
 
     /**
@@ skipping 245 matching lines @@
                 return fieldValue;
             var modelUrlRegex = new RegExp(urlRegex);
             for (var i = 1; i < splitFieldValue.length; i += 2) {
                 var match = modelUrlRegex.exec(modelValue);
                 if (match)
                     splitFieldValue[i] = match[0];
             }
             return splitFieldValue.join("");
         }
 
+        /** @type {!WebInspector.StylePropertyTreeElement.Context} */
         var context = {
             expanded: this.expanded,
             hasChildren: this.hasChildren,
             isEditingName: isEditingName,
             previousContent: selectElement.textContent
         };
 
         // Lie about our children to prevent expanding on double click and to collapse shorthands.
         this.hasChildren = false;
 
         if (selectElement.parentElement)
             selectElement.parentElement.classList.add("child-editing");
         selectElement.textContent = selectElement.textContent; // remove color swatch and the like
 
         /**
+         * @param {!WebInspector.StylePropertyTreeElement.Context} context
+         * @param {!Event} event
          * @this {WebInspector.StylePropertyTreeElement}
          */
         function pasteHandler(context, event)
         {
             var data = event.clipboardData.getData("Text");
             if (!data)
                 return;
             var colonIdx = data.indexOf(":");
             if (colonIdx < 0)
                 return;
@@ skipping 10 matching lines @@
             this.property.value = value;
             this.nameElement.textContent = name;
             this.valueElement.textContent = value;
             this.nameElement.normalize();
             this.valueElement.normalize();
 
             this.editingCommitted(event.target.textContent, context, "forward");
         }
 
         /**
+         * @param {!WebInspector.StylePropertyTreeElement.Context} context
+         * @param {!Event} event
          * @this {WebInspector.StylePropertyTreeElement}
          */
         function blurListener(context, event)
         {
             var treeElement = this._parentPane._mouseDownTreeElement;
             var moveDirection = "";
             if (treeElement === this) {
                 if (isEditingName && this._parentPane._mouseDownTreeElementIsValue)
                     moveDirection = "forward";
                 if (!isEditingName && this._parentPane._mouseDownTreeElementIsName)
@@ skipping 10 matching lines @@
 
         var applyItemCallback = !isEditingName ? this._applyFreeFlowStyleTextEdit.bind(this) : undefined;
         this._prompt = new WebInspector.StylesSidebarPane.CSSPropertyPrompt(isEditingName ? WebInspector.CSSMetadata.cssPropertiesMetainfo : WebInspector.CSSMetadata.keywordsForProperty(this.nameElement.textContent), this, isEditingName);
         this._prompt.setAutocompletionTimeout(0);
         if (applyItemCallback) {
             this._prompt.addEventListener(WebInspector.TextPrompt.Events.ItemApplied, applyItemCallback, this);
             this._prompt.addEventListener(WebInspector.TextPrompt.Events.ItemAccepted, applyItemCallback, this);
         }
         var proxyElement = this._prompt.attachAndStartEditing(selectElement, blurListener.bind(this, context));
 
-        proxyElement.addEventListener("keydown", this.editingNameValueKeyDown.bind(this, context), false);
-        proxyElement.addEventListener("keypress", this.editingNameValueKeyPress.bind(this, context), false);
+        proxyElement.addEventListener("keydown", this._editingNameValueKeyDown.bind(this, context), false);
+        proxyElement.addEventListener("keypress", this._editingNameValueKeyPress.bind(this, context), false);
+        proxyElement.addEventListener("input", this._editingNameValueInput.bind(this, context), false);
         if (isEditingName)
             proxyElement.addEventListener("paste", pasteHandler.bind(this, context), false);
 
         window.getSelection().setBaseAndExtent(selectElement, 0, selectElement, 1);
     },
 
-    editingNameValueKeyDown: function(context, event)
+    /**
+     * @param {!WebInspector.StylePropertyTreeElement.Context} context
+     * @param {!Event} event
+     */
+    _editingNameValueKeyDown: function(context, event)
     {
         if (event.handled)
             return;
 
-        var isEditingName = context.isEditingName;
         var result;
 
         if (isEnterKey(event)) {
             event.preventDefault();
             result = "forward";
         } else if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code || event.keyIdentifier === "U+001B")
             result = "cancel";
-        else if (!isEditingName && this._newProperty && event.keyCode === WebInspector.KeyboardShortcut.Keys.Backspace.code) {
+        else if (!context.isEditingName && this._newProperty && event.keyCode === WebInspector.KeyboardShortcut.Keys.Backspace.code) {
             // For a new property, when Backspace is pressed at the beginning of new property value, move back to the property name.
             var selection = window.getSelection();
             if (selection.isCollapsed && !selection.focusOffset) {
                 event.preventDefault();
                 result = "backward";
             }
         } else if (event.keyIdentifier === "U+0009") { // Tab key.
             result = event.shiftKey ? "backward" : "forward";
             event.preventDefault();
         }
 
         if (result) {
             switch (result) {
             case "cancel":
                 this.editingCancelled(null, context);
                 break;
             case "forward":
             case "backward":
                 this.editingCommitted(event.target.textContent, context, result);
                 break;
             }
 
             event.consume();
             return;
         }
-
-        if (!isEditingName)
-            this._applyFreeFlowStyleTextEdit();
     },
 
-    editingNameValueKeyPress: function(context, event)
+    /**
+     * @param {!WebInspector.StylePropertyTreeElement.Context} context
+     * @param {!Event} event
+     */
+    _editingNameValueKeyPress: function(context, event)
     {
         function shouldCommitValueSemicolon(text, cursorPosition)
         {
             // FIXME: should this account for semicolons inside comments?
             var openQuote = "";
             for (var i = 0; i < cursorPosition; ++i) {
                 var ch = text[i];
                 if (ch === "\\" && openQuote !== "")
                     ++i; // skip next character inside string
                 else if (!openQuote && (ch === "\"" || ch === "'"))
                     openQuote = ch;
                 else if (openQuote === ch)
                     openQuote = "";
             }
             return !openQuote;
         }
 
         var keyChar = String.fromCharCode(event.charCode);
         var isFieldInputTerminated = (context.isEditingName ? keyChar === ":" : keyChar === ";" && shouldCommitValueSemicolon(event.target.textContent, event.target.selectionLeftOffset()));
         if (isFieldInputTerminated) {
             // Enter or colon (for name)/semicolon outside of string (for value).
             event.consume(true);
             this.editingCommitted(event.target.textContent, context, "forward");
             return;
         }
     },
 
+    /**
+     * @param {!WebInspector.StylePropertyTreeElement.Context} context
+     * @param {!Event} event
+     */
+    _editingNameValueInput: function(context, event)
+    {
+        if (!context.isEditingName)

[apavlov, 2014/10/13 13:39:48]

You may want to check that the value has actually been updated here.

[lushnikov, 2014/10/13 14:38:23]

The check is performed in the innerApplyStyleText to avoid unnecessary
roundtrip.

+            this._applyFreeFlowStyleTextEdit();
+    },
+
     _applyFreeFlowStyleTextEdit: function()
     {
         var valueText = this.valueElement.textContent;
         if (valueText.indexOf(";") === -1)
             this.applyStyleText(this.nameElement.textContent + ": " + valueText, false, false, false);
     },
 
     kickFreeFlowStyleEditForTest: function()
     {
         this._applyFreeFlowStyleTextEdit();
@@ skipping 447 matching lines @@
         if (userEnteredText && (userEnteredText === userEnteredText.toUpperCase())) {
             for (var i = 0; i < results.length; ++i)
                 results[i] = results[i].toUpperCase();
         }
         var selectedIndex = this._cssCompletions.mostUsedOf(results);
         completionsReadyCallback(results, selectedIndex);
     },
 
     __proto__: WebInspector.TextPrompt.prototype
 }