Deduplicate inline scripts and provide widgets to show them in main UI.

4 files changed, 57 insertions, 20 deletions

diff --git a/html/display_panel/content/display-panel.html b/html/display_panel/content/display-panel.html
index 0e4df97..5eccf60 100644
--- a/html/display_panel/content/display-panel.html
+++ b/html/display_panel/content/display-panel.html
@@ -73,7 +73,8 @@
           </p>
           <ul>
             <li id="li-template">
-                <a class="script-url" href="#"></a>:
+                <button class="toggle-source" title="Show/Hide code inline">👓</button><a class="script-url" href="#"></a>:
+                <pre class="source">No code</pre>
                 <p class="reason"></p>
                 <div class="buttons">
                   <button class="whitelist">Whitelist</button>
@@ -81,6 +82,7 @@
                   <button class="forget">Forget</button>
                   <button class="forget" name="*">Forget <span class="domain"></span></button>
                 </div>
+
               </li>
           </ul>
         </div>
diff --git a/html/display_panel/content/main_panel.js b/html/display_panel/content/main_panel.js
index 7934fee..60eae55 100644
--- a/html/display_panel/content/main_panel.js
+++ b/html/display_panel/content/main_panel.js
@@ -55,6 +55,10 @@ liTemplate.remove();
 
 document.querySelector("#info").addEventListener("click", e => {
 	let button = e.target;
+  if (button.matches(".toggle-source")) {
+    let sourceContainer = button.parentNode.querySelector(".source").classList.toggle("visible");
+    return;
+  }
 	if (!button.matches(".buttons > button")) return;
 	let li = button.closest("li");
 	let entry = li && li._scriptEntry || [currentReport.url, "Page's site"];
@@ -111,7 +115,7 @@ function createList(data, group){
    container.classList.add("empty");
  }
  // generate list
- let viewSourceToHuman = /^view-source:(.*)#line(\d+)\(([^)]*)\).*/;
+ let viewSourceToHuman = /^view-source:(.*)#line(\d+)\(([^)]*)\)[^]*/;
  for (let entry of entries) {
    let [scriptId, reason] = entry;
 	 let li = liTemplate.cloneNode(true);
@@ -119,6 +123,11 @@ function createList(data, group){
 	 a.href = scriptId.split("(")[0];
    if (scriptId.startsWith("view-source:")) {
      a.target ="LibreJS-ViewSource";
+     let source = scriptId.split("\n")[1];
+     if (source)  {
+       li.querySelector(".source").textContent = decodeURIComponent(source);
+       li.querySelector(".toggle-source").style.display = "inline";
+     }
      scriptId = scriptId.replace(viewSourceToHuman, "$3 at line $2 of $1");
    }
    a.textContent = scriptId;
diff --git a/html/display_panel/content/panel-styles.css b/html/display_panel/content/panel-styles.css
index d5c3528..1bacc01 100644
--- a/html/display_panel/content/panel-styles.css
+++ b/html/display_panel/content/panel-styles.css
@@ -109,6 +109,20 @@ button:disabled {
   color: #888 !important;
 }
 
+button.toggle-source {
+  display: none;
+}
+pre.source {
+  display: none;
+  background: white;
+  border: 1px solid #444;
+  padding: .5em;
+  overflow: auto;
+  max-height: 8em;
+  white-space: pre-wrap;
+}
+pre.source.visible { display: block }
+
 span.accepted, span.blocked {
     color:#008e00;
     font-size:145%;
diff --git a/main_background.js b/main_background.js
index 65ffe60..324c68e 100644
--- a/main_background.js
+++ b/main_background.js
@@ -1064,6 +1064,7 @@ async function editHtml(html, documentUrl, tabId, frameId, whitelisted){
 		// Do not process inline scripts
 		scripts = [];
 	} else {
+		let dejaVu = new Map(); // deduplication map & edited script cache
 		let modified = false;
 		// Deal with intrinsic events
 		let intrinsecindex = 0;
@@ -1071,21 +1072,27 @@ async function editHtml(html, documentUrl, tabId, frameId, whitelisted){
 		for (let element of html_doc.all) {
 			let line = -1;
 			for (let attr of element.attributes) {
-				if (attr.name.startsWith("on") || (attr.name === "href" && attr.value.toLowerCase().startsWith("javascript:"))){
+				let {name, value} = attr;
+				value = value.trim();
+				if (name.startsWith("on") || (name === "href" && value.toLowerCase().startsWith("javascript:"))){
 					intrinsecindex++;
 					if (line === -1) {
 						line = findLine(intrinsicFinder);
 					}
 					try {
-						let url = `view-source:${documentUrl}#line${line}(<${element.tagName} ${attr.name}>)(${intrinsicIndex})`;
-						let edited = await get_script(attr.value, url, tabId, whitelist.contains(url));
-							if (edited) {
-								let value = edited;
-								if (value !== attr.value) {
-									modified = true;
-									attr.value = value;
-								}
-							}
+						let key = `<${element.tagName} ${name}="${value}">`;
+						let edited;
+						if (dejaVu.has(key)) {
+							edited = dejaVu.get(key);
+						} else {
+							let url = `view-source:${documentUrl}#line${line}(<${element.tagName} ${name}>)\n${encodeURIComponent(value.trim())}`;
+							edited = await get_script(value, url, tabId, whitelist.contains(documentUrl));
+							dejaVu.set(key, edited);
+						}
+						if (edited && edited !== value) {
+							modified = true;
+							attr.value = edited;
+						}
 					} catch (e) {
 						console.error(e);
 					}
@@ -1099,14 +1106,19 @@ async function editHtml(html, documentUrl, tabId, frameId, whitelisted){
 			let script = scripts[i];
 			let line = findLine(scriptFinder);
 			if (!script.src && !(script.type && script.type !== "text/javascript")) {
-				let source = script.textContent;
-				let url = `view-source:${documentUrl}#line${line}(<SCRIPT>)(${i})`;
-				let edited = await get_script(source, url, tabId, whitelisted, i);
-				if (edited) {
-					let edited_source = edited[0];
-					let unedited_source = source.trim();
-					if (edited_source.trim() !== unedited_source) {
-						script.textContent = edited_source;
+				let source = script.textContent.trim();
+				let editedSource;
+				if (dejaVu.has(source)) {
+					editedSource = dejaVu.get(source);
+				} else {
+					let url = `view-source:${documentUrl}#line${line}(<SCRIPT>)\n${encodeURIComponent(source)}`;
+					let edited = await get_script(source, url, tabId, whitelisted, i);
+					editedSource = edited && edited[0].trim();
+					dejaVu.set(url, editedSource);
+				}
+				if (editedSource) {
+					if (source !== editedSource) {
+						script.textContent = editedSource;
 						modified = modifiedInline = true;
 					}
 				}