The solution I've been using for a while is to pop up a dialog like this:

There are several problems with this approach, all of which I decided to ignore when I implemented it:

• It steals the user's focus.
• It's annoying.
• The user might click cancel without reading it just to get rid of it.
• It's annoying.
• The user might immediately (but accidentally) click elsewhere, hiding the dialog behind another window, never to be seen again.
• It's annoying.
• It's extra code and work to pop up a special dialog like this.
• It's annoying.

Back when there was only one dialog, I decided that these were acceptable faults. However, since then, I've come up with a few more questions I want to ask users, so now instead of one annoying dialog, there are three or four annoying dialogs - a new one appearing each time you restart Firefox.

Predictably (or so it should have been), users don't like to be assaulted with new dialogs each time they start their browser. Most likely, they're starting their browser for some purpose other than using my add-on, so my add-on shouldn't steal their attention. As one user so elegantly put it,

"I really love the TwitterBar, but after the most recent TwitterBar update, I noticed I kept getting these annoying as hell pop-ups from TwitterBar about TwitterBar. After the third one (while I was in the middle of doing something and became distracted with this pop-up dialog box TwitterBar tip of the day), I uninstalled it. If you want to keep your clients, don't constantly tap them on the shoulder."

I had already been working on redesigning these add-on/user interactions when I got that email, so the user's message reinforced what I had suspected: I was alienating my userbase.

Here's the new scheme I've settled on for now:

It's a notification bar, much like the one that appears when Firefox blocks a popup. It has these positive qualities:

• It doesn't steal focus or interrupt the user.
• It's not in-your-face, so it's less likely (I assume) to be dismissed without thought.
• It can't be lost behind another window.
• The amount of code to implement it is less, and it's more in tune with the browser interface.
• It's not as annoying.

I'd love your feedback on this change. Is it enough? Should I stop bothering users altogether and just let them discover their way around the add-on? I'm open to all ideas.

(If you'd like to try a version of TwitterBar with this new notification method, you can download it here. Although, if you've already seen the old dialog-style version of these notifications, you won't see the new-style ones anyway.)

To post to a specific account, just type your message like this:

I am posting to my other account. --@other_account --post

If you haven't yet authorized TwitterBar for @other_account, you'll be walked through the authorization process.

If you've authorized more than one account, and you don't specify which account you want to post to, you'll be given a list of choices:

You can manage your accounts from the TwitterBar options (just type "--options").

Finally, to authorize a new account without posting to it, just type "--account" in the URL bar.

To install this new version of TwitterBar, download it from Mozilla Add-ons.

The next obvious step is the ability to post to multiple accounts simultaneously, and the next version of TwitterBar will offer than feature. If you'd like to beta-test that update, e-mail me and let me know.

var request = "--boundary\r\n some text\r\n--boundary" + fileBytes + "\r\n--boundary--";

I had to spend a bit of time getting this just right in order to allow ScribeFire to upload media to Posterous, so I'm posting below the final solution at which I arrived; it was cobbled together from a dozen different examples I found around the Web (none of them solving the full problem), then lovingly massaged into the elegant function you see before you. With this function, you can pass in an array of fields and files, and the request will be crafted and returned to you, ready for upload.

Instructions for use are in the comment block at the top of the function.

function createPostRequest(args) {
  /**
   * Generates a POST request body for uploading.
   *
   * args is an associative array of the form fields.
   *
   * Example:
   * var args = { "field1": "abc", "field2" : "def", "fileField" :
   *              { "file": theFile, "headers" : [ "X-Fake-Header: foo" ] } };
   *
   * theFile is an nsILocalFile; the headers param for the file field is optional.
   *
   * This function returns an array like this:
   * { "requestBody" : uploadStream, "boundary" : BOUNDARY }
   *
   * To upload:
   *
   * var postRequest = createPostRequest(args);
   * var req = new XMLHttpRequest();
   * req.open("POST", ...);
   * req.setRequestHeader("Content-Type","multipart/form-data; boundary="+postRequest.boundary);
   * req.setRequestHeader("Content-Length", (postRequest.requestBody.available()));
   * req.send(postRequest.requestBody);
   */

  function stringToStream(str) {
    function encodeToUtf8(oStr) {
      var utfStr = oStr;
      var uConv = Components.classes["@mozilla.org/intl/scriptableunicodeconverter"]
                    .createInstance(Components.interfaces.nsIScriptableUnicodeConverter);
      uConv.charset = "UTF-8";
      utfStr = uConv.ConvertFromUnicode(oStr);

      return utfStr;
    }

    str = encodeToUtf8(str);

    var stream = Components.classes["@mozilla.org/io/string-input-stream;1"]
                   .createInstance(Components.interfaces.nsIStringInputStream);
    stream.setData(str, str.length);

    return stream;
  }

  function fileToStream(file) {
    var fpLocal  = Components.classes['@mozilla.org/file/local;1']
                     .createInstance(Components.interfaces.nsILocalFile);
    fpLocal.initWithFile(file);

    var finStream = Components.classes["@mozilla.org/network/file-input-stream;1"]
                      .createInstance(Components.interfaces.nsIFileInputStream);
    finStream.init(fpLocal, 1, 0, false);

    var bufStream = Components.classes["@mozilla.org/network/buffered-input-stream;1"]
                      .createInstance(Components.interfaces.nsIBufferedInputStream);
    bufStream.init(finStream, 9000000);

    return bufStream;
  }

  var mimeSvc = Components.classes["@mozilla.org/mime;1"]
                  .getService(Components.interfaces.nsIMIMEService);
  const BOUNDARY = "---------------------------32191240128944"; 

  var streams = [];

  for (var i in args) {
    var buffer = "--" + BOUNDARY + "\r\n";
    buffer += "Content-Disposition: form-data; name=\"" + i + "\"";
    streams.push(stringToStream(buffer));

    if (typeof args[i] == "object") {
      buffer = "; filename=\"" + args[i].file.leafName + "\"";

      if ("headers" in args[i]) {
        if (args[i].headers.length > 0) {
          for (var q = 0; q < args[i].headers.length; q++){
            buffer += "\r\n" + args[i].headers[q];
          }
        }
      }

      var theMimeType = mimeSvc.getTypeFromFile(args[i].file);

      buffer += "\r\nContent-Type: " + theMimeType;
      buffer += "\r\n\r\n";

      streams.push(stringToStream(buffer));

      streams.push(fileToStream(args[i].file));
    }
    else {
      buffer = "\r\n\r\n";
      buffer += args[i];
      buffer += "\r\n";
      streams.push(stringToStream(buffer));
    }
  }

  var buffer = "--" + BOUNDARY + "--\r\n";
  streams.push(stringToStream(buffer));

  var uploadStream = Components.classes["@mozilla.org/io/multiplex-input-stream;1"]
                       .createInstance(Components.interfaces.nsIMultiplexInputStream);

  for (var i = 0; i < streams.length; i++) {
    uploadStream.appendStream(streams[i]);
  }

  return { "requestBody" : uploadStream, "boundary": BOUNDARY };
}

"December: Jesus is the reason for the season."

"November: It's probably cold out. Stay in and do a puzzle."

"October: Better harvest the crops before they freeze."

"September: Bonfires, ghost stories, and s'mores."

"August: Everyone loves to take a dip in the pool."