Cosmetic changes to the inline code viewer toggle button.

3 files changed, 24 insertions, 5 deletions

diff --git a/html/display_panel/content/display-panel.html b/html/display_panel/content/display-panel.html
index 5eccf60..5b9f99f 100644
--- a/html/display_panel/content/display-panel.html
+++ b/html/display_panel/content/display-panel.html
@@ -73,8 +73,10 @@
           </p>
           <ul>
             <li id="li-template">
-                <button class="toggle-source" title="Show/Hide code inline">👓</button><a class="script-url" href="#"></a>:
-                <pre class="source">No code</pre>
+                <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>
diff --git a/html/display_panel/content/main_panel.js b/html/display_panel/content/main_panel.js
index 60eae55..022be8c 100644
--- a/html/display_panel/content/main_panel.js
+++ b/html/display_panel/content/main_panel.js
@@ -55,8 +55,17 @@ 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 sourceContainer = button.parentNode.querySelector(".source").classList.toggle("visible");
+    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;
diff --git a/html/display_panel/content/panel-styles.css b/html/display_panel/content/panel-styles.css
index 1bacc01..502323f 100644
--- a/html/display_panel/content/panel-styles.css
+++ b/html/display_panel/content/panel-styles.css
@@ -110,8 +110,12 @@ button:disabled {
 }
 
 button.toggle-source {
-  display: none;
+  color: #004;
+  margin-right: .5em;
+  width: 4em;
+  overflow: hide;
 }
+
 pre.source {
   display: none;
   background: white;
@@ -121,7 +125,11 @@ pre.source {
   max-height: 8em;
   white-space: pre-wrap;
 }
-pre.source.visible { display: block }
+
+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;