Skip to content
Permalink
Browse files
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
  • Loading branch information
rkirsling authored and webkit-commit-queue committed Oct 11, 2017
1 parent 36c331f commit 0f71d9d4484c8072ec1d7d3dce0e04d5c420b8b3
Showing 4 changed files with 223 additions and 65 deletions.
@@ -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
@@ -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"
};

0 comments on commit 0f71d9d

Please sign in to comment.