Last week we got the whole DevTools group together in beautiful, sunny London England to hang out and hack on a few things. Sunny? Yeah, unexpected, but made for some great picture taking.

At the risk of saturating Planet with developer tools-related updates, there was some pretty magical stuff happening.

Our own Debugger task force put together the start of something wonderful. It’s a very early prototype at the moment, but with a bit of bug filing and polish, I think we’ll be able to get it into something that’s functional and not hard to look at in the next few weeks.

stay tuned…

We discussed some possible ways to mitigate this and settled on including a TextArea-based fallback. Mihai’s done a tremendous job of providing a SourceEditor API in the browser that abstracts a lot of Orion’s own interface into a more general-purpose editor widget. In Firefox 10, we’ve enabled Orion by default in the Scratchpad for the first time. Cedric Vivier used the SourceEditor API for the Style Editor and it’s worth noting that it does not support the TextArea fallback at all in Firefox 11.

Now we’re trying to add some important new features to the SourceEditor component. Things like “Find in File”, “Incremental Search”, “Context Menus”… Y’know, things you’d expect from any normal text editor. The TextArea fallback has made that increasingly difficult to do and in some cases, impossible. The cost of maintaining this API has become untenable for future work.

So we’ve removed the TextArea fallback for Firefox 13.

This may have some unforeseen implications for us. We discovered earlier this week that at least one popular addon was using the SourceEditor and I wanted to broadcast this here just in case there are other developers or users who rely on the TextArea fallback. If you are one of these people and this is going to cause pain, please post here, to dev.apps.firefox or file a bug.

The first of these features is somewhat complementary to the Page Inspector and lives in its own window. The Style Editor is the hard work of Cedric Vivier and is a unique tool for editing CSS in the Web Browser. You can edit styles in a web page and immediately see the results. When you have something you like, you can save the CSS to disk and incorporate the changes on your website.

To access it, use Shift-F7.

It would be grossly unfair to not thank Paul Rouget, Dão Gottwald and Stephen Horlander for their great work reskinning the Style Editor for this release. Paul did a fantastic job on the styling while Dão kept the reviews flowing, none of which would have been possible without Stephen’s brilliant colors and design tweaks.

Another major feature we’ve landed in Firefox 11 is Tilt – a 3D View of the page’s DOM. Last year around this time, I suggested this as a possible alternative to the standard highlighter view most inspectors give developers. That became a Google Summer of Code project implemented by the more-than-capable Victor Porof who later managed the port to Firefox itself with reviews from Cedric Vivier and Benoit Jacob.

We have yet to see what kind of impact this sort of visualization has for developers, but I think as more people get used to having it, it’s going to become an invaluable tool for acquiring a high-level overview of the structure of a web-page and eventually, become a useful playground for manipulating and interacting with the structure of the page itself.

I’m really interested to see what people can do with this. We’re already seeing some strange and interesting applications of it on the web, but I think having a 3D library capable of rendering these types of meshes in Firefox itself is going to be an interesting area for exploration.

Happy 2012!

devtools.editor.component to orion in about:config.

… and then open a Scratchpad (with Shift-F4 or via the menu item in the Web Developer submenu).

Update! John via the comments mentioned that if you have already opened a Scratchpad, you will need to restart your browser for this change to take effect. Thanks for the note!

It’s currently disabled because there are some outstanding issues for RTL locales and some accessibility concerns. We hope to address those issues with upstream contributions wherever possible — Mihai’s an Orion contributor now. Eventually, this preference will become the default.

What do you get with this preference? Nice JavaScript syntax highlighting for starters. You also get other conveniences like bracket matching and (semi-)smart indentation.

This feature’s an important first-step towards making the Scratchpad a really comfortable editor for writing and testing bits of JavaScript. It gives us a solid foundation to add more interesting features to the Scratchpad in the future, and gives us a Source Editor component that we can drop into other elements.

Devtools Highlighter Integration Build, August 7, 2011, click to view on flickr.

For this build, we wanted to get some feedback on the Highlighter and Style Inspector pieces themselves. Specifically, the attribute editing in the HTML panel (bug 575234), the layout of the Style Inspector’s contents (bug 672748), the breadcrumbs in the highlighter toolbar (bug 672006) and the selected node’s “infobar” (bug 663833).

A couple of points about this build: The HTML panel and Style panels are not enabled by default. To access them, you have to press the Style and HTML buttons on the highlighter’s toolbar at the bottom of the screen. The toolbar itself and buttons are not styled yet and will be taken care of in bugs 676253 and 676255.

Note that there are bound to be bugs in this build. The unittests haven’t been completely written for each of these features yet and for some of them, it’s the first time they’ve lived together. Nevertheless, if you find bugs, feel free to file them in Firefox::Developer Tools. We’ll either dupe[1] them or use them to create more tests.

Thanks for testing! Comments in bugs are preferred to blog comments, but we’ll what we can get.

1 – Duplicate. In a Bugzilla context, mark it as RESOLVED DUPLICATE of another, pre-existing bug.

Hi,

I have a present for you.

http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-devtools/

If you go there and download the version for your operating system, you can get a sneak preview of what we’ve been working on in the Developer Tools group. It is a little rough around the edges still as it’s all a work in progress, but it gives you an idea of what we’re working towards.

The features can be found in the Web Developer submenu in the app menu on Windows (aero) and Linux or under the Tools>Web Developer menu on Mac and WinXP or Linux Firefoxes without the AppMenu.

The big feature in this build is the Highlighter available through the Inspect menu item (subject to change). It’s still using a panel for the HTML display, but that is going to be docked and de-emphasized soon enough. There’s a Style panel available through the toolbar at the bottom of the screen. The layout of this panel is going to change very shortly as well to provide more immediate access to the information you’re looking for.

The other cool easter egg in this build is the Orion editor in Scratchpad. I’m kind of ruining the surprise by telling you about it, but I just couldn’t help myself.

I’ll kick off another build in a week or two including the Style Editor and some improvements to the Web Console as well as ongoing additions to the Highlighter. Note that the updater will download the latest Nightly from mozilla-central, so if you let it update, you’ll lose this build.

Please let us know what you think. Here on this blog, on d.a.f, or file bugs against the Firefox::Developer Tools component.

I hope you like it.
Rob

let group = gBrowser.visibleTabs; // current group
group.map(function (c) c.linkedBrowser.currentURI.spec).join("\n");

Just select these two lines, right click and select “Display” and it’ll dump the currently visible URLs right into the Scratchpad. Nice.

Useful for adding links to a wiki or wherever else you might like to add links.

* – if you want to run code against the Browser Environment in Firefox, you’ll need to set devtools.chrome.enabled to true in about:config.

ps, thanks to @ttaubert for the code snippet!

So people have been opening the Scratchpad by accident and being annoyed by it.

To help mitigate this, we’ve added a Shift key modifier to the shortcut. It is now Shift-F4 on all systems.

For deets, see: bug 664746.

Just landed on Aurora, so if you’re on that channel, you should get an update shortly.

With that out of the way, I can talk about the landing of Scratchpad (formerly Workspace) into mozilla-central. It landed yesterday and you can find it in today’s Nightly under the Web Developer menu. There’s also a new submenu in Tools if you’re on a Mac or running Windows with the menubar shown. We’ve moved Page Source there as well to be consistent with the App Menu’s contents.

You can also open the Scratchpad with the F4 key for rapid access.

If you’re an extension or browser developer, you’ll want to open about:config and change devtools.chrome.enabled to true. This adds a Chrome item to the Context menu for Scratchpad. As the menu might suggest, it changes your default JavaScript context to be the browser’s chrome space.

This is brand new stuff. Mihai Sucan did a great job of converting our add-on prototype to a browser feature, but there might still be some rough edges. Please file bugs under Firefox::Devtools in bugzilla.

And then there’s the outstanding stuff we have left to do. High on that list is some actual documentation and a screencast to show how it can be used. You can and should pester me to do this. I’m hoping to do a little screencasting sometime later this week.

Good news, everyone! This morning we landed the Workspace feature in our devtools project repository. This is exciting stuff for practitioners of JavaScript and we’ll have more to write about it very soon. hint, it’s probably a lot simpler and more powerful than you think it is. Many thanks to Mihai Sucan for taking the add-on and making it a feature. Also, special thanks to Erik Vold for his contributions to the add-on. You’re in the Firefox source code now!

All is not unicorns and puppies though: there has been some concern expressed over the name of this feature. On the one hand, it might not easily convey what this thing does. A lot of things come to mind when I hear the term “workspace” used in a compu-technological context. Were it not for my years as a Smalltalker, I’d think “window manager” and it is most-definitely not that.

The other, more important issue is, how will this localize? Axel, aka Pike, aka :l10n expressed some concern over the word. To get some feedback, I’ve written a post in mozilla.dev.l10n asking for help making Workspace internationalizable. Take a read, and drop a note in there if you have any suggestions.