3 files changed, 46 insertions, 2 deletions
diff --git a/html/display_panel/content/display-panel.html b/html/display_panel/content/display-panel.html
index 0e4df97..5b9f99f 100644
--- a/html/display_panel/content/display-panel.html
+++ b/html/display_panel/content/display-panel.html
@@ -73,7 +73,10 @@
           </p>
           <ul>
             <li id="li-template">
-                <a class="script-url" href="#"></a>:
+                <button class="toggle-source show" title="Show code inline">Show</button>
+                <button class="toggle-source hide" title="Hide code inline">Hide</button>
+                <a class="script-url" href="#" target="librejs_viewsource"></a>:
+                <pre class="source"></pre>
                 <p class="reason"></p>
                 <div class="buttons">
                   <button class="whitelist">Whitelist</button>
@@ -81,6 +84,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..83c3a6b 100644
--- a/html/display_panel/content/main_panel.js
+++ b/html/display_panel/content/main_panel.js
@@ -55,6 +55,19 @@ liTemplate.remove();
 
 document.querySelector("#info").addEventListener("click", e => {
 	let button = e.target;
+  if (button.tagName === "A") {
+    setTimeout(close, 100);
+    return;
+  }
+  if (button.matches(".toggle-source")) {
+    let parent = button.parentNode;
+    if (!parent.querySelector(".source").textContent) {
+      parent.querySelector("a").click();
+    } else {
+      parent.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 +124,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 +132,11 @@ function createList(data, group){
 	 a.href = scriptId.split("(")[0];
    if (scriptId.startsWith("view-source:")) {
      a.target ="LibreJS-ViewSource";
+     let source = scriptId.match(/\n([^]*)/);
+     if (source)  {
+       li.querySelector(".source").textContent = source[1];
+       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..502323f 100644
--- a/html/display_panel/content/panel-styles.css
+++ b/html/display_panel/content/panel-styles.css
@@ -109,6 +109,28 @@ button:disabled {
   color: #888 !important;
 }
 
+button.toggle-source {
+  color: #004;
+  margin-right: .5em;
+  width: 4em;
+  overflow: hide;
+}
+
+pre.source {
+  display: none;
+  background: white;
+  border: 1px solid #444;
+  padding: .5em;
+  overflow: auto;
+  max-height: 8em;
+  white-space: pre-wrap;
+}
+
+button.hide { display: none  }
+.visible > button.show { display: none !important}
+.visible > pre.source { display: block }
+.visible > button.hide { display: initial }
+
 span.accepted, span.blocked {
     color:#008e00;
     font-size:145%;