[Buildroot] [PATCH v1 2/2] support/scripts/pkg-stats: optimize CSS selector usage

[Sen Hastings <sen@phobosdpl.com>]

Having lots of CSS selector declarations adds up, especially at 70k+
elements.

This reduces the number of CSS selectors printed in the markup
to the bare minimum, by using pseudo-classes and tag names as selectors.

example: https://sen-h.github.io/pkg-stats/9ad05210dcd9e4fb6b6a45be87c0fbb3e022085b.html

Signed-off-by: Sen Hastings <sen@phobosdpl.com>
---
v1->v2:
*   added link to example html
---
 support/scripts/pkg-stats | 132 ++++++++++++++++++++------------------
 1 file changed, 70 insertions(+), 62 deletions(-)

diff --git a/support/scripts/pkg-stats b/support/scripts/pkg-stats
index 39da5e5593..654b918911 100755
--- a/support/scripts/pkg-stats
+++ b/support/scripts/pkg-stats
@@ -845,7 +845,20 @@ function expandField(field){
 
 <style>
 
-.see-more{
+div {
+  text-align: center;
+  border: solid 1px gray;
+}
+#results-grid div{
+  text-align: left;
+}
+#package-grid div:nth-child(13n+1), #package-grid div:nth-child(13n+13)  {
+  text-align: left;
+}
+#package-grid div:nth-child(13){
+  text-align: center;
+}
+.see-more {
   display: none;
 }
 
@@ -859,6 +872,7 @@ function expandField(field){
   padding: 10px 2px 10px 2px;
 }
 #package-grid, #results-grid {
+  border: none;
   display: grid;
   grid-gap: 2px;
   grid-template-columns: 1fr repeat(12, min-content);
@@ -866,21 +880,15 @@ function expandField(field){
 #results-grid {
   grid-template-columns: 3fr 1fr;
 }
-.data {
-  border: solid 1px gray;
+.correct, .nopatches, .good_url, .version-good, .cpe-ok, .cve-ok {
+  background: #d2ffc4;
 }
-.centered {
-  text-align: center;
+.wrong, .lotsofpatches, .invalid_url, .version-needs-update, .cpe-nok, .cve-nok {
+  background: #ff9a69;
+}
+.somepatches, .missing_url, .version-unknown, .cpe-unknown, .cve-unknown {
+  background: #ffd870;
 }
- .correct, .nopatches, .good_url, .version-good, .cpe-ok, .cve-ok {
-   background: #d2ffc4;
- }
- .wrong, .lotsofpatches, .invalid_url, .version-needs-update, .cpe-nok, .cve-nok {
-   background: #ff9a69;
- }
- .somepatches, .missing_url, .version-unknown, .cpe-unknown, .cve-unknown {
-   background: #ffd870;
- }
  .cve_ignored, .version-error {
   background: #ccc;
  }
@@ -926,9 +934,9 @@ def boolean_str(b):
 
 
 def dump_html_pkg(f, pkg):
-    f.write(f'<div class=\"data\">{pkg.path}</div>\n')
+    f.write(f'<div>{pkg.path}</div>\n')
     # Patch count
-    div_class = ["centered data"]
+    div_class = []
     if pkg.patch_count == 0:
         div_class.append("nopatches")
     elif pkg.patch_count < 5:
@@ -939,7 +947,7 @@ def dump_html_pkg(f, pkg):
 
     # Infrastructure
     infra = infra_str(pkg.infras)
-    div_class = ["centered data"]
+    div_class = []
     if infra == "Unknown":
         div_class.append("wrong")
     else:
@@ -947,7 +955,7 @@ def dump_html_pkg(f, pkg):
     f.write(f'  <div class=\"{" ".join(div_class)}\">{infra_str(pkg.infras)}</div>\n')
 
     # License
-    div_class = ["centered data"]
+    div_class = []
     if pkg.is_status_ok('license'):
         div_class.append("correct")
     else:
@@ -955,7 +963,7 @@ def dump_html_pkg(f, pkg):
     f.write(f'  <div class=\"{" ".join(div_class)}\">{boolean_str(pkg.is_status_ok("license"))}</div>\n')
 
     # License files
-    div_class = ["centered data"]
+    div_class = []
     if pkg.is_status_ok('license-files'):
         div_class.append("correct")
     else:
@@ -963,7 +971,7 @@ def dump_html_pkg(f, pkg):
     f.write(f'  <div class=\"{" ".join(div_class)}\">{boolean_str(pkg.is_status_ok("license-files"))}</div>\n')
 
     # Hash
-    div_class = ["centered data"]
+    div_class = []
     if pkg.is_status_ok('hash'):
         div_class.append("correct")
     else:
@@ -975,10 +983,10 @@ def dump_html_pkg(f, pkg):
         current_version = pkg.current_version[:20] + "..."
     else:
         current_version = pkg.current_version
-    f.write(f'  <div>class=\"centered data\" {current_version}</div>\n')
+    f.write(f'  <div>{current_version}</div>\n')
 
     # Latest version
-    div_class = ["centered data"]
+    div_class = []
     if pkg.latest_version['status'] == RM_API_STATUS_ERROR:
         div_class.append("version-error")
     if pkg.latest_version['version'] is None:
@@ -1009,7 +1017,7 @@ def dump_html_pkg(f, pkg):
     f.write(f'  <div class=\"{" ".join(div_class)}\">{latest_version_text}</div>\n')
 
     # Warnings
-    div_class = ["centered data"]
+    div_class = []
     if pkg.warnings == 0:
         div_class.append("correct")
     else:
@@ -1017,7 +1025,7 @@ def dump_html_pkg(f, pkg):
     f.write(f'  <div class=\"{" ".join(div_class)}\">{pkg.warnings}</div>\n')
 
     # URL status
-    div_class = ["centered data"]
+    div_class = []
     url_str = pkg.status['url'][1]
     if pkg.status['url'][0] in ("error", "warning"):
         div_class.append("missing_url")
@@ -1030,7 +1038,7 @@ def dump_html_pkg(f, pkg):
     f.write(f'  <div class=\"{" ".join(div_class)}\">{url_str}</div>\n')
 
     # CVEs
-    div_class = ["centered data"]
+    div_class = []
     if len(pkg.cves) > 10:
         div_class.append("collapse")
     if pkg.is_status_ok("cve"):
@@ -1045,7 +1053,7 @@ def dump_html_pkg(f, pkg):
     if len(pkg.cves) > 10:
         cve_total = len(pkg.cves) + 1
         f.write(f' <div onclick=\"expandField(this.parentElement)\" \
-        class=\"see-more centered cve_ignored\">see all ({cve_total}) &#9662;</div>\n')
+        style=\"text-align: center;\" class=\"see-more cve_ignored\">see all ({cve_total}) &#9662;</div>\n')
     if pkg.is_status_error("cve"):
         for cve in pkg.cves:
             f.write("   <a href=\"https://security-tracker.debian.org/tracker/%s\">%s</a><br/>\n" % (cve, cve))
@@ -1058,16 +1066,16 @@ def dump_html_pkg(f, pkg):
     f.write("  </div>\n")
 
     # CVEs Ignored
-    div_class = ["centered data"]
     if pkg.ignored_cves:
-        div_class.append("cve_ignored")
-    f.write(f'  <div class=\"{" ".join(div_class)}\">\n')
+        f.write("  <div class=\"cve_ignored\">\n")
+    else:
+        f.write("  <div>\n")
     for ignored_cve in pkg.ignored_cves:
         f.write("    <a href=\"https://security-tracker.debian.org/tracker/%s\">%s</a><br/>\n" % (ignored_cve, ignored_cve))
     f.write("  </div>\n")
 
     # CPE ID
-    div_class = ["data"]
+    div_class = []
     if pkg.is_status_ok("cpe"):
         div_class.append("cpe-ok")
     elif pkg.is_status_error("cpe"):
@@ -1099,31 +1107,31 @@ def dump_html_all_pkgs(f, packages):
     f.write("""
 <div id=\"package-grid\">
 <div style="grid-column: 1;" onclick="sortGrid(this.id)" id=\"c1\"
-     class=\"data label\"><span>Package</span><span></span></div>
+     class=\"label\"><span>Package</span><span></span></div>
 <div style="grid-column: 2;" onclick="sortGrid(this.id)" id=\"c2\"
-     class=\"centered data label\"><span>Patch count</span><span></span></div>
+     class=\"label\"><span>Patch count</span><span></span></div>
 <div style="grid-column: 3;" onclick="sortGrid(this.id)" id=\"c3\"
-     class=\"centered data label\">Infrastructure<span></span></div>
+     class=\"label\">Infrastructure<span></span></div>
 <div style="grid-column: 4;" onclick="sortGrid(this.id)" id=\"c4\"
-     class=\"centered data label\"><span>License</span><span></span></div>
+     class=\"label\"><span>License</span><span></span></div>
 <div style="grid-column: 5;" onclick="sortGrid(this.id)" id=\"c5\"
-     class=\"centered data label\"><span>License files</span><span></span></div>
+     class=\"label\"><span>License files</span><span></span></div>
 <div style="grid-column: 6;" onclick="sortGrid(this.id)" id=\"c6\"
-     class=\"centered data label\"><span>Hash file</span><span></span></div>
+     class=\"label\"><span>Hash file</span><span></span></div>
 <div style="grid-column: 7;" onclick="sortGrid(this.id)" id=\"c7\"
-     class=\"centered data label\"><span>Current version</span><span></span></div>
+     class=\"label\"><span>Current version</span><span></span></div>
 <div style="grid-column: 8;" onclick="sortGrid(this.id)" id=\"c8\"
-     class=\"centered data label\"><span>Latest version</span><span></span></div>
+     class=\"label\"><span>Latest version</span><span></span></div>
 <div style="grid-column: 9;" onclick="sortGrid(this.id)" id=\"c9\"
-     class=\"centered data label\"><span>Warnings</span><span></span></div>
+     class=\"label\"><span>Warnings</span><span></span></div>
 <div style="grid-column: 10;" onclick="sortGrid(this.id)" id=\"c10\"
-     class=\"centered data label\"><span>Upstream URL</span><span></span></div>
+     class=\"label\"><span>Upstream URL</span><span></span></div>
 <div style="grid-column: 11;" onclick="sortGrid(this.id)" id=\"c11\"
-     class=\"centered data label\"><span>CVEs</span><span></span></div>
+     class=\"label\"><span>CVEs</span><span></span></div>
 <div style="grid-column: 12;" onclick="sortGrid(this.id)" id=\"c12\"
-     class=\"centered data label\"><span>CVEs Ignored</span><span></span></div>
+     class=\"label\"><span>CVEs Ignored</span><span></span></div>
 <div style="grid-column: 13;" onclick="sortGrid(this.id)" id=\"c13\"
-     class=\"data label\"><span>CPE ID</span><span></span></div>
+     class=\"label\"><span>CPE ID</span><span></span></div>
 """)
     for pkg in sorted(packages):
         dump_html_pkg(f, pkg)
@@ -1135,43 +1143,43 @@ def dump_html_stats(f, stats):
     f.write("<div class=\"data\" id=\"results-grid\">\n")
     infras = [infra[6:] for infra in stats.keys() if infra.startswith("infra-")]
     for infra in infras:
-        f.write(" <div class=\"data\">Packages using the <i>%s</i> infrastructure</div><div class=\"data\">%s</div>\n" %
+        f.write(" <div>Packages using the <i>%s</i> infrastructure</div><div>%s</div>\n" %
                 (infra, stats["infra-%s" % infra]))
-    f.write(" <div class=\"data\">Packages having license information</div><div class=\"data\">%s</div>\n" %
+    f.write(" <div>Packages having license information</div><div>%s</div>\n" %
             stats["license"])
-    f.write(" <div class=\"data\">Packages not having license information</div><div class=\"data\">%s</div>\n" %
+    f.write(" <div>Packages not having license information</div><div>%s</div>\n" %
             stats["no-license"])
-    f.write(" <div class=\"data\">Packages having license files information</div><div class=\"data\">%s</div>\n" %
+    f.write(" <div>Packages having license files information</div><div>%s</div>\n" %
             stats["license-files"])
-    f.write(" <div class=\"data\">Packages not having license files information</div><div class=\"data\">%s</div>\n" %
+    f.write(" <div>Packages not having license files information</div><div>%s</div>\n" %
             stats["no-license-files"])
-    f.write(" <div class=\"data\">Packages having a hash file</div><div class=\"data\">%s</div>\n" %
+    f.write(" <div>Packages having a hash file</div><div>%s</div>\n" %
             stats["hash"])
-    f.write(" <div class=\"data\">Packages not having a hash file</div><div class=\"data\">%s</div>\n" %
+    f.write(" <div>Packages not having a hash file</div><div>%s</div>\n" %
             stats["no-hash"])
-    f.write(" <div class=\"data\">Total number of patches</div><div class=\"data\">%s</div>\n" %
+    f.write(" <div>Total number of patches</div><div>%s</div>\n" %
             stats["patches"])
-    f.write("<div class=\"data\">Packages having a mapping on <i>release-monitoring.org</i></div><div class=\"data\">%s</div>\n" %
+    f.write("<div>Packages having a mapping on <i>release-monitoring.org</i></div><div>%s</div>\n" %
             stats["rmo-mapping"])
-    f.write("<div class=\"data\">Packages lacking a mapping on <i>release-monitoring.org</i></div><div class=\"data\">%s</div>\n" %
+    f.write("<div>Packages lacking a mapping on <i>release-monitoring.org</i></div><div>%s</div>\n" %
             stats["rmo-no-mapping"])
-    f.write("<div class=\"data\">Packages that are up-to-date</div><div class=\"data\">%s</div>\n" %
+    f.write("<div>Packages that are up-to-date</div><div>%s</div>\n" %
             stats["version-uptodate"])
-    f.write("<div class=\"data\">Packages that are not up-to-date</div><div class=\"data\">%s</div>\n" %
+    f.write("<div>Packages that are not up-to-date</div><div>%s</div>\n" %
             stats["version-not-uptodate"])
-    f.write("<div class=\"data\">Packages with no known upstream version</div><div class=\"data\">%s</div>\n" %
+    f.write("<div>Packages with no known upstream version</div><div>%s</div>\n" %
             stats["version-unknown"])
-    f.write("<div class=\"data\">Packages affected by CVEs</div><div class=\"data\">%s</div>\n" %
+    f.write("<div>Packages affected by CVEs</div><div>%s</div>\n" %
             stats["pkg-cves"])
-    f.write("<div class=\"data\">Total number of CVEs affecting all packages</div><div class=\"data\">%s</div>\n" %
+    f.write("<div>Total number of CVEs affecting all packages</div><div>%s</div>\n" %
             stats["total-cves"])
-    f.write("<div class=\"data\">Packages affected by unsure CVEs</div><div class=\"data\">%s</div>\n" %
+    f.write("<div>Packages affected by unsure CVEs</div><div>%s</div>\n" %
             stats["pkg-unsure-cves"])
-    f.write("<div class=\"data\">Total number of unsure CVEs affecting all packages</div><div class=\"data\">%s</div>\n" %
+    f.write("<div>Total number of unsure CVEs affecting all packages</div><div>%s</div>\n" %
             stats["total-unsure-cves"])
-    f.write("<div class=\"data\">Packages with CPE ID</div><div class=\"data\">%s</div>\n" %
+    f.write("<div>Packages with CPE ID</div><div>%s</div>\n" %
             stats["cpe-id"])
-    f.write("<div class=\"data\">Packages without CPE ID</div><div class=\"data\">%s</div>\n" %
+    f.write("<div>Packages without CPE ID</div><div>%s</div>\n" %
             stats["no-cpe-id"])
     f.write("</div>\n")
 
-- 
2.34.1

_______________________________________________
buildroot mailing list
buildroot@buildroot.org
https://lists.buildroot.org/mailman/listinfo/buildroot