Schnodderbalken Schnodderbalken - 5 months ago 19
Javascript Question

Change window size of browser for test purpose

In order to test a website's (responsive) appearance with different screen resolutions I want to programmatically start browsers with a certain window size to simulate these screen sizes.

The best thing would be to change the window size while the browser is already running, although I read that the window.resizeTo() function does not work in modern browsers anymore.
I am in the context of a browser extension so I could also use the capabilities of that. However, I could not find anything here that suits my needs: https://developer.mozilla.org/en-US/Add-ons/SDK.

A not-very-satisfying solution would be starting the browser with a fixed determined screen size (although I don't know how that works, as at least Firefox has no such start parameters - https://developer.mozilla.org/en-US/docs/Mozilla/Command_Line_Options#-new-window_URL).

There must be a way to control the size of a window I guess. I also tried to wrap a around a given website's body with style width and height properties, but the website behaves completely different compared to being accessed with that window size.

I am on a Unix system (Mac OS X Yosemite).

edit

I ended up solving the problem as follows:

var tabs = require("sdk/tabs");
function showPage(tab) {
var {
viewFor
} = require("sdk/view/core");
var win = viewFor(require("sdk/windows").browserWindows[0]);
win.resizeTo(dimension.width, dimension.height);
tab.on("pageshow", attachScript);
tabs.removeListener('open', showPage);
}
tabs.on('open', showPage);

Answer

There are several possible solutions:

  1. Open about:config and make sure dom.disable_window_move_resize is set to false. Now you are able to resize Pop-up windows:

    var myWindow = window.open("about:blank", "SomeName", "width=300,height=300");
    myWindow.resizeTo(200, 400);
    
  2. Use an <iframe> and resize it.

  3. Probably the best way: Use window.resizeTo(400, 500) within an Add-on. When I try to run this line in the normal "Web Console" that belongs to a web page it doesn't work. But it works when using the "Browser Toolbox" that belongs to the whole browser chrome. I think an Add-on could have those privileges too.

    Update: I created a working example:

    var buttons        = require('sdk/ui/button/action');
        browserWindows = require("sdk/windows").browserWindows;
        viewFor        = require("sdk/view/core");
    
    buttons.ActionButton({
        id: "resize-window",
        label: "Resize Window",
        icon: {
            "16": "./icon-16.png",
            "32": "./icon-32.png",
            "64": "./icon-64.png"
        },
        onClick: handleClick
    });
    
    function handleClick(state) {
        var win = viewFor(browserWindows[0]);
        win.resizeTo(500, 500);
    }
    
  4. There is an "Responsive Design View" and also commands for use within the "Developer Toolbar" (resize to 480 800) but I don't know how they can be triggered from outside :-/.

  5. Add-ons like "Web Developer" are able to resize the window. You can look at their solution: https://github.com/chrispederick/web-developer/

  6. Add the command line arguments -width and -height while starting Firefox or opening a new window.

Probably not all solutions fit to your test environment, but hopefully at least one of them does ;).

Comments