Making Your Movable Type Menus Snappy Again

When Six Apart released the latest version of Movable Type, the software underwent a massive rewrite. The interface changed considerably from what it had been, and by most accounts it is a good change. There are, however, a few things that just don’t work quite right.

One of the things that is perhaps most frustrating is the editing box. There is little that can be done with this for now, especially if you want to maintain the WYSIWYG editor. Similarly, the syntax highlighting function of the template editor causes problems too, especially on lesser-used editors like Opera and Safari. So we have to focus elsewhere, perhaps on the menus.

Though the drop-down menus are certainly cool, they tend to get stuck open, and that is terribly annoying. There is almost nothing worse than trying to work, only to find yourself sitting there looking at a menu that appears to be looking back.

Okay, maybe that’s just me.

Still, there are plenty of people who are annoyed by this particular issue, as when discussion of the overhauled UI has taken place, this invariably comes up. Luckily, the problem has now been fixed. The problem is that you can’t just go and download the fix. At least not yet. And I can’t just give it to you. At least not yet. Maybe when MTOS actually ships – but that hasn’t happened yet. So for now, you’ll have to take care of the fix yourself. Ready?

First, you need a diff file. More than once person has been confused by this, so let me explain a little. The change actually only affects a few lines in a single file. So in order to make the change, you can make those changes manually – or you can take this diff file, and have your server do it for you. In order to generate a diff file, you take two versions of the same file and compare them. The differences are recorded to a diff file. That’s a little simplistic, but it will do for now.

In this case, the diff file looks like this:

< $Id: mt.js 62060 2007-09-05 03:28:19Z fyoshimatsu $
> $Id: mt.js 64002 2007-10-02 21:59:04Z ddavis $
> s = s.replace(/_+$/, '');
> s = s.replace(/_+/g, '_');
> if ( !el && defined( event.relatedTarget ) )
> el = DOM.getFirstAncestorByClassName( event.relatedTarget, "nav-menu", true );

What does all that mean? The important part is that it doesn’t really matter. But if you are concerned, the first line says that line 6 of the original file changed to line 6 in the new file. In other words, replace the old one with the new one. The angle brackets tell the processor what to do – in other words, remove the next line and replace it with the following line. The dashes don’t appear to actually mean anything, so I can’t say what they actually do.

The second batch of commands is an “add” command – add lines 943 and 944 after line 942 – so those are inserted. The same with the third batch. But again, in an ideal world, you don’t have to do a thing. Just take the diff file up there and save it as a file. Let’s call it menu.patch. Save it into the same directory on your server as the mt.js file (you can find this in the mt-static directory).

Then, from the command line in the mt-static directory where you have both files, type patch mt.js < menu.patch. That’s it. If you are not in the mt-static directory, both mt.js and menu.patch should be preceded by the path to the files.

If you did everything correctly, you will get output that looks something like this:

Hmm... Looks like a normal diff to me...
Patching file mt.js using Plan A...
Hunk #1 succeeded at 6.
Hunk #2 succeeded at 943.
Hunk #3 succeeded at 2125.

And that’s it. You’re done. Of course, if you don’t have access to the shell, you may have some issues. And since I can’t send it to you, then it might be a problem. In that case, you can try and apply the patch yourself, using the line numbers above as a guide.

The first line is simple enough – it’s just a change to the last person to edit the file, and you don’t even really need to change it. The second change should be inserted between these two lines:

s = s.replace(/\s+/g, '_');
return s;

The third change should be inserted between these two lines:

var el = DOM.getFirstAncestorByClassName(, "nav-menu", true );
if ( !el )

If you try and implement the patch this way, be very, very careful – and perhaps most importantly, back up your original mt.js first. Or you can wait for the next version of Movable Type to be released. Or if it’s something you really need, you can hire someone to do it for you. I’m not supposed to send you the file itself, but I can certainly make the changes directly to your file and I’d be happy to help.

Update: Well, after I went through all that, it seems like the folks at Six Apart made the patch available after all. I don’t know how long it will be available (for this version, I mean). But if you need it, go get it. Simply save the file as mt.js, then replace the one on your server. I haven’t tried this version, but I’m sure it works fine. If you’re nervous for any reason, back up your existing file first. And you can always try the method presented above.