@buoy-gg/focus-inspector 7.0.35 → 7.0.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +47 -122
- package/lib/commonjs/detect/detectors.js +1 -351
- package/lib/commonjs/index.js +1 -106
- package/lib/commonjs/observe/focusEventObserver.js +1 -105
- package/lib/commonjs/observe/keyEventObserver.js +1 -94
- package/lib/commonjs/observe/rawEventEmitter.js +1 -44
- package/lib/commonjs/scan/focusableScanner.js +1 -497
- package/lib/commonjs/store/focusStore.js +1 -325
- package/lib/commonjs/sync/focusInspectorSyncAdapter.js +1 -247
- package/lib/module/detect/detectors.js +1 -341
- package/lib/module/index.js +1 -36
- package/lib/module/observe/focusEventObserver.js +1 -99
- package/lib/module/observe/keyEventObserver.js +1 -86
- package/lib/module/observe/rawEventEmitter.js +1 -40
- package/lib/module/scan/focusableScanner.js +1 -492
- package/lib/module/store/focusStore.js +1 -312
- package/lib/module/sync/focusInspectorSyncAdapter.js +1 -244
- package/package.json +3 -3
- package/lib/commonjs/detect/detectors.js.map +0 -1
- package/lib/commonjs/index.js.map +0 -1
- package/lib/commonjs/observe/focusEventObserver.js.map +0 -1
- package/lib/commonjs/observe/keyEventObserver.js.map +0 -1
- package/lib/commonjs/observe/rawEventEmitter.js.map +0 -1
- package/lib/commonjs/scan/focusableScanner.js.map +0 -1
- package/lib/commonjs/store/focusStore.js.map +0 -1
- package/lib/commonjs/sync/focusInspectorSyncAdapter.js.map +0 -1
- package/lib/module/detect/detectors.js.map +0 -1
- package/lib/module/index.js.map +0 -1
- package/lib/module/observe/focusEventObserver.js.map +0 -1
- package/lib/module/observe/keyEventObserver.js.map +0 -1
- package/lib/module/observe/rawEventEmitter.js.map +0 -1
- package/lib/module/scan/focusableScanner.js.map +0 -1
- package/lib/module/store/focusStore.js.map +0 -1
- package/lib/module/sync/focusInspectorSyncAdapter.js.map +0 -1
- package/lib/typescript/detect/detectors.d.ts.map +0 -1
- package/lib/typescript/index.d.ts.map +0 -1
- package/lib/typescript/observe/focusEventObserver.d.ts.map +0 -1
- package/lib/typescript/observe/keyEventObserver.d.ts.map +0 -1
- package/lib/typescript/observe/rawEventEmitter.d.ts.map +0 -1
- package/lib/typescript/scan/focusableScanner.d.ts.map +0 -1
- package/lib/typescript/store/focusStore.d.ts.map +0 -1
- package/lib/typescript/sync/focusInspectorSyncAdapter.d.ts.map +0 -1
|
@@ -1,341 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* detectors — pure functions from the recorded stream to the three TV focus bug
|
|
5
|
-
* classes. No timers, no RN, no fiber access, so every rule below is a unit
|
|
6
|
-
* test rather than a device session.
|
|
7
|
-
*
|
|
8
|
-
* The honesty rule that shapes all of this: focus can only be OBSERVED from JS,
|
|
9
|
-
* never computed. There is no "where would RIGHT take me" API on either
|
|
10
|
-
* platform, and a JS re-implementation of Android's FocusFinder geometry would
|
|
11
|
-
* lie in exactly the cases this tool exists for (guides, traps, nextFocus*
|
|
12
|
-
* overrides). So geometry is only ever used to *downgrade* a flag ("that's the
|
|
13
|
-
* screen edge, not a dead end") or to *suspect* one — never to assert what the
|
|
14
|
-
* engine would do.
|
|
15
|
-
*/
|
|
16
|
-
|
|
17
|
-
export const DIRECTIONS = ["up", "down", "left", "right"];
|
|
18
|
-
|
|
19
|
-
/** Consecutive failed presses in one direction before it counts as a dead end. */
|
|
20
|
-
export const DEAD_END_ATTEMPTS = 3;
|
|
21
|
-
|
|
22
|
-
/** Presses before "unvisited" is worth reporting at all — below this it's noise. */
|
|
23
|
-
export const COVERAGE_MIN_PROBES = 12;
|
|
24
|
-
function keyOf(tag, direction) {
|
|
25
|
-
return `${tag}:${direction}`;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
/**
|
|
29
|
-
* A direction can legitimately move focus sometimes and not others (a rail
|
|
30
|
-
* scrolls, then hits its end), so a dead end is the *trailing run* of failures,
|
|
31
|
-
* not a lifetime tally. One successful move clears it.
|
|
32
|
-
*/
|
|
33
|
-
export function detectDeadEnds(probes, nodes, minAttempts = DEAD_END_ATTEMPTS, since = 0) {
|
|
34
|
-
const trailing = new Map();
|
|
35
|
-
for (const probe of probes) {
|
|
36
|
-
if (!probe.resolved || probe.tag === null) continue;
|
|
37
|
-
if (probe.at < since) continue;
|
|
38
|
-
const key = keyOf(probe.tag, probe.direction);
|
|
39
|
-
if (probe.movedTo === null) trailing.set(key, (trailing.get(key) ?? 0) + 1);else trailing.set(key, 0);
|
|
40
|
-
}
|
|
41
|
-
const byTag = new Map();
|
|
42
|
-
for (const node of nodes) byTag.set(node.nativeTag, node);
|
|
43
|
-
const flags = [];
|
|
44
|
-
trailing.forEach((attempts, key) => {
|
|
45
|
-
if (attempts < minAttempts) return;
|
|
46
|
-
const [tagPart, directionPart] = key.split(":");
|
|
47
|
-
const tag = Number(tagPart);
|
|
48
|
-
const direction = directionPart;
|
|
49
|
-
flags.push({
|
|
50
|
-
tag,
|
|
51
|
-
direction,
|
|
52
|
-
attempts,
|
|
53
|
-
atEdge: isAtEdge(byTag.get(tag), direction, nodes)
|
|
54
|
-
});
|
|
55
|
-
});
|
|
56
|
-
return flags.sort((a, b) => b.attempts - a.attempts);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
/**
|
|
60
|
-
* "The screen ends here" — the one honest reason a direction can legitimately
|
|
61
|
-
* move nothing.
|
|
62
|
-
*
|
|
63
|
-
* This is NOT the viewport test it started as. Abutting the bottom of the
|
|
64
|
-
* WINDOW says nothing inside a ScrollView: the armed focus trap in the TV
|
|
65
|
-
* example sits flush with the viewport bottom at its scroll position, so a
|
|
66
|
-
* geometric edge test excused a real four-way trap as "expected". What actually
|
|
67
|
-
* matters is whether the inventory knows of a focusable further along in that
|
|
68
|
-
* direction — if it does, focus refusing to move is a dead end no matter where
|
|
69
|
-
* the element is drawn.
|
|
70
|
-
*
|
|
71
|
-
* Geometry still only ever DOWNGRADES a flag here, which is the rule for the
|
|
72
|
-
* whole detector layer: it never claims to know where the engine would go.
|
|
73
|
-
*/
|
|
74
|
-
function isAtEdge(node, direction, nodes) {
|
|
75
|
-
const frame = node?.frame;
|
|
76
|
-
if (!frame) return false;
|
|
77
|
-
const centerX = frame.x + frame.width / 2;
|
|
78
|
-
const centerY = frame.y + frame.height / 2;
|
|
79
|
-
for (const other of nodes) {
|
|
80
|
-
if (other.nativeTag === node.nativeTag) continue;
|
|
81
|
-
// Guides are stops, but an invisible one is never the reason a user thinks
|
|
82
|
-
// "there is more over there" — judge the edge on real content.
|
|
83
|
-
if (other.guide) continue;
|
|
84
|
-
const otherFrame = other.frame;
|
|
85
|
-
if (!otherFrame) continue;
|
|
86
|
-
const otherX = otherFrame.x + otherFrame.width / 2;
|
|
87
|
-
const otherY = otherFrame.y + otherFrame.height / 2;
|
|
88
|
-
switch (direction) {
|
|
89
|
-
case "up":
|
|
90
|
-
if (otherY < frame.y) return false;
|
|
91
|
-
break;
|
|
92
|
-
case "down":
|
|
93
|
-
if (otherY > frame.y + frame.height) return false;
|
|
94
|
-
break;
|
|
95
|
-
case "left":
|
|
96
|
-
if (otherX < frame.x) return false;
|
|
97
|
-
break;
|
|
98
|
-
case "right":
|
|
99
|
-
if (otherX > frame.x + frame.width) return false;
|
|
100
|
-
break;
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
return true;
|
|
104
|
-
}
|
|
105
|
-
function unionBox(frames) {
|
|
106
|
-
if (frames.length === 0) return null;
|
|
107
|
-
let left = Infinity;
|
|
108
|
-
let top = Infinity;
|
|
109
|
-
let right = -Infinity;
|
|
110
|
-
let bottom = -Infinity;
|
|
111
|
-
for (const frame of frames) {
|
|
112
|
-
left = Math.min(left, frame.x);
|
|
113
|
-
top = Math.min(top, frame.y);
|
|
114
|
-
right = Math.max(right, frame.x + frame.width);
|
|
115
|
-
bottom = Math.max(bottom, frame.y + frame.height);
|
|
116
|
-
}
|
|
117
|
-
return {
|
|
118
|
-
x: left,
|
|
119
|
-
y: top,
|
|
120
|
-
width: right - left,
|
|
121
|
-
height: bottom - top
|
|
122
|
-
};
|
|
123
|
-
}
|
|
124
|
-
function isBeyond(box, point, direction) {
|
|
125
|
-
switch (direction) {
|
|
126
|
-
case "up":
|
|
127
|
-
return point.y < box.y;
|
|
128
|
-
case "down":
|
|
129
|
-
return point.y > box.y + box.height;
|
|
130
|
-
case "left":
|
|
131
|
-
return point.x < box.x;
|
|
132
|
-
case "right":
|
|
133
|
-
return point.x > box.x + box.width;
|
|
134
|
-
default:
|
|
135
|
-
return false;
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
/** Blocked in at least this many directions before "trap" is the right word. */
|
|
140
|
-
const TRAP_MIN_BLOCKED = 2;
|
|
141
|
-
|
|
142
|
-
/**
|
|
143
|
-
* A trap is a REGION focus cannot get OUT of, which is usually not one element
|
|
144
|
-
* and is not "all four directions are dead".
|
|
145
|
-
*
|
|
146
|
-
* Both of the obvious rules were tried against the armed trap in the TV example
|
|
147
|
-
* (a row of three tiles in one `TVFocusGuideView`) and both missed it. Per
|
|
148
|
-
* element: left/right move freely between the tiles, so no single tile
|
|
149
|
-
* dead-ends four ways. All-four-directions on the group: the box is
|
|
150
|
-
* left-aligned with everything else on the screen, so LEFT is a legitimate
|
|
151
|
-
* screen edge and the union never reaches four.
|
|
152
|
-
*
|
|
153
|
-
* What actually defines the bug is escape: for every direction in which
|
|
154
|
-
* something focusable EXISTS outside the container, focus has to have been
|
|
155
|
-
* observed failing to get there. A direction with nothing beyond it is not
|
|
156
|
-
* evidence either way, and a container with nothing outside it at all is the
|
|
157
|
-
* whole screen, not a trap.
|
|
158
|
-
*/
|
|
159
|
-
export function detectTraps(deadEnds, nodes) {
|
|
160
|
-
const byTag = new Map();
|
|
161
|
-
for (const node of nodes) byTag.set(node.nativeTag, node);
|
|
162
|
-
const groups = new Map();
|
|
163
|
-
for (const flag of deadEnds) {
|
|
164
|
-
const node = byTag.get(flag.tag);
|
|
165
|
-
const containerTag = node?.guideAncestorTag ?? flag.tag;
|
|
166
|
-
const group = groups.get(containerTag) ?? {
|
|
167
|
-
containerTag,
|
|
168
|
-
tags: new Set(),
|
|
169
|
-
directions: new Set()
|
|
170
|
-
};
|
|
171
|
-
group.tags.add(flag.tag);
|
|
172
|
-
group.directions.add(flag.direction);
|
|
173
|
-
groups.set(containerTag, group);
|
|
174
|
-
}
|
|
175
|
-
const traps = [];
|
|
176
|
-
groups.forEach(group => {
|
|
177
|
-
if (group.directions.size < TRAP_MIN_BLOCKED) return;
|
|
178
|
-
|
|
179
|
-
// Everything the container holds, not just the elements we have evidence
|
|
180
|
-
// about — the box focus is stuck inside is the container's, not the probes'.
|
|
181
|
-
const members = new Set(group.tags);
|
|
182
|
-
for (const node of nodes) {
|
|
183
|
-
if (node.guideAncestorTag === group.containerTag) members.add(node.nativeTag);
|
|
184
|
-
}
|
|
185
|
-
members.add(group.containerTag);
|
|
186
|
-
const container = byTag.get(group.containerTag);
|
|
187
|
-
const box = container?.guide && container.frame ? container.frame : unionBox(Array.from(members).map(tag => byTag.get(tag)?.frame).filter(frame => !!frame));
|
|
188
|
-
if (!box) return;
|
|
189
|
-
let escapable = 0;
|
|
190
|
-
let reachableOutside = 0;
|
|
191
|
-
for (const direction of DIRECTIONS) {
|
|
192
|
-
const hasOutside = nodes.some(node => {
|
|
193
|
-
if (node.guide || members.has(node.nativeTag) || !node.frame) return false;
|
|
194
|
-
const center = {
|
|
195
|
-
x: node.frame.x + node.frame.width / 2,
|
|
196
|
-
y: node.frame.y + node.frame.height / 2
|
|
197
|
-
};
|
|
198
|
-
return isBeyond(box, center, direction);
|
|
199
|
-
});
|
|
200
|
-
if (!hasOutside) continue;
|
|
201
|
-
reachableOutside += 1;
|
|
202
|
-
if (!group.directions.has(direction)) escapable += 1;
|
|
203
|
-
}
|
|
204
|
-
// Nothing outside at all means the container IS the screen.
|
|
205
|
-
if (reachableOutside === 0 || escapable > 0) return;
|
|
206
|
-
const guide = container?.guide;
|
|
207
|
-
const trapped = guide !== undefined && (guide.trap.up || guide.trap.down || guide.trap.left || guide.trap.right);
|
|
208
|
-
traps.push({
|
|
209
|
-
tags: Array.from(group.tags).sort((a, b) => a - b),
|
|
210
|
-
containerTag: group.containerTag,
|
|
211
|
-
directions: DIRECTIONS.filter(d => group.directions.has(d)),
|
|
212
|
-
guideTrapTag: trapped ? group.containerTag : undefined
|
|
213
|
-
});
|
|
214
|
-
});
|
|
215
|
-
return traps;
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
/**
|
|
219
|
-
* Focus that parked somewhere with no visible highlight — the "focus vanished"
|
|
220
|
-
* symptom. Two shapes: it landed on a TVFocusGuideView (a real focus stop the
|
|
221
|
-
* user cannot see), or on a tag the inventory has never heard of (a view
|
|
222
|
-
* outside the walked tree, or one that unmounted since the last scan).
|
|
223
|
-
*/
|
|
224
|
-
export function detectInvisibleStops(transitions, nodes, since = 0) {
|
|
225
|
-
const byTag = new Map();
|
|
226
|
-
for (const node of nodes) byTag.set(node.nativeTag, node);
|
|
227
|
-
const flags = new Map();
|
|
228
|
-
for (const transition of transitions) {
|
|
229
|
-
const tag = transition.toTag;
|
|
230
|
-
if (tag === null) continue;
|
|
231
|
-
// A move made before the current scan cannot be judged against the current
|
|
232
|
-
// inventory: after any navigation EVERY tag from the old screen looks like
|
|
233
|
-
// a mystery stop, which buried the real flags under a wall of noise on the
|
|
234
|
-
// first device run. Focus flags are per-screen, and `since` is that screen.
|
|
235
|
-
if (transition.at < since) continue;
|
|
236
|
-
const node = byTag.get(tag);
|
|
237
|
-
const reason = !node ?
|
|
238
|
-
// Nothing in the inventory: only meaningful once a scan has run at all,
|
|
239
|
-
// otherwise every transition would be "invisible".
|
|
240
|
-
nodes.length > 0 ? "unknown" : null : node.guide ? "guide" : null;
|
|
241
|
-
if (!reason) continue;
|
|
242
|
-
const existing = flags.get(tag);
|
|
243
|
-
if (existing) {
|
|
244
|
-
existing.count += 1;
|
|
245
|
-
existing.at = transition.at;
|
|
246
|
-
} else {
|
|
247
|
-
flags.set(tag, {
|
|
248
|
-
tag,
|
|
249
|
-
reason,
|
|
250
|
-
at: transition.at,
|
|
251
|
-
count: 1
|
|
252
|
-
});
|
|
253
|
-
}
|
|
254
|
-
}
|
|
255
|
-
return Array.from(flags.values()).sort((a, b) => b.at - a.at);
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
/**
|
|
259
|
-
* `since` is the timestamp of the inventory these flags are judged against —
|
|
260
|
-
* normally the last scan. Everything older belonged to a screen that no longer
|
|
261
|
-
* exists, and judging it here produces confident nonsense.
|
|
262
|
-
*/
|
|
263
|
-
export function detectFlags(transitions, probes, nodes, lostCount, since = 0) {
|
|
264
|
-
const deadEnds = detectDeadEnds(probes, nodes, DEAD_END_ATTEMPTS, since);
|
|
265
|
-
return {
|
|
266
|
-
deadEnds,
|
|
267
|
-
traps: detectTraps(deadEnds, nodes),
|
|
268
|
-
invisibleStops: detectInvisibleStops(transitions, nodes, since),
|
|
269
|
-
lostCount
|
|
270
|
-
};
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
/**
|
|
274
|
-
* Coverage. Observed absence is EVIDENCE, not proof: focus is nondeterministic
|
|
275
|
-
* enough on tvOS that "never visited" cannot be promoted to "unreachable"
|
|
276
|
-
* without native support that does not exist. So the strong word is reserved
|
|
277
|
-
* for the case where geometry AND the observed graph agree.
|
|
278
|
-
*/
|
|
279
|
-
export function computeCoverage(nodes, visited, transitions, probes) {
|
|
280
|
-
const visitedSet = new Set(visited);
|
|
281
|
-
// Guides are counted as focusables (they really are stops), but an unvisited
|
|
282
|
-
// guide is not a bug — it is the normal case for one that only redirects.
|
|
283
|
-
const reachableCandidates = nodes.filter(node => !node.guide);
|
|
284
|
-
const unvisited = reachableCandidates.filter(node => !visitedSet.has(node.nativeTag)).map(node => node.nativeTag);
|
|
285
|
-
const meaningful = probes.length >= COVERAGE_MIN_PROBES;
|
|
286
|
-
const edgeTargets = new Set();
|
|
287
|
-
for (const transition of transitions) {
|
|
288
|
-
if (transition.toTag !== null) edgeTargets.add(transition.toTag);
|
|
289
|
-
}
|
|
290
|
-
const byTag = new Map();
|
|
291
|
-
for (const node of nodes) byTag.set(node.nativeTag, node);
|
|
292
|
-
const suspectedUnreachable = meaningful ? unvisited.filter(tag => {
|
|
293
|
-
if (edgeTargets.has(tag)) return false;
|
|
294
|
-
const node = byTag.get(tag);
|
|
295
|
-
if (!node?.frame) return false;
|
|
296
|
-
// A visited neighbour sitting right next to it means the traversal DID
|
|
297
|
-
// pass by — so focus skipping it is worth suspecting.
|
|
298
|
-
return reachableCandidates.some(other => other.nativeTag !== tag && visitedSet.has(other.nativeTag) && isAdjacent(node, other));
|
|
299
|
-
}) : [];
|
|
300
|
-
return {
|
|
301
|
-
focusables: reachableCandidates.length,
|
|
302
|
-
visited: reachableCandidates.filter(node => visitedSet.has(node.nativeTag)).length,
|
|
303
|
-
unvisited,
|
|
304
|
-
suspectedUnreachable,
|
|
305
|
-
meaningful
|
|
306
|
-
};
|
|
307
|
-
}
|
|
308
|
-
|
|
309
|
-
/** Normalized-frame gap within which two elements are plausibly D-pad neighbours. */
|
|
310
|
-
const ADJACENCY_GAP = 0.12;
|
|
311
|
-
function isAdjacent(a, b) {
|
|
312
|
-
const fa = a.frame;
|
|
313
|
-
const fb = b.frame;
|
|
314
|
-
if (!fa || !fb) return false;
|
|
315
|
-
const horizontalOverlap = fa.x < fb.x + fb.width && fb.x < fa.x + fa.width;
|
|
316
|
-
const verticalOverlap = fa.y < fb.y + fb.height && fb.y < fa.y + fa.height;
|
|
317
|
-
if (horizontalOverlap) {
|
|
318
|
-
const gap = Math.max(fa.y - (fb.y + fb.height), fb.y - (fa.y + fa.height));
|
|
319
|
-
if (gap <= ADJACENCY_GAP) return true;
|
|
320
|
-
}
|
|
321
|
-
if (verticalOverlap) {
|
|
322
|
-
const gap = Math.max(fa.x - (fb.x + fb.width), fb.x - (fa.x + fa.width));
|
|
323
|
-
if (gap <= ADJACENCY_GAP) return true;
|
|
324
|
-
}
|
|
325
|
-
return false;
|
|
326
|
-
}
|
|
327
|
-
|
|
328
|
-
/**
|
|
329
|
-
* The observed out-edges of one element — what the desktop's D-pad compass
|
|
330
|
-
* renders. A direction with no entry is UNKNOWN (dim), which is a different
|
|
331
|
-
* statement from a dead end (pressed, went nowhere).
|
|
332
|
-
*/
|
|
333
|
-
export function observedEdges(tag, transitions) {
|
|
334
|
-
const edges = {};
|
|
335
|
-
for (const transition of transitions) {
|
|
336
|
-
if (transition.fromTag !== tag || transition.direction === null) continue;
|
|
337
|
-
edges[transition.direction] = transition.toTag;
|
|
338
|
-
}
|
|
339
|
-
return edges;
|
|
340
|
-
}
|
|
341
|
-
//# sourceMappingURL=detectors.js.map
|
|
1
|
+
"use strict";export const DIRECTIONS=["up","down","left","right"];export const DEAD_END_ATTEMPTS=3;export const COVERAGE_MIN_PROBES=12;function keyOf(t,e){return`${t}:${e}`}export function detectDeadEnds(t,e,n=3,o=0){const r=new Map;for(const e of t){if(!e.resolved||null===e.tag)continue;if(e.at<o)continue;const t=keyOf(e.tag,e.direction);null===e.movedTo?r.set(t,(r.get(t)??0)+1):r.set(t,0)}const a=new Map;for(const t of e)a.set(t.nativeTag,t);const i=[];return r.forEach((t,o)=>{if(t<n)return;const[r,s]=o.split(":"),c=Number(r),f=s;i.push({tag:c,direction:f,attempts:t,atEdge:isAtEdge(a.get(c),f,e)})}),i.sort((t,e)=>e.attempts-t.attempts)}function isAtEdge(t,e,n){const o=t?.frame;if(!o)return!1;o.x,o.width,o.y,o.height;for(const r of n){if(r.nativeTag===t.nativeTag)continue;if(r.guide)continue;const n=r.frame;if(!n)continue;const a=n.x+n.width/2,i=n.y+n.height/2;switch(e){case"up":if(i<o.y)return!1;break;case"down":if(i>o.y+o.height)return!1;break;case"left":if(a<o.x)return!1;break;case"right":if(a>o.x+o.width)return!1}}return!0}function unionBox(t){if(0===t.length)return null;let e=1/0,n=1/0,o=-1/0,r=-1/0;for(const a of t)e=Math.min(e,a.x),n=Math.min(n,a.y),o=Math.max(o,a.x+a.width),r=Math.max(r,a.y+a.height);return{x:e,y:n,width:o-e,height:r-n}}function isBeyond(t,e,n){switch(n){case"up":return e.y<t.y;case"down":return e.y>t.y+t.height;case"left":return e.x<t.x;case"right":return e.x>t.x+t.width;default:return!1}}const TRAP_MIN_BLOCKED=2;export function detectTraps(t,e){const n=new Map;for(const t of e)n.set(t.nativeTag,t);const o=new Map;for(const e of t){const t=n.get(e.tag),r=t?.guideAncestorTag??e.tag,a=o.get(r)??{containerTag:r,tags:new Set,directions:new Set};a.tags.add(e.tag),a.directions.add(e.direction),o.set(r,a)}const r=[];return o.forEach(t=>{if(t.directions.size<2)return;const o=new Set(t.tags);for(const n of e)n.guideAncestorTag===t.containerTag&&o.add(n.nativeTag);o.add(t.containerTag);const a=n.get(t.containerTag),i=a?.guide&&a.frame?a.frame:unionBox(Array.from(o).map(t=>n.get(t)?.frame).filter(t=>!!t));if(!i)return;let s=0,c=0;for(const n of DIRECTIONS)e.some(t=>{if(t.guide||o.has(t.nativeTag)||!t.frame)return!1;const e={x:t.frame.x+t.frame.width/2,y:t.frame.y+t.frame.height/2};return isBeyond(i,e,n)})&&(c+=1,t.directions.has(n)||(s+=1));if(0===c||s>0)return;const f=a?.guide,u=void 0!==f&&(f.trap.up||f.trap.down||f.trap.left||f.trap.right);r.push({tags:Array.from(t.tags).sort((t,e)=>t-e),containerTag:t.containerTag,directions:DIRECTIONS.filter(e=>t.directions.has(e)),guideTrapTag:u?t.containerTag:void 0})}),r}export function detectInvisibleStops(t,e,n=0){const o=new Map;for(const t of e)o.set(t.nativeTag,t);const r=new Map;for(const a of t){const t=a.toTag;if(null===t)continue;if(a.at<n)continue;const i=o.get(t),s=i?i.guide?"guide":null:e.length>0?"unknown":null;if(!s)continue;const c=r.get(t);c?(c.count+=1,c.at=a.at):r.set(t,{tag:t,reason:s,at:a.at,count:1})}return Array.from(r.values()).sort((t,e)=>e.at-t.at)}export function detectFlags(t,e,n,o,r=0){const a=detectDeadEnds(e,n,3,r);return{deadEnds:a,traps:detectTraps(a,n),invisibleStops:detectInvisibleStops(t,n,r),lostCount:o}}export function computeCoverage(t,e,n,o){const r=new Set(e),a=t.filter(t=>!t.guide),i=a.filter(t=>!r.has(t.nativeTag)).map(t=>t.nativeTag),s=o.length>=12,c=new Set;for(const t of n)null!==t.toTag&&c.add(t.toTag);const f=new Map;for(const e of t)f.set(e.nativeTag,e);const u=s?i.filter(t=>{if(c.has(t))return!1;const e=f.get(t);return!!e?.frame&&a.some(n=>n.nativeTag!==t&&r.has(n.nativeTag)&&isAdjacent(e,n))}):[];return{focusables:a.length,visited:a.filter(t=>r.has(t.nativeTag)).length,unvisited:i,suspectedUnreachable:u,meaningful:s}}const ADJACENCY_GAP=.12;function isAdjacent(t,e){const n=t.frame,o=e.frame;if(!n||!o)return!1;const r=n.x<o.x+o.width&&o.x<n.x+n.width,a=n.y<o.y+o.height&&o.y<n.y+n.height;return!!(r&&Math.max(n.y-(o.y+o.height),o.y-(n.y+n.height))<=ADJACENCY_GAP)||!!(a&&Math.max(n.x-(o.x+o.width),o.x-(n.x+n.width))<=ADJACENCY_GAP)}export function observedEdges(t,e){const n={};for(const o of e)o.fromTag===t&&null!==o.direction&&(n[o.direction]=o.toTag);return n}
|
package/lib/module/index.js
CHANGED
|
@@ -1,36 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* @buoy-gg/focus-inspector
|
|
5
|
-
*
|
|
6
|
-
* TV focus debugging for React Native TV apps, from Buoy Desktop: what holds
|
|
7
|
-
* D-pad focus right now, every focus transition with the direction that caused
|
|
8
|
-
* it, the inventory of focusable elements, and automatic flags for the three
|
|
9
|
-
* big TV focus bug classes — focus gets STUCK (dead end / trap), focus
|
|
10
|
-
* DISAPPEARS (parks on an invisible stop or leaves the RN tree), and an element
|
|
11
|
-
* is never REACHED.
|
|
12
|
-
*
|
|
13
|
-
* This package renders NOTHING on the device, and that is a hard constraint
|
|
14
|
-
* rather than a preference: on Android TV any focusable view in an overlay
|
|
15
|
-
* becomes a D-pad stop in the host app's focus order, so an on-device panel
|
|
16
|
-
* would change the navigation it is measuring. See the README.
|
|
17
|
-
*
|
|
18
|
-
* It also ships no native code — the focus stream comes from a JS-only global
|
|
19
|
-
* observer (`RawEventEmitter`'s `topFocus`/`topBlur`), which is why Buoy stays
|
|
20
|
-
* podspec-free.
|
|
21
|
-
*/
|
|
22
|
-
|
|
23
|
-
// =============================================================================
|
|
24
|
-
// EXTERNAL SYNC (device → desktop dashboard)
|
|
25
|
-
// =============================================================================
|
|
26
|
-
export { focusInspectorSyncAdapter } from "./sync/focusInspectorSyncAdapter";
|
|
27
|
-
// =============================================================================
|
|
28
|
-
// STORE (the recorded stream + its types)
|
|
29
|
-
// =============================================================================
|
|
30
|
-
export { clearHistory, getState, recordBlur, recordFocus, recordKey, resetStore, setTracking, subscribe } from "./store/focusStore";
|
|
31
|
-
// =============================================================================
|
|
32
|
-
// SCAN + DETECT (exported so the desktop panel shares one set of types)
|
|
33
|
-
// =============================================================================
|
|
34
|
-
export { scanFocusables } from "./scan/focusableScanner";
|
|
35
|
-
export { computeCoverage, detectDeadEnds, detectFlags, detectInvisibleStops, detectTraps, observedEdges } from "./detect/detectors";
|
|
36
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
"use strict";export{focusInspectorSyncAdapter}from"./sync/focusInspectorSyncAdapter";export{clearHistory,getState,recordBlur,recordFocus,recordKey,resetStore,setTracking,subscribe}from"./store/focusStore";export{scanFocusables}from"./scan/focusableScanner";export{computeCoverage,detectDeadEnds,detectFlags,detectInvisibleStops,detectTraps,observedEdges}from"./detect/detectors";
|
|
@@ -1,99 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* focusEventObserver — the global, zero-instrumentation focus source.
|
|
5
|
-
*
|
|
6
|
-
* `react-native/Libraries/Core/RawEventEmitter` mirrors every Fabric-dispatched
|
|
7
|
-
* event BEFORE React's plugins or components see it, and on both tvOS and
|
|
8
|
-
* Android TV every focus change arrives there as `topFocus` / `topBlur` with
|
|
9
|
-
* the focused view's native tag. Its own source comment blesses exactly this
|
|
10
|
-
* use ("app-specific perf monitoring … and maybe debugging").
|
|
11
|
-
*
|
|
12
|
-
* Why not the obvious alternatives:
|
|
13
|
-
* - `onFocus`/`onBlur` props would require instrumenting the app's components,
|
|
14
|
-
* and would MISS the interesting cases: focus really does park on views with
|
|
15
|
-
* no handler (a TVFocusGuideView with `destinations` is an invisible focus
|
|
16
|
-
* stop). A per-component observer reports "focus is nowhere" for the exact
|
|
17
|
-
* bug this tool exists to catch.
|
|
18
|
-
* - `TVEventHandler`'s `focus`/`blur` HWEvents are deprecated and 0.85 deleted
|
|
19
|
-
* the Fabric calls that emitted them (fork issue #1037). They still fire on
|
|
20
|
-
* the 0.83 line, so they're folded in as optional enrichment below — never
|
|
21
|
-
* required, or the tool would work on one app and not the other.
|
|
22
|
-
* - There is no root-level capture View to wrap the app in: Buoy mounts as a
|
|
23
|
-
* SIBLING of the app tree, not a parent.
|
|
24
|
-
*
|
|
25
|
-
* The deep import is guarded. If it ever moves, the snapshot degrades to
|
|
26
|
-
* `observer: "unavailable"` and the panel says so, rather than the tool taking
|
|
27
|
-
* the app's bundle down.
|
|
28
|
-
*/
|
|
29
|
-
|
|
30
|
-
import { recordBlur, recordFocus } from "../store/focusStore";
|
|
31
|
-
import { resolveRawEventEmitter } from "./rawEventEmitter";
|
|
32
|
-
let emitter = null;
|
|
33
|
-
let emitterResolved = false;
|
|
34
|
-
let subscriptions = [];
|
|
35
|
-
let status = "idle";
|
|
36
|
-
let unavailableReason = null;
|
|
37
|
-
function getEmitter() {
|
|
38
|
-
if (emitterResolved) return emitter;
|
|
39
|
-
emitterResolved = true;
|
|
40
|
-
const resolution = resolveRawEventEmitter();
|
|
41
|
-
emitter = resolution.emitter;
|
|
42
|
-
unavailableReason = resolution.reason;
|
|
43
|
-
return emitter;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
/**
|
|
47
|
-
* Pull the native tag out of a raw event. Fabric puts it on `nativeEvent.target`
|
|
48
|
-
* on both platforms (probe-verified); `nativeEvent.tag` is the older shape and
|
|
49
|
-
* costs nothing to accept.
|
|
50
|
-
*/
|
|
51
|
-
function tagOf(event) {
|
|
52
|
-
const native = event?.nativeEvent;
|
|
53
|
-
if (!native) return null;
|
|
54
|
-
const target = native.target ?? native.tag;
|
|
55
|
-
return typeof target === "number" && Number.isFinite(target) ? target : null;
|
|
56
|
-
}
|
|
57
|
-
export function attachFocusObserver() {
|
|
58
|
-
if (subscriptions.length > 0) return;
|
|
59
|
-
const raw = getEmitter();
|
|
60
|
-
if (!raw) {
|
|
61
|
-
status = "unavailable";
|
|
62
|
-
return;
|
|
63
|
-
}
|
|
64
|
-
try {
|
|
65
|
-
// Two named listeners rather than the `*` wildcard channel: the wildcard
|
|
66
|
-
// exists, but its payload contract was never runtime-verified, and named
|
|
67
|
-
// channels sidestep the question entirely.
|
|
68
|
-
subscriptions = [raw.addListener("topFocus", event => {
|
|
69
|
-
const tag = tagOf(event);
|
|
70
|
-
if (tag !== null) recordFocus(tag);
|
|
71
|
-
}), raw.addListener("topBlur", event => {
|
|
72
|
-
const tag = tagOf(event);
|
|
73
|
-
if (tag !== null) recordBlur(tag);
|
|
74
|
-
})];
|
|
75
|
-
status = "listening";
|
|
76
|
-
} catch (e) {
|
|
77
|
-
subscriptions = [];
|
|
78
|
-
status = "unavailable";
|
|
79
|
-
unavailableReason = e?.message ?? "addListener failed";
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
export function detachFocusObserver() {
|
|
83
|
-
subscriptions.forEach(subscription => {
|
|
84
|
-
try {
|
|
85
|
-
subscription.remove();
|
|
86
|
-
} catch {
|
|
87
|
-
/* a listener that's already gone is fine */
|
|
88
|
-
}
|
|
89
|
-
});
|
|
90
|
-
subscriptions = [];
|
|
91
|
-
if (status === "listening") status = "idle";
|
|
92
|
-
}
|
|
93
|
-
export function getFocusObserverStatus() {
|
|
94
|
-
return {
|
|
95
|
-
status,
|
|
96
|
-
reason: status === "unavailable" ? unavailableReason : null
|
|
97
|
-
};
|
|
98
|
-
}
|
|
99
|
-
//# sourceMappingURL=focusEventObserver.js.map
|
|
1
|
+
"use strict";import{recordBlur,recordFocus}from"../store/focusStore";import{resolveRawEventEmitter}from"./rawEventEmitter";let emitter=null,emitterResolved=!1,subscriptions=[],status="idle",unavailableReason=null;function getEmitter(){if(emitterResolved)return emitter;emitterResolved=!0;const t=resolveRawEventEmitter();return emitter=t.emitter,unavailableReason=t.reason,emitter}function tagOf(t){const e=t?.nativeEvent;if(!e)return null;const s=e.target??e.tag;return"number"==typeof s&&Number.isFinite(s)?s:null}export function attachFocusObserver(){if(subscriptions.length>0)return;const t=getEmitter();if(t)try{subscriptions=[t.addListener("topFocus",t=>{const e=tagOf(t);null!==e&&recordFocus(e)}),t.addListener("topBlur",t=>{const e=tagOf(t);null!==e&&recordBlur(e)})],status="listening"}catch(t){subscriptions=[],status="unavailable",unavailableReason=t?.message??"addListener failed"}else status="unavailable"}export function detachFocusObserver(){subscriptions.forEach(t=>{try{t.remove()}catch{}}),subscriptions=[],"listening"===status&&(status="idle")}export function getFocusObserverStatus(){return{status:status,reason:"unavailable"===status?unavailableReason:null}}
|
|
@@ -1,86 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* keyEventObserver — the direction half of the stream.
|
|
5
|
-
*
|
|
6
|
-
* D-pad HWEvents carry NO tag on either platform (an Android payload is exactly
|
|
7
|
-
* `{"eventKeyAction":1,"eventType":"right"}`), and focus events carry no
|
|
8
|
-
* direction. So key events tell you *which way the user pushed* and focus
|
|
9
|
-
* events tell you *where focus went*; the store joins them on time.
|
|
10
|
-
*
|
|
11
|
-
* `TVEventHandler.addListener` (not the `useTVEventHandler` hook) because sync
|
|
12
|
-
* adapters are not React components — nothing here mounts.
|
|
13
|
-
*
|
|
14
|
-
* On the 0.83 fork line iOS Fabric ALSO still emits tagged `focus`/`blur`
|
|
15
|
-
* HWEvents here. Those are folded into the same store as enrichment so the
|
|
16
|
-
* older line gets a focus source even if the RawEventEmitter path ever fails —
|
|
17
|
-
* never depended on, because 0.85 deleted them.
|
|
18
|
-
*/
|
|
19
|
-
|
|
20
|
-
import * as ReactNative from "react-native";
|
|
21
|
-
import { recordBlur, recordFocus, recordKey } from "../store/focusStore";
|
|
22
|
-
/**
|
|
23
|
-
* `TVEventHandler` only exists on the react-native-tvos fork. A namespace read
|
|
24
|
-
* (rather than a named import) keeps this module importable on stock RN.
|
|
25
|
-
*/
|
|
26
|
-
const RN = ReactNative;
|
|
27
|
-
export const isTV = RN.Platform?.isTV === true;
|
|
28
|
-
export const platformOS = RN.Platform?.OS ?? "unknown";
|
|
29
|
-
|
|
30
|
-
/**
|
|
31
|
-
* Long-press variants move focus the same way a tap does, so they map to the
|
|
32
|
-
* same direction. Everything else (select, menu, playPause, pans, swipes) never
|
|
33
|
-
* moves focus and is dropped rather than logged as a probe that can't resolve.
|
|
34
|
-
*/
|
|
35
|
-
const DIRECTION_BY_EVENT_TYPE = {
|
|
36
|
-
up: "up",
|
|
37
|
-
down: "down",
|
|
38
|
-
left: "left",
|
|
39
|
-
right: "right",
|
|
40
|
-
longUp: "up",
|
|
41
|
-
longDown: "down",
|
|
42
|
-
longLeft: "left",
|
|
43
|
-
longRight: "right"
|
|
44
|
-
};
|
|
45
|
-
let subscription = null;
|
|
46
|
-
function handleEvent(raw) {
|
|
47
|
-
const event = raw;
|
|
48
|
-
const eventType = event?.eventType;
|
|
49
|
-
if (typeof eventType !== "string") return;
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
* Dedupe by ignoring key DOWN, never key UP. tvOS emits keyAction 1 (up)
|
|
53
|
-
* ONLY for button presses — filtering to "down" would swallow every tvOS
|
|
54
|
-
* event — while Android's key-down dispatch sits behind a feature flag that
|
|
55
|
-
* is off by default. One press must open exactly one probe.
|
|
56
|
-
*/
|
|
57
|
-
if (event?.eventKeyAction === 0) return;
|
|
58
|
-
|
|
59
|
-
// 0.83-line iOS bonus: tagged focus/blur HWEvents. Guarded on the tag being
|
|
60
|
-
// present so 0.85's tag-less variants (if any ever return) can't record a
|
|
61
|
-
// transition to nowhere.
|
|
62
|
-
if (eventType === "focus" || eventType === "blur") {
|
|
63
|
-
if (typeof event?.tag !== "number") return;
|
|
64
|
-
if (eventType === "focus") recordFocus(event.tag);else recordBlur(event.tag);
|
|
65
|
-
return;
|
|
66
|
-
}
|
|
67
|
-
const direction = DIRECTION_BY_EVENT_TYPE[eventType];
|
|
68
|
-
if (direction) recordKey(direction);
|
|
69
|
-
}
|
|
70
|
-
export function attachKeyObserver() {
|
|
71
|
-
if (subscription || !isTV || !RN.TVEventHandler) return;
|
|
72
|
-
subscription = RN.TVEventHandler.addListener(handleEvent);
|
|
73
|
-
}
|
|
74
|
-
export function detachKeyObserver() {
|
|
75
|
-
if (!subscription) return;
|
|
76
|
-
try {
|
|
77
|
-
subscription.remove();
|
|
78
|
-
} catch {
|
|
79
|
-
/* already gone */
|
|
80
|
-
}
|
|
81
|
-
subscription = null;
|
|
82
|
-
}
|
|
83
|
-
export function isKeyObserverListening() {
|
|
84
|
-
return subscription !== null;
|
|
85
|
-
}
|
|
86
|
-
//# sourceMappingURL=keyEventObserver.js.map
|
|
1
|
+
"use strict";import*as ReactNative from"react-native";import{recordBlur,recordFocus,recordKey}from"../store/focusStore";const RN=ReactNative;export const isTV=!0===RN.Platform?.isTV;export const platformOS=RN.Platform?.OS??"unknown";const DIRECTION_BY_EVENT_TYPE={up:"up",down:"down",left:"left",right:"right",longUp:"up",longDown:"down",longLeft:"left",longRight:"right"};let subscription=null;function handleEvent(t){const e=t,r=e?.eventType;if("string"!=typeof r)return;if(0===e?.eventKeyAction)return;if("focus"===r||"blur"===r){if("number"!=typeof e?.tag)return;return void("focus"===r?recordFocus(e.tag):recordBlur(e.tag))}const n=DIRECTION_BY_EVENT_TYPE[r];n&&recordKey(n)}export function attachKeyObserver(){!subscription&&isTV&&RN.TVEventHandler&&(subscription=RN.TVEventHandler.addListener(handleEvent))}export function detachKeyObserver(){if(subscription){try{subscription.remove()}catch{}subscription=null}}export function isKeyObserverListening(){return null!==subscription}
|
|
@@ -1,40 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* The one guarded require for React Native's RawEventEmitter, kept in its own
|
|
5
|
-
* module for two reasons.
|
|
6
|
-
*
|
|
7
|
-
* 1. `react-native/Libraries/Core/RawEventEmitter` is a DEEP import. It warns
|
|
8
|
-
* under 0.85's export map and could move in any release, so the failure has
|
|
9
|
-
* to degrade to "observer unavailable" in the snapshot rather than taking
|
|
10
|
-
* the host app's bundle down. Metro only treats a require as optional when
|
|
11
|
-
* it sits LEXICALLY inside a try statement — wrapping it in a helper or an
|
|
12
|
-
* arrow makes Metro hard-fail the bundle instead.
|
|
13
|
-
* 2. It gives the unit suite a seam. Node's `require` resolves through the
|
|
14
|
-
* filesystem and ignores Vitest's module mocks, so the emitter can only be
|
|
15
|
-
* faked by mocking a module that is reached with a real `import`.
|
|
16
|
-
*/
|
|
17
|
-
|
|
18
|
-
export function resolveRawEventEmitter() {
|
|
19
|
-
let mod;
|
|
20
|
-
try {
|
|
21
|
-
mod = require("react-native/Libraries/Core/RawEventEmitter");
|
|
22
|
-
} catch (e) {
|
|
23
|
-
return {
|
|
24
|
-
emitter: null,
|
|
25
|
-
reason: e?.message ?? "RawEventEmitter is unavailable"
|
|
26
|
-
};
|
|
27
|
-
}
|
|
28
|
-
const candidate = mod?.default ?? mod;
|
|
29
|
-
if (typeof candidate?.addListener !== "function") {
|
|
30
|
-
return {
|
|
31
|
-
emitter: null,
|
|
32
|
-
reason: "RawEventEmitter has no addListener"
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
return {
|
|
36
|
-
emitter: candidate,
|
|
37
|
-
reason: null
|
|
38
|
-
};
|
|
39
|
-
}
|
|
40
|
-
//# sourceMappingURL=rawEventEmitter.js.map
|
|
1
|
+
"use strict";export function resolveRawEventEmitter(){let e;try{e=require("react-native/Libraries/Core/RawEventEmitter")}catch(e){return{emitter:null,reason:e?.message??"RawEventEmitter is unavailable"}}const t=e?.default??e;return"function"!=typeof t?.addListener?{emitter:null,reason:"RawEventEmitter has no addListener"}:{emitter:t,reason:null}}
|