Web Inspector: Canvas tab: tree selection abruptly changes when selecting a recording...
authormattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 10 Feb 2018 06:15:46 +0000 (06:15 +0000)
committermattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 10 Feb 2018 06:15:46 +0000 (06:15 +0000)
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@228362 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/CollectionContentView.js
Source/WebInspectorUI/UserInterface/Views/TreeOutline.css

index 3db6c23..277bc54 100644 (file)
@@ -1,5 +1,55 @@
 2018-02-09  Matt Baker  <mattbaker@apple.com>
 
+        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.
+
+2018-02-09  Matt Baker  <mattbaker@apple.com>
+
         Web Inspector: Object.shallowEqual always fails when comparing array property values
         https://bugs.webkit.org/show_bug.cgi?id=182634
         <rdar://problem/37374639>
index db5b068..6dfce91 100644 (file)
@@ -40,7 +40,7 @@
     content: url(../Images/Canvas3D.svg);
 }
 
-.sidebar > .panel.navigation.canvas > .content > .navigation-bar {
+.sidebar > .panel.navigation.canvas > .content > .recording-content > .navigation-bar {
     border-top: 1px solid var(--border-color);
 }
 
 }
 
 .sidebar > .panel.navigation.canvas:not(.has-recordings) > .filter-bar,
-.sidebar > .panel.navigation.canvas:not(.has-recordings) > .content > .navigation-bar {
+.sidebar > .panel.navigation.canvas:not(.has-recordings) > .content > .recording-content {
     display: none;
 }
 
-.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.recording > .icon {
-    content: url(../Images/Recording.svg);
-}
-
 .sidebar > .panel.navigation.canvas > .content > .tree-outline .item.shader-program > .icon {
     content: image-set(url(../Images/DocumentGL.png) 1x, url(../Images/DocumentGL@2x.png) 2x);
 }
 
-.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.folder-icon > .icon {
+.sidebar > .panel.navigation.canvas > .content > .recording-content > .tree-outline .item.recording > .icon {
+    content: url(../Images/Recording.svg);
+}
+
+.sidebar > .panel.navigation.canvas > .content > .recording-content > .tree-outline .item.folder-icon > .icon {
     content: url(../Images/RenderingFrame.svg);
 }
 
-.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.folder-icon > .status {
+.sidebar > .panel.navigation.canvas > .content > .recording-content > .tree-outline .item.folder-icon > .status {
     line-height: 16px;
 }
index e194e90..dda2d90 100644 (file)
@@ -48,11 +48,18 @@ WI.CanvasSidebarPanel = class CanvasSidebarPanel extends WI.NavigationSidebarPan
         this._canvasTreeOutline = this.createContentTreeOutline(suppressFiltering);
         this._canvasTreeOutline.element.classList.add("canvas");
 
+        let recordingContent = this.contentView.element.appendChild(document.createElement("div"));
+        recordingContent.className = "recording-content";
+
         this._recordingNavigationBar = new WI.NavigationBar;
-        this.contentView.addSubview(this._recordingNavigationBar);
+        this._recordingNavigationBar.element.classList.add("hidden");
+        recordingContent.appendChild(this._recordingNavigationBar.element);
 
         this._recordingTreeOutline = this.contentTreeOutline;
-        this.contentView.element.appendChild(this._recordingTreeOutline.element);
+        recordingContent.appendChild(this._recordingTreeOutline.element);
+
+        this._recordingTreeOutline.customIndent = true;
+        this._recordingTreeOutline.registerScrollVirtualizer(recordingContent, 20);
 
         this._canvasTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._treeOutlineSelectionDidChange, this);
         this._recordingTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._treeOutlineSelectionDidChange, this);
@@ -104,6 +111,19 @@ WI.CanvasSidebarPanel = class CanvasSidebarPanel extends WI.NavigationSidebarPan
         if (!this._recording)
             return;
 
+        let selectedTreeElement = this._recordingTreeOutline.selectedTreeElement;
+        if (!action) {
+            if (selectedTreeElement)
+                selectedTreeElement.deselect();
+            return;
+        }
+
+        if (selectedTreeElement && selectedTreeElement instanceof WI.FolderTreeElement) {
+            let lastActionTreeElement = selectedTreeElement.children.lastValue;
+            if (action === lastActionTreeElement.representedObject)
+                return;
+        }
+
         let treeElement = this._recordingTreeOutline.findTreeElement(action);
         console.assert(treeElement, "Missing tree element for recording action.", action);
         if (!treeElement)
@@ -121,6 +141,7 @@ WI.CanvasSidebarPanel = class CanvasSidebarPanel extends WI.NavigationSidebarPan
         super.shown();
 
         this.contentBrowser.addEventListener(WI.ContentBrowser.Event.CurrentRepresentedObjectsDidChange, this._currentRepresentedObjectsDidChange, this);
+        this._currentRepresentedObjectsDidChange();
     }
 
     hidden()
@@ -234,6 +255,7 @@ WI.CanvasSidebarPanel = class CanvasSidebarPanel extends WI.NavigationSidebarPan
         }
 
         this.canvas = null;
+        this.recording = null;
     }
 
     _treeOutlineSelectionDidChange(event)
@@ -265,8 +287,10 @@ WI.CanvasSidebarPanel = class CanvasSidebarPanel extends WI.NavigationSidebarPan
     {
         this._canvasTreeOutline.removeChildren();
 
-        if (!this._canvas)
+        if (!this._canvas) {
+            this._recordingNavigationBar.element.classList.add("hidden");
             return;
+        }
 
         const showRecordings = false;
         let canvasTreeElement = new WI.CanvasTreeElement(this._canvas, showRecordings);
@@ -290,6 +314,7 @@ WI.CanvasSidebarPanel = class CanvasSidebarPanel extends WI.NavigationSidebarPan
     _recordingChanged()
     {
         this._recordingTreeOutline.removeChildren();
+        this.element.classList.toggle("has-recordings", !!this._recording);
 
         if (!this._recording)
             return;
@@ -356,10 +381,9 @@ WI.CanvasSidebarPanel = class CanvasSidebarPanel extends WI.NavigationSidebarPan
             this._scopeBar = null;
         }
 
-        if (!this._canvas || !this._canvas.recordingCollection.items.size) {
-            this.element.classList.remove("has-recordings");
+        this._recordingNavigationBar.element.classList.toggle("hidden", !this._canvas || !this._recording);
+        if (!this._recording || !this._canvas)
             return;
-        }
 
         let scopeBarItems = [];
         let selectedScopeBarItem = null;
@@ -377,8 +401,6 @@ WI.CanvasSidebarPanel = class CanvasSidebarPanel extends WI.NavigationSidebarPan
         this._scopeBar = new WI.ScopeBar("canvas-recordinga-scope-bar", scopeBarItems, selectedScopeBarItem, true);
         this._scopeBar.addEventListener(WI.ScopeBar.Event.SelectionChanged, this._scopeBarSelectionChanged, this);
         this._recordingNavigationBar.insertNavigationItem(this._scopeBar, 0);
-
-        this.element.classList.add("has-recordings");
     }
 };
 
index e4817b9..2f4d127 100644 (file)
@@ -131,6 +131,10 @@ WI.CollectionContentView = class CollectionContentView extends WI.ContentView
         this.addSubview(contentView);
         this.contentViewAdded(contentView);
 
+        if (!this.visible)
+            return;
+
+        contentView.visible = true;
         contentView.shown();
     }
 
@@ -151,7 +155,10 @@ WI.CollectionContentView = class CollectionContentView extends WI.ContentView
         this._contentViewMap.delete(item);
         this.contentViewRemoved(contentView);
 
-        contentView.hidden();
+        if (this.visible) {
+            contentView.visible = false;
+            contentView.hidden();
+        }
 
         contentView.removeEventListener(null, null, this);
 
index f3bc047..b05ac47 100644 (file)
@@ -242,6 +242,10 @@ body[dir=rtl] .tree-outline .item .status {
     height: 14px;
 }
 
+.tree-outline:not(.large):matches(:focus, .force-focus) .item.selected .status .indeterminate-progress-spinner {
+    filter: invert();
+}
+
 .tree-outline .item .title::after {
     content: "";
 }