Introducing tabs.windowSize()

This lets a script set the window size (width, height). This a easy to implement alternative for the mobile emulation that we had in v1 (the api for this only present in XUL, not in WebExt). However the downside is that we are setting the window size instead of the viewport size. And we can not set all sizes because of OS limitations (minimum window size, actual screen resolution, etc)

Author: Joris-van-der-Wel

runner-modules/tabs/lib/background/ScriptWindow.js

@@ -2,35 +2,109 @@
 const EventEmitter = require('events').EventEmitter;
 
 const log = require('../../../../lib/logger')({hostname: 'background', MODULE: 'tabs/background/ScriptWindow'});
+const {BLANK_HTML} = require('./urls');
+const WaitForEvent = require('../../../../lib/WaitForEvent');
 
 class ScriptWindow extends EventEmitter {
-    constructor(browserWindows, browserTabs) {
+    constructor({browserWindows, browserTabs, browserWebNavigation}) {
         super();
+        this._attached = false;
         this.browserWindows = browserWindows;
         this.browserTabs = browserTabs;
+        this.browserWebNavigation = browserWebNavigation;
         this.openPromise = null;
         this.firstTabCreation = true;
         this.closed = false;
+        this._navigationCompletedWait = new WaitForEvent(); // key is the browserTabId
+        this._sizeMinusViewport = Object.freeze({width: 0, height: 0});
+        this.handleWebNavigationCompleted = this.handleWebNavigationCompleted.bind(this);
         Object.seal(this);
     }
 
+    attach() {
+        this.browserWebNavigation.onCompleted.addListener(this.handleWebNavigationCompleted);
+        this._attached = true;
+    }
+
+    detach() {
+        this._attached = false;
+        this.browserWebNavigation.onCompleted.removeListener(this.handleWebNavigationCompleted);
+    }
+
+    handleWebNavigationCompleted({tabId: browserTabId, frameId, url}) {
+        try {
+            log.debug({browserTabId, frameId, url}, 'browser.webNavigation.onCompleted');
+
+            if (frameId || url === 'about:blank') { // frameId === 0 is top; otherwise it is an iframe
+                return;
+            }
+
+            this._navigationCompletedWait.resolve(browserTabId);
+        }
+        catch (err) {
+            log.error({err}, 'Error in browser.webNavigation.onCompleted');
+        }
+    }
+
     async open() {
         if (this.closed || this.openPromise) {
             throw Error('Invalid state');
         }
 
+        log.debug({}, 'Creating new window...');
+
         this.firstTabCreation = true;
         this.openPromise = this.browserWindows.create({
-            // focused: true,
             incognito: true,
             state: 'maximized',
             url: 'about:blank',
         }).then(window => window.id);
 
         const browserWindowId = await this.openPromise;
+        const {tabs: windowTabs} = await this.browserWindows.get(browserWindowId, {populate: true});
+        const firstTabId = windowTabs[0].id;
+        await this._gatherBrowserWindowDetails(browserWindowId, firstTabId);
+
+        log.debug({browserWindowId, firstTabId, sizeMinusViewport: this.sizeMinusViewport}, 'Created a new window');
+
         this.emit('windowCreated', {browserWindowId});
     }
 
+    /**
+     * Navigate to an extension page and gather some statistics about the environment, such as the position of the viewport.
+     * @param {string} browserWindowId
+     * @param {string} firstTabId
+     * @private
+     */
+    async _gatherBrowserWindowDetails(browserWindowId, firstTabId) {
+        // navigate to blank.html and wait for the load event
+        await this._navigationCompletedWait.wait(firstTabId, async () => {
+            await this.browserTabs.update(firstTabId, {url: BLANK_HTML});
+        });
+
+        let sizeMinusViewport = [0, 0];
+        try {
+            [sizeMinusViewport] = await this.browserTabs.executeScript(firstTabId, {
+                code: '([window.outerWidth - window.innerWidth, window.outerHeight - window.innerHeight])',
+            });
+        }
+        catch (err) {
+            log.debug({browserWindowId, firstTabId, err}, 'Unable to determine the window dimension');
+        }
+
+        this._sizeMinusViewport = Object.freeze({
+            width: Number(sizeMinusViewport[0]),
+            height: Number(sizeMinusViewport[1]),
+        });
+    }
+
+    /**
+     * @return {{width: number, height: number}}
+     */
+    get sizeMinusViewport() {
+        return this._sizeMinusViewport;
+    }
+
     get isOpen() {
         return Boolean(this.openPromise);
     }
@@ -47,7 +121,6 @@ class ScriptWindow extends EventEmitter {
         const browserWindowId = await this.getBrowserWindowId();
         return await this.browserWindows.get(browserWindowId, {
             populate: true,
-            windowTypes: ['normal'],
         });
     }
 
@@ -94,6 +167,20 @@ class ScriptWindow extends EventEmitter {
         const {id: browserWindowId} = await this.getBrowserWindow();
         return browserWindowId === browserTab.windowId;
     }
+
+    async setWindowSize({width, height}) {
+        const {id: browserWindowId} = await this.getBrowserWindow();
+        await this.browserWindows.update(browserWindowId, {
+            width: Number(width),
+            height: Number(height),
+        });
+
+        const result = await this.browserWindows.get(browserWindowId);
+        return Object.freeze({
+            width: result.width,
+            height: result.height,
+        });
+    }
 }
 
 

runner-modules/tabs/lib/background/TabManager.js

@@ -19,7 +19,7 @@ class TabManager extends EventEmitter {
         this.browserTabs = browserTabs;
         this.browserWebNavigation = browserWebNavigation;
         // all tabs opened by the script end up in a single window:
-        this.scriptWindow = new ScriptWindow(browserWindows, browserTabs);
+        this.scriptWindow = new ScriptWindow({browserWindows, browserTabs, browserWebNavigation});
         this.myTabs = new TabTracker();
         this.tabContentRPC = new TabContentRPC({
             browserRuntime,
@@ -42,6 +42,7 @@ class TabManager extends EventEmitter {
 
     attach() {
         this.tabContentRPC.attach();
+        this.scriptWindow.attach();
         this.browserTabs.onCreated.addListener(this.handleTabCreated);
         this.browserWebNavigation.onBeforeNavigate.addListener(this.handleWebNavigationOnBeforeNavigate);
         this.browserWebNavigation.onCommitted.addListener(this.handleWebNavigationOnCommitted);
@@ -52,6 +53,7 @@ class TabManager extends EventEmitter {
     detach() {
         this._attached = false;
         this.tabContentRPC.detach();
+        this.scriptWindow.detach();
         this.browserTabs.onCreated.removeListener(this.handleTabCreated);
         this.browserWebNavigation.onBeforeNavigate.removeListener(this.handleWebNavigationOnBeforeNavigate);
         this.browserWebNavigation.onCommitted.removeListener(this.handleWebNavigationOnCommitted);
@@ -267,6 +269,13 @@ class TabManager extends EventEmitter {
         return this.scriptWindow.getBrowserWindowId();
     }
 
+    /**
+     * @return {{width: number, height: number}}
+     */
+    get windowSizeMinusViewport() {
+        return this.scriptWindow.sizeMinusViewport;
+    }
+
     async closeScriptWindow() {
         if (!this._attached) {
             throw illegalStateError('TabManager.closeScriptWindow: Not initialized yet or in the progress of cleaning up');
@@ -292,6 +301,10 @@ class TabManager extends EventEmitter {
 
         await this.scriptWindow.close();
     }
+
+    async setWindowSize(options) {
+        return await this.scriptWindow.setWindowSize(options);
+    }
 }
 
 module.exports = TabManager;

runner-modules/tabs/lib/background/tabsMethods.js

@@ -12,6 +12,29 @@ module.exports = (tabManager) => {
         return tab.id;
     };
 
+    const setViewportSize = async ({width: viewportWidth, height: viewportHeight}) => {
+        if (typeof viewportWidth !== 'number' || !Number.isSafeInteger(viewportWidth) || viewportWidth < 1 || viewportWidth > 7680) {
+            throw illegalArgumentError('tabs.viewportSize(): invalid argument `width`');
+        }
+
+        if (typeof viewportHeight !== 'number' || !Number.isSafeInteger(viewportHeight) || viewportHeight < 1 || viewportHeight > 4320) {
+            throw illegalArgumentError('tabs.viewPortSize(): invalid argument `height`');
+        }
+
+        const {windowSizeMinusViewport} = tabManager;
+        const width = viewportWidth + windowSizeMinusViewport.width;
+        const height = viewportHeight + windowSizeMinusViewport.height;
+        const {width: resultWidth, height: resultHeight} = await tabManager.setWindowSize({width, height});
+
+        if (width !== resultWidth || height !== resultHeight) {
+            throw illegalArgumentError(
+                `tabs.viewportSize: Failed to set the viewport size to ${viewportWidth}x${viewportHeight}. ` +
+                `After resizing the window to ${width}x${height}, the actual size is ${resultWidth}x${resultHeight}. ` +
+                'The given size is probably too small, or too large for the screen.'
+            );
+        }
+    };
+
     const navigateTab = async ({id, url}) => {
         if (typeof id !== 'string' || !tabManager.hasTab(id)) {
             throw illegalArgumentError('tabs.navigate(): invalid argument `id`');
@@ -114,6 +137,7 @@ module.exports = (tabManager) => {
 
     return new Map([
         ['tabs.create', createTab],
+        ['tabs.setViewportSize', setViewportSize],
         ['tabs.navigate', navigateTab],
         ['tabs.run', run],
         ['tabs.wait', wait],

runner-modules/tabs/lib/background/urls.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const BLANK_HTML = browser.extension.getURL('runner-modules/tabs/lib/content/blank.html');
+
+module.exports = {BLANK_HTML};

runner-modules/tabs/lib/content/blank.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Openrunner</title>
+</head>
+<body>
+</body>
+</html>

runner-modules/tabs/lib/script-env/index.js

@@ -18,7 +18,14 @@ openRunnerRegisterRunnerModule('tabs', async ({script}) => {
         });
     };
 
+    const viewportSize = async ({width, height}) => {
+        return extendStack(async () => {
+            await script.rpcCall('tabs.setViewportSize', {width, height});
+        });
+    };
+
     return {
         create,
+        viewportSize,
     };
 });

test/integration/tabs.test.js

@@ -581,4 +581,66 @@ describe('integration/tabs', {timeout: 60000, slow: 10000}, () => {
             eq(scriptStackFrames[0].runnerScriptContext, 'main');
         });
     });
+
+    specify('Changing the window size', async () => {
+        /* eslint-disable no-undef */
+        const result = await runScriptFromFunction(async () => {
+            'Openrunner-Script: v1';
+            const tabs = await include('tabs');
+            const assert = await include('assert');
+            const tab = await tabs.create();
+            await tab.navigate(injected.url, {timeout: '2s'});
+
+            {
+                await tabs.viewportSize({width: 400, height: 500});
+                const result = await tab.run(() => {
+                    return {
+                        innerHeight: window.innerHeight,
+                        outerHeight: window.outerHeight,
+                        innerWidth: window.innerWidth,
+                        outerWidth: window.outerWidth,
+                    };
+                });
+                assert.strictEqual(result.innerWidth, 400);
+                assert.strictEqual(result.innerHeight, 500);
+                assert.isAtLeast(result.outerWidth, 400);
+                assert.isAtLeast(result.outerHeight, 500);
+            }
+
+            await assert.isRejected(
+                tabs.viewportSize({width: 1, height: 2}),
+                Error,
+                /tabs.viewportSize.*failed.*set.*viewport.*size.*1x2/i
+            );
+
+            await assert.isRejected(
+                tabs.viewportSize({width: 10000, height: 500}),
+                Error,
+                /tabs.viewportSize.*invalid.*width/i
+            );
+
+            // make sure that we can recover from the prior errors
+            {
+                await tabs.viewportSize({width: 700, height: 400});
+                const result = await tab.run(() => {
+                    return {
+                        innerHeight: window.innerHeight,
+                        outerHeight: window.outerHeight,
+                        innerWidth: window.innerWidth,
+                        outerWidth: window.outerWidth,
+                    };
+                });
+                assert.strictEqual(result.innerWidth, 700);
+                assert.strictEqual(result.innerHeight, 400);
+                assert.isAtLeast(result.outerWidth, 700);
+                assert.isAtLeast(result.outerHeight, 400);
+            }
+
+        }, {url: `http://localhost:${testServerPort()}/static/static.html`});
+        /* eslint-enable no-undef */
+
+        if (result.error) {
+            throw result.error;
+        }
+    });
 });