startup

sqreen · Feb 8, 2019 · b8a5fcf · b8a5fcf
1 parent 6ac5baa
commit b8a5fcf
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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">