Fixes 590477: Style pane numeric property change modifier shortcuts are undiscoverable. Shift mouse…

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

Index: third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js b/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
index c0ecf644453e9675e9926946a2eee97dc144d133..9f96d3e6eb7965c2793b4d375ffd52da5cba1bb7 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
@@ -302,9 +302,10 @@ WebInspector._valueModificationDirection = function(event)
 {
     var direction = null;
     if (event.type === "mousewheel") {
-        if (event.wheelDeltaY > 0)
+        // When shift is pressed while spinning mousewheel, delta comes as wheelDeltaX.
+        if (event.wheelDeltaY > 0 || event.wheelDeltaX > 0)
             direction = "Up";
-        else if (event.wheelDeltaY < 0)
+        else if (event.wheelDeltaY < 0 || event.wheelDeltaX < 0)
             direction = "Down";
     } else {
         if (event.keyIdentifier === "Up" || event.keyIdentifier === "PageUp")
@@ -329,27 +330,38 @@ WebInspector._modifiedHexValue = function(hexString, event)
     if (isNaN(number) || !isFinite(number))
         return hexString;
 
-    var maxValue = Math.pow(16, hexString.length) - 1;
-    var arrowKeyOrMouseWheelEvent = (event.keyIdentifier === "Up" || event.keyIdentifier === "Down" || event.type === "mousewheel");
-    var delta;
+    var hexStrLen = hexString.length;
+    var channelLen = hexStrLen / 3;
 
-    if (arrowKeyOrMouseWheelEvent)
-        delta = (direction === "Up") ? 1 : -1;
-    else
-        delta = (event.keyIdentifier === "PageUp") ? 16 : -16;
+    // Colors are either rgb or rrggbb.
+    if (channelLen !== 1 && channelLen !== 2)
+        return hexString;
 
+    // Precision modifier keys work with both mousewheel and up/down keys.
+    // When ctrl is pressed, increase R by 1.
+    // When shift is pressed, increase G by 1.
+    // When alt is pressed, increase B by 1.
+    // If no shortcut keys are pressed then increase hex value by 1.
+    // Keys can be pressed together to increase RGB channels. e.g trying different shades.
+    var delta = 0;
+    if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event))
+        delta += Math.pow(16, channelLen * 2);
     if (event.shiftKey)
-        delta *= 16;
+        delta += Math.pow(16, channelLen);
+    if (event.altKey)
+        delta += 1;
+    if (delta === 0)
+        delta = 1;
+    if (direction === "Down")
+        delta *= -1;
 
-    var result = number + delta;
-    if (result < 0)
-        result = 0; // Color hex values are never negative, so clamp to 0.
-    else if (result > maxValue)
-        return hexString;
+    // Increase hex value by 1 and clamp from 0 ... maxValue.
+    var maxValue = Math.pow(16, hexStrLen) - 1;
+    var result = Number.constrain(number + delta, 0, maxValue);
 
     // Ensure the result length is the same as the original hex value.
     var resultString = result.toString(16).toUpperCase();
-    for (var i = 0, lengthDelta = hexString.length - resultString.length; i < lengthDelta; ++i)
+    for (var i = 0, lengthDelta = hexStrLen - resultString.length; i < lengthDelta; ++i)
         resultString = "0" + resultString;
     return resultString;
 }
@@ -364,24 +376,25 @@ WebInspector._modifiedFloatNumber = function(number, event)
     if (!direction)
         return number;
 
-    var arrowKeyOrMouseWheelEvent = (event.keyIdentifier === "Up" || event.keyIdentifier === "Down" || event.type === "mousewheel");
-
-    // Jump by 10 when shift is down or jump by 0.1 when Alt/Option is down.
-    // Also jump by 10 for page up and down, or by 100 if shift is held with a page key.
-    var changeAmount = 1;
-    if (event.shiftKey && !arrowKeyOrMouseWheelEvent)
-        changeAmount = 100;
-    else if (event.shiftKey || !arrowKeyOrMouseWheelEvent)
-        changeAmount = 10;
+    // Precision modifier keys work with both mousewheel and up/down keys.
+    // When ctrl is pressed, increase by 100.
+    // When shift is pressed, increase by 10.
+    // When alt is pressed, increase by 0.1.
+    // Otherwise increase by 1.
+    var delta = 1;
+    if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event))
+        delta = 100;
+    else if (event.shiftKey)
+        delta = 10;
     else if (event.altKey)
-        changeAmount = 0.1;
+        delta = 0.1;
 
     if (direction === "Down")
-        changeAmount *= -1;
+        delta *= -1;
 
     // Make the new number and constrain it to a precision of 6, this matches numbers the engine returns.
     // Use the Number constructor to forget the fixed precision, so 1.100000 will print as 1.1.
-    var result = Number((number + changeAmount).toFixed(6));
+    var result = Number((number + delta).toFixed(6));
     if (!String(result).match(WebInspector.CSSNumberRegex))
         return null;