mirror of
https://github.com/Tencent/BrowserSkill.git
synced 2026-09-10 13:01:23 +08:00
fix(interaction): verify focus changes and honor cancellation
This commit is contained in:
drakezhang
@@ -230,154 +230,204 @@ export async function resolveBackendNode(
|
||||
}
|
||||
}
|
||||
|
||||
type FocusCheck = { focused: boolean };
|
||||
type BlurMutation =
|
||||
| { ok: true; was_focused: boolean; focused: boolean }
|
||||
| { ok: false; was_focused: boolean; focused: boolean };
|
||||
|
||||
const DEEP_FOCUS_CHECK = `function() {
|
||||
const deepActiveElement = (root) => {
|
||||
let active = root && root.activeElement;
|
||||
while (active && active.shadowRoot && active.shadowRoot.activeElement) {
|
||||
active = active.shadowRoot.activeElement;
|
||||
}
|
||||
return active;
|
||||
};
|
||||
return { focused: deepActiveElement(this.ownerDocument) === this };
|
||||
// Check the target's own root, then its hosts: closed shadow roots are not
|
||||
// reachable via host.shadowRoot. DOM focus remains meaningful in background tabs.
|
||||
const FOCUS_CHECK = `function() {
|
||||
if (!this.isConnected) return false;
|
||||
let element = this;
|
||||
while (element) {
|
||||
const root = element.getRootNode();
|
||||
if (root.activeElement !== element) return false;
|
||||
element = root.host;
|
||||
}
|
||||
return true;
|
||||
}`;
|
||||
|
||||
const BLUR_TARGET = `function() {
|
||||
const deepActiveElement = (root) => {
|
||||
let active = root && root.activeElement;
|
||||
while (active && active.shadowRoot && active.shadowRoot.activeElement) {
|
||||
active = active.shadowRoot.activeElement;
|
||||
}
|
||||
return active;
|
||||
};
|
||||
const wasFocused = deepActiveElement(this.ownerDocument) === this;
|
||||
if (typeof this.blur !== 'function') {
|
||||
return { ok: false, was_focused: wasFocused, focused: wasFocused };
|
||||
}
|
||||
if (!this.isConnected) throw new Error('blur target is detached');
|
||||
const wasFocused = (${FOCUS_CHECK}).call(this);
|
||||
if (typeof this.blur !== 'function') return { ok: false, was_focused: wasFocused };
|
||||
this.blur();
|
||||
return {
|
||||
ok: true,
|
||||
was_focused: wasFocused,
|
||||
focused: deepActiveElement(this.ownerDocument) === this,
|
||||
};
|
||||
return { ok: true, was_focused: wasFocused };
|
||||
}`;
|
||||
|
||||
interface FocusScriptReply<T> {
|
||||
result?: { value?: T };
|
||||
exceptionDetails?: { text?: string; exception?: { description?: string } };
|
||||
}
|
||||
|
||||
function checkFocusAbort(signal: AbortSignal | undefined): void {
|
||||
if (signal?.aborted) throw new DOMException("interaction aborted", "AbortError");
|
||||
}
|
||||
|
||||
// Only focus/blur use this view. Guard every CDP boundary, including commands
|
||||
// inside selector resolution and frame scrolling, without changing other tools.
|
||||
function focusCdp(cdp: CdpRunner, signal: AbortSignal | undefined): CdpRunner {
|
||||
const send = <T = unknown>(target: CdpTarget, method: string, params?: object): Promise<T> => {
|
||||
checkFocusAbort(signal);
|
||||
return cdpRunnerForTarget(cdp, target).send<T>(target.tabId, method, params);
|
||||
};
|
||||
return {
|
||||
send: (tabId, method, params) => send({ tabId }, method, params),
|
||||
sendToTarget: send,
|
||||
trackSessionTab: cdp.trackSessionTab?.bind(cdp),
|
||||
getFrameGraph: cdp.getFrameGraph
|
||||
? (tabId) => {
|
||||
checkFocusAbort(signal);
|
||||
return cdp.getFrameGraph!(tabId);
|
||||
}
|
||||
: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// tool.focus / tool.blur
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export async function handleFocus(
|
||||
export function handleFocus(
|
||||
manager: SessionManager,
|
||||
params: FocusParams,
|
||||
deps: InteractionDeps = getDefaultDeps(),
|
||||
): Promise<FocusResult | RpcError> {
|
||||
const ctxOrErr = lookupSession(manager, params, "focus");
|
||||
if (isRpcError(ctxOrErr)) return ctxOrErr;
|
||||
const ctx = ctxOrErr;
|
||||
const aborted = throwIfAborted(deps.signal);
|
||||
if (aborted) return aborted;
|
||||
const target = await resolveTargetTab(manager, ctx, params.tab_id, deps.tabsApi);
|
||||
if (isRpcError(target)) return target;
|
||||
const denied = enforceAgentWindow(ctx, target, "focus");
|
||||
if (denied) return denied;
|
||||
const dialogCursor = markDialogCursor(deps.cdp, target.tabId);
|
||||
const node = await resolveBackendNode(deps.cdp, ctx, target, params, "focus");
|
||||
if (isRpcError(node)) return node;
|
||||
const nodeCdp = cdpRunnerForTarget(deps.cdp, node.cdpTarget);
|
||||
|
||||
deps.cdp.trackSessionTab?.(ctx.sessionId, target.tabId);
|
||||
const scrollErr = await scrollElementAndFramesIntoView(
|
||||
deps.cdp,
|
||||
target.tabId,
|
||||
node.cdpTarget,
|
||||
node.backendNodeId,
|
||||
node.frameId,
|
||||
);
|
||||
if (scrollErr) return scrollErr;
|
||||
const abortedBeforeFocus = throwIfAborted(deps.signal);
|
||||
if (abortedBeforeFocus) return abortedBeforeFocus;
|
||||
|
||||
try {
|
||||
await nodeCdp.send(target.tabId, "DOM.focus", { backendNodeId: node.backendNodeId });
|
||||
const objectIdOrErr = await backendNodeToObject(nodeCdp, target.tabId, node.backendNodeId);
|
||||
if (isRpcError(objectIdOrErr)) return objectIdOrErr;
|
||||
const evaluated = await nodeCdp.send<{ result?: { value?: FocusCheck } }>(
|
||||
target.tabId,
|
||||
"Runtime.callFunctionOn",
|
||||
{
|
||||
objectId: objectIdOrErr,
|
||||
functionDeclaration: DEEP_FOCUS_CHECK,
|
||||
returnByValue: true,
|
||||
},
|
||||
);
|
||||
if (evaluated.result?.value?.focused !== true) {
|
||||
return { code: "invalid_params", message: "target element did not become focused" };
|
||||
}
|
||||
return attachDialogs(deps.cdp, target.tabId, dialogCursor, {
|
||||
tab_id: target.tabId,
|
||||
used_ref: node.usedRef,
|
||||
used_selector: node.usedSelector,
|
||||
focused: true,
|
||||
});
|
||||
} catch (err) {
|
||||
return { code: "cdp_failed", message: err instanceof Error ? err.message : String(err) };
|
||||
}
|
||||
return changeFocus(manager, params, deps, "focus");
|
||||
}
|
||||
|
||||
export async function handleBlur(
|
||||
export function handleBlur(
|
||||
manager: SessionManager,
|
||||
params: BlurParams,
|
||||
deps: InteractionDeps = getDefaultDeps(),
|
||||
): Promise<BlurResult | RpcError> {
|
||||
const ctxOrErr = lookupSession(manager, params, "blur");
|
||||
if (isRpcError(ctxOrErr)) return ctxOrErr;
|
||||
const ctx = ctxOrErr;
|
||||
const aborted = throwIfAborted(deps.signal);
|
||||
if (aborted) return aborted;
|
||||
const target = await resolveTargetTab(manager, ctx, params.tab_id, deps.tabsApi);
|
||||
if (isRpcError(target)) return target;
|
||||
const denied = enforceAgentWindow(ctx, target, "blur");
|
||||
if (denied) return denied;
|
||||
const dialogCursor = markDialogCursor(deps.cdp, target.tabId);
|
||||
const node = await resolveBackendNode(deps.cdp, ctx, target, params, "blur");
|
||||
if (isRpcError(node)) return node;
|
||||
const nodeCdp = cdpRunnerForTarget(deps.cdp, node.cdpTarget);
|
||||
deps.cdp.trackSessionTab?.(ctx.sessionId, target.tabId);
|
||||
const abortedBeforeBlur = throwIfAborted(deps.signal);
|
||||
if (abortedBeforeBlur) return abortedBeforeBlur;
|
||||
return changeFocus(manager, params, deps, "blur");
|
||||
}
|
||||
|
||||
function changeFocus(
|
||||
manager: SessionManager,
|
||||
params: FocusParams,
|
||||
deps: InteractionDeps,
|
||||
action: "focus",
|
||||
): Promise<FocusResult | RpcError>;
|
||||
function changeFocus(
|
||||
manager: SessionManager,
|
||||
params: BlurParams,
|
||||
deps: InteractionDeps,
|
||||
action: "blur",
|
||||
): Promise<BlurResult | RpcError>;
|
||||
async function changeFocus(
|
||||
manager: SessionManager,
|
||||
params: FocusParams | BlurParams,
|
||||
deps: InteractionDeps,
|
||||
action: "focus" | "blur",
|
||||
): Promise<FocusResult | BlurResult | RpcError> {
|
||||
const ctx = lookupSession(manager, params, action);
|
||||
if (isRpcError(ctx)) return ctx;
|
||||
const cdp = focusCdp(deps.cdp, deps.signal);
|
||||
let objectId: string | undefined;
|
||||
let cleanupCdp: CdpRunner | undefined;
|
||||
let tabId: number | undefined;
|
||||
try {
|
||||
const objectIdOrErr = await backendNodeToObject(nodeCdp, target.tabId, node.backendNodeId);
|
||||
if (isRpcError(objectIdOrErr)) return objectIdOrErr;
|
||||
const evaluated = await nodeCdp.send<{ result?: { value?: BlurMutation } }>(
|
||||
target.tabId,
|
||||
"Runtime.callFunctionOn",
|
||||
{
|
||||
objectId: objectIdOrErr,
|
||||
functionDeclaration: BLUR_TARGET,
|
||||
returnByValue: true,
|
||||
},
|
||||
);
|
||||
const mutation = evaluated.result?.value;
|
||||
if (!mutation?.ok) {
|
||||
return { code: "invalid_params", message: "target element does not support blur()" };
|
||||
checkFocusAbort(deps.signal);
|
||||
const target = await resolveTargetTab(manager, ctx, params.tab_id, deps.tabsApi);
|
||||
checkFocusAbort(deps.signal);
|
||||
if (isRpcError(target)) return target;
|
||||
const denied = enforceAgentWindow(ctx, target, action);
|
||||
if (denied) return denied;
|
||||
tabId = target.tabId;
|
||||
const dialogCursor = markDialogCursor(deps.cdp, tabId);
|
||||
const node = await resolveBackendNode(cdp, ctx, target, params, action);
|
||||
checkFocusAbort(deps.signal);
|
||||
if (isRpcError(node)) return node;
|
||||
const nodeCdp = cdpRunnerForTarget(cdp, node.cdpTarget);
|
||||
cleanupCdp = cdpRunnerForTarget(deps.cdp, node.cdpTarget);
|
||||
deps.cdp.trackSessionTab?.(ctx.sessionId, tabId);
|
||||
|
||||
if (action === "focus") {
|
||||
const scrollErr = await scrollElementAndFramesIntoView(
|
||||
cdp,
|
||||
tabId,
|
||||
node.cdpTarget,
|
||||
node.backendNodeId,
|
||||
node.frameId,
|
||||
);
|
||||
checkFocusAbort(deps.signal);
|
||||
if (scrollErr) return scrollErr;
|
||||
}
|
||||
if (mutation.focused) {
|
||||
return { code: "cdp_failed", message: "target element remained focused after blur()" };
|
||||
const resolved = await backendNodeToObject(nodeCdp, tabId, node.backendNodeId);
|
||||
// Keep the handle before checking cancellation so finally can release it.
|
||||
if (!isRpcError(resolved)) objectId = resolved;
|
||||
checkFocusAbort(deps.signal);
|
||||
if (isRpcError(resolved)) return resolved;
|
||||
|
||||
const runScript = async <T>(functionDeclaration: string): Promise<T | undefined> => {
|
||||
const reply = await nodeCdp.send<FocusScriptReply<T>>(
|
||||
target.tabId,
|
||||
"Runtime.callFunctionOn",
|
||||
{
|
||||
objectId,
|
||||
functionDeclaration,
|
||||
returnByValue: true,
|
||||
},
|
||||
);
|
||||
checkFocusAbort(deps.signal);
|
||||
if (reply.exceptionDetails) {
|
||||
const details = reply.exceptionDetails;
|
||||
throw new Error(
|
||||
`${action} script failed: ${details.exception?.description ?? details.text ?? "unknown exception"}`,
|
||||
);
|
||||
}
|
||||
return reply.result?.value;
|
||||
};
|
||||
|
||||
let wasFocused: boolean | undefined;
|
||||
if (action === "focus") {
|
||||
await nodeCdp.send(tabId, "DOM.focus", { backendNodeId: node.backendNodeId });
|
||||
checkFocusAbort(deps.signal);
|
||||
} else {
|
||||
const mutation = await runScript<{ ok: boolean; was_focused: boolean }>(BLUR_TARGET);
|
||||
if (typeof mutation?.ok !== "boolean" || typeof mutation.was_focused !== "boolean") {
|
||||
throw new Error("blur script returned an unexpected result");
|
||||
}
|
||||
if (!mutation.ok) {
|
||||
return { code: "invalid_params", message: "target element does not support blur()" };
|
||||
}
|
||||
wasFocused = mutation.was_focused;
|
||||
}
|
||||
return attachDialogs(deps.cdp, target.tabId, dialogCursor, {
|
||||
tab_id: target.tabId,
|
||||
// Use a separate call so microtasks from focus/blur handlers finish before
|
||||
// we report success. In particular, a blur handler can restore focus.
|
||||
const focused = await runScript<boolean>(FOCUS_CHECK);
|
||||
if (typeof focused !== "boolean") {
|
||||
throw new Error(`${action} verification returned an unexpected result`);
|
||||
}
|
||||
if (focused !== (action === "focus")) {
|
||||
throw new Error(
|
||||
action === "focus"
|
||||
? "target element did not become focused"
|
||||
: "target element remained focused after blur()",
|
||||
);
|
||||
}
|
||||
return attachDialogs(deps.cdp, tabId, dialogCursor, {
|
||||
tab_id: tabId,
|
||||
used_ref: node.usedRef,
|
||||
used_selector: node.usedSelector,
|
||||
was_focused: mutation.was_focused,
|
||||
focused: false,
|
||||
focused,
|
||||
...(action === "blur" ? { was_focused: wasFocused! } : {}),
|
||||
});
|
||||
} catch (err) {
|
||||
return { code: "cdp_failed", message: err instanceof Error ? err.message : String(err) };
|
||||
return (
|
||||
throwIfAborted(deps.signal) ?? {
|
||||
code: "cdp_failed",
|
||||
message: err instanceof Error ? err.message : String(err),
|
||||
}
|
||||
);
|
||||
} finally {
|
||||
if (objectId !== undefined && cleanupCdp && tabId !== undefined) {
|
||||
// Cleanup must also run after cancellation. Navigation may have already
|
||||
// disposed the object, which must not replace the operation's result.
|
||||
try {
|
||||
await cleanupCdp.send(tabId, "Runtime.releaseObject", { objectId });
|
||||
} catch {
|
||||
// The target or execution context may no longer exist.
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user