@abbox/inspector 0.4.19 → 0.4.20

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,CAyFN;AAID;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAGnD"}

package/dist/runtime/overlay.js

@@ -155,12 +155,29 @@ export function renderChangeMarkers(layer, markers, resolveElement, onSelect) {
             : "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",

package/package.json

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