align voice, routing, display, instructions, rm optional dep

index.html

@@ -214,14 +214,14 @@
     app-router[data-load="docs-viewer"] a[href='/documentation'],
     app-router[data-load="docs-viewer"] a:active[href='/documentation'],
     app-router[data-load="docs-viewer"] a:visited[href='/documentation'],
-    app-router[data-load="developer-tooling"] a[href='/developer-tooling'],
+    app-router[data-load="developer-tooling"] a[href='/devtools'],
-    app-router[data-load="developer-tooling"] a:active[href='/developer-tooling'],
+    app-router[data-load="developer-tooling"] a:active[href='/devtools'],
-    app-router[data-load="developer-tooling"] a:visited[href='/developer-tooling'] {
+    app-router[data-load="developer-tooling"] a:visited[href='/devtools'] {
       color: rgb(78, 250, 92);
     }
   </style>
   <div id="bar"><pear-ctrl></pear-ctrl></div>
-  <app-router docs-viewer="/documentation" developer-tooling="/developer-tooling" system-status="/" data-load="system-status">
+  <app-router docs-viewer="/documentation" developer-tooling="/devtools" system-status="/" data-load="system-status">
     <header>
       <div id="headin">
         <svg id="logo" width="102" height="146" viewBox="0 0 102 146" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -251,7 +251,7 @@
         <nav>
           <a href="/">System Status</a>
           <a href="/documentation">Documentation</a>
-          <a href="/developer-tooling">Developer Tooling</a>
+          <a href="/devtools">Developer Tooling</a>
         </nav>
         <pre>
           __ \    _ \   _` |   __|
@@ -270,9 +270,9 @@
     </section>
     <script type='module' src='./lib/docs-viewer.js'></script>
     <section>
-      <div class="col"><developer-tooling></developer-tooling></div>
+      <div class="col"><developer-tooling></devtools></div>
     </section>
-    <script type='module' src='./lib/developer-tooling.js'></script>
+    <script type='module' src='./lib/devtools.js'></script>
   </app-router>
   <script type='module' src='./lib/app-router.js'></script>
 </body>

lib/devtools.js

@@ -25,12 +25,6 @@ customElements.define('developer-tooling', class extends HTMLElement {
             display: none;
           }
 
-          #code-installation {
-            white-space: pre-line;
-            padding-bottom: 1rem;
-            font-size: 10px;
-          }
-
           .app {
             display: flex;
             align-items: center;
@@ -50,37 +44,75 @@ customElements.define('developer-tooling', class extends HTMLElement {
             width: 1rem;
             display: none;
           }
+          #remote-inspect-explain {
+            float:left;
+            max-width:55%;
+          }
+          #remote-inspect {
+            float:right;
+            max-width:40%;
+          }
+
+          h2 { margin: 0 }
+          p { 
+            margin-block-start: 0.75em;
+            margin-block-end: 0.75em;
+          }
+
+          input {
+            all: unset;
+            border: 1px ridge #B0D944;
+            background: #000;
+            color: #B0D944;
+            padding: .45rem;
+            font-family: monospace;
+            font-size: 1rem;
+            line-height: 1rem;
+          }
+          code {
+            background: #3a4816;
+            color: #efeaea;
+            padding: 0.25rem;
+            padding-top: 0.1rem;
+            padding-bottom: 0.15rem;
+            font-family: 'overpass-mono';
+            border-radius: 1px;
+            font-size: .9em;
+          }
+          pre > code { display: block; line-height: 1.025rem; padding-left: 1em; background: #181e19 }
         </style>
 
-        <h1>Inspector</h1>
         <div>
-          Use DevTools to debug your Pear apps
+          <h1>Developer Tooling</h1>
-        </div>
+          <div id=remote-inspect-explain>
-        <ol>
+            <h2>Remotely inspect Pear applications.</h2>
-          <li>npm install pear-inspect in your app</li>
+          
-          <li>
+            <p> Some application setup is required to enable remote debugging </p>
-            Add this code to your app:
+            <p> First install the <code>pear-inspect</code> module into the application </p>
-            <div id="code-installation">
+            <pre><code>npm install pear-inspect</code></pre>
-              import inspector from 'inspector'
+            <p> Then add the following JavaScript code to the application, at the top: </p>
-              import { Inspector } from 'pear-inspect'
+
-              const pearInspector = await new Inspector({ inspector }).enable()
+            <pre><code>if (Pear.config.dev) {
-              const inspectorKey = await pearInspector.enable()
+  const { Inspector } = await import('pear-inspect')
-              console.log('Pear Inspector key:', inspectorKey.toString('hex'))
+  const inpector = await new Inspector()
+  const key = await inpector.enable()
+  console.log('Pear Inspector key:', key.toString('hex'))
+}</code></pre>
+
+            <p>When the application is opened in development mode the inspection key will be logged.</p>
+            <p>Paste the logged key into the input and use a compatible inspect protocol tool, such as chrome://inspect to view the remote target</p>
             </div>
-          </li>
+          <div id=remote-inspect>
-          <li>Running your program and the Pear Inspector key will be logged</li>
+            <div>
-          <li>Paste the logged key here</li>
+              <form id="add-key-form">
-          <li>In Chrome, open chrome://inspect and the app should appear under Targets</li>
+                <input id="add-key-input" type="text" placeholder="Paste Pear Inspector Key Here"/>
-        </ol>
+                <p id="add-key-error"></p>
-        <div>
+              </form>
-          <form id="add-key-form">
+            </div>
-            <input id="add-key-input" type="text" placeholder="Pear Inspector key"/>
+            <h2>Apps</h2>
-            <p id="add-key-error"></p>
+            <h3 id="no-apps">No apps added. Add an inspect key to start debugging.</h3>
-          </form>
+            <div id="apps"></div>
-        </div>
+          </div>
-        <h2>Apps</h2>
-        <h3 id="no-apps">No apps added. Add a key above, to start debugging.</h3>
-        <div id="apps"></div>
       </div>
     `
     this.root = this.attachShadow({ mode: 'open' })

package.json

@@ -15,8 +15,5 @@
     "bare-path": "^2.1.0",
     "redhat-overpass-font": "^1.0.0",
     "ws": "^8.16.0"
-  },
-  "optionalDependencies": {
-    "bufferutil": "^4.0.8"
   }
 }