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

third_party/WebKit/Source/devtools/front_end/components/Spectrum.js

 /*
  * Copyright (C) 2011 Brian Grinstead All rights reserved.
  *
  * 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.
  * 2.  Redistributions in binary form must reproduce the above copyright
@@ skipping 805 matching lines @@
         /**
          * @param {!Element} element
          * @return {string}
          */
         function elementValue(element)
         {
             return element.value;
         }
 
         var inputElement = /** @type {!Element} */(event.currentTarget);
-        var arrowKeyOrMouseWheelEvent = (event.key === "ArrowUp" || event.key === "ArrowDown" || event.type === "mousewheel");
-        var pageKeyPressed = (event.key === "PageUp" || event.key === "PageDown");
-        if (arrowKeyOrMouseWheelEvent || pageKeyPressed) {
-            var newValue = WebInspector.createReplacementString(inputElement.value, event);
-            if (newValue) {
-                inputElement.value = newValue;
-                inputElement.selectionStart = 0;
-                inputElement.selectionEnd = newValue.length;
-            }
+        var newValue = WebInspector.createReplacementString(inputElement.value, event);
+        if (newValue) {
+            inputElement.value = newValue;
+            inputElement.selectionStart = 0;
+            inputElement.selectionEnd = newValue.length;
             event.consume(true);
         }
 
         const cf = WebInspector.Color.Format;
         var colorString;
         if (this._colorFormat === cf.HEX || this._colorFormat === cf.ShortHEX) {
             colorString = this._hexValue.value;
         } else {
             var format = this._colorFormat === cf.RGB ? "rgba" : "hsla";
-            var values = this._textValues.map(elementValue).join(",");
+            var values = this._textValues.map(elementValue).join(", ");
             colorString = String.sprintf("%s(%s)", format, values);
         }
 
         var color = WebInspector.Color.parse(colorString);
         if (!color)
             return;
         var hsv = color.hsva();
         if (this._colorFormat === cf.HEX || this._colorFormat === cf.ShortHEX)
             this._colorFormat = color.canBeShortHex() ? cf.ShortHEX : cf.HEX;
         this._innerSetColor(hsv, colorString, undefined, WebInspector.Spectrum._ChangeSource.Input);
@@ skipping 166 matching lines @@
     "#FFEB3B": ["#FFFDE7", "#FFF9C4", "#FFF59D", "#FFF176", "#FFEE58", "#FFEB3B", "#FDD835", "#FBC02D", "#F9A825", "#F57F17"],
     "#FFC107": ["#FFF8E1", "#FFECB3", "#FFE082", "#FFD54F", "#FFCA28", "#FFC107", "#FFB300", "#FFA000", "#FF8F00", "#FF6F00"],
     "#FF9800": ["#FFF3E0", "#FFE0B2", "#FFCC80", "#FFB74D", "#FFA726", "#FF9800", "#FB8C00", "#F57C00", "#EF6C00", "#E65100"],
     "#FF5722": ["#FBE9E7", "#FFCCBC", "#FFAB91", "#FF8A65", "#FF7043", "#FF5722", "#F4511E", "#E64A19", "#D84315", "#BF360C"],
     "#795548": ["#EFEBE9", "#D7CCC8", "#BCAAA4", "#A1887F", "#8D6E63", "#795548", "#6D4C41", "#5D4037", "#4E342E", "#3E2723"],
     "#9E9E9E": ["#FAFAFA", "#F5F5F5", "#EEEEEE", "#E0E0E0", "#BDBDBD", "#9E9E9E", "#757575", "#616161", "#424242", "#212121"],
     "#607D8B": ["#ECEFF1", "#CFD8DC", "#B0BEC5", "#90A4AE", "#78909C", "#607D8B", "#546E7A", "#455A64", "#37474F", "#263238"]
 };
 
 WebInspector.Spectrum.MaterialPalette = { title: "Material", mutable: false, matchUserFormat: true, colors: Object.keys(WebInspector.Spectrum.MaterialPaletteShades) };