Web Inspector: Make 3D objects selectable in Layers visualization

https://bugs.webkit.org/show_bug.cgi?id=178136

Patch by Ross Kirsling <ross.kirsling@sony.com> on 2017-10-11
Reviewed by Devin Rousso.

* UserInterface/Views/Layers3DContentView.js:
(WI.Layers3DContentView):
(WI.Layers3DContentView.prototype.initialLayout):
(WI.Layers3DContentView.prototype._canvasMouseDown):
(WI.Layers3DContentView.prototype._updateLayerGroupSelection):
Implement selection of 3D layer objects.

(WI.Layers3DContentView.prototype._addLayerGroup): Renamed from _addLayer.
(WI.Layers3DContentView.prototype._updateLayerGroupPosition):
(WI.Layers3DContentView.prototype._createLayerMesh):
Refactor -- one group per layer (visible plane and composited outline), not groups by shape.

(WI.Layers3DContentView.prototype.layout):
(WI.Layers3DContentView.prototype._updateLayers):
(WI.Layers3DContentView.prototype._clearLayers): Deleted.
Don't destroy all 3D objects on every LayerTreeDidChange; make use of layerTreeMutations.
(Not only a performance improvement, but also necessary to properly preserve highlighting.)

(WI.Layers3DContentView.prototype.selectLayerById):
Allow selection to be updated from the outside.

* UserInterface/Views/LayerDetailsSidebarPanel.js:
(WI.LayerDetailsSidebarPanel.prototype.selectNodeByLayerId):
(WI.LayerDetailsSidebarPanel.prototype._buildDataGrid):
(WI.LayerDetailsSidebarPanel.prototype._dataGridSelectedNodeChanged):
Allow selection to be updated from the outside.

(WI.LayerDetailsSidebarPanel.prototype.inspect):
(WI.LayerDetailsSidebarPanel.prototype._updateLayers): Renamed from _updateDisplayWithLayers.
(WI.LayerDetailsSidebarPanel.prototype._updateDataGrid):
(WI.LayerDetailsSidebarPanel.prototype._updateBottomBar):
(WI.LayerDetailsSidebarPanel.prototype._contentForPopover):
(WI.LayerDetailsSidebarPanel.prototype._dataGridNodeForLayer): Deleted.
Cleanup.

* UserInterface/Views/LayersTabContentView.js:
(WI.LayersTabContentView):
(WI.LayersTabContentView.prototype._detailsSidebarSelectedLayerChanged):
(WI.LayersTabContentView.prototype._contentViewSelectedLayerChanged):
Orchestrate communication of selection state between visualization and sidebar.

Canonical link: https://commits.webkit.org/194438@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@223209 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog

@@ -1,3 +1,51 @@
+2017-10-11  Ross Kirsling  <ross.kirsling@sony.com>
+
+        Web Inspector: Make 3D objects selectable in Layers visualization
+        https://bugs.webkit.org/show_bug.cgi?id=178136
+
+        Reviewed by Devin Rousso.
+
+        * UserInterface/Views/Layers3DContentView.js:
+        (WI.Layers3DContentView):
+        (WI.Layers3DContentView.prototype.initialLayout):
+        (WI.Layers3DContentView.prototype._canvasMouseDown):
+        (WI.Layers3DContentView.prototype._updateLayerGroupSelection):
+        Implement selection of 3D layer objects.
+
+        (WI.Layers3DContentView.prototype._addLayerGroup): Renamed from _addLayer.
+        (WI.Layers3DContentView.prototype._updateLayerGroupPosition):
+        (WI.Layers3DContentView.prototype._createLayerMesh):
+        Refactor -- one group per layer (visible plane and composited outline), not groups by shape.
+
+        (WI.Layers3DContentView.prototype.layout):
+        (WI.Layers3DContentView.prototype._updateLayers):
+        (WI.Layers3DContentView.prototype._clearLayers): Deleted.
+        Don't destroy all 3D objects on every LayerTreeDidChange; make use of layerTreeMutations.
+        (Not only a performance improvement, but also necessary to properly preserve highlighting.) 
+
+        (WI.Layers3DContentView.prototype.selectLayerById):
+        Allow selection to be updated from the outside.
+
+        * UserInterface/Views/LayerDetailsSidebarPanel.js:
+        (WI.LayerDetailsSidebarPanel.prototype.selectNodeByLayerId):
+        (WI.LayerDetailsSidebarPanel.prototype._buildDataGrid):
+        (WI.LayerDetailsSidebarPanel.prototype._dataGridSelectedNodeChanged):
+        Allow selection to be updated from the outside.
+
+        (WI.LayerDetailsSidebarPanel.prototype.inspect):
+        (WI.LayerDetailsSidebarPanel.prototype._updateLayers): Renamed from _updateDisplayWithLayers.
+        (WI.LayerDetailsSidebarPanel.prototype._updateDataGrid):
+        (WI.LayerDetailsSidebarPanel.prototype._updateBottomBar):
+        (WI.LayerDetailsSidebarPanel.prototype._contentForPopover):
+        (WI.LayerDetailsSidebarPanel.prototype._dataGridNodeForLayer): Deleted.
+        Cleanup.
+
+        * UserInterface/Views/LayersTabContentView.js:
+        (WI.LayersTabContentView):
+        (WI.LayersTabContentView.prototype._detailsSidebarSelectedLayerChanged):
+        (WI.LayersTabContentView.prototype._contentViewSelectedLayerChanged):
+        Orchestrate communication of selection state between visualization and sidebar.
+
 2017-10-11  Joseph Pecoraro  <pecoraro@apple.com>
 
         Web Inspector: Avoid "100.00ms" vs "100.0ms" jitter in TimelineRuler labels

Source/WebInspectorUI/UserInterface/Views/LayerDetailsSidebarPanel.js

@@ -51,7 +51,7 @@ WI.LayerDetailsSidebarPanel = class LayerDetailsSidebarPanel extends WI.DetailsS
             objects = [objects];
 
         let layers = objects.filter((object) => object instanceof WI.Layer);
-        this._updateDisplayWithLayers(layers);
+        this._updateLayers(layers);
 
         return !!layers.length;
     }
@@ -61,6 +61,18 @@ WI.LayerDetailsSidebarPanel = class LayerDetailsSidebarPanel extends WI.DetailsS
         this._popover = null;
     }
 
+    selectNodeByLayerId(layerId)
+    {
+        let node = this._dataGridNodesByLayerId.get(layerId);
+        if (node === this._dataGrid.selectedNode)
+            return;
+
+        if (node)
+            node.revealAndSelect();
+        else if (this._dataGrid.selectedNode)
+            this._dataGrid.selectedNode.deselect();
+    }
+
     // Private
 
     _buildDataGrid()
@@ -92,8 +104,13 @@ WI.LayerDetailsSidebarPanel = class LayerDetailsSidebarPanel extends WI.DetailsS
         this._dataGrid.sortOrder = WI.DataGrid.SortOrder.Descending;
         this._dataGrid.createSettings("layer-details-sidebar-panel");
 
-        this._dataGrid.element.addEventListener("mousemove", this._dataGridMouseMove.bind(this), false);
-        this._dataGrid.element.addEventListener("mouseleave", this._dataGridMouseLeave.bind(this), false);
+        this._dataGrid.element.addEventListener("mousemove", this._dataGridMouseMove.bind(this));
+        this._dataGrid.element.addEventListener("mouseleave", this._dataGridMouseLeave.bind(this));
+
+        // FIXME: We can't use virtualized rows until DataGrid is able to scroll them programmatically.
+        //        See TreeElement#reveal -> TreeOutline#updateVirtualizedElements for an analogy.
+        this._dataGrid.inline = true;
+        this._dataGrid.element.classList.remove("inline");
 
         this.contentView.addSubview(this._dataGrid);
     }
@@ -125,6 +142,9 @@ WI.LayerDetailsSidebarPanel = class LayerDetailsSidebarPanel extends WI.DetailsS
 
     _dataGridSelectedNodeChanged()
     {
+        let layerId = this._dataGrid.selectedNode ? this._dataGrid.selectedNode.layer.layerId : null;
+        this.dispatchEventToListeners(WI.LayerDetailsSidebarPanel.Event.SelectedLayerChanged, {layerId});
+
         this._showPopoverForSelectedNode();
     }
 
@@ -159,63 +179,52 @@ WI.LayerDetailsSidebarPanel = class LayerDetailsSidebarPanel extends WI.DetailsS
         this._hoveredDataGridNode = null;
     }
 
-    _updateDisplayWithLayers(newLayers)
+    _updateLayers(newLayers)
     {
-        let previousLayers = this._layers;
-        this._layers = newLayers;
+        if (this._popover)
+            this._popover.dismiss();
+
+        this._updateDataGrid(newLayers);
+        this._updateBottomBar(newLayers);
 
-        this._updateDataGrid(previousLayers);
-        this._updateBottomBar();
+        this._layers = newLayers;
     }
 
-    _updateDataGrid(previousLayers)
+    _updateDataGrid(newLayers)
     {
         if (!this._dataGrid)
             this._buildDataGrid();
 
-        let mutations = WI.layerTreeManager.layerTreeMutations(previousLayers, this._layers);
+        let {removals, additions, preserved} = WI.layerTreeManager.layerTreeMutations(this._layers, newLayers);
 
-        mutations.removals.forEach((layer) => {
+        removals.forEach((layer) => {
             let node = this._dataGridNodesByLayerId.get(layer.layerId);
-            if (!node)
-                return;
-
             this._dataGrid.removeChild(node);
             this._dataGridNodesByLayerId.delete(layer.layerId);
         });
 
-        mutations.additions.forEach((layer) => {
-            let node = this._dataGridNodeForLayer(layer);
+        additions.forEach((layer) => {
+            let node = new WI.LayerTreeDataGridNode(layer);
+            this._dataGridNodesByLayerId.set(layer.layerId, node);
             this._dataGrid.appendChild(node);
         });
 
-        mutations.preserved.forEach((layer) => {
+        preserved.forEach((layer) => {
             let node = this._dataGridNodesByLayerId.get(layer.layerId);
-            if (!node)
-                return;
-
             node.layer = layer;
         });
 
         this._sortDataGrid();
     }
 
-    _dataGridNodeForLayer(layer)
-    {
-        let node = new WI.LayerTreeDataGridNode(layer);
-        this._dataGridNodesByLayerId.set(layer.layerId, node);
-
-        return node;
-    }
-
-    _updateBottomBar()
+    _updateBottomBar(newLayers)
     {
         if (!this._bottomBar)
             this._buildBottomBar();
 
-        this._layersCountLabel.textContent = WI.UIString("Layer Count: %d").format(this._layers.length);
+        this._layersCountLabel.textContent = WI.UIString("Layer Count: %d").format(newLayers.length);
 
-        let totalMemory = this._layers.reduce((total, layer) => total + (layer.memory || 0), 0);
+        let totalMemory = newLayers.reduce((total, layer) => total + (layer.memory || 0), 0);
         this._layersMemoryLabel.textContent = WI.UIString("Memory: %s").format(Number.bytesToString(totalMemory));
     }
 
@@ -273,12 +282,8 @@ WI.LayerDetailsSidebarPanel = class LayerDetailsSidebarPanel extends WI.DetailsS
         let list = content.appendChild(document.createElement("ul"));
 
         WI.layerTreeManager.reasonsForCompositingLayer(layer, (compositingReasons) => {
-            if (isEmptyObject(compositingReasons)) {
-                callback(content);
-                return;
-            }
-
-            this._populateListOfCompositingReasons(list, compositingReasons);
+            if (!isEmptyObject(compositingReasons))
+                this._populateListOfCompositingReasons(list, compositingReasons);
 
             callback(content);
         });
@@ -349,3 +354,7 @@ WI.LayerDetailsSidebarPanel = class LayerDetailsSidebarPanel extends WI.DetailsS
             addReason(WI.UIString("Element has “blend-mode” style"));
     }
 };
+
+WI.LayerDetailsSidebarPanel.Event = {
+    SelectedLayerChanged: "selected-layer-changed"
+};