How to add a proper-looking text input field to Firefox toolbar?

Question

I want to have a text input field in toolbar that looks like search input and is controlled by a FF extension.

I am using sdk/widget:

in main js file I have<

Answer 1

The widget api has been deprecated and you should not use it. If you look at the browser console, you'll see messages from the SDK warning about this deprecation.

Instead, you should be using the newer UI elements introduced with Firefox 29 like the toolbar api:

https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/ui#Toolbar

Answer 2

I would insert a textfield with CustomizableUI.jsm type custom and build the thing.

This is how to make custom type customizazbleui.jsm stuff: https://gist.github.com/Noitidart/10902477

I tried to find how the searchbar was created, i would have though it was also done via customizableui.jsm but i couldnt find it on mxr.

edit:

this is how:

const {Cu} = require("chrome");
Cu.import('resource:///modules/CustomizableUI.jsm');
CustomizableUI.createWidget({
    id: 'myCUITextbox',
    type: 'custom',
    removable: true,
    defaultArea: CustomizableUI.AREA_NAVBAR,
    onBuild: function(aDocument) {
        var node = aDocument.createElement('toolbaritem');
        node.setAttribute('id', this.id);

        var props = {
          title: 'Search',
          align: 'center',
          class: 'chromeclass-toolbar-additional panel-wide-item',
          flex: 100
        };
        for (var p in props) {
          node.setAttribute(p, props[p])
        }

        var textbox = aDocument.createElement('textbox');
        node.appendChild(textbox);

        //node.style.listStyleImage = "url(" + (aProvider.icon32URL || aProvider.iconURL) + ")";
        return node;
    }
});

And when you want to remove do:

CustomizableUI.destroyWidget('myCUITextbox');