"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.selectNonDualScreenDevice = exports.waitForZoom = exports.waitForWidthOfDevice = exports.toggleAutoAdjustZoom = exports.getZoom = exports.getWidthOfDevice = exports.clickToggleButton = exports.getDevicePostureDropDown = exports.clickDevicePosture = exports.waitForZoomDropDownNotExpanded = exports.selectFoldableDevice = exports.selectDualScreen = exports.selectTestDevice = exports.selectDevice = exports.selectEdit = exports.selectToggleButton = exports.clickWidthInput = exports.selectZoomLevel = exports.clickZoomDropDown = exports.clickDevicesDropDown = exports.getButtonDisabled = exports.startEmulationWithDualScreenPage = exports.showMediaQueryInspector = exports.openDeviceToolbar = exports.clickDeviceModeToggler = exports.deviceModeIsEnabled = void 0;
const DEVICE_TOOLBAR_TOGGLER_SELECTOR = '[aria-label="Toggle device toolbar"]';
const DEVICE_TOOLBAR_SELECTOR = '.device-mode-toolbar';
const DEVICE_TOOLBAR_OPTIONS_SELECTOR = '.device-mode-toolbar .device-mode-toolbar-options';
const MEDIA_QUERY_INSPECTOR_SELECTOR = '.media-inspector-view';
const DEVICE_LIST_DROPDOWN_SELECTOR = 'select';
const ZOOM_LIST_DROPDOWN_SELECTOR = '[aria-label*="Zoom"]';
const DUAL_SCREEN_BUTTON_SELECTOR = 'devtools-button[title="Toggle dual-screen mode"]';
const DEVICE_POSTURE_DROPDOWN_SELECTOR = '[aria-label="Device posture"]';
const SCREEN_DIM_INPUT_SELECTOR = '[title="Width"]';
const AUTO_AUTO_ADJUST_ZOOM_SELECTOR = '[aria-label*="Auto-adjust zoom"]';
const deviceModeIsEnabled = async (inspectedPage) => {
    // Check the userAgent string to see whether emulation is really enabled.
    const userAgent = await inspectedPage.evaluate(() => navigator.userAgent);
    return userAgent.includes('Mobile');
};
exports.deviceModeIsEnabled = deviceModeIsEnabled;
const clickDeviceModeToggler = async (devToolsPage) => {
    const deviceToolbarToggler = await devToolsPage.waitFor(DEVICE_TOOLBAR_TOGGLER_SELECTOR);
    await devToolsPage.clickElement(deviceToolbarToggler);
};
exports.clickDeviceModeToggler = clickDeviceModeToggler;
const openDeviceToolbar = async (devToolsPage, inspectedPage) => {
    if (await (0, exports.deviceModeIsEnabled)(inspectedPage)) {
        return;
    }
    await (0, exports.clickDeviceModeToggler)(devToolsPage);
    await devToolsPage.waitFor(DEVICE_TOOLBAR_SELECTOR);
};
exports.openDeviceToolbar = openDeviceToolbar;
const showMediaQueryInspector = async (devToolsPage) => {
    const inspector = await devToolsPage.$(MEDIA_QUERY_INSPECTOR_SELECTOR);
    if (inspector) {
        return;
    }
    await devToolsPage.click(DEVICE_TOOLBAR_OPTIONS_SELECTOR);
    await devToolsPage.pressKey('ArrowDown');
    await devToolsPage.pressKey('Enter');
    await devToolsPage.waitFor(MEDIA_QUERY_INSPECTOR_SELECTOR);
};
exports.showMediaQueryInspector = showMediaQueryInspector;
const startEmulationWithDualScreenPage = async (devToolsPage, inspectedPage) => {
    await inspectedPage.goToResource('emulation/dual-screen-inspector.html');
    await devToolsPage.waitFor('.tabbed-pane-left-toolbar');
    await (0, exports.openDeviceToolbar)(devToolsPage, inspectedPage);
};
exports.startEmulationWithDualScreenPage = startEmulationWithDualScreenPage;
const getButtonDisabled = async (spanButton) => {
    return await spanButton.evaluate(e => {
        return e.disabled;
    });
};
exports.getButtonDisabled = getButtonDisabled;
const clickDevicesDropDown = async (devToolsPage) => {
    const toolbar = await devToolsPage.waitFor(DEVICE_TOOLBAR_SELECTOR);
    await devToolsPage.click(DEVICE_LIST_DROPDOWN_SELECTOR, { root: toolbar });
};
exports.clickDevicesDropDown = clickDevicesDropDown;
const clickZoomDropDown = async (devToolsPage) => {
    const toolbar = await devToolsPage.waitFor(DEVICE_TOOLBAR_SELECTOR);
    await devToolsPage.click(ZOOM_LIST_DROPDOWN_SELECTOR, { root: toolbar });
};
exports.clickZoomDropDown = clickZoomDropDown;
const selectOption = async (devToolsPage, element, value) => {
    await element.evaluate((el, text) => {
        const select = el;
        const option = Array.from(select.options).find(o => o.text === text || o.value === text);
        if (option) {
            select.value = option.value;
            select.dispatchEvent(new Event('change'));
        }
    }, value);
};
const selectDeviceItem = async (devToolsPage, value) => {
    const toolbar = await devToolsPage.waitFor(DEVICE_TOOLBAR_SELECTOR);
    const element = await devToolsPage.waitFor(DEVICE_LIST_DROPDOWN_SELECTOR, toolbar);
    await selectOption(devToolsPage, element, value);
};
const selectZoomLevel = async (devToolsPage, text) => {
    const zoomSelect = await devToolsPage.waitFor(ZOOM_LIST_DROPDOWN_SELECTOR);
    await selectOption(devToolsPage, zoomSelect, text);
};
exports.selectZoomLevel = selectZoomLevel;
const clickWidthInput = async (devToolsPage) => {
    const toolbar = await devToolsPage.waitFor(DEVICE_TOOLBAR_SELECTOR);
    await devToolsPage.click(SCREEN_DIM_INPUT_SELECTOR, { root: toolbar });
};
exports.clickWidthInput = clickWidthInput;
const selectToggleButton = async (devToolsPage) => {
    // button that toggles between single and double screen.
    const toggleButton = await devToolsPage.$(DUAL_SCREEN_BUTTON_SELECTOR);
    return toggleButton;
};
exports.selectToggleButton = selectToggleButton;
const selectEdit = async (devToolsPage) => {
    await selectDeviceItem(devToolsPage, 'Edit');
};
exports.selectEdit = selectEdit;
const selectDevice = async (name, devToolsPage) => {
    await selectDeviceItem(devToolsPage, name);
};
exports.selectDevice = selectDevice;
const selectTestDevice = async (devToolsPage) => {
    await selectDeviceItem(devToolsPage, 'Test device');
};
exports.selectTestDevice = selectTestDevice;
/** Test if span button works when emulating a dual screen device. **/
const selectDualScreen = async (devToolsPage) => {
    await selectDeviceItem(devToolsPage, 'Surface Duo');
};
exports.selectDualScreen = selectDualScreen;
const selectFoldableDevice = async (devToolsPage) => {
    await selectDeviceItem(devToolsPage, 'Asus Zenbook Fold');
};
exports.selectFoldableDevice = selectFoldableDevice;
const waitForNotExpanded = async (selector, devToolsPage) => {
    const toolbar = await devToolsPage.waitFor(DEVICE_TOOLBAR_SELECTOR);
    const dropdown = await devToolsPage.waitFor(selector, toolbar);
    await devToolsPage.waitForFunction(async () => {
        const expanded = await dropdown.evaluate(el => el.getAttribute('aria-expanded'));
        return expanded === null;
    });
};
const waitForZoomDropDownNotExpanded = async (devToolsPage) => {
    await waitForNotExpanded(ZOOM_LIST_DROPDOWN_SELECTOR, devToolsPage);
};
exports.waitForZoomDropDownNotExpanded = waitForZoomDropDownNotExpanded;
const clickDevicePosture = async (name, devToolsPage) => {
    const toolbar = await devToolsPage.waitFor(DEVICE_TOOLBAR_SELECTOR);
    const element = await devToolsPage.waitFor(DEVICE_POSTURE_DROPDOWN_SELECTOR, toolbar);
    await selectOption(devToolsPage, element, name);
};
exports.clickDevicePosture = clickDevicePosture;
const getDevicePostureDropDown = async (devToolsPage) => {
    // dropdown menu for the posture selection.
    const dropdown = await devToolsPage.$(DEVICE_POSTURE_DROPDOWN_SELECTOR);
    return dropdown;
};
exports.getDevicePostureDropDown = getDevicePostureDropDown;
const clickToggleButton = async (devToolsPage) => {
    // make sure the toggle button is clickable.
    await devToolsPage.click(DUAL_SCREEN_BUTTON_SELECTOR);
};
exports.clickToggleButton = clickToggleButton;
const getWidthOfDevice = async (devToolsPage) => {
    // Read the width of spanned duo to make sure spanning works.
    const widthInput = await devToolsPage.waitFor(SCREEN_DIM_INPUT_SELECTOR);
    return await widthInput.evaluate(e => e.value);
};
exports.getWidthOfDevice = getWidthOfDevice;
const getZoom = async (devToolsPage) => {
    // Read the width of spanned duo to make sure spanning works.
    const zoomSelect = await devToolsPage.waitFor(ZOOM_LIST_DROPDOWN_SELECTOR);
    return await zoomSelect.evaluate(e => {
        const select = e;
        return select.options[select.selectedIndex].text;
    });
};
exports.getZoom = getZoom;
const toggleAutoAdjustZoom = async (devToolsPage) => {
    const toolbar = await devToolsPage.waitFor(DEVICE_TOOLBAR_SELECTOR);
    await devToolsPage.click(AUTO_AUTO_ADJUST_ZOOM_SELECTOR, { root: toolbar });
};
exports.toggleAutoAdjustZoom = toggleAutoAdjustZoom;
const waitForWidthOfDevice = async (devToolsPage, expectedWidth) => {
    await devToolsPage.waitForFunction(async () => await (0, exports.getWidthOfDevice)(devToolsPage) === expectedWidth);
};
exports.waitForWidthOfDevice = waitForWidthOfDevice;
const waitForZoom = async (devToolsPage, expectedZoom) => {
    await devToolsPage.waitForFunction(async () => await (0, exports.getZoom)(devToolsPage) === expectedZoom);
};
exports.waitForZoom = waitForZoom;
const selectNonDualScreenDevice = async (devToolsPage) => {
    await selectDeviceItem(devToolsPage, 'iPad');
};
exports.selectNonDualScreenDevice = selectNonDualScreenDevice;
//# sourceMappingURL=emulation-helpers.js.map