release: v0.2.0

Author: sm17p

.changeset/tidy-deer-retire.md

@@ -1,5 +1,15 @@
 # amgiflol
 
+## 0.2.0
+
+### Minor Changes
+
+- c8314a9: Adds new voting feature
+
+### Patch Changes
+
+- dcc0bd6: Add analytics module
+
 ## 0.1.1
 
 ### Patch Changes

.changeset/tired-snails-retire.md

@@ -1,66 +1,97 @@
-# Amgiflol - A layout inspector web extension to match your pixels with Figma
+# Amgiflol - Figma-like Layout Inspector For Web
 
-## Overview
+A browser extension that helps with design audit. Match web layouts with Figma designs through real-time element inspection, measurements, and visual overlays.
 
-This extension is built with a modular architecture using wxt, Svelte 5, TypeScript, and Tailwind CSS
+## Target Audience
 
-## Features
+Any individual or web development teams including front-end developers, UI/UX designers, QA engineers, and product managers.
 
-1. Locate
-2. Screenshot
+## Usage Note
 
-## Environment Configuration
+I'm building this tool to act as an active visual debugger which is intended to be used at the end of a feature development cycle, since this is what I struggle with most of the time.
 
-- Node Version >= 24
-- PNPM 10.12.3
+1. This tool won't automatically point out alignment or style mismatch with your designs. 
+2. Use during development or design audit cycle to get things right as early as possible.
+3. You may find some shortcuts not implemented or upto the industry standard.
+4. **This tool doesn't require you to login into any of your fav prototyping tool.**
+ 
 
-## Building Source Code
+## Current Features
+- **Distance Measurements**: Meeasurements between element and it's parent
+- **Dynamic Rulers**: Mouse-following coordinate system
+- **Element Inspection**: Real-time hover detection with element information
+- **Keyboard Shortcuts**: Quick access to all features
+- **Lock/Unlock**: Persistent element tracking
+- **Screenshots**: Capture current page state with overlays
+- **Side Panel**: Detailed element properties, computed styles, attributes
+- **Toolbar**: Floating interface with auto-positioning
+- **Visual Overlays**: Highlight elements and parent relationships
+
+
+## Roadmap
+
+### 🔄 Current Development
+- **Feature Voting System**: User-driven feature prioritization
+- **Enhanced Measurements**: Area calculations, angle measurements
+- **Multiple Trackers**: Track multiple elements simultaneously
+
+### 🚀 Planned Features
+- **Auto-Hide/Move**: Smart UI positioning to avoid interference
+- **Neighbor Analysis**: Automatic sibling/parent distance detection
+- **Viewport Tools**: Responsive design testing utilities
+- **Parent/Sibling Traversal**: Navigate element hierarchy
+
+
+## Quick Setup
+
+**Requirements**: Node.js ≥24, PNPM 10.12.3
 
 ```bash
-pnpm i
-pnpm build:firefox
-pnpm zip:firefox
+pnpm install
+pnpm dev:firefox      # Development mode for Firefox
+---- or ----
+pnpm build:firefox    # Build for Firefox
+pnpm zip:firefox      # Create distribution package for firefox
 ```
 
-## Directory structure
 
+
+
+## Development
+
+### State Management
+- **Reactive Stores**: Svelte 5 runes for optimal performance
+- **Cross-Context Communication**: Typed message bus system
+- **Storage Sync**: Browser storage integration with per-domain settings
+
+### Component Architecture
+```
+src/lib/
+├── components/      # UI components (Tracker, Ruler, Measurements)
+├── modules/         # Features (Toolbar, SidePanel, EventsManager)
+├── core/            # Business logic (ElementInspector, MessageBus)
+└── store/           # State management (UI, Trackers, Metadata)
+```
+
+### Internal | Developer Tools
+- **Debug Interface**: Performance metrics, message history (dev mode only)
+
+### File Structure
 ```
-amgiflol/
-├── src/
-│   ├── entrypoints/              # Extension entry points
-│   │   ├── background.ts         # Background script for cross-tab communication
-│   │   ├── content.ts            # Content script injection point
-│   │   └── popup/               # Extension popup interface
-│   │       ├── index.html       # Popup HTML template
-│   │       └── main.ts          # Popup Svelte app entry
-│   ├── lib/
-│   │   ├── Main.svelte          # Content script root component
-│   │   ├── components/          # Reusable UI components
-│   │   │   ├── Measurements.svelte    # SVG measurement system
-│   │   │   ├── Ruler.svelte          # Dynamic ruler overlay
-│   │   │   ├── SelectorManager.svelte # Element selection management
-│   │   │   ├── Switch.svelte         # Custom switch component
-│   │   │   ├── Tooltip.svelte        # Tooltip wrapper
-│   │   │   └── Tracker.svelte        # Element tracking overlay
-│   │   ├── core/                # Core business logic
-│   │   │   ├── ElementInspector.ts   # DOM analysis utilities
-│   │   │   └── MessageBus.ts         # Cross-context messaging
-│   │   ├── modules/             # Feature modules
-│   │   │   ├── DebugToolbar/         # Development debugging interface
-│   │   │   ├── EventsManager/        # Global event handling
-│   │   │   ├── ExtensionSettings/    # Popup settings interface
-│   │   │   ├── SidePanel/           # Element details panel
-│   │   │   ├── SvgManager/          # SVG overlay management
-│   │   │   └── Toolbar/             # Main toolbar interface
-│   │   └── store/               # State management
-│   │       ├── MetaDataStore.svelte.ts   # Mouse and window state
-│   │       ├── TrackersStore.svelte.ts   # Element tracking state
-│   │       ├── TrackerState.svelte.ts    # Individual tracker state
-│   │       ├── UIStore.svelte.ts         # UI state management
-│   │       └── index.svelte.ts           # Store exports
-│   ├── assets/                  # Static assets
-│   │   └── svelte.svg          # Svelte logo
-│   ├── utils/                   # Utility functions
-│   │   └── data-urls.ts        # Data URL manipulation
-│   └── app.d.ts                # Global type definitions
+src/
+├── entrypoints/           # Extension entry points
+│   ├── background.ts      # Background script
+│   ├── content.ts         # Content script injection
+│   └── popup/             # Extension popup
+├── lib/
+│   ├── Main.svelte        # Content script root
+│   ├── components/        # Reusable UI components
+│   ├── modules/           # Feature modules
+│   ├── core/              # Core utilities
+│   └── store/             # State management
+└── utils/                 # Helper functions
 ```
+
+---
+
+**License**: MIT | **Build**: Vite + WXT + Svelte + TypeScript

CHANGELOG.md

@@ -2,7 +2,7 @@
 	"name": "amgiflol",
 	"description": "Figma-like Web Inspector for designers",
 	"private": true,
-	"version": "0.1.1",
+	"version": "0.2.0",
 	"type": "module",
 	"scripts": {
 		"build": "wxt build --mv3",

README.md

@@ -3,7 +3,7 @@ import { googleAnalytics4 } from "@wxt-dev/analytics/providers/google-analytics-
 
 export default defineAppConfig({
 	analytics: {
-		debug: true,
+		debug: import.meta.env.DEV,
 		providers: [
 			googleAnalytics4({
 				apiSecret: import.meta.env.WXT_GA_API_SECRET,

package.json

@@ -1,5 +1,4 @@
 export default defineBackground(() => {
-	console.log("Hello background!", { id: browser.runtime.id });
 	browser.runtime.onMessage.addListener(async (event, sender) => {
 		if (event.type === "SCREENSHOT" && sender.tab) {
 			captureHandler(sender.tab);

src/app.config.ts

@@ -29,11 +29,16 @@ export class ElementInspector {
 		};
 	}
 
-	public findParentElement(element: HTMLElement): HTMLElement | null {
+	public moveUp(element?: HTMLElement | null): HTMLElement | undefined {
 		let current = element;
-		let parent = element.parentElement;
+		let parent = element?.parentElement;
 		let safetyCounter = 20;
 
+		while (this.areSameSize(current, parent) && safetyCounter > 0) {
+			parent = parent?.parentElement;
+			safetyCounter--;
+		}
+
 		while (parent && safetyCounter > 0) {
 			if (!this.areSameSize(current, parent)) {
 				return parent;
@@ -43,7 +48,7 @@ export class ElementInspector {
 			safetyCounter--;
 		}
 
-		return parent;
+		return parent ? parent : undefined;
 	}
 
 	public isExtensionElement(element: HTMLElement): boolean {
@@ -226,19 +231,20 @@ export class ElementInspector {
 		return `${top} ${right} ${bottom} ${left}`;
 	}
 
-	private areSameSize(element: Element, parent: Element): boolean {
-		const elementRect = element.getBoundingClientRect();
-		const parentRect = parent.getBoundingClientRect();
+	public areSameSize(element?: HTMLElement | null, parent?: HTMLElement | null): boolean {
+		if (element == null || parent == null) {
+			return false;
+		}
 
-		const widthDiff = Math.abs(elementRect.width - parentRect.width);
-		const heightDiff = Math.abs(elementRect.height - parentRect.height);
+		const widthDiff = Math.abs(element.offsetWidth - parent.offsetWidth);
+		const heightDiff = Math.abs(element.offsetHeight - parent.offsetHeight);
 
-		return widthDiff < 2 && heightDiff < 2;
+		return widthDiff < 2 && heightDiff < 2 || parent.style.display === "contents";
 	}
 
 	private greatestCommonDivisor(a: number, b: number): number {
 		return b === 0 ? a : this.greatestCommonDivisor(b, a % b);
 	}
 }
 
-export const elementInspector = ElementInspector.getInstance();
+export const elementInspector: ElementInspector = ElementInspector.getInstance();

src/entrypoints/background.ts

@@ -25,7 +25,7 @@
 
 	async function mount() {
 		try {
-			analytics.page(import.meta.env.ENTRYPOINT);
+			analytics.page(location.href);
 
 			const [tab] = await browser.tabs.query({
 				active: true,

src/lib/core/ElementInspector.ts

@@ -45,7 +45,7 @@
 							<DropdownMenu.GroupHeading>
 								<h4 class="m-0 ml-1 grid grid-cols-[0px_1fr]">
 									<span></span>
-									<span class="flex justify-between gap-3">
+									<span class="min-w-[250px] flex justify-between items-center gap-3 font-inherit">
 										<Switch
 											bind:checked={uiStore
 												.toolbar
@@ -67,7 +67,7 @@
 								>
 									<span></span>
 									<span
-										class="flex justify-between items-center gap-3"
+										class="min-w-[250px] flex justify-between items-center gap-3"
 									>
 										<UpvoteAction
 											key="auto-hide-toolbar"
@@ -81,7 +81,7 @@
 								>
 									<span></span>
 									<span
-										class="flex justify-between items-center gap-3"
+										class="min-w-[250px] flex justify-between items-center gap-3"
 									>
 										<UpvoteAction
 											key="auto-move-toolbar"
@@ -95,7 +95,7 @@
 								>
 									<span></span>
 									<span
-										class="flex justify-between items-center gap-3"
+										class="min-w-[250px] flex justify-between items-center gap-3"
 									>
 										<UpvoteAction
 											key="auto-move-sidepanel"
@@ -109,7 +109,7 @@
 								>
 									<span></span>
 									<span
-										class="flex justify-between items-center gap-3"
+										class="min-w-[250px] flex justify-between items-center gap-3"
 									>
 										<UpvoteAction
 											key="multiple-trackers"
@@ -123,7 +123,7 @@
 								>
 									<span></span>
 									<span
-										class="flex justify-between items-center gap-3"
+										class="min-w-[250px] flex justify-between items-center gap-3"
 									>
 										<UpvoteAction
 											key="neighbour-distances"
@@ -137,7 +137,7 @@
 								>
 									<span></span>
 									<span
-										class="flex justify-between items-center gap-3"
+										class="min-w-[250px] flex justify-between items-center gap-3"
 									>
 										<UpvoteAction
 											key="onscreeen-measurement-lines"
@@ -151,7 +151,7 @@
 								>
 									<span></span>
 									<span
-										class="flex justify-between items-center gap-3"
+										class="min-w-[250px] flex justify-between items-center gap-3"
 									>
 										<UpvoteAction
 											key="parent-traversal"
@@ -165,7 +165,7 @@
 								>
 									<span></span>
 									<span
-										class="flex justify-between items-center gap-3"
+										class="min-w-[250px] flex justify-between items-center gap-3"
 									>
 										<UpvoteAction
 											key="sibling-traversal"
@@ -179,7 +179,7 @@
 								>
 									<span></span>
 									<span
-										class="flex justify-between items-center gap-3"
+										class="min-w-[250px] flex justify-between items-center gap-3"
 									>
 										<UpvoteAction
 											key="viewport-resizer"
@@ -214,7 +214,7 @@
 							{ checked },
 						)}
 									<span></span>
-									<span class="flex justify-between gap-3">
+									<span class="min-w-[250px] flex justify-between items-center gap-3">
 										<Switch
 											checked={checked}
 											disabled
@@ -233,7 +233,7 @@
 							{ checked },
 						)}
 									<span></span>
-									<span class="flex justify-between gap-3">
+									<span class="min-w-[250px] flex justify-between items-center gap-3">
 										<Switch
 											checked={checked}
 											disabled