Styling Panels of Firefox Addon

Итак, я создал виджет, который пользователь нажимает, и он открывает панель, у меня есть пара вопросов о панели. Как настроить границы панелей, цвет фона и т. Д.? Я включаю HTML-файл в contentURL, могу ли я добавить CSS для его изменения? Если да, то как я могу выбрать его через CSS?Styling Panels of Firefox Addon

Я также хочу добавить кнопку «Закрыть» и всегда держать панель открытой, если они не нажимают кнопку закрытия.

С другой стороны, для Add-on я пытаюсь запрограммировать это может быть лучше, если я создам окно, это окно довольно стильно, чтобы я мог сделать его более крутым?

Спасибо за любую помощь.

источник

2011-08-03 Jordash

Я не думаю, что вы можете установить границы панели. Стили границ панели зависят от операционной системы, и вы не можете их трогать. Вы можете реально влиять на внутреннюю область панели, эффективно вы получаете iframe внутри панели, с которой вы можете играть. Например. изменить фон вашей панели может содержать:

<style type="text/css"> 
    html 
    { 
    background-color: red; 
    } 
</style>

источник

2011-08-09 12:34:59

Вы не можете, панель не реальный объект HTML, но окно XUL с IFRAME или HTML внутри.

Я считаю, так как Firefox 30 вы можете получить доступ к этому объекту, вы можете прочитать:

Avoid panel to autoHide in Firefox extension

Конечно, это своего рода хак, выглядит как Mozilla на самом деле не «открытым» ^^

источник

2014-06-24 12:34:18

Mozilla открыт, но SDK был создан Google Chrome'ish, поэтому он открыт и отключен, но не «свободен». Вы должны взломать его, чтобы выполнить партии. Однако Google Chrome действительно не открыт вообще на втором. – Noitidart

Этот SDK https://github.com/mozilla/addon-sdk? –

я был в состоянии изменить границу панели:

/*run this first*/ 
var win = Services.wm.getMostRecentWindow('navigator:browser'); 
var panel = win.document.createElement('panel'); 
var screen = Services.appShell.hiddenDOMWindow.screen; 
var props = { 
    noautohide: true, 
    noautofocus: false, 
    level: 'top', 
    style: 'padding:15px; margin:0; width:150px; height:200px; background-color:steelblue;border-radius:15px' 
} 
for (var p in props) { 
    panel.setAttribute(p, props[p]); 
} 


win.document.querySelector('#mainPopupSet').appendChild(panel); 


panel.addEventListener('dblclick', function() { 
    panel.parentNode.removeChild(panel) 
}, false); 
panel.openPopup(null, 'overlap', screen.availLeft, screen.availTop);

Так что, если вы знаете, панель вашего идентификатора просто сделать это:

var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService); 

var css = ''; 
css += '#YourPanelIdHere { border-radius:15px; opacity:.5; border:1px solid red; }'; 
var cssEnc = encodeURIComponent(css); 
    var newURIParam = { 
     aURL: 'data:text/css,' + cssEnc, 
     aOriginCharset: null, 
     aBaseURI: null 
} 
var cssUri = Services.io.newURI(newURIParam.aURL, newURIParam.aOriginCharset, newURIParam.aBaseURI); 
sss.loadAndRegisterSheet(cssUri, sss.USER_SHEET); 
    //sss.unregisterSheet(cssUri, sss.USER_SHEET);

Это будет стиль вашей панели. Вам не нужно использовать идентификатор панели в таблице стилей, просто все, что будет предназначено для вашей панели.

источник

2014-06-24 21:23:56 Noitidart

Styling Panels of Firefox Addon

ответ

Смежные вопросы