diff --git a/.changeset/long-adults-shout.md b/.changeset/long-adults-shout.md new file mode 100644 index 00000000..59dd02ca --- /dev/null +++ b/.changeset/long-adults-shout.md @@ -0,0 +1,5 @@ +--- +"@solid-devtools/extension": patch +--- + +Change panel icon style to outline diff --git a/packages/extension/background/background.ts b/packages/extension/background/background.ts index a9fba383..93c271be 100644 --- a/packages/extension/background/background.ts +++ b/packages/extension/background/background.ts @@ -8,7 +8,7 @@ It has to coordinate the communication between the different scripts based on th import {error, log} from '@solid-devtools/shared/utils' import * as bridge from '../shared/bridge.ts' -import {icons} from '../shared/icons.ts' +import * as icons from '../shared/icons.ts' log('Background script working.') @@ -201,7 +201,7 @@ chrome.runtime.onConnect.addListener(async port => { data.setVersions(v) // Change the popup icon to indicate that Solid is present on the page - chrome.action.setIcon({tabId: tab_id, path: icons.normal}) + chrome.action.setIcon({tabId: tab_id, path: icons.blue}) }) // "DetectSolid" from content-script (realWorld) diff --git a/packages/extension/devtools/devtools.ts b/packages/extension/devtools/devtools.ts index e40bb624..c71ad5dc 100644 --- a/packages/extension/devtools/devtools.ts +++ b/packages/extension/devtools/devtools.ts @@ -9,7 +9,7 @@ It connects to the background script. import {error, log} from '@solid-devtools/shared/utils' import {ConnectionName, createPortMessanger, once} from '../shared/bridge.ts' -import {icons} from '../shared/icons.ts' +import * as icons from '../shared/icons.ts' log('Devtools_Script loaded.') @@ -28,7 +28,7 @@ once(fromBackground, 'Versions', () => { chrome.devtools.panels.create( 'Solid', - PATH_PREFIX + icons.disabled[32], + PATH_PREFIX + icons.OUTLINE_32, PATH_PREFIX + 'index.html', () => { if (chrome.runtime.lastError) { diff --git a/packages/extension/package.json b/packages/extension/package.json index ee6475bc..c4a8c17d 100644 --- a/packages/extension/package.json +++ b/packages/extension/package.json @@ -12,7 +12,7 @@ "build": "node --experimental-transform-types ./build.ts --browser=firefox --browser=chrome", "test:unit": "echo \"No unit tests\"", "test:types": "tsc --noEmit --paths null", - "firefox-run": "web-ext run -s dist/firefox -p dev" + "firefox-run": "pnpx web-ext run -s dist/firefox -p dev" }, "devDependencies": { "@crxjs/vite-plugin": "2.0.0-beta.28", diff --git a/packages/extension/public/solid-white-32.png b/packages/extension/public/solid-white-32.png new file mode 100644 index 00000000..dce67800 Binary files /dev/null and b/packages/extension/public/solid-white-32.png differ diff --git a/packages/extension/shared/icons.ts b/packages/extension/shared/icons.ts index da037ad9..082a8d2c 100644 --- a/packages/extension/shared/icons.ts +++ b/packages/extension/shared/icons.ts @@ -1,14 +1,26 @@ -export const icons = { - normal: { - 16: 'assets/icons/solid-normal-16.png', - 32: 'assets/icons/solid-normal-32.png', - 48: 'assets/icons/solid-normal-48.png', - 128: 'assets/icons/solid-normal-128.png', - }, - disabled: { - 16: 'assets/icons/solid-gray-16.png', - 32: 'assets/icons/solid-gray-32.png', - 48: 'assets/icons/solid-gray-48.png', - 128: 'assets/icons/solid-gray-128.png', - }, -} as const + +export const SOLID_BLUE_16 = 'assets/icons/solid-normal-16.png' +export const SOLID_BLUE_32 = 'assets/icons/solid-normal-32.png' +export const SOLID_BLUE_48 = 'assets/icons/solid-normal-48.png' +export const SOLID_BLUE_128 = 'assets/icons/solid-normal-128.png' + +export const SOLID_GRAY_16 = 'assets/icons/solid-gray-16.png' +export const SOLID_GRAY_32 = 'assets/icons/solid-gray-32.png' +export const SOLID_GRAY_48 = 'assets/icons/solid-gray-48.png' +export const SOLID_GRAY_128 = 'assets/icons/solid-gray-128.png' + +export const OUTLINE_32 = 'solid-white-32.png' + +export const blue: chrome.runtime.ManifestIcons = { + 16: SOLID_BLUE_16, + 32: SOLID_BLUE_32, + 48: SOLID_BLUE_48, + 128: SOLID_BLUE_128, +} + +export const gray: chrome.runtime.ManifestIcons = { + 16: SOLID_GRAY_16, + 32: SOLID_GRAY_32, + 48: SOLID_GRAY_48, + 128: SOLID_GRAY_128, +} diff --git a/packages/extension/vite.config.ts b/packages/extension/vite.config.ts index ba8ce27f..a73813e1 100644 --- a/packages/extension/vite.config.ts +++ b/packages/extension/vite.config.ts @@ -3,9 +3,9 @@ import * as fs from 'node:fs' import * as module from 'node:module' import * as assert from 'node:assert' import * as vite from 'vite' -import solid from 'vite-plugin-solid' -import ext_pkg from './package.json' -import {icons} from './shared/icons.js' +import solid from 'vite-plugin-solid' +import pkg from './package.json' with {type: 'json'} +import * as icons from './shared/icons.js' const require = module.createRequire(import.meta.url) @@ -17,7 +17,7 @@ const is_dev = process.env['NODE_ENV'] === 'development' const manifest_version = (() => { // Convert from Semver (example: 0.1.0-beta6) - const [major, minor, patch, label = '0'] = ext_pkg.version + const [major, minor, patch, label = '0'] = pkg.version // can only contain digits, dots, or dash .replace(/[^\d.-]+/g, '') // split into version parts @@ -36,7 +36,7 @@ const manifest: crx.ManifestV3Export & Manifest_Additional_Fields = { description: 'Chrome Developer Tools extension for debugging SolidJS applications.', homepage_url: 'https://github.com/thetarnav/solid-devtools', version: manifest_version, - version_name: is_chrome ? ext_pkg.version : undefined, + version_name: is_chrome ? pkg.version : undefined, browser_specific_settings: is_chrome ? undefined : {gecko: {id: '{abfd162e-9948-403a-a75c-6e61184e1d47}'}}, @@ -73,11 +73,11 @@ const manifest: crx.ManifestV3Export & Manifest_Additional_Fields = { }, permissions: [], action: { - default_icon: icons.disabled, + default_icon: icons.gray, default_title: 'Solid Devtools', default_popup: 'popup/popup.html', }, - icons: icons.normal, + icons: icons.blue, } const sdt_pkg: {version: string} = JSON.parse(fs.readFileSync(require.resolve('solid-devtools/package.json'), 'utf-8'))