如何添加一个正确的文本输入框到Firefox工具栏？ [英] How to add a proper-looking text input field to Firefox toolbar?
问题描述
我正在使用sdk / widget：
我想在工具栏中有一个文本输入框，它看起来像搜索输入，在主js文件中我有
$ p $ 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-8http-equiv =Content-Type>
< style type =text / cssmedia =all>
< / style>
< / head>
< body>
< input type =textstyle =width：105px; height：16px;>
< / body>
< / html>
使用此样式的输入字段非常小，但至少FF显示它 - 没有显示样式滚动条。
没有样式 - 我想要搜索字段，我有滚动条：
样式为张贴：
在工具栏中使用扩展名控制的正确文本输入的正确方法是什么？
我会插入带有CustomizableUI.jsm类型定制的文本字段并构建这个东西。
这是如何使自定义类型customizazbleui.jsm的东西： https://gist.github.com/ Noitidart / 10902477
我试图找到如何创建搜索栏，我会虽然也通过customizableui.jsm完成，但我不能找到它mxr。
编辑：
这是如何操作的：
$ $ $ $ codeonst {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道具= {
title：'Search'，
align：'center'，
class：'chromeclass-toolbar-additional panel-wide-item'，
flex：100 $
$;
（$ props [p]）
$文本框= aDocument。 createElement（'textbox'）;
node.appendChild（textbox）;
//node.style.listStyleImage =url（+（aProvider.icon32URL || aProvider.iconURL）+ ）;
return node;
}
}）;
而当你想删除的时候：
CustomizableUI.destroyWidget（ 'myCUITextbox'）;
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?
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');
这篇关于如何添加一个正确的文本输入框到Firefox工具栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
