Diff
Modified: branches/safari-605-branch/Source/WebInspectorUI/ChangeLog (228381 => 228382)
--- branches/safari-605-branch/Source/WebInspectorUI/ChangeLog 2018-02-12 18:32:32 UTC (rev 228381)
+++ branches/safari-605-branch/Source/WebInspectorUI/ChangeLog 2018-02-12 18:32:34 UTC (rev 228382)
@@ -1,3 +1,57 @@
+2018-02-12 Jason Marcell <jmarc...@apple.com>
+
+ Cherry-pick r228362. rdar://problem/37449316
+
+ 2018-02-09 Matt Baker <mattba...@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 Jason Marcell <jmarc...@apple.com>
Cherry-pick r228336. rdar://problem/37408902
Modified: branches/safari-605-branch/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css (228381 => 228382)
--- branches/safari-605-branch/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css 2018-02-12 18:32:32 UTC (rev 228381)
+++ branches/safari-605-branch/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css 2018-02-12 18:32:34 UTC (rev 228382)
@@ -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);
}
@@ -50,22 +50,22 @@
}
.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/documen...@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;
}
Modified: branches/safari-605-branch/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.js (228381 => 228382)
--- branches/safari-605-branch/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.js 2018-02-12 18:32:32 UTC (rev 228381)
+++ branches/safari-605-branch/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.js 2018-02-12 18:32:34 UTC (rev 228382)
@@ -48,12 +48,19 @@
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 @@
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 @@
super.shown();
this.contentBrowser.addEventListener(WI.ContentBrowser.Event.CurrentRepresentedObjectsDidChange, this._currentRepresentedObjectsDidChange, this);
+ this._currentRepresentedObjectsDidChange();
}
hidden()
@@ -234,6 +255,7 @@
}
this.canvas = null;
+ this.recording = null;
}
_treeOutlineSelectionDidChange(event)
@@ -265,8 +287,10 @@
{
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 @@
_recordingChanged()
{
this._recordingTreeOutline.removeChildren();
+ this.element.classList.toggle("has-recordings", !!this._recording);
if (!this._recording)
return;
@@ -356,10 +381,9 @@
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 @@
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");
}
};
Modified: branches/safari-605-branch/Source/WebInspectorUI/UserInterface/Views/CollectionContentView.js (228381 => 228382)
--- branches/safari-605-branch/Source/WebInspectorUI/UserInterface/Views/CollectionContentView.js 2018-02-12 18:32:32 UTC (rev 228381)
+++ branches/safari-605-branch/Source/WebInspectorUI/UserInterface/Views/CollectionContentView.js 2018-02-12 18:32:34 UTC (rev 228382)
@@ -131,6 +131,10 @@
this.addSubview(contentView);
this.contentViewAdded(contentView);
+ if (!this.visible)
+ return;
+
+ contentView.visible = true;
contentView.shown();
}
@@ -151,7 +155,10 @@
this._contentViewMap.delete(item);
this.contentViewRemoved(contentView);
- contentView.hidden();
+ if (this.visible) {
+ contentView.visible = false;
+ contentView.hidden();
+ }
contentView.removeEventListener(null, null, this);
Modified: branches/safari-605-branch/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css (228381 => 228382)
--- branches/safari-605-branch/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css 2018-02-12 18:32:32 UTC (rev 228381)
+++ branches/safari-605-branch/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css 2018-02-12 18:32:34 UTC (rev 228382)
@@ -242,6 +242,10 @@
height: 14px;
}
+.tree-outline:not(.large):matches(:focus, .force-focus) .item.selected .status .indeterminate-progress-spinner {
+ filter: invert();
+}
+
.tree-outline .item .title::after {
content: "";
}
