Changeset 238859 in webkit


Ignore:
Timestamp:
Dec 4, 2018 10:17:16 AM (5 years ago)
Author:
Matt Baker
Message:

Web Inspector: Elements: $0 is shown for all selected elements
​https://bugs.webkit.org/show_bug.cgi?id=192119
<rdar://problem/46327554>

Reviewed by Devin Rousso.

  • UserInterface/Views/ContentBrowserTabContentView.js:

(WI.ContentBrowserTabContentView.prototype._revealAndSelectRepresentedObject):

  • UserInterface/Views/DOMTreeContentView.js:

(WI.DOMTreeContentView):
(WI.DOMTreeContentView.prototype.layout):
(WI.DOMTreeContentView.prototype._domTreeSelectionDidChange):
Update the selected DOM node using the TreeOutline's selection change
event, instead of in onselect, which wasn't always called.

  • UserInterface/Views/DOMTreeElement.js:

(WI.DOMTreeElement.prototype.onselect): Deleted.
(WI.DOMTreeElement.prototype.ondeselect): Deleted.
Eliminate onselect and ondeselect. TreeOutline clients should use
the TreeOutline.Event.SelectedDidChange event instead.

  • UserInterface/Views/DOMTreeOutline.css:

(.tree-outline.dom li.last-selected > span::after):
(.tree-outline.dom:focus li.last-selected > span::after):
(.tree-outline.dom li.selected > span::after): Deleted.
(.tree-outline.dom:focus li.selected > span::after): Deleted.

  • UserInterface/Views/DOMTreeOutline.js:

(WI.DOMTreeOutline.prototype.updateSelection): Deleted.

  • UserInterface/Views/DebuggerSidebarPanel.js:

(WI.DebuggerSidebarPanel.prototype._handleDebuggerObjectDisplayLocationDidChange):

  • UserInterface/Views/FolderizedTreeElement.js:

(WI.FolderizedTreeElement.prototype._addTreeElement):

  • UserInterface/Views/NavigationSidebarPanel.js:

(WI.NavigationSidebarPanel.prototype.showDefaultContentViewForTreeElement):
(WI.NavigationSidebarPanel.prototype._treeElementWasFiltered):
(WI.NavigationSidebarPanel):

  • UserInterface/Views/OpenResourceDialog.js:

(WI.OpenResourceDialog.prototype._populateResourceTreeOutline):
(WI.OpenResourceDialog.prototype._handleKeydownEvent):

  • UserInterface/Views/SourceCodeTreeElement.js:

(WI.SourceCodeTreeElement.prototype.descendantResourceTreeElementTypeDidChange):

  • UserInterface/Views/TreeElement.js:

(WI.TreeElement.prototype.select):
(WI.TreeElement.prototype.revealAndSelect):
(WI.TreeElement.prototype.deselect):
Remove suppressOnDeselect and rename suppressOnSelect to suppressNotification.
Now that ondeselect has been removed suppressOnDeselect is no longer
meaningful, as TreeOutline generates a single SelectedDidChange event
when the selected item changes. In the case of revealAndSelect, both
arguments had the same value.

  • UserInterface/Views/TreeOutline.js:

(WI.TreeOutline):
(WI.TreeOutline.prototype.selectionControllerSelectionDidChange):
Add a unique class name to the last selected TreeElement to distinguish
it from other selected elements.

Location:
trunk/Source/WebInspectorUI
Files:
13 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r238858 r238859  
     12018-12-04  Matt Baker  <mattbaker@apple.com>
     2
     3        Web Inspector: Elements: $0 is shown for all selected elements
     4        https://bugs.webkit.org/show_bug.cgi?id=192119
     5        <rdar://problem/46327554>
     6
     7        Reviewed by Devin Rousso.
     8
     9        * UserInterface/Views/ContentBrowserTabContentView.js:
     10        (WI.ContentBrowserTabContentView.prototype._revealAndSelectRepresentedObject):
     11        * UserInterface/Views/DOMTreeContentView.js:
     12        (WI.DOMTreeContentView):
     13        (WI.DOMTreeContentView.prototype.layout):
     14        (WI.DOMTreeContentView.prototype._domTreeSelectionDidChange):
     15        Update the selected DOM node using the TreeOutline's selection change
     16        event, instead of in `onselect`, which wasn't always called.
     17
     18        * UserInterface/Views/DOMTreeElement.js:
     19        (WI.DOMTreeElement.prototype.onselect): Deleted.
     20        (WI.DOMTreeElement.prototype.ondeselect): Deleted.
     21        Eliminate `onselect` and `ondeselect`. TreeOutline clients should use
     22        the TreeOutline.Event.SelectedDidChange event instead.
     23
     24        * UserInterface/Views/DOMTreeOutline.css:
     25        (.tree-outline.dom li.last-selected > span::after):
     26        (.tree-outline.dom:focus li.last-selected > span::after):
     27        (.tree-outline.dom li.selected > span::after): Deleted.
     28        (.tree-outline.dom:focus li.selected > span::after): Deleted.
     29        * UserInterface/Views/DOMTreeOutline.js:
     30        (WI.DOMTreeOutline.prototype.updateSelection): Deleted.
     31
     32        * UserInterface/Views/DebuggerSidebarPanel.js:
     33        (WI.DebuggerSidebarPanel.prototype._handleDebuggerObjectDisplayLocationDidChange):
     34        * UserInterface/Views/FolderizedTreeElement.js:
     35        (WI.FolderizedTreeElement.prototype._addTreeElement):
     36        * UserInterface/Views/NavigationSidebarPanel.js:
     37        (WI.NavigationSidebarPanel.prototype.showDefaultContentViewForTreeElement):
     38        (WI.NavigationSidebarPanel.prototype._treeElementWasFiltered):
     39        (WI.NavigationSidebarPanel):
     40        * UserInterface/Views/OpenResourceDialog.js:
     41        (WI.OpenResourceDialog.prototype._populateResourceTreeOutline):
     42        (WI.OpenResourceDialog.prototype._handleKeydownEvent):
     43        * UserInterface/Views/SourceCodeTreeElement.js:
     44        (WI.SourceCodeTreeElement.prototype.descendantResourceTreeElementTypeDidChange):
     45        * UserInterface/Views/TreeElement.js:
     46        (WI.TreeElement.prototype.select):
     47        (WI.TreeElement.prototype.revealAndSelect):
     48        (WI.TreeElement.prototype.deselect):
     49        Remove `suppressOnDeselect` and rename `suppressOnSelect` to `suppressNotification`.
     50        Now that `ondeselect` has been removed `suppressOnDeselect` is no longer
     51        meaningful, as TreeOutline generates a single `SelectedDidChange` event
     52        when the selected item changes. In the case of `revealAndSelect`, both
     53        arguments had the same value.
     54
     55        * UserInterface/Views/TreeOutline.js:
     56        (WI.TreeOutline):
     57        (WI.TreeOutline.prototype.selectionControllerSelectionDidChange):
     58        Add a unique class name to the last selected TreeElement to distinguish
     59        it from other selected elements.
     60
    1612018-12-04  Matt Baker  <mattbaker@apple.com>
    262

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

    r234563 r238859  
    318318
    319319        if (treeElement)
    320             treeElement.revealAndSelect(true, false, true, true);
     320            treeElement.revealAndSelect(true, false, true);
    321321        else if (this.navigationSidebarPanel && this.navigationSidebarPanel.contentTreeOutline.selectedTreeElement)
    322322            this.navigationSidebarPanel.contentTreeOutline.selectedTreeElement.deselect(true);

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

    r238602 r238859  
    6868        this._domTreeOutline.allowsMultipleSelection = true;
    6969        this._domTreeOutline.addEventListener(WI.TreeOutline.Event.ElementAdded, this._domTreeElementAdded, this);
     70        this._domTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._domTreeSelectionDidChange, this);
    7071        this._domTreeOutline.addEventListener(WI.DOMTreeOutline.Event.SelectedNodeChanged, this._selectedNodeDidChange, this);
    7172        this._domTreeOutline.wireToDomAgent();
    … …  
    358359    layout()
    359360    {
    360         this._domTreeOutline.updateSelection();
     361        this._domTreeOutline.updateSelectionArea();
    361362
    362363        if (this.layoutReason === WI.View.LayoutReason.Resize)
    … …  
    450451
    451452        this._updateBreakpointStatus(node.id);
     453    }
     454
     455    _domTreeSelectionDidChange(event)
     456    {
     457        let treeElement = this._domTreeOutline.selectedTreeElement;
     458        let domNode = treeElement ? treeElement.representedObject : null;
     459        let selectedByUser = event.data.selectedByUser;
     460
     461        this._domTreeOutline.suppressRevealAndSelect = true;
     462        this._domTreeOutline.selectDOMNode(domNode, selectedByUser);
     463
     464        if (domNode && selectedByUser)
     465            WI.domManager.highlightDOMNode(domNode.id);
     466
     467        this._domTreeOutline.updateSelectionArea();
     468        this._domTreeOutline.suppressRevealAndSelect = false;
    452469    }
    453470

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

    r238626 r238859  
    626626    }
    627627
    628     onselect(treeElement, selectedByUser)
    629     {
    630         this.treeOutline.suppressRevealAndSelect = true;
    631         this.treeOutline.selectDOMNode(this.representedObject, selectedByUser);
    632         if (selectedByUser)
    633             WI.domManager.highlightDOMNode(this.representedObject.id);
    634         this.treeOutline.updateSelection();
    635         this.treeOutline.suppressRevealAndSelect = false;
    636     }
    637 
    638     ondeselect(treeElement)
    639     {
    640         this.treeOutline.selectDOMNode(null);
    641     }
    642 
    643628    ondelete()
    644629    {

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

    r238671 r238859  
    7979}
    8080
    81 .tree-outline.dom li.selected > span::after {
     81.tree-outline.dom li.last-selected > span::after {
    8282    content: " = $0";
    8383    color: var(--console-secondary-text-color);
    … …  
    8686}
    8787
    88 .tree-outline.dom:focus li.selected > span::after {
     88.tree-outline.dom:focus li.last-selected > span::after {
    8989    color: var(--selected-secondary-text-color);
    9090}

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

    r238626 r238859  
    185185    }
    186186
    187     updateSelection()
     187    updateSelectionArea()
    188188    {
    189189        // This will miss updating selection areas used for the hovered tree element and

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

    r238743 r238859  
    785785
    786786        if (newDebuggerTreeElement && wasSelected)
    787             newDebuggerTreeElement.revealAndSelect(true, false, true, true);
     787            newDebuggerTreeElement.revealAndSelect(true, false, true);
    788788    }
    789789

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

    r231391 r238859  
    224224
    225225        if (wasSelected)
    226             childTreeElement.revealAndSelect(true, false, true, true);
     226            childTreeElement.revealAndSelect(true, false, true);
    227227    }
    228228

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

    r238831 r238859  
    196196            return false;
    197197
    198         treeElement.revealAndSelect(true, false, true, true);
     198        treeElement.revealAndSelect(true, false, true);
    199199        return true;
    200200    }
    … …  
    743743        const omitFocus = true;
    744744        const selectedByUser = false;
    745         const suppressOnSelect = true;
    746         const suppressOnDeselect = true;
    747         treeElement.revealAndSelect(omitFocus, selectedByUser, suppressOnSelect, suppressOnDeselect);
     745        const suppressNotification = true;
     746        treeElement.revealAndSelect(omitFocus, selectedByUser, suppressNotification);
    748747    }
    749748};

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

    r238483 r238859  
    125125
    126126        if (this._treeOutline.children.length)
    127             this._treeOutline.children[0].select(true, false, true, true);
     127            this._treeOutline.children[0].select(true, false, true);
    128128    }
    129129
    … …  
    203203            treeElement = treeElement[adjacentSiblingProperty];
    204204            if (treeElement)
    205                 treeElement.revealAndSelect(true, false, true, true);
     205                treeElement.revealAndSelect(true, false, true);
    206206
    207207            event.preventDefault();

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

    r220119 r238859  
    185185            parentTreeElement.expand();
    186186        if (wasSelected)
    187             childTreeElement.revealAndSelect(true, false, true, true);
     187            childTreeElement.revealAndSelect(true, false, true);
    188188    }
    189189

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

    r238757 r238859  
    499499    }
    500500
    501     select(omitFocus, selectedByUser, suppressOnSelect, suppressOnDeselect)
     501    select(omitFocus, selectedByUser, suppressNotification)
    502502    {
    503503        if (!this.treeOutline || !this.selectable)
    … …  
    516516
    517517        this.selected = true;
    518         treeOutline.selectTreeElementInternal(this, suppressOnSelect, selectedByUser);
    519 
    520         if (!suppressOnSelect && this.onselect)
    521             this.onselect(this, selectedByUser);
     518        treeOutline.selectTreeElementInternal(this, suppressNotification, selectedByUser);
    522519
    523520        let treeOutlineGroup = WI.TreeOutlineGroup.groupForTreeOutline(treeOutline);
    … …  
    528525    }
    529526
    530     revealAndSelect(omitFocus, selectedByUser, suppressOnSelect, suppressOnDeselect)
     527    revealAndSelect(omitFocus, selectedByUser, suppressNotification)
    531528    {
    532529        this.reveal();
    533         this.select(omitFocus, selectedByUser, suppressOnSelect, suppressOnDeselect);
    534     }
    535 
    536     deselect(suppressOnDeselect)
     530        this.select(omitFocus, selectedByUser, suppressNotification);
     531    }
     532
     533    deselect(suppressNotification)
    537534    {
    538535        if (!this.treeOutline || this.treeOutline.selectedTreeElement !== this || !this.selected)
    … …  
    540537
    541538        this.selected = false;
    542         this.treeOutline.selectTreeElementInternal(null, suppressOnDeselect);
    543 
    544         if (!suppressOnDeselect && this.ondeselect)
    545             this.ondeselect(this);
     539        this.treeOutline.selectTreeElementInternal(null, suppressNotification);
    546540
    547541        return true;

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

    r238858 r238859  
    5656
    5757        this._cachedNumberOfDescendents = 0;
     58        this._previousSelectedTreeElement = null;
    5859        this._selectionController = new WI.SelectionController(this);
    5960
    … …  
    813814        }
    814815
     816        let selectedTreeElement = this.selectedTreeElement;
     817        if (selectedTreeElement !== this._previousSelectedTreeElement) {
     818            if (this._previousSelectedTreeElement)
     819                this._previousSelectedTreeElement.listItemElement.classList.remove("last-selected");
     820
     821            this._previousSelectedTreeElement = selectedTreeElement;
     822
     823            if (this._previousSelectedTreeElement)
     824                this._previousSelectedTreeElement.listItemElement.classList.add("last-selected");
     825        }
     826
    815827        this._dispatchSelectionDidChangeEvent();
    816828
Note: See TracChangeset for help on using the changeset viewer.