From 8fcad035fac053a473b3c42d7e7884cfea8f3bd9 Mon Sep 17 00:00:00 2001
From: TristanEDU <tristanedu@protonmail.com>
Date: Mon, 2 Jun 2025 17:27:51 -0700
Subject: [PATCH] feat(overlayUnlock): add Unlock Overlay toggle button for
 iframe interaction

- Introduced a new control panel button to toggle iframe pointer events
- Allows user to unlock overlay for manual interaction with live site content
- Temporarily disables interaction with the underlying dev site while unlocked
- Useful for tasks like opening dropdowns or inspecting cross-origin overlays
- Toggle seamlessly restores locked state with single click
---
 content.js | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/content.js b/content.js
index 6ce7bc2..c8bcddb 100644
--- a/content.js
+++ b/content.js
@@ -92,6 +92,20 @@ if (!document.getElementById("overlay-iframe")) {
   };
   scrollLabel.appendChild(scrollCheckbox);
 
+  // Overlay Unlock
+  const unlockButton = document.createElement("button");
+  unlockButton.textContent = "🔓 Unlock Overlay";
+  unlockButton.style.marginTop = "8px";
+  unlockButton.style.padding = "6px";
+  unlockButton.style.cursor = "pointer";
+  unlockButton.style.background = "#444";
+  unlockButton.style.color = "white";
+  unlockButton.style.border = "1px solid #666";
+  unlockButton.style.borderRadius = "4px";
+  unlockButton.style.width = "100%";
+  unlockButton.id = "unlock-overlay-button";
+  panel.appendChild(unlockButton);
+
   // Assemble controls
   controls.appendChild(scrollLabel);
   controls.appendChild(document.createElement("br"));
@@ -133,3 +147,26 @@ if (!document.getElementById("overlay-iframe")) {
     isDragging = false;
   });
 }
+
+let overlayUnlocked = false;
+
+unlockButton.addEventListener("click", () => {
+  const iframe = document.getElementById("overlay-iframe");
+  if (!iframe) return;
+
+  overlayUnlocked = !overlayUnlocked;
+
+  if (overlayUnlocked) {
+    // Unlock: enable interaction with overlay, disable site below
+    iframe.style.pointerEvents = "auto";
+    document.body.style.pointerEvents = "none";
+    document.documentElement.style.pointerEvents = "none";
+    unlockButton.textContent = "🔒 Lock Overlay";
+  } else {
+    // Lock again: disable interaction with overlay, re-enable site
+    iframe.style.pointerEvents = "none";
+    document.body.style.pointerEvents = "auto";
+    document.documentElement.style.pointerEvents = "auto";
+    unlockButton.textContent = "🔓 Unlock Overlay";
+  }
+});