refactor: replace if(el) el.method() guards with optional chaining (#331)

Use el?.method() in place of if (el) el.method() for method-call guards
across popup.js, injector.js, and detector.js. Property assignments are
left as-is since ?.= is not supported.

- popup.js: errRow?.classList.remove/toggle, el?.addEventListener
- injector.js: panel?.remove, body?.setAttribute/removeAttribute
- detector.js: observer?.disconnect + unconditional observer = null

Minimum Chrome version is 111, so optional chaining is fully supported.

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: github-actions[bot]

content/detector.js

@@ -844,10 +844,8 @@ const TradeDetector = (() => {
    * Safe to call even if `observe()` was never called.
    */
   function disconnect() {
-    if (observer) {
-      observer.disconnect();
-      observer = null;
-    }
+    observer?.disconnect();
+    observer = null;
     if (inputListener) {
       document.removeEventListener('input', inputListener, true);
       inputListener = null;

content/injector.js

@@ -384,7 +384,7 @@ const MarginInjector = (() => {
    */
   function remove() {
     const panel = getPanel();
-    if (panel) panel.remove();
+    panel?.remove();
   }
 
   /**
@@ -433,7 +433,7 @@ const MarginInjector = (() => {
     // stale or empty values (e.g. '--') that would confuse AT when the error alert
     // fires. Mirrors the aria-hidden="true" set by showLoading(); only updatePanel()
     // should expose body content by removing the attribute.
-    if (body) body.setAttribute('aria-hidden', 'true');
+    body?.setAttribute('aria-hidden', 'true');
     if (error) {
       if (errorText) errorText.textContent = msg || 'Unknown error';
       if (retryBtn) retryBtn.style.display = canRetry ? 'inline-block' : 'none';
@@ -468,7 +468,7 @@ const MarginInjector = (() => {
     // display/opacity of body, loading spinner, and error row are driven by
     // data-fmc-state CSS rules — no inline style manipulation needed here.
     const { body, errorText: errorTextEl, creditDebit: creditDebitEl, creditDebitLabel, delta: deltaEl, cash: cashEl, buyingPower: bpEl, debugLog: debugLogEl, debugBtn: debugBtnEl } = getPanelElements(panel);
-    if (body) body.removeAttribute('aria-hidden');
+    body?.removeAttribute('aria-hidden');
     // Clear stale error text — mirrors the same guard in showLoading(). When the
     // extension later re-enters error state from result state, the role="alert" row
     // must be empty as it enters the accessibility tree to avoid double-announcement.

popup/popup.js

@@ -104,7 +104,7 @@
       if (calcEl) calcEl.textContent = '--';
       if (callsEl) callsEl.textContent = '0';
       if (errEl) errEl.textContent = '';
-      if (errRow) errRow.classList.remove('has-error');
+      errRow?.classList.remove('has-error');
       return;
     }
 
@@ -126,7 +126,7 @@
     // when it enters the accessibility tree — improves screen-reader announcement
     // reliability when the row transitions from visually-hidden to visible.
     if (errEl) errEl.textContent = status.lastError || '';
-    if (errRow) errRow.classList.toggle('has-error', !!status.lastError);
+    errRow?.classList.toggle('has-error', !!status.lastError);
   }
 
   // --- Settings ---
@@ -280,7 +280,7 @@
     // Settings change handlers — use getSettingsEls() so IDs stay in one place
     const { enabled: enabledEl, threshold: thresholdEl, debounce: debounceEl } = getSettingsEls();
     for (const el of [enabledEl, thresholdEl, debounceEl]) {
-      if (el) el.addEventListener('change', saveSettings);
+      el?.addEventListener('change', saveSettings);
     }
 
     // Settings toggle