[Webkit-unassigned] [Bug 272474] New: Web Inspector: Attaching to constraints-based Mac WKWebView doesn't work

[bugzilla-daemon at webkit.org]

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

            Bug ID: 272474
           Summary: Web Inspector: Attaching to constraints-based Mac
                    WKWebView doesn't work
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: All
                OS: All
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Web Inspector
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: jalkut at red-sweater.com
                CC: inspector-bugzilla-changes at group.apple.com

Created attachment 470851

  --> https://bugs.webkit.org/attachment.cgi?id=470851&action=review

Example project for reproducing the bug

Opening the in-app web inspector inside the same window as a web view, which is achieved in apps like Safari by control-clicking on a web view and selecting "Inspect Element", doesn't work correctly when the inspected view is a WKWebView whose layout is managed with constraints/autolayout. This shortcoming makes it more difficult than it should be= to debug web content behavior in native Mac apps.

The root of the problem is in the behavior of the `platformAttach` method in mac/WebInspectorUIProxy.mm. The process of adding the inspector view to the same parent view as the inspected view, and resizing the inspected view to share the common space, relies upon springs and struts (autosizing mask) to achieve the desired layout, and if the inspected view does not expect to be laid out in such a way, its existing constraints-based layout will override or interfere with the attempts of the inspector to orchestrate things.

I'm attaching an example project which demonstrates the problem by displaying two windows: one with a WKWebView laid out using autosizing mask, and the other laid out using constraints.

To reproduce using the example project:

1. Open the example project.
2. Build and run the app.
3. Right/control-click in the window content of the window labeled as using constraints.
4. Select "Inspect Element"
5. If the inspector appears detached, make the window large enough to accommodate attaching, and click one of the attachment icons at the upper-left corner of the inspector window.

Expected: the inspector UI and the inspected web view should be laid out to share the window, and interaction should be permitted with each view.

Actual: the inspector UI appears blank, perhaps because it's obscured by the native view continuing to try to take up the whole window. In general things are a mess. Making matters worse it's difficult to get out of this state because the usual inspector button to detach is not visible. A workaround is to make the window so small before selecting "Inspect Element" that the inspector is forced to open in a detached window.

One solution, which I will shortly submit a patch for, would be to install an intermediate view that will contain both the inspected view and the inspector, and allow the inspected view to be laid out using an autosizing mask. The intermediate view would take the place of the inspected view in the app's view hierarchy, and so all pertinent constraints between the inspected view and other views in the window would need to be replaced with constraints that control the layout in terms of the intermediate view instead.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20240410/8cf8c524/attachment.htm>