@abbox/inspector 0.4.19 → 0.4.21

package/dist/runtime/overlay.d.ts

@@ -12,4 +12,10 @@ export declare function hideHighlight(highlight: HTMLDivElement): void;
 export declare function hideSelectedHighlight(selectedHighlight: HTMLDivElement): void;
 export declare function rectForElement(el: Element): ElementRect;
 export declare function renderChangeMarkers(layer: HTMLDivElement, markers: ChangeMarker[], resolveElement: (refId: string) => Element | null, onSelect?: (changeId: string) => void): void;
+/**
+ * A badge sits just above its element and moves with it. With no room above
+ * (the element starts at the top of the screen) it tucks inside the element's
+ * top edge instead, and scrolls away with the element rather than sticking.
+ */
+export declare function badgeTop(elementTop: number): number;
 //# sourceMappingURL=overlay.d.ts.map

package/dist/runtime/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/runtime/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAMhE,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,cAAc,CAAC;IAC1B,iBAAiB,EAAE,cAAc,CAAC;IAClC,WAAW,EAAE,cAAc,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,aAAa,CAAC,IAAI,EAAE,QAAQ,GAAG,cAAc,CAgD5D;AAED,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,cAAc,EACzB,IAAI,EAAE,WAAW,GAChB,IAAI,CAQN;AAED,wBAAgB,yBAAyB,CACvC,iBAAiB,EAAE,cAAc,EACjC,IAAI,EAAE,WAAW,GAChB,IAAI,CAQN;AAED,wBAAgB,aAAa,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI,CAE7D;AAED,wBAAgB,qBAAqB,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI,CAE7E;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,OAAO,GAAG,WAAW,CAQvD;AAOD,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE,YAAY,EAAE,EACvB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,EACjD,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,GACpC,IAAI,CAkFN"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/runtime/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAMhE,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,cAAc,CAAC;IAC1B,iBAAiB,EAAE,cAAc,CAAC;IAClC,WAAW,EAAE,cAAc,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,aAAa,CAAC,IAAI,EAAE,QAAQ,GAAG,cAAc,CAgD5D;AAED,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,cAAc,EACzB,IAAI,EAAE,WAAW,GAChB,IAAI,CAQN;AAED,wBAAgB,yBAAyB,CACvC,iBAAiB,EAAE,cAAc,EACjC,IAAI,EAAE,WAAW,GAChB,IAAI,CAQN;AAED,wBAAgB,aAAa,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI,CAE7D;AAED,wBAAgB,qBAAqB,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI,CAE7E;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,OAAO,GAAG,WAAW,CAQvD;AAOD,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE,YAAY,EAAE,EACvB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,EACjD,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,GACpC,IAAI,CA0FN;AAID;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAGnD"}

package/dist/runtime/overlay.js

@@ -147,20 +147,38 @@ export function renderChangeMarkers(layer, markers, resolveElement, onSelect) {
             event.stopPropagation();
             onSelect?.(marker.elementRefId);
         };
+        // A labelled pill is far wider than a dot, so it needs much less movement.
         dot.style.animation = marker.pulse
-            ? "abbox-inspector-pulse 1.4s ease-in-out infinite"
+            ? `abbox-inspector-pulse${marker.badge ? "-soft" : ""} 1.4s ease-in-out infinite`
             : "";
         dot.style.boxShadow = marker.pulse
-            ? "0 0 0 4px rgba(255,255,255,0.35)"
+            ? `0 0 0 ${marker.badge ? 2 : 4}px rgba(255,255,255,0.35)`
             : "0 0 0 1px rgba(0,0,0,0.2)";
         if (marker.pulse)
             ensurePulseStyle(layer.ownerDocument);
+        // Only while its element is on screen: a chip left at the viewport edge
+        // floats over unrelated content.
+        const view = layer.ownerDocument.defaultView;
+        const onScreen = rect.bottom > 0 &&
+            rect.right > 0 &&
+            rect.top < (view?.innerHeight ?? Number.POSITIVE_INFINITY) &&
+            rect.left < (view?.innerWidth ?? Number.POSITIVE_INFINITY);
+        dot.style.display = onScreen ? "" : "none";
         dot.style.left = `${rect.x - 6}px`;
-        dot.style.top = marker.badge
-            ? `${Math.max(0, rect.top - 18)}px`
-            : `${rect.top - 6}px`;
+        dot.style.top = `${marker.badge ? badgeTop(rect.top) : rect.top - 6}px`;
     }
 }
+const BADGE_HEIGHT = 18;
+/**
+ * A badge sits just above its element and moves with it. With no room above
+ * (the element starts at the top of the screen) it tucks inside the element's
+ * top edge instead, and scrolls away with the element rather than sticking.
+ */
+export function badgeTop(elementTop) {
+    if (elementTop >= BADGE_HEIGHT)
+        return elementTop - BADGE_HEIGHT;
+    return elementTop >= 0 ? 0 : elementTop;
+}
 const BADGE_COLORS = {
     "seo-error": "#dc2626",
     "seo-warning": "#d97706",
@@ -191,6 +209,10 @@ function ensurePulseStyle(doc) {
     style.textContent = `@keyframes abbox-inspector-pulse {
     0%, 100% { transform: scale(1); opacity: 1; }
     50% { transform: scale(1.35); opacity: 0.75; }
+  }
+  @keyframes abbox-inspector-pulse-soft {
+    0%, 100% { transform: scale(1); opacity: 1; }
+    50% { transform: scale(1.04); opacity: 0.9; }
   }`;
     doc.head.append(style);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abbox/inspector",
-  "version": "0.4.19",
+  "version": "0.4.21",
   "publishConfig": {
     "access": "public"
   },