NiftyMenu 1.0

As part of my Marked 2 documentation update over the weekend, I ended up putting some more time into my (admittedly insane) NiftyMenu project. This project made me look crazy when I first posted it last year. This update is not going to help. I will have to shoot over 180 screenshots before I break even on time invested… but it’s really fun to play with.

If you missed it, NiftyMenu is a tool that perfectly recreates any Mac application’s menu bar as an HTML playground, perfect for taking screenshots. It allows you to lock a menu selection in position and add callouts, ready for perfect screenshots.

If right now you’re thinking “that kinda makes sense, but a brief screencast sure would help, and probably not make you look any more insane,” you’re in luck…

Keyboard Shortcuts in the menu

The first big change — and the impetus for this update — is that keyboard shortcuts are now shown in the menu items. This was bugging me as it was the one piece that kept the menus from being nearly perfect replications. Now they’re included, and if you option-click directly on a keyboard shortcut in a menu item, a special callout is added, highlighting the shortcut.

The keyboard shortcuts mean that the script takes significantly longer to run, as it goes back through after the fact and queries each menu item for its shortcut attributes. This is quite a hack¹, but it works. It’s only an extra 60 seconds or so, and you can switch over to Tweetbot while it runs.

Screenshots!

The second big deal is that screenshot capability is now built in. With the caveat that this only works in Chrome, you can now select the target menu item, add any desired callouts, then just hit “Shift-S” to capture a screenshot. The screenshot will automatically crop around the selected menu item and any open submenus. If it looks good, click the save button and it’s instantly saved to Downloads, automatically named for the menu path it contains.

NiftyAPI

I also revamped the JavaScript API. I refactored all of the JS as ES6 modules and made the public API chainable, so you can run something like:

NiftyAPI.config({
	darkMode: true, 
	wallpaper: 'https://brettterpstra.com/uploads/2020/03/colors.jpg',
	bgImage: true,
	arrowStyle: 'circle'
});
NiftyAPI.find('file/save').arrow().shoot();

That will set up appearance options, then find the first instance of a “save” menu that has a parent item of “file” (i.e. File->Save), select it and add an arrow, and take a screenshot.

I want this to lead to full automation of menu screenshots, but I keep running into issues. Namely, the new built-in screenshot capability only functions properly in Chrome, but Chrome’s AppleScript capabilities leave a lot to be desired. So at this point it’s a neat trick but ultimately frustrating, requiring me to write sequences in JavaScript and load them in Chrome manually. Which means I’ll probably put more hours into figuring out why, further wasting time. But, like I said, it’s fun to play with.

Anyway, if you’re writing documentation for a Mac app and need screenshots of menu items, take advantage of my time spent and check out NiftyMenu.