- Revision
- 125402
- Author
- [email protected]
- Date
- 2012-08-13 02:33:09 -0700 (Mon, 13 Aug 2012)
Log 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 <[email protected]> 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):
Modified Paths
Diff
Modified: trunk/Source/WebCore/ChangeLog (125401 => 125402)
--- trunk/Source/WebCore/ChangeLog 2012-08-13 09:29:30 UTC (rev 125401)
+++ trunk/Source/WebCore/ChangeLog 2012-08-13 09:33:09 UTC (rev 125402)
@@ -1,3 +1,30 @@
+2012-08-13 Sam D <[email protected]>
+
+ 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 <[email protected]>
Unreviewed. Fix make distcheck.
Modified: trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js (125401 => 125402)
--- trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js 2012-08-13 09:29:30 UTC (rev 125401)
+++ trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js 2012-08-13 09:33:09 UTC (rev 125402)
@@ -2537,6 +2537,15 @@
WebInspector.TextPrompt.prototype.onKeyDown.call(this, event);
},
+ onMouseWheel: function(event)
+ {
+ if (this._handleNameOrValueUpDown(event)) {
+ event.consume(true);
+ return;
+ }
+ WebInspector.TextPrompt.prototype.onMouseWheel.call(this, event);
+ },
+
tabKeyPressed: function()
{
this.acceptAutoComplete();
Modified: trunk/Source/WebCore/inspector/front-end/TextPrompt.js (125401 => 125402)
--- trunk/Source/WebCore/inspector/front-end/TextPrompt.js 2012-08-13 09:29:30 UTC (rev 125401)
+++ trunk/Source/WebCore/inspector/front-end/TextPrompt.js 2012-08-13 09:33:09 UTC (rev 125402)
@@ -105,6 +105,7 @@
this._element = element;
this._boundOnKeyDown = this.onKeyDown.bind(this);
+ this._boundOnMouseWheel = this.onMouseWheel.bind(this);
this._boundSelectStart = this._selectStart.bind(this);
this._proxyElement = element.ownerDocument.createElement("span");
this._proxyElement.style.display = this._proxyElementDisplay;
@@ -112,6 +113,7 @@
this.proxyElement.appendChild(element);
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);
if (typeof this._suggestBoxClassName === "string")
@@ -127,6 +129,7 @@
this.proxyElement.parentElement.removeChild(this.proxyElement);
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;
WebInspector.restoreFocusFromElement(this._element);
@@ -220,6 +223,11 @@
return false;
},
+ onMouseWheel: function(event)
+ {
+ // Subclasses can implement.
+ },
+
onKeyDown: function(event)
{
var handled = false;
Modified: trunk/Source/WebCore/inspector/front-end/UIUtils.js (125401 => 125402)
--- trunk/Source/WebCore/inspector/front-end/UIUtils.js 2012-08-13 09:29:30 UTC (rev 125401)
+++ trunk/Source/WebCore/inspector/front-end/UIUtils.js 2012-08-13 09:33:09 UTC (rev 125402)
@@ -308,22 +308,48 @@
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
* @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 arrowKeyPressed = (event.keyIdentifier === "Up" || event.keyIdentifier === "Down");
+ var arrowKeyOrMouseWheelEvent = (event.keyIdentifier === "Up" || event.keyIdentifier === "Down" || event.type === "mousewheel");
+ var delta;
- var delta;
- if (arrowKeyPressed)
- delta = (event.keyIdentifier === "Up") ? 1 : -1;
+ if (arrowKeyOrMouseWheelEvent)
+ delta = (direction === "Up") ? 1 : -1;
else
delta = (event.keyIdentifier === "PageUp") ? 16 : -16;
@@ -349,19 +375,23 @@
*/
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;
// Make the new number and constrain it to a precision of 6, this matches numbers the engine returns.
@@ -382,9 +412,9 @@
*/
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;
var selection = window.getSelection();
