Symbole zu Kontextmenüs mit Javascript und CSS hinzufügen

aborix

Das Untermenü Web-Entwickler ist nach dem Start nur zu einem kleinen Teil vorhanden. Die restlichen Einträge kommern erst später dazu. Spätestens dann, wenn das Menü zum ersten Mal geöffnet wird, machmal auch früher, wenn ein Entwicklungswerkzeug benutzt wird, z.B. die Browserkonsole geöffnet wird. Mit folgendem Code werden die Klassennamen beim erstmaligen Öffnen des Menüs hinzugefügt:

JavaScript

let devPopup = document.getElementById('menuWebDeveloperPopup');
devPopup.addEventListener('popupshown', () => {
  document.querySelectorAll('#menuWebDeveloperPopup menu')
    .forEach(query => query.classList.add('menu-iconic'));
  document.querySelectorAll('#menuWebDeveloperPopup menuitem')
    .forEach(query => query.classList.add('menuitem-iconic'));
}, {once: true});

bege

Zitat von Endor

Für das Kontextmenü der Entwickler Werkzeuge hätte ich was für dich:
https://github.com/Endor8/CSS/blo…zeuge/Menus.css
Symbole sind als Base64 Code integriert.
Mfg.
Endor

Ich versuche es bisher mit dem Hinzufügen der class per JS, weil damit der CSS-Code wesentlich einfacher bleibt und keine extra :hover-Einträge nötig sind. Aber bisher klappt es nicht. Dein CSS-Code wäre die "Notlösung" für mich. Gut, eine zu haben. Vielen Dank dafür.

Zitat von aborix
Das Untermenü Web-Entwickler ist nach dem Start nur zu einem kleinen Teil vorhanden. Die restlichen Einträge kommern erst später dazu. Spätestens dann, wenn das Menü zum ersten Mal geöffnet wird, machmal auch früher, wenn ein Entwicklungswerkzeug benutzt wird, z.B. die Browserkonsole geöffnet wird. Mit folgendem Code werden die Klassennamen beim erstmaligen Öffnen des Menüs hinzugefügt:
JavaScript
let devPopup = document.getElementById('menuWebDeveloperPopup');
devPopup.addEventListener('popupshown', () => {
  document.querySelectorAll('#menuWebDeveloperPopup menu')
    .forEach(query => query.classList.add('menu-iconic'));
  document.querySelectorAll('#menuWebDeveloperPopup menuitem')
    .forEach(query => query.classList.add('menuitem-iconic'));
}, {once: true});

Vielen Dank aborix . Die class wird jetzt hinzugefügt, aber die Symbole werden immer noch nicht angezeigt. Im Inspektor werden jetzt die richtige class und die Symbole angezeigt (sowohl bei Regeln als auch bei Berechnet), aber im Untermenü bleiben sie verschwunden. Ich kann keinen Unterschied erkennen zwischen diesen Einträgen und denen, für die die Symbole angezeigt werden. Was fehlt da noch oder ist im Weg?

Boersenfeger

Zitat von Endor

Nur zur Info, mit obigen CSS Code werden Symbole dem Kontextmenü hinzugefügt,
selbige werden direkt von meiner Github Seite geladen.
Wenn der Code passt, dann aber bitte eigene Symbole verwenden oder meine runter laden
und lokal einbinden.
Mfg.
Endor

Ich würde diese gerne herunterladen, finde sie aber nicht... kannst du bitte mal einen Link senden oder posten?

Vielen Dank!

bege

Zitat von Boersenfeger

Zitat von Endor

Nur zur Info, mit obigen CSS Code werden Symbole dem Kontextmenü hinzugefügt,
selbige werden direkt von meiner Github Seite geladen.
Wenn der Code passt, dann aber bitte eigene Symbole verwenden oder meine runter laden
und lokal einbinden.
Mfg.
Endor

Ich würde diese gerne herunterladen, finde sie aber nicht... kannst du bitte mal einen Link senden oder posten?
Vielen Dank!

Wenn du den jeweiligen url-Link in der Adressleiste eingibst, bekommst du das Bild angezeigt und kannst es mit einem Rechtsklick speichern.

Boersenfeger

Vielen Dank!

Endor

Hallo Boersenfeger.

Müssten die hier sein:

https://github.com/Endor8/CSS/tree/master/Icons

Mfg.
Endor

aborix

bege:

Wie sieht der Code aus, mit dem du die Symbole hinzufügst?

Boersenfeger

Danke, Endor!

bege

aborix

Drei Beispiele aus dem gleichen Untermenü:

Seitenquelltext anzeigen (funktioniert)

CSS

{-moz-image-region: rect(208px 112px 224px 96px) !important; list-style-image: url("mosaic.png") !important}

Inspektor (funktioniert nicht)

CSS

{-moz-image-region: rect(80px 16px 96px 0) !important; list-style-image: url("mosaic.png") !important}

Weitere Tools laden (funktioniert nicht)

CSS

{-moz-image-region: rect(432px 160px 448px 144px) !important; list-style-image: url("mosaic.png") !important}

Während mehrerer Neustarts heute wurden die Symbole nach einem Neustart angezeigt, nach dem nächsten war es wieder vorbei mit der Herrlichkeit.

aborix

Ich kann das bestätigen. Ich habe keine Idee, warum das so ist und auch keine Lösung.

bege

Zitat von aborix

Ich kann das bestätigen. Ich habe keine Idee, warum das so ist und auch keine Lösung.

aborix Danke für deine Unterstützung! Ich bin froh, dass es weitgehend funktioniert. Eine kleine Hoffnung habe ich noch: Schon manches Mal, wenn du in diesem Forum geschrieben hast, du wüsstest keine Lösung, hast du später doch noch eine gefunden

Hast du noch eine Idee, wie die CSS-Klassen auch zum Kontextmenü für die Tabs bei Verwendung von TreeStyleTab hinzugefügt werden können?

Die Einträge stehen unter menupopup id=contentAreaContextMenu, das ist die gleiche ID wie beim normalen Seiten-Kontextmenü. In letzterem sind die Klassen hinzugefügt, bei ersterem fehlen sie.

aborix

Zitat von bege

Eine kleine Hoffnung habe ich noch: Schon manches Mal, wenn du in diesem Forum geschrieben hast, du wüsstest keine Lösung, hast du später doch noch eine gefunden

Deine Hoffnung scheint sich zu erfüllen.

Folgender Test setzt voraus, dass die Web-Konsole unten oder seitlich angefügt und nicht in einem eigenen Fenster geöffnet wird; das ist ohnehin die Standardeinstellung.

Lass den Code aus #21 weg und nimm folgenden hinzu:

JavaScript

setTimeout(() => {

  let css = '@-moz-document url(chrome://browser/content/browser.xhtml) { \
               browser[class^="devtools-toolbox-"] {display: none} \
             }';
  let cssURI = makeURI('data:text/css,' + encodeURIComponent(css));
  let SSS = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);   
  SSS.loadAndRegisterSheet(cssURI, SSS.AGENT_SHEET);
 
  let evt = new KeyboardEvent('keypress', {key: "I", charCode: 73, ctrlKey: true, shiftKey: true});
  document.dispatchEvent(evt);
 
  setTimeout(() => {
    document.dispatchEvent(evt);
    setTimeout(() => {
      SSS.unregisterSheet(cssURI, SSS.AGENT_SHEET);
    }, 1000);      
  }, 2000);
 
}, 0);

Alles anzeigen

Bei den Timeouts sind vielleicht höhere Werte nötig.

bege

Zitat von aborix

Deine Hoffnung scheint sich zu erfüllen.

... und schneller als erhofft

Zitat von aborix

Folgender Test setzt voraus, dass die Web-Konsole unten oder seitlich angefügt und nicht in einem eigenen Fenster geöffnet wird; das ist ohnehin die Standardeinstellung.

Lass den Code aus #21 weg und nimm folgenden hinzu:

Das öffnet für einen Moment die Web-Konsole? Genial - wieder mal

Ja, mit höheren Timouts funktioniert es Vielen Dank!

(Wenn ich den Code sehe, weiß ich, warum ich es wieder aufgegeben habe, Javascript zu lernen . Mehr als aus anderen Skripts was zusammenzubasteln kriege ich nicht hin.)

Gibt es einen ähnlichen Trick auch für das Tab-Kontextmenü von TreeStyleTab?

aborix

Die Web-Konsole sollte sich mit ausreichend hohen Timeout-Werten unsichtbar öffnen. Mit TreeStyleTab ist sie bei mir aber dennoch oft zu sehen, was nicht sein dürfte. Wenn es egal ist, ob die Web-Konsole zu sehen ist oder nicht, lässt sich der Code vereinfachen. Die Zeilen 3 - 8 und 15 - 17 können dann weggelassen werden.

Zitat von bege

Wenn ich den Code sehe, weiß ich, warum ich es wieder aufgegeben habe, Javascript zu lernen . Mehr als aus anderen Skripts was zusammenzubasteln kriege ich nicht hin.

Das wird schon. Man kommt auch mit kleinen Schritten weiter.

Für das Tab-Kontextmenü von TreeStyleTab habe ich noch nichts gefunden.

bege

Zitat von aborix

Die Web-Konsole sollte sich mit ausreichend hohen Timeout-Werten unsichtbar öffnen. Mit TreeStyleTab ist sie bei mir aber dennoch oft zu sehen, was nicht sein dürfte. Wenn es egal ist, ob die Web-Konsole zu sehen ist oder nicht, lässt sich der Code vereinfachen. Die Zeilen 3 - 8 und 15 - 17 können dann weggelassen werden.

Verstehe, danke. Habe ich mal auskommentiert, weil, wie du schon schreibst, die Konsole hier immer kurz angezeigt wird.

Zitat von aborix

Das wird schon. Man kommt auch mit kleinen Schritten weiter.

Danke für die gute Zusprache

Zitat von aborix

Für das Tab-Kontextmenü von TreeStyleTab habe ich noch nichts gefunden.

Mit dem Warten und Hoffen habe ich bei dir ja nur gute Erfahrungen gemacht

aborix

Ein anderer Code, damit bleibt die Web-Konsole auch mit TreeStyleTab unsichtbar:

JavaScript

  setTimeout(() => {

    let observer = new MutationObserver(mutations => mutations.forEach(mutation =>
      mutation.addedNodes.forEach(node => {
        if (node.localName == 'browser' && node.className.startsWith('devtools-toolbox-')) {
          node.style.visibility = 'collapse';
          observer.disconnect();
        }
      })
    ));

    let element = document.getElementById('tabbrowser-tabpanels');
    observer.observe(element, {childList: true, subtree: true});

    let evt = new KeyboardEvent('keypress', {key: "I", charCode: 73, ctrlKey: true, shiftKey: true});
    setTimeout(() => document.dispatchEvent(evt), 0);
    setTimeout(() => document.dispatchEvent(evt), 2000);

  }, 1000);

Alles anzeigen

bege

Zitat von aborix

Ein anderer Code, damit bleibt die Web-Konsole auch mit TreeStyleTab unsichtbar:

Super! Danke!

Damit es hier funktioniert, musste ich

- den Timeout-Wert von dem anderen Skript (Hinzufügen der CSS-class) höher setzten, damit dieses Skript vorher läuft.

- den Timeout-Wert in Zeile 17 höher setzen, denn im Web-Entwickler-Menü blieb "Werkzeuge ein-/ausblenden" aktiviert, ohne dass die Werkzeuge angezeigt wurden. Wenn ich sie anzeigen lassen wollte, muss ich sie zweimal anklicken bzw. den Shortcut ausführen.

aborix

Wahrscheinlich reicht in der letzten Zeile auch weniger als 1000 und dann können die anderen Werte vielleicht auch niedriger sein.

bege

Zitat von aborix

Wahrscheinlich reicht in der letzten Zeile auch weniger als 1000 und dann können die anderen Werte vielleicht auch niedriger sein.

Danke für den Tipp. Im Moment läuft's super. Freut mich richtig. Ich habe den FF mit Addons ziemlich vollgepackt, da braucht er 'ne Weile zum Starten und bis dahin sind auch die Skripte gelaufen. Also bis auf das Kontextmenü von TreeStyleTab alles perfekt.

bege

Zitat von Endor

bege

Meinst das Kontextmenü von Sternschaltfläche in about:addons?

Wenn ja, ich habe das so angesprochen:

CSS

#page-options > panel-list:nth-child(1) > panel-item:nth-child(1)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild5.png');
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}


#page-options > panel-list:nth-child(1) > panel-item:nth-child(2)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild61.png');
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}


#page-options > panel-list:nth-child(1) > panel-item:nth-child(4)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild3.png');
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}


#page-options > panel-list:nth-child(1) > panel-item:nth-child(5)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild66.ico');
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}


#page-options > panel-list:nth-child(1) > panel-item:nth-child(7) {
fill: transparent !important;}


#page-options > panel-list:nth-child(1) > panel-item:nth-child(7)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background: url('https://raw.githubusercontent.com/Endor8/CSS/master//Icons/Bild62.png') no-repeat !important;
background-size: 18px 18px !important;
margin-left: 16px;
margin-right: -32px;
margin-bottom: 3px;}




#page-options > panel-list:nth-child(1) > panel-item:nth-child(7):not([checked])::before {
content: 'Nicht die';
font-size: 14px;
padding-left: 22px !important;
padding-right: 35px !important;
padding-top: 1px !important;
padding-bottom: 2px !important;
display: block;
width: 16px;
height: 16px;
background: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild63.png') no-repeat !important;
background-size: 18px 18px !important;
margin-left: 18px;
margin-right: -32px;}


#page-options > panel-list:nth-child(1) > panel-item:nth-child(8)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild64.png');
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}


#page-options > panel-list:nth-child(1) > panel-item:nth-child(10)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild67.png');
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}

Alles anzeigen

Sieht dann so aus:

Nur zur Info, mit obigen CSS Code werden Symbole dem Kontextmenü hinzugefügt,

selbige werden direkt von meiner Github Seite geladen.
Wenn der Code passt, dann aber bitte eigene Symbole verwenden oder meine runter laden
und lokal einbinden.

Mfg.
Endor

Alles anzeigen

Das hat mich außerdem auf die Idee gebracht, dass überall, wo in Menüs Einträge den Typ "checkbox" haben, ich die Symbole mit diesem Code anzeigen lassen kann. Ich habe nur das Symbol genommen, wenn nicht ausgewählt, so sehe ich, wenn es sich um diesen Typ handelt und nicht etwa ein Symbol fehlt.

Und dein Code erspart in anderen Menüs die ganzen :hover-Einträge, echt super. Habe ich auch an anderen Stellen verwendet.

CSS

menuitem[checked="false"]::before {
content: '';
display: block;
width: 16px;
height: 16px;
background: url('../../../../../icons/Bild63.png') no-repeat !important;
margin: 0 -18px 0 2px;}

Symbole zu Kontextmenüs mit Javascript und CSS hinzufügen

bege 7. Februar 2020 um 02:26

Ähnliche Themen

Mehrzeilige Tableiste für aktuelle Firefox-Versionen

Websiten Sperrschloss deaktivieren

Firefox 70 und grünes Schloss-Symbol

Firefox Suche über Adressleiste - Größter Nachteil!