html - son - inspeccionar elemento firefox
¿Cómo agregar un campo de entrada de texto de aspecto adecuado a la barra de herramientas de Firefox? (2)
Quiero tener un campo de entrada de texto en la barra de herramientas que se parece a la entrada de búsqueda y está controlado por una extensión FF.
Estoy usando sdk / widget:
en el archivo principal js tengo
var reason = require("sdk/widget").Widget({
label: "Progress Block - reason",
id: "text-entry",
contentURL: data.url("reason.html"),
width: 120
});
en el archivo html de la razón
<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>
Con este campo de entrada de estilo es absurdamente pequeño, pero al menos FF lo muestra, sin barras de desplazamiento de estilo se muestran.
Sin estilo, quería algo así como el campo de búsqueda, obtuve la barra de desplazamiento:
Después de agregar el estilo de ancho:
Con estilo según lo publicado:
¿Cuál es la forma correcta de tener una entrada de texto bien formada en la barra de herramientas controlada por una extensión?
Insertaría un campo de texto con el tipo CustomizableUI.jsm personalizado y construiría la cosa.
Esta es la forma de personalizar el tipo de cosas de customizazbleui.jsm: https://gist.github.com/Noitidart/10902477
Traté de encontrar cómo se creó la barra de búsqueda, aunque también se hizo a través de customizableui.jsm pero no pude encontrarlo en mxr.
editar:
así es como:
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;
}
});
Y cuando quieras eliminar do:
CustomizableUI.destroyWidget(''myCUITextbox'');
La api del widget ha quedado obsoleta y no deberías usarla. Si observa la consola del navegador, verá mensajes del SDK advirtiendo sobre esta desactivación.
En su lugar, deberías utilizar los elementos de UI más nuevos que se introdujeron con Firefox 29, como la API de la barra de herramientas:
https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/ui#Toolbar