Changeset 224303 in webkit


Ignore:
Timestamp:
Nov 1, 2017 3:47:14 PM (6 years ago)
Author:
Ross Kirsling
Message:

Web Inspector: Improve UX of Layers tab visualization
​https://bugs.webkit.org/show_bug.cgi?id=178966

Reviewed by Devin Rousso.

  • UserInterface/Views/Layers3DContentView.js:

(WI.Layers3DContentView):
(WI.Layers3DContentView.prototype.initialLayout):
(WI.Layers3DContentView.prototype._canvasMouseDown):
(WI.Layers3DContentView.prototype._createLayerGroup): Renamed from _addLayerGroup.
(WI.Layers3DContentView.prototype._updateLayerGroupPosition): Merged into _updateLayers.
Set up zoom and pan.

(WI.Layers3DContentView.prototype._animate):
(WI.Layers3DContentView.prototype._restrictPan):
Restrict pan to bounding box on XY plane.

(WI.Layers3DContentView.prototype.layout):
(WI.Layers3DContentView.prototype._updateDocument):
(WI.Layers3DContentView.prototype._resetCamera):
On new document, throw out all old layers and center the camera on the new document layer.

(WI.Layers3DContentView.prototype.selectLayerById):
(WI.Layers3DContentView.prototype._centerOnSelection):
Recenter the camera when layer group selection is updated programmatically.

(WI.Layers3DContentView.prototype._updateLayers):
(WI.Layers3DContentView.prototype._createLayerMesh):
Fix visual artifact due to "depthWrite" flag.

  • UserInterface/Views/LayerDetailsSidebarPanel.js:

(WI.LayerDetailsSidebarPanel.prototype.selectNodeByLayerId):
Suppress selection update event when the data grid selection is updated programmatically.

  • UserInterface/Views/DataGridNode.js:

(WI.DataGridNode.prototype.revealAndSelect):
Allow forwarding of select()'s parameter.

Location:
trunk/Source/WebInspectorUI
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r224293 r224303  
     12017-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
    1412017-11-01  Joseph Pecoraro  <pecoraro@apple.com>
    242

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

    r223308 r224303  
    570570    }
    571571
    572     revealAndSelect()
     572    revealAndSelect(suppressSelectedEvent)
    573573    {
    574574        this.reveal();
    575         this.select();
     575        this.select(suppressSelectedEvent);
    576576    }
    577577

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

    r223209 r224303  
    6868            return;
    6969
     70        const suppressEvent = true;
    7071        if (node)
    71             node.revealAndSelect();
     72            node.revealAndSelect(suppressEvent);
    7273        else if (this._dataGrid.selectedNode)
    73             this._dataGrid.selectedNode.deselect();
     74            this._dataGrid.selectedNode.deselect(suppressEvent);
    7475    }
    7576

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

    r223428 r224303  
    4343        this._controls = null;
    4444        this._scene = null;
     45        this._boundingBox = null;
    4546        this._raycaster = null;
    4647        this._mouse = null;
    4748        this._animationFrameRequestId = null;
     49        this._documentNode = null;
    4850    }
    4951
    … …  
    8789        let layerGroup = this._layerGroupsById.get(layerId);
    8890        this._updateLayerGroupSelection(layerGroup);
     91        this._centerOnSelection();
    8992    }
    9093
    … …  
    100103
    101104        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));
    104105
    105106        this._controls = new THREE.OrbitControls(this._camera, this._renderer.domElement);
    106107        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;
    109112        this._controls.minAzimuthAngle = -Math.PI / 2;
    110113        this._controls.maxAzimuthAngle = Math.PI / 2;
     114        this._renderer.domElement.addEventListener("contextmenu", (event) => { event.stopPropagation(); });
    111115
    112116        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;
    114118
    115119        this._raycaster = new THREE.Raycaster;
    … …  
    128132
    129133        WI.domTreeManager.requestDocument((node) => {
     134            let documentWasUpdated = this._updateDocument(node);
     135
    130136            WI.layerTreeManager.layersForNode(node, (layers) => {
    131137                this._updateLayers(layers);
    132                 this.dispatchEventToListeners(WI.ContentView.Event.SelectionPathComponentsDidChange);
     138                if (documentWasUpdated)
     139                    this._resetCamera();
    133140            });
    134141        });
    … …  
    161168    {
    162169        this._controls.update();
     170        this._restrictPan();
    163171        this._renderer.render(this._scene, this._camera);
    164172        this._animationFrameRequestId = requestAnimationFrame(() => { this._animate(); });
    … …  
    171179    }
    172180
     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
    173195    _updateLayers(newLayers)
    174196    {
    175197        // FIXME: This should be made into the basic usage of the manager, if not the agent itself.
    176198        //        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);
    178200
    179201        for (let layer of removals) {
    … …  
    183205        }
    184206
    185         if (this._selectedLayerGroup && !this._layerGroupsById.get(this._selectedLayerGroup.userData.layerId))
     207        if (this._selectedLayerGroup && !this._layerGroupsById.get(this._selectedLayerGroup.userData.layer.layerId))
    186208            this.selectedLayerGroup = null;
    187209
    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;
    190225
    191226        this._layers = newLayers;
    192     }
    193 
    194     _addLayerGroup(layer, index)
    195     {
     227        this.dispatchEventToListeners(WI.ContentView.Event.SelectionPathComponentsDidChange);
     228    }
     229
     230    _createLayerGroup(layer) {
    196231        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;
    213235    }
    214236
    … …  
    216238    {
    217239        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        );
    222246
    223247        if (isOutline) {
    … …  
    226250        }
    227251
    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));
    230253
    231254        let material = new THREE.MeshBasicMaterial({
    … …  
    234257            opacity: 0.4,
    235258            side: THREE.DoubleSide,
     259            depthWrite: false,
    236260        });
    237261
    … …  
    257281        this._updateLayerGroupSelection(selection);
    258282
    259         let layerId = selection ? selection.userData.layerId : null;
     283        let layerId = selection ? selection.userData.layer.layerId : null;
    260284        this.dispatchEventToListeners(WI.Layers3DContentView.Event.SelectedLayerChanged, {layerId});
    261285    }
    … …  
    277301            setColor(WI.Layers3DContentView._selectedLayerColor);
    278302    }
     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    }
    279327};
     328
     329WI.Layers3DContentView._zPadding = 3000;
    280330
    281331WI.Layers3DContentView._layerColor = {
Note: See TracChangeset for help on using the changeset viewer.