You can try it out now by going to http://downloads.mozdev.org/clippings/experimental/ and downloading and installing the XPI file named clippings-2.99.3+_20071215.xpi (there is another XPI file in the same directory with the word "toolbar" at the end of its file name; it is an older, buggy build, so ignore it). Note that it hasn't yet been tested on Firefox or Thunderbird 1.5 series, and thus it isn't guaranteed to work on those versions.
A few challenges had to be overcome in order to implement the Clippings toolbar:
- The features string in the window.open() call which invokes the floating toolbar window includes the unknown string "popup" - this makes the window appear as a popup window which UI elements like menus and tooltips render as. However, this results in a chromeless window, lacking the title bar and borders. I had to style my own window border and title bar, resulting in a floating toolbar window that, as you can see from the above screen shot, won't necessarily match the appearance of floating toolbar windows in the user's desktop environment.
The toolbar was invoked in this fashion to satisfy the criteria of a floating toolbar palette -- specifically, that it floats above all windows and that a taskbar button (in Windows) should not appear for the floating toolbar. Invoking the floating toolbar as a modeless dialog would satisfy the criteria, but on the Mac it may be rendered as a dialog sheet.
- The toolbar needs a reference to the most recent host application window so that it will perform its operations (insert clipping, new from selection) in the context of that window. This was made possible through the very useful XPCOM interface nsIWindowMediator.
- Moving the floating toolbar window by dragging its title bar was painful to implement. After over a week of trying to get it to work I gave up and searched online for drag-and-drop DHTML code, hoping that I could somehow adapt it to work with dragging an XUL window to move it. In the end, I figured it out on my own.
In a nutshell, the drag start and stop can be initiated from the onmousedown and onmouseup events, respectively, on the toolbar palette's title bar (actually an XUL <vbox> element) -- but the actual move event handling needs to be invoked from the onmousemove event from the XUL <window> element. Handling the mouse move from the title bar (the <vbox> element) works only as long as the mouse stays within that element during the move operation; if the mouse is moved at a great distance on the screen, the mouse cursor jumps out of the title bar rather than moving the floating toolbar window. I still haven't figured out exactly why, although I suspect it has something to do with the DOM event flow as explained in the W3C's DOM 3 Events specification.