fix: use global frame on wireframe views

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## Next
 
+- fix: mangled wireframe layouts ([#250](https://github.com/PostHog/posthog-ios/pull/250))
+
 ## 3.15.2 - 2024-11-13
 
 - fix: allow changing person properties after identify ([#249](https://github.com/PostHog/posthog-ios/pull/249))

PostHog/Replay/PostHogReplayIntegration.swift

@@ -146,14 +146,19 @@
             style.paddingLeft = Int(insets.left)
         }
 
-        private func createBasicWireframe(_ window: UIView) -> RRWireframe {
+        private func createBasicWireframe(_ view: UIView) -> RRWireframe {
             let wireframe = RRWireframe()
 
-            wireframe.id = window.hash
-            wireframe.posX = Int(window.frame.origin.x)
-            wireframe.posY = Int(window.frame.origin.y)
-            wireframe.width = Int(window.frame.size.width)
-            wireframe.height = Int(window.frame.size.height)
+            // since FE will render each node of the wireframe with position: fixed
+            // we need to convert bounds to global screen coordinates
+            // otherwise each view of depth > 1 will likely have an origin of 0,0 (which is the local origin)
+            let frame = view.toAbsoluteRect(view.window)
+
+            wireframe.id = view.hash
+            wireframe.posX = Int(frame.origin.x)
+            wireframe.posY = Int(frame.origin.y)
+            wireframe.width = Int(frame.size.width)
+            wireframe.height = Int(frame.size.height)
 
             return wireframe
         }
@@ -374,18 +379,19 @@
             return (config.sessionReplayConfig.maskAllImages && !isAsset) || view.isNoCapture()
         }
 
-        private func toWireframe(_ view: UIView) -> RRWireframe? {
+        private func toWireframe(_ view: UIView, isParentSensitive: Bool = false) -> RRWireframe? {
             if !view.isVisible() {
                 return nil
             }
 
             let wireframe = createBasicWireframe(view)
-
             let style = RRStyle()
+            var isSensitive = false
 
             if let textView = view as? UITextView {
+                isSensitive = isTextViewSensitive(textView)
                 wireframe.type = "text"
-                wireframe.text = isTextViewSensitive(textView) ? textView.text.mask() : textView.text
+                wireframe.text = isSensitive || isParentSensitive ? textView.text.mask() : textView.text
                 wireframe.disabled = !textView.isEditable
                 style.color = textView.textColor?.toRGBString()
                 style.fontFamily = textView.font?.familyName
@@ -397,14 +403,14 @@
             }
 
             if let textField = view as? UITextField {
+                isSensitive = isTextFieldSensitive(textField)
                 wireframe.type = "input"
                 wireframe.inputType = "text_area"
-                let isSensitive = isTextFieldSensitive(textField)
                 if let text = textField.text {
-                    wireframe.value = isSensitive ? text.mask() : text
+                    wireframe.value = isSensitive || isParentSensitive ? text.mask() : text
                 } else {
                     if let text = textField.placeholder {
-                        wireframe.value = isSensitive ? text.mask() : text
+                        wireframe.value = isSensitive || isParentSensitive ? text.mask() : text
                     }
                 }
                 wireframe.disabled = !textField.isEnabled
@@ -423,39 +429,40 @@
             }
 
             if let theSwitch = view as? UISwitch {
+                isSensitive = isSwitchSensitive(theSwitch)
                 wireframe.type = "input"
                 wireframe.inputType = "toggle"
                 wireframe.checked = theSwitch.isOn
                 if #available(iOS 14.0, *) {
                     if let text = theSwitch.title {
-                        wireframe.label = isSwitchSensitive(theSwitch) ? text.mask() : text
+                        wireframe.label = isSensitive || isParentSensitive ? text.mask() : text
                     }
                 }
             }
 
             if let imageView = view as? UIImageView {
+                isSensitive = isImageViewSensitive(imageView)
                 wireframe.type = "image"
                 if let image = imageView.image {
-                    if !isImageViewSensitive(imageView) {
+                    if !isSensitive, !isParentSensitive {
                         wireframe.image = image
                     }
                 }
             }
 
             if let button = view as? UIButton {
+                isSensitive = isButtonSensitive(button)
                 wireframe.type = "input"
                 wireframe.inputType = "button"
                 wireframe.disabled = !button.isEnabled
-
-                if let text = button.titleLabel?.text {
-                    wireframe.value = isButtonSensitive(button) ? text.mask() : text
-                }
+                // we don't need a wireframe.value here. Text will be captured by child UILabel
             }
 
             if let label = view as? UILabel {
+                isSensitive = isLabelSensitive(label)
                 wireframe.type = "text"
                 if let text = label.text {
-                    wireframe.text = isLabelSensitive(label) ? text.mask() : text
+                    wireframe.text = isSensitive || isParentSensitive ? text.mask() : text
                 }
                 wireframe.disabled = !label.isEnabled
                 style.color = label.textColor?.toRGBString()
@@ -499,7 +506,7 @@
             if !view.subviews.isEmpty {
                 var childWireframes: [RRWireframe] = []
                 for subview in view.subviews {
-                    if let child = toWireframe(subview) {
+                    if let child = toWireframe(subview, isParentSensitive: isSensitive) {
                         childWireframes.append(child)
                     }
                 }

PostHog/Replay/UIView+Util.swift

@@ -59,7 +59,7 @@
         }
 
         // you need this because of SwiftUI otherwise the coordinates always zeroed for some reason
-        func toAbsoluteRect(_ window: UIWindow) -> CGRect {
+        func toAbsoluteRect(_ window: UIWindow?) -> CGRect {
             convert(bounds, to: window)
         }
     }

PostHog/Utils/UIApplication+.swift

@@ -26,6 +26,7 @@
                 } else {
                     // check scene.windows.isKeyWindow
                     for window in scene.windows {
+                        // swiftlint:disable:next for_where
                         if window.isKeyWindow {
                             return window
                         }