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

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

Index: third_party/WebKit/Source/devtools/front_end/ui/CSSShadowEditor.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/CSSShadowEditor.js b/third_party/WebKit/Source/devtools/front_end/ui/CSSShadowEditor.js
index f6c52635affdea46b2c5758404ff54a8f943ac53..242265ae1899acace03ecd6d9144099ea5735d36 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/CSSShadowEditor.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/CSSShadowEditor.js
@@ -62,6 +62,8 @@ WebInspector.CSSShadowEditor.prototype = {
         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;
@@ -125,6 +127,41 @@ WebInspector.CSSShadowEditor.prototype = {
     /**
      * @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;