From b386acce19c18749873a6d0ac61c602773c5fe26 Mon Sep 17 00:00:00 2001
From: Tobias Baunbaek <freeall@gmail.com>
Date: Thu, 1 Feb 2024 13:17:20 +0100
Subject: [PATCH] Add buttons to Copy URL, and open in Chrome

---
 lib/devtools.js | 44 ++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 40 insertions(+), 4 deletions(-)

diff --git a/lib/devtools.js b/lib/devtools.js
index 033db31..f4b50e4 100644
--- a/lib/devtools.js
+++ b/lib/devtools.js
@@ -3,6 +3,7 @@ import http from 'http'
 import { WebSocketServer } from 'ws'
 import { Session } from 'pear-inspect'
 import b4a from 'b4a'
+import { spawn } from 'child_process'
 
 customElements.define('developer-tooling', class extends HTMLElement {
   router = null
@@ -29,20 +30,34 @@ customElements.define('developer-tooling', class extends HTMLElement {
           .app {
             display: flex;
             align-items: center;
+            padding: 0.25rem;
+            padding-top: 0.1rem;
+            padding-bottom: 0.15rem;
           }
           .app .title {
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
           }
+          .app:hover .copy,
+          .app:hover .open-in-chrome,
           .app:hover .remove {
             display: block;
           }
+          .app .copy,
+          .app .open-in-chrome {
+            margin-right: 10px;
+          }
+          .app .copy,
+          .app .open-in-chrome,
           .app .remove {
             cursor: pointer;
-            padding-right: 10px;
-            margin-left: calc(-1rem - 10px);
-            width: 1rem;
+            background: #3a4816;
+            color: #efeaea;
+            padding: 0 0.25rem;
+            font-family: 'overpass-mono';
+            border-radius: 1px;
+            white-space: nowrap;
             display: none;
           }
           #remote-inspect-explain {
@@ -159,10 +174,18 @@ customElements.define('developer-tooling', class extends HTMLElement {
       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 class="copy">Copy URL</div>
+          <div class="open-in-chrome">Open in Chrome</div>
+          <div class="remove">✕</div>
         </div>
       `
+      div.querySelector('.copy').addEventListener('click', () => {
+        navigator.clipboard.writeText(`devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=127.0.0.1:${this.port}/${sessionId}`)
+      })
+      div.querySelector('.open-in-chrome').addEventListener('click', () => {
+        openChrome(`devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=127.0.0.1:${this.port}/${sessionId}`)
+      })
       div.querySelector('.remove').addEventListener('click', () => {
         this.apps.delete(sessionId)
         this.renderApps()
@@ -300,3 +323,16 @@ function generateUuid () {
   }
   return result
 }
+
+function openChrome (url) {
+  const params = {
+    darwin: ['open', '-a', 'Google Chrome', url],
+    linux: ['google-chrome', url],
+    win32: ['start', 'chrome', url]
+  }[process.platform]
+
+  if (!params) throw new Error('Cannot open Chrome')
+
+  const [command, ...args] = params
+  spawn(command, args)
+}