Alternatives/Fallback Icon mit Javascript oder CSS festlegen?

Horstmann

Ich bastle gerade an einer Scriptversion für dieses Thema, und es gibt da noch eine Frage, auf die ich keine Antwort finde.

Das Script benutzt eine Kombination aus JS und CSS, um selber definierte Icons für die beiden erzeugten Zähler bereitzustellen.

Meine Version soll zwei von Firefox übernommene Icons bereitstellen, für Leute die keine eigenen Icons haben, aber es auch erlauben solche eigenen Icons zu benutzen.

Was so auch klappt, aber der User muss manuell das Script editieren, um seine eigenen Bilder benutzen zu können.

Idealerweise gäbe es im Script eine Funktion, die im Falle eines nicht vorhandenen/gefundenen/fehlerhaften User Icons automatisch das Icon von Firefox als Alternative/Fallback lädt.

Hier das Script, die relevanten Einträge sind wohl die Zeilen 20 - 22, sowie 74 - 75 und 101 -102.

JavaScript

// JavaScript Document
// BookmarkCount.uc.js - modified for element separation #7
// Author BrokenHeart
// Modified by Mira_Belle / Horstmann / Forum members
// Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536
// Endor Repository Link Source https://github.com/Endor8/userChrome.js/blob/master/Firefox%20115/BookmarkCount.uc.js


(function() {

    if (!window.gBrowser) return;
    
    setTimeout(function() {
        setFunction();
    },50);


    //Custom icons in profile/chrome/icons folder

    let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
    let icon1 = "YourFolderIcon.png" 
    let icon2 = "YourLinkIcon.svg"

    function setFunction() {

        const css =`


            /**  Basics  **/


            /* Basic distances / Font Size / font weight counter , disable to use default  /  Fonts list monospace */

            :root {
                --basic_distance: 4px;   
                /*--counter_fontsize: 11px;*/   
                /*--counter_fontweight: 800;*/     
                --counter_fonts: "Droid Sans Mono", "SF Mono", "Andale Mono", Consolas, "Lucida Console", "Courier New", monospace;   
            }

            /* Fix container content vertical centering for first / folder counter */ 
            hbox.menu-accel-container.countClass1 {
                align-items: center !important;
            }


            /* Disable default left margin for label */ 
            .countClass1 label {
                margin-inline: 0px !important;
            }

            /* Use label as divider, optional, un-comment to use */ 
            /*.countClass1 label {
                height: 12px !important;
                width: 1px !important;
                background-color: red !important;
                order: 1;    
                margin-inline: calc(var(--basic_distance) + 4px) 3px !important;  
            }*/


            /****  folder counter box  ****/


            /* Folder counter box distance left / right */
            hbox.menu-accel-container.countClass1 {
                margin-left: 16px !important;                                 /* minimum distance to left for narrow windows */ 
                margin-right: calc(var(--basic_distance) + 2px) !important;  /* distance to Items/links counter box */ 
            }

            /* Icon 1 */
            .countClass1::before {
                content: "";
                background-image: url("chrome://global/skin/icons/folder.svg");          /* Fx icon */
                /*background-image: url(${profilePath}/${icon1});*/  /* Custom icon, uncomment */
                background-repeat: no-repeat;
                background-size: 16px;                                                           /* icon 1 size */
                background-position: center;
                margin-right: var(--basic_distance) !important;  /* distance icon -> counter */
                height: 16px;
                width: 16px;
                /*fill: #c0c0c0;*/                               /* .svg icon colour / opacity if applicable */
                fill-opacity: 1;
            }

            /* Counter 1 */
            .countClass1::after {
                content: attr(data-value1) !important;
                font-family:  var(--counter_fonts) !important;
                font-size: var(--counter_fontsize) !important;
                font-weight: var(--counter_fontweight) !important;
                /*color: red !important;*/                                                  /*  Text 1 colour */
            }


            /****  Items/links counter box  ****/

            /* Icon 2 */
            .countClass2::before {
                content: "";
                background-image: url("chrome://browser/skin/bookmark-hollow.svg");  /* Fx icon */
                /*background-image: url(${profilePath}/${icon2});*/    /*  Custom icon, uncomment */
                background-repeat: no-repeat;
                background-size: 16px;                                                           /* icon 2 size */
                background-position: center;
                margin-right: var(--basic_distance) !important;   /* distance icon -> counter */
                height: 16px;
                width: 16px;
                /*fill: #c0c0c0;*/                                /* .svg icon colour / opacity if applicable */
                fill-opacity: 1;
            }

            /* Counter 2 */
            .countClass2::after {
                content: attr(data-value2);
                font-family:  var(--counter_fonts) !important;
                font-size: var(--counter_fontsize) !important;
                font-weight: var(--counter_fontweight) !important;
                /*color: red !important;*/                                                /* Text 2 colour */
            }

            /* Arrow right */
            /* Move arrow to the right, distances */
            .countClass2 image {
                order: 1;    
                margin-left: var(--basic_distance) !important;  /* distance Counter 2 <-- arrow */    
                margin-right: 0px !important;                        /* distance arrow  -->  box border */
            }


           /** Extra stuff  **/

            /*  Outline only for testing  */ 
            /*
            menu.menu-iconic.bookmark-item {
                 outline: 1px solid orange !important;
                 outline-offset: -8px !important;
            }*/

            /*  Background only for testing  */ 
            /*
            .countClass1::after, .countClass2::after {
                 outline: 1px solid green !important;
                 outline-offset: -1px !important;
                 background-color: gainsboro;
            }*/


           /*  Some fonts not centered Fix, optional, experimental  */
           /* .countClass1::after, .countClass2::after {
                height: var(--counter_fontsize) !important;                  
            }*/

        `;

        const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
        const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
        sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

        let bmbMenu = document.getElementById('bookmarks-menu-button');
        let bookMenu = document.getElementById('bookmarksMenu');
        let persToolBar = document.getElementById('PersonalToolbar');
        
        if(bmbMenu)
            bmbMenu.addEventListener('popupshowing', onPopupShowing ); 
        if(bookMenu)
            bookMenu.addEventListener('popupshowing', onPopupShowing ); 
        if(persToolBar)
            persToolBar.addEventListener('popupshowing', onPopupShowing ); 
    }
    
    function onPopupShowing(aEvent) {
        
        let popup = aEvent.originalTarget;

        for (let item of popup.children) {
            if (item.localName != 'menu' || item.id?.startsWith('history')) {
                continue;
            }    
            setTimeout(() => {
              let itemPopup = item.menupopup;
              itemPopup.hidden = true;
              itemPopup.collapsed = true;
              itemPopup.openPopup();
              itemPopup.hidePopup();
              let menuitemCount = 0;
              let menuCount = 0;
              for (let subitem of itemPopup.children) {
                if (subitem.classList.contains('bookmark-item') && !subitem.disabled && !subitem.hidden) {
                  if (subitem.localName == 'menuitem') {
                    menuitemCount++;
                  } else if (subitem.localName == 'menu') {
                    menuCount++;
                  }
                }
              }
              itemPopup.hidden = false;
              itemPopup.collapsed = false;
              
              // Folder counter, 2 digits // Numbers aligned right // use padEnd for left
              let label1 = item.childNodes[3];
              label1.classList.add('countClass1');
              //let strCountOut1 = String(menuCount).padStart(2,  '\xa0');  // Keine Klammern // No Brackets
              let strCountOut1 = String("[" + menuCount + "]").padStart(4,  '\xa0');     // Klammern // Brackets

              label1.setAttribute('data-value1', strCountOut1);

              // Links counter, 3 digits // Numbers aligned right // use padEnd for left
              let label2 = item.childNodes[4];
              label2.classList.add('countClass2'); 
              //let strCountOut2 = String(menuitemCount).padStart(3, '\xa0');  // Keine Klammern // No Brackets
              let strCountOut2 = String("[" + menuitemCount + "]").padStart(5,  '\xa0');    // Klammern // Brackets

              label2.setAttribute('data-value2', strCountOut2);

            }, 100);
        }
    }    
})();

Alles anzeigen

Ein Versuch mit CSS war schon, zB in Zeile 76 sowas einzufügen: background-image: url(${profilePath}/${icon1}), url("chrome://global/skin/icons/folder.svg"); ; was dann aber zu doppelt angezeigten Bildern führt (bei transparenten Bildteilen); ist auch keine elegante oder leistungseffiziente Lösung vermute ich.

Sören Hentzschel

Hallo,

Zitat von Horstmann

Idealerweise gäbe es im Script eine Funktion, die im Falle eines nicht vorhandenen/gefundenen/fehlerhaften User Icons automatisch das Icon von Firefox als Alternative/Fallback lädt.

Meinst du nicht, dass das Overengineering ist? Wer ein Script nutzt, sollte in der Lage sein, entsprechende Grafiken abzulegen oder eine Option im Code zu ändern, um die Darstellung entsprechend anzupassen. Für ein „Fallback“ müsstest du immer erst prüfen, ob die Grafik existiert. Das wird nicht ohne Verzögerung möglich sein und wird dann ja auch immer ausgeführt, wenn es die Grafik gibt. Ich sehe da die Kosten höher als den Nutzen.

Ich habe das nicht im Kontext des Scripts und mit einer lokalen Datei getestet, aber die Idee wäre sonst wohl sowas in der Art:

JavaScript

const img = document.createElement('img');
img.onerror = function () {
  // Grafik existiert nicht, implementiere die Fallback-Logik
}
img.src = 'pfad/zur/datei.png';

Mira_Belle

Horstmann

Oh, ich hätte da was!

Es geht um ein Skript, welches Icons in der Adresszeile einfügt!

Kannst ja mal reinschnuppern.

Es geht um diesen Teil!

JavaScript

var myPath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));  // Pfadangabe zum Profilordner
var myPrefix = "firefox_logo_2004.svg";  // Name (& Dateiendung) des anzuzeigenden Symbols
var mySuffix = ' ';  // Dateiendung des anzuzeigenden Symbols
var Symbol = myPath + myPrefix + mySuffix;
var i_icon = 'chrome://global/skin/icons/info.svg';
var sheet = 'chrome://global/skin/icons/Portrait.png';
var brand = 'chrome://branding/content/icon32.png';
var globe = 'chrome://global/skin/icons/defaultFavicon.svg';
var all = 'chrome://global/skin/icons/settings.svg';
var avatar = 'chrome://browser/skin/fxa/avatar-empty.svg';
var icon_for_pages_without_favicon = Symbol; // i_icon, sheet, brand, globe or all (colorized Fx channel icon)
(function() {
    if (location.href !== 'chrome://browser/content/browser.xhtml') return;
        let fav = document.createXULElement('image');
        fav.setAttribute('id', 'faviconid');
        fav.setAttribute('class', 'faviconclass');
    gBrowser.tabContainer.addEventListener('TabAttrModified',
    function() {            
        let favicon = gBrowser.selectedTab.image;
        if (favicon && favicon.indexOf('icon32.png') === -1) {
            // if favicon is present and not 'icon32.png', set it as the source
            fav.src = favicon;        
            var position = document.getElementById('identity-icon');
            position.parentNode.insertBefore(fav, position.previousSibling);
        }
        else {
            // if no favicon is present or it is 'icon32.png', set a custom one
            fav.src = icon_for_pages_without_favicon;
            var position = document.getElementById('identity-icon');
            position.parentNode.insertBefore(fav, position.previousSibling);
        }
    }, false);
    fav.style.height = '16px';
    fav.style.width  = '16px';
    fav.style.marginLeft  = '7px';
    fav.style.marginRight  = '3px';
    fav.style.marginTop  = '2px';

Alles anzeigen

Da wird erst geprüft, ob es ein Favicon gibt, und es wird genutzt,

oder, wenn es keines gibt, wird ein festgelegtes genommen.

Hier ist z.B. gerade Symbol, also ein Icon im Pfad ausgewählt.

Hier der Link zum kompletten Thread.

RE: Eigene Icons für about:xxx in der Urlbar, bzw. im Container

Horstmann

Zitat von Sören Hentzschel
Meinst du nicht, dass das Overengineering ist? Wer ein Script nutzt, sollte in der Lage sein, entsprechende Grafiken abzulegen oder eine Option im Code zu ändern, um die Darstellung entsprechend anzupassen. Für ein „Fallback“ müsstest du immer erst prüfen, ob die Grafik existiert. Das wird nicht ohne Verzögerung möglich sein und wird dann ja auch immer ausgeführt, wenn es die Grafik gibt. Ich sehe da die Kosten höher als den Nutzen.
Ich habe das nicht im Kontext des Scripts und mit einer lokalen Datei getestet, aber die Idee wäre sonst wohl sowas in der Art:
JavaScript
const img = document.createElement('img');
img.onerror = function () {
  // Grafik existiert nicht, implementiere die Fallback-Logik
}
img.src = 'pfad/zur/datei.png';

Das ist ein guter Punkt; es sollte eigentlich anzunehmen sein, dass der Benutzer von so einem Script sich das anpassen kann.

Vielleicht wäre es sinnvoller, das Fallback Icon von Firefox ganz rauszulassen, oder als auskommentierte Option im CSS Teil zu einzubinden.

Dankeschön för den Code ; ich bin beim Recherchieren auf ähnliche onerror Lösungen gestossen - leider haperts am konkreten Implementieren, mangels Kenntnis.

Zitat von Mira_Belle

Horstmann
Oh, ich hätte da was!
Es geht um ein Skript, welches Icons in der Adresszeile einfügt!
Kannst ja mal reinschnuppern.

Dankeschön, schau ich mir an!

Horstmann

Hat sich erledigt; ich habe einfach eine manuell aktivierbare CSS Option eingebaut, bei Interesse s. hier.

Alternatives/Fallback Icon mit Javascript oder CSS festlegen?

Ähnliche Themen

Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

Schaltfläche um Lesezeichen Leiste ein/auszublenden ?

Firefox 113 Probleme mit TABs und Kontext Menü

JavaScript erlernen. Übungen mit "Firefox Translate" aus der URL-Leiste

Probleme mit TABs verschieben in Leiste