DevTools: Allow shadow-editor value manipulation with arrow keys and mousewheel

third_party/WebKit/Source/devtools/front_end/ui/CSSShadowEditor.js

 // Copyright 2016 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
  * @extends {WebInspector.VBox}
  */
 WebInspector.CSSShadowEditor = function()
 {
@@ skipping 44 matching lines @@
      */
     _createSliderField: function(propertyName, negativeAllowed)
     {
         var field = this.contentElement.createChild("div", "shadow-editor-field");
         var label = field.createChild("label", "shadow-editor-label");
         label.textContent = propertyName;
         label.setAttribute("for", propertyName);
         var textInput = field.createChild("input", "shadow-editor-text-input");
         textInput.type = "text";
         textInput.id = propertyName;
+        textInput.addEventListener("keydown", this._handleValueModification.bind(this), false);
+        textInput.addEventListener("mousewheel", this._handleValueModification.bind(this), false);
         textInput.addEventListener("input", this._onTextInput.bind(this), false);
         textInput.addEventListener("blur", this._onTextBlur.bind(this), false);
         var halfRange = WebInspector.CSSShadowEditor.maxRange / 2;
         var slider = negativeAllowed ? createSliderLabel(-halfRange, halfRange) : createSliderLabel(0, WebInspector.CSSShadowEditor.maxRange);
         slider.addEventListener("input", this._onSliderInput.bind(this), false);
         field.appendChild(slider);
         return {field: field, textInput: textInput, rangeInput: slider};
     },
 
     /**
@@ skipping 43 matching lines @@
         if (insetClicked && this._model.inset() || !insetClicked && !this._model.inset())
             return;
         this._model.setInset(insetClicked);
         this._updateButtons();
         this.dispatchEventToListeners(WebInspector.CSSShadowEditor.Events.ShadowChanged, this._model);
     },
 
     /**
      * @param {!Event} event
      */
+    _handleValueModification: function(event)
+    {
+        var arrowKeyOrMouseWheelEvent = (event.key === "ArrowUp" || event.key === "ArrowDown" || event.type === "mousewheel");
+        var pageKeyPressed = (event.key === "PageUp" || event.key === "PageDown");
+        if (!arrowKeyOrMouseWheelEvent && !pageKeyPressed)

[dgozman, 2016/08/26 19:10:58]

Doesn't createReplacementString check this for you?

[flandy, 2016/08/26 19:25:59]

No, it's checked one level higher in WI.handleElementValueModifications.

[dgozman, 2016/08/26 20:49:35]

If it doesn't, we should make it. But I think it does:
https://cs.chromium.org/chromium/src/third_party/WebKit/Source/devtools/front...

[flandy, 2016/08/26 22:19:42]

Yes, that can be used if we also return null from
_modifiedFloatNumber/_modifiedHexValue.

+            return;
+        var modifiedValue = WebInspector.createReplacementString(event.currentTarget.value, event, customNumberHandler);
+        if (!modifiedValue)
+            return;
+        var length = WebInspector.CSSLength.parse(modifiedValue);
+        if (!length)
+            return;
+        if (event.currentTarget === this._blurInput && length.amount < 0)
+            length.amount = 0;
+        event.currentTarget.value = length.asCSSText();
+        this._onTextInput(event);
+        event.consume(true);
+
+        /**
+         * @param {string} prefix
+         * @param {number} number
+         * @param {string} suffix
+         * @return {string}
+         */
+        function customNumberHandler(prefix, number, suffix)
+        {
+            if (!suffix.length)
+                suffix = WebInspector.CSSShadowEditor.defaultUnit;
+            return prefix + number + suffix;
+        }
+    },
+
+    /**
+     * @param {!Event} event
+     */
     _onTextInput: function(event)
     {
         this._changedElement = event.currentTarget;
         this._changedElement.classList.toggle("invalid", false);
         var length = WebInspector.CSSLength.parse(event.currentTarget.value);
         if (!length || event.currentTarget === this._blurInput && length.amount < 0)
             return;
         if (event.currentTarget === this._xInput) {
             this._model.setOffsetX(length);
             this._xSlider.value = length.amount;
@@ skipping 65 matching lines @@
         } else if (event.currentTarget === this._spreadSlider) {
             this._model.setSpreadRadius(new WebInspector.CSSLength(this._spreadSlider.value, this._model.spreadRadius().unit || WebInspector.CSSShadowEditor.defaultUnit));
             this._spreadInput.value = this._model.spreadRadius().asCSSText();
             this._spreadInput.classList.toggle("invalid", false);
         }
         this.dispatchEventToListeners(WebInspector.CSSShadowEditor.Events.ShadowChanged, this._model);
     },
 
     __proto__: WebInspector.VBox.prototype
 }