Neue Quicklink-Button

Horstmann

Zitat von Mira_Belle

Wofür ist der ganze Bitch-Code?
Habe jetzt mal nur den Code aus #10
nach : "catch(e) {};" angepasst und übernommen, _{(danke dafür)}
und damit besteht es den Elchtest und auch den Funktionstest.
(Sofortige Funktion nach verschieben aus dem Anpassfenster)

Der macht das gleiche wie der aus #10, nur evtl. besser, bin noch dran das fein einzustellen.
Der heisst nur so weil mich die Buttons in letzter Zeit so gequält haben.

Mira_Belle

Kurze Bewertung von perplexy (KI)
Anmerkung!
Variante 1 => Dein Code aus #20
Variante 2 => hänge ich mal unten an.

Zitat

Beide Varianten tun funktional fast dasselbe, sind aber unterschiedlich strukturiert und haben jeweils Vor‑ und Nachteile.
Robustheit / Fehlerfälle
Beide Varianten kapseln CustomizableUI.createWidget in try { ... } catch(e) {}, behandeln aber den Fehler nur durch Ignorieren.
Variante 1 geht davon aus, dass document.getElementById(button_id) nach createWidget sofort existiert; wenn das fehlschlägt, gibt es keinen Klick‑Listener.
Variante 2 prüft explizit, ob der Button existiert, und versucht es bei Fehlschlag weiter (Polling), wodurch der Listener sehr zuverlässig angehängt wird.
Bewertung: Variante 2 ist in der Praxis fehlertoleranter, weil der Klick‑Handler fast sicher gesetzt wird.

Ob DAS so stimmt? Ich kann das nicht so wirklich beurteilen.
Da müsste mal kurz ein Profi drüberschauen.

Horstmann In der langen Version der "Beurteilung" standen nur Dinge,
die meiner Meinung jetzt nicht so ausschlaggebend waren.
Ich glaube, das kannst Du Dir ja anschauen, wenn Du ganz unten den Editierbutton anklickst.
Wenn das nicht gehen sollte, ich schicke Dir die lange Version auch gerne per PN zu.

Und hier meine Variante, wobei da noch zwei Zeilen Code sind,
die ich auskommentiert habe, weil ich mich noch nicht entschieden habe!

Code

(function() {

  if (!window.gBrowser)
	return;

   const
   // ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
            id = 'link-button-cf', // Id des Buttons
          link = 'https://www.camp-firefox.de/forum/', // Linkziel des Buttons
         label = 'Quicklink: camp-firefox.de/...', // Bezeichnung des Buttons
   tooltiptext = 'Quicklink:\nForum - camp-firefox.de',
   // Icon-------------------------------------------------------
          icon = 'camp-firefox.ico',  // [Name.Dateiendung] des Symbols
      iconPath = '/chrome/icons/', // Pfad zum Ordner der das Icon beinhaltet
   // ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
   curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));

   // Erlaubt korrekte .svg Icons Darstellung in allen UI Bereichen
	if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
		Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
	}
   //BUTTON
   try {
      CustomizableUI.createWidget({
         id: id,
         defaultArea: CustomizableUI.AREA_NAVBAR,
         label: label,
         tooltiptext: tooltiptext,

         onCreated: (button) => {
            // Optik
            button.style.MozContextProperties = 'fill, stroke, fill-opacity';
            button.style.listStyleImage = 'url("' + curProfDir + iconPath + icon + '")';
            button.style.minWidth = 'fit-content';
         }
      });
	} catch(e) {};

   //click
  (function add_button() {
      //  const button = document.getElementById(id);
        if (button) {
      //    button.addEventListener('click', event => {
         document.getElementById(id).addEventListener('click', event => {
            if (event.button === 0) {
              openTrustedLinkIn(link, "tab");
            }
          });
        } else {
          setTimeout(add_button, 100);
        }
    })();

})();

Alles anzeigen

FuchsFan

Zitat von Mira_Belle

Und hier meine Variante, wobei da noch zwei Zeilen Code sind,
die ich auskommentiert habe, weil ich mich noch nicht entschieden habe!

Test in v147, Button ist da, aber ohne Funktion.

2002Andreas

Zitat von FuchsFan

Test in v147..ohne Funktion

Kann ich für Fx 145 auch bestätigen.

milupo

Ich weiß nicht, ob das überhaupt geht: Am Anfang werden Variablen (id, link, label, tooltip, tooltiptext) Werte zugewiesen und im Nachhinein die Variablen-Namen direkt als Parameter angegeben, statt ihrer Werte: Zeile 25, 27, 28, 44, 46. Und die Eigenschaften, denen das zugewiesen wird, haben auch noch die gleichen Namen wie die oben definierten Variablen.

Horstmann

Zitat von Mira_Belle

Kurze Bewertung von perplexy (KI)
Anmerkung!
Variante 1 => Dein Code aus #20
Variante 2 => hänge ich mal unten an.

Nur kurz zum Verständnis: du meinst evtl. meinen Code aus #10, nicht #20 (ist auch dein Posting)?

In deiner Variante musst du in Zeile 41 den Kommentar // entfernen sonst ist button nicht definiert.
Ist dann eigentlich genau wie mein Code aus #10.

Re. AI: jemand den ich kenne hat das für Fx ab und zu mal probiert, AI kapiert die Feinheiten der UI nicht, besonders das Customize Zeug, und den Unterschied zw. selber gemachten und Fx Buttons.

Zitat von milupo

Ich weiß nicht, ob das überhaupt geht: Am Anfang werden Variablen (id, link, label, tooltip, tooltiptext) Werte zugewiesen und im Nachhinein die Variablen-Namen direkt als Parameter angegeben, statt ihrer Werte: Zeile 25, 27, 28, 44, 46. Und die Eigenschaften, denen das zugewiesen wird, haben auch noch die gleichen Namen wie die oben definierten Variablen.

Das geht schon, ist mE nur sehr verwirrend.
Der eine Vorteil der Variablen ist, dass User Einstellung oben zusammengefasst dargestellt und veränderbar sind; für einen neuen Button kann man dann nur diese Zeilen anpassen, und fertig.
Die Button Funktion könnte man auch noch nach oben ziehen.

Ob man das jetzt braucht für relativ kurze und einfache Buttonscripts ist eine andere Frage.

Mira_Belle

FuchsFan & 2002Andreas
War mein Fehler!
So funktioniert es und damit hat sich das mit dem auskommentierten Code auch erledigt.

JavaScript

(function() {

  if (!window.gBrowser)
	return;

   const
   // ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
            id = 'link-button-cf', // Id des Buttons
          link = 'https://www.camp-firefox.de/forum/', // Linkziel des Buttons
         label = 'Quicklink: camp-firefox.de/...', // Bezeichnung des Buttons
   tooltiptext = 'Quicklink:\nForum - camp-firefox.de',
   // Icon-------------------------------------------------------
          icon = 'camp-firefox.ico',  // [Name.Dateiendung] des Symbols
      iconPath = '/chrome/icons/', // Pfad zum Ordner der das Icon beinhaltet
   // ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
   curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));

   // Erlaubt korrekte .svg Icons Darstellung in allen UI Bereichen
	if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
		Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
	}
   //BUTTON
   try {
      CustomizableUI.createWidget({
         id: id,
         defaultArea: CustomizableUI.AREA_NAVBAR,
         label: label,
         tooltiptext: tooltiptext,

         onCreated: (button) => {
            // Optik
            button.style.MozContextProperties = 'fill, stroke, fill-opacity';
            button.style.listStyleImage = 'url("' + curProfDir + iconPath + icon + '")';
            button.style.minWidth = 'fit-content';
         }
      });
	} catch(e) {};

   //click
  (function add_button() {
        const button = document.getElementById(id);
        if (button) {
          button.addEventListener('click', event => {
            if (event.button === 0) {
              openTrustedLinkIn(link, "tab");
            }
          });
        } else {
          setTimeout(add_button, 100);
        }
    })();

})();

Alles anzeigen

Horstmann Oh, nein ich ließ den Code aus #19 mit dem meinigen vergleichen.

Zitat von Horstmann

Das geht schon, ist mE nur sehr verwirrend.
Der eine Vorteil der Variablen ist, dass User Einstellung oben zusammengefasst dargestellt und veränderbar sind; für einen neuen Button kann man dann nur diese Zeilen anpassen, und fertig.
Die Button Funktion könnte man auch noch nach oben ziehen.
Ob man das jetzt braucht für relativ kurze und einfache Buttonscripts ist eine andere Frage.

Richtig!
Natürlich kann man den "Konfigurationsbereich" auch weglassen und die "Parameter" direkt
im Code einfügen, nur so ist es aber auch für so manchen Nutzer einfacher,
wenn nicht im Code direkt etwas geändert werden muss.

2002Andreas

Zitat von Mira_Belle

So funktioniert es

FuchsFan

Zitat von Mira_Belle

So funktioniert es

Ja! Ist das jetzt der Endstand?

Mira_Belle

Zitat von FuchsFan

Ja! Ist das jetzt der Endstand?

Warum so ungeduldig?
Ich habe da noch was anderes in der Pipeline, aber das dauert noch.
Muss selber erst mal schauen.

FuchsFan

Zitat von Mira_Belle

Warum so ungeduldig?
Ich habe da noch was anderes in der Pipeline, aber das dauert noch.
Muss selber erst mal schauen.

Nicht ungeduldig, nur zur Information. Schau ruhig, ich störe auch nicht mehr.

Horstmann

Zitat von Mira_Belle

So funktioniert es

Prima!

Weil ich mir die eh schon gebastelt habe, hier noch 2 Varianten - pures Horst-I !

Die Funktion ist auch mit im Einstellungen Bereich, wenn schon.
Keine Ahnung ob das immer klappt, aber so muss der User gar nicht mehr nach unten.

Die Bezeichnungen sind klar differenziert, damit man auch weiss was wo benutzt wird, und den Code verstehen kann, s. #25.
Bei so kleinen Codes nur verwirrend, bei längeren ist zB 20x button für komplett verschiedene Anwendungen ein Graus.

Id ohne Bindestriche, weil JS; bei style.MozContextProperties = 'fill,..., falls das tatsächlich irgendwo gebraucht wird, nehmen wir stroke-opacity gleich noch mit dazu.

Ein kleiner Bug besteht weiter, die Rechtsklickfunktion auf dem Button wird manchmal erst nach 2mal Verschieben, Neustart etc. aktiv, aber das ist kein Beinbruch.

#1, wie deiner bzw. aus #10:

JavaScript

// Button Test #1

(function() {

  if (!window.gBrowser)
	return;

  // Erlaubt korrekte .svg Icons Darstellung in allen UI Bereichen
	if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
		Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
	};

      // User Einstellungen

      // Button #id
      let btn_id = 'link_button_cf';

      // Icon
      const btn_icon = 'flower-satt32.png';  // Name+Dateiendung des Symbols
      const iconPath = '/chrome/icons/'; // Pfad zum Ordner der das Icon beinhaltet
      const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir)); // Pfad zum Profil
      // Kompletter Pfad zum Icon =>
      const ImagePath = curProfDir + iconPath + btn_icon;

      const btn_label = 'camp-firefox.de';  // Bezeichnung
      const btn_tooltiptext = 'Forum - camp-firefox.de';  // Tooltip

      // Funktion
      function btn_func() {
          openTrustedLinkIn('https://www.camp-firefox.de/forum/', "tab");
        };

      // User Einstellungen Ende

  // Button
	try {
      CustomizableUI.createWidget({
         id: btn_id,
         defaultArea: CustomizableUI.AREA_NAVBAR,
         label: btn_label,
         tooltiptext: 'btn_tooltiptext',
         onCreated: (this_button) => {
            this_button.style.MozContextProperties = 'fill, stroke, fill-opacity, stroke-opacity';
            this_button.style.listStyleImage = 'url("' + ImagePath + '")';
            this_button.style.minWidth = 'fit-content';
          }
      });
	} catch(e) {};

  (function add_button() {
        let btn_exists = document.getElementById(btn_id);
        if (btn_exists) {
          btn_exists.addEventListener('click', event => {
            if (event.button === 0) {
                  btn_func();
                }
          });
        } 
        else {
          setTimeout(add_button, 100);
        }
    })();

})();

Alles anzeigen

#2, benutzt Codeteile von BrokenHeart:

JavaScript

// Button Test #2, Kudos BrokenHeart

(function() {

  if (!window.gBrowser)
	return;

      // Erlaubt korrekte .svg Icons Darstellung in allen UI Bereichen
    	if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
    		Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
    	};

      // User Einstellungen

      // Button #id
      let btn_id = 'link_button_cf';

      // Icon
      const btn_icon = 'flower-satt32.png';  // Name+Dateiendung des Symbols
      const iconPath = '/chrome/icons/'; // Pfad zum Ordner der das Icon beinhaltet
      const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir)); // Pfad zum Profil
      // Kompletter Pfad zum Icon =>
      const ImagePath = curProfDir + iconPath + btn_icon;

      const btn_label = 'camp-firefox.de';  // Bezeichnung
      const btn_tooltiptext = 'Forum - camp-firefox.de';  // Tooltip

      // Funktion
      function btn_func() {
          openTrustedLinkIn('https://www.camp-firefox.de/forum/', "tab");
        };

      // User Einstellungen Ende

      // Button
    	try {
          CustomizableUI.createWidget({
             id: btn_id,
             defaultArea: CustomizableUI.AREA_NAVBAR,
             label: btn_label,
             tooltiptext: btn_tooltiptext,
             onCreated: (this_button) => {
                this_button.style.MozContextProperties = 'fill, stroke, fill-opacity, stroke-opacity';
                this_button.style.listStyleImage = 'url("' + ImagePath + '")';
                this_button.style.minWidth = 'fit-content';
             }
          });
    	} catch(e) {}

      function click_button() {
          document.getElementById(btn_id).addEventListener('click', event => {
              if (event.button === 0) {
                 btn_func();
              }
            });
          };

      if (window.readyState !== "loading") {
    		setTimeout(click_button, 500);
        }
      else {
    	  window.addEventListener( "DOMContentLoaded", click_button );
        };
      window.addEventListener('aftercustomization', () => {
    		setTimeout(() => click_button(), 100)
        });

})();

Alles anzeigen

Icon: flower-satt32.png.zip

Neue Quicklink-Button

Robustheit / Fehlerfälle

Ähnliche Themen

about:about Button