Changeset 238602 in webkit


Ignore:
Timestamp:
Nov 27, 2018 10:49:34 PM (5 years ago)
Author:
Matt Baker
Message:

Web Inspector: Elements tab should allow selecting/deleting multiple DOM nodes
​https://bugs.webkit.org/show_bug.cgi?id=192059
<rdar://problem/46294827>

Reviewed by Devin Rousso.

Enable multiple DOM node selection in the DOMTreeContentView.

  • UserInterface/Controllers/SelectionController.js:

(WI.SelectionController):
(WI.SelectionController.prototype.get allowsEmptySelection):
(WI.SelectionController.prototype.set allowsEmptySelection):
Allow clients to control whether the last selected item can be deselected.
(WI.SelectionController.prototype.deselectItem):
(WI.SelectionController.prototype.didInsertItem):
Rewritten to prevent infinite loop.
(WI.SelectionController.prototype.didRemoveItem):
(WI.SelectionController.prototype._updateSelectedItems):
(WI.SelectionController.prototype._adjustIndexesAfter): Deleted.

  • UserInterface/Views/DOMTreeContentView.js:

(WI.DOMTreeContentView):

  • UserInterface/Views/DOMTreeElement.js:

(WI.DOMTreeElement.prototype.updateSelectionArea):

  • UserInterface/Views/DOMTreeOutline.js:

(WI.DOMTreeOutline.prototype.updateSelection):
Updating the selection area DOM element should not assume that only one
TreeElement is selected at a time.

  • UserInterface/Views/TreeOutline.js:

(WI.TreeOutline.prototype.get allowsEmptySelection):
(WI.TreeOutline.prototype.set allowsEmptySelection):
(WI.TreeOutline.prototype.set selectedTreeElement):
(WI.TreeOutline.prototype.get selectedTreeElements):
(WI.TreeOutline.prototype._treeKeyDown):

  • UserInterface/Views/TreeOutlineGroup.js:

(WI.TreeOutlineGroup):
(WI.TreeOutlineGroup.prototype._removeConflictingTreeSelections):
Eliminate use of TreeElement.prototype.deselect.

Location:
trunk/Source/WebInspectorUI
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r238599 r238602  
     12018-11-27  Matt Baker  <mattbaker@apple.com>
     2
     3        Web Inspector: Elements tab should allow selecting/deleting multiple DOM nodes
     4        https://bugs.webkit.org/show_bug.cgi?id=192059
     5        <rdar://problem/46294827>
     6
     7        Reviewed by Devin Rousso.
     8
     9        Enable multiple DOM node selection in the DOMTreeContentView.
     10
     11        * UserInterface/Controllers/SelectionController.js:
     12        (WI.SelectionController):
     13        (WI.SelectionController.prototype.get allowsEmptySelection):
     14        (WI.SelectionController.prototype.set allowsEmptySelection):
     15        Allow clients to control whether the last selected item can be deselected.
     16        (WI.SelectionController.prototype.deselectItem):
     17        (WI.SelectionController.prototype.didInsertItem):
     18        Rewritten to prevent infinite loop.
     19        (WI.SelectionController.prototype.didRemoveItem):
     20        (WI.SelectionController.prototype._updateSelectedItems):
     21        (WI.SelectionController.prototype._adjustIndexesAfter): Deleted.
     22
     23        * UserInterface/Views/DOMTreeContentView.js:
     24        (WI.DOMTreeContentView):
     25
     26        * UserInterface/Views/DOMTreeElement.js:
     27        (WI.DOMTreeElement.prototype.updateSelectionArea):
     28        * UserInterface/Views/DOMTreeOutline.js:
     29        (WI.DOMTreeOutline.prototype.updateSelection):
     30        Updating the selection area DOM element should not assume that only one
     31        TreeElement is selected at a time.
     32
     33        * UserInterface/Views/TreeOutline.js:
     34        (WI.TreeOutline.prototype.get allowsEmptySelection):
     35        (WI.TreeOutline.prototype.set allowsEmptySelection):
     36        (WI.TreeOutline.prototype.set selectedTreeElement):
     37        (WI.TreeOutline.prototype.get selectedTreeElements):
     38        (WI.TreeOutline.prototype._treeKeyDown):
     39
     40        * UserInterface/Views/TreeOutlineGroup.js:
     41        (WI.TreeOutlineGroup):
     42        (WI.TreeOutlineGroup.prototype._removeConflictingTreeSelections):
     43        Eliminate use of `TreeElement.prototype.deselect`.
     44
    1452018-11-27  Matt Baker  <mattbaker@apple.com>
    246

  • trunk/Source/WebInspectorUI/UserInterface/Controllers/SelectionController.js

    r238599 r238602  
    3333        this._delegate = delegate;
    3434
     35        this._allowsEmptySelection = true;
    3536        this._allowsMultipleSelection = false;
    3637        this._lastSelectedIndex = NaN;
    … …  
    4950    get selectedItems() { return this._selectedIndexes; }
    5051
     52    get allowsEmptySelection() { return this._allowsEmptySelection; }
     53    set allowsEmptySelection(flag) { this._allowsEmptySelection = flag; }
     54
    5155    get allowsMultipleSelection()
    5256    {
    … …  
    104108
    105109        if (!this.hasSelectedItem(index))
     110            return;
     111
     112        if (!this._allowsEmptySelection && this._selectedIndexes.size === 1)
    106113            return;
    107114
    … …  
    195202    didInsertItem(index)
    196203    {
    197         this._adjustIndexesAfter(index - 1, 1);
     204        let current = this._selectedIndexes.lastIndex;
     205        while (current >= index) {
     206            this._selectedIndexes.delete(index);
     207            this._selectedIndexes.add(index + 1);
     208
     209            current = this._selectedIndexes.indexLessThan(current);
     210        }
    198211    }
    199212
    … …  
    203216            this.deselectItem(index);
    204217
    205         this._adjustIndexesAfter(index, -1);
     218        while (index = this._selectedIndexes.indexGreaterThan(index)) {
     219            this._selectedIndexes.delete(index);
     220            this._selectedIndexes.add(index - 1);
     221        }
    206222    }
    207223
    … …  
    375391        this._delegate.selectionControllerSelectionDidChange(this, deselectedItems, selectedItems);
    376392    }
    377 
    378     _adjustIndexesAfter(index, delta)
    379     {
    380         while (index = this._selectedIndexes.indexGreaterThan(index)) {
    381             this._selectedIndexes.delete(index);
    382             this._selectedIndexes.add(index + delta);
    383         }
    384     }
    385393};

  • trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js

    r238570 r238602  
    6565
    6666        this._domTreeOutline = new WI.DOMTreeOutline(true, true, true);
     67        this._domTreeOutline.allowsEmptySelection = false;
     68        this._domTreeOutline.allowsMultipleSelection = true;
    6769        this._domTreeOutline.addEventListener(WI.TreeOutline.Event.ElementAdded, this._domTreeElementAdded, this);
    6870        this._domTreeOutline.addEventListener(WI.DOMTreeOutline.Event.SelectedNodeChanged, this._selectedNodeDidChange, this);

  • trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js

    r238599 r238602  
    368368
    369369        // If there's no reason to have a selection area, remove the DOM element.
    370         let indicatesTreeOutlineState = this.treeOutline && (this.treeOutline.dragOverTreeElement === this || this.treeOutline.selectedTreeElement === this || this._animatingHighlight);
     370        let indicatesTreeOutlineState = this.treeOutline && (this.treeOutline.dragOverTreeElement === this || this.selected || this._animatingHighlight);
    371371        if (!this.hovered && !this.pseudoClassesEnabled && !indicatesTreeOutlineState) {
    372372            if (this._selectionElement) {

  • trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js

    r238599 r238602  
    192192        // The hovered element will update when user moves the mouse, and indicators don't need the
    193193        // selection area height to be accurate since they use ::before to place the indicator.
    194         if (this.selectedTreeElement)
    195             this.selectedTreeElement.updateSelectionArea();
     194        let selectedTreeElements = this.selectedTreeElements;
     195        for (let treeElement of selectedTreeElements)
     196            treeElement.updateSelectionArea();
    196197    }
    197198

  • trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js

    r238599 r238602  
    8282    // Public
    8383
     84    get allowsEmptySelection()
     85    {
     86        return this._selectionController.allowsEmptySelection;
     87    }
     88
     89    set allowsEmptySelection(flag)
     90    {
     91        this._selectionController.allowsEmptySelection = flag;
     92    }
     93
    8494    get allowsMultipleSelection()
    8595    {
    … …  
    100110    set selectedTreeElement(treeElement)
    101111    {
    102         let index = this._indexOfTreeElement(treeElement);
    103         this._selectionController.selectItem(index);
     112        if (treeElement) {
     113            let index = this._indexOfTreeElement(treeElement);
     114            this._selectionController.selectItem(index);
     115        } else
     116            this._selectionController.deselectAll();
     117    }
     118
     119    get selectedTreeElements()
     120    {
     121        if (this.allowsMultipleSelection) {
     122            let treeElements = [];
     123            for (let index of this._selectionController.selectedItems)
     124                treeElements.push(this._treeElementAtIndex(index));
     125            return treeElements;
     126        }
     127
     128        let selectedTreeElement = this.selectedTreeElement;
     129        if (selectedTreeElement)
     130            return [selectedTreeElement];
     131
     132        return [];
    104133    }
    105134
    … …  
    608637            }
    609638        } else if (event.keyCode === 8 /* Backspace */ || event.keyCode === 46 /* Delete */) {
    610             if (this.selectedTreeElement.ondelete)
    611                 handled = this.selectedTreeElement.ondelete();
     639            for (let treeElement of this.selectedTreeElements) {
     640                if (treeElement.ondelete && treeElement.ondelete())
     641                    handled = true;
     642            }
    612643            if (!handled && this.treeOutline.ondelete)
    613644                handled = this.treeOutline.ondelete(this.selectedTreeElement);

  • trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutlineGroup.js

    r231391 r238602  
    8888                continue;
    8989
    90             if (treeOutline.selectedTreeElement)
    91                 treeOutline.selectedTreeElement.deselect();
     90            treeOutline.selectedTreeElement = null;
    9291        }
    9392    }
Note: See TracChangeset for help on using the changeset viewer.