From b8a5fcfa0c70700acaed2567122cdf2a7de6b63a Mon Sep 17 00:00:00 2001
From: vdeturckheim <vlad2t@hotmail.com>
Date: Fri, 8 Feb 2019 15:03:39 +0100
Subject: [PATCH] startup

---
 lib/CD.js        |  1 +
 lib/panel.dom.js | 25 ++++++++++++++++++++++---
 lib/panel.js.js  |  8 +++++---
 lib/util.js      |  2 +-
 panel.html       |  2 +-
 5 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/lib/CD.js b/lib/CD.js
index 550b0c9..8ce36df 100644
--- a/lib/CD.js
+++ b/lib/CD.js
@@ -16,6 +16,7 @@ const ChromeDebug = {
         resolveNode: (nodeId) => sendCommand('DOM.resolveNode', { nodeId }),
         hideHighlight: () => sendCommand('DOM.hideHighlight'),
         focus: (nodeId) => sendCommand('DOM.focus', { nodeId }),
+        describeNode: (nodeId) => sendCommand('DOM.describeNode', { nodeId })
     },
     DOMDebugger: {
         getEventListeners: (objectId) => sendCommand('DOMDebugger.getEventListeners', { objectId })
diff --git a/lib/panel.dom.js b/lib/panel.dom.js
index e64b780..d0dfd5c 100644
--- a/lib/panel.dom.js
+++ b/lib/panel.dom.js
@@ -23,15 +23,34 @@ async function renderNodeDetails (nodeId, objectId, listeners) {
 
     const raw = document.createElement('div');
     raw.setAttribute('class', 'col-12');
-
     main.appendChild(raw);
-    raw.innerText = JSON.stringify({ nodeId, objectId, listeners }, nodeId, 2);
+
+    for (const list of listeners) {
+        const { scriptSource } = await ChromeDebug.Debugger.getScriptSource(list.scriptId);
+        const scriptData = (await ChromeDebug.SPAudit.getScripts()).get(list.scriptId);
+        const div = createElement('div');
+        const p = createElement('p');
+        p.innerText = 'Event: ' + list.type;
+        const pre = createElement('pre');
+        div.appendChild(pre);
+        const code = createElement('code', { 'class': 'language-js' });
+        pre.appendChild(code);
+        code.innerText = scriptSource;
+        Prism.highlightElement(pre);
+        raw.appendChild(pre);
+    }
+
+
+    // main.appendChild(raw);
+    // raw.innerText = JSON.stringify({ nodeId, objectId, listeners }, nodeId, 2);
 
     return main;
 }
 
 async function renderNode(nodeId, objectId, listeners) {
 
+    const { node } = await ChromeDebug.DOM.describeNode(nodeId);
+
     const a = document.createElement('a');
     document.getElementById('list-tab').appendChild(a);
     a.setAttribute('class', 'list-group-item list-group-item-action');
@@ -40,7 +59,7 @@ async function renderNode(nodeId, objectId, listeners) {
     a.setAttribute('href', '#' + 'tab-' + nodeId);
     a.setAttribute('role', 'tab');
     a.setAttribute('aria-controls', nodeId);
-    a.innerText = objectId;
+    a.innerText = node.localName + ' ' + nodeId;
 
     const div = document.createElement('div');
     document.getElementById('nav-tabContent').appendChild(div);
diff --git a/lib/panel.js.js b/lib/panel.js.js
index 6309ec9..04ee98a 100644
--- a/lib/panel.js.js
+++ b/lib/panel.js.js
@@ -36,7 +36,6 @@ const displayScript = function (scriptSource, scriptData, highlightLines) {
         cardTitle.appendChild(span);
     }
 
-
     const content = createElement('div', { class: 'collapse', id: toggleId, 'aria-labelledby': toggleId, 'data-parent': '#accordionJS' });
     card.appendChild(content);
     const body = createElement('div', { class: 'card-body' });
@@ -48,6 +47,7 @@ const displayScript = function (scriptSource, scriptData, highlightLines) {
     pre.appendChild(code);
     code.innerText = scriptSource;
     main.appendChild(card);
+    Prism.highlightElement(pre);
 };
 
 
@@ -68,9 +68,11 @@ async function scanJS() {
                 highlights.push(meta.start.line);
             }
         });
-        displayScript(scriptSource, scriptData, highlights);
+        if (highlights.length > 0) {
+            displayScript(scriptSource, scriptData, highlights);
+        }
     }
-    Prism.highlightAll();
+    // Prism.highlightAll();
 }
 document.getElementById('scanJS')
     .addEventListener('click', scanJS);
diff --git a/lib/util.js b/lib/util.js
index 24a68cc..0b49adf 100644
--- a/lib/util.js
+++ b/lib/util.js
@@ -14,7 +14,7 @@ const cleanup = function (node) {
     }
 };
 
-const createElement = function (tag, attributes) {
+const createElement = function (tag, attributes = {}) {
 
     const element = document.createElement(tag);
     Object.keys(attributes)
diff --git a/panel.html b/panel.html
index 4850ce2..3489d78 100644
--- a/panel.html
+++ b/panel.html
@@ -21,7 +21,7 @@
       <a class="nav-link" id="pills-profile-tabTODO" data-toggle="pill" href="#JS" role="tab" aria-controls="pills-profile" aria-selected="false">JS</a>
     </li>
     <li class="nav-item">
-      <a class="nav-link" id="pills-profile-tabTODO2" data-toggle="pill" href="#analysisMode" role="tab" aria-controls="pills-profile" aria-selected="false">Analysis mode</a>
+      <a class="nav-link disabled" id="pills-profile-tabTODO2" data-toggle="pill" href="#analysisMode" role="tab" aria-controls="pills-profile" aria-selected="false">Analysis mode (coming soon)</a>
     </li>
   </ul>
   <div class="tab-content" id="pills-tabContent">