feat: add a preview of the incriminated code during mouse over (#52)

* feat: add a preview of the incriminated code during mouse over

* feat: add cache & update css

* feat: add overflow to the tooltip

* fix: base the code line instead of all code

* fix: clean code

* feat: try a new tooltip position

* feat: add a single tooltip, and trigger it with an onClick

* feat: add an inspect cell

i18n/english.js

@@ -95,7 +95,8 @@ module.exports = {
                 type: "type",
                 file: "file",
                 errorMsg: "incrimined value",
-                position: "position"
+                position: "position",
+                inspect: "inspect"
             }
         },
         searchbar_placeholder: "Search",

i18n/french.js

@@ -95,7 +95,8 @@ module.exports = {
                 type: "type",
                 file: "fichier",
                 errorMsg: "valeur incriminée",
-                position: "position"
+                position: "position",
+                inspect: "inspecter"
             }
         },
         searchbar_placeholder: "Recherche",

public/css/popup.css

@@ -59,6 +59,29 @@
             overflow-y: auto;
         }
 
+.modal .tooltip {
+    visibility: hidden;
+    position: absolute;
+    z-index: 1;
+    min-width: 120px;
+    max-width: 600px;
+    max-height: 300px;
+    overflow-y: auto;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%);
+    background: #212121;
+    border: 1px solid #424242;
+    color: #E1F5FE;
+    padding: 10px;
+    border-radius: 4px;
+    text-align: left;
+    font-size: 14px;
+    font-family: "mononoki";
+    letter-spacing: 0.5px;
+    word-wrap: break-word;
+}
+
 .flags-legend-tags > .platine-button-skin {
     height: 30px;
     justify-content: start;

public/css/reset.css

@@ -138,3 +138,6 @@ table {
         font-weight: bold;
         font-family: "Roboto";
     }
+    table tr td.inspect {
+        cursor: pointer;
+    }

public/js/popup.js

@@ -1,6 +1,8 @@
 import * as utils from "./utils.js";
 import List from "list.js";
 
+const loadingMessage = "Loading ...";
+
 function licenseModal(clone, options) {
     const { licenses, selectedNode } = options;
     if (licenses === "unkown license") {
@@ -26,22 +28,64 @@ function locationToString(location) {
     return `[${start}] - [${end}]`;
 }
 
+function getLineFromFile(code, location) {
+    const [[startLine]] = location;
+    const lines = code.split('\n');
+
+    return lines[startLine - 1];
+}
+
+async function fetchCodeLine(event, url, location, cache, lineId) {
+    const target = document.getElementById('tooltip');
+    target.style.visibility = 'visible';
+
+    if (cache.has(lineId)) {
+        target.innerText = cache.get(lineId);
+        event.stopPropagation();
+        return;
+    }
+
+    target.innerText = loadingMessage;
+    const code = await fetch(url).then((response) => response.text());
+
+    target.innerText = code.length ? getLineFromFile(code, location): "Line not found ...";
+    cache.set(lineId, target.innerText);
+    event.stopPropagation();
+}
+
+function handleOutsideTooltipClick({ target }) {
+    const tooltip = document.getElementById('tooltip');
+
+    if (!tooltip) {
+        return;
+    }
+
+    if ((tooltip.innerHTML && tooltip.innerHTML !== loadingMessage) && !tooltip.contains(target) && tooltip.style.visibility === "visible") {
+        tooltip.style.visibility = "hidden";
+        tooltip.innerHTML = "";
+    }
+}
+
 function warningModal(clone, options) {
     const { name, version, npmHomePageURL, homepage, warnings } = options;
+    const cache = new Map();
 
     const openLink = (link) => {
         return () => window.open(link).focus();
     }
     const unpkgRootURL = `https://unpkg.com/${name}@${version}/`;
-    const homePageBtn = clone.getElementById("warning-link-homepage")
+    const homePageBtn = clone.getElementById("warning-link-homepage");
     homePageBtn.addEventListener("click", openLink(homepage));
     homePageBtn.querySelector("span").textContent = homepage;
     clone.getElementById("warning-link-npm").addEventListener("click", openLink(npmHomePageURL));
     clone.getElementById("warning-link-unpkg").addEventListener("click", openLink(unpkgRootURL));
+    document.addEventListener("click", handleOutsideTooltipClick);
 
     const tbody = clone.querySelector("#warnings-table tbody");
     for (const { kind, file, value = null, location } of warnings) {
         const line = tbody.insertRow(0);
+        const lineId = Math.random().toString(36).slice(2);
+        const unpkgFile = `${unpkgRootURL}${file}`;
 
         const kindCell = line.insertCell(0)
         kindCell.classList.add("type");
@@ -58,21 +102,29 @@ function warningModal(clone, options) {
         const errorCell = line.insertCell(2);
         errorCell.classList.add("highlight");
         errorCell.classList.add("msg");
-        const positionCell = line.insertCell(3);
-        positionCell.classList.add("position");
         if (value !== null) {
             errorCell.classList.add("clickable");
             errorCell.appendChild(document.createTextNode(value));
             errorCell.addEventListener("click", () => utils.copyToClipboard(value));
         }
 
+        const positionCell = line.insertCell(3);
+        positionCell.classList.add("position");
         if (kind === "encoded-literal") {
             const text = location.map((loc) => locationToString(loc)).join(" // ");
             positionCell.appendChild(document.createTextNode(text));
         }
         else {
             positionCell.appendChild(document.createTextNode(locationToString(location)));
         }
+
+        const inspectCell = line.insertCell(4);
+        inspectCell.innerHTML = "🔬";
+        inspectCell.classList.add("inspect");
+        if (!file.includes(".min") && kind !== "short-identifiers" && kind !== "obfuscated-code") {
+            const currLocation = kind === "encoded-literal" ? location[0] : location;
+            inspectCell.addEventListener("click", (event) => fetchCodeLine(event, unpkgFile, currLocation, cache, lineId));
+        }
     }
 
     setTimeout(() => {
@@ -81,9 +133,9 @@ function warningModal(clone, options) {
 }
 
 export function openLicenseModal(options = {}) {
-    return () => window.toggleModal("popup-license", (clone) => licenseModal(clone, options))
+    return () => window.toggleModal("popup-license", (clone) => licenseModal(clone, options));
 }
 
 export function openWarningsModal(options = {}) {
-    return () => window.toggleModal("popup-warning", (clone) => warningModal(clone, options))
+    return () => window.toggleModal("popup-warning", (clone) => warningModal(clone, options));
 }

views/index.html

@@ -83,6 +83,7 @@
 </section>
 
 <div class="modal">
+    <div class="tooltip" id="tooltip"></div>
     <div class="modal-content dark-box-skin">
         <span class="close-button">&times;</span>
         <div class="infobox"></div>
@@ -230,6 +231,7 @@ <h1>[[=z.token('popups.warnings.title')]]</h1>
                     <th class="sort" data-sort="file">[[=z.token('popups.warnings.file')]]</th>
                     <th class="sort" data-sort="msg">[[=z.token('popups.warnings.errorMsg')]]</th>
                     <th class="sort" data-sort="position">[[=z.token('popups.warnings.position')]]</th>
+                    <th class="sort" data-sort="position">[[=z.token('popups.warnings.inspect')]]</th>
                 </tr>
             </thead>
             <tbody class="list"></tbody>