Merge remote-tracking branch 'origin/v0-0-4'

README.md

@@ -58,12 +58,12 @@ Click the extension icon to enable 3D DOM view or right-click it for options.
 
 | Option                | Description                                            |
 |-----------------------|--------------------------------------------------------|
-| Show Sides            | Toggle visibility of element sides                     |
 | Show Surfaces         | Toggle visibility of element surfaces                  |
+| Show Sides            | Toggle visibility of element sides                     |
+| Require Drag          | Only rotate when dragging                              |
+| Require Alt           | Only rotate when Alt key is pressed                    |
 | Randomize Color       | Apply random colors to elements                        |
-| Enable Zoom           | Scale the DOM with scroll wheel                        |
-| Rotate with Alt+Drag  | Rotate view only when dragging and Alt key is pressed  |
-| Choose Selectors      | Set CSS selectors to selectively color elements        |
+| CSS Selectors         | Set CSS selectors to selectively color elements        |
 
 ## Development
 1. Run `yarn install`

manifest.json

@@ -1,8 +1,8 @@
 {
   "manifest_version": 3,
   "name": "dom3d",
-  "version": "0.0.3",
-  "description": "View the DOM in 3D.",
+  "version": "0.0.4",
+  "description": "View and debug a website's DOM in 3D space.",
   "permissions": [
     "activeTab",
     "scripting",

package.json

@@ -2,7 +2,7 @@
   "name": "dom3d",
   "author": "Orion Reed",
   "description": "View your DOM in 3D",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "scripts": {
     "build:firefox": "node build.js firefox",
     "build:chrome": "node build.js chrome",

src/background.js

@@ -2,54 +2,54 @@ import { getBrowser } from "./browserApi.js";
 import { dom3d } from "./dom3d.js";
 
 // browser extension state
-let showSides = false;
 let colorSurfaces = true;
+let showSides = false;
 let colorRandom = false;
-let zoomEnabled = true;
-let requireDragEnabled = false;
-let selectors = [];
+let requireDrag = true;
+let requireAlt = false;
+let CssSelectors = [];
 const browser = getBrowser();
 
 // Create context menu items for user preferences
 const options = [
 	{
-		id: "toggle-show-sides",
-		title: "Show Sides",
+		id: "toggle-color-surfaces",
+		title: "Show Surfaces",
 		type: "checkbox",
-		checked: showSides,
+		checked: colorSurfaces,
 		contexts: ["action"],
 	},
 	{
-		id: "toggle-color-surfaces",
-		title: "Show Surfaces",
+		id: "toggle-show-sides",
+		title: "Show Sides",
 		type: "checkbox",
-		checked: colorSurfaces,
+		checked: showSides,
 		contexts: ["action"],
 	},
 	{
-		id: "toggle-color-random",
-		title: "Randomize Color",
+		id: "toggle-require-drag",
+		title: "Require Drag",
 		type: "checkbox",
-		checked: colorRandom,
+		checked: requireDrag,
 		contexts: ["action"],
 	},
 	{
-		id: "toggle-zoom",
-		title: "Enable Zoom",
+		id: "toggle-require-alt",
+		title: "Require Alt Key",
 		type: "checkbox",
-		checked: zoomEnabled,
+		checked: requireAlt,
 		contexts: ["action"],
 	},
 	{
-		id: "toggle-require-drag",
-		title: "Rotate with Alt+Drag",
+		id: "toggle-color-random",
+		title: "Randomize Color",
 		type: "checkbox",
-		checked: requireDragEnabled,
+		checked: colorRandom,
 		contexts: ["action"],
 	},
 	{
 		id: "selectors",
-		title: "Choose Selectors",
+		title: "CSS Selectors",
 		type: "normal",
 		contexts: ["action"],
 	},
@@ -70,11 +70,11 @@ browser.contextMenus.onClicked.addListener((info, tab) => {
 		"toggle-color-random": () => {
 			colorRandom = !colorRandom;
 		},
-		"toggle-zoom": () => {
-			zoomEnabled = !zoomEnabled;
-		},
 		"toggle-require-drag": () => {
-			requireDragEnabled = !requireDragEnabled;
+			requireDrag = !requireDrag;
+		},
+		"toggle-require-alt": () => {
+			requireAlt = !requireAlt;
 		},
 		selectors: () => {
 			// Inject a script to open a prompt for the user
@@ -115,7 +115,7 @@ browser.contextMenus.onClicked.addListener((info, tab) => {
 						}
 					}
 				},
-				args: [selectors],
+				args: [CssSelectors],
 			});
 		},
 	};
@@ -138,9 +138,9 @@ browser.action.onClicked.addListener(async (tab) => {
 				showSides,
 				colorSurfaces,
 				colorRandom,
-				zoomEnabled,
-				requireDragEnabled,
-				selectors,
+				requireDrag,
+				requireAlt,
+				CssSelectors,
 			],
 		});
 	} catch (err) {
@@ -150,6 +150,6 @@ browser.action.onClicked.addListener(async (tab) => {
 
 browser.runtime.onMessage.addListener((message, _, __) => {
 	if (message.updatedSelectors) {
-		selectors = message.updatedSelectors;
+		CssSelectors = message.updatedSelectors;
 	}
 });

src/dom3d.js

@@ -3,8 +3,8 @@ export function dom3d(
 	SHOW_SIDES,
 	COLOR_SURFACE,
 	COLOR_RANDOM,
-	ZOOM_ENABLED,
 	REQUIRE_DRAG,
+	REQUIRE_ALT,
 	SELECTORS,
 ) {
 	const body = document.body;
@@ -197,7 +197,7 @@ export function dom3d(
 	// EVENT LISTENERS ——————————————————————————————————————————
 
 	function handlePointerDown(event) {
-		if (!REQUIRE_DRAG || !event.altKey) return;
+		if (REQUIRE_ALT && !event.altKey) return;
 		state.isDragging = true;
 		state.startX = event.clientX;
 		state.startY = event.clientY;
@@ -207,7 +207,6 @@ export function dom3d(
 	}
 
 	function handleWheel(event) {
-		if (!ZOOM_ENABLED) return;
 		event.preventDefault();
 		state.zoomLevel = Math.max(
 			0.1,
@@ -218,8 +217,9 @@ export function dom3d(
 
 	function handlePointerMove(event) {
 		if (REQUIRE_DRAG && !state.isDragging) return;
+		if (REQUIRE_ALT && !event.altKey) return;
 
-		if (REQUIRE_DRAG && state.isDragging) {
+		if (REQUIRE_DRAG) {
 			// Drag-based rotation/orbiting
 			const deltaX = event.clientX - state.startX;
 			const deltaY = event.clientY - state.startY;
@@ -229,7 +229,6 @@ export function dom3d(
 			state.rotationY =
 				state.startRotationY - (MAX_ROTATION * deltaY) / window.innerHeight;
 		} else {
-			// Mouse-position-based rotation/orbiting
 			state.rotationY =
 				MAX_ROTATION * (1 - event.clientY / window.innerHeight) -
 				MAX_ROTATION / 2;