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!

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.

One gotcha: If you’re running Firefox Beta 11 or under, you might want to wait for Beta 12 to come out before upgrading (which should be tagged for building today or tomorrow). If you’re on a nightly, you’ll want to upgrade right away.

The reason for the fix is a change to the PropertyPanel which landed this week in mozilla-central made it impossible to close an object inspector panel opened from a Workspace.

Also, a newer version of the Bookmarks Deiconizer Add-on has been approved and released that fixes the problem of icons being “re-iconized” when opening the bookmarks editor panel (star panel). It also now restores your bookmark toolbar’s icons on uninstall.

Many thanks to Erik Vold for some nice fixes and improvements!

Install it here: http://antennasoft.net/addons/workspace.xpi.

I use pinch-zoom All the Time. It’s a feature I can’t live without. Especially as I’ve gotten more used to doing similar actions on multitouch tablets and smart phones, the gesture feels natural to me. When in full screen mode, it makes sense to be able to resize the page to fit the ridiculous dimensions of my monitor.

Enter Pinchy!

It’s a pretty simple add-on (built on the add-on sdk) that turns on some of the disabled preferences. Once you’ve installed it and it’s run, you can safely remove it or disable it from the Add-ons Manager.

You can accomplish the same thing either through about:config or by editing your prefs.js file in your profile directory. The prefs I’ve included are:

user_pref("browser.gesture.pinch.in", "cmd_fullZoomReduce"); // zoom -
user_pref("browser.gesture.pinch.in.shift", "cmd_close"); // close tab
user_pref("browser.gesture.pinch.out", "cmd_fullZoomEnlarge"); // zoom +
user_pref("browser.gesture.pinch.out.shift", "View:FullScreen"); // toggle full screen
user_pref("browser.gesture.pinch.threshold", 66);
user_pref("browser.gesture.swipe.left.shift", "Browser:PrevTab"); // prev tab
user_pref("browser.gesture.swipe.right.shift", "Browser:NextTab"); // next tab

the Shift+Pinch in to close tab is particularly sweet. Also liking Shift+swipe to switch tabs. I have my prefs already set to go to the top of page and bottom of page on swipe and if there’s any demand, I can add those prefs in as well.

If only it were this easy to customize these gestures in every app.

Kudos to http://t.tal.by/post/95428783/changing-firefox-gestures for the handy list of preferences (circa Firefox 3.1!).

Download: workspace.xpi

* added the relevant .htaccess bits so you can install directly from the link. Just click Allow. It’ll be ok, I promise!

New Features

• Added an entry to the Firefox Menu’s Web Developer submenu.
• Added shortcut keys to Execute, Inspect and Print (ctrl/cmd-E, I and R respectively)
• Stubbed in the Menu bar and additional context menu items
• Chrome and Content contexts (via the menu bar)
• Execute contents of Workspace Window if no selection
• Code cleanup and some reorganization

Todo:

• File Open and Save
• The “ruler” on the statusbar
• Persistence across restarts

I think once we have those we can put it on AMO. Feedback and feature requests welcomed! Code moreso.

Conversations inevitably go something like, “The Console already has a command line, isn’t that good enough?”

“Well, it’s great, but a Workspace lets you write out code as you think of it and it just stays there. You don’t have to go digging through history in case you want to copy and paste it elsewhere.”

more staring as if I had a chicken on my head followed by an incomprehensible, hand-wavey discussion about what you could do with them in Smalltalk…

Anyway, I decided to create a little add-on to better illustrate the idea. It’s pretty rough right now. It has a status bar that doesn’t do anything, and it doesn’t have nice menus to let you save and load files into it. But it has all the keyboard shortcuts you’d expect in an editor (cut/copy/paste) and a context menu that lets you Execute, Inspect or Print selected code against the currently active browser tab’s content. You can open one from the Tools menu (I know, I know, I need to add an entry to the developer menu in the Firefox menu. It’s a prototype!)

Try it out, let me know what you think.

Download: http://antennasoft.net/addons/workspace.xpi

Source: https://github.com/robcee/workspace

One conversation I had last night with Dietrich, Dolske and Mak was, how do we get new contributors up to speed on how to hack Firefox? We’ve already got a ton of excellent documentation on MDN for first-timers and seasoned veterans, but what most people really need is MXR and HG.

Setup some keyword searches:

1. Go to http://mxr.mozilla.org/mozilla-central/.
2. Right click on the Search For: field and select “Add a keyword for this search”.
3. Name it “mxr search” and give it the keyword “mxr”.
4. Repeat the process for the File Path field, and give it the keyword “mx”

Now when you want to look up a reference or definition, type “mxr {search-term}” and it’ll return your search results. If you want to search for a file, say, browser.js, type “mx browser.js” and you’ll see the results. (Hint, the one you want is at the bottom of the page)

Got any other suggestions or hacks? Add ‘em in the comments!

An Extension

A couple of years ago, I wrote an extension to take a list of tabs in a window and generate a page with some easily copyable links in it. I neglected the extension and let it moulder until a triage meeting the other day and wanted to get a hunk of bug links out of my browser.

Well moulder no more!

I bring you a reinvigorated WikifyTabs with support for Wiki links, BBCode and HTML. Check it out, browse the source, make some improvements!

Here’s a not-terribly hypothetical situation you might imagine. You’re a web-developer working for a small company. You’ve got a website. You want to do some debugging on your front-end scripts. Naturally, since you have Firebug installed, the first thing you do is drop a few of these around your code:

console.log("I am here!");

Simple, effective, printf-style debugging. Then you decide you want to show your manager what you’ve done on her own computer. You point her to the address and she loads it up and says, “this is broken. I don’t have Firebug installed so I’m getting exceptions calling console.log().”

Pwnd! You throw in a check that might look like this:

if (window.console) {
  // set a variable, do some stuff, maybe write
  // your own log() wrapper...

Problem solved!

Maybe then, you start getting fancy and add a timer to your new logging function.

function myLogFunction(method, message) {
    console.time(method.toString());
    var result = method();
    console.timeEnd(method.toString());
    console.log(message, result);
}

Neat-O! Except, console.time() isn’t a function in some browsers and now won’t work properly.

One possibility is to check explicitly for Firebug by expanding your first window.console check like this:

if (window.console && window.console.firebug) {

That’s become a fairly standard pattern, though I believe it’ll exclude Chrome, Safari and Opera from your debugging efforts.

A better way is to test for each function you want to use:

if ("console" in window && "time" in window.console)
    // define your method

This has the benefit of not coding for one particular type of debugging tool, will allow for graceful fallback in the event that your feature is not defined and allow you to tailor your debugging around different feature sets. This is the way libraries like jQuery check for browser capabilities and you should too. You want your website to work everywhere, don’t you?

An even better way around this would be to not ship your debugging code in a production web-site, but you may have good reasons to ignore this advice.

There were a couple of fun things about doing this. One, all of the UI inspection was done with the built-in Inspector in Firefox. If you load up chrome://browser/content/browser.xul in a tab and invoke the inspector (after setting devtools.inspector.enabled to true in about:config and restarting), you can look at the various parts of the browser chrome.

To make the toolbar visible, you’ll probably have to select “View Bookmarks” from the bookmarks toolbar dropdown next to the search box in the UI. Even if it’s on, you’ll probably have to toggle it off and on again to get the bookmarks to show up.

Deselect the View Bookmarks Toolbar menu option and then re-enable it.

Once that’s done, open the Inspector (Cmd-Shift-I or from the Tools menu on a mac, Ctrl-Shift-I or the Web Developer submenu in the app menu on PC) and hover over the bookmarks toolbar in the browser.  Ultimately, you’ll want to highlight the toolbar element with id “PersonalToolbar” and take a look at its attributes. You’ll see that the mode attribute is set to “icons” by default.

Now for the magical part: Open the Web Console on this page (Cmd/Ctrl-shift-K). In the JS Input line, type:

$(“PersonalToolbar”).setAttribute(“mode”, “text”);

and hit Enter. The icons should disappear from the embedded browser document.

And that’s pretty much all there is to this addon. Check out the source on github or in hg, view some minimal documentation, and, when it gets approved, install it from AMO.