Refine popup settings and SamacSys previews

Author: JoeShade

src/popup.css

@@ -85,6 +85,11 @@ h1 {
   object-fit: contain;
 }
 
+.preview-image.samacsys-preview-image {
+  filter: grayscale(1) saturate(0) brightness(0.58) contrast(12);
+  mix-blend-mode: multiply;
+}
+
 .preview-image.hidden {
   display: none;
 }
@@ -156,12 +161,6 @@ h1 {
   flex-direction: column;
   gap: 8px;
   padding-top: 6px;
-  border-top: 1px solid #e2e8f0;
-  font-size: 12px;
-}
-
-.settings-header {
-  font-weight: 600;
   font-size: 12px;
 }
 
@@ -270,6 +269,10 @@ h1 {
   text-align: center;
 }
 
+.status:empty {
+  display: none;
+}
+
 /* Error state for status messages. */
 .status.error {
   color: #b42318;

src/popup.html

@@ -53,7 +53,6 @@ <h1>Easy EDA Downloader</h1>
         </label>
       </div>
       <section class="settings" aria-label="Settings">
-        <div class="settings-header">Settings</div>
         <button id="settingsButton" type="button" class="secondary settings-button">
           Open settings
         </button>

src/popup.js

@@ -17,6 +17,7 @@ import {
 } from "./core/part_context.js";
 
 const DEFAULT_SOURCE_PART_LABEL = "Part";
+const SAMACSYS_PREVIEW_IMAGE_CLASS = "samacsys-preview-image";
 const chromeApi = globalThis.chrome;
 const popupWindow = globalThis.window;
 const popupDocument = globalThis.document;
@@ -75,6 +76,18 @@ function updateDownloadEnabled() {
     !currentPartContext?.provider || isBlockedProvider() || !hasSelection();
 }
 
+function setPreviewProviderStyle(partContext) {
+  const isSamacsysPreview = isSamacsysProviderShared(partContext?.provider);
+  symbolPreviewEl.classList.toggle(
+    SAMACSYS_PREVIEW_IMAGE_CLASS,
+    isSamacsysPreview
+  );
+  footprintPreviewEl.classList.toggle(
+    SAMACSYS_PREVIEW_IMAGE_CLASS,
+    isSamacsysPreview
+  );
+}
+
 function setPreviewLoading(fallbackEl, imgEl) {
   fallbackEl.textContent = "Loading...";
   fallbackEl.classList.remove("hidden");
@@ -135,6 +148,7 @@ function setIdentifierDisplay(sourcePartLabel, sourcePartNumber, manufacturerPar
 function setUnavailableDisplay(statusMessage) {
   currentPartContext = null;
   currentSourceTabId = null;
+  setPreviewProviderStyle(null);
   sourcePartLabelEl.textContent = DEFAULT_SOURCE_PART_LABEL;
   manufacturerPartNumberEl.textContent = "Unavailable";
   partNumberEl.textContent = "Unavailable";
@@ -211,6 +225,7 @@ function openSettingsPage() {
 // Update UI state based on whether a supported provider was found.
 function setPartContext(partContext) {
   currentPartContext = partContext?.provider ? partContext : null;
+  setPreviewProviderStyle(currentPartContext);
 
   if (!currentPartContext) {
     setIdentifierDisplay(DEFAULT_SOURCE_PART_LABEL, null, null);

tests/test_popup.test.js

@@ -228,6 +228,14 @@ describe("popup", () => {
     expect(hooks.elements.downloadButton.disabled).toBe(false);
     expect(hooks.elements.symbolPreviewEl.src).toContain("data:image/svg+xml");
     expect(hooks.elements.footprintPreviewEl.src).toContain("data:image/svg+xml");
+    expect(
+      hooks.elements.symbolPreviewEl.classList.contains("samacsys-preview-image")
+    ).toBe(false);
+    expect(
+      hooks.elements.footprintPreviewEl.classList.contains(
+        "samacsys-preview-image"
+      )
+    ).toBe(false);
 
     hooks.elements.downloadSymbolEl.checked = false;
     hooks.elements.downloadFootprintEl.checked = false;
@@ -276,6 +284,14 @@ describe("popup", () => {
     );
     expect(hooks.elements.symbolPreviewEl.src).toContain("data:image/png;base64");
     expect(hooks.elements.footprintPreviewEl.src).toContain("data:image/png;base64");
+    expect(
+      hooks.elements.symbolPreviewEl.classList.contains("samacsys-preview-image")
+    ).toBe(true);
+    expect(
+      hooks.elements.footprintPreviewEl.classList.contains(
+        "samacsys-preview-image"
+      )
+    ).toBe(true);
 
     hooks.elements.downloadDatasheetEl.checked = false;
     hooks.elements.downloadButton.click();