Change panel icon style to outline

.changeset/long-adults-shout.md

@@ -0,0 +1,5 @@
+---
+"@solid-devtools/extension": patch
+---
+
+Change panel icon style to outline

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)

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) {

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",

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,
+}

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'))