Add buttons to Copy URL, and open in Chrome

This commit is contained in:
Tobias Baunbaek
2024-02-01 13:17:20 +01:00
parent a0d53d9024
commit b386acce19

View File

@@ -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)
}