Changeset 228487 in webkit

Timestamp:

Feb 14, 2018 2:45:50 PM (6 years ago)

Author:

Nikita Vasilyev

Message:

Web Inspector: Styles: completion popover doesn't hide when switching panels
​https://bugs.webkit.org/show_bug.cgi?id=182464
<rdar://problem/37202763>

Reviewed by Timothy Hatcher.

Save the position of the anchor, an element the popover is shown for, and hide the completion popover
when the position changes.

• UserInterface/Views/CompletionSuggestionsView.js:

(WI.CompletionSuggestionsView.prototype.showUntilAnchorMoves):
When the popover is visible, check every 200ms if the anchor moved.

(WI.CompletionSuggestionsView.prototype.hide):

• UserInterface/Views/SpreadsheetTextField.js:

(WI.SpreadsheetTextField.prototype._updateCompletions):
(WI.SpreadsheetTextField.prototype._getCaretRect):
getBoundingClientRect returns {x: 0, y: 0} when it can't determine node's position.
This happens when a node isn't attached to DOM, attached to DOM but not visible, and
a number of odd cases.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/CompletionSuggestionsView.js (modified) (2 diffs)
• UserInterface/Views/SpreadsheetTextField.js (modified) (2 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2018-02-14  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Styles: completion popover doesn't hide when switching panels
+        https://bugs.webkit.org/show_bug.cgi?id=182464
+        <rdar://problem/37202763>
+
+        Reviewed by Timothy Hatcher.
+
+        Save the position of the anchor, an element the popover is shown for, and hide the completion popover
+        when the position changes.
+
+        * UserInterface/Views/CompletionSuggestionsView.js:
+        (WI.CompletionSuggestionsView.prototype.showUntilAnchorMoves):
+        When the popover is visible, check every 200ms if the anchor moved.
+
+        (WI.CompletionSuggestionsView.prototype.hide):
+        * UserInterface/Views/SpreadsheetTextField.js:
+        (WI.SpreadsheetTextField.prototype._updateCompletions):
+        (WI.SpreadsheetTextField.prototype._getCaretRect):
+        getBoundingClientRect returns {x: 0, y: 0} when it can't determine node's position.
+        This happens when a node isn't attached to DOM, attached to DOM but not visible, and
+        a number of odd cases.
+
 2018-02-14  Matt Baker  <mattbaker@apple.com>
 

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

@@ -34 +34 @@
 
         this._selectedIndex = NaN;
+        this._anchorBounds = null;
 
         this._element = document.createElement("div");
@@ -158 +159 @@
     }
 
+    showUntilAnchorMoves(getAnchorBounds)
+    {
+        this._anchorBounds = getAnchorBounds();
+        if (!this._anchorBounds) {
+            this.hide();
+            return;
+        }
+
+        this.show(this._anchorBounds);
+
+        let hideWhenMoved = () => {
+            let anchorBounds = getAnchorBounds();
+            if (!anchorBounds || !anchorBounds.equals(this._anchorBounds))
+                this.hide();
+        };
+
+        if (this._hideWhenMovedIdentifier)
+            clearInterval(this._hideWhenMovedIdentifier);
+
+        this._hideWhenMovedIdentifier = setInterval(hideWhenMoved, 200);
+    }
+
     hide()
     {
         this._element.remove();
+        this._anchorBounds = null;
+        if (this._hideWhenMovedIdentifier) {
+            clearInterval(this._hideWhenMovedIdentifier);
+            this._hideWhenMovedIdentifier = 0;
+        }
     }
 

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

@@ -378 +378 @@
             this._suggestionsView.hide();
         } else {
-            let caretRect = this._getCaretRect(prefix, completionPrefix);
-            this._suggestionsView.show(caretRect);
+            let startOffset = prefix.length - completionPrefix.length;
+            this._suggestionsView.showUntilAnchorMoves(() => {
+                return this._getCaretRect(startOffset);
+            });
         }
 
@@ -390 +392 @@
     }
 
-    _getCaretRect(prefix, completionPrefix)
-    {
-        let startOffset = prefix.length - completionPrefix.length;
+    _getCaretRect(startOffset)
+    {
         let selection = window.getSelection();
 
-        if (startOffset > 0 && selection.rangeCount) {
+        let isHidden = (clientRect) => {
+            return clientRect.x === 0 && clientRect.y === 0
+        };
+
+        if (selection.rangeCount) {
             let range = selection.getRangeAt(0).cloneRange();
             range.setStart(range.startContainer, startOffset);
             let clientRect = range.getBoundingClientRect();
-            return WI.Rect.rectFromClientRect(clientRect);
+
+            if (!isHidden(clientRect)) {
+                // This happens after deleting value. However, when focusing
+                // on an empty value clientRect is visible.
+                return WI.Rect.rectFromClientRect(clientRect);
+            }
         }
 
         let clientRect = this._element.getBoundingClientRect();
+        if (isHidden(clientRect))
+            return null;
+
         const leftPadding = parseInt(getComputedStyle(this._element).paddingLeft) || 0;
         return new WI.Rect(clientRect.left + leftPadding, clientRect.top, clientRect.width, clientRect.height);