- Revision
- 188138
- Author
- drou...@apple.com
- Date
- 2015-08-07 10:58:45 -0700 (Fri, 07 Aug 2015)
Log Message
Web Inspector: Option+Up/Down arrow keys should increment/decrement numbers in HTML and SVG attributes
https://bugs.webkit.org/show_bug.cgi?id=147317
Reviewed by Timothy Hatcher.
If the value under the cursor in an HTML element attribute is a number, pressing alt and
up/down will increment/decrement the number value and apply that change to the element.
* UserInterface/Views/BoxModelDetailsSectionRow.js:
(WebInspector.BoxModelDetailsSectionRow.prototype._alteredFloatNumber):
(WebInspector.BoxModelDetailsSectionRow.prototype._handleKeyDown):
* UserInterface/Views/DOMTreeElement.js:
(WebInspector.DOMTreeElement.prototype._startEditingAttribute):
(WebInspector.DOMTreeElement.prototype._attributeEditingCommitted):
(WebInspector.DOMTreeElement.prototype._attributeNumberEditingCommitted):
* UserInterface/Views/EditingSupport.js:
(WebInspector.EditingConfig.prototype.setNumberCommitHandler):
(WebInspector.startEditing.defaultFinishHandler):
(WebInspector.startEditing.handleEditingResult):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (188137 => 188138)
--- trunk/Source/WebInspectorUI/ChangeLog 2015-08-07 17:47:28 UTC (rev 188137)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-08-07 17:58:45 UTC (rev 188138)
@@ -1,3 +1,25 @@
+2015-08-07 Devin Rousso <drou...@apple.com>
+
+ Web Inspector: Option+Up/Down arrow keys should increment/decrement numbers in HTML and SVG attributes
+ https://bugs.webkit.org/show_bug.cgi?id=147317
+
+ Reviewed by Timothy Hatcher.
+
+ If the value under the cursor in an HTML element attribute is a number, pressing alt and
+ up/down will increment/decrement the number value and apply that change to the element.
+
+ * UserInterface/Views/BoxModelDetailsSectionRow.js:
+ (WebInspector.BoxModelDetailsSectionRow.prototype._alteredFloatNumber):
+ (WebInspector.BoxModelDetailsSectionRow.prototype._handleKeyDown):
+ * UserInterface/Views/DOMTreeElement.js:
+ (WebInspector.DOMTreeElement.prototype._startEditingAttribute):
+ (WebInspector.DOMTreeElement.prototype._attributeEditingCommitted):
+ (WebInspector.DOMTreeElement.prototype._attributeNumberEditingCommitted):
+ * UserInterface/Views/EditingSupport.js:
+ (WebInspector.EditingConfig.prototype.setNumberCommitHandler):
+ (WebInspector.startEditing.defaultFinishHandler):
+ (WebInspector.startEditing.handleEditingResult):
+
2015-08-05 Devin Rousso <drou...@apple.com>
Web Inspector: Move the Metrics style sidebar panel into Computed
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js (188137 => 188138)
--- trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js 2015-08-07 17:47:28 UTC (rev 188137)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js 2015-08-07 17:58:45 UTC (rev 188138)
@@ -292,7 +292,7 @@
// 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.BoxModelDetailsSectionRow.CSSNumberRegex))
+ if (!String(result).match(WebInspector.EditingSupport.NumberRegex))
return null;
return result;
@@ -314,10 +314,10 @@
return;
var originalValue = element.textContent;
- var wordRange = selectionRange.startContainer.rangeOfWord(selectionRange.startOffset, WebInspector.BoxModelDetailsSectionRow.StyleValueDelimiters, element);
+ var wordRange = selectionRange.startContainer.rangeOfWord(selectionRange.startOffset, WebInspector.EditingSupport.StyleValueDelimiters, element);
var wordString = wordRange.toString();
- var matches = /(.*?)(-?(?:\d+(?:\.\d+)?|\.\d+))(.*)/.exec(wordString);
+ var matches = WebInspector.EditingSupport.NumberRegex.exec(wordString);
var replacementString;
if (matches && matches.length) {
var prefix = matches[1];
@@ -439,6 +439,3 @@
this._applyUserInput(element, userInput, previousContent, context, true);
}
};
-
-WebInspector.BoxModelDetailsSectionRow.StyleValueDelimiters = " \xA0\t\n\"':;,/()";
-WebInspector.BoxModelDetailsSectionRow.CSSNumberRegex = /^(-?(?:\d+(?:\.\d+)?|\.\d+))$/;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js (188137 => 188138)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js 2015-08-07 17:47:28 UTC (rev 188137)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js 2015-08-07 17:58:45 UTC (rev 188138)
@@ -754,6 +754,7 @@
removeZeroWidthSpaceRecursive(attribute);
var config = new WebInspector.EditingConfig(this._attributeEditingCommitted.bind(this), this._editingCancelled.bind(this), attributeName);
+ config.setNumberCommitHandler(this._attributeNumberEditingCommitted.bind(this));
this._editing = WebInspector.startEditing(attribute, config);
window.getSelection().setBaseAndExtent(elementForSelection, 0, elementForSelection, 1);
@@ -874,6 +875,9 @@
_attributeEditingCommitted(element, newText, oldText, attributeName, moveDirection)
{
+ if (newText === oldText)
+ return;
+
this._editing = false;
var treeOutline = this.treeOutline;
@@ -929,6 +933,14 @@
this.representedObject.setAttribute(attributeName, newText, moveToNextAttributeIfNeeded.bind(this));
}
+ _attributeNumberEditingCommitted(element, newText, oldText, attributeName, moveDirection)
+ {
+ if (newText === oldText)
+ return;
+
+ this.representedObject.setAttribute(attributeName, newText);
+ }
+
_tagNameEditingCommitted(element, newText, oldText, tagName, moveDirection)
{
this._editing = false;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/EditingSupport.js (188137 => 188138)
--- trunk/Source/WebInspectorUI/UserInterface/Views/EditingSupport.js 2015-08-07 17:47:28 UTC (rev 188137)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/EditingSupport.js 2015-08-07 17:58:45 UTC (rev 188138)
@@ -98,6 +98,11 @@
{
this.customFinishHandler = customFinishHandler;
}
+
+ setNumberCommitHandler(numberCommitHandler)
+ {
+ this.numberCommitHandler = numberCommitHandler;
+ }
};
WebInspector.startEditing = function(element, config)
@@ -190,6 +195,12 @@
return "cancel";
else if (event.keyIdentifier === "U+0009") // Tab key
return "move-" + (event.shiftKey ? "backward" : "forward");
+ else if (event.altKey) {
+ if (event.keyIdentifier === "Up" || event.keyIdentifier === "Down")
+ return "modify-" + (event.keyIdentifier === "Up" ? "up" : "down");
+ if (event.keyIdentifier === "PageUp" || event.keyIdentifier === "PageDown")
+ return "modify-" + (event.keyIdentifier === "PageUp" ? "up-big" : "down-big");
+ }
}
function handleEditingResult(result, event)
@@ -206,6 +217,62 @@
moveDirection = result.substring(5);
if (event.keyIdentifier !== "U+0009")
blurEventListener();
+ } else if (result && result.startsWith("modify-")) {
+ var direction = result.substring(7);
+ var modifyValue = direction.startsWith("up") ? 1 : -1;
+ if (direction.endsWith("big"))
+ modifyValue *= 10;
+
+ if (event.shiftKey)
+ modifyValue *= 10;
+ else if (event.ctrlKey)
+ modifyValue /= 10;
+
+ var selection = element.ownerDocument.defaultView.getSelection();
+ if (!selection.rangeCount)
+ return;
+
+ var range = selection.getRangeAt(0);
+ if (!range.commonAncestorContainer.isSelfOrDescendant(element))
+ return false;
+
+ var wordRange = range.startContainer.rangeOfWord(range.startOffset, WebInspector.EditingSupport.StyleValueDelimiters, element);
+ var word = wordRange.toString();
+ var wordPrefix = "";
+ var wordSuffix = "";
+ var nonNumberInWord = /[^\d-\.]+/.exec(word);
+ if (nonNumberInWord) {
+ var nonNumberEndOffset = nonNumberInWord.index + nonNumberInWord[0].length;
+ if (range.startOffset > wordRange.startOffset + nonNumberInWord.index && nonNumberEndOffset < word.length && range.startOffset !== wordRange.startOffset) {
+ wordPrefix = word.substring(0, nonNumberEndOffset);
+ word = word.substring(nonNumberEndOffset);
+ } else {
+ wordSuffix = word.substring(nonNumberInWord.index);
+ word = word.substring(0, nonNumberInWord.index);
+ }
+ }
+
+ var matches = WebInspector.EditingSupport.CSSNumberRegex.exec(word);
+ if (!matches || matches.length !== 4)
+ return;
+
+ var replacement = matches[1] + (Math.round((parseFloat(matches[2]) + modifyValue) * 100) / 100) + matches[3];
+
+ selection.removeAllRanges();
+ selection.addRange(wordRange);
+ document.execCommand("insertText", false, wordPrefix + replacement + wordSuffix);
+
+ var replacementSelectionRange = document.createRange();
+ replacementSelectionRange.setStart(wordRange.commonAncestorContainer, wordRange.startOffset + wordPrefix.length);
+ replacementSelectionRange.setEnd(wordRange.commonAncestorContainer, wordRange.startOffset + wordPrefix.length + replacement.length);
+
+ selection.removeAllRanges();
+ selection.addRange(replacementSelectionRange);
+
+ if (typeof config.numberCommitHandler === "function")
+ config.numberCommitHandler(element, getContent(element), oldText, context, moveDirection);
+
+ event.preventDefault();
}
}
@@ -234,3 +301,9 @@
commit: editingCommitted.bind(element)
};
};
+
+WebInspector.EditingSupport = {
+ StyleValueDelimiters: " \xA0\t\n\"':;,/()",
+ CSSNumberRegex: /(.*?)(-?(?:\d+(?:\.\d+)?|\.\d+))(.*)/,
+ NumberRegex: /^(-?(?:\d+(?:\.\d+)?|\.\d+))$/
+};
