From a7383cefb916cd6ab72a1ef07b3e6ad200de423b Mon Sep 17 00:00:00 2001 From: dmc Date: Tue, 30 Jan 2024 22:52:33 +0100 Subject: [PATCH] align voice, routing, display, instructions, rm optional dep --- index.html | 14 ++-- lib/{developer-tooling.js => devtools.js} | 98 +++++++++++++++-------- package.json | 3 - 3 files changed, 72 insertions(+), 43 deletions(-) rename lib/{developer-tooling.js => devtools.js} (72%) diff --git a/index.html b/index.html index 8456993..7bb2393 100644 --- a/index.html +++ b/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:active[href='/developer-tooling'], - app-router[data-load="developer-tooling"] a:visited[href='/developer-tooling'] { + app-router[data-load="developer-tooling"] a[href='/devtools'], + app-router[data-load="developer-tooling"] a:active[href='/devtools'], + app-router[data-load="developer-tooling"] a:visited[href='/devtools'] { color: rgb(78, 250, 92); }
- + 
           __ \    _ \   _` |   __|
@@ -270,9 +270,9 @@
     
     
     

-      

+      

     

-    
+    
   
   
 
diff --git a/lib/developer-tooling.js b/lib/devtools.js
similarity index 72%
rename from lib/developer-tooling.js
rename to lib/devtools.js
index ccf9ca2..a935e19 100644
--- a/lib/developer-tooling.js
+++ b/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 }
         
 
-        
Inspector

         

-          Use DevTools to debug your Pear apps
-        

-        
    
-          
  1. npm install pear-inspect in your app
    2. 
-          
  2. 
-            Add this code to your app:
-            
    
-              import inspector from 'inspector'
-              import { Inspector } from 'pear-inspect'
-              const pearInspector = await new Inspector({ inspector }).enable()
-              const inspectorKey = await pearInspector.enable()
-              console.log('Pear Inspector key:', inspectorKey.toString('hex'))
+          
    Developer Tooling
    
+          
    
+            
    Remotely inspect Pear applications.
    
+          
+            
     Some application setup is required to enable remote debugging 
    
+            
     First install the pear-inspect module into the application 
    
+            
    npm install pear-inspect
    
+            
     Then add the following JavaScript code to the application, at the top: 
    
+
+            
    if (Pear.config.dev) {
+  const { Inspector } = await import('pear-inspect')
+  const inpector = await new Inspector()
+  const key = await inpector.enable()
+  console.log('Pear Inspector key:', key.toString('hex'))
+}
    
+
+            
    When the application is opened in development mode the inspection key will be logged.
    
+            
    Paste the logged key into the input and use a compatible inspect protocol tool, such as chrome://inspect to view the remote target
    
             
    
-          
    3. 
-          
  3. Running your program and the Pear Inspector key will be logged
    4. 
-          
  4. Paste the logged key here
    5. 
-          
  5. In Chrome, open chrome://inspect and the app should appear under Targets
    6. 
-        

-        

-          

-            
-            

-          

-        

-        
Apps

-        
No apps added. Add a key above, to start debugging.

-        

+          

+            

+              

+                
+                

+              

+            

+            
Apps

+            
No apps added. Add an inspect key to start debugging.

+            

+
` this.root = this.attachShadow({ mode: 'open' }) diff --git a/package.json b/package.json index 06ab67f..7a53994 100644 --- a/package.json +++ b/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" } }