Changeset 224303 in webkit
- Timestamp:
- Nov 1, 2017 3:47:14 PM (6 years ago)
- Location:
- trunk/Source/WebInspectorUI
- Files:
-
- 4 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebInspectorUI/ChangeLog
r224293 r224303 1 2017-11-01 Ross Kirsling <ross.kirsling@sony.com> 2 3 Web Inspector: Improve UX of Layers tab visualization 4 https://bugs.webkit.org/show_bug.cgi?id=178966 5 6 Reviewed by Devin Rousso. 7 8 * UserInterface/Views/Layers3DContentView.js: 9 (WI.Layers3DContentView): 10 (WI.Layers3DContentView.prototype.initialLayout): 11 (WI.Layers3DContentView.prototype._canvasMouseDown): 12 (WI.Layers3DContentView.prototype._createLayerGroup): Renamed from _addLayerGroup. 13 (WI.Layers3DContentView.prototype._updateLayerGroupPosition): Merged into _updateLayers. 14 Set up zoom and pan. 15 16 (WI.Layers3DContentView.prototype._animate): 17 (WI.Layers3DContentView.prototype._restrictPan): 18 Restrict pan to bounding box on XY plane. 19 20 (WI.Layers3DContentView.prototype.layout): 21 (WI.Layers3DContentView.prototype._updateDocument): 22 (WI.Layers3DContentView.prototype._resetCamera): 23 On new document, throw out all old layers and center the camera on the new document layer. 24 25 (WI.Layers3DContentView.prototype.selectLayerById): 26 (WI.Layers3DContentView.prototype._centerOnSelection): 27 Recenter the camera when layer group selection is updated programmatically. 28 29 (WI.Layers3DContentView.prototype._updateLayers): 30 (WI.Layers3DContentView.prototype._createLayerMesh): 31 Fix visual artifact due to "depthWrite" flag. 32 33 * UserInterface/Views/LayerDetailsSidebarPanel.js: 34 (WI.LayerDetailsSidebarPanel.prototype.selectNodeByLayerId): 35 Suppress selection update event when the data grid selection is updated programmatically. 36 37 * UserInterface/Views/DataGridNode.js: 38 (WI.DataGridNode.prototype.revealAndSelect): 39 Allow forwarding of select()'s parameter. 40 1 41 2017-11-01 Joseph Pecoraro <pecoraro@apple.com> 2 42 -
trunk/Source/WebInspectorUI/UserInterface/Views/DataGridNode.js
r223308 r224303 570 570 } 571 571 572 revealAndSelect( )572 revealAndSelect(suppressSelectedEvent) 573 573 { 574 574 this.reveal(); 575 this.select( );575 this.select(suppressSelectedEvent); 576 576 } 577 577 -
trunk/Source/WebInspectorUI/UserInterface/Views/LayerDetailsSidebarPanel.js
r223209 r224303 68 68 return; 69 69 70 const suppressEvent = true; 70 71 if (node) 71 node.revealAndSelect( );72 node.revealAndSelect(suppressEvent); 72 73 else if (this._dataGrid.selectedNode) 73 this._dataGrid.selectedNode.deselect( );74 this._dataGrid.selectedNode.deselect(suppressEvent); 74 75 } 75 76 -
trunk/Source/WebInspectorUI/UserInterface/Views/Layers3DContentView.js
r223428 r224303 43 43 this._controls = null; 44 44 this._scene = null; 45 this._boundingBox = null; 45 46 this._raycaster = null; 46 47 this._mouse = null; 47 48 this._animationFrameRequestId = null; 49 this._documentNode = null; 48 50 } 49 51 … … 87 89 let layerGroup = this._layerGroupsById.get(layerId); 88 90 this._updateLayerGroupSelection(layerGroup); 91 this._centerOnSelection(); 89 92 } 90 93 … … 100 103 101 104 this._camera = new THREE.PerspectiveCamera(45, this.element.offsetWidth / this.element.offsetHeight, 1, 100000); 102 this._camera.position.set(0, 0, 4000);103 this._camera.lookAt(new THREE.Vector3(0, 0, 0));104 105 105 106 this._controls = new THREE.OrbitControls(this._camera, this._renderer.domElement); 106 107 this._controls.enableDamping = true; 107 this._controls.enableZoom = false; 108 this._controls.enablePan = false; 108 this._controls.enableKeys = false; 109 this._controls.zoomSpeed = 0.5; 110 this._controls.minDistance = 1000; 111 this._controls.rotateSpeed = 0.5; 109 112 this._controls.minAzimuthAngle = -Math.PI / 2; 110 113 this._controls.maxAzimuthAngle = Math.PI / 2; 114 this._renderer.domElement.addEventListener("contextmenu", (event) => { event.stopPropagation(); }); 111 115 112 116 this._scene = new THREE.Scene; 113 this._ scene.position.set(-this.element.offsetWidth / 2, this.element.offsetHeight / 2, 0);117 this._boundingBox = new THREE.Box3; 114 118 115 119 this._raycaster = new THREE.Raycaster; … … 128 132 129 133 WI.domTreeManager.requestDocument((node) => { 134 let documentWasUpdated = this._updateDocument(node); 135 130 136 WI.layerTreeManager.layersForNode(node, (layers) => { 131 137 this._updateLayers(layers); 132 this.dispatchEventToListeners(WI.ContentView.Event.SelectionPathComponentsDidChange); 138 if (documentWasUpdated) 139 this._resetCamera(); 133 140 }); 134 141 }); … … 161 168 { 162 169 this._controls.update(); 170 this._restrictPan(); 163 171 this._renderer.render(this._scene, this._camera); 164 172 this._animationFrameRequestId = requestAnimationFrame(() => { this._animate(); }); … … 171 179 } 172 180 181 _updateDocument(documentNode) 182 { 183 if (documentNode === this._documentNode) 184 return false; 185 186 this._scene.children.length = 0; 187 this._layerGroupsById.clear(); 188 this._layers.length = 0; 189 190 this._documentNode = documentNode; 191 192 return true; 193 } 194 173 195 _updateLayers(newLayers) 174 196 { 175 197 // FIXME: This should be made into the basic usage of the manager, if not the agent itself. 176 198 // At that point, we can remove this duplication from the visualization and sidebar. 177 let {removals, additions , preserved} = WI.layerTreeManager.layerTreeMutations(this._layers, newLayers);199 let {removals, additions} = WI.layerTreeManager.layerTreeMutations(this._layers, newLayers); 178 200 179 201 for (let layer of removals) { … … 183 205 } 184 206 185 if (this._selectedLayerGroup && !this._layerGroupsById.get(this._selectedLayerGroup.userData.layer Id))207 if (this._selectedLayerGroup && !this._layerGroupsById.get(this._selectedLayerGroup.userData.layer.layerId)) 186 208 this.selectedLayerGroup = null; 187 209 188 additions.forEach(this._addLayerGroup, this); 189 preserved.forEach(this._updateLayerGroupPosition, this); 210 for (let layer of additions) { 211 let layerGroup = this._createLayerGroup(layer); 212 this._layerGroupsById.set(layer.layerId, layerGroup); 213 this._scene.add(layerGroup); 214 } 215 216 // FIXME: Update the backend to provide a literal "layer tree" so we can decide z-indices less naively. 217 const zInterval = 25; 218 newLayers.forEach((layer, index) => { 219 let layerGroup = this._layerGroupsById.get(layer.layerId); 220 layerGroup.position.set(layer.bounds.x, -layer.bounds.y, index * zInterval); 221 }); 222 223 this._boundingBox.setFromObject(this._scene); 224 this._controls.maxDistance = this._boundingBox.max.z + WI.Layers3DContentView._zPadding; 190 225 191 226 this._layers = newLayers; 192 }193 194 _addLayerGroup(layer, index) 195 {227 this.dispatchEventToListeners(WI.ContentView.Event.SelectionPathComponentsDidChange); 228 } 229 230 _createLayerGroup(layer) { 196 231 let layerGroup = new THREE.Group; 197 layerGroup.userData.layerId = layer.layerId; 198 layerGroup.add(this._createLayerMesh(layer.bounds)); 199 layerGroup.add(this._createLayerMesh(layer.compositedBounds, true)); 200 201 this._layerGroupsById.set(layer.layerId, layerGroup); 202 this._updateLayerGroupPosition(layer, index); 203 204 this._scene.add(layerGroup); 205 } 206 207 _updateLayerGroupPosition(layer, index) { 208 let layerGroup = this._layerGroupsById.get(layer.layerId); 209 console.assert(layerGroup); 210 211 const zInterval = 25; 212 layerGroup.position.set(layer.bounds.x, -layer.bounds.y, index * zInterval); 232 layerGroup.userData.layer = layer; 233 layerGroup.add(this._createLayerMesh(layer.bounds), this._createLayerMesh(layer.compositedBounds, true)); 234 return layerGroup; 213 235 } 214 236 … … 216 238 { 217 239 let geometry = new THREE.Geometry; 218 geometry.vertices.push(new THREE.Vector3(0, 0, 0)); 219 geometry.vertices.push(new THREE.Vector3(width, 0, 0)); 220 geometry.vertices.push(new THREE.Vector3(width, -height, 0)); 221 geometry.vertices.push(new THREE.Vector3(0, -height, 0)); 240 geometry.vertices.push( 241 new THREE.Vector3(0, 0, 0), 242 new THREE.Vector3(0, -height, 0), 243 new THREE.Vector3(width, -height, 0), 244 new THREE.Vector3(width, 0, 0), 245 ); 222 246 223 247 if (isOutline) { … … 226 250 } 227 251 228 geometry.faces.push(new THREE.Face3(0, 1, 3)); 229 geometry.faces.push(new THREE.Face3(1, 2, 3)); 252 geometry.faces.push(new THREE.Face3(0, 1, 3), new THREE.Face3(1, 2, 3)); 230 253 231 254 let material = new THREE.MeshBasicMaterial({ … … 234 257 opacity: 0.4, 235 258 side: THREE.DoubleSide, 259 depthWrite: false, 236 260 }); 237 261 … … 257 281 this._updateLayerGroupSelection(selection); 258 282 259 let layerId = selection ? selection.userData.layer Id : null;283 let layerId = selection ? selection.userData.layer.layerId : null; 260 284 this.dispatchEventToListeners(WI.Layers3DContentView.Event.SelectedLayerChanged, {layerId}); 261 285 } … … 277 301 setColor(WI.Layers3DContentView._selectedLayerColor); 278 302 } 303 304 _centerOnSelection() 305 { 306 if (!this._selectedLayerGroup) 307 return; 308 309 let {x, y, width, height} = this._selectedLayerGroup.userData.layer.bounds; 310 this._controls.target.set(x + (width / 2), -y - (height / 2), 0); 311 this._camera.position.set(x + (width / 2), -y - (height / 2), this._selectedLayerGroup.position.z + WI.Layers3DContentView._zPadding / 2); 312 } 313 314 _resetCamera() 315 { 316 let {x, y, width, height} = this._layers[0].bounds; 317 this._controls.target.set(x + (width / 2), -y - (height / 2), 0); 318 this._camera.position.set(x + (width / 2), -y - (height / 2), this._controls.maxDistance - WI.Layers3DContentView._zPadding / 2); 319 } 320 321 _restrictPan() 322 { 323 let delta = this._boundingBox.clampPoint(this._controls.target).setZ(0).sub(this._controls.target); 324 this._controls.target.add(delta); 325 this._camera.position.add(delta); 326 } 279 327 }; 328 329 WI.Layers3DContentView._zPadding = 3000; 280 330 281 331 WI.Layers3DContentView._layerColor = {
Note: See TracChangeset
for help on using the changeset viewer.