diff --git a/README.md b/README.md index 8c4cf25..f1cb27b 100644 --- a/README.md +++ b/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` diff --git a/manifest.json b/manifest.json index ea1c8b6..7d3599a 100644 --- a/manifest.json +++ b/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", diff --git a/package.json b/package.json index 0c9d65f..ffe3c86 100644 --- a/package.json +++ b/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", diff --git a/src/background.js b/src/background.js index 01f1e33..df07400 100644 --- a/src/background.js +++ b/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; } }); diff --git a/src/dom3d.js b/src/dom3d.js index 15ce387..4fd7a51 100644 --- a/src/dom3d.js +++ b/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;