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

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');