Diff
Modified: trunk/LayoutTests/ChangeLog (223335 => 223336)
--- trunk/LayoutTests/ChangeLog 2017-10-16 04:46:21 UTC (rev 223335)
+++ trunk/LayoutTests/ChangeLog 2017-10-16 06:25:54 UTC (rev 223336)
@@ -1,3 +1,16 @@
+2017-10-15 Nikita Vasilyev <[email protected]>
+
+ Web Inspector: Modify CSS number values with up key and down key
+ https://bugs.webkit.org/show_bug.cgi?id=170779
+ <rdar://problem/33170633>
+
+ Reviewed by Matt Baker.
+
+ Add tests for WI.incrementElementValue defined in WebInspectorUI/UserInterface/Views/EditingSupport.js.
+
+ * inspector/unit-tests/editing-support-expected.txt: Added.
+ * inspector/unit-tests/editing-support.html: Added.
+
2017-10-14 Antoine Quint <[email protected]>
Remove all Web Animations code
Added: trunk/LayoutTests/inspector/unit-tests/editing-support-expected.txt (0 => 223336)
--- trunk/LayoutTests/inspector/unit-tests/editing-support-expected.txt (rev 0)
+++ trunk/LayoutTests/inspector/unit-tests/editing-support-expected.txt 2017-10-16 06:25:54 UTC (rev 223336)
@@ -0,0 +1,13 @@
+Testing that WI.incrementElementValue works for numeric values.
+
+
+== Running test suite: WI.incrementElementValue
+-- Running test case: incrementElementValue.numeric
+PASS: Should increment by 0.1.
+PASS: Should decrement by 1.
+PASS: Should increment by 10.
+PASS: Should decrement by 100.
+
+-- Running test case: incrementElementValue.nonNumeric
+PASS: Text should not change.
+
Added: trunk/LayoutTests/inspector/unit-tests/editing-support.html (0 => 223336)
--- trunk/LayoutTests/inspector/unit-tests/editing-support.html (rev 0)
+++ trunk/LayoutTests/inspector/unit-tests/editing-support.html 2017-10-16 06:25:54 UTC (rev 223336)
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+<script>
+function test() {
+ let suite = InspectorTest.createAsyncSuite("WI.incrementElementValue");
+
+ suite.addTestCase({
+ name: "incrementElementValue.numeric",
+ description: "Ensure that WI.incrementElementValue increments and decrements a numeric value.",
+ test(resolve, reject) {
+ let span = document.createElement("span");
+ span.contentEditable = true;
+ span.textContent = "font-size: 10px;";
+ document.body.append(span);
+
+ let selection = window.getSelection();
+ let textNode = span.firstChild;
+ selection.setBaseAndExtent(textNode, "font-size: ".length, textNode, "font-size: 10px".length);
+
+ WI.incrementElementValue(span, 0.1);
+ InspectorTest.expectEqual(span.textContent, "font-size: 10.1px;", `Should increment by 0.1.`);
+
+ WI.incrementElementValue(span, -1);
+ InspectorTest.expectEqual(span.textContent, "font-size: 9.1px;", `Should decrement by 1.`);
+
+ WI.incrementElementValue(span, 10);
+ InspectorTest.expectEqual(span.textContent, "font-size: 19.1px;", `Should increment by 10.`);
+
+ WI.incrementElementValue(span, -100);
+ InspectorTest.expectEqual(span.textContent, "font-size: -80.9px;", `Should decrement by 100.`);
+
+ resolve();
+ }
+ });
+
+ suite.addTestCase({
+ name: "incrementElementValue.nonNumeric",
+ description: "Ensure that WI.incrementElementValue does not change non-numeric values.",
+ test(resolve, reject) {
+ let span = document.createElement("span");
+ span.contentEditable = true;
+ span.textContent = "background-color";
+ document.body.append(span);
+
+ let selection = window.getSelection();
+ let textNode = span.firstChild;
+ selection.setBaseAndExtent(textNode, "background".length, textNode, "background-".length);
+
+ WI.incrementElementValue(span, 1);
+ InspectorTest.expectEqual(span.textContent, "background-color", `Text should not change.`);
+
+ resolve();
+ }
+ });
+
+ suite.runTestCasesAndFinish();
+}
+</script>
+</head>
+<body _onload_="runTest()">
+ <p>Testing that WI.incrementElementValue works for numeric values.</p>
+</body>
+</html>
Modified: trunk/Source/WebInspectorUI/ChangeLog (223335 => 223336)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-10-16 04:46:21 UTC (rev 223335)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-10-16 06:25:54 UTC (rev 223336)
@@ -1,3 +1,26 @@
+2017-10-15 Nikita Vasilyev <[email protected]>
+
+ Web Inspector: Modify CSS number values with up key and down key
+ https://bugs.webkit.org/show_bug.cgi?id=170779
+ <rdar://problem/33170633>
+
+ Reviewed by Matt Baker.
+
+ Up key increments a number, Down key decrements it.
+
+ Holding modifier keys changes the step value:
+ - Option modifies the value by 0.1
+ - Shift modifies the value by 10
+ - Command modifies the value by 100
+
+ * UserInterface/Test.html:
+ * UserInterface/Views/EditingSupport.js:
+ (WI.incrementElementValue):
+ Abstract away incrementElementValue into a public method.
+
+ * UserInterface/Views/SpreadsheetTextField.js:
+ (WI.SpreadsheetTextField.prototype._handleKeyDown):
+
2017-10-15 Devin Rousso <[email protected]>
Web Inspector: show warning when recorded Canvas action caused no visual change
Modified: trunk/Source/WebInspectorUI/UserInterface/Test.html (223335 => 223336)
--- trunk/Source/WebInspectorUI/UserInterface/Test.html 2017-10-16 04:46:21 UTC (rev 223335)
+++ trunk/Source/WebInspectorUI/UserInterface/Test.html 2017-10-16 06:25:54 UTC (rev 223336)
@@ -216,6 +216,7 @@
<script src=""
<script src=""
<script src=""
+ <script src=""
<script src=""
<script type="text/_javascript_">
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/EditingSupport.js (223335 => 223336)
--- trunk/Source/WebInspectorUI/UserInterface/Views/EditingSupport.js 2017-10-16 04:46:21 UTC (rev 223335)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/EditingSupport.js 2017-10-16 06:25:54 UTC (rev 223336)
@@ -228,73 +228,19 @@
blurEventListener();
} else if (result && result.startsWith("modify-")) {
let direction = result.substring(7);
- let modifyValue = direction.startsWith("up") ? 1 : -1;
+ let delta = direction.startsWith("up") ? 1 : -1;
if (direction.endsWith("big"))
- modifyValue *= 10;
+ delta *= 10;
if (event.shiftKey)
- modifyValue *= 10;
+ delta *= 10;
else if (event.ctrlKey)
- modifyValue /= 10;
+ delta /= 10;
- let selection = element.ownerDocument.defaultView.getSelection();
- if (!selection.rangeCount)
+ let modified = WI.incrementElementValue(element, delta);
+ if (!modified)
return;
- let range = selection.getRangeAt(0);
- if (!range.commonAncestorContainer.isSelfOrDescendant(element))
- return false;
-
- let wordRange = range.startContainer.rangeOfWord(range.startOffset, WI.EditingSupport.StyleValueDelimiters, element);
- let word = wordRange.toString();
- let wordPrefix = "";
- let wordSuffix = "";
- let nonNumberInWord = /[^\d-\.]+/.exec(word);
- if (nonNumberInWord) {
- let 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);
- }
- }
-
- let matches = WI.EditingSupport.CSSNumberRegex.exec(word);
- if (!matches || matches.length !== 4)
- return;
-
- let 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);
-
- let container = range.commonAncestorContainer;
- let startOffset = range.startOffset;
- // This check is for the situation when the cursor is in the space between the
- // opening quote of the attribute and the first character. In that spot, the
- // commonAncestorContainer is actually the entire attribute node since `="` is
- // added as a simple text node. Since the opening quote is immediately before
- // the attribute, the node for that attribute must be the next sibling and the
- // text of the attribute's value must be the first child of that sibling.
- if (container.parentNode.classList.contains("editing")) {
- container = container.nextSibling.firstChild;
- startOffset = 0;
- }
- startOffset += wordPrefix.length;
-
- if (!container)
- return;
-
- let replacementSelectionRange = document.createRange();
- replacementSelectionRange.setStart(container, startOffset);
- replacementSelectionRange.setEnd(container, startOffset + replacement.length);
-
- selection.removeAllRanges();
- selection.addRange(replacementSelectionRange);
-
if (typeof config.numberCommitHandler === "function")
config.numberCommitHandler(element, getContent(element), oldText, context, moveDirection);
@@ -328,6 +274,69 @@
};
};
+WI.incrementElementValue = function(element, delta)
+{
+ let selection = element.ownerDocument.defaultView.getSelection();
+ if (!selection.rangeCount)
+ return false;
+
+ let range = selection.getRangeAt(0);
+ if (!range.commonAncestorContainer.isSelfOrDescendant(element))
+ return false;
+
+ let wordRange = range.startContainer.rangeOfWord(range.startOffset, WI.EditingSupport.StyleValueDelimiters, element);
+ let word = wordRange.toString();
+ let wordPrefix = "";
+ let wordSuffix = "";
+ let nonNumberInWord = /[^\d-\.]+/.exec(word);
+ if (nonNumberInWord) {
+ let 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);
+ }
+ }
+
+ let matches = WI.EditingSupport.CSSNumberRegex.exec(word);
+ if (!matches || matches.length !== 4)
+ return false;
+
+ let replacement = matches[1] + (Math.round((parseFloat(matches[2]) + delta) * 100) / 100) + matches[3];
+
+ selection.removeAllRanges();
+ selection.addRange(wordRange);
+ document.execCommand("insertText", false, wordPrefix + replacement + wordSuffix);
+
+ let container = range.commonAncestorContainer;
+ let startOffset = range.startOffset;
+ // This check is for the situation when the cursor is in the space between the
+ // opening quote of the attribute and the first character. In that spot, the
+ // commonAncestorContainer is actually the entire attribute node since `="` is
+ // added as a simple text node. Since the opening quote is immediately before
+ // the attribute, the node for that attribute must be the next sibling and the
+ // text of the attribute's value must be the first child of that sibling.
+ if (container.parentNode.classList.contains("editing") && container.nextSibling) {
+ container = container.nextSibling.firstChild;
+ startOffset = 0;
+ }
+ startOffset += wordPrefix.length;
+
+ if (!container)
+ return false;
+
+ let replacementSelectionRange = document.createRange();
+ replacementSelectionRange.setStart(container, startOffset);
+ replacementSelectionRange.setEnd(container, startOffset + replacement.length);
+
+ selection.removeAllRanges();
+ selection.addRange(replacementSelectionRange);
+
+ return true;
+};
+
WI.EditingSupport = {
StyleValueDelimiters: " \xA0\t\n\"':;,/()",
CSSNumberRegex: /(.*?)(-?(?:\d+(?:\.\d+)?|\.\d+))(.*)/,
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetTextField.js (223335 => 223336)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetTextField.js 2017-10-16 04:46:21 UTC (rev 223335)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetTextField.js 2017-10-16 06:25:54 UTC (rev 223336)
@@ -225,6 +225,28 @@
return;
}
+ if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+ let delta = 1;
+ if (event.metaKey)
+ delta = 100;
+ else if (event.shiftKey)
+ delta = 10;
+ else if (event.altKey)
+ delta = 0.1;
+
+ if (event.key === "ArrowDown")
+ delta = -delta;
+
+ let didModify = WI.incrementElementValue(this._element, delta);
+ if (!didModify)
+ return;
+
+ event.stop();
+
+ if (this._delegate && typeof this._delegate.spreadsheetTextFieldDidChange === "function")
+ this._delegate.spreadsheetTextFieldDidChange(this);
+ }
+
if (event.key === "Escape") {
event.stop();
this._discardChange();
