Art Of Geek

Set Safari’s window size with one click of the mouse

February 29th, 2008 at 10:36pm madgunde

OK, here’s a hint I think a lot of you Windows switchers are going to love, and I’m sure more than a few long time Mac users will appreciate as well. I love Safari. I think it’s the best web browser out there. My primary Mac is a MacBook Pro that I use in a dual monitor setup at home, connected to a 24″ widescreen monitor, and on it’s own when at work or on the road. I use Safari all the time, no matter where I’m at, and one thing that can be annoying is having to manually move/resize my Safari window whenever I switch between single and dual monitor set up. Since Safari is always running, this is something I have to deal with at least twice a day.

For the longest time I got around this by using an AppleScript, which I placed inside my ~/Library/Scripts/Applications/Safari/ folder (where “~” represents my home folder). Then whenever I’d switch monitor setups, I’d simply run that script from within Safari via the AppleScript menu on the top right side of the menubar. The AppleScript menu can be enabled using AppleScript Utility located in the /Applications/AppleScript/ folder. For those interested, this is the script I used:

tell application "Safari"
set the properties of front window to {bounds:{1, 23, 1200, 1194}}
end tell

You can copy and past that code into Script Editor and save as a script with an appropriate name like “Set Window Size - External Display”. Just substitute your own values inside the curly brackets. The values correspond with x,y screen coordinates measured in pixels from the top-left edge of the screen, and indicate the location of the top left and bottom right corners of the window. In this case, my script told Safari to set the top left corner of the front window to 1 pixel from the left and 23 pixels down (to accomodate the menu bar), and the bottom right corner to 1200 pixels from the left and 1194 pixels down.

This script has worked well for me for several years, but it wasn’t quite as convenient as I would have liked since it required me to navigate and click on the Script menu, then click on the script I wanted to run. Being the lazy computer user I am, I’ve longed for a solution that would take one less click and would be even easier to activate. Then one day, I came across a useful hint in the ehmac.com forums about this simple javascript that you could save as a bookmark that would make Safari’s window full-screen:

javascript:self.moveTo(0,0);self.resizeTo(screen.availWidth,screen.availHeight);

This was in response to a Windows switcher who really missed a simple way to make his browser window go full screen like Windows does when you click the maximize window. Thought it was pretty handy, so I added it to my Safari Bookmarks bar and called it “Full Screen” and left it there untouched for several weeks. Turns out I never want my Safari window to fill my screen since my displays are all fairly large and wide.

I guess today I had an epiphany. Lightning had just struck my brain (that had to hurt)*. If a Javascript can set my window full-size, then it should be able to set the window to any arbitrary size. Looking at the full screen javascript, it was ridiculously obvious how to modify it to fit my needs. Simply substitute the desired width and height in the resizeTo section like so:

javascript:self.moveTo(0,0);self.resizeTo(1200,1170);

You could even specify a custom window position by changing the x,y coordinates in the moveTo section if you wish.

This in itself is quite brilliant, but still a bit inelegant having bookmarks named “Full Screen” and “Big Monitor” taking up all that space on your Bookmark bar. So I came up with some nice simple bookmark names that visually represented what I wanted to accomplish in a way that would look a bit like an icon, and take a minimal amount of space on my bookmark bar, as seen in the image to the right. So from left to right, I have |-| to resize the Safari window for my small display, |+| to resize the window for my large display and |‹ ›| to resize the window full screen.

This is how they appear in my Bookmarks window:

Just to clarify, the “|” character is achieved by pressing shift+\, and the ‹ › characters are created by pressing shift+option+3 and shift+option+4 separated by a space on a Mac. These symbols are smaller than the standard less than and greater than symbols “< >” and make for a nicer looking icon in my opinion. I was also trying to make all three “icons” appear as similar in size as possible for consistency sake and to strengthen the illusion that they are icons. What you name your bookmarks doesn’t make any difference to how they work, so be creative if my choices don’t fit your likes or needs. If you think you’ve improved on my names, let me know in the comments!

Having one-click access to these controls directly within the window is not only more convenient, but also more intuitive. It may not seem like a huge improvement over my previous AppleScript solution, but when you do the same operation multiple times a day, every day of your life, all those clicks really add up. Sometimes, it’s the little things that make all the difference.

Entry Filed under: Mac OS X, Tips