From 8ba9f9448e61ea64c2ffe569f2e7d9036e7b0c15 Mon Sep 17 00:00:00 2001 From: dkrasner Date: Fri, 23 Jun 2023 15:58:19 +0200 Subject: [PATCH 1/9] setting up fetching cell info data for info panel --- object_database/web/content/src/CellHandler.js | 12 ++++++++++++ object_database/web/devtools/background.js | 2 +- object_database/web/devtools/js/cell_panel.js | 4 +++- 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/object_database/web/content/src/CellHandler.js b/object_database/web/content/src/CellHandler.js index a8a40a5c..156f1a2d 100644 --- a/object_database/web/content/src/CellHandler.js +++ b/object_database/web/content/src/CellHandler.js @@ -519,6 +519,18 @@ class CellHandler { // listent to only devtools content-script messages if (event.data.type == "cells_devtools_CS") { console.log("receiving message from CS: ", event.data); + // when we click on a tree node in devtools we expect info + // about the cell to be sent back (props, source etc) + if (event.data.request == "info") { + const nodeId = event.data.nodeId; + const msg = { + status: "info", + nodeId: nodeId, + data: this.activeCells[nodeId] + } + this.sendMessageToDevtools(msg); + + } } } }) diff --git a/object_database/web/devtools/background.js b/object_database/web/devtools/background.js index 7e56bad1..7725ce07 100644 --- a/object_database/web/devtools/background.js +++ b/object_database/web/devtools/background.js @@ -2,7 +2,7 @@ * The background script handles communication to and from * the content script, embedded in the document, and * the panel scripts, living in devtools. - * These communiccation are handled by chrome.runtime connection + * These communication are handled by chrome.runtime connection * ports. * The connections are initialized int he content and panel scripts, * respectively. Here we listen for these connection and create diff --git a/object_database/web/devtools/js/cell_panel.js b/object_database/web/devtools/js/cell_panel.js index 5f692b88..f6337608 100644 --- a/object_database/web/devtools/js/cell_panel.js +++ b/object_database/web/devtools/js/cell_panel.js @@ -30,6 +30,8 @@ function handleMessageFromBackground(msg){ cellsTreeDisplay(msg.cells); console.log(msg.cells); } + case info: + console.log("info message from cell handler", info) } } @@ -109,7 +111,7 @@ const updateInfoPanel = (node) => { action: "notifyCS", event: "click", nodeId: id, - request: "source" + request: "info" }) const name = node.name; let info = `${name}\ncell-id: ${id}`; From 3d1ceff2636fb061cf6eee30e7ae5a6c845299f0 Mon Sep 17 00:00:00 2001 From: dkrasner Date: Fri, 23 Jun 2023 16:27:53 +0200 Subject: [PATCH 2/9] fixing up message to and from cellahdnler --- object_database/web/content/src/CellHandler.js | 6 +++++- object_database/web/devtools/js/cell_panel.js | 7 ++++--- object_database/web/devtools/js/inspect_window_utils.js | 2 +- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/object_database/web/content/src/CellHandler.js b/object_database/web/content/src/CellHandler.js index 156f1a2d..63f30d65 100644 --- a/object_database/web/content/src/CellHandler.js +++ b/object_database/web/content/src/CellHandler.js @@ -523,10 +523,14 @@ class CellHandler { // about the cell to be sent back (props, source etc) if (event.data.request == "info") { const nodeId = event.data.nodeId; + // the cell objet can't be cloned and sent over + // the window message API as is + let cell = this.activeCells[nodeId]; + cell = JSON.parse(JSON.stringify(cell)); const msg = { status: "info", nodeId: nodeId, - data: this.activeCells[nodeId] + data: cell } this.sendMessageToDevtools(msg); diff --git a/object_database/web/devtools/js/cell_panel.js b/object_database/web/devtools/js/cell_panel.js index f6337608..5f625da6 100644 --- a/object_database/web/devtools/js/cell_panel.js +++ b/object_database/web/devtools/js/cell_panel.js @@ -30,8 +30,10 @@ function handleMessageFromBackground(msg){ cellsTreeDisplay(msg.cells); console.log(msg.cells); } - case info: - console.log("info message from cell handler", info) + break; + case "info": + console.log("info message from cell handler", msg) + breakl } } @@ -111,7 +113,6 @@ const updateInfoPanel = (node) => { action: "notifyCS", event: "click", nodeId: id, - request: "info" }) const name = node.name; let info = `${name}\ncell-id: ${id}`; diff --git a/object_database/web/devtools/js/inspect_window_utils.js b/object_database/web/devtools/js/inspect_window_utils.js index ba696cd4..9471c582 100644 --- a/object_database/web/devtools/js/inspect_window_utils.js +++ b/object_database/web/devtools/js/inspect_window_utils.js @@ -59,7 +59,7 @@ const onClick = (id) => { // get the source code for the cell and send over the devtools const msg = { type: "cells_devtools_CS", - request: "source", + request: "info", nodeId: id }; window.postMessage(msg); From bf7ba18d2172f3b437a96333b2a1b3513656bb94 Mon Sep 17 00:00:00 2001 From: dkrasner Date: Fri, 23 Jun 2023 16:34:36 +0200 Subject: [PATCH 3/9] fixing json parse bug/issue in cell data to send to devtools --- object_database/web/content/src/CellHandler.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/object_database/web/content/src/CellHandler.js b/object_database/web/content/src/CellHandler.js index 63f30d65..7cd4d695 100644 --- a/object_database/web/content/src/CellHandler.js +++ b/object_database/web/content/src/CellHandler.js @@ -525,12 +525,12 @@ class CellHandler { const nodeId = event.data.nodeId; // the cell objet can't be cloned and sent over // the window message API as is - let cell = this.activeCells[nodeId]; - cell = JSON.parse(JSON.stringify(cell)); + const cell = this.activeCells[nodeId]; + const dataToSend = cell.props // TODO; const msg = { status: "info", nodeId: nodeId, - data: cell + data: dataToSend } this.sendMessageToDevtools(msg); From c5b18e2f7977cb37b1757e32e51d5e63ba6ad6ed Mon Sep 17 00:00:00 2001 From: dkrasner Date: Sat, 8 Jul 2023 15:43:47 +0200 Subject: [PATCH 4/9] adding handleBackgroundMessage() to panel --- object_database/web/devtools/cells_panel.html | 2 +- object_database/web/devtools/js/cell_panel.js | 27 ++++++++++++++++--- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/object_database/web/devtools/cells_panel.html b/object_database/web/devtools/cells_panel.html index b53cefe6..8ac18bee 100644 --- a/object_database/web/devtools/cells_panel.html +++ b/object_database/web/devtools/cells_panel.html @@ -10,7 +10,7 @@
-
some cells data here
+
Click on a tree node to get more info
diff --git a/object_database/web/devtools/js/cell_panel.js b/object_database/web/devtools/js/cell_panel.js index 5f625da6..3df446f5 100644 --- a/object_database/web/devtools/js/cell_panel.js +++ b/object_database/web/devtools/js/cell_panel.js @@ -32,8 +32,8 @@ function handleMessageFromBackground(msg){ } break; case "info": - console.log("info message from cell handler", msg) - breakl + handleInfoFromBackground(msg); + break; } } @@ -107,6 +107,9 @@ const cellsTreeDisplay = (cells) => { // info panel display const updateInfoPanel = (node) => { const infoPanel = document.getElementById("cell-info"); + // clear it out first + infoPanel.textContent = null; + const infoSpan = document.createElement("span"); const id = node.getAttribute("data-original-id"); // we need to retrieve the source code for the node window.sendMessageToBackground({ @@ -122,6 +125,24 @@ const updateInfoPanel = (node) => { info = `${info}\nsubscribed to cell-id: ${parentSubtree.id}`; } - infoPanel.innerText = info; + infoSpan.innerText = info; + infoPanel.append(infoSpan); } + +// 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); + } + propsDiv.innerText = `props: ${data}`; + infoPanel.append(propsDiv); + +} From 3db09e85bdf75a42d4d338181f8b02bcb1ebd78a Mon Sep 17 00:00:00 2001 From: dkrasner Date: Mon, 10 Jul 2023 13:43:30 +0200 Subject: [PATCH 5/9] adding node props/args table to info panel --- object_database/web/devtools/cells_panel.css | 5 +++ object_database/web/devtools/js/cell_panel.js | 42 +++++++++++++++---- 2 files changed, 40 insertions(+), 7 deletions(-) diff --git a/object_database/web/devtools/cells_panel.css b/object_database/web/devtools/cells_panel.css index 369acfdb..490650b5 100644 --- a/object_database/web/devtools/cells_panel.css +++ b/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; } diff --git a/object_database/web/devtools/js/cell_panel.js b/object_database/web/devtools/js/cell_panel.js index 3df446f5..8454fd01 100644 --- a/object_database/web/devtools/js/cell_panel.js +++ b/object_database/web/devtools/js/cell_panel.js @@ -130,6 +130,34 @@ 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 @@ -137,12 +165,12 @@ const updateInfoPanel = (node) => { 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); - } From 62ee9c304070e71ab97add2278714dbf55921a0c Mon Sep 17 00:00:00 2001 From: dkrasner Date: Mon, 10 Jul 2023 16:53:45 +0200 Subject: [PATCH 6/9] updating table layout and related styling --- object_database/web/devtools/cells_panel.css | 20 ++++++++++++++++- object_database/web/devtools/js/cell_panel.js | 22 ++++++++++++++----- 2 files changed, 35 insertions(+), 7 deletions(-) diff --git a/object_database/web/devtools/cells_panel.css b/object_database/web/devtools/cells_panel.css index 490650b5..546b6370 100644 --- a/object_database/web/devtools/cells_panel.css +++ b/object_database/web/devtools/cells_panel.css @@ -7,6 +7,7 @@ body { display: flex; flex-direction: row; margin: 0px; + background-color: black; } div#main { @@ -26,10 +27,27 @@ div#cell-info { text-align: center; font-family: Roboto; font-size: 20px; + color: white; + border-left: 1px ridge rgb(135, 210, 173); +} + +div#cell-info span#node-args { + border-bottom: 1px solid rgb(135, 210, 173); + margin-top: 5px; + margin-bottom: 5px; + color: rgb(135, 210, 173); } div#cell-info > table { - border: 2px solid; + border: 1px dotted; +} + +div#cell-info > table td { + border: 1px solid rgb(135, 210, 173); +} + +div#cell-info > table input { + border: 1px solid rgb(135, 210, 173); } .node { diff --git a/object_database/web/devtools/js/cell_panel.js b/object_database/web/devtools/js/cell_panel.js index 8454fd01..2a7f15a9 100644 --- a/object_database/web/devtools/js/cell_panel.js +++ b/object_database/web/devtools/js/cell_panel.js @@ -61,6 +61,8 @@ const clearDisplay = () => { // display the tree const cellsTreeDisplay = (cells) => { clearDisplay(); + const info = document.getElementById("cell-info"); + info.textContent = "click on a node to see more info"; // init and run // NOTE: the tree class itself attaches the // svg element to #main @@ -127,6 +129,11 @@ const updateInfoPanel = (node) => { infoSpan.innerText = info; infoPanel.append(infoSpan); + // args/props section + const span = document.createElement('span'); + span.textContent = "Cell Arguments"; + span.setAttribute("id", "node-args"); + infoPanel.append(span); } @@ -135,11 +142,13 @@ const createPropsTable = (propsDict) => { // header const thead = document.createElement('thead'); const tr = document.createElement('tr'); - const th = document.createElement('table'); + const thName = document.createElement('th'); + const thVal = document.createElement('th'); thead.append(tr); - tr.append(th); - th.textContent = "Node Arguments"; - th.setAttribute("colspan", 2); + tr.append(thName); + tr.append(thVal); + thName.textContent = "Name"; + thVal.textContent = "Val"; table.append(thead); // body const tbody = document.createElement('tbody'); @@ -147,9 +156,10 @@ const createPropsTable = (propsDict) => { Object.keys(propsDict).forEach((key) => { const tr = document.createElement('tr'); const tdKey = document.createElement('td'); - const tdValue = document.createElement('td'); + const tdValue = document.createElement('input'); + tdValue.setAttribute("type", "text"); tdKey.textContent = key; - tdValue.textContent = propsDict[key]; + tdValue.setAttribute("placeholder", propsDict[key]); tr.append(tdKey); tr.append(tdValue); tbody.append(tr); From 57bfd371a75d701a03fd0f5345b7dc20573de251 Mon Sep 17 00:00:00 2001 From: dkrasner Date: Thu, 3 Aug 2023 15:00:29 +0200 Subject: [PATCH 7/9] adding propChange event / message in devtools adding handling in CellHandler to listent to propChange --- .../web/content/src/CellHandler.js | 7 +++++- object_database/web/devtools/js/cell_panel.js | 23 +++++++++++++++++-- .../web/devtools/js/inspect_window_utils.js | 16 +++++++++++++ 3 files changed, 43 insertions(+), 3 deletions(-) diff --git a/object_database/web/content/src/CellHandler.js b/object_database/web/content/src/CellHandler.js index 7cd4d695..f3bcd95a 100644 --- a/object_database/web/content/src/CellHandler.js +++ b/object_database/web/content/src/CellHandler.js @@ -533,7 +533,12 @@ class CellHandler { data: dataToSend } this.sendMessageToDevtools(msg); - + } else if (event.data.request == "propChange") { + const nodeId = event.data.nodeId; + const cell = this.activeCells[nodeId]; + const data = cell.props; + data[event.data.name] = event.data.value; + this.updateCell(identity, {}, data) } } } diff --git a/object_database/web/devtools/js/cell_panel.js b/object_database/web/devtools/js/cell_panel.js index 2a7f15a9..e212376c 100644 --- a/object_database/web/devtools/js/cell_panel.js +++ b/object_database/web/devtools/js/cell_panel.js @@ -137,7 +137,9 @@ const updateInfoPanel = (node) => { } -const createPropsTable = (propsDict) => { +const createPropsTable = (msg) => { + const propsDict = msg.data; + const id = msg.nodeId; const table = document.createElement('table'); // header const thead = document.createElement('thead'); @@ -155,8 +157,10 @@ const createPropsTable = (propsDict) => { table.append(tbody); Object.keys(propsDict).forEach((key) => { const tr = document.createElement('tr'); + tr.setAttribute("data-nodeId", id); const tdKey = document.createElement('td'); const tdValue = document.createElement('input'); + tdValue.addEventListener('keydown', handlePropChange); tdValue.setAttribute("type", "text"); tdKey.textContent = key; tdValue.setAttribute("placeholder", propsDict[key]); @@ -168,6 +172,21 @@ const createPropsTable = (propsDict) => { return table; } +const handlePropChange = (event) => { + console.log("changing prop val", event.key); + if (event.shiftKey && event.key == "Enter") { + window.sendMessageToBackground({ + action: "notifyCS", + event: "propChange", + nodeId: event.target.parentElement.getAttribute("data-nodeId"), + details: { + "name": event.target.parentElement.firstChild.textContent, + "value": event.target.value + } + }) + } +} + // 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 @@ -176,7 +195,7 @@ const handleInfoFromBackground = (msg) => { console.log("message from backgound", msg) const infoPanel = document.getElementById("cell-info"); if (Object.keys(msg.data).length) { - const table = createPropsTable(msg.data); + const table = createPropsTable(msg); infoPanel.append(table); } else { const span = document.createElement('span'); diff --git a/object_database/web/devtools/js/inspect_window_utils.js b/object_database/web/devtools/js/inspect_window_utils.js index 9471c582..75493ca2 100644 --- a/object_database/web/devtools/js/inspect_window_utils.js +++ b/object_database/web/devtools/js/inspect_window_utils.js @@ -18,7 +18,11 @@ const handleBackgroundMessage = (msg) => { case "click": onClick(msg.nodeId); + + case "propChange": + onPropChange(msg.nodeId, msg.details.name, msg.details.value); } + } // Helpers @@ -64,3 +68,15 @@ const onClick = (id) => { }; window.postMessage(msg); } + +const onPropChange = (id, name, value) => { + // get the source code for the cell and send over the devtools + const msg = { + type: "cells_devtools_CS", + request: "propChange", + nodeId: id, + name: name, + value: value + }; + window.postMessage(msg); +} From e5a5ace83578f9297f77453f1c95a128d244e16c Mon Sep 17 00:00:00 2001 From: dkrasner Date: Thu, 3 Aug 2023 13:19:15 +0000 Subject: [PATCH 8/9] adding primiting cell not refresh --- object_database/web/content/src/CellHandler.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/object_database/web/content/src/CellHandler.js b/object_database/web/content/src/CellHandler.js index f3bcd95a..fde29eba 100644 --- a/object_database/web/content/src/CellHandler.js +++ b/object_database/web/content/src/CellHandler.js @@ -538,7 +538,8 @@ class CellHandler { const cell = this.activeCells[nodeId]; const data = cell.props; data[event.data.name] = event.data.value; - this.updateCell(identity, {}, data) + this.updateCell(nodeId, {}, data); + cell.rebuildDomElement(); } } } From 066dd8a8d9f3913c02452ef641abf19bb1c78e3d Mon Sep 17 00:00:00 2001 From: dkrasner Date: Thu, 3 Aug 2023 15:26:09 +0200 Subject: [PATCH 9/9] updating namedChildren --- object_database/web/content/src/CellHandler.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/object_database/web/content/src/CellHandler.js b/object_database/web/content/src/CellHandler.js index fde29eba..9fe7a236 100644 --- a/object_database/web/content/src/CellHandler.js +++ b/object_database/web/content/src/CellHandler.js @@ -538,8 +538,8 @@ class CellHandler { const cell = this.activeCells[nodeId]; const data = cell.props; data[event.data.name] = event.data.value; - this.updateCell(nodeId, {}, data); - cell.rebuildDomElement(); + this.updateCell(nodeId, cell.namedChildren, data); + cell.rebuildDomElement(); } } }