Diff
Modified: trunk/Source/WebCore/ChangeLog (121901 => 121902)
--- trunk/Source/WebCore/ChangeLog 2012-07-05 13:10:04 UTC (rev 121901)
+++ trunk/Source/WebCore/ChangeLog 2012-07-05 14:19:54 UTC (rev 121902)
@@ -1,3 +1,30 @@
+2012-07-05 Vivek Galatage <vivekgalat...@gmail.com>
+
+ Web Inspector: Add support for keyboard increment / decrement on numbers in attributes in Elements Panel
+ https://bugs.webkit.org/show_bug.cgi?id=89586
+
+ Reviewed by Pavel Feldman
+
+ Refactoring the key events while editing style property values. Migrated the code to UIUtils.js and referred
+ from StylesSidebarPane.js, ElementsTreeOutline.js and MetricsSidebarPane.js.
+
+ No new tests as code refactoring and UI feature added to ElementsTreeOutline.js
+
+ * inspector/front-end/ElementsTreeOutline.js:
+ (WebInspector.ElementsTreeElement.prototype._startEditingAttribute.handleKeyDownEvents):
+ (WebInspector.ElementsTreeElement.prototype._startEditingAttribute):
+ * inspector/front-end/MetricsSidebarPane.js:
+ (WebInspector.MetricsSidebarPane.prototype._handleKeyDown.finishHandler):
+ (WebInspector.MetricsSidebarPane.prototype._handleKeyDown.customNumberHandler):
+ (WebInspector.MetricsSidebarPane.prototype._handleKeyDown):
+ * inspector/front-end/StylesSidebarPane.js:
+ (WebInspector.StylesSidebarPane.prototype._handleNameOrValueUpDown.finishHandler):
+ (WebInspector.StylesSidebarPane.prototype._handleNameOrValueUpDown):
+ * inspector/front-end/UIUtils.js:
+ (WebInspector._modifiedHexValue):
+ (WebInspector._modifiedFloatNumber):
+ (WebInspector.handleElementValueModifications):
+
2012-07-05 Gabor Rapcsanyi <rga...@webkit.org>
NEON intrinsics should be used with gaussian blur filter
Modified: trunk/Source/WebCore/inspector/front-end/ElementsTreeOutline.js (121901 => 121902)
--- trunk/Source/WebCore/inspector/front-end/ElementsTreeOutline.js 2012-07-05 13:10:04 UTC (rev 121901)
+++ trunk/Source/WebCore/inspector/front-end/ElementsTreeOutline.js 2012-07-05 14:19:54 UTC (rev 121902)
@@ -1277,6 +1277,26 @@
removeZeroWidthSpaceRecursive(attribute);
var config = new WebInspector.EditingConfig(this._attributeEditingCommitted.bind(this), this._editingCancelled.bind(this), attributeName);
+
+ function handleKeyDownEvents(event)
+ {
+ var isMetaOrCtrl = WebInspector.isMac() ?
+ event.metaKey && !event.shiftKey && !event.ctrlKey && !event.altKey :
+ event.ctrlKey && !event.shiftKey && !event.metaKey && !event.altKey;
+ if (isEnterKey(event) && (event.isMetaOrCtrlForTest || !config.multiline || isMetaOrCtrl))
+ return "commit";
+ else if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code || event.keyIdentifier === "U+001B")
+ return "cancel";
+ else if (event.keyIdentifier === "U+0009") // Tab key
+ return "move-" + (event.shiftKey ? "backward" : "forward");
+ else {
+ WebInspector.handleElementValueModifications(event, attribute);
+ return "";
+ }
+ }
+
+ config.customFinishHandler = handleKeyDownEvents.bind(this);
+
this._editing = WebInspector.startEditing(attribute, config);
window.getSelection().setBaseAndExtent(elementForSelection, 0, elementForSelection, 1);
Modified: trunk/Source/WebCore/inspector/front-end/MetricsSidebarPane.js (121901 => 121902)
--- trunk/Source/WebCore/inspector/front-end/MetricsSidebarPane.js 2012-07-05 13:10:04 UTC (rev 121901)
+++ trunk/Source/WebCore/inspector/front-end/MetricsSidebarPane.js 2012-07-05 14:19:54 UTC (rev 121902)
@@ -300,56 +300,21 @@
_handleKeyDown: function(context, styleProperty, event)
{
- if (!/^(?:Page)?(?:Up|Down)$/.test(event.keyIdentifier))
- return;
var element = event.currentTarget;
- var selection = window.getSelection();
- if (!selection.rangeCount)
- return;
+ function finishHandler(originalValue, replacementString)
+ {
+ this._applyUserInput(element, replacementString, originalValue, context, false);
+ }
- var selectionRange = selection.getRangeAt(0);
- if (!selectionRange.commonAncestorContainer.isSelfOrDescendant(element))
- return;
-
- var originalValue = element.textContent;
- var wordRange = selectionRange.startContainer.rangeOfWord(selectionRange.startOffset, WebInspector.StylesSidebarPane.StyleValueDelimiters, element);
- var wordString = wordRange.toString();
-
- var matches = /(.*?)(-?(?:\d+(?:\.\d+)?|\.\d+))(.*)/.exec(wordString);
- var replacementString;
- if (matches && matches.length) {
- var prefix = matches[1];
- var suffix = matches[3];
- var number = WebInspector.StylesSidebarPane.alteredFloatNumber(parseFloat(matches[2]), event);
- if (number === null) {
- // Need to check for null explicitly.
- return;
- }
-
+ function customNumberHandler(number)
+ {
if (styleProperty !== "margin" && number < 0)
number = 0;
-
- replacementString = prefix + number + suffix;
+ return number;
}
- if (!replacementString)
- return;
- var replacementTextNode = document.createTextNode(replacementString);
-
- wordRange.deleteContents();
- wordRange.insertNode(replacementTextNode);
-
- var finalSelectionRange = document.createRange();
- finalSelectionRange.setStart(replacementTextNode, 0);
- finalSelectionRange.setEnd(replacementTextNode, replacementString.length);
-
- selection.removeAllRanges();
- selection.addRange(finalSelectionRange);
-
- event.handled = true;
- event.preventDefault();
- this._applyUserInput(element, replacementString, originalValue, context, false);
+ WebInspector.handleElementValueModifications(event, element, finishHandler.bind(this), undefined, customNumberHandler);
},
editingEnded: function(element, context)
Modified: trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js (121901 => 121902)
--- trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js 2012-07-05 13:10:04 UTC (rev 121901)
+++ trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js 2012-07-05 14:19:54 UTC (rev 121902)
@@ -114,9 +114,6 @@
HSLA: "hsla"
}
-WebInspector.StylesSidebarPane.StyleValueDelimiters = " \xA0\t\n\"':;,/()";
-
-
// Keep in sync with RenderStyleConstants.h PseudoId enum. Array below contains pseudo id names for corresponding enum indexes.
// First item is empty due to its artificial NOPSEUDO nature in the enum.
// FIXME: find a way of generating this mapping or getting it from combination of RenderStyleConstants and CSSSelector.cpp at
@@ -135,65 +132,6 @@
"-webkit-resizer", "-webkit-inner-spin-button", "-webkit-outer-spin-button"
];
-WebInspector.StylesSidebarPane.CSSNumberRegex = /^(-?(?:\d+(?:\.\d+)?|\.\d+))$/;
-
-WebInspector.StylesSidebarPane.alteredFloatNumber = function(number, event)
-{
- var arrowKeyPressed = (event.keyIdentifier === "Up" || event.keyIdentifier === "Down");
-
- // 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)
- changeAmount = 100;
- else if (event.shiftKey || !arrowKeyPressed)
- changeAmount = 10;
- else if (event.altKey)
- changeAmount = 0.1;
-
- if (event.keyIdentifier === "Down" || event.keyIdentifier === "PageDown")
- changeAmount *= -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));
- if (!String(result).match(WebInspector.StylesSidebarPane.CSSNumberRegex))
- return null;
-
- return result;
-}
-
-WebInspector.StylesSidebarPane.alteredHexNumber = function(hexString, event)
-{
- 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 delta;
- if (arrowKeyPressed)
- delta = (event.keyIdentifier === "Up") ? 1 : -1;
- else
- delta = (event.keyIdentifier === "PageUp") ? 16 : -16;
-
- if (event.shiftKey)
- delta *= 16;
-
- 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;
-
- // 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)
- resultString = "0" + resultString;
- return resultString;
-}
-
WebInspector.StylesSidebarPane.canonicalPropertyName = function(name)
{
if (!name || name.length < 9 || name.charAt(0) !== "-")
@@ -2538,7 +2476,7 @@
WebInspector.StylesSidebarPane.CSSPropertyPrompt = function(cssCompletions, sidebarPane, isEditingName, acceptCallback)
{
// Use the same callback both for applyItemCallback and acceptItemCallback.
- WebInspector.TextPrompt.call(this, this._buildPropertyCompletions.bind(this), WebInspector.StylesSidebarPane.StyleValueDelimiters);
+ WebInspector.TextPrompt.call(this, this._buildPropertyCompletions.bind(this), WebInspector.StyleValueDelimiters);
this.setSuggestBoxEnabled("generic-suggest");
this._cssCompletions = cssCompletions;
this._sidebarPane = sidebarPane;
@@ -2573,83 +2511,19 @@
_handleNameOrValueUpDown: function(event)
{
+ function finishHandler(originalValue, replacementString)
+ {
+ // Synthesize property text disregarding any comments, custom whitespace etc.
+ this._sidebarPane.applyStyleText(this._sidebarPane.nameElement.textContent + ": " + this._sidebarPane.valueElement.textContent, false, false, false);
+ }
+
// Handle numeric value increment/decrement only at this point.
- if (!this._isEditingName && this._handleUpOrDownValue(event))
+ if (!this._isEditingName && WebInspector.handleElementValueModifications(event, this._sidebarPane.valueElement, finishHandler.bind(this), this._isValueSuggestion.bind(this)))
return true;
return false;
},
- _handleUpOrDownValue: function(event)
- {
- var arrowKeyPressed = (event.keyIdentifier === "Up" || event.keyIdentifier === "Down");
- var pageKeyPressed = (event.keyIdentifier === "PageUp" || event.keyIdentifier === "PageDown");
- if (!arrowKeyPressed && !pageKeyPressed)
- return false;
-
- var selection = window.getSelection();
- if (!selection.rangeCount)
- return false;
-
- var selectionRange = selection.getRangeAt(0);
- if (!selectionRange.commonAncestorContainer.isSelfOrDescendant(this._sidebarPane.valueElement))
- return false;
-
- var wordRange = selectionRange.startContainer.rangeOfWord(selectionRange.startOffset, WebInspector.StylesSidebarPane.StyleValueDelimiters, this._sidebarPane.valueElement);
- var wordString = wordRange.toString();
- if (this._isValueSuggestion(wordString))
- return false;
-
- var replacementString;
- var prefix, suffix, number;
-
- var matches;
- matches = /(.*#)([\da-fA-F]+)(.*)/.exec(wordString);
- if (matches && matches.length) {
- prefix = matches[1];
- suffix = matches[3];
- number = WebInspector.StylesSidebarPane.alteredHexNumber(matches[2], event);
-
- replacementString = prefix + number + suffix;
- } else {
- matches = /(.*?)(-?(?:\d+(?:\.\d+)?|\.\d+))(.*)/.exec(wordString);
- if (matches && matches.length) {
- prefix = matches[1];
- suffix = matches[3];
- number = WebInspector.StylesSidebarPane.alteredFloatNumber(parseFloat(matches[2]), event);
- if (number === null) {
- // Need to check for null explicitly.
- return false;
- }
-
- replacementString = prefix + number + suffix;
- }
- }
-
- if (replacementString) {
- var replacementTextNode = document.createTextNode(replacementString);
-
- wordRange.deleteContents();
- wordRange.insertNode(replacementTextNode);
-
- var finalSelectionRange = document.createRange();
- finalSelectionRange.setStart(replacementTextNode, 0);
- finalSelectionRange.setEnd(replacementTextNode, replacementString.length);
-
- selection.removeAllRanges();
- selection.addRange(finalSelectionRange);
-
- event.handled = true;
- event.preventDefault();
-
- // Synthesize property text disregarding any comments, custom whitespace etc.
- this._sidebarPane.applyStyleText(this._sidebarPane.nameElement.textContent + ": " + this._sidebarPane.valueElement.textContent, false, false, false);
-
- return true;
- }
- return false;
- },
-
_isValueSuggestion: function(word)
{
if (!word)
Modified: trunk/Source/WebCore/inspector/front-end/UIUtils.js (121901 => 121902)
--- trunk/Source/WebCore/inspector/front-end/UIUtils.js 2012-07-05 13:10:04 UTC (rev 121901)
+++ trunk/Source/WebCore/inspector/front-end/UIUtils.js 2012-07-05 14:19:54 UTC (rev 121902)
@@ -276,6 +276,160 @@
}
}
+WebInspector.CSSNumberRegex = /^(-?(?:\d+(?:\.\d+)?|\.\d+))$/;
+
+WebInspector.StyleValueDelimiters = " \xA0\t\n\"':;,/()";
+
+/**
+ * @param {string} hexString
+ * @param {Event} event
+ */
+WebInspector._modifiedHexValue = function(hexString, event)
+{
+ 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 delta;
+ if (arrowKeyPressed)
+ delta = (event.keyIdentifier === "Up") ? 1 : -1;
+ else
+ delta = (event.keyIdentifier === "PageUp") ? 16 : -16;
+
+ if (event.shiftKey)
+ delta *= 16;
+
+ 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;
+
+ // 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)
+ resultString = "0" + resultString;
+ return resultString;
+}
+
+/**
+ * @param {number} number
+ * @param {Event} event
+ */
+WebInspector._modifiedFloatNumber = function(number, event)
+{
+ var arrowKeyPressed = (event.keyIdentifier === "Up" || event.keyIdentifier === "Down");
+
+ // 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)
+ changeAmount = 100;
+ else if (event.shiftKey || !arrowKeyPressed)
+ changeAmount = 10;
+ else if (event.altKey)
+ changeAmount = 0.1;
+
+ if (event.keyIdentifier === "Down" || event.keyIdentifier === "PageDown")
+ changeAmount *= -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));
+ if (!String(result).match(WebInspector.CSSNumberRegex))
+ return null;
+
+ return result;
+}
+
+/**
+ * @param {Event} event
+ * @param {Element} element
+ * @param {function(string,string)=} finishHandler
+ * @param {function(string)=} suggestionHandler
+ * @param {function(number):number=} customNumberHandler
+ */
+WebInspector.handleElementValueModifications = function(event, element, finishHandler, suggestionHandler, customNumberHandler)
+{
+ var arrowKeyPressed = (event.keyIdentifier === "Up" || event.keyIdentifier === "Down");
+ var pageKeyPressed = (event.keyIdentifier === "PageUp" || event.keyIdentifier === "PageDown");
+ if (!arrowKeyPressed && !pageKeyPressed)
+ return false;
+
+ var selection = window.getSelection();
+ if (!selection.rangeCount)
+ return false;
+
+ var selectionRange = selection.getRangeAt(0);
+ if (!selectionRange.commonAncestorContainer.isSelfOrDescendant(element))
+ return false;
+
+ var originalValue = element.textContent;
+ var wordRange = selectionRange.startContainer.rangeOfWord(selectionRange.startOffset, WebInspector.StyleValueDelimiters, element);
+ var wordString = wordRange.toString();
+
+ if (suggestionHandler && suggestionHandler(wordString))
+ return false;
+
+ var replacementString;
+ var prefix, suffix, number;
+
+ var matches;
+ matches = /(.*#)([\da-fA-F]+)(.*)/.exec(wordString);
+ if (matches && matches.length) {
+ prefix = matches[1];
+ suffix = matches[3];
+ number = WebInspector._modifiedHexValue(matches[2], event);
+
+ if (customNumberHandler)
+ number = customNumberHandler(number);
+
+ replacementString = prefix + number + suffix;
+ } else {
+ matches = /(.*?)(-?(?:\d+(?:\.\d+)?|\.\d+))(.*)/.exec(wordString);
+ if (matches && matches.length) {
+ prefix = matches[1];
+ suffix = matches[3];
+ number = WebInspector._modifiedFloatNumber(parseFloat(matches[2]), event);
+
+ // Need to check for null explicitly.
+ if (number === null)
+ return false;
+
+ if (customNumberHandler)
+ number = customNumberHandler(number);
+
+ replacementString = prefix + number + suffix;
+ }
+ }
+
+ if (replacementString) {
+ var replacementTextNode = document.createTextNode(replacementString);
+
+ wordRange.deleteContents();
+ wordRange.insertNode(replacementTextNode);
+
+ var finalSelectionRange = document.createRange();
+ finalSelectionRange.setStart(replacementTextNode, 0);
+ finalSelectionRange.setEnd(replacementTextNode, replacementString.length);
+
+ selection.removeAllRanges();
+ selection.addRange(finalSelectionRange);
+
+ event.handled = true;
+ event.preventDefault();
+
+ if (finishHandler)
+ finishHandler(originalValue, replacementString);
+
+ return true;
+ }
+ return false;
+}
+
/**
* @param {Element} element
* @param {WebInspector.EditingConfig=} config
