@@ -747,6 +747,14 @@ html_header = """
const triangleUp = String.fromCodePoint(32, 9652);
const triangleDown = String.fromCodePoint(32, 9662);
var lastColumnName = false;
+const styleElement = document.createElement('style');
+document.head.insertAdjacentElement("afterend", styleElement);
+const styleSheet = styleElement.sheet;
+const collapseRule = ".collapse{ height: 200px; overflow: hidden scroll;}"
+const buttonRule = ".see-more{ display: block;}"
+
+styleSheet.insertRule(collapseRule);
+styleSheet.insertRule(buttonRule);
function sortGrid(sortLabel){
let i = 0;
@@ -759,7 +767,6 @@ function sortGrid(sortLabel){
lastStyle.disable = true;
lastStyle.remove();
};
- const styleElement = document.createElement('style');
styleElement.id = "sort-css";
document.head.appendChild(styleElement);
const styleSheet = styleElement.sheet;
@@ -809,16 +816,37 @@ function sortGrid(sortLabel){
let rule = "." + listing[0] + " { grid-row: " + i + "; }";
styleSheet.insertRule(rule);
});
+ styleSheet.insertRule(collapseRule);
+ styleSheet.insertRule(buttonRule);
+};
+
+function expandField(fieldId){
+ const field = document.getElementById(fieldId);
+ const fieldText = field.firstElementChild.innerText;
+ const fieldTotal = fieldText.split(' ')[2];
+
+ if (fieldText == "see all " + fieldTotal + triangleDown){
+ field.firstElementChild.innerText = "see less " + fieldTotal + triangleUp;
+ field.style.height = "auto";
+ } else {
+ field.firstElementChild.innerText = "see all " + fieldTotal + triangleDown;
+ field.style.height = "200px";
+ }
};
</script>
<style>
-.label {
+.see-more{
+ display: none;
+}
+
+.label, .see-more {
position: sticky;
top: 1px;
}
.label{
+ z-index: 1;
background: white;
padding: 10px 2px 10px 2px;
}
@@ -1029,6 +1057,8 @@ def dump_html_pkg(f, pkg):
data_field_id = f'cves__{pkg_css_class}'
div_class = ["centered cves data"]
div_class.append(f'_{pkg_css_class}')
+ if len(pkg.cves) > 10:
+ div_class.append("collapse")
if pkg.is_status_ok("cve"):
div_class.append("cve-ok")
elif pkg.is_status_error("cve"):
@@ -1038,6 +1068,10 @@ def dump_html_pkg(f, pkg):
else:
div_class.append("cve-unknown")
f.write(f' <div id=\"{data_field_id}\" class=\"{" ".join(div_class)}\">\n')
+ if len(pkg.cves) > 10:
+ cve_total = len(pkg.cves) + 1
+ f.write(f' <div onclick=\"expandField(\'{data_field_id}\')\" \
+ class=\"see-more centered cve_ignored\">see all ({cve_total}) ▾</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))
Sometimes a package can have a lot of CVEs. Rather than have the CVE cell make a really tall row (that means you have to scroll a bunch) this collapses the CVE cell to a fixed size scrollable element with a sticky button that lets you expand and collapse it. If Javascript is enabled: A stylesheet is generated and appended before content rendering, amending the cells style to have a fixed height and overflow. Also, the expand/contract button is unhidden. This means the CVE cells are rendered in a collapsed state instead of being rendered in an expanded state and then slamming shut. This avoids a "flash" and *helps* (vertically at least) manage CLS (cumulative layout shift). see: https://web.dev/cls/ If Javascript is disabled: The cells stay fully open and the expand/contract button stays hidden. Signed-off-by: Sen Hastings <sen@phobosdpl.com> --- support/scripts/pkg-stats | 38 ++++++++++++++++++++++++++++++++++++-- 1 file changed, 36 insertions(+), 2 deletions(-)