Fix lock icon getting blurred with its container, tune overlay look

filter/opacity on the container recomposited its whole subtree
(including the lock icon appended as a child) as one filtered unit, so
the icon's own filter:none/opacity:1 couldn't opt it back out. Switch
to backdrop-filter on the overlay instead, which only blurs what's
painted behind it, leaving the icon crisp with no need to reparent the
site's own React-owned DOM.

Also lighten the blur (pixelated on small pills) in favor of
grayscale/brightness doing the "disabled" signaling, and size the
overlay 4px larger on every side than a flush inset:0.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_013qK4zsF5ogU7cjRVL3AQZ2

src/content-scripts/interventions/blur-disable.ts

@@ -20,19 +20,38 @@ const INTERCEPTED_EVENT_TYPES = ['pointerdown', 'mousedown', 'mouseup', 'click']
 const LOCK_ICON_SVG =
   '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="10" width="16" height="10" rx="2"></rect><path d="M8 10V7a4 4 0 0 1 8 0v3"></path></svg>';
 
+// `backdrop-filter` (not `filter`) is deliberate: `filter` on the container
+// would recomposite the container's entire subtree — including the lock
+// icon overlay appended below as its child — as one filtered unit, blurring
+// the icon along with the button (filter/opacity are compositing
+// properties, so a child's own `filter:none` can't opt back out once an
+// ancestor sets one). `backdrop-filter` on the overlay instead only blurs
+// what's painted *behind* the overlay; the overlay's own children (the
+// icon) paint on top of that blurred backdrop unaffected, no DOM
+// restructuring of the site's own (React-owned) nodes required.
 const OVERLAY_STYLE = [
   'position:absolute',
-  'inset:0',
+  // 4px on every side instead of a flush `inset:0`, so the overlay reads as
+  // slightly larger than the pill it's covering rather than exactly
+  // clipped to it.
+  'top:-4px',
+  'bottom:-4px',
+  'left:-4px',
+  'right:-4px',
   'display:flex',
   'align-items:center',
   'justify-content:center',
   'pointer-events:auto',
   'cursor:not-allowed',
   'z-index:2147483000',
-  'filter:none',
+  // A light blur (vs. the earlier 3px) avoids the pixelated look on small
-  'opacity:1',
+  // pill-sized targets; darkening + desaturating the backdrop is what
+  // actually communicates "disabled" here, the blur alone was carrying too
+  // much of that job.
+  'backdrop-filter:blur(1px) grayscale(0.6) brightness(0.55)',
+  '-webkit-backdrop-filter:blur(1px) grayscale(0.6) brightness(0.55)',
+  'background:rgba(0,0,0,0.25)',
   'color:#fff',
-  'background:transparent',
 ].join(';');
 
 /**
@@ -50,8 +69,6 @@ export const blurDisable: Intervention = {
     const originalStyleAttr = container.getAttribute('style');
     const computedPosition = getComputedStyle(container).position;
 
-    container.style.filter = 'blur(3px)';
-    container.style.opacity = '0.5';
     container.style.cursor = 'not-allowed';
     container.style.pointerEvents = 'none';
     if (computedPosition === 'static') {