Search code examples
htmlfirefoxinterfacefirefox-addonfirefox-addon-sdk

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

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

var reason = require("sdk/widget").Widget({
  label: "Progress Block - reason",
  id: "text-entry",
  contentURL: data.url("reason.html"),
  width: 120
});

in reason html file

<html>
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <style type="text/css" media="all">
        </style>
    </head>
    <body>
            <input type="text" style="width: 105px; height: 16px;">
    </body> 
</html>

With this style input field is absurdly small, but at least FF displays it - without style scrollbars are displayed.

Without style - I wanted something like search field, I got scrollbar: without any style

After adding width style: with only width style

With style as posted: with style

What is the proper way to have a well formed text input in toolbar controlled by an extension?

Solution

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