startup

assets/prism/prism.css

@@ -0,0 +1,191 @@
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=clike+javascript&plugins=line-highlight */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: black;
+	background: none;
+	text-shadow: 0 1px white;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+@media print {
+	code[class*="language-"],
+	pre[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: slategray;
+}
+
+.token.punctuation {
+	color: #999;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #9a6e3a;
+	background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #07a;
+}
+
+.token.function,
+.token.class-name {
+	color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #e90;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+pre[data-line] {
+	position: relative;
+	padding: 1em 0 1em 3em;
+}
+
+.line-highlight {
+	position: absolute;
+	left: 0;
+	right: 0;
+	padding: inherit 0;
+	margin-top: 1em; /* Same as .prism’s padding-top */
+
+	background: hsla(24, 20%, 50%,.08);
+	background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
+
+	pointer-events: none;
+
+	line-height: inherit;
+	white-space: pre;
+}
+
+	.line-highlight:before,
+	.line-highlight[data-end]:after {
+		content: attr(data-start);
+		position: absolute;
+		top: .4em;
+		left: .6em;
+		min-width: 1em;
+		padding: 0 .5em;
+		background-color: hsla(24, 20%, 50%,.4);
+		color: hsl(24, 20%, 95%);
+		font: bold 65%/1.5 sans-serif;
+		text-align: center;
+		vertical-align: .3em;
+		border-radius: 999px;
+		text-shadow: none;
+		box-shadow: 0 1px white;
+	}
+
+	.line-highlight[data-end]:after {
+		content: attr(data-end);
+		top: auto;
+		bottom: .4em;
+	}
+
+.line-numbers .line-highlight:before,
+.line-numbers .line-highlight:after {
+	content: none;
+}
+

background.js

@@ -1 +1,2 @@
 // Do we really need it?
+

devtools.js

@@ -1,20 +1,29 @@
 'use strict';
 // Create a new panel
+
+const scripts = new Map();
+
 chrome.devtools.panels.create('SPAudit',
     null,
     'panel.html',
-    function (panel) {
+    async function (panel) {
 
         const cdt = new ChromeDebuggerDriver();
 
         panel.onShown.addListener(async (panelWindow) => {
 
+            cdt.on('Debugger.scriptParsed', (item) => scripts.set(item.scriptId, item));
             await cdt.start();
+            cdt.sendCommand('Debugger.enable', {});
 
             panelWindow.document.addEventListener(InstructionEvent.TYPE, async (instruction) => {
 
                 const { data: { command, params } } = instruction;
 
+                if (command === 'SPAudit.getScripts') {
+                    instruction.resolve(scripts);
+                }
+
                 cdt.sendCommand(command, params)
                     .then(instruction.resolve)
                     .catch(instruction.reject);
@@ -23,6 +32,7 @@ chrome.devtools.panels.create('SPAudit',
 
         panel.onHidden.addListener(async () => {
 
-            await cdt.stop()
+            await cdt.stop();
+            scripts.clear();
         });
     });

lib/CD.js

@@ -14,7 +14,8 @@ const ChromeDebug = {
         highlightNode: (nodeId) => sendCommand('DOM.highlightNode', { nodeId, highlightConfig: {contentColor: { r: 100, g: 50, b: 50 }}}), // TODO: better
         querySelectorAll: (nodeId = 1, selector = '*') => sendCommand('DOM.querySelectorAll', { nodeId, selector }),
         resolveNode: (nodeId) => sendCommand('DOM.resolveNode', { nodeId }),
-        hideHighlight: () => sendCommand('DOM.hideHighlight')
+        hideHighlight: () => sendCommand('DOM.hideHighlight'),
+        focus: (nodeId) => sendCommand('DOM.focus', { nodeId }),
     },
     DOMDebugger: {
         getEventListeners: (objectId) => sendCommand('DOMDebugger.getEventListeners', { objectId })
@@ -28,6 +29,9 @@ const ChromeDebug = {
     Debugger: {
         getScriptSource: (scriptId) => sendCommand('Debugger.getScriptSource', { scriptId }),
         enable: () => sendCommand('Debugger.enable')
+    },
+    SPAudit: {
+        getScripts: () => sendCommand('SPAudit.getScripts')
     }
 };
 

lib/CDD.js

@@ -2,8 +2,48 @@ const ChromeDebuggerDriver  = class {
 
     constructor() {
 
+        const self = this;
         this.debuggee = { tabId: chrome.devtools.inspectedWindow.tabId };
         this.enabled = false;
+        chrome.debugger.onEvent.addListener(function (source, method, params) {
+
+            if (source.tabId !== self.debuggee.tabId) {
+                return;
+            }
+            self.dispatch(method, params);
+        });
+
+        this.listeners = new Map();
+    }
+
+    on(eventName, cb) {
+
+        let line = this.listeners.get(eventName);
+        if (!line) {
+            line = new Set();
+            this.listeners.set(eventName, line);
+        }
+        line.add(cb);
+    }
+
+    off(eventName, cb) {
+
+        const line = this.listeners.get(eventName);
+        if (!line) {
+            return;
+        }
+        line.delete(cb);
+    }
+
+    dispatch(eventName, args) {
+
+        const line = this.listeners.get(eventName);
+        if (!line) {
+            return;
+        }
+        for (const cb of line) {
+            cb(args);
+        }
     }
 
     _lastError() {