CODEWITHSUNDEEP
firefoxfirefox-addonwindowtoolbarfirefox-addon-sdk
Robert Louis Murphy
Robert Louis Murphy

Reputation: 1628

Firefox 11+ Add-on SDK can you create a toolbar at the top of window below address bar?

I am developing a toolbar for a customer, that wants a traditional IE style toolbar at the top of the window under the address bar.

This is what I have: What I have http://www.hellometro.com/toolbar/now.png

Notice that because of vertical limitations of the status bar I have to write in all-caps for the letters to be legible while being small enough to fit. (two left most elements in status bar, text field and SEARCH button)

This is what I need: What I need http://www.hellometro.com/toolbar/whatiwant.png

Notice the toolbar added to the top that has enough vertical space for legible text within text field and button. (Top left below browser's back button).

I'm looking for a way for positioning the search component at the status bar as a default location, and allow the user to change its position in the options page to let them pick top or bottom (because many if not most Firefox users don't know they can move Add-ons around).

My question is: Does Firefox Add-on SDK support what I want to do, or do I have to switch languages and approach solution from a different angle?

Upvotes: 0

Views: 1371

Answers (2)

therealjeffg
therealjeffg

Reputation: 5830

As of Firefox 29 ( as of this writing in Beta ) you can very easily add toolbar buttons to Firefox, please see this blog post on how to do it using the Add-on SDK:

https://blog.mozilla.org/addons/2014/03/13/new-add-on-sdk-australis-ui-features-in-firefox-29/

You can also do this via lower-level apis, see this hacks post for more information:

https://blog.mozilla.org/addons/2014/03/06/australis-for-add-on-developers-2/

Upvotes: 2

Wladimir Palant
Wladimir Palant

Reputation: 57661

This isn't something that you can do with the available Add-on SDK API, with good reason - add-ons shouldn't waste screen estate unnecessarily and adding a toolbar is just that. You can achieve this goal by using low-level modules and going to the browser's XUL directly. Something like this should work (untested code and very hacky):

var widgetID = "foobar";
var buttonID = "widget:" + require("self").id + "-" + widgetID;
var toolbarName = "My Extension Toolbar";
require("widget").Widget({
  id: widgetID,
  ...
});

if (firstRun)
{
  var winUtils = require("window-utils");
  for (var window in winUtils.browserWindowIterator())
  {
    var toolbox = window.gNavToolbox;
    if (toolbox)
    {
      // Does the button exist already?
      var button = toolbox.ownerDocument.getElementById(buttonID);
      if (button && button.parentNode.getAttribute("toolbarname") == toolbarName)
        continue;  // Button already in the right toolbar
      else if (button)
      {
        // Remove button from its current location
        var toolbar = button.parentNode;
        toolbar.removeChild(button);

        // Make sure this change is persisted
        toolbar.setAttribute("currentset", toolbar.currentSet);
        toolbar.ownerDocument.persist(toolbar.id, "currentset");
      }

      var toolbar = toolbox.appendCustomToolbar("My Extension Toolbar", buttonID);
      toolbar.currentSet = toolbar.getAttribute("currentset");
      toolbar.ownerDocument.persist(toolbar.id, "currentset");

      // Send change notification, the widget needs reinitializing
      var event = toolbox.ownerDocument.createEvent("Events");
      event.initEvent("customizationchange", true, true);
      toolbox.dispatchEvent(event);
    }
  }
}

Note the undefined firstRun variable - you want to do this only once, otherwise you will revert user's choice to move your widget elsewhere (you can store a flag via simple-prefs module or something like that). Also note that buttonID calculation uses internal details from the addon-kit/lib/widget.js file in the SDK - the way the toolbar button ID is calculated can change in a future SDK version but I think that this is the only way to get hold of a widget you create with the SDK. There are plenty of internals in the other parts of the code as well of course.

Documentation: window-utils module (browserWindowIterator is undocumented), <xul:toolbox>, <xul:toolbar>.

Upvotes: 5

Related Questions