Skip to content

Commit

Permalink
refactor: clean up HTML js script so its more consistent (#1591)
Browse files Browse the repository at this point in the history 
While looking through some other stuff, I noticed my IDE had some
recommendations about the JavaScript, and I spotted a few other
refactors I think are worth landing, so I did a bit of a cleanup.

At a high level the changes are about being consistent and improving
readability - I've purposely tried to keep this light since ultimately
the amount of work being done is very small and the whole file gets
included in the binary so e.g. I've not refactored the order that we set
some variables even though they could be made technically faster.

Overall, this reduces the size of the file by a couple of hundred bytes
which is technically a win😅
  • Loading branch information
@G-Rath
G-Rath authored Feb 9, 2025
1 parent c100a26 commit 95b1980
Showing 1 changed file with 45 additions and 61 deletions.
106 changes: 45 additions & 61 deletions internal/output/html/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
const selectedTypeFilterValue = new Set();
selectedTypeFilterValue.add("all");
const selectedTypeFilterValue = new Set(["all"]);
let selectedLayer = "all";

function quickFilterByLayer(DiffID, layerCommand) {
Expand All @@ -10,7 +9,7 @@ function quickFilterByLayer(DiffID, layerCommand) {
}

function showBaseImageLayer(imageID) {
const detailElementID = "base-image-details-" + imageID;
const detailElementID = `base-image-details-${imageID}`;
const detailsElement = document.getElementById(detailElementID);

const icon = document.querySelector(
Expand All @@ -23,7 +22,7 @@ function showBaseImageLayer(imageID) {

function showPackageDetails(detailsId) {
const detailsElement = document.getElementById(
"table-tr-" + detailsId + "-details"
`table-tr-${detailsId}-details`
);
const icon = document.querySelector(`#table-tr-${detailsId} .material-icons`); // Select the icon within the row

Expand Down Expand Up @@ -53,9 +52,9 @@ function openVulnInNewTab(inputString) {

// Create a new tab button
const newTabButton = document.createElement("div");
newTabButton.id = inputString + "-button";
newTabButton.id = `${inputString}-button`;
newTabButton.className = "tab-switch-button";
newTabButton.onclick = function () {
newTabButton.onclick = () => {
openTab(inputString);
};

Expand All @@ -76,7 +75,7 @@ function openVulnInNewTab(inputString) {
closeIcon.className = "material-icons";
closeIcon.textContent = "close";
// Add the onclick function to the close icon
closeIcon.onclick = function (event) {
closeIcon.onclick = event => {
event.stopPropagation(); // Prevent the click from opening the tab
closeVulnTab(inputString);
};
Expand All @@ -94,7 +93,7 @@ function openVulnInNewTab(inputString) {

function closeVulnTab(inputString) {
const tabToRemove = document.getElementById(inputString);
const buttonToRemove = document.getElementById(inputString + "-button");
const buttonToRemove = document.getElementById(`${inputString}-button`);
const tabs = document.getElementById("tabs");
const tabSwitches = document.getElementById("tab-switch");

Expand Down Expand Up @@ -129,19 +128,19 @@ function hideAllFilterOptions() {
const containers = document.getElementsByClassName("filter-option-container");

for (const container of containers) {
container.classList.toggle("hide-block", true);
container.classList.add("hide-block");
}
}

function toggleFilter(input) {
const targetID = input + "-filter-option-container";
let optionContainer = document.getElementById(targetID);
const targetID = `${input}-filter-option-container`;
const optionContainer = document.getElementById(targetID);
const containers = document.getElementsByClassName("filter-option-container");
for (const loopContainer of containers) {
if (loopContainer.id === targetID) {
optionContainer.classList.toggle("hide-block");
} else {
loopContainer.classList.toggle("hide-block", true);
loopContainer.classList.add("hide-block");
}
}
}
Expand All @@ -159,36 +158,28 @@ function showAndHideParentSections() {
let sourceHasVisibleRows = false;

packageRows.forEach(packageRow => {
let packageDetails = document.getElementById(
packageRow.id + "-details"
const packageDetails = document.getElementById(
`${packageRow.id}-details`
);
const vulnRows = packageDetails.querySelectorAll(".vuln-tr");
let packageHasVisibleRows = false;
vulnRows.forEach(vulnRow => {
if (!vulnRow.classList.contains("hide-block")) {
packageHasVisibleRows = true;
return;
}
});
if (packageHasVisibleRows) {
if (vulnRows.some(row => !row.classList.contains("hide-block"))) {
sourceHasVisibleRows = true;
packageRow.classList.toggle("hide-block", false);
packageRow.classList.remove("hide-block");
return;
} else {
packageRow.classList.toggle("hide-block", true);
packageDetails.classList.toggle("hide-block", true);
const icon = document.querySelector(
`#${packageRow.id} .material-icons`
);
icon.classList.remove("expanded"); // Rotate back to 0 degrees
}

packageRow.classList.add("hide-block");
packageDetails.classList.add("hide-block");
const icon = document.querySelector(
`#${packageRow.id} .material-icons`
);
icon.classList.remove("expanded"); // Rotate back to 0 degrees
});

sourceContainer.classList.toggle("hide-block", !sourceHasVisibleRows);

if (sourceHasVisibleRows) {
ecosystemHasVisibleSources = true;
return;
}
});

Expand All @@ -202,7 +193,7 @@ function showAndHideParentSections() {
function showAllVulns() {
const vulnRows = document.getElementsByClassName("vuln-tr");
for (const row of vulnRows) {
let isUncalled = row.classList.contains("uncalled-tr");
const isUncalled = row.classList.contains("uncalled-tr");
row.classList.toggle("hide-block", isUncalled);
}

Expand All @@ -218,15 +209,11 @@ function applyFilters(selectedTypeFilterValue, selectedLayerFilterValue) {
}

function applyTypeFilter(selectedValue) {
updateTypeFilterText(selectedValue);
let selectedAll = selectedValue.has("all");
let selectedProject = selectedValue.has("project");
let selectedOS = selectedValue.has("os");
let selectedUncalled = selectedValue.has("uncalled");
if (selectedAll) {
selectedProject = true;
selectedOS = true;
}
updateTypeFilterText();
const selectedAll = selectedValue.has("all");
const selectedProject = selectedAll || selectedValue.has("project");
const selectedOS = selectedAll || selectedValue.has("os");
const selectedUncalled = selectedValue.has("uncalled");

const ecosystemElements = document.querySelectorAll(".ecosystem-container");

Expand All @@ -241,7 +228,7 @@ function applyTypeFilter(selectedValue) {
(ecosystemElement.classList.contains("project-type") &&
!selectedProject)
) {
vuln.classList.toggle("hide-block", true);
vuln.classList.add("hide-block");
}
});
});
Expand All @@ -252,16 +239,16 @@ function applyLayerFilter(selectedLayerID) {
tableRows.forEach(row => {
const rowLayerID = row.getAttribute("data-layer");
if (selectedLayerID !== "all" && rowLayerID !== selectedLayerID) {
const packageDetails = document.getElementById(row.id + "-details");
const packageDetails = document.getElementById(`${row.id}-details`);
const vulnElements = packageDetails.querySelectorAll(".vuln-tr");
vulnElements.forEach(vuln => {
vuln.classList.toggle("hide-block", true);
vuln.classList.add("hide-block");
});
}
});
}

function updateTypeFilterText(_selectedValue) {
function updateTypeFilterText() {
const typeSelected = document.getElementById("type-filter-selected");
const selectedVulnCount = document.getElementById("selected-count");

Expand All @@ -276,19 +263,19 @@ function updateTypeFilterText(_selectedValue) {
let selectedCount = 0;

if (projectTypeCheckbox && projectTypeCheckbox.checked) {
selectedText += (selectedText ? ", " : "") + "Project";
selectedText += `${selectedText ? ", " : ""}Project`;
const projectTypeVulnCount = projectTypeCheckbox.getAttribute(
"data-type-project-count"
);
selectedCount += parseInt(projectTypeVulnCount, 10);
}
if (osTypeCheckbox && osTypeCheckbox.checked) {
selectedText += (selectedText ? ", " : "") + "OS";
selectedText += `${selectedText ? ", " : ""}OS`;
const osTypeVulnCount = osTypeCheckbox.getAttribute("data-type-os-count");
selectedCount += parseInt(osTypeVulnCount, 10);
}
if (uncalledTypeCheckbox && uncalledTypeCheckbox.checked) {
selectedText += (selectedText ? ", " : "") + "Unimportant";
selectedText += `${selectedText ? ", " : ""}Unimportant`;
const uncalledTypeVulnCount = uncalledTypeCheckbox.getAttribute(
"data-type-uncalled-count"
);
Expand All @@ -312,10 +299,7 @@ function resetFilterText() {
const layerSelected = document.getElementById("layer-filter-selected");
const allLayerCheckedBox = document.getElementById("all-layer-checkbox");
if (layerSelected) {
layerSelected.textContent =
"All layers (" +
allLayerCheckedBox.getAttribute("data-layer-all-count") +
")";
layerSelected.textContent = `All layers (${allLayerCheckedBox.getAttribute("data-layer-all-count")})`;
}

const typeSelected = document.getElementById("type-filter-selected");
Expand Down Expand Up @@ -346,7 +330,7 @@ function resetFilterText() {

function resetSearchText() {
const vulnSearchInput = document.getElementById("vuln-search");
if (vulnSearchInput.value != "") {
if (vulnSearchInput.value !== "") {
vulnSearchInput.value = "";
showAllVulns();
}
Expand All @@ -370,7 +354,7 @@ function resetTypeCheckbox() {
}
}

document.addEventListener("DOMContentLoaded", function () {
document.addEventListener("DOMContentLoaded", () => {
resetFilterText();
showAndHideParentSections();

Expand All @@ -379,7 +363,7 @@ document.addEventListener("DOMContentLoaded", function () {
"type-filter-option-container"
);

typeFilterOptions.addEventListener("change", function () {
typeFilterOptions.addEventListener("change", event => {
resetSearchText();
const changedElement = event.target;
const allTypesCheckbox = document.getElementById("all-type-checkbox");
Expand All @@ -388,8 +372,8 @@ document.addEventListener("DOMContentLoaded", function () {
const uncalledCheckbox = document.getElementById("uncalled-type-checkbox"); // OS vulnerabilities
selectedTypeFilterValue.clear();

if (allTypesCheckbox != null) {
if (changedElement == allTypesCheckbox) {
if (allTypesCheckbox !== null) {
if (changedElement === allTypesCheckbox) {
osCheckbox.checked = allTypesCheckbox.checked;
projectCheckbox.checked = allTypesCheckbox.checked;
if (allTypesCheckbox.checked === true) {
Expand Down Expand Up @@ -450,7 +434,7 @@ document.addEventListener("DOMContentLoaded", function () {

// Search bar
const vulnSearchInput = document.getElementById("vuln-search");
vulnSearchInput.addEventListener("keyup", event => {
vulnSearchInput.addEventListener("keyup", () => {
resetFilterText();
selectedTypeFilterValue.clear();
selectedTypeFilterValue.add("all");
Expand All @@ -475,12 +459,12 @@ document.addEventListener("DOMContentLoaded", function () {

// Implement tooltips
document.querySelectorAll(".tooltip").forEach(elem => {
elem.addEventListener("mouseover", event => {
elem.addEventListener("mouseover", () => {
const rect = elem.getBoundingClientRect();
const tooltipElem = elem.querySelector(".tooltiptext");

tooltipElem.style.left = rect.left + "px";
tooltipElem.style.top = rect.top + "px";
tooltipElem.style.left = `${rect.left}px`;
tooltipElem.style.top = `${rect.top}px`;
});
});

Expand Down

0 comments on commit 95b1980

Please sign in to comment.