constructor()

in src/screencast/screencast.ts [32:93]
49 lines of code
4 McCabe index (conditional complexity)

    constructor() {
        this.backButton = document.getElementById('back') as HTMLButtonElement;
        this.forwardButton = document.getElementById('forward') as HTMLButtonElement;
        this.reloadButton = document.getElementById('reload') as HTMLButtonElement;
        this.rotateButton = document.getElementById('rotate') as HTMLButtonElement;
        this.urlInput = document.getElementById('url') as HTMLInputElement;
        this.screencastImage = document.getElementById('canvas') as HTMLImageElement;
        this.screencastWrapper = document.getElementById('canvas-wrapper') as HTMLElement;
        this.deviceSelect = document.getElementById('device') as HTMLSelectElement;
        this.inactiveOverlay = document.getElementById('inactive-overlay') as HTMLElement;

        this.backButton.addEventListener('click', () => this.onBackClick());
        this.forwardButton.addEventListener('click', () => this.onForwardClick());
        this.reloadButton.addEventListener('click', () => this.onReloadClick());
        this.rotateButton.addEventListener('click', () => this.onRotateClick());
        this.urlInput.addEventListener('keydown', event => this.onUrlKeyDown(event));

        this.deviceSelect.addEventListener('change', () => {
            if (this.deviceSelect.value.toLowerCase() === 'desktop') {
                this.fixedWidth = 0;
                this.fixedHeight = 0;
                this.screencastWrapper.classList.add('desktop');
            } else {
                const selectedOption = this.deviceSelect[this.deviceSelect.selectedIndex];
                const deviceWidth = selectedOption.getAttribute('devicewidth');
                const deviceHeight = selectedOption.getAttribute('deviceheight');
                if (deviceWidth && deviceHeight) {
                    this.fixedWidth = parseInt(deviceWidth);
                    this.fixedHeight = parseInt(deviceHeight);
                } else {
                    this.reportError(ErrorCodes.Error, 'Error while getting screencast width and height.', `Actual width: ${deviceWidth}, height: ${deviceHeight}`);
                }

                this.screencastWrapper.classList.remove('desktop');
            }
            this.updateEmulation();
        });

        this.cdpConnection.registerForEvent('Page.frameNavigated', result => this.onFrameNavigated(result));
        this.cdpConnection.registerForEvent('Page.screencastFrame', result => this.onScreencastFrame(result));
        this.cdpConnection.registerForEvent('Page.screencastVisibilityChanged', result => this.onScreencastVisibilityChanged(result));

        // This message comes from the DevToolsPanel instance.
        this.cdpConnection.registerForEvent('DevTools.toggleInspect', result => this.onToggleInspect(result));

        this.inputHandler = new ScreencastInputHandler(this.cdpConnection);

        this.cdpConnection.sendMessageToBackend('Page.enable', {});

        // Optimizing the resize event to limit how often can it be called.
        let resizeTimeout = 0 as unknown as NodeJS.Timeout;
        window.addEventListener('resize', () => {
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(() => this.updateEmulation(), 100);
        });

        this.registerInputListeners();

        // Start screencast
        this.updateEmulation();
        this.updateHistory();
    }