@mcp-b/chrome-devtools-mcp 1.1.2 → 1.1.3

package/build/node_modules/chrome-devtools-frontend/front_end/models/emulation/DeviceModeModel.js

@@ -1,775 +0,0 @@
-// Copyright 2015 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-import * as Common from '../../core/common/common.js';
-import * as Host from '../../core/host/host.js';
-import * as i18n from '../../core/i18n/i18n.js';
-import * as SDK from '../../core/sdk/sdk.js';
-import * as Geometry from '../geometry/geometry.js';
-import { Horizontal, HorizontalSpanned, Vertical, VerticalSpanned, } from './EmulatedDevices.js';
-const UIStrings = {
-    /**
-     * @description Error message shown in the Devices settings pane when the user enters an empty
-     * width for a custom device.
-     */
-    widthCannotBeEmpty: 'Width cannot be empty.',
-    /**
-     * @description Error message shown in the Devices settings pane when the user enters an invalid
-     * width for a custom device.
-     */
-    widthMustBeANumber: 'Width must be a number.',
-    /**
-     * @description Error message shown in the Devices settings pane when the user has entered a width
-     * for a custom device that is too large.
-     * @example {9999} PH1
-     */
-    widthMustBeLessThanOrEqualToS: 'Width must be less than or equal to {PH1}.',
-    /**
-     * @description Error message shown in the Devices settings pane when the user has entered a width
-     * for a custom device that is too small.
-     * @example {50} PH1
-     */
-    widthMustBeGreaterThanOrEqualToS: 'Width must be greater than or equal to {PH1}.',
-    /**
-     * @description Error message shown in the Devices settings pane when the user enters an empty
-     * height for a custom device.
-     */
-    heightCannotBeEmpty: 'Height cannot be empty.',
-    /**
-     * @description Error message shown in the Devices settings pane when the user enters an invalid
-     * height for a custom device.
-     */
-    heightMustBeANumber: 'Height must be a number.',
-    /**
-     * @description Error message shown in the Devices settings pane when the user has entered a height
-     * for a custom device that is too large.
-     * @example {9999} PH1
-     */
-    heightMustBeLessThanOrEqualToS: 'Height must be less than or equal to {PH1}.',
-    /**
-     * @description Error message shown in the Devices settings pane when the user has entered a height
-     * for a custom device that is too small.
-     * @example {50} PH1
-     */
-    heightMustBeGreaterThanOrEqualTo: 'Height must be greater than or equal to {PH1}.',
-    /**
-     * @description Error message shown in the Devices settings pane when the user enters an invalid
-     * device pixel ratio for a custom device.
-     */
-    devicePixelRatioMustBeANumberOr: 'Device pixel ratio must be a number or blank.',
-    /**
-     * @description Error message shown in the Devices settings pane when the user enters a device
-     * pixel ratio for a custom device that is too large.
-     * @example {10} PH1
-     */
-    devicePixelRatioMustBeLessThanOr: 'Device pixel ratio must be less than or equal to {PH1}.',
-    /**
-     * @description Error message shown in the Devices settings pane when the user enters a device
-     * pixel ratio for a custom device that is too small.
-     * @example {0} PH1
-     */
-    devicePixelRatioMustBeGreater: 'Device pixel ratio must be greater than or equal to {PH1}.',
-};
-const str_ = i18n.i18n.registerUIStrings('models/emulation/DeviceModeModel.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-let deviceModeModelInstance;
-export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper {
-    #screenRect;
-    #visiblePageRect;
-    #availableSize;
-    #preferredSize;
-    #initialized;
-    #appliedDeviceSize;
-    #appliedDeviceScaleFactor;
-    #appliedUserAgentType;
-    #scaleSetting;
-    #scale;
-    #widthSetting;
-    #heightSetting;
-    #uaSetting;
-    #deviceScaleFactorSetting;
-    #deviceOutlineSetting;
-    #toolbarControlsEnabledSetting;
-    #type;
-    #device;
-    #mode;
-    #fitScale;
-    #touchEnabled;
-    #touchMobile;
-    #emulationModel;
-    #onModelAvailable;
-    #outlineRect;
-    constructor() {
-        super();
-        this.#screenRect = new Rect(0, 0, 1, 1);
-        this.#visiblePageRect = new Rect(0, 0, 1, 1);
-        this.#availableSize = new Geometry.Size(1, 1);
-        this.#preferredSize = new Geometry.Size(1, 1);
-        this.#initialized = false;
-        this.#appliedDeviceSize = new Geometry.Size(1, 1);
-        this.#appliedDeviceScaleFactor = window.devicePixelRatio;
-        this.#appliedUserAgentType = "Desktop" /* UA.DESKTOP */;
-        this.#scaleSetting = Common.Settings.Settings.instance().createSetting('emulation.device-scale', 1);
-        // We've used to allow zero before.
-        if (!this.#scaleSetting.get()) {
-            this.#scaleSetting.set(1);
-        }
-        this.#scaleSetting.addChangeListener(this.scaleSettingChanged, this);
-        this.#scale = 1;
-        this.#widthSetting = Common.Settings.Settings.instance().createSetting('emulation.device-width', 400);
-        if (this.#widthSetting.get() < MinDeviceSize) {
-            this.#widthSetting.set(MinDeviceSize);
-        }
-        if (this.#widthSetting.get() > MaxDeviceSize) {
-            this.#widthSetting.set(MaxDeviceSize);
-        }
-        this.#widthSetting.addChangeListener(this.widthSettingChanged, this);
-        this.#heightSetting = Common.Settings.Settings.instance().createSetting('emulation.device-height', 0);
-        if (this.#heightSetting.get() && this.#heightSetting.get() < MinDeviceSize) {
-            this.#heightSetting.set(MinDeviceSize);
-        }
-        if (this.#heightSetting.get() > MaxDeviceSize) {
-            this.#heightSetting.set(MaxDeviceSize);
-        }
-        this.#heightSetting.addChangeListener(this.heightSettingChanged, this);
-        this.#uaSetting = Common.Settings.Settings.instance().createSetting('emulation.device-ua', "Mobile" /* UA.MOBILE */);
-        this.#uaSetting.addChangeListener(this.uaSettingChanged, this);
-        this.#deviceScaleFactorSetting =
-            Common.Settings.Settings.instance().createSetting('emulation.device-scale-factor', 0);
-        this.#deviceScaleFactorSetting.addChangeListener(this.deviceScaleFactorSettingChanged, this);
-        this.#deviceOutlineSetting = Common.Settings.Settings.instance().moduleSetting('emulation.show-device-outline');
-        this.#deviceOutlineSetting.addChangeListener(this.deviceOutlineSettingChanged, this);
-        this.#toolbarControlsEnabledSetting = Common.Settings.Settings.instance().createSetting('emulation.toolbar-controls-enabled', true, "Session" /* Common.Settings.SettingStorageType.SESSION */);
-        this.#type = Type.None;
-        this.#device = null;
-        this.#mode = null;
-        this.#fitScale = 1;
-        this.#touchEnabled = false;
-        this.#touchMobile = false;
-        this.#emulationModel = null;
-        this.#onModelAvailable = null;
-        SDK.TargetManager.TargetManager.instance().observeModels(SDK.EmulationModel.EmulationModel, this);
-    }
-    static instance(opts) {
-        if (!deviceModeModelInstance || opts?.forceNew) {
-            deviceModeModelInstance = new DeviceModeModel();
-        }
-        return deviceModeModelInstance;
-    }
-    /**
-     * This wraps `instance()` in a try/catch because in some DevTools entry points
-     * (such as worker_app.ts) the Emulation panel is not included and as such
-     * the below code fails; it tries to instantiate the model which requires
-     * reading the value of a setting which has not been registered.
-     * See crbug.com/361515458 for an example bug that this resolves.
-     */
-    static tryInstance(opts) {
-        try {
-            return this.instance(opts);
-        }
-        catch {
-            return null;
-        }
-    }
-    static widthValidator(value) {
-        let valid = false;
-        let errorMessage;
-        if (!value) {
-            errorMessage = i18nString(UIStrings.widthCannotBeEmpty);
-        }
-        else if (!/^[\d]+$/.test(value)) {
-            errorMessage = i18nString(UIStrings.widthMustBeANumber);
-        }
-        else if (Number(value) > MaxDeviceSize) {
-            errorMessage = i18nString(UIStrings.widthMustBeLessThanOrEqualToS, { PH1: MaxDeviceSize });
-        }
-        else if (Number(value) < MinDeviceSize) {
-            errorMessage = i18nString(UIStrings.widthMustBeGreaterThanOrEqualToS, { PH1: MinDeviceSize });
-        }
-        else {
-            valid = true;
-        }
-        return { valid, errorMessage };
-    }
-    static heightValidator(value) {
-        let valid = false;
-        let errorMessage;
-        if (!value) {
-            errorMessage = i18nString(UIStrings.heightCannotBeEmpty);
-        }
-        else if (!/^[\d]+$/.test(value)) {
-            errorMessage = i18nString(UIStrings.heightMustBeANumber);
-        }
-        else if (Number(value) > MaxDeviceSize) {
-            errorMessage = i18nString(UIStrings.heightMustBeLessThanOrEqualToS, { PH1: MaxDeviceSize });
-        }
-        else if (Number(value) < MinDeviceSize) {
-            errorMessage = i18nString(UIStrings.heightMustBeGreaterThanOrEqualTo, { PH1: MinDeviceSize });
-        }
-        else {
-            valid = true;
-        }
-        return { valid, errorMessage };
-    }
-    static scaleValidator(value) {
-        let valid = false;
-        let errorMessage;
-        const parsedValue = Number(value.trim());
-        if (!value) {
-            valid = true;
-        }
-        else if (Number.isNaN(parsedValue)) {
-            errorMessage = i18nString(UIStrings.devicePixelRatioMustBeANumberOr);
-        }
-        else if (Number(value) > MaxDeviceScaleFactor) {
-            errorMessage = i18nString(UIStrings.devicePixelRatioMustBeLessThanOr, { PH1: MaxDeviceScaleFactor });
-        }
-        else if (Number(value) < MinDeviceScaleFactor) {
-            errorMessage = i18nString(UIStrings.devicePixelRatioMustBeGreater, { PH1: MinDeviceScaleFactor });
-        }
-        else {
-            valid = true;
-        }
-        return { valid, errorMessage };
-    }
-    get scaleSettingInternal() {
-        return this.#scaleSetting;
-    }
-    setAvailableSize(availableSize, preferredSize) {
-        this.#availableSize = availableSize;
-        this.#preferredSize = preferredSize;
-        this.#initialized = true;
-        this.calculateAndEmulate(false);
-    }
-    emulate(type, device, mode, scale) {
-        const resetPageScaleFactor = this.#type !== type || this.#device !== device || this.#mode !== mode;
-        this.#type = type;
-        if (type === Type.Device && device && mode) {
-            console.assert(Boolean(device) && Boolean(mode), 'Must pass device and mode for device emulation');
-            this.#mode = mode;
-            this.#device = device;
-            if (this.#initialized) {
-                const orientation = device.orientationByName(mode.orientation);
-                this.#scaleSetting.set(scale ||
-                    this.calculateFitScale(orientation.width, orientation.height, this.currentOutline(), this.currentInsets()));
-            }
-        }
-        else {
-            this.#device = null;
-            this.#mode = null;
-        }
-        if (type !== Type.None) {
-            Host.userMetrics.actionTaken(Host.UserMetrics.Action.DeviceModeEnabled);
-        }
-        this.calculateAndEmulate(resetPageScaleFactor);
-    }
-    setWidth(width) {
-        const max = Math.min(MaxDeviceSize, this.preferredScaledWidth());
-        width = Math.max(Math.min(width, max), 1);
-        this.#widthSetting.set(width);
-    }
-    setWidthAndScaleToFit(width) {
-        width = Math.max(Math.min(width, MaxDeviceSize), 1);
-        this.#scaleSetting.set(this.calculateFitScale(width, this.#heightSetting.get()));
-        this.#widthSetting.set(width);
-    }
-    setHeight(height) {
-        const max = Math.min(MaxDeviceSize, this.preferredScaledHeight());
-        height = Math.max(Math.min(height, max), 0);
-        if (height === this.preferredScaledHeight()) {
-            height = 0;
-        }
-        this.#heightSetting.set(height);
-    }
-    setHeightAndScaleToFit(height) {
-        height = Math.max(Math.min(height, MaxDeviceSize), 0);
-        this.#scaleSetting.set(this.calculateFitScale(this.#widthSetting.get(), height));
-        this.#heightSetting.set(height);
-    }
-    setScale(scale) {
-        this.#scaleSetting.set(scale);
-    }
-    device() {
-        return this.#device;
-    }
-    mode() {
-        return this.#mode;
-    }
-    type() {
-        return this.#type;
-    }
-    screenImage() {
-        return (this.#device && this.#mode) ? this.#device.modeImage(this.#mode) : '';
-    }
-    outlineImage() {
-        return (this.#device && this.#mode && this.#deviceOutlineSetting.get()) ? this.#device.outlineImage(this.#mode) :
-            '';
-    }
-    outlineRect() {
-        return this.#outlineRect || null;
-    }
-    screenRect() {
-        return this.#screenRect;
-    }
-    visiblePageRect() {
-        return this.#visiblePageRect;
-    }
-    scale() {
-        return this.#scale;
-    }
-    fitScale() {
-        return this.#fitScale;
-    }
-    appliedDeviceSize() {
-        return this.#appliedDeviceSize;
-    }
-    appliedDeviceScaleFactor() {
-        return this.#appliedDeviceScaleFactor;
-    }
-    appliedUserAgentType() {
-        return this.#appliedUserAgentType;
-    }
-    isFullHeight() {
-        return !this.#heightSetting.get();
-    }
-    isMobile() {
-        switch (this.#type) {
-            case Type.Device:
-                return this.#device ? this.#device.mobile() : false;
-            case Type.None:
-                return false;
-            case Type.Responsive:
-                return this.#uaSetting.get() === "Mobile" /* UA.MOBILE */ || this.#uaSetting.get() === "Mobile (no touch)" /* UA.MOBILE_NO_TOUCH */;
-        }
-        return false;
-    }
-    enabledSetting() {
-        return Common.Settings.Settings.instance().createSetting('emulation.show-device-mode', false);
-    }
-    scaleSetting() {
-        return this.#scaleSetting;
-    }
-    uaSetting() {
-        return this.#uaSetting;
-    }
-    deviceScaleFactorSetting() {
-        return this.#deviceScaleFactorSetting;
-    }
-    deviceOutlineSetting() {
-        return this.#deviceOutlineSetting;
-    }
-    toolbarControlsEnabledSetting() {
-        return this.#toolbarControlsEnabledSetting;
-    }
-    reset() {
-        this.#deviceScaleFactorSetting.set(0);
-        this.#scaleSetting.set(1);
-        this.setWidth(400);
-        this.setHeight(0);
-        this.#uaSetting.set("Mobile" /* UA.MOBILE */);
-    }
-    modelAdded(emulationModel) {
-        if (emulationModel.target() === SDK.TargetManager.TargetManager.instance().primaryPageTarget() &&
-            emulationModel.supportsDeviceEmulation()) {
-            this.#emulationModel = emulationModel;
-            if (this.#onModelAvailable) {
-                const callback = this.#onModelAvailable;
-                this.#onModelAvailable = null;
-                callback();
-            }
-            const resourceTreeModel = emulationModel.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
-            if (resourceTreeModel) {
-                resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.FrameResized, this.onFrameChange, this);
-                resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.FrameNavigated, this.onFrameChange, this);
-            }
-        }
-        else {
-            void emulationModel.emulateTouch(this.#touchEnabled, this.#touchMobile);
-        }
-    }
-    modelRemoved(emulationModel) {
-        if (this.#emulationModel === emulationModel) {
-            this.#emulationModel = null;
-        }
-    }
-    inspectedURL() {
-        return this.#emulationModel ? this.#emulationModel.target().inspectedURL() : null;
-    }
-    onFrameChange() {
-        const overlayModel = this.#emulationModel ? this.#emulationModel.overlayModel() : null;
-        if (!overlayModel) {
-            return;
-        }
-        this.showHingeIfApplicable(overlayModel);
-    }
-    scaleSettingChanged() {
-        this.calculateAndEmulate(false);
-    }
-    widthSettingChanged() {
-        this.calculateAndEmulate(false);
-    }
-    heightSettingChanged() {
-        this.calculateAndEmulate(false);
-    }
-    uaSettingChanged() {
-        this.calculateAndEmulate(true);
-    }
-    deviceScaleFactorSettingChanged() {
-        this.calculateAndEmulate(false);
-    }
-    deviceOutlineSettingChanged() {
-        this.calculateAndEmulate(false);
-    }
-    preferredScaledWidth() {
-        return Math.floor(this.#preferredSize.width / (this.#scaleSetting.get() || 1));
-    }
-    preferredScaledHeight() {
-        return Math.floor(this.#preferredSize.height / (this.#scaleSetting.get() || 1));
-    }
-    currentOutline() {
-        let outline = new Insets(0, 0, 0, 0);
-        if (this.#type !== Type.Device || !this.#device || !this.#mode) {
-            return outline;
-        }
-        const orientation = this.#device.orientationByName(this.#mode.orientation);
-        if (this.#deviceOutlineSetting.get()) {
-            outline = orientation.outlineInsets || outline;
-        }
-        return outline;
-    }
-    currentInsets() {
-        if (this.#type !== Type.Device || !this.#mode) {
-            return new Insets(0, 0, 0, 0);
-        }
-        return this.#mode.insets;
-    }
-    getScreenOrientationType() {
-        if (!this.#mode) {
-            throw new Error('Mode required to get orientation type.');
-        }
-        switch (this.#mode.orientation) {
-            case VerticalSpanned:
-            case Vertical:
-                return "portraitPrimary" /* Protocol.Emulation.ScreenOrientationType.PortraitPrimary */;
-            case HorizontalSpanned:
-            case Horizontal:
-            default:
-                return "landscapePrimary" /* Protocol.Emulation.ScreenOrientationType.LandscapePrimary */;
-        }
-    }
-    calculateAndEmulate(resetPageScaleFactor) {
-        if (!this.#emulationModel) {
-            this.#onModelAvailable = this.calculateAndEmulate.bind(this, resetPageScaleFactor);
-        }
-        const mobile = this.isMobile();
-        const overlayModel = this.#emulationModel ? this.#emulationModel.overlayModel() : null;
-        if (overlayModel) {
-            this.showHingeIfApplicable(overlayModel);
-        }
-        if (this.#type === Type.Device && this.#device && this.#mode) {
-            const orientation = this.#device.orientationByName(this.#mode.orientation);
-            const outline = this.currentOutline();
-            const insets = this.currentInsets();
-            this.#fitScale = this.calculateFitScale(orientation.width, orientation.height, outline, insets);
-            if (mobile) {
-                this.#appliedUserAgentType = this.#device.touch() ? "Mobile" /* UA.MOBILE */ : "Mobile (no touch)" /* UA.MOBILE_NO_TOUCH */;
-            }
-            else {
-                this.#appliedUserAgentType = this.#device.touch() ? "Desktop (touch)" /* UA.DESKTOP_TOUCH */ : "Desktop" /* UA.DESKTOP */;
-            }
-            this.applyDeviceMetrics(new Geometry.Size(orientation.width, orientation.height), insets, outline, this.#scaleSetting.get(), this.#device.deviceScaleFactor, mobile, this.getScreenOrientationType(), resetPageScaleFactor);
-            this.applyUserAgent(this.#device.userAgent, this.#device.userAgentMetadata);
-            this.applyTouch(this.#device.touch(), mobile);
-        }
-        else if (this.#type === Type.None) {
-            this.#fitScale = this.calculateFitScale(this.#availableSize.width, this.#availableSize.height);
-            this.#appliedUserAgentType = "Desktop" /* UA.DESKTOP */;
-            this.applyDeviceMetrics(this.#availableSize, new Insets(0, 0, 0, 0), new Insets(0, 0, 0, 0), 1, 0, mobile, null, resetPageScaleFactor);
-            this.applyUserAgent('', null);
-            this.applyTouch(false, false);
-        }
-        else if (this.#type === Type.Responsive) {
-            let screenWidth = this.#widthSetting.get();
-            if (!screenWidth || screenWidth > this.preferredScaledWidth()) {
-                screenWidth = this.preferredScaledWidth();
-            }
-            let screenHeight = this.#heightSetting.get();
-            if (!screenHeight || screenHeight > this.preferredScaledHeight()) {
-                screenHeight = this.preferredScaledHeight();
-            }
-            const defaultDeviceScaleFactor = mobile ? defaultMobileScaleFactor : 0;
-            this.#fitScale = this.calculateFitScale(this.#widthSetting.get(), this.#heightSetting.get());
-            this.#appliedUserAgentType = this.#uaSetting.get();
-            this.applyDeviceMetrics(new Geometry.Size(screenWidth, screenHeight), new Insets(0, 0, 0, 0), new Insets(0, 0, 0, 0), this.#scaleSetting.get(), this.#deviceScaleFactorSetting.get() || defaultDeviceScaleFactor, mobile, screenHeight >= screenWidth ? "portraitPrimary" /* Protocol.Emulation.ScreenOrientationType.PortraitPrimary */ :
-                "landscapePrimary" /* Protocol.Emulation.ScreenOrientationType.LandscapePrimary */, resetPageScaleFactor);
-            this.applyUserAgent(mobile ? defaultMobileUserAgent : '', mobile ? defaultMobileUserAgentMetadata : null);
-            this.applyTouch(this.#uaSetting.get() === "Desktop (touch)" /* UA.DESKTOP_TOUCH */ || this.#uaSetting.get() === "Mobile" /* UA.MOBILE */, this.#uaSetting.get() === "Mobile" /* UA.MOBILE */);
-        }
-        if (overlayModel) {
-            overlayModel.setShowViewportSizeOnResize(this.#type === Type.None);
-        }
-        this.dispatchEventToListeners("Updated" /* Events.UPDATED */);
-    }
-    calculateFitScale(screenWidth, screenHeight, outline, insets) {
-        const outlineWidth = outline ? outline.left + outline.right : 0;
-        const outlineHeight = outline ? outline.top + outline.bottom : 0;
-        const insetsWidth = insets ? insets.left + insets.right : 0;
-        const insetsHeight = insets ? insets.top + insets.bottom : 0;
-        let scale = Math.min(screenWidth ? this.#preferredSize.width / (screenWidth + outlineWidth) : 1, screenHeight ? this.#preferredSize.height / (screenHeight + outlineHeight) : 1);
-        scale = Math.min(Math.floor(scale * 100), 100);
-        let sharpScale = scale;
-        while (sharpScale > scale * 0.7) {
-            let sharp = true;
-            if (screenWidth) {
-                sharp = sharp && Number.isInteger((screenWidth - insetsWidth) * sharpScale / 100);
-            }
-            if (screenHeight) {
-                sharp = sharp && Number.isInteger((screenHeight - insetsHeight) * sharpScale / 100);
-            }
-            if (sharp) {
-                return sharpScale / 100;
-            }
-            sharpScale -= 1;
-        }
-        return scale / 100;
-    }
-    setSizeAndScaleToFit(width, height) {
-        this.#scaleSetting.set(this.calculateFitScale(width, height));
-        this.setWidth(width);
-        this.setHeight(height);
-    }
-    applyUserAgent(userAgent, userAgentMetadata) {
-        SDK.NetworkManager.MultitargetNetworkManager.instance().setUserAgentOverride(userAgent, userAgentMetadata);
-    }
-    applyDeviceMetrics(screenSize, insets, outline, scale, deviceScaleFactor, mobile, screenOrientation, resetPageScaleFactor) {
-        screenSize.width = Math.max(1, Math.floor(screenSize.width));
-        screenSize.height = Math.max(1, Math.floor(screenSize.height));
-        let pageWidth = screenSize.width - insets.left - insets.right;
-        let pageHeight = screenSize.height - insets.top - insets.bottom;
-        const positionX = insets.left;
-        const positionY = insets.top;
-        const screenOrientationAngle = screenOrientation === "landscapePrimary" /* Protocol.Emulation.ScreenOrientationType.LandscapePrimary */ ? 90 : 0;
-        this.#appliedDeviceSize = screenSize;
-        this.#appliedDeviceScaleFactor = deviceScaleFactor || window.devicePixelRatio;
-        this.#screenRect = new Rect(Math.max(0, (this.#availableSize.width - screenSize.width * scale) / 2), outline.top * scale, screenSize.width * scale, screenSize.height * scale);
-        this.#outlineRect = new Rect(this.#screenRect.left - outline.left * scale, 0, (outline.left + screenSize.width + outline.right) * scale, (outline.top + screenSize.height + outline.bottom) * scale);
-        this.#visiblePageRect = new Rect(positionX * scale, positionY * scale, Math.min(pageWidth * scale, this.#availableSize.width - this.#screenRect.left - positionX * scale), Math.min(pageHeight * scale, this.#availableSize.height - this.#screenRect.top - positionY * scale));
-        this.#scale = scale;
-        const displayFeature = this.getDisplayFeature();
-        if (!displayFeature) {
-            // When sending displayFeature, we cannot use the optimization below due to backend restrictions.
-            if (scale === 1 && this.#availableSize.width >= screenSize.width &&
-                this.#availableSize.height >= screenSize.height) {
-                // When we have enough space, no page size override is required. This will speed things up and remove lag.
-                pageWidth = 0;
-                pageHeight = 0;
-            }
-            if (this.#visiblePageRect.width === pageWidth * scale && this.#visiblePageRect.height === pageHeight * scale &&
-                Number.isInteger(pageWidth * scale) && Number.isInteger(pageHeight * scale)) {
-                // When we only have to apply scale, do not resize the page. This will speed things up and remove lag.
-                pageWidth = 0;
-                pageHeight = 0;
-            }
-        }
-        if (!this.#emulationModel) {
-            return;
-        }
-        if (resetPageScaleFactor) {
-            void this.#emulationModel.resetPageScaleFactor();
-        }
-        if (pageWidth || pageHeight || mobile || deviceScaleFactor || scale !== 1 || screenOrientation || displayFeature) {
-            const metrics = {
-                width: pageWidth,
-                height: pageHeight,
-                deviceScaleFactor,
-                mobile,
-                scale,
-                screenWidth: screenSize.width,
-                screenHeight: screenSize.height,
-                positionX,
-                positionY,
-                dontSetVisibleSize: true,
-                displayFeature: undefined,
-                devicePosture: undefined,
-                screenOrientation: undefined,
-            };
-            if (displayFeature) {
-                metrics.displayFeature = displayFeature;
-                metrics.devicePosture = { type: "folded" /* Protocol.Emulation.DevicePostureType.Folded */ };
-            }
-            else {
-                metrics.devicePosture = { type: "continuous" /* Protocol.Emulation.DevicePostureType.Continuous */ };
-            }
-            if (screenOrientation) {
-                metrics.screenOrientation = { type: screenOrientation, angle: screenOrientationAngle };
-            }
-            void this.#emulationModel.emulateDevice(metrics);
-        }
-        else {
-            void this.#emulationModel.emulateDevice(null);
-        }
-    }
-    exitHingeMode() {
-        const overlayModel = this.#emulationModel ? this.#emulationModel.overlayModel() : null;
-        if (overlayModel) {
-            overlayModel.showHingeForDualScreen(null);
-        }
-    }
-    async captureScreenshot(fullSize, clip) {
-        const screenCaptureModel = this.#emulationModel ? this.#emulationModel.target().model(SDK.ScreenCaptureModel.ScreenCaptureModel) : null;
-        if (!screenCaptureModel) {
-            return null;
-        }
-        let screenshotMode;
-        if (clip) {
-            screenshotMode = "fromClip" /* SDK.ScreenCaptureModel.ScreenshotMode.FROM_CLIP */;
-        }
-        else if (fullSize) {
-            screenshotMode = "fullpage" /* SDK.ScreenCaptureModel.ScreenshotMode.FULLPAGE */;
-        }
-        else {
-            screenshotMode = "fromViewport" /* SDK.ScreenCaptureModel.ScreenshotMode.FROM_VIEWPORT */;
-        }
-        const overlayModel = this.#emulationModel ? this.#emulationModel.overlayModel() : null;
-        if (overlayModel) {
-            overlayModel.setShowViewportSizeOnResize(false);
-        }
-        const screenshot = await screenCaptureModel.captureScreenshot("png" /* Protocol.Page.CaptureScreenshotRequestFormat.Png */, 100, screenshotMode, clip);
-        const deviceMetrics = {
-            width: 0,
-            height: 0,
-            deviceScaleFactor: 0,
-            mobile: false,
-        };
-        if (fullSize && this.#emulationModel) {
-            if (this.#device && this.#mode) {
-                const orientation = this.#device.orientationByName(this.#mode.orientation);
-                deviceMetrics.width = orientation.width;
-                deviceMetrics.height = orientation.height;
-                const dispFeature = this.getDisplayFeature();
-                if (dispFeature) {
-                    // @ts-expect-error: displayFeature isn't in protocol.ts but is an
-                    // experimental flag:
-                    // https://chromedevtools.github.io/devtools-protocol/tot/Emulation/#method-setDeviceMetricsOverride
-                    deviceMetrics.displayFeature = dispFeature;
-                }
-            }
-            else {
-                deviceMetrics.width = 0;
-                deviceMetrics.height = 0;
-            }
-            await this.#emulationModel.emulateDevice(deviceMetrics);
-        }
-        this.calculateAndEmulate(false);
-        return screenshot;
-    }
-    applyTouch(touchEnabled, mobile) {
-        this.#touchEnabled = touchEnabled;
-        this.#touchMobile = mobile;
-        for (const emulationModel of SDK.TargetManager.TargetManager.instance().models(SDK.EmulationModel.EmulationModel)) {
-            void emulationModel.emulateTouch(touchEnabled, mobile);
-        }
-    }
-    showHingeIfApplicable(overlayModel) {
-        const orientation = (this.#device && this.#mode) ? this.#device.orientationByName(this.#mode.orientation) : null;
-        if (orientation?.hinge) {
-            overlayModel.showHingeForDualScreen(orientation.hinge);
-            return;
-        }
-        overlayModel.showHingeForDualScreen(null);
-    }
-    getDisplayFeatureOrientation() {
-        if (!this.#mode) {
-            throw new Error('Mode required to get display feature orientation.');
-        }
-        switch (this.#mode.orientation) {
-            case VerticalSpanned:
-            case Vertical:
-                return "vertical" /* Protocol.Emulation.DisplayFeatureOrientation.Vertical */;
-            case HorizontalSpanned:
-            case Horizontal:
-            default:
-                return "horizontal" /* Protocol.Emulation.DisplayFeatureOrientation.Horizontal */;
-        }
-    }
-    getDisplayFeature() {
-        if (!this.#device || !this.#mode ||
-            (this.#mode.orientation !== VerticalSpanned && this.#mode.orientation !== HorizontalSpanned)) {
-            return null;
-        }
-        const orientation = this.#device.orientationByName(this.#mode.orientation);
-        if (!orientation?.hinge) {
-            return null;
-        }
-        const hinge = orientation.hinge;
-        return {
-            orientation: this.getDisplayFeatureOrientation(),
-            offset: (this.#mode.orientation === VerticalSpanned) ? hinge.x : hinge.y,
-            maskLength: (this.#mode.orientation === VerticalSpanned) ? hinge.width : hinge.height,
-        };
-    }
-}
-export class Insets {
-    left;
-    top;
-    right;
-    bottom;
-    constructor(left, top, right, bottom) {
-        this.left = left;
-        this.top = top;
-        this.right = right;
-        this.bottom = bottom;
-    }
-    isEqual(insets) {
-        return insets !== null && this.left === insets.left && this.top === insets.top && this.right === insets.right &&
-            this.bottom === insets.bottom;
-    }
-}
-export class Rect {
-    left;
-    top;
-    width;
-    height;
-    constructor(left, top, width, height) {
-        this.left = left;
-        this.top = top;
-        this.width = width;
-        this.height = height;
-    }
-    isEqual(rect) {
-        return rect !== null && this.left === rect.left && this.top === rect.top && this.width === rect.width &&
-            this.height === rect.height;
-    }
-    scale(scale) {
-        return new Rect(this.left * scale, this.top * scale, this.width * scale, this.height * scale);
-    }
-    relativeTo(origin) {
-        return new Rect(this.left - origin.left, this.top - origin.top, this.width, this.height);
-    }
-    rebaseTo(origin) {
-        return new Rect(this.left + origin.left, this.top + origin.top, this.width, this.height);
-    }
-}
-export var Type;
-(function (Type) {
-    /* eslint-disable @typescript-eslint/naming-convention -- Used by web_tests. */
-    Type["None"] = "None";
-    Type["Responsive"] = "Responsive";
-    Type["Device"] = "Device";
-    /* eslint-enable @typescript-eslint/naming-convention */
-})(Type || (Type = {}));
-export const MinDeviceSize = 50;
-export const MaxDeviceSize = 9999;
-export const MinDeviceScaleFactor = 0;
-export const MaxDeviceScaleFactor = 10;
-export const MaxDeviceNameLength = 50;
-const mobileUserAgent = 'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36';
-const defaultMobileUserAgent = SDK.NetworkManager.MultitargetNetworkManager.patchUserAgentWithChromeVersion(mobileUserAgent);
-const defaultMobileUserAgentMetadata = {
-    platform: 'Android',
-    platformVersion: '6.0',
-    architecture: '',
-    model: 'Nexus 5',
-    mobile: true,
-};
-export const defaultMobileScaleFactor = 2;