feat: hold modifier key alt/option to measure distance b/w layers

Author: sm17p

.changeset/wet-times-report.md

@@ -0,0 +1,5 @@
+---
+"amgiflol": patch
+---
+
+feat: hold modifier key alt/option to measure distance b/w layers

src/app.d.ts

@@ -38,32 +38,43 @@ declare global {
 			attributes: Record<string, string>;
 		}
 
+		interface TrackerTargetMetaData {
+			bounds: DOMRect;
+			domElement: HTMLElement;
+			properties: ElementInfo;
+			overlayStyles: string;
+			distanceLines: Line[];
+		}
+
 		interface TrackerState {
-			boundingRect?: DOMRect;
-			element?: HTMLElement;
-			parentElement?: HTMLElement;
-			elementInfo?: ElementInfo;
+			hoveredAltTarget?: TrackerTargetMetaData;
+			target?: TrackerTargetMetaData;
+			parentOfTarget?: TrackerTargetMetaData;
 			id: string;
 			isLocked: boolean;
 			isVisible: boolean;
-			parentRect?: DOMRect;
-			elementStyles?: string;
-			parentStyles?: string;
 			lines?: Lines[];
 		}
 
-		interface MouseState {
-			isPressed: boolean;
+		interface KeyboardState {
 			modifiers: {
 				alt: boolean;
 				ctrl: boolean;
+				meta: boolean;
+				primary: boolean;
+				secondary: boolean;
 				shift: boolean;
 			};
+		}
+
+		interface MouseState {
+			isPressed: boolean;
 			x: number;
 			y: number;
 		}
 
 		interface MetaDataStore {
+			keyboard: KeyboardState;
 			mouse: MouseState;
 			scroll: {
 				scrollX: number;
@@ -145,13 +156,17 @@ declare global {
 			| "KEYDOWN"
 			| "*";
 
-		type MessageRecipients = "popup" | "content" | "background" | "all";
+		type MessageRecipients = Partial<{
+			background: boolean;
+			content: boolean;
+			popup: boolean;
+		}>;
 
 		interface Message<T = any> {
 			type: MessageType;
 			payload: T;
 			timestamp: number;
-			source: Omit<MessageRecipients, "all">;
+			source: MessageRecipients;
 			target?: MessageRecipients;
 		}
 

src/entrypoints/background.ts

@@ -17,6 +17,12 @@ export default defineBackground(() => {
 	browser.runtime.onMessage.addListener(async (event, sender) => {
 		if (event.type === "SCREENSHOT" && sender.tab) {
 			captureHandler(sender.tab);
+		} else if (event.type === "EXTENSION_TOGGLE") {
+			const { domain, isActive } = event.payload;
+			browser.storage?.local.set({
+				[domain]: isActive,
+			});
+			setIcon(isActive);
 		}
 	});
 
@@ -30,11 +36,11 @@ export default defineBackground(() => {
 
 	browser.runtime.onStartup.addListener(async () => {
 		console.log("Extension started");
-		await updateIconForActiveTab();
+		updateIconForActiveTab();
 	});
 
 	// Update icon when switching tabs
-	browser.tabs.onActivated.addListener(async () => {
+	browser.tabs.onActivated.addListener(async (_activeInfo) => {
 		updateIconForActiveTab();
 	});
 
@@ -45,7 +51,7 @@ export default defineBackground(() => {
 		}
 	});
 
-	// Listen for storage changes to update icon
+	// // Listen for storage changes to update icon
 	browser.storage.onChanged.addListener(async (changes, areaName) => {
 		if (areaName === "local") {
 			updateIconForActiveTab();
@@ -56,14 +62,19 @@ export default defineBackground(() => {
 /**
  * Get the current active tab's domain
  */
-async function getCurrentDomain(): Promise<string | null> {
+async function getCurrentDomain(tabId?: number): Promise<string | null> {
 	try {
-		const [tab] = await browser.tabs.query({
-			active: true,
-			currentWindow: true,
-		});
+		let tab: globalThis.Browser.tabs.Tab;
+		if (tabId) {
+			tab = await browser.tabs.get(tabId);
+		} else {
+			[tab] = await browser.tabs.query({
+				active: true,
+				currentWindow: true,
+			});
+		}
 
-		if (!tab.url) return null;
+		if (!tab?.url) return null;
 
 		const url = new URL(tab.url);
 		return url.host;
@@ -86,29 +97,31 @@ async function isDomainActive(domain: string): Promise<boolean> {
 	}
 }
 
+async function setIcon(isActive: boolean) {
+	await (browser.action ?? browser.browserAction).setIcon({
+		path: isActive ? IconOn : IconOff,
+	});
+}
+
 /**
  * Update extension icon based on current active tab's domain state
  */
-async function updateIconForActiveTab() {
+async function updateIconForActiveTab(tabId?: number) {
 	try {
-		const domain = await getCurrentDomain();
+		const domain = await getCurrentDomain(tabId);
 
 		if (!domain) {
 			// No valid domain, show disabled state
-			await (browser.action ?? browser.browserAction).setIcon({
-				path: IconOff,
-			});
+			setIcon(false);
 			console.log("No valid domain, icon set to disabled");
 			return;
 		}
 
 		const isActive = await isDomainActive(domain);
 
-		await (browser.action ?? browser.browserAction).setIcon({
-			path: isActive ? IconOn : IconOff,
-		});
+		setIcon(isActive);
 
-		console.log(
+		console.trace(
 			`Icon updated for domain "${domain}": ${
 				isActive ? "active" : "inactive"
 			}`,

src/lib/Main.svelte

@@ -7,6 +7,8 @@
 	} from "@/lib/store/index.svelte";
 	import { Tooltip } from "bits-ui";
 	import SelectorManager from "./components/SelectorManager.svelte";
+	// TODO: Enable Toaster when toast functionality is complete
+	// import Toaster from "./components/Toaster.svelte";
 	import DebugToolbar from "./modules/DebugToolbar/index.svelte";
 	import EventsManager from "./modules/EventsManager/index.svelte";
 	import SidePanel from "./modules/SidePanel/index.svelte";
@@ -42,6 +44,7 @@
 				showMessages={true}
 			/>
 			<SidePanel />
+			<!-- <Toaster /> -->
 			<Toolbar />
 		{/if}
 	</Tooltip.Provider>