Skip to content

UIIntegration.md

Latest commit

 

History

History
173 lines (144 loc) · 5.51 KB

UIIntegration.md

File metadata and controls

173 lines (144 loc) · 5.51 KB

WebInspector UI Integration

This document describes the current WebInspector UIKit inspector UI. It focuses on view controller ownership and the boundary between UIKit presentation state and the WebInspector runtime/model stack.

The visible UI is native UIKit/TextKit2. DOM and Network views render semantic WebInspector model state; they do not keep copied DOM graphs, copied Network requests, or protocol target registries.

Current View Controller Tree

flowchart TD
    Root["WebInspectorViewController"]
    Compact["CompactTabBarController"]
    Regular["RegularTabContentViewController"]
    DOMTree["DOMTreeViewController"]
    DOMElement["DOMElementViewController"]
    NetworkList["NetworkListViewController"]
    NetworkDetail["NetworkDetailViewController"]

    Root --> Compact
    Root --> Regular
    Compact --> DOMTree
    Compact --> DOMElement
    Compact --> NetworkList
    Compact -. "push on selection" .-> NetworkDetail
    Regular --> DOMTree
    Regular --> DOMElement
    Regular --> NetworkList
    Regular --> NetworkDetail
Loading

For the full UIKit containment map, see ViewControllerStructure.md.

WebInspector UI Wiring

flowchart TD
    PublicSession["WebInspectorSession"]
    Runtime["InspectorSession"]
    DOMSession["DOMSession"]
    NetworkSession["NetworkSession"]
    DOMTree["DOMTreeViewController"]
    DOMElement["DOMElementViewController"]
    NetworkPanel["NetworkPanelModel"]
    NetworkList["NetworkListViewController"]
    NetworkDetail["NetworkDetailViewController"]
    DOMCommands["DOMCommandIntent"]
    NetworkCommands["NetworkCommandIntent"]

    PublicSession --> Runtime
    Runtime --> DOMSession
    Runtime --> NetworkSession
    DOMSession --> DOMTree
    DOMSession --> DOMElement
    NetworkSession --> NetworkPanel
    NetworkPanel --> NetworkList
    NetworkPanel --> NetworkDetail
    DOMTree --> DOMCommands
    DOMElement --> DOMCommands
    NetworkList --> NetworkCommands
    NetworkDetail --> NetworkCommands
    DOMCommands --> Runtime
    NetworkCommands --> Runtime
Loading

The UI receives WebInspectorSession and must not own transport or native bridge objects directly.

DOM Presentation

The DOM UI renders a projection generated from the semantic DOM model, not a second DOM graph.

flowchart TD
    DOMSession["DOMSession<br/>page / frame / document / node / selection"]
    DOMProjection["DOM tree projection<br/>visible rows"]
    DOMTree["DOMTreeViewController<br/>DOMTreeTextView / TextKit2"]
    DetailSnapshot["DOM element detail snapshot"]
    ElementView["DOMElementViewController"]
    Commands["DOM command intents<br/>request children / inspect / highlight"]

    DOMSession --> DOMProjection
    DOMProjection --> DOMTree
    DOMSession --> DetailSnapshot
    DetailSnapshot --> ElementView
    DOMTree --> Commands
    ElementView --> Commands
Loading

Frame documents remain frame-owned and are projected under their owner iframe:

flowchart TD
    Page["DOMPage"]
    MainFrame["DOMFrame<br/>main frame"]
    MainDocument["DOMDocument<br/>main document"]
    RootNode["#document DOMNode"]
    IFrameNode["iframe DOMNode<br/>frame owner"]
    ChildFrame["DOMFrame<br/>child frame"]
    ChildDocument["DOMDocument<br/>current frame document"]

    Page --> MainFrame
    MainFrame --> MainDocument
    MainDocument --> RootNode
    RootNode --> IFrameNode
    Page --> ChildFrame
    ChildFrame --> ChildDocument
    IFrameNode -. "projection only" .-> ChildDocument
Loading

The child frame document is not stored as a regular child of the iframe node. This invariant prevents iframe refresh from corrupting the parent document.

Network Presentation

Network UI observes request lifecycle state through NetworkPanelModel and keeps only view-local state in UIKit controllers.

flowchart TD
    NetworkSession["NetworkSession<br/>request lifecycle source of truth"]
    Panel["NetworkPanelModel<br/>selection / filter / lazy body fetch"]
    RequestOrder["ordered request identifiers"]
    Requests["requests by target-scoped request ID"]
    Redirects["redirect history"]
    List["NetworkListViewController"]
    Detail["NetworkDetailViewController"]
    Commands["Network command intents<br/>body / certificate / websocket detail"]

    NetworkSession --> Panel
    NetworkSession --> RequestOrder
    NetworkSession --> Requests
    Requests --> Redirects
    RequestOrder --> List
    Requests --> Detail
    Panel --> List
    Panel --> Detail
    List --> Commands
    Detail --> Commands
Loading

The primary request identity remains target-scoped request identity. Redirects are request history, not separate top-level requests.

UI-Owned State

The semantic source of truth lives in WebInspectorSession, DOMSession, and NetworkSession. UIKit controllers may keep only local presentation state:

  • selected tab and split layout state
  • scroll position
  • TextKit2 fragment/view cache
  • active find text and transient find UI state
  • list selection presentation
  • expanded/collapsed visual state when it is not semantic DOM state

The UI should not keep copied DOM nodes, copied network requests, or protocol target registries.

Cleanup Checkpoints

  1. Keep WebInspector UI code reading from WebInspectorSession.
  2. Keep DOM controllers reading from DOMSession projections and submitting DOMCommandIntent.
  3. Keep Network controllers reading from NetworkSession through NetworkPanelModel and submitting NetworkCommandIntent.
  4. Move this documentation with the final UI target when the WebInspector target is renamed.