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

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

 /*
  * Copyright (C) 2011 Google Inc.  All rights reserved.
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2007 Matt Lilek (pewtermoose@gmail.com).
  * 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:
  *
@@ skipping 284 matching lines @@
 
 
 /**
  * @param {!Event} event
  * @return {?string}
  */
 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")
             direction = "Up";
         else if (event.keyIdentifier === "Down" || event.keyIdentifier === "PageDown")
             direction = "Down";
     }
     return direction;
 }
 
 /**
  * @param {string} hexString
  * @param {!Event} event
  */
 WebInspector._modifiedHexValue = function(hexString, event)
 {
     var direction = WebInspector._valueModificationDirection(event);
     if (!direction)
         return hexString;
 
     var number = parseInt(hexString, 16);
     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;
 }
 
 /**
  * @param {number} number
  * @param {!Event} event
  */
 WebInspector._modifiedFloatNumber = function(number, event)
 {
     var direction = WebInspector._valueModificationDirection(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;
 
     return result;
 }
 
 /**
  * @param {string} wordString
  * @param {!Event} event
  * @param {function(string, number, string):string=} customNumberHandler
@@ skipping 1502 matching lines @@
  * @param {string} title
  * @return {!Element}
  */
 WebInspector.linkifyDocumentationURLAsNode = function(article, title)
 {
     return WebInspector.linkifyURLAsNode("https://developers.google.com/web/tools/chrome-devtools/" + article, title, undefined, true);
 }
 
 /** @type {!WebInspector.ThemeSupport} */
 WebInspector.themeSupport;