Fix DevTools panel disconnecting in Chrome after 30 seconds of inactivity

WE2-967

Includes minor cleanup for DevTools related files

Signed-off-by: Tanel Metsar <[email protected]>

Author: taneltm

static/views/devtools/panels/devtools-webeid.html

@@ -22,11 +22,13 @@
 
     <div class="version" title="Extension version"></div>
   </header>
+
   <main>
     <section data-page="events">
       <div id="event-list"></div>
       <pre id="event-details"></pre>
     </section>
+
     <section data-page="log">
       <div class="toolbar">
         <div class="group">
@@ -44,12 +46,12 @@
       </div>
       <div id="log-messages"></div>
     </section>
+
     <section data-page="settings">
       <div class="warning">The settings you change here apply to all pages and persist even after closing DevTools.</div>
       <table>
         <tbody id="settings-list"></tbody>
       </table>
-      
     </section>
   </main>
 

static/views/devtools/panels/devtools-webeid.js

@@ -24,38 +24,78 @@ import events from "./webeid-events.js";
 import log from "./webeid-log.js";
 import settings from "./webeid-settings.js";
 
+(function connect() {
+  const backgroundConnection = chrome.runtime.connect({
+    name: "webeid-devtools",
+  });
 
-const backgroundConnection = chrome.runtime.connect({
-  name: "webeid-devtools",
-});
+  const keepAliveInterval = setInterval(() => {
+    backgroundConnection.postMessage({ devtools: "keep-alive" });
+  }, 20000);
 
-backgroundConnection.onMessage.addListener((message) => {
-  if (!message.tabId || message.tabId === chrome.devtools.inspectedWindow.tabId) {
-    if (message.devtools === "log") {
-      log.append(message);
-    } else if (message.devtools === "event") {
-      events.append(message);
+  backgroundConnection.onDisconnect.addListener(() => {
+    clearInterval(keepAliveInterval);
 
-      const direction = (
-        message.type === "request"
-          ? "—►"
-          : message.type === "response"
-            ? "◄—"
-            : "?"
-      );
+    log.append({
+      source: "devtools-webeid.js",
+      type: "debug",
+      time: new Date().toISOString().match(/T((.)*)Z/)[1],
+      message: [
+        "DevTools panel disconnected. Attempting to reconnect."
+      ],
+    });
+
+    try {
+      connect();
 
       log.append({
-        time:    message.time,
-        type:    "event",
-        source:  `${message.layer1} ${direction} ${message.layer2}`,
-        message: [message.data],
+        source: "devtools-webeid.js",
+        type: "debug",
+        time: new Date().toISOString().match(/T((.)*)Z/)[1],
+        message: [
+          "DevTools panel reconnected."
+        ],
       });
-    } else if (message.devtools === "settings") {
-      const { config, defaultConfig } = message;
-
-      settings.render(config, defaultConfig, backgroundConnection);
-
-      document.querySelector('header .version').textContent = defaultConfig.VERSION;
+    } catch {
+      log.append({
+        source: "devtools-webeid.js",
+        type: "error",
+        time: new Date().toISOString().match(/T((.)*)Z/)[1],
+        message: [
+          "Web eID DevTools panel disconnected from the extension. Please reopen the browser DevTools to continue."
+        ],
+      });
+    }
+  });
+  
+  backgroundConnection.onMessage.addListener((message) => {
+    if (!message.tabId || message.tabId === chrome.devtools.inspectedWindow.tabId) {
+      if (message.devtools === "log") {
+        log.append(message);
+      } else if (message.devtools === "event") {
+        events.append(message);
+  
+        const direction = (
+          message.type === "request"
+            ? "—►"
+            : message.type === "response"
+              ? "◄—"
+              : "?"
+        );
+  
+        log.append({
+          time:    message.time,
+          type:    "event",
+          source:  `${message.layer1} ${direction} ${message.layer2}`,
+          message: [message.data],
+        });
+      } else if (message.devtools === "settings") {
+        const { config, defaultConfig } = message;
+  
+        settings.render(config, defaultConfig, backgroundConnection);
+  
+        document.querySelector('header .version').textContent = defaultConfig.VERSION;
+      }
     }
-  }
-});
+  });
+})();

static/views/devtools/panels/webeid-log.js

@@ -47,12 +47,8 @@ function createLogEntryElement(type, time, message, source) {
 
 function stringifyError(error) {
   const {
-    fileName,
-    lineNumber,
-    columnNumber,
     message,
     name,
-    code,
     stack,
   } = error;