Changeset 228362 in webkit


Ignore:
Timestamp:
Feb 9, 2018 10:15:46 PM (6 years ago)
Author:
Matt Baker
Message:

Web Inspector: Canvas tab: tree selection abruptly changes when selecting a recording frame
​https://bugs.webkit.org/show_bug.cgi?id=182667
<rdar://problem/37412639>

Reviewed by Devin Rousso.

  • UserInterface/Views/CanvasSidebarPanel.css:

(.sidebar > .panel.navigation.canvas > .content > .recording-content > .navigation-bar):
(.sidebar > .panel.navigation.canvas:not(.has-recordings) > .filter-bar,):
(.sidebar > .panel.navigation.canvas > .content > .recording-content > .tree-outline .item.recording > .icon):
(.sidebar > .panel.navigation.canvas > .content > .recording-content > .tree-outline .item.folder-icon > .icon):
(.sidebar > .panel.navigation.canvas > .content > .recording-content > .tree-outline .item.folder-icon > .status):
(.sidebar > .panel.navigation.canvas > .content > .navigation-bar): Deleted.
(.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.recording > .icon): Deleted.
(.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.folder-icon > .icon): Deleted.
(.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.folder-icon > .status): Deleted.
Style changes for the additional DOM element required to virtualize the recording tree outline.

  • UserInterface/Views/CanvasSidebarPanel.js:

(WI.CanvasSidebarPanel):
In order to be virtualized, the tree must be the only child of its parent.

(WI.CanvasSidebarPanel.prototype.set action):
Ensure that a frame tree element isn't deselected when the last action
in the frame becomes selected in the RecordingContentView.

(WI.CanvasSidebarPanel.prototype.shown):
Refresh the sidebar, as represented objects may have changed while hidden.

(WI.CanvasSidebarPanel.prototype._currentRepresentedObjectsDidChange):
Unset the recording when no valid represented objects are found, to
prevent a stale recording tree from being shown when viewing the overview.

(WI.CanvasSidebarPanel.prototype._canvasChanged):
(WI.CanvasSidebarPanel.prototype._recordingChanged):
(WI.CanvasSidebarPanel.prototype._updateRecordingScopeBar):
Moved toggling of the "has-recordings" style to _canvasChanged, since
the navigation bar should be hidden when no canvas exists.

  • UserInterface/Views/CollectionContentView.js:

(WI.CollectionContentView.prototype.addContentViewForItem):
(WI.CollectionContentView.prototype.removeContentViewForItem):
Drive by fixes for child view visible state.

  • UserInterface/Views/TreeOutline.css:

(.tree-outline:not(.large):matches(:focus, .force-focus) .item.selected .status .indeterminate-progress-spinner):
Make spinner easier to see against the selection background color.

Location:
trunk/Source/WebInspectorUI
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r228336 r228362  
     12018-02-09  Matt Baker  <mattbaker@apple.com>
     2
     3        Web Inspector: Canvas tab: tree selection abruptly changes when selecting a recording frame
     4        https://bugs.webkit.org/show_bug.cgi?id=182667
     5        <rdar://problem/37412639>
     6
     7        Reviewed by Devin Rousso.
     8
     9        * UserInterface/Views/CanvasSidebarPanel.css:
     10        (.sidebar > .panel.navigation.canvas > .content > .recording-content > .navigation-bar):
     11        (.sidebar > .panel.navigation.canvas:not(.has-recordings) > .filter-bar,):
     12        (.sidebar > .panel.navigation.canvas > .content > .recording-content > .tree-outline .item.recording > .icon):
     13        (.sidebar > .panel.navigation.canvas > .content > .recording-content > .tree-outline .item.folder-icon > .icon):
     14        (.sidebar > .panel.navigation.canvas > .content > .recording-content > .tree-outline .item.folder-icon > .status):
     15        (.sidebar > .panel.navigation.canvas > .content > .navigation-bar): Deleted.
     16        (.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.recording > .icon): Deleted.
     17        (.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.folder-icon > .icon): Deleted.
     18        (.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.folder-icon > .status): Deleted.
     19        Style changes for the additional DOM element required to virtualize the recording tree outline.
     20
     21        * UserInterface/Views/CanvasSidebarPanel.js:
     22        (WI.CanvasSidebarPanel):
     23        In order to be virtualized, the tree must be the only child of its parent.
     24
     25        (WI.CanvasSidebarPanel.prototype.set action):
     26        Ensure that a frame tree element isn't deselected when the last action
     27        in the frame becomes selected in the RecordingContentView.
     28
     29        (WI.CanvasSidebarPanel.prototype.shown):
     30        Refresh the sidebar, as represented objects may have changed while hidden.
     31
     32        (WI.CanvasSidebarPanel.prototype._currentRepresentedObjectsDidChange):
     33        Unset the recording when no valid represented objects are found, to
     34        prevent a stale recording tree from being shown when viewing the overview.
     35
     36        (WI.CanvasSidebarPanel.prototype._canvasChanged):
     37        (WI.CanvasSidebarPanel.prototype._recordingChanged):
     38        (WI.CanvasSidebarPanel.prototype._updateRecordingScopeBar):
     39        Moved toggling of the "has-recordings" style to _canvasChanged, since
     40        the navigation bar should be hidden when no canvas exists.
     41
     42        * UserInterface/Views/CollectionContentView.js:
     43        (WI.CollectionContentView.prototype.addContentViewForItem):
     44        (WI.CollectionContentView.prototype.removeContentViewForItem):
     45        Drive by fixes for child view visible state.
     46
     47        * UserInterface/Views/TreeOutline.css:
     48        (.tree-outline:not(.large):matches(:focus, .force-focus) .item.selected .status .indeterminate-progress-spinner):
     49        Make spinner easier to see against the selection background color.
     50
    1512018-02-09  Matt Baker  <mattbaker@apple.com>
    252

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

    r228301 r228362  
    4141}
    4242
    43 .sidebar > .panel.navigation.canvas > .content > .navigation-bar {
     43.sidebar > .panel.navigation.canvas > .content > .recording-content > .navigation-bar {
    4444    border-top: 1px solid var(--border-color);
    4545}
    … …  
    5151
    5252.sidebar > .panel.navigation.canvas:not(.has-recordings) > .filter-bar,
    53 .sidebar > .panel.navigation.canvas:not(.has-recordings) > .content > .navigation-bar {
     53.sidebar > .panel.navigation.canvas:not(.has-recordings) > .content > .recording-content {
    5454    display: none;
    55 }
    56 
    57 .sidebar > .panel.navigation.canvas > .content > .tree-outline .item.recording > .icon {
    58     content: url(../Images/Recording.svg);
    5955}
    6056
    … …  
    6359}
    6460
    65 .sidebar > .panel.navigation.canvas > .content > .tree-outline .item.folder-icon > .icon {
     61.sidebar > .panel.navigation.canvas > .content > .recording-content > .tree-outline .item.recording > .icon {
     62    content: url(../Images/Recording.svg);
     63}
     64
     65.sidebar > .panel.navigation.canvas > .content > .recording-content > .tree-outline .item.folder-icon > .icon {
    6666    content: url(../Images/RenderingFrame.svg);
    6767}
    6868
    69 .sidebar > .panel.navigation.canvas > .content > .tree-outline .item.folder-icon > .status {
     69.sidebar > .panel.navigation.canvas > .content > .recording-content > .tree-outline .item.folder-icon > .status {
    7070    line-height: 16px;
    7171}

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

    r228301 r228362  
    4949        this._canvasTreeOutline.element.classList.add("canvas");
    5050
     51        let recordingContent = this.contentView.element.appendChild(document.createElement("div"));
     52        recordingContent.className = "recording-content";
     53
    5154        this._recordingNavigationBar = new WI.NavigationBar;
    52         this.contentView.addSubview(this._recordingNavigationBar);
     55        this._recordingNavigationBar.element.classList.add("hidden");
     56        recordingContent.appendChild(this._recordingNavigationBar.element);
    5357
    5458        this._recordingTreeOutline = this.contentTreeOutline;
    55         this.contentView.element.appendChild(this._recordingTreeOutline.element);
     59        recordingContent.appendChild(this._recordingTreeOutline.element);
     60
     61        this._recordingTreeOutline.customIndent = true;
     62        this._recordingTreeOutline.registerScrollVirtualizer(recordingContent, 20);
    5663
    5764        this._canvasTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._treeOutlineSelectionDidChange, this);
    … …  
    105112            return;
    106113
     114        let selectedTreeElement = this._recordingTreeOutline.selectedTreeElement;
     115        if (!action) {
     116            if (selectedTreeElement)
     117                selectedTreeElement.deselect();
     118            return;
     119        }
     120
     121        if (selectedTreeElement && selectedTreeElement instanceof WI.FolderTreeElement) {
     122            let lastActionTreeElement = selectedTreeElement.children.lastValue;
     123            if (action === lastActionTreeElement.representedObject)
     124                return;
     125        }
     126
    107127        let treeElement = this._recordingTreeOutline.findTreeElement(action);
    108128        console.assert(treeElement, "Missing tree element for recording action.", action);
    … …  
    122142
    123143        this.contentBrowser.addEventListener(WI.ContentBrowser.Event.CurrentRepresentedObjectsDidChange, this._currentRepresentedObjectsDidChange, this);
     144        this._currentRepresentedObjectsDidChange();
    124145    }
    125146
    … …  
    235256
    236257        this.canvas = null;
     258        this.recording = null;
    237259    }
    238260
    … …  
    266288        this._canvasTreeOutline.removeChildren();
    267289
    268         if (!this._canvas)
    269             return;
     290        if (!this._canvas) {
     291            this._recordingNavigationBar.element.classList.add("hidden");
     292            return;
     293        }
    270294
    271295        const showRecordings = false;
    … …  
    291315    {
    292316        this._recordingTreeOutline.removeChildren();
     317        this.element.classList.toggle("has-recordings", !!this._recording);
    293318
    294319        if (!this._recording)
    … …  
    357382        }
    358383
    359         if (!this._canvas || !this._canvas.recordingCollection.items.size) {
    360             this.element.classList.remove("has-recordings");
    361             return;
    362         }
     384        this._recordingNavigationBar.element.classList.toggle("hidden", !this._canvas || !this._recording);
     385        if (!this._recording || !this._canvas)
     386            return;
    363387
    364388        let scopeBarItems = [];
    … …  
    378402        this._scopeBar.addEventListener(WI.ScopeBar.Event.SelectionChanged, this._scopeBarSelectionChanged, this);
    379403        this._recordingNavigationBar.insertNavigationItem(this._scopeBar, 0);
    380 
    381         this.element.classList.add("has-recordings");
    382404    }
    383405};

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

    r228301 r228362  
    132132        this.contentViewAdded(contentView);
    133133
     134        if (!this.visible)
     135            return;
     136
     137        contentView.visible = true;
    134138        contentView.shown();
    135139    }
    … …  
    152156        this.contentViewRemoved(contentView);
    153157
    154         contentView.hidden();
     158        if (this.visible) {
     159            contentView.visible = false;
     160            contentView.hidden();
     161        }
    155162
    156163        contentView.removeEventListener(null, null, this);

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

    r225259 r228362  
    243243}
    244244
     245.tree-outline:not(.large):matches(:focus, .force-focus) .item.selected .status .indeterminate-progress-spinner {
     246    filter: invert();
     247}
     248
    245249.tree-outline .item .title::after {
    246250    content: "";
Note: See TracChangeset for help on using the changeset viewer.