refactor(scripts): migrate to lit

public/components/icon/icon.js

@@ -141,12 +141,41 @@ c0-20.25-0.75-88.25 31-88.25c5.25 0 31.25 21.25 65 21.25c11.5 0 22.5-2 33.25-5.7
 `,
   lock: html`
     <svg viewBox="0 0 1024 1024" aria-hidden="true">
-    <path fill="currentColor" fill="#000" d="M183.296 439.296h291.84v-110.592q0-60.416-43.008-103.424t-103.424
+    <path fill="currentColor"  d="M183.296 439.296h291.84v-110.592q0-60.416-43.008-103.424t-103.424
 -41.984-103.424 41.984-41.984 103.424v110.592zM658.432 493.568v329.728q0 22.528-16.384 37.888t-38.912
 16.384h-547.84q-23.552 0-38.912-16.384t-16.384-37.888v-329.728q0-22.528 16.384-38.912t38.912-15.36h17.408
 v-110.592q0-104.448 75.776-180.224t180.224-75.776 181.248 75.776 74.752 180.224v110.592h18.432q23.552 0
 38.912 15.36t16.384 38.912z"/>
 </svg>
+`,
+  eye: html`
+  <svg viewBox="0 0 1024 1024" aria-hidden="true">
+<path fill="currentColor" d="M0 512q6.144-50.176 65.536-112.64 80.896-81.92 180.224-132.096
+132.096-61.44 266.24-61.44 140.288 2.048 266.24 61.44 105.472 54.272 180.224 132.096
+65.536 74.752 65.536 112.64-6.144 50.176-65.536 111.616-80.896 81.92-180.224 132.096
+-132.096 62.464-266.24 62.464-140.288-2.048-266.24-62.464-105.472-54.272-180.224-132.096
+-65.536-73.728-65.536-111.616zM270.336 512q0 96.256 70.656 162.816t171.008 66.56 171.008-66.56
+70.656-162.816-70.656-162.816-171.008-67.584-171.008 67.584-70.656 162.816zM358.4 510.976q0-61.44
+45.056-104.448t108.544-43.008 108.544 43.008 45.056 104.448-45.056 104.448-108.544 44.032
+-108.544-44.032-45.056-104.448z"/>
+  </svg>
+`,
+  "eye-off": html`
+<svg viewBox="0 0 1024 1024" aria-hidden="true">
+<path fill="currentColor" d="M0 536.576q6.144-50.176 65.536-112.64 80.896-81.92 180.224-131.072
+132.096-62.464 266.24-62.464 29.696 0 60.416 2.048l75.776-132.096q10.24-16.384 23.552-18.432
+4.096 0 8.192 2.048l52.224 32.768q17.408 7.168 2.048 33.792l-58.368 103.424-48.128 80.896
+-41.984 73.728-147.456 256-41.984 73.728-48.128 81.92-58.368 102.4q-15.36 25.6-31.744 15.36
+l-54.272-31.744q-15.36-8.192 0-33.792l50.176-88.064-8.192-4.096q-105.472-54.272-180.224-132.096
+-65.536-73.728-65.536-111.616zM270.336 536.576q0 75.776 48.128 136.192l49.152-86.016
+q-9.216-24.576-9.216-50.176 0-52.224 34.816-93.184t87.04-51.2l50.176-86.016h-18.432
+q-100.352 0-171.008 67.584t-70.656 162.816zM451.584 838.656l41.984-72.704h18.432
+q100.352 0 171.008-66.56t70.656-162.816q0-75.776-48.128-136.192l64.512-111.616q2.048 2.048
+4.096 3.072t4.096 1.024q105.472 53.248 180.224 131.072 65.536 74.752 65.536 112.64
+-6.144 50.176-65.536 111.616-80.896 81.92-180.224 132.096-132.096 62.464-266.24 62.464
+-25.6 0-60.416-4.096zM543.744 679.936l112.64-193.536q9.216 25.6 9.216 50.176 0 52.224
+-34.816 92.16t-87.04 51.2z"/>
+</svg>
 `
 };
 

public/components/package/package.css

@@ -1,5 +1,4 @@
 @import url("./header/header.css");
-@import url("./pannels/scripts/scripts.css");
 @import url("./pannels/overview/overview.css");
 @import url("./pannels/scorecard/scorecard.css");
 @import url("./pannels/warnings/warnings.css");

public/components/package/package.js

@@ -109,6 +109,14 @@ export class PackageInfo {
     vulns.id = "pan-vulnerabilities";
     vulns.classList.add("package-container", "hidden");
     panVulns.parentElement.replaceChild(vulns, panVulns);
+
+    const panDependencies = packageHTMLElement.querySelector("#pan-dependencies");
+    const scripts = document.createElement("package-scripts");
+    scripts.package = this;
+    scripts.isHidden = this.dependencyVersion.hidden;
+    scripts.id = "pan-dependencies";
+    scripts.classList.add("package-container", "hidden");
+    panDependencies.parentElement.replaceChild(scripts, panDependencies);
   }
 
   /**
@@ -126,6 +134,20 @@ export class PackageInfo {
     }
   }
 
+  /**
+   * @param {!HTMLTemplateElement} clone
+   */
+  setupSignal(clone) {
+    const { flags } = this.dependencyVersion;
+
+    if (flags.includes("hasScript")) {
+      this.addNavigationSignal(
+        clone.getElementById("dependencies-nav-menu"),
+        "!"
+      );
+    }
+  }
+
   /**
    * @param {!string} name
    * @returns {void}
@@ -170,7 +192,7 @@ export class PackageInfo {
 
     new Pannels.Overview(this).generate(clone);
     new Pannels.Warnings(this).generate(clone);
-    new Pannels.Scripts(this).generate(clone);
+    this.setupSignal(clone);
     this.addNavigationSignal(clone.getElementById("vulnerabilities-nav-menu"),
       this.dependency.vulnerabilities.length);
     if (window.settings.config.disableExternalRequests === false) {