whimboo · AnsahMohammad · Mar 1, 2025 · Mar 1, 2025 · Mar 1, 2025 · Mar 1, 2025
diff --git a/src/content/background.js b/src/content/background.js
@@ -1,21 +1,18 @@
 const NS_PER_MS = 1000 * 1000;
 
-// TODO: read from settings
 const INTERVAL_PROCESS_UPDATE = 5; // seconds
 
-// TODO: read from settings
 const MAX_BUFFER_ENTRIES = 60 / INTERVAL_PROCESS_UPDATE * 5; // 5 minutes
 
 class TaskManager extends Object {
   constructor() {
     super();
 
-    // TODO: Set enabled status based on global setting and selected sidebar
-    // process pane.
     this.includeThreads = true;
     this.includeWindows = true;
 
     this.interval_process_update = INTERVAL_PROCESS_UPDATE;
+    this.max_buffer_entries = MAX_BUFFER_ENTRIES;
 
     this.lastSnapshotTime;
     this.processesBuffer = [];
@@ -49,6 +46,10 @@ class TaskManager extends Object {
     return this.platformInfo.os;
   }
 
+  updateMaxBufferEntries() {
+    this.max_buffer_entries = 300 / this.interval_process_update;
+  }
+
   async createProcessInfoAlarm() {
     if (browser.alarms.get("get-process-info")) {
       browser.alarms.clear("get-process-info");
@@ -70,7 +71,19 @@ class TaskManager extends Object {
     switch (request.name) {
       case "set-update-interval":
         this.interval_process_update = request.interval;
+        this.updateMaxBufferEntries();
         this.createProcessInfoAlarm();
+        break;
+
+      case "set-include-threads":
+        this.includeThreads = !this.includeThreads;
+        await this.refreshProcesses();
+        break;
+
+      case "set-include-windows":
+        this.includeWindows = !this.includeWindows;
+        await this.refreshProcesses();
+        break;
     }
   }
 
@@ -132,7 +145,7 @@ class TaskManager extends Object {
     });
 
     this.processesBuffer.push(mappedProcesses);
-    if (this.processesBuffer.length > MAX_BUFFER_ENTRIES) {
+    if (this.processesBuffer.length > this.max_buffer_entries) {
       this.processesBuffer.splice(0, 1);
     }
   }

diff --git a/src/content/options.html b/src/content/options.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="options.css" />
+</head>
+
+<body>
+    <div class="options-container">
+    <div class="option-row">
+      <label>Update Interval (s):</label>
+      <input id="update-interval-slider" type="range" min="1" max="5" value="5"/>
+      <input id="update-interval-value" type="text" readonly/>
+    </div>
+
+    <div class="option-row">
+      <label class="checkbox-label">
+        Transfer Pages (Windows)
+        <input id="transfer-pages" type="checkbox" checked/>
+      </label>
+    </div>
+
+    <div class="option-row">
+      <label class="checkbox-label">
+        Transfer Threads
+        <input id="transfer-threads" type="checkbox" checked/>
+      </label>
+    </div>
+  </div>
+  <script src="options.js"></script>
+</body>
+
+</html>
diff --git a/src/content/options.js b/src/content/options.js
@@ -0,0 +1,34 @@
+const updateIntervalSlider = document.getElementById("update-interval-slider");
+const updateIntervalValue = document.getElementById("update-interval-value");
+const transferThreadsCheckbox = document.getElementById("transfer-threads");
+const transferWindowsCheckbox = document.getElementById("transfer-pages");
+
+function updateInterval(ev) {
+  browser.runtime.sendMessage({
+    name: "set-update-interval",
+    interval: parseInt(ev.target.value),
+  })
+}
+
+function updateThreadsTransfer() {
+  browser.runtime.sendMessage({
+    name: "set-include-threads"
+  });
+  console.log("updateThreadsTransfer");
+}
+
+function updateWindowsTransfer() {
+  browser.runtime.sendMessage({
+    name: "set-include-windows"
+  });
+  console.log("updateWindowsTransfer");
+}
+
+updateIntervalSlider.addEventListener("change", updateInterval);
+updateIntervalSlider.addEventListener("input", ev => {
+  updateIntervalValue.value = ev.target.value;
+});
+updateIntervalValue.value = updateIntervalSlider.value;
+
+transferThreadsCheckbox.addEventListener("change", updateThreadsTransfer);
+transferWindowsCheckbox.addEventListener("change", updateWindowsTransfer);
diff --git a/src/content/popup.html b/src/content/popup.html
diff --git a/src/content/popup.js b/src/content/popup.js
diff --git a/src/content/sidebar.css b/src/content/sidebar.css
@@ -290,3 +290,74 @@ td:last-child {
   width: 65px;
   text-align: right;
 }
+
+#options-button {
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  width: 24px;
+  height: 24px;
+  z-index: 100;
+}
+
+#options-button img {
+    width: 16px;
+    height: 16px;
+    filter: invert(30%);
+    transition: filter 0.2s ease;
+}
+
+#options-button:hover img {
+    filter: invert(0%);
+}
+
+#popup-container {
+  position: absolute;
+  top: 24px;
+  left: 0;
+  width: 250px;
+  min-width: 250px;
+  background-color: #f0f0f0;
+  border: 1px solid #ccc;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  z-index: 101;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.options-container {
+  padding: 8px;
+  width: 100%;
+}
+
+.option-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  padding: 0 4px;
+  gap: 8px;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  cursor: pointer;
+}
+
+.checkbox-label input[type="checkbox"] {
+  margin: 0;
+}
+
+#update-interval-slider {
+  flex: 1;
+  min-width: 100px;
+  max-width: 200px;
+}
+
+#update-interval-value {
+  width: 2ch;
+  text-align: center;
+  border: 1px solid #ccc;
+}
diff --git a/src/content/sidebar.html b/src/content/sidebar.html
@@ -10,6 +10,9 @@
 
   <body>
     <div id="sidebar-content">
+      <a href="#" id="options-button">
+        <img src="../icons/options-gear.svg" alt="options" />
+      </a>
       <div id="history">
         <h1>cpu load (#: <span id="cpu-count"></span>)</h1>
         <hr/>
@@ -75,6 +78,9 @@ <h1>cpu load (#: <span id="cpu-count"></span>)</h1>
           </table>
         </div>
       </div>
+
+      <div id="popup-container" style="display: none;">
+      </div>
     </div>
 
   </body>

diff --git a/src/content/sidebar.js b/src/content/sidebar.js
@@ -392,10 +392,45 @@ window.addEventListener("load", async () => {
   for (tab of detailTabs) {
     tab.addEventListener("click", selectDetailsPane);
   }
+
+  const popupContainer = document.getElementById("popup-container");
+  let popupLoaded = false;
+
+  document.getElementById("options-button").addEventListener("click", async () => {
+    if (!popupLoaded) {
+      try {
+        const response = await fetch(browser.runtime.getURL("content/options.html"));
+        const popupContent = await response.text();
+        popupContainer.innerHTML = popupContent;
+
+        const script = document.createElement('script');
+        script.src = browser.runtime.getURL("content/options.js");
+        document.head.appendChild(script);
+
+        popupLoaded = true;
+      } catch (error) {
+        console.error("Failed to fetch options.html:", error);
+        return;
+      }
+    }
+
+    popupContainer.style.display = popupContainer.style.display === "none" ? "block" : "none";
+  });
 }, { once: true });
 
 window.addEventListener("resize", () => {
   historyChartWidth = historyChart.clientWidth;
   historyChartDeltaX = Math.round((historyChartWidth - 4) / (60 - 1));
   updateDetailsPane();
 });
+
+document.addEventListener("click", (event) => {
+  const popupContainer = document.getElementById("popup-container");
+  const optionsButton = document.getElementById("options-button");
+
+  if (popupContainer.style.display === "block" && 
+      !popupContainer.contains(event.target) && 
+      !optionsButton.contains(event.target)) {
+    popupContainer.style.display = "none";
+  }
+});
diff --git a/src/icons/options-gear.svg b/src/icons/options-gear.svg