Add better interface

lib/devtools-inspector.js

@@ -2,6 +2,7 @@
 import http from 'http'
 import { WebSocketServer } from 'ws'
 import { Session } from '@holepunchto/pear-inspect'
+import b4a from 'b4a'
 
 customElements.define('devtools-inspector', class extends HTMLElement {
   constructor () {
@@ -17,24 +18,66 @@ customElements.define('devtools-inspector', class extends HTMLElement {
           #add-key-error {
             color: red;
           }
+
+          #no-apps.hidden {
+            display: none;
+          }
+
+          #code-installation {
+            white-space: pre-line;
+            padding-bottom: 1rem;
+            font-size: 10px;
+          }
+
+          .app {
+            display: flex;
+            align-items: center;
+          }
+          .app .title {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+          .app:hover .remove {
+            display: block;
+          }
+          .app .remove {
+            cursor: pointer;
+            padding-right: 10px;
+            margin-left: calc(-1rem - 10px);
+            width: 1rem;
+            display: none;
+          }
         </style>
 
         <h1>Inspector</h1>
         <div>
-          This acts as a link between chrome://inspect and debugging Pear apps
+          Use DevTools to debug your Pear apps
         </div>
         <ol>
-          <li>Run a pear app with "pear dev . --inspect"</li>
-          <li>The outputted key should be added here</li>
+          <li>npm install pear-inspect in your app</li>
+          <li>
+            Add this code to your app:
+            <div id="code-installation">
+              import inspector from 'inspector'
+              import { Inspector } from 'pear-inspect'
+              const pearInspector = await new Inspector({ inspector }).enable()
+              const { publicKey } = await pearInspector.enable()
+              console.log('Pear Inspector key:', publicKey.toString('hex'))
+            </div>
+          </li>
+          <li>Running your program and the Pear Inspector key will be logged</li>
+          <li>Paste the logged key here</li>
           <li>In Chrome, open chrome://inspect and the app should appear under Targets</li>
         </ol>
         <div>
           <form id="add-key-form">
-            <input id="add-key-input" type="text" placeholder="Id given when running pear with --inspect"/>
+            <input id="add-key-input" type="text" placeholder="Pear Inspector key"/>
             <p id="add-key-error"></p>
           </form>
         </div>
-        <h3 id="no-apps">No apps availble. Add a key above, to start debugging.</h3>
+        <h2>Apps</h2>
+        <h3 id="no-apps">No apps added. Add a key above, to start debugging.</h3>
         <div id="apps"></div>
       </div>
     `
@@ -48,20 +91,20 @@ customElements.define('devtools-inspector', class extends HTMLElement {
     this.noAppsElem = this.root.querySelector('#no-apps')
     this.apps = new Map()
 
+    this.addKeyInputElem.addEventListener('keypress', e => {
+      this.addKeyErrorElem.textContent = ''
+    })
+
     this.addKeyFormElem.addEventListener('submit', e => {
       e.preventDefault()
       const publicKey = this.addKeyInputElem.value
-      if (publicKey.length === 0) {
-        this.addKeyErrorElem.textContent = ''
-        return
-      }
       if (publicKey.length !== 64) {
         this.addKeyErrorElem.textContent = 'Key needs to be 64 characters long'
         return
       }
 
       const sessionId = generateUuid()
-      const inspectorSession = new Session({ publicKey: Buffer.from(publicKey, 'hex') })
+      const inspectorSession = new Session({ publicKey: b4a.from(publicKey, 'hex') })
       const app = {
         publicKey,
         title: '',
@@ -153,17 +196,28 @@ customElements.define('devtools-inspector', class extends HTMLElement {
   }
 
   renderApps () {
-    const content = [...this.apps.values()].map(app => `
-      <div>
-        <div>Title: ${app.title}</div>
-        <div>URL: ${app.url}</div>
-        <div>Public key: ${app.publicKey}</div>
-        <div>Connected: ${app.connected ? 'Yes' : 'No'}</div>
-      </div>
-    `)
-    this.appsElem.innerHTML = content
+    this.appsElem.replaceChildren(...[...this.apps].map(([sessionId, app]) => {
+      const div = document.createElement('div')
+      div.innerHTML = `
+        <div class="app">
+          <div class="remove" data-session-id="${sessionId}">✕</div>
+          <div class="title">${app.title} (${app.url})</div>
+        </div>
+      `
+      div.querySelector('.remove').addEventListener('click', () => {
+        this.apps.delete(sessionId)
+        this.renderApps()
+      })
+
+      return div
+    }))
+
+    if (this.apps.size > 0) {
+      this.noAppsElem.classList.add('hidden')
+    } else {
+      this.noAppsElem.classList.remove('hidden')
+    }
 
-    if (this.apps.size > 0) this.noAppsElem.remove()
   }
 
   load () {

package.json

@@ -10,8 +10,8 @@
     }
   },
   "dependencies": {
-    "bare-path": "^2.1.0",
     "@holepunchto/pear-inspect": "^2.0.0",
+    "bare-path": "^2.1.0",
     "redhat-overpass-font": "^1.0.0",
     "ws": "^8.16.0"
   },