Changeset 239935 in webkit


Ignore:
Timestamp:
Jan 14, 2019 1:07:57 PM (5 years ago)
Author:
Nikita Vasilyev
Message:

Web Inspector: Styles: pressing Down key on empty value field shouldn't discard completion popover
https://bugs.webkit.org/show_bug.cgi?id=193098
<rdar://problem/47016036>

Reviewed by Devin Rousso.

Hide CompletionSuggestionsView when SpreadsheetTextField moves, e.g. by scrolling or resizing the sidebar.
Update CompletionSuggestionsView position after pressing Up or Down key, because SpreadsheetTextField may
move from wrapping text.

  • UserInterface/Views/CompletionSuggestionsView.js:

(WI.CompletionSuggestionsView.prototype.hide):
(WI.CompletionSuggestionsView.prototype.show):
(WI.CompletionSuggestionsView.prototype.showUntilAnchorMoves): Removed.
(WI.CompletionSuggestionsView.prototype.hideWhenElementMoves): Added.
(WI.CompletionSuggestionsView.prototype._stopMoveTimer): Added.
(WI.CompletionSuggestionsView):

  • UserInterface/Views/SpreadsheetTextField.js:

(WI.SpreadsheetTextField.prototype.set suggestionHint):
(WI.SpreadsheetTextField.prototype.completionSuggestionsSelectedCompletion):
(WI.SpreadsheetTextField.prototype._handleKeyDownForSuggestionView):
(WI.SpreadsheetTextField.prototype._updateCompletions):
(WI.SpreadsheetTextField.prototype._showSuggestionsView): Added.

(WI.SpreadsheetTextField.prototype._reAttachSuggestionHint):
Drive-by: abstract out repeating code into a private method.

Location:
trunk/Source/WebInspectorUI
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/Source/WebInspectorUI/ChangeLog

    r239932 r239935  
     12019-01-14  Nikita Vasilyev  <nvasilyev@apple.com>
     2
     3        Web Inspector: Styles: pressing Down key on empty value field shouldn't discard completion popover
     4        https://bugs.webkit.org/show_bug.cgi?id=193098
     5        <rdar://problem/47016036>
     6
     7        Reviewed by Devin Rousso.
     8
     9        Hide CompletionSuggestionsView when SpreadsheetTextField moves, e.g. by scrolling or resizing the sidebar.
     10        Update CompletionSuggestionsView position after pressing Up or Down key, because SpreadsheetTextField may
     11        move from wrapping text.
     12
     13        * UserInterface/Views/CompletionSuggestionsView.js:
     14        (WI.CompletionSuggestionsView.prototype.hide):
     15        (WI.CompletionSuggestionsView.prototype.show):
     16        (WI.CompletionSuggestionsView.prototype.showUntilAnchorMoves): Removed.
     17        (WI.CompletionSuggestionsView.prototype.hideWhenElementMoves): Added.
     18        (WI.CompletionSuggestionsView.prototype._stopMoveTimer): Added.
     19        (WI.CompletionSuggestionsView):
     20
     21        * UserInterface/Views/SpreadsheetTextField.js:
     22        (WI.SpreadsheetTextField.prototype.set suggestionHint):
     23        (WI.SpreadsheetTextField.prototype.completionSuggestionsSelectedCompletion):
     24        (WI.SpreadsheetTextField.prototype._handleKeyDownForSuggestionView):
     25        (WI.SpreadsheetTextField.prototype._updateCompletions):
     26        (WI.SpreadsheetTextField.prototype._showSuggestionsView): Added.
     27
     28        (WI.SpreadsheetTextField.prototype._reAttachSuggestionHint):
     29        Drive-by: abstract out repeating code into a private method.
     30
    1312019-01-14  Devin Rousso  <drousso@apple.com>
    232
  • trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.js

    r228487 r239935  
    3434
    3535        this._selectedIndex = NaN;
    36         this._anchorBounds = null;
     36        this._moveIntervalIdentifier = null;
    3737
    3838        this._element = document.createElement("div");
     
    113113    show(anchorBounds)
    114114    {
     115        let scrollTop = this._containerElement.scrollTop;
     116
    115117        // Measure the container so we can know the intrinsic size of the items.
    116118        this._containerElement.style.position = "absolute";
     
    157159
    158160        document.body.appendChild(this._element);
    159     }
    160 
    161     showUntilAnchorMoves(getAnchorBounds)
    162     {
    163         this._anchorBounds = getAnchorBounds();
    164         if (!this._anchorBounds) {
    165             this.hide();
    166             return;
    167         }
    168 
    169         this.show(this._anchorBounds);
    170 
    171         let hideWhenMoved = () => {
    172             let anchorBounds = getAnchorBounds();
    173             if (!anchorBounds || !anchorBounds.equals(this._anchorBounds))
     161
     162        if (scrollTop)
     163            this._containerElement.scrollTop = scrollTop;
     164    }
     165
     166    hide()
     167    {
     168        this._element.remove();
     169        this._stopMoveTimer();
     170    }
     171
     172    hideWhenElementMoves(element)
     173    {
     174        this._stopMoveTimer();
     175        let initialClientRect = element.getBoundingClientRect();
     176
     177        this._moveIntervalIdentifier = setInterval(() => {
     178            let clientRect = element.getBoundingClientRect();
     179            if (clientRect.x !== initialClientRect.x || clientRect.y !== initialClientRect.y)
    174180                this.hide();
    175         };
    176 
    177         if (this._hideWhenMovedIdentifier)
    178             clearInterval(this._hideWhenMovedIdentifier);
    179 
    180         this._hideWhenMovedIdentifier = setInterval(hideWhenMoved, 200);
    181     }
    182 
    183     hide()
    184     {
    185         this._element.remove();
    186         this._anchorBounds = null;
    187         if (this._hideWhenMovedIdentifier) {
    188             clearInterval(this._hideWhenMovedIdentifier);
    189             this._hideWhenMovedIdentifier = 0;
    190         }
     181        }, 200);
     182
    191183    }
    192184
     
    254246            this._delegate.completionSuggestionsClickedCompletion(this, itemElement.textContent);
    255247    }
     248
     249    _stopMoveTimer()
     250    {
     251        if (!this._moveIntervalIdentifier)
     252            return;
     253
     254        clearInterval(this._moveIntervalIdentifier);
     255        this._moveIntervalIdentifier = null;
     256    }
    256257};
    257258
  • trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetTextField.js

    r239762 r239935  
    7575        this._suggestionHintElement.textContent = value;
    7676
    77         if (value) {
    78             if (this._suggestionHintElement.parentElement !== this._element)
    79                 this._element.append(this._suggestionHintElement);
    80         } else
     77        if (value)
     78            this._reAttachSuggestionHint();
     79        else
    8180            this._suggestionHintElement.remove();
    8281    }
     
    145144        this.suggestionHint = selectedText.slice(completionPrefix.length);
    146145
    147         if (this._suggestionHintElement.parentElement !== this._element)
    148             this._element.append(this._suggestionHintElement);
     146        this._reAttachSuggestionHint();
    149147
    150148        if (this._delegate && typeof this._delegate.spreadsheetTextFieldDidChange === "function")
     
    304302                this._suggestionsView.selectPrevious();
    305303
     304            // Update popover position in case text moved, e.g. started or stopped wrapping.
     305            this._showSuggestionsView();
     306
    306307            if (this._delegate && typeof this._delegate.spreadsheetTextFieldDidChange === "function")
    307308                this._delegate.spreadsheetTextFieldDidChange(this);
     
    392393            // No need to show the completion popover that matches the suggestion hint.
    393394            this._suggestionsView.hide();
    394         } else {
    395             let startOffset = prefix.length - completionPrefix.length;
    396             this._suggestionsView.showUntilAnchorMoves(() => {
    397                 return this._getCaretRect(startOffset);
    398             });
    399         }
     395        } else
     396            this._showSuggestionsView();
    400397
    401398        this._suggestionsView.selectedIndex = NaN;
     
    407404    }
    408405
     406    _showSuggestionsView()
     407    {
     408        let prefix = this.valueWithoutSuggestion();
     409        let completionPrefix = this._getCompletionPrefix(prefix);
     410        let startOffset = prefix.length - completionPrefix.length;
     411        let caretRect = this._getCaretRect(startOffset);
     412
     413        // Hide completion popover when the anchor element is removed from the DOM.
     414        if (!caretRect)
     415            this._suggestionsView.hide();
     416        else {
     417            this._suggestionsView.show(caretRect);
     418            this._suggestionsView.hideWhenElementMoves(this._element);
     419        }
     420    }
     421
    409422    _getCaretRect(startOffset)
    410423    {
     
    452465        this._element.textContent = this._element.textContent;
    453466    }
     467
     468    _reAttachSuggestionHint()
     469    {
     470        if (this._suggestionHintElement.parentElement === this._element)
     471            return;
     472
     473        this._element.append(this._suggestionHintElement);
     474    }
    454475};
Note: See TracChangeset for help on using the changeset viewer.