adding node props/args table to info panel

object_database/web/devtools/cells_panel.css

@@ -19,6 +19,7 @@ div#main {
 
 div#cell-info {
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     min-width: 30%;
@@ -27,6 +28,10 @@ div#cell-info {
     font-size: 20px;
 }
 
+div#cell-info > table {
+    border: 2px solid;
+}
+
 .node {
     cursor: pointer;
 }

object_database/web/devtools/js/cell_panel.js

@@ -130,19 +130,47 @@ const updateInfoPanel = (node) => {
 }
 
 
+const createPropsTable = (propsDict) => {
+    const table = document.createElement('table');
+    // header
+    const thead = document.createElement('thead');
+    const tr = document.createElement('tr');
+    const th = document.createElement('table');
+    thead.append(tr);
+    tr.append(th);
+    th.textContent = "Node Arguments";
+    th.setAttribute("colspan", 2);
+    table.append(thead);
+    // body
+    const tbody = document.createElement('tbody');
+    table.append(tbody);
+    Object.keys(propsDict).forEach((key) => {
+        const tr = document.createElement('tr');
+        const tdKey = document.createElement('td');
+        const tdValue = document.createElement('td');
+        tdKey.textContent = key;
+        tdValue.textContent = propsDict[key];
+        tr.append(tdKey);
+        tr.append(tdValue);
+        tbody.append(tr);
+    });
+
+    return table;
+}
+
 // I handle incoming background 'info' messages
 // ie generally these are coming from a devtools request
 // to the target application and response from the target app
 // returning via content script -> background
 const handleInfoFromBackground = (msg) => {
     console.log("message from backgound", msg)
     const infoPanel = document.getElementById("cell-info");
-    const propsDiv = document.createElement("div");
-    let data = msg.data;
-    if (data) {
-        data = JSON.stringify(data);
+    if (Object.keys(msg.data).length) {
+        const table = createPropsTable(msg.data);
+        infoPanel.append(table);
+    } else {
+        const span = document.createElement('span');
+        span.textContent = "This node takes no args";
+        infoPanel.append(span);
     }
-    propsDiv.innerText = `props: ${data}`;
-    infoPanel.append(propsDiv);
-
 }