Tweaks & fixes

Author: Revadike

css/content.css

@@ -36,18 +36,20 @@
     gap: 10px;
     z-index: 9999;
     border-top: 1px solid #000;
+    height: 30px;
+    overflow-x: scroll;
 }
 
 .swi-toolbar-section {
     display: flex;
     align-items: center;
-    gap: 5px;
-    padding: 0 10px;
-    border-right: 1px solid #2a475e;
+    gap: 10px;
 }
 
-.swi-toolbar-section:last-child {
-    border-right: none;
+.filter-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
 }
 
 .swi-toolbar button {
@@ -57,6 +59,7 @@
     padding: 5px 10px;
     border-radius: 2px;
     cursor: pointer;
+    white-space: nowrap;
 }
 
 .swi-toolbar button:hover {
@@ -65,23 +68,52 @@
 
 .swi-toolbar .icon-filter {
     cursor: pointer;
-    opacity: 1;
+    opacity: 0.25;
     transition: opacity 0.2s;
+    line-height: 1.5;
 }
 
 .swi-toolbar .icon-filter.filtered {
-    opacity: 0.5;
+    opacity: 0.25;
 }
 
 .swi-toolbar .depth-slider {
     width: 100px;
 }
 
+.swi-hidden {
+    display: none !important;
+}
+
+.swi-toolbar-divider {
+    width: 1px;
+    background: #2a475e;
+    height: 100%;
+    z-index: 1;
+}
+
+.swi-toolbar .filter-mode {
+    background: #2a475e;
+    border: none;
+    color: #c7d5e0;
+    padding: 4px 8px;
+    border-radius: 2px;
+    cursor: pointer;
+}
+
+
 .swi-toolbar .close-button {
     margin-left: auto;
-    font-weight: bold;
 }
 
-.swi-hidden {
-    display: none !important;
+.swi-toolbar.hide-mode .icon-filter {
+    opacity: 1;
+}
+
+.swi-toolbar.hide-mode .icon-filter.filtered {
+    opacity: 0.25;
+}
+
+.swi-toolbar.only-mode .icon-filter.filtered {
+    opacity: 1;
 }

scripts/background.js

@@ -75,7 +75,7 @@ async function addToBlacklist(url) {
         ),
     ].join("\n");
 
-    await chrome.storage.local.set({ "swi_settings": settings });
+    await chrome.runtime.sendMessage({ "action": "setSettings", settings });
 }
 
 function arrayToObject(array, key) {
@@ -258,6 +258,9 @@ function onMessage(message, sender, sendResponse) {
         case "getSettings":
             getSettings().then((settings) => sendResponse(settings));
             break;
+        case "setSettings":
+            chrome.storage.local.set({ "swi_settings": message.settings }).then(() => sendResponse(true));
+            break;
         case "runSWI":
         case "reloadSWI":
         case "clearSWI":