While users of the Firefox release channel are just now getting to enjoy the Style Editor and the Page Inspector 3D (Tilt), we have a number of nice developer tools improvements that we’ve shipped to the Aurora channel for Firefox 13. Aurora users are up to 12 weeks ahead of the release channel.

Page Inspector

Styling CSS menus and other elements that are styled with the :hover, :active and :focus pseudo-classes has gotten much easier. You now have the ability to lock in a pseudo-class for the selected page element in the Page Inspector. I have made a 1 minute video to show this feature in action.

Right-click on the page element “infobar” for the selected element to toggle the pseudo-class lock. When you have selected an element in the Page Inspector, the infobar is the hovering box that has the tag name, element ID and classes. We are planning to add a convenient menu for this feature, but you can use pseudo-class locking today with a simple right-click.

When you reopen the Page Inspector, the HTML panel and Style sidebar will reopen as well, if you had them open when you last used Page Inspector. This saves you from having to press ctrl-H and ctrl-S to reopen them. If you’re wondering about those keyboard shortcuts, you can find those and other useful tips on the MDN page for the Page Inspector.

When using the Page Inspector 3D view, you can press the “f” key to bring an element back into view (focus it). Hint: if you don’t see the 3D button in the Page Inspector, you might have a blocklisted graphics driver. A simple driver update may be all you need.

The element context menu in the HTML panel now offers some handy actions.

Context menu on nodes in the HTML panel

Style Inspector

Context menu for the CSS rules view

The Style Inspector sidebar of the Page Inspector has had a number of useful upgrades.

You can now select and copy a rule out of the Rules view. To make things even quicker and easier, you can copy a rule or part of a rule from the context menu. Update: due to some bugs found during Aurora, the context menu shown to the right has been backed out. You can still copy rules out of the rules view by selecting the text of the rule.

In the Computed view, the links to the CSS files now go to the Style Editor rather than View Source. This can make some workflows quicker (see the video in the Style Editor section below).

Invalid entries in the rules view are now marked with a warning sign. The tooltip can give you further information about the problem.

Invalid CSS in the rules view

Rules applied as the result of a media query will be shown with the media query.

A rule with an associated media query

Style Editor and Scratchpad

The Style Editor now saves CSS files loaded via file:// URLs without prompting. This makes the workflow for experimenting with CSS very quick. This feature actually ships in Firefox 12. It was added during the Firefox 12 Aurora cycle and wasn’t in the original notes posted here.

See the 1 minute video below to get an idea of how smooth this is.

There were a couple of notable changes to the editor code that is shared by both Scratchpad and the Style Editor. Theme add-ons can now change the editor styles and you can select a whole line of code by clicking on the line number in the gutter of the editor.

Our top secret developments

I hope you enjoy these updates. I wish I could tell you more about what’s in coming releases, but no one knows when they’ll land or has any idea what could possibly be in them. In fact, only a select few can see unfinished features and we try to ensure that our secret cabal remains impenetrable.

It’s just how we roll.

Update (April 18, 2012): Note that the context menu for rules in the Style Inspector Rules view has been removed from Firefox 13. Expect to see it return in a future Firefox.