Add suggestions for view trees to inspect

Author: ole

LayoutInspector/ContentView.swift

@@ -6,18 +6,61 @@ struct ContentView: View {
     @State private var selectedView: String? = nil
     @State private var generation: Int = 0
 
+    // MARK: - Edit here
+
+    /// The view tree whose layout you want to inspect. Add `.debugLayout()` calls at
+    /// each point where you want to inspect the layout algorithm, i.e. what sizes are
+    /// being proposed and returned. We call these **inspection points**.
+    ///
+    /// ## Suggested examples
+    ///
+    /// ### Padding
+    ///
+    ///     var subject: some View {
+    ///         Text("Hello world")
+    ///             .debugLayout("Text")
+    ///             .padding(10)
+    ///             .debugLayout("padding")
+    ///             .border(Color.green)
+    ///             .debugLayout("border")
+    ///     }
+    ///
+    /// ### Stacks
+    ///
+    ///     var subject: some View {
+    ///         HStack(spacing: 10) {
+    ///             Rectangle().fill(.green)
+    ///                 .debugLayout("green")
+    ///             Text("Hello world")
+    ///                 .debugLayout("Text")
+    ///             Rectangle().fill(.yellow)
+    ///                 .debugLayout("yellow")
+    ///         }
+    ///         .debugLayout("HStack")
+    ///     }
+    ///
+    /// ### fixedSize
+    ///
+    ///     var subject: some View {
+    ///         Text("Lorem ipsum dolor sit amet")
+    ///             .debugLayout("Text")
+    ///             .fixedSize()
+    ///             .debugLayout("fixedSize")
+    ///             .frame(width: 100)
+    ///             .debugLayout("frame")
+    ///             .border(Color.green)
+    ///     }
     var subject: some View {
         Text("Hello world")
             .debugLayout("Text")
-            .padding()
+            .padding(10)
             .debugLayout("padding")
-            .background {
-                Color.yellow
-                    .debugLayout("yellow")
-            }
-            .debugLayout("background")
+            .border(Color.green)
+            .debugLayout("border")
     }
 
+    // MARK: Edit end
+
     var body: some View {
         VStack {
             VStack {

README.md

@@ -16,16 +16,16 @@ iOS 16.0 or macOS 13.0 (requires the `Layout` protocol).
 1.  Edit the `subject: some View` property in `ContentView`. It should contain
     the view tree you want to inspect.
 
-2.  Add `.debugLayout()` to each view in the view tree whose layout algorithm
-    you want to inspect. 
+2.  Add `.debugLayout()` at each point in the view tree where you want to inspect
+    the layout algorithm (what sizes are being proposed and returned). 
 
-    Example of a `subject` property with a few `debugLayout` inspection points:
+    Example of a `subject` property with a few inspection points:
 
     ```swift
     var subject: some View {
         Text("Hello world")
             .debugLayout("Text")
-            .padding()
+            .padding(10)
             .debugLayout("padding")
             .background {
                 Color.yellow
@@ -41,6 +41,7 @@ iOS 16.0 or macOS 13.0 (requires the `Layout` protocol).
     - The table on the bottom displays the sizes that are being proposed at each
       inspection point in the subject view ("Proposal", and the resulting view 
       sizes ("Response").
+    - You can tap/click items in the grid to highlight the respective view.
     - You can use the sliders to modify the size proposed to the subject view.
     - Some views cache certain layout information. Press "Reset layout cache"
       after modifying the sliders to reset the caches.