dropdown.app.ts

import type { DropdownAction } from 'proton-pass-extension/app/content/constants.runtime';
import { DROPDOWN_IFRAME_SRC } from 'proton-pass-extension/app/content/constants.runtime';
import { DROPDOWN_MIN_HEIGHT, DROPDOWN_WIDTH } from 'proton-pass-extension/app/content/constants.static';
import { type InlineAppHandler, createInlineApp } from 'proton-pass-extension/app/content/services/inline/inline.app';
import type { InlineCloseOptions } from 'proton-pass-extension/app/content/services/inline/inline.messages';
import { InlinePortMessageType } from 'proton-pass-extension/app/content/services/inline/inline.messages';
import type { PopoverController } from 'proton-pass-extension/app/content/services/inline/inline.popover';
import { contentScriptMessage, sendMessage } from 'proton-pass-extension/lib/message/send-message';
import type { WithAutofillOrigin } from 'proton-pass-extension/types/autofill';
import type { Coords } from 'proton-pass-extension/types/inline';
import { WorkerMessageType } from 'proton-pass-extension/types/messages';

import type { PasswordAutosuggestOptions } from '@proton/pass/lib/password/types';
import type { MaybeNull } from '@proton/pass/types/utils/index';
import { asyncQueue } from '@proton/pass/utils/fp/promises';
import { createListenerStore } from '@proton/pass/utils/listener/factory';
import { logger } from '@proton/pass/utils/logger';
import { DOM_SETTLE_MS } from '@proton/pass/utils/time/next-tick';
import { wait } from '@proton/shared/lib/helpers/promise';
import noop from '@proton/utils/noop';

import type { InlineFieldTarget, InlineFrameTarget } from './dropdown.abstract';
import { createDropdownFocusController } from './dropdown.focus';
import { getDropdownPosition, intoDropdownAction, matchesDropdownAnchor, onCloseEffects } from './dropdown.utils';

export type DropdownAnchor = InlineFieldTarget | InlineFrameTarget;
export type DropdownAnchorRef = { current: MaybeNull<DropdownAnchor> };
export type AbortControllerRef = { current: MaybeNull<AbortController> };

export type DropdownActions = WithAutofillOrigin<
    | { action: DropdownAction.AUTOFILL_CC }
    | { action: DropdownAction.AUTOFILL_IDENTITY }
    | { action: DropdownAction.AUTOFILL_LOGIN; startsWith: string }
    | { action: DropdownAction.AUTOSUGGEST_ALIAS; prefix: string; aliasCreationDisabled: boolean }
    | ({ action: DropdownAction.AUTOSUGGEST_PASSWORD } & PasswordAutosuggestOptions)
>;

export type DropdownRequest = {
    action: DropdownAction;
    /** Indicates that the request was triggered from a focus event */
    autofocused: boolean;
    /** Indicates wether the initiator field was previously autofilled */
    autofilled: boolean;
} & (InlineFieldTarget | InlineFrameTarget<{ coords: Coords; origin: string }>);

export interface DropdownApp extends InlineAppHandler<DropdownRequest> {
    /** Important Note: the anchor state is heavily used to infer
     * UX decisions with regards to dropdown interaction */
    anchor: MaybeNull<DropdownAnchor>;
    focused: boolean;
    requestFocus: () => Promise<void>;
}

export const createDropdown = (popover: PopoverController): DropdownApp => {
    const anchor: DropdownAnchorRef = { current: null };
    const listeners = createListenerStore();

    const iframe = createInlineApp<DropdownRequest>({
        id: 'dropdown',
        animation: 'fadein',
        src: DROPDOWN_IFRAME_SRC,
        popover,
        dimensions: () => ({ width: DROPDOWN_WIDTH, height: DROPDOWN_MIN_HEIGHT }),
    });

    const focus = createDropdownFocusController({ iframe, popover, anchor });

    const onOpen = () => {
        const target = anchor.current;

        if (target?.type === 'frame') {
            const { formId, fieldId, frameId } = target;
            void sendMessage(
                contentScriptMessage({
                    type: WorkerMessageType.INLINE_DROPDOWN_OPENED,
                    payload: { type: 'initial', frameId, formId, fieldId },
                })
            );
        }
    };

    const onClose = async (options: InlineCloseOptions) => {
        focus.disconnect();
        const target = anchor.current;

        switch (target?.type) {
            case 'field': {
                onCloseEffects(target.field, options);
                break;
            }

            case 'frame': {
                const { formId, fieldId, frameId } = target;

                if (options.refocus) {
                    /** Cross-frame refocus coordination: Explicitly clear focus from the shadow DOM
                     * and move it to a neutral location before allowing the iframe to reclaim it.
                     * This helps the browser's focus management settle between realms (shadow DOM →
                     * top frame → iframe) and prevents race conditions where the iframe gains
                     * activeElement status but the window doesn't receive keyboard focus. */
                    popover.root.customElement.blur();
                    document.body.focus();
                    await wait(DOM_SETTLE_MS);
                }

                void sendMessage(
                    contentScriptMessage({
                        type: WorkerMessageType.INLINE_DROPDOWN_CLOSED,
                        payload: {
                            ...options,
                            type: 'initial',
                            frameId,
                            formId,
                            fieldId,
                        },
                    })
                );

                break;
            }
        }

        anchor.current = null;
    };

    const onAbort = (request: DropdownRequest) => {
        const match = matchesDropdownAnchor(anchor.current, request);
        if (match) anchor.current = null;
        else logger.debug(`[DropdownApp] aborted but anchor changed`);
    };

    const onDestroy = () => {
        anchor.current = null;
        listeners.removeAll();
        focus.disconnect();
    };

    iframe.subscribe((evt) => {
        switch (evt.type) {
            case 'open':
                return onOpen();
            case 'close':
                return onClose(evt.options);
            case 'abort':
                return onAbort(evt.request);
            case 'error':
                return iframe.destroy();
            case 'destroy':
                return onDestroy();
        }
    });

    iframe.registerMessageHandler(
        InlinePortMessageType.AUTOFILL_ACTION,
        async ({ payload }) => {
            return sendMessage(
                contentScriptMessage({
                    type: WorkerMessageType.AUTOFILL_ACTION,
                    payload,
                })
            );
        },
        { userAction: true }
    );

    const dropdown: DropdownApp = {
        get anchor() {
            return anchor.current;
        },
        get focused() {
            return focus.focused || focus.willFocus;
        },

        requestFocus: focus.requestFocus,
        close: iframe.close,
        destroy: iframe.destroy,
        getState: () => iframe.state,
        init: iframe.init,

        /** Serialize dropdown open requests through an async queue to prevent
         * race conditions. Concurrent open calls could destabilize the dropdown
         * anchor ref during simultaneous "open" requests. */
        open: asyncQueue(async (request: DropdownRequest, ctrl?: AbortController) => {
            anchor.current =
                request.type === 'field'
                    ? { type: 'field', field: request.field }
                    : { type: 'frame', fieldId: request.fieldId, formId: request.formId, frameId: request.frameId };

            const payload = await intoDropdownAction(request).catch(noop);

            if (!payload || ctrl?.signal.aborted) {
                anchor.current = null;
                return ctrl?.abort();
            }

            iframe.sendPortMessage({ type: InlinePortMessageType.DROPDOWN_ACTION, payload });
            iframe.setPosition(getDropdownPosition(request));

            await iframe.open(request, ctrl);
        }),

        sendMessage: iframe.sendPortMessage,
        subscribe: iframe.subscribe,
    };

    return dropdown;
};