Bug 199544 – Layers visualization should show layer contents

• Component: Web Inspector
• Status: NEW

[Simon Fraser (smfr)]

The layers 3D view needs to show images of the layer contents.

[Radar WebKit Bug Importer]

<rdar://problem/52729705>

[Simon Fraser (smfr)]

Created attachment 373615 [details]
Non-working patch

[Simon Fraser (smfr)]

I could not get the material texture stuff to work.

[Simon Fraser (smfr)]

Created attachment 373818 [details]
Kinda working patch

[Simon Fraser (smfr)]

Comment on attachment 373818 [details]
Kinda working patch

This patch actually gets bits onto layers.

[Patrick Angle]

Created attachment 431555 [details]
WIP v0.1 - Rebase smfr patch, adjust texture UVs

[EWS Watchlist]

This patch modifies the inspector protocol. Please ensure that any frontend changes appropriately use feature checks for new protocol features.

[Devin Rousso]

Comment on attachment 431555 [details]
WIP v0.1 - Rebase smfr patch, adjust texture UVs

View in context: https://bugs.webkit.org/attachment.cgi?id=431555&action=review

> Source/JavaScriptCore/inspector/protocol/LayerTree.json:112
> +            "name": "imageForLayerContents",

Rather than having a separate command (which means we'd have a new call-and-response for each layer), I wonder if it'd be better to instead include a `{ "name": "content", "type": "string", "optional": true }` property inside `LayerTree.Layer` and have a `{ "name": "includeContent", "type": "boolean", "optional": true }` parameter for `LayerTree.layersForNode` so that we can instead just have a single command that has all the response in it.

I think there also may be a benefit of having a checkbox in the Layers Tab that controls whether image data is fetched (probably default enabled).  At least in the short term while evaluating the performance of this.

> Source/WebCore/inspector/agents/InspectorLayerTreeAgent.cpp:348
> +    return snapshot->toDataURL("image/png"_s, std::nullopt, PreserveResolution::Yes);

I wonder if we should consider lowering the `quality`.  Maybe only if the performance is really bad.

> Source/WebInspectorUI/UserInterface/Views/Layers3DContentView.js:297
> +        layerGroup.add(this._createLayerMesh(layer.compositedBounds), this._createLayerMesh(layer.compositedBounds, true));

o_0 why?