Display place connection status in popup

Author: thetarnav

.changeset/fresh-camels-stay.md

@@ -0,0 +1,5 @@
+---
+"@solid-devtools/extension": patch
+---
+
+Display place connection status in popup

extension/src/background.ts

@@ -59,7 +59,7 @@ type Script_Content = {
     tab_id:    Tab_Id
     port:      Port
     detection: Detection_State | null
-    versions:  Versions       | null
+    versions:  Versions        | null
 }
 
 let popup: Script_Popup | undefined
@@ -97,6 +97,12 @@ function toggle_action_icon(tab_id: Tab_Id) {
     }
 }
 
+function send_connection_status_to_popup(place: Place_Name, state: boolean) {
+    if (popup) {
+        port_post_message(popup.port, 'Port_Connection_Status', {place, state})
+    }
+}
+
 function on_connected(port: Port) {
 
     place_log(Place_Name.Background, 'Port connected', port)
@@ -111,6 +117,14 @@ function on_connected(port: Port) {
             port_post_message(popup.port, 'Versions', content.versions)
         }
 
+        send_connection_status_to_popup(Place_Name.Content, content != null)
+
+        let devtools = script_devtools_map.get(active_tab_id)
+        send_connection_status_to_popup(Place_Name.Devtools, devtools != null)
+
+        let panel = script_panel_map.get(active_tab_id)
+        send_connection_status_to_popup(Place_Name.Panel, panel != null)
+
         break
     }
     case Connection_Name.Content: {
@@ -130,6 +144,10 @@ function on_connected(port: Port) {
             port_post_message(content.port, 'ResetState', undefined)
         }
 
+        if (tab_id === active_tab_id) {
+            send_connection_status_to_popup(Place_Name.Content, true)
+        }
+
         break
     }
     case Connection_Name.Devtools: {
@@ -142,6 +160,8 @@ function on_connected(port: Port) {
             port_post_message(port, 'Versions', content.versions)
         }
 
+        send_connection_status_to_popup(Place_Name.Devtools, true)
+
         break
     }
     case Connection_Name.Panel: {
@@ -157,6 +177,8 @@ function on_connected(port: Port) {
             port_post_message(content.port, 'ResetState', undefined)
         }
 
+        send_connection_status_to_popup(Place_Name.Panel, true)
+
         break
     }
     }
@@ -200,6 +222,10 @@ function on_disconnected(port: Port) {
 
         toggle_action_icon(tab_id)
 
+        if (tab_id === active_tab_id) {
+            send_connection_status_to_popup(Place_Name.Content, false)
+        }
+
         break
     }
     case Connection_Name.Devtools: {
@@ -210,6 +236,8 @@ function on_disconnected(port: Port) {
             port_post_message(content.port, 'DevtoolsOpened', false)
         }
 
+        send_connection_status_to_popup(Place_Name.Devtools, false)
+
         break
     }
     case Connection_Name.Panel: {
@@ -220,6 +248,8 @@ function on_disconnected(port: Port) {
             port_post_message(content.port, 'DevtoolsOpened', false)
         }
 
+        send_connection_status_to_popup(Place_Name.Panel, false)
+
         break
     }
     }

extension/src/popup.css

@@ -40,7 +40,7 @@ a:hover {
 p {
     margin: 0;
 }
-p[data-detected]::before {
+p[data-status]::before {
     content: '';
     display: inline-block;
     width: 0.5rem;
@@ -49,10 +49,10 @@ p[data-detected]::before {
     margin-right: 0.3rem;
     background-color: var(--disabled);
 }
-p[data-detected='false'] {
+p[data-status='false'] {
     color: var(--lighter-dark);
 }
-p[data-detected='true']::before {
+p[data-status='true']::before {
     background-color: var(--blue);
 }
 

extension/src/popup.tsx

@@ -24,6 +24,18 @@ const empty_detection_state: Detection_State = {
 }
 const [detectionState, setDetectionState] = s.createSignal(empty_detection_state)
 
+type Connection_Status = {
+    [Place_Name.Content]:  boolean
+    [Place_Name.Devtools]: boolean
+    [Place_Name.Panel]:    boolean
+}
+const empty_connection_status: Connection_Status = {
+    [Place_Name.Content]:  false,
+    [Place_Name.Devtools]: false,
+    [Place_Name.Panel]:    false,
+}
+const [connectionStatus, setConnectionStatus] = s.createSignal(empty_connection_status)
+
 port_on_message(port, e => {
     // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
     switch (e.kind) {
@@ -33,24 +45,34 @@ port_on_message(port, e => {
     case 'Versions':
         setVersions(e.data)
         break
+    case 'Port_Connection_Status':
+        setConnectionStatus(prev => ({
+            ...prev,
+            [e.data.place]: e.data.state
+        }))
+        break
     }
 })
 
+function not_str(value: boolean): string {
+    return value ? '' : 'not'
+}
+
 const App: s.Component = () => {
     return <>
         <div>
-            <p data-detected={detectionState().solid}>
-                Solid {detectionState().solid ? 'detected' : 'not detected'}
+            <p data-status={detectionState().solid}>
+                Solid {not_str(detectionState().solid)} detected
             </p>
         </div>
         <div>
-            <p data-detected={detectionState().solid_dev}>
-                Solid Dev Mode {detectionState().solid_dev ? 'detected' : 'not detected'}
+            <p data-status={detectionState().solid_dev}>
+                Solid Dev Mode {not_str(detectionState().solid_dev)} detected
             </p>
         </div>
         <div>
-            <p data-detected={detectionState().setup}>
-                Debugger {detectionState().setup ? 'detected' : 'not detected'}
+            <p data-status={detectionState().setup}>
+                Debugger {not_str(detectionState().setup)} detected
             </p>
             <s.Show when={detectionState().solid_dev && !detectionState().setup}>
                 <div class="details">
@@ -69,6 +91,21 @@ const App: s.Component = () => {
                 </div>
             </s.Show>
         </div>
+        <div>
+            <p data-status={connectionStatus()[Place_Name.Content]}>
+                Content Script {not_str(connectionStatus()[Place_Name.Content])} connected
+            </p>
+        </div>
+        <div>
+            <p data-status={connectionStatus()[Place_Name.Devtools]}>
+                Devtools {not_str(connectionStatus()[Place_Name.Devtools])} connected
+            </p>
+        </div>
+        <div>
+            <p data-status={connectionStatus()[Place_Name.Panel]}>
+                Panel {not_str(connectionStatus()[Place_Name.Panel])} connected
+            </p>
+        </div>
         <s.Show when={versions()} keyed>
         {v => (
             <div class="versions">

extension/src/shared.ts

@@ -80,6 +80,12 @@ export interface General_Channels {
     DevtoolsOpened: boolean
 
     ResetPanel: void
+
+    /** background -> popup: connection status for different places */
+    Port_Connection_Status: {
+        place: Place_Name
+        state: boolean
+    }
 }
 
 export type Channels = debug.InputChannels