Rename to Developer Tooling. Fix landing page bug

index.html

@@ -189,7 +189,7 @@
 
     system-status,
     docs-viewer,
-    devtools-inspector {
+    developer-tooling {
       position: relative;
       top: 156px
     }
@@ -215,14 +215,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="devtools-inspector"] a[href='/devtools-insepctor'],
-    app-router[data-load="devtools-inspector"] a:active[href='/devtools-inspector'],
-    app-router[data-load="devtools-inspector"] a:visited[href='/devtools-inspector'] {
+    app-router[data-load="developer-tooling"] a[href='/developer-tooling'],
+    app-router[data-load="developer-tooling"] a:active[href='/developer-tooling'],
+    app-router[data-load="developer-tooling"] a:visited[href='/developer-tooling'] {
       color: rgb(78, 250, 92);
     }
   </style>
   <div id="bar"><pear-ctrl></pear-ctrl></div>
-  <app-router docs-viewer="/documentation" devtools-inspector="/devtools-inspector" system-status="/" data-load="system-status">
+  <app-router docs-viewer="/documentation" developer-tooling="/developer-tooling" 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">
@@ -252,7 +252,7 @@
         <nav>
           <a href="/" style="text-indent: -1rem">System Status</a>
           <a href="/documentation">Documentation</a>
-          <a href="/devtools-inspector">Inspector</a>
+          <a href="/developer-tooling">Developer Tooling</a>
         </nav>
         <pre>
           __ \    _ \   _` |   __|
@@ -262,18 +262,18 @@
         </pre>
       </div>
     </header>
-    <section id="status">
+    <section>
       <div class="col"><system-status></system-status></div>
     </section>
     <script type='module' src='./lib/system-status.js'></script>
-    <section id="documentation">
+    <section>
       <div class="col"><docs-viewer></docs-viewer></div>
     </section>
     <script type='module' src='./lib/docs-viewer.js'></script>
-    <section id="inspector">
-      <div class="col"><devtools-inspector></devtools-inspector></div>
+    <section>
+      <div class="col"><developer-tooling></developer-tooling></div>
     </section>
-    <script type='module' src='./lib/devtools-inspector.js'></script>
+    <script type='module' src='./lib/developer-tooling.js'></script>
   </app-router>
   <script type='module' src='./lib/app-router.js'></script>
 </body>

lib/app-router.js

@@ -49,6 +49,8 @@ customElements.define('app-router', class AppRouter extends HTMLElement {
     window.addEventListener('load', () => {
       if (Pear.config.link.indexOf('pear://pulse') === 0) {
         this.load(Pear.config.link.slice(12)).catch(console.error)
+      } else {
+        this.load('/')
       }
     })
   }

lib/developer-tooling.js

@@ -4,9 +4,12 @@ import { WebSocketServer } from 'ws'
 import { Session } from '@holepunchto/pear-inspect'
 import b4a from 'b4a'
 
-customElements.define('devtools-inspector', class extends HTMLElement {
+customElements.define('developer-tooling', class extends HTMLElement {
+  router = null
+
   constructor () {
     super()
+    console.log('[developer-tooling] constructor')
     this.template = document.createElement('template')
     this.template.innerHTML = `
       <div>
@@ -221,10 +224,12 @@ customElements.define('devtools-inspector', class extends HTMLElement {
   }
 
   load () {
+    console.log('load', this.style)
     this.style.display = ''
   }
 
   unload () {
+    console.log('unload', this.style)
     this.style.display = 'none'
   }
 })