Panel przezroczystości firefox addon

Programuję dodatek firefox i używam panelu do wyświetlania informacji na wideo, wszystko działa dobrze, ale nie mogę uczynić panelu przezroczystym. I definiują stylistykę panelu w pliku html następująco:Panel przezroczystości firefox addon

<html> 
<head> 
    <meta charset="utf-8" /> 
    <style type="text/css" media="all"> 
     html 
     { 
      opacity:0.1; 
      border-style:none; 
      resize:none; 
     } 
     textarea 
     { 
      background-color:transparent; 
      resize: none; 
      border-style:none; 
     } 
    </style> 
</head> 
<body> 
    <textarea id="text" readonly=true rows="3" cols="60"></textarea> 
</panel> 
</body> 
</html>

wyjątkiem panelu jest nie tylko obszar przezroczysty tekst. Próbowałem z:

opacity:1 dla textarea

to nie działa w obu kierunkach. Co ja robię źle? Czy to możliwe?

Z tego co rozumiem:

html 
{ 
    opacity:0.1; 
    border-style:none; 
    resize:none; 
}

odnosi się tylko do zawartości panelu nie do samego panelu. Znalazłem post na ten temat, ale jest nieaktualny, ponieważ sdk/panel.js wymieniony w post już nie jest taki sam.

W każdym razie próbowałem pobrać plik panel.js i zastąpić bieżący, ale nie ma to żadnego wpływu na wyświetlany panel. Panel jest nadal biały, a opcja border-radius również nie działa. (Powiedziałbym, że zastąpiłem wszystkie "./" przez "sdk /" jak wspomniano w tym post).

Źródło

2015-06-27 2A-66-42

Ktoś może mi dać wskazówkę, na co zwrócić uwagę? To może być najgłupsze pytanie, ale naprawdę nie mam pojęcia. Twoja pomoc byłaby bardzo ceniona! –

Twoje pytanie zawiera tylko kod HTML. Nie zawiera żadnego kodu pokazującego sposób utworzenia panelu. Pełne [mcve] jest zwykle najlepsze, więc jeśli ktoś chce rzeczywiście pracować nad odpowiedzią na twoje pytanie, nie musi tworzyć wszystkiego od zera (tj. Powinieneś ułatwiać, a nie trudniej, aby ludzie odpowiadali na twoje pytania) . Pomaga również wszystkim na tej samej stronie, co w rzeczywistości jest pożądane. Kod jest również wymagany, aby pytanie dotyczyło problemu z przekroczeniem stosu, gdy zadajesz pytanie o to, czy kod działa tak, jak chcesz (np. Debugowanie). – Makyen

I okazało się, że można stworzyć panel z przejrzystości w ten sposób:

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:' + screen.width + 'px; height:' + screen.height + 'px; background-color:rgba(180,180,180,.5);' 
} 
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);

osadzić iframe pamiętać, aby ustawić ścieżkę do twojego ".html" jako:
"resource: //" id Twojego addon "-at-jetpack/data/custom_panel.html".

Oto mój kod:

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, 
    backdrag: true, 
    level: 'top', 
    style: 'padding:10px; margin:0; width:530px; height:90px; background-color:rgba(180,180,180,.5);' 
} 
for (var p in props) { 
    panel.setAttribute(p, props[p]); 
} 

var iframe = win.document.createElement('iframe'); 
iframe.setAttribute('src','resource://"id of your addon"-at-jetpack/data/custom_panel.html'); 
panel.appendChild(iframe); 

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


panel.addEventListener('dblclick', function() { 
    panel.parentNode.removeChild(panel) 
}, false); 

panel.openPopup(null, 'overlap', screen.availLeft+screen.width/2-256, screen.availTop+760);

Dzięki Noitidart za pomoc.

Źródło

2016-03-22 04:27:14

Nie można zaprojektować panelu dostępnego w pakiecie SDK, a jedynie zawartość, ale można zdecydowanie wykonać procedurę, o której wspominasz, i udostępnić zmodyfikowany panel.

Źródło

2015-07-08 09:19:47 EdoPut

Zobacz mój soluiton poniżej, jak stylizować panele sdk :) – Noitidart

Ok tutaj jest czystą rozwiązanie dodatek SDK:

let myPanel = Panel({ 
    width: 180, 
    height: 180, 
    contentURL: 'data:text/html,<textarea style="width:120px; height:80px;">this is my textarea</textarea>' 
}) 

let { getActiveView }=require("sdk/view/core"); 
getActiveView(myPanel).setAttribute("noautohide", true); 
getActiveView(myPanel).setAttribute("level", 'top'); 
getActiveView(myPanel).setAttribute("style", 'background-color:rgba(0, 0, 0, 0.2);');

Źródło

2015-10-08 13:48:11 Noitidart

Musiałem usunąć flagę "accept answer", ponieważ to rozwiązanie nie powoduje, że panel jest przezroczysty. Jedyne rozwiązanie, które znalazłem, to działające w moim poście. –

Nie ma problemu dzięki za powiadomienie mnie. Powinieneś dodać swoje rozwiązanie do tego obszaru i zaakceptować je. Tak więc inni, którzy szukają, będą wiedzieli, co robić. – Noitidart

Musiałem rozwiązać ten sam problem dzisiaj (przezroczysty panel w SDK). Sztuczka polega na uzyskaniu anonimowej treści:

function makePanelTransparent() { 
    // Get the panel element in the XUL DOM and make its background transparent. 
    const { getActiveView } = require('sdk/view/core'); 
    const el = getActiveView(panel); 
    el.style.background = 'rgba(0,0,0,0)'; 

    // Go up the XUL DOM till you hit the Document (nodeType 9). 
    let parentNode = el; 
    while (parentNode !== null && parentNode.nodeType !== 9) { 
    parentNode = parentNode.parentNode; 
    } 

    if (!parentNode) { 
    console.error('unable to find the document parent; giving up'); 
    return; 
    } 

    // Now that we've found it, call the document a document. 
    const xulDocument = parentNode; 

    // Use the document pointer to access and style 'anonymous' content. 
    const xulContainer = xulDocument.getAnonymousElementByAttribute(el, 'class', 'panel-arrowcontent') 
    xulContainer.style.background = 'rgba(0,0,0,0)'; 
    xulContainer.style.boxShadow = 'none'; 
}

To działa dla mnie. Mam nadzieję, że pomoże to innej osobie w ciągu najbliższych 1-5 lat ;-)

Źródło

2016-07-28 00:58:44 jaredhirsch

Panel przezroczystości firefox addon

Odpowiedz

Powiązane problemy