From 16b5f87fbc99a48bc5015c7626cb312760b05412 Mon Sep 17 00:00:00 2001
From: qu1ck <anlutsenko@gmail.com>
Date: Sat, 24 Jul 2021 14:18:53 -0700
Subject: [PATCH] Change "Darken" -> "Mark" and tweak colors

---
 InteractiveHtmlBom/web/ibom.css  | 12 +++++-----
 InteractiveHtmlBom/web/ibom.html |  4 ++--
 InteractiveHtmlBom/web/ibom.js   | 40 ++++++++++++++++----------------
 InteractiveHtmlBom/web/render.js | 10 ++++----
 InteractiveHtmlBom/web/util.js   |  6 ++---
 5 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/InteractiveHtmlBom/web/ibom.css b/InteractiveHtmlBom/web/ibom.css
index 32c69847..084a8c09 100644
--- a/InteractiveHtmlBom/web/ibom.css
+++ b/InteractiveHtmlBom/web/ibom.css
@@ -4,11 +4,11 @@
   --pad-hole-color: #CCCCCC;
   --pad-color-highlight: #D04040;
   --pad-color-highlight-both: #D0D040;
-  --pad-color-highlight-darkened: #40D040;
+  --pad-color-highlight-marked: #67cc67;
   --pin1-outline-color: #ffb629;
-  --pin1-outline-color-highlight: #b4ff03;
-  --pin1-outline-color-highlight-both: #b4ff03;
-  --pin1-outline-color-highlight-darkened: #b4ff03;
+  --pin1-outline-color-highlight: #ffb629;
+  --pin1-outline-color-highlight-both: #fcbb39;
+  --pin1-outline-color-highlight-marked: #fdbe41;
   --silkscreen-edge-color: #aa4;
   --silkscreen-polygon-color: #4aa;
   --silkscreen-text-color: #4aa;
@@ -236,11 +236,11 @@ canvas:active {
 }
 
 .bom tr.checked {
-  color: #aaa;
+  color: #1cb53d;
 }
 
 .dark .bom tr.checked {
-  color: #666;
+  color: #2cce54;
 }
 
 .bom tr {
diff --git a/InteractiveHtmlBom/web/ibom.html b/InteractiveHtmlBom/web/ibom.html
index f3c85b0f..94bee1ba 100644
--- a/InteractiveHtmlBom/web/ibom.html
+++ b/InteractiveHtmlBom/web/ibom.html
@@ -121,8 +121,8 @@
                    oninput="setBomCheckboxes(this.value)">
           </label>
           <label class="menu-label">
-            <div style="margin-left: 5px">Darken when checked</div>
-            <div id="darkenWhenCheckedContainer"></div>
+            <div style="margin-left: 5px">Mark when checked</div>
+            <div id="markWhenCheckedContainer"></div>
           </label>
           <label class="menu-label">
             <span class="shameless-plug">
diff --git a/InteractiveHtmlBom/web/ibom.js b/InteractiveHtmlBom/web/ibom.js
index 556b92be..b26bea96 100644
--- a/InteractiveHtmlBom/web/ibom.js
+++ b/InteractiveHtmlBom/web/ibom.js
@@ -10,7 +10,7 @@ var currentHighlightedRowId;
 var highlightHandlers = [];
 var footprintIndexToHandler = {};
 var netsToHandler = {};
-var darkenedFootprints = new Set();
+var markedFootprints = new Set();
 var highlightedFootprints = [];
 var highlightedNet = null;
 var lastClicked;
@@ -184,7 +184,7 @@ function setBomCheckboxState(checkbox, element, references) {
 function createCheckboxChangeHandler(checkbox, references, row) {
   return function() {
     refsSet = getStoredCheckboxRefs(checkbox);
-    var darkenWhenChecked = settings.darkenWhenChecked == checkbox;
+    var markWhenChecked = settings.markWhenChecked == checkbox;
     eventArgs = {
       checkbox: checkbox,
       refs: references,
@@ -194,10 +194,10 @@ function createCheckboxChangeHandler(checkbox, references, row) {
       for (var ref of references) {
         refsSet.add(ref[1]);
       }
-      if (darkenWhenChecked) {
+      if (markWhenChecked) {
         row.classList.add("checked");
         for(var ref of references) {
-          darkenedFootprints.add(ref[1]);
+          markedFootprints.add(ref[1]);
         }
         drawHighlights();
       }
@@ -207,10 +207,10 @@ function createCheckboxChangeHandler(checkbox, references, row) {
       for (var ref of references) {
         refsSet.delete(ref[1]);
       }
-      if (darkenWhenChecked) {
+      if (markWhenChecked) {
         row.classList.remove("checked");
         for(var ref of references) {
-          darkenedFootprints.delete(ref[1]);
+          markedFootprints.delete(ref[1]);
         }
         drawHighlights();
       }
@@ -627,7 +627,7 @@ function populateBomBody(placeholderColumn = null, placeHolderElements = null) {
               input.type = "checkbox";
               input.onchange = createCheckboxChangeHandler(checkbox, references, tr);
               setBomCheckboxState(checkbox, input, references);
-              if (input.checked && settings.darkenWhenChecked == checkbox) {
+              if (input.checked && settings.markWhenChecked == checkbox) {
                 tr.classList.add("checked");
               }
               td.appendChild(input);
@@ -1006,16 +1006,16 @@ function setBomCheckboxes(value) {
   writeStorage("bomCheckboxes", value);
   settings.checkboxes = value.split(",").map((e) => e.trim()).filter((e) => e);
   prepCheckboxes();
-  populateDarkenWhenCheckedOptions();
-  setDarkenWhenChecked(settings.darkenWhenChecked);
+  populateMarkWhenCheckedOptions();
+  setMarkWhenChecked(settings.markWhenChecked);
 }
 
-function setDarkenWhenChecked(value) {
-  writeStorage("darkenWhenChecked", value);
-  settings.darkenWhenChecked = value;
-  darkenedFootprints.clear();
+function setMarkWhenChecked(value) {
+  writeStorage("markWhenChecked", value);
+  settings.markWhenChecked = value;
+  markedFootprints.clear();
   for(var ref of (value ? getStoredCheckboxRefs(value) : [])) {
-    darkenedFootprints.add(ref);
+    markedFootprints.add(ref);
   }
   populateBomTable();
   drawHighlights();
@@ -1050,8 +1050,8 @@ function prepCheckboxes() {
   }
 }
 
-function populateDarkenWhenCheckedOptions() {
-  var container = document.getElementById("darkenWhenCheckedContainer");
+function populateMarkWhenCheckedOptions() {
+  var container = document.getElementById("markWhenCheckedContainer");
 
   if (settings.checkboxes.length == 0) {
     container.parentElement.style.display = "none";
@@ -1062,21 +1062,21 @@ function populateDarkenWhenCheckedOptions() {
   container.parentElement.style.display = "inline-block";
 
   function createOption(name, displayName) {
-    var id = "darkenWhenChecked-" + name;
+    var id = "markWhenChecked-" + name;
 
     var div = document.createElement("div");
     div.classList.add("radio-container");
 
     var input = document.createElement("input");
     input.type = "radio";
-    input.name = "darkenWhenChecked";
+    input.name = "markWhenChecked";
     input.value = name;
     input.id = id;
-    input.onchange = () => setDarkenWhenChecked(name);
+    input.onchange = () => setMarkWhenChecked(name);
     div.appendChild(input);
 
     // Preserve the selected element when the checkboxes change
-    if (name == settings.darkenWhenChecked) {
+    if (name == settings.markWhenChecked) {
       input.checked = true;
     }
 
diff --git a/InteractiveHtmlBom/web/render.js b/InteractiveHtmlBom/web/render.js
index e43b48d8..d8af456d 100644
--- a/InteractiveHtmlBom/web/render.js
+++ b/InteractiveHtmlBom/web/render.js
@@ -359,17 +359,17 @@ function drawFootprints(canvas, layer, scalefactor, highlight) {
     var mod = pcbdata.footprints[i];
     var outline = settings.renderDnpOutline && pcbdata.bom.skipped.includes(i);
     var h = highlightedFootprints.includes(i);
-    var d = darkenedFootprints.has(i);
+    var d = markedFootprints.has(i);
     if (highlight) {
       if(h && d) {
         colors.pad = style.getPropertyValue('--pad-color-highlight-both');
-        colors.outline = style.getPropertyValue('--pin1-outline-highlight-both');
+        colors.outline = style.getPropertyValue('--pin1-outline-color-highlight-both');
       } else if (h) {
         colors.pad = style.getPropertyValue('--pad-color-highlight');
         colors.outline = style.getPropertyValue('--pin1-outline-color-highlight');
       } else if (d) {
-        colors.pad = style.getPropertyValue('--pad-color-highlight-darkened');
-        colors.outline = style.getPropertyValue('--pin1-outline-color-highlight-darkened');
+        colors.pad = style.getPropertyValue('--pad-color-highlight-marked');
+        colors.outline = style.getPropertyValue('--pin1-outline-color-highlight-marked');
       }
     }
     if( h || d || !highlight) {
@@ -483,7 +483,7 @@ function drawHighlightsOnLayer(canvasdict, clear = true) {
   if (clear) {
     clearCanvas(canvasdict.highlight);
   }
-  if (darkenedFootprints.size > 0 || highlightedFootprints.length > 0) {
+  if (markedFootprints.size > 0 || highlightedFootprints.length > 0) {
     drawFootprints(canvasdict.highlight, canvasdict.layer,
       canvasdict.transform.s * canvasdict.transform.zoom, true);
   }
diff --git a/InteractiveHtmlBom/web/util.js b/InteractiveHtmlBom/web/util.js
index ee43b035..b6e8f46c 100644
--- a/InteractiveHtmlBom/web/util.js
+++ b/InteractiveHtmlBom/web/util.js
@@ -386,7 +386,7 @@ function overwriteSettings(newSettings) {
   for (var checkbox of settings.checkboxes) {
     writeStorage("checkbox_" + checkbox, settings.checkboxStoredRefs[checkbox]);
   }
-  writeStorage("darkenWhenChecked", settings.darkenWhenChecked);
+  writeStorage("markWhenChecked", settings.markWhenChecked);
   padsVisible(settings.renderPads);
   document.getElementById("padsCheckbox").checked = settings.renderPads;
   fabricationVisible(settings.renderFabrication);
@@ -486,8 +486,8 @@ function initDefaults() {
   settings.checkboxes = bomCheckboxes.split(",").filter((e) => e);
   document.getElementById("bomCheckboxes").value = bomCheckboxes;
 
-  settings.darkenWhenChecked = readStorage("darkenWhenChecked") || "";
-  populateDarkenWhenCheckedOptions();
+  settings.markWhenChecked = readStorage("markWhenChecked") || "";
+  populateMarkWhenCheckedOptions();
 
   function initBooleanSetting(storageString, def, elementId, func) {
     var b = readStorage(storageString);