Changeset 125402 in webkit

Timestamp:

Aug 13, 2012 2:33:09 AM (12 years ago)

Author:

commit-queue@webkit.org

Message:

Web Inspector: Feature Request - Adding mouse gesture for editing attribute values in elements/css panel
​https://bugs.webkit.org/show_bug.cgi?id=93581

Patch by Sam D <​dsam2912@gmail.com> on 2012-08-13
Reviewed by Alexander Pavlov.

Added functionality to modify valuesAdding support for updating number values in attributes in element
panel/ css panel using mouse gestures as well.

No new tests.

• inspector/front-end/StylesSidebarPane.js:

handling mousewheel event

• inspector/front-end/TextPrompt.js:

adding mouse event listener
(WebInspector.TextPrompt.prototype._attachInternal):
(WebInspector.TextPrompt.prototype.defaultKeyHandler):
(WebInspector.TextPrompt.prototype.onMouseWheel):

• inspector/front-end/UIUtils.js:

handling mouse event gesture and updating number based on mouse wheel
scroll direction as well.
(WebInspector._valueModificationDirection):
(WebInspector._modifiedHexValue):
(WebInspector._modifiedFloatNumber):
(WebInspector.handleElementValueModifications):

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/front-end/StylesSidebarPane.js (modified) (1 diff)
• inspector/front-end/TextPrompt.js (modified) (4 diffs)
• inspector/front-end/UIUtils.js (modified) (5 diffs)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2012-08-13  Sam D  <dsam2912@gmail.com>
+
+        Web Inspector: Feature Request - Adding mouse gesture for editing attribute values in elements/css panel
+        https://bugs.webkit.org/show_bug.cgi?id=93581
+
+        Reviewed by Alexander Pavlov.
+
+        Added functionality to modify valuesAdding support for updating number values in attributes in element
+        panel/ css panel using mouse gestures as well.
+
+        No new tests.
+
+        * inspector/front-end/StylesSidebarPane.js:
+        handling mousewheel event
+        * inspector/front-end/TextPrompt.js:
+        adding mouse event listener
+        (WebInspector.TextPrompt.prototype._attachInternal):
+        (WebInspector.TextPrompt.prototype.defaultKeyHandler):
+        (WebInspector.TextPrompt.prototype.onMouseWheel):
+        * inspector/front-end/UIUtils.js:
+        handling mouse event gesture and updating number based on mouse wheel
+        scroll direction as well.
+        (WebInspector._valueModificationDirection):
+        (WebInspector._modifiedHexValue):
+        (WebInspector._modifiedFloatNumber):
+        (WebInspector.handleElementValueModifications):
+
 2012-08-13  Carlos Garcia Campos  <cgarcia@igalia.com>
 

trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js

@@ -2538 +2538 @@
     },
 
+    onMouseWheel: function(event)
+    {
+        if (this._handleNameOrValueUpDown(event)) {
+            event.consume(true);
+            return;
+        }
+        WebInspector.TextPrompt.prototype.onMouseWheel.call(this, event);
+    },
+
     tabKeyPressed: function()
     {

trunk/Source/WebCore/inspector/front-end/TextPrompt.js

@@ -106 +106 @@
 
         this._boundOnKeyDown = this.onKeyDown.bind(this);
+        this._boundOnMouseWheel = this.onMouseWheel.bind(this);
         this._boundSelectStart = this._selectStart.bind(this);
         this._proxyElement = element.ownerDocument.createElement("span");
@@ -113 +114 @@
         this._element.addStyleClass("text-prompt");
         this._element.addEventListener("keydown", this._boundOnKeyDown, false);
+        this._element.addEventListener("mousewheel", this._boundOnMouseWheel, false);
         this._element.addEventListener("selectstart", this._boundSelectStart, false);
 
@@ -128 +130 @@
         this._element.removeStyleClass("text-prompt");
         this._element.removeEventListener("keydown", this._boundOnKeyDown, false);
+        this._element.removeEventListener("mousewheel", this._boundOnMouseWheel, false);
         this._element.removeEventListener("selectstart", this._boundSelectStart, false);
         delete this._proxyElement;
@@ -219 +222 @@
         this.autoCompleteSoon(force);
         return false;
+    },
+
+    onMouseWheel: function(event)
+    {
+        // Subclasses can implement. 
     },
 

trunk/Source/WebCore/inspector/front-end/UIUtils.js

@@ -309 +309 @@
 WebInspector.StyleValueDelimiters = " \xA0\t\n\"':;,/()";
 
+
+/**
+  * @param {Event} event
+  * @return {?string}
+  */
+WebInspector._valueModificationDirection = function(event)
+{
+    var direction = null;
+    if (event.type === "mousewheel") {
+        if (event.wheelDeltaY > 0)
+            direction = "Up";
+        else if (event.wheelDeltaY < 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
@@ -315 +337 @@
 WebInspector._modifiedHexValue = function(hexString, event)
 {
+    var direction = WebInspector._valueModificationDirection(event);
+    if (!direction)
+        return hexString;
+
     var number = parseInt(hexString, 16);
     if (isNaN(number) || !isFinite(number))
@@ -320 +346 @@
 
     var maxValue = Math.pow(16, hexString.length) - 1;
-    var arrowKeyPressed = (event.keyIdentifier === "Up" || event.keyIdentifier === "Down");
-
+    var arrowKeyOrMouseWheelEvent = (event.keyIdentifier === "Up" || event.keyIdentifier === "Down" || event.type === "mousewheel");
     var delta;
-    if (arrowKeyPressed)
-        delta = (event.keyIdentifier === "Up") ? 1 : -1;
+
+    if (arrowKeyOrMouseWheelEvent)
+        delta = (direction === "Up") ? 1 : -1;
     else
         delta = (event.keyIdentifier === "PageUp") ? 16 : -16;
@@ -350 +376 @@
 WebInspector._modifiedFloatNumber = function(number, event)
 {
-    var arrowKeyPressed = (event.keyIdentifier === "Up" || event.keyIdentifier === "Down");
+    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 && !arrowKeyPressed)
+    if (event.shiftKey && !arrowKeyOrMouseWheelEvent)
         changeAmount = 100;
-    else if (event.shiftKey || !arrowKeyPressed)
+    else if (event.shiftKey || !arrowKeyOrMouseWheelEvent)
         changeAmount = 10;
     else if (event.altKey)
         changeAmount = 0.1;
 
-    if (event.keyIdentifier === "Down" || event.keyIdentifier === "PageDown")
+    if (direction === "Down")
         changeAmount *= -1;
 
@@ -383 +413 @@
 WebInspector.handleElementValueModifications = function(event, element, finishHandler, suggestionHandler, customNumberHandler)
 {
-    var arrowKeyPressed = (event.keyIdentifier === "Up" || event.keyIdentifier === "Down");
+    var arrowKeyOrMouseWheelEvent = (event.keyIdentifier === "Up" || event.keyIdentifier === "Down" || event.type === "mousewheel");
     var pageKeyPressed = (event.keyIdentifier === "PageUp" || event.keyIdentifier === "PageDown");
-    if (!arrowKeyPressed && !pageKeyPressed)
+    if (!arrowKeyOrMouseWheelEvent && !pageKeyPressed)
         return false;