Changeset 223336 in webkit

Timestamp:

Oct 15, 2017 11:25:54 PM (7 years ago)

Author:

Nikita Vasilyev

Message:

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.

Source/WebInspectorUI:

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):

LayoutTests:

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.

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/inspector/unit-tests/editing-support-expected.txt (added)
• LayoutTests/inspector/unit-tests/editing-support.html (added)
• Source/WebInspectorUI/ChangeLog (modified) (1 diff)
• Source/WebInspectorUI/UserInterface/Test.html (modified) (1 diff)
• Source/WebInspectorUI/UserInterface/Views/EditingSupport.js (modified) (2 diffs)
• Source/WebInspectorUI/UserInterface/Views/SpreadsheetTextField.js (modified) (1 diff)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2017-10-15  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        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  <graouts@apple.com>
 

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2017-10-15  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        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  <webkit@devinrousso.com>
 

trunk/Source/WebInspectorUI/UserInterface/Test.html

@@ -217 +217 @@
     <script src="Views/CodeMirrorAdditions.js"></script>
     <script src="Views/CodeMirrorFormatters.js"></script>
+    <script src="Views/EditingSupport.js"></script>
     <script src="Views/View.js"></script>
 

trunk/Source/WebInspectorUI/UserInterface/Views/EditingSupport.js

@@ -229 +229 @@
         } 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;
-
-            let selection = element.ownerDocument.defaultView.getSelection();
-            if (!selection.rangeCount)
+                delta /= 10;
+
+            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")
@@ -329 +275 @@
 };
 
+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\"':;,/()",

trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetTextField.js

@@ -226 +226 @@
         }
 
+        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();