Wirkt sich leider nur auch auf (div.ardplayer-posterbackdrop) aus
Aber nicht auf dem von dir erwähnten Beispiellink (https://www.tagesschau.de/ausland/amerik…huldig-100.html) oder doch? Oder wo sonst (Bitte Link/Screen). Und was heißt 'teilweise'?
Wirkt sich leider nur auch auf (div.ardplayer-posterbackdrop) aus
Aber nicht auf dem von dir erwähnten Beispiellink (https://www.tagesschau.de/ausland/amerik…huldig-100.html) oder doch? Oder wo sonst (Bitte Link/Screen). Und was heißt 'teilweise'?
Der entsprechende Codeausschnitt hätte auch gereicht, wer soll das denn alles durchlesen/arbeiten?
EDIT: Das habe ich wahrscheinlich falsch verstanden: Der Code um den es geht ist scheinbar nicht in dieser css vorhanden.
Ich könnte noch Icons oben drauf legen:
icons.zip
Oder auch noch das (ich benutze den Button auch):
(function() {
// ■■ START UserCustomisation ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const buttonIcon1 = 'pulse-square_thin.svg'; // Name & Dateiendung des anzuzeigenden Symbols
// Download
const buttonIcon2 = 'downloads_thin.svg'; // Name & Dateiendung des anzuzeigenden Symbols
const buttonPath = '/chrome/icons/'; // Pfad zum Ordner der die Icons beinhaltet
const label = 'Mediasource userpref Downl./Livest.';
//const label1 = 'Mediasource userpref Livestream.';
//const label2 = 'Mediasource userpref Download';
//const tooltiptext1 = ?;
//const tooltiptext2 = ?;
// ■■ END UserCustomisation ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
if (location != 'chrome://browser/content/browser.xhtml')
return;
try {
CustomizableUI.createWidget({
id: 'mediasource-enabled-button',
type: 'custom',
defaultArea: CustomizableUI.AREA_NAVBAR,
onBuild: function(aDocument) {
var button = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
var attributes = {
id: 'mediasource-enabled-button',
class: 'toolbarbutton-1 chromeclass-toolbar-additional',
removable: 'true',
label: label,
tooltiptext: Services.prefs.getBoolPref('media.mediasource.enabled') ?
'LiveStream' : 'Download',
oncommand: '(' + onCommand.toString() + ')()'
};
for (var a in attributes) {
button.setAttribute(a, attributes[a]);
};
function onCommand() {
var isEnabled = !Services.prefs.getBoolPref('media.mediasource.enabled');
Services.prefs.setBoolPref('media.mediasource.enabled', isEnabled);
event.target.ownerGlobal.BrowserCommands.reload();
var windows = Services.wm.getEnumerator('navigator:browser');
while (windows.hasMoreElements()) {
let button = windows.getNext().document.getElementById('mediasource-enabled-button');
if (isEnabled)
button.setAttribute('tooltiptext', 'LiveStream')
else
button.setAttribute('tooltiptext', 'Download');
};
};
return button;
}
});
} catch(e) { };
//-----------------------------------------
let sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);
let uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
#mediasource-enabled-button[tooltiptext="LiveStream"] {
list-style-image: url(${curProfDir}${buttonPath}${buttonIcon1});
fill: lightblue !important;
}
#mediasource-enabled-button[tooltiptext="Download"] {
list-style-image: url(${curProfDir}${buttonPath}${buttonIcon2});
fill: gold !important;
}
`), null, null);
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
//-----------------------------------------------------------------
})();
Alles anzeigen
Es lässt mir einfach kein Ruhe. Der Fehler liegt hier (in Zeile 7), die null in Anführungstrichen ist falsch: so sollte es gehen ohne den Weg über 'else' :
Zum Thema Label: Danke für deine Änderungen. Sicherlich hast du nicht bedacht, dass die Länge eines Eintrags an dieser Stelle bewirkt, dass das Menü unnötig breit wird, Die kurze Vers. fand ich genau so aussagekräftig...Egal...
Denn genau genommen, sehe ich keine Verwendung genau für dieses Skript mit dieser Funktion.
dies ist einfach nur ein Test
Wie verwende ich das Script zukünftig? Das werde ich bestimmt hier posten oder in die Tonne treten und dann die Tonne abfackeln...
// Funktion zum Aktualisieren des Labels und Icons
function updateMenuItem() {
const starred = orig.getAttribute('starred');
if (starred == '') {
menuitem1.setAttribute('label', 'funzt');
} else if (starred == null) {
menuitem1.setAttribute('label', label1);
} else if (starred == "true") {
menuitem1.setAttribute('label', label2);
} else {
menuitem1.setAttribute('label', 'funzt nicht');
}
Alles anzeigen
Schon wieder überschnitten.
Jetzt?
Leider nein.
Muss jetzt schlafen, gN8...morgen ist ein neuer Tag....
Danke!
Das Icon funzt, das Label noch nicht..
[function updateMenuItem()]
Aber dies funzt (Zeile11):
Statt:
// Funktion zum Aktualisieren des Labels und Icons
function updateMenuItem() {
const starred = orig.getAttribute('starred');
if (starred == '') {
menuitem1.setAttribute('label', 'funzt');
} else if (starred == "null") {
menuitem1.setAttribute('label', label1);
} else if (starred == "true") {
menuitem1.setAttribute('label', label2);
} else {
menuitem1.setAttribute('label', 'funzt nicht');
}
Alles anzeigen
Dies:
// Funktion zum Aktualisieren des Labels und Icons
function updateMenuItem() {
const starred = orig.getAttribute('starred');
if (starred == '') {
menuitem1.setAttribute('label', 'funzt');
} else if (starred == "null") {
menuitem1.setAttribute('label', label1);
} else if (starred == "true") {
menuitem1.setAttribute('label', label2);
} else {
menuitem1.setAttribute('label', label1);
}
Alles anzeigen
Mira_Belle Bestimmt ist morgen dein Tag!
An deinem heutigen schlechten Tag kann ich nichts ändern, aber wenn dir ab morgen langweilig ist, baue doch einfach den 'MutationObserver' in das oben erwähnte Script ein. Du kannst das! Mit der Beschäftigung mit dem o.a. Script würdest du auch meiner Erklärung näherkommen.....
Dein 'Nachtrag' und mein Beitrag #3.837scheinen sich überschnitten zu haben.
Mira_Belle Kann es sein dass du mich veräppelst?
Meine 'Aufgabenstellung'(wird demnächst mit 'MutationObserver' gelöst werden): Einen 'EventListener' der in der Lage ist, ein Attribut einer ID auf Veränderung zu prüfen, um eine Funktion anzustoßen
[konkret: #context-bookmarkpage[starred="true"] wird zum Beispiel genutzt um das list-style-image zu ändern (gefüllter/umrandeter Stern)]. Dazu nutze ich das oben erwähnte - leicht nachvollziehbare - Beipiel.
milupo Danke! Genau so (MutationObserver) werde ich das am Wochemende machen.
Mira_Belle Die Funktion kannst du in Zeile 14 ändern.
const oncommand = 'gContextMenu.bookmarkThisPage();';
Erkläre es mir bitte doch noch einmal mit dem Reloadbutton, oder besser mit einer Funktion,
die so im Menü nicht vorkommt! Z.B. "Reload userChrome.css" oder "Downloadfenster öffnen" oder
"Anwendungsmenü öffnen" (Hamburgermenü).
Einen Menüeintrag einer Funktion hinzufügen kann man auch (siehe #23).
Das ist hier aber nicht die 'Aufgabenstellung'.
Oder Du probierst das Script aus Beitrag #3.823 einfach mal aus!
Genau falsch! Es dreht sich um die ganz normale Funktion des Bookmarken einer Site. Und das Ganze ist eine Übung/ein Test für andere Menüeinträge.
Ja, ich weiß ...Bookmarksterne sind auf der Browseroberfläche mehrfach vorhanden (z.B.: urlbar), dies ist einfach nur ein Test für ContextMenu-Einträge.
Danke für den Tipp! Ich werde mich in den nächsten Tagen mal damit beschäftigen.
Ja, kannste mal sehen:
Firefox ist doch der sichere Browser! Der warnt vor dem Zugriff oder unterbindet den Zugriff...
Nutz doch einfach einen unsicheren Browser....
Hallo,
ich suche einen 'EventListener', der 'feuert' wenn sich ein Attribut einer ID ändert, zum Beispiel so ähnlich:
document.getElementById('context-bookmarkpage').addEventListener('irgendwas mit attribute und changed/modified o.ä.', funktionsname);
Konkret geht es um den Bookmarkstern im ContextMenu (oben in der menugroup). In der Konsole wird je nach 'Lesezeichen gespeichert/nicht gespeichert'
document.getElementById('context-bookmarkpage').getAttribute('starred');
dies ausgegeben: "true"/null
Hier das funktionierende Test-Script mit einem Test-EventListener (der ununterbrochen feuert und NICHT verwendet werden sollte):
Vielen Dank für die Mühe!
// JavaScript Document
// M_BookmarkThisPage_126_Test08.uc.js
(function () {
if (location.href !== 'chrome://browser/content/browser.xhtml')
return;
// ■■ START UserCustomisation ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const buttonIcon1 = 'bookmark-hollow.svg'; // Name.Dateiendung des anzuzeigenden Symbols | Name.file extension of the symbol to be displayed
const buttonIcon2 = 'bookmark.svg'; // Name.Dateiendung des anzuzeigenden Symbols | Name.file extension of the symbol to be displayed
const iconPath = '/chrome/icons/'; // Pfad zum Ordner der das Icon beinhaltet | Path to folder containing the icon
const label1 = 'Als Lesezeichen speichern'; // [starred=null]
const label2 = 'Lesezeichen bearbeiten'; // [starred="true"]
const tooltiptext = 'Site als Lesezeichen speichern/bearbeiten';
// ■■ END UserCustomisation ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const oncommand = 'gContextMenu.bookmarkThisPage();';
const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
const menuitem1 = document.createXULElement('menuitem');
menuitem1.id = 'contextBookmarkpage';
menuitem1.setAttribute('tooltiptext', tooltiptext);
menuitem1.setAttribute('oncommand', oncommand);
menuitem1.classList.add('menuitem-iconic');
const refItem1 = document.getElementById('context-inspect');
refItem1.parentNode.insertBefore(menuitem1, refItem1.nextSibling);
// Status aktualisieren
//document.getElementById('context-bookmarkpage').addEventListener('irgendwas mit attribute und changed/modified', funktionsname); ?
gBrowser.tabContainer.addEventListener('TabAttrModified', exc);// NUR für Testzwecke zu gebrauchen !
function exc() {
setTimeout(() => {
// Label aktualisieren
if (menuitem1.getAttribute('starred') == ''){
menuitem1.setAttribute('label', 'funzt');
}
else if (menuitem1.getAttribute('starred') == "null"){
menuitem1.setAttribute('label', label1);
}
else if (menuitem1.getAttribute('starred') == "true"){
menuitem1.setAttribute('label', label2);
}
else {
menuitem1.setAttribute('label', 'funzt nicht');
}
// starred-attribut vom Original 'context-bookmarkpage' clonen
menuitem1.setAttribute('starred', "null");
const orig = document.getElementById('context-bookmarkpage');
let duplic = orig.getAttributeNode('starred');
menuitem1.setAttributeNode(duplic.cloneNode(true));
}, 700);
//-----------------------------------------
let sss = Components.classes['@mozilla.org/content/style-sheet-service;1'].getService(Components.interfaces.nsIStyleSheetService);
let uri = Services.io.newURI('data:text/css;charset=utf-8,' + encodeURIComponent(`
#contextBookmarkpage[starred="true"] image {
list-style-image: url(${curProfDir}${iconPath}${buttonIcon2}) !important;
transform: scale(0.9) !important;
-moz-context-properties: fill;
fill: orange !important;
}
#contextBookmarkpage[starred="true"]:hover image {
list-style-image: url(${curProfDir}${iconPath}${buttonIcon2}) !important;
fill: lightgreen !important;
}
#contextBookmarkpage[starred=null] image/*,
#contextBookmarkpage image*/{
list-style-image: url(${curProfDir}${iconPath}${buttonIcon1}) !important;
transform: scale(0.9) !important;
-moz-context-properties: fill;
fill: orange !important;
}
#contextBookmarkpage[starred=null]:hover image/*,
#contextBookmarkpage:hover image*/{
list-style-image: url(${curProfDir}${iconPath}${buttonIcon1}) !important;
fill: lightgreen !important;
}
`), null, null);
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
//-------------------------------------
};
})();
Alles anzeigen
Ja, ich weiß ...Bookmarksterne sind auf der Browseroberfläche mehrfach vorhanden (z.B.: urlbar), dies ist einfach nur ein Test für ContextMenu-Einträge.
Und
menuitem.style.listStyleImage = 'url("' + ....... + '")';
funktioniert auch.
Werde ich mal übernehmen, ist ja irgendwie 'eleganter'...
Ich fress 'en Besen.
Burger tuts auch 🍔️ ...
Dies funzt bei mir (nur ein Beispiel), vieleicht bringt Dich das weiter.:
// JavaScript Document
// Test_gContextMenu.uc.js
(function() {
// ■■ START UserCustomisation ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const buttonIcon = 'DeepL_2.png'; // Name.Dateiendung des anzuzeigenden Symbols | Name.file extension of the symbol to be displayed
const buttonPath = '/chrome/icons/'; // Pfad zum Ordner der das Icon beinhaltet | Path to folder containing the icon
const label = 'Test_gContextMenu'
const tooltiptext = 'Site als Lesezeichen speichern/ändern';
const oncommand = "gContextMenu.bookmarkThisPage();";
// ■■ END UserCustomisation ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
// -- Contextmenu -----------------------------------------------
const menuitem1 = document.createXULElement('menuitem');
menuitem1.id = 'tabContextBookmarkpage';
menuitem1.setAttribute('label', label);
menuitem1.setAttribute('tooltiptext', tooltiptext);
menuitem1.setAttribute('oncommand', oncommand);
menuitem1.classList.add('menuitem-iconic');
menuitem1.style = "list-style-image: url('" + curProfDir + buttonPath + buttonIcon + "');";
const refItem1 = document.getElementById('context-inspect');
refItem1.parentNode.insertBefore(menuitem1, refItem1.nextSibling);
})();
Alles anzeigen
Super, freut mich.
Aber an Zeile 75 bin ich nicht schuld, siehe Originalbeitrag (oder klicke auf das Zitat).
Danke auch an Sören Hentzschel für die Info.