Changeset 228362 in webkit
- Timestamp:
- Feb 9, 2018 10:15:46 PM (6 years ago)
- Location:
- trunk/Source/WebInspectorUI
- Files:
-
- 5 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebInspectorUI/ChangeLog
r228336 r228362 1 2018-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 1 51 2018-02-09 Matt Baker <mattbaker@apple.com> 2 52 -
trunk/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css
r228301 r228362 41 41 } 42 42 43 .sidebar > .panel.navigation.canvas > .content > . navigation-bar {43 .sidebar > .panel.navigation.canvas > .content > .recording-content > .navigation-bar { 44 44 border-top: 1px solid var(--border-color); 45 45 } … … 51 51 52 52 .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 { 54 54 display: none; 55 }56 57 .sidebar > .panel.navigation.canvas > .content > .tree-outline .item.recording > .icon {58 content: url(../Images/Recording.svg);59 55 } 60 56 … … 63 59 } 64 60 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 { 66 66 content: url(../Images/RenderingFrame.svg); 67 67 } 68 68 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 { 70 70 line-height: 16px; 71 71 } -
trunk/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.js
r228301 r228362 49 49 this._canvasTreeOutline.element.classList.add("canvas"); 50 50 51 let recordingContent = this.contentView.element.appendChild(document.createElement("div")); 52 recordingContent.className = "recording-content"; 53 51 54 this._recordingNavigationBar = new WI.NavigationBar; 52 this.contentView.addSubview(this._recordingNavigationBar); 55 this._recordingNavigationBar.element.classList.add("hidden"); 56 recordingContent.appendChild(this._recordingNavigationBar.element); 53 57 54 58 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); 56 63 57 64 this._canvasTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._treeOutlineSelectionDidChange, this); … … 105 112 return; 106 113 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 107 127 let treeElement = this._recordingTreeOutline.findTreeElement(action); 108 128 console.assert(treeElement, "Missing tree element for recording action.", action); … … 122 142 123 143 this.contentBrowser.addEventListener(WI.ContentBrowser.Event.CurrentRepresentedObjectsDidChange, this._currentRepresentedObjectsDidChange, this); 144 this._currentRepresentedObjectsDidChange(); 124 145 } 125 146 … … 235 256 236 257 this.canvas = null; 258 this.recording = null; 237 259 } 238 260 … … 266 288 this._canvasTreeOutline.removeChildren(); 267 289 268 if (!this._canvas) 269 return; 290 if (!this._canvas) { 291 this._recordingNavigationBar.element.classList.add("hidden"); 292 return; 293 } 270 294 271 295 const showRecordings = false; … … 291 315 { 292 316 this._recordingTreeOutline.removeChildren(); 317 this.element.classList.toggle("has-recordings", !!this._recording); 293 318 294 319 if (!this._recording) … … 357 382 } 358 383 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; 363 387 364 388 let scopeBarItems = []; … … 378 402 this._scopeBar.addEventListener(WI.ScopeBar.Event.SelectionChanged, this._scopeBarSelectionChanged, this); 379 403 this._recordingNavigationBar.insertNavigationItem(this._scopeBar, 0); 380 381 this.element.classList.add("has-recordings");382 404 } 383 405 }; -
trunk/Source/WebInspectorUI/UserInterface/Views/CollectionContentView.js
r228301 r228362 132 132 this.contentViewAdded(contentView); 133 133 134 if (!this.visible) 135 return; 136 137 contentView.visible = true; 134 138 contentView.shown(); 135 139 } … … 152 156 this.contentViewRemoved(contentView); 153 157 154 contentView.hidden(); 158 if (this.visible) { 159 contentView.visible = false; 160 contentView.hidden(); 161 } 155 162 156 163 contentView.removeEventListener(null, null, this); -
trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css
r225259 r228362 243 243 } 244 244 245 .tree-outline:not(.large):matches(:focus, .force-focus) .item.selected .status .indeterminate-progress-spinner { 246 filter: invert(); 247 } 248 245 249 .tree-outline .item .title::after { 246 250 content: "";
Note: See TracChangeset
for help on using the changeset viewer.