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:

After adding width style:

With style as posted:

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

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

回答2:

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

来源：https://stackoverflow.com/questions/27556770/how-to-add-a-proper-looking-text-input-field-to-firefox-toolbar

标签

html

firefox

interface

firefox-addon

firefox-addon-sdk