1. Nachrichten
  2. Forum
    1. Unerledigte Themen
    2. Forenregeln
  3. Spenden
  • Anmelden
  • Registrieren
  • Suche
Alles
  • Alles
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
  1. camp-firefox.de
  2. Horstmann

Beiträge von Horstmann

  • In diesem Script NACH dem Text "Anzahl Ordner / Anzahl Links." bzw. "Anzahl Ordner / Anzahl Link(s) -> Link(s) in Tab(s) öffnen" einen Separator setzen.

    • Horstmann
    • 18. Juli 2023 um 18:55
    Zitat von omar1979

    Deine Code bewirkt das. Siehe Bilder.

    Menü Chronik. Gut. ------------------ Menü Lesezeichen. Gut. ----------------- Lesezeichen-Symbolleiste. Nicht gut.

    Wirkt nicht überall das Gleiche. Leider.

    Dann könnte es gut sein, dass du schon CSS Code benutzt, der die Separatoren in verschiedenen Bereichen verschieden modifiziert.

    Genauer gesagt, alles was als dünne rote Linie auftaucht - mit dem Code von Mira - ist von dir geändert worden, das mit der nach aussen versetzten Umrandung ist normal.

    Die Separatoren haben normalerweise Padding, und die Outlines/Borders sitzen am Rand des Ganzen.

    Also solltest du die Codes für alle Separatoren raussuchen und nach padding/margin/height etc. schauen.

    Für nur die Farbe von nur der Linie könnte sowas funktionieren, falls nicht wieder was querschiesst:

    CSS
    menuseparator {
            color: red !important;        
            /*background-color: green !important;*/
    }

    Der auskommentierte Teil für background-color sollte die tatsächliche Grösse illustrieren können.

    Oder sowas:

    CSS
    menuseparator::before {
         border-top: 42px solid red !important;
    }
  • Alternatives/Fallback Icon mit Javascript oder CSS festlegen?

    • Horstmann
    • 18. Juli 2023 um 15:47
    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! :)

  • Alternatives/Fallback Icon mit Javascript oder CSS festlegen?

    • Horstmann
    • 18. Juli 2023 um 14:28

    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.

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

    • Horstmann
    • 17. Juli 2023 um 20:34
    Zitat von omar1979
    Zitat von Horstmann

    Probier spasseshalber mal das:

    Das passt, wenn ich etwas mit den inline-werte spiele.

    Ich glaub ich benütze bis auf weiteres das Script im Beitrag-Nr. 296

    Das ist aber das gleiche wie das von #230, nur mit 2 Änderungen provisorisch reingedrängt.

    Das aktuelle Script von Mira_Belle ist hier, wenn ich das noch alles richtig überblicke. ;)

  • In diesem Script NACH dem Text "Anzahl Ordner / Anzahl Links." bzw. "Anzahl Ordner / Anzahl Link(s) -> Link(s) in Tab(s) öffnen" einen Separator setzen.

    • Horstmann
    • 17. Juli 2023 um 11:22
    Zitat von omar1979
    Zitat von omar1979
    Zitat von Horstmann

    Was ist denn dein CSS Code dafür?

    Das wäre eine.

    CSS
    /* Menü-Separator von allen Menüs im Menübar entfernen*/
    #main-menubar menuseparator {
      display: none !important;
      }

    Da hab ich jetzt noch eine Code gefunden. Welches das anspricht weiss ich grad nicht und steht auch nichts.

    Wobei ich im Kontextmenü-Rechtsklick.css gefunden habe.

    CSS
        menupopup menuseparator{
        display: none !important;}

    Verstehe, dann vielleicht sowas, wenn der andere Code nicht geht:

    Korrektur, beide deiner Codes sprechen bei mir nicht die gewünschten Separatoren an, und schalten sie auch nicht ab.

    Also vielleicht doch einfach das in die bestehende userChrome.css, oder noch besser erstmal den exakten Code finden, der auch diese speziellen Separatoren versteckt.

    UUUnd nochmal Korrektur, sorry... ;)

    menupopup ...etc. spricht auch diese Separatoren an, vielleicht ist das der relevante Code, falls es nicht noch andere gibt für diese Elemente.

    Eine oder veilleicht beide dieser Varianten könnte klappen, in die userChrome.css zum unveränderten alten Code:

    CSS
    menuseparator.bookmarks-actions-menuseparator {
        display: flex !important;
    }


    CSS
    menupopup menuseparator.bookmarks-actions-menuseparator {
        display: flex !important;
    }
  • In diesem Script NACH dem Text "Anzahl Ordner / Anzahl Links." bzw. "Anzahl Ordner / Anzahl Link(s) -> Link(s) in Tab(s) öffnen" einen Separator setzen.

    • Horstmann
    • 17. Juli 2023 um 11:04
    Zitat von omar1979
    Zitat von Horstmann

    Probier vielleicht das mal, zusätzlich zu deinem Code:

    Zu welchem code?

    Zu dem den du schon hast, mit dem alle Separatoren aus sind; einfach mal den extra Code mit in die userChrome.css reinbauen.

    Der Code den du gepostet hast schaltet den vom Script generierten Separator bei mir übrigens nicht aus, aber ist egal.


    Zitat von Mira_Belle
    Zitat von omar1979
    CSS
    /* Menü-Separator von allen Menüs im Menübar entfernen*/
    #main-menubar menuseparator {
      display: none !important;
      }
    .

    D.H. Du musst jeden Separator in Deinen Menüs einzeln ansprechen müssen,

    also alle, die Du ausblenden willst, bis auf den Einen, den Du halt behalten willst.

    Es sei denn, es gäbe eine Möglichkeit per CSS EINE Ausnahme für genau EIN Element zu definieren.

    Glaube ich aber nicht!

    Geht schon im Prinzip:

    CSS
    menuseparator:not(.bookmarks-actions-menuseparator) {
      display: none !important;
      }

    Oder sowas, mit spezifischerem Code den allgemeineren aushebeln:

    CSS
    menuseparator {
      display: none !important;
      }
    
    
    menuseparator.bookmarks-actions-menuseparator {
        display: flex !important;
    }

    Kommt halt immer drauf an, gibt ja diverse Separatoren, die man evtl. mal mehr oder weniger leicht ansprechen kann.

  • In diesem Script NACH dem Text "Anzahl Ordner / Anzahl Links." bzw. "Anzahl Ordner / Anzahl Link(s) -> Link(s) in Tab(s) öffnen" einen Separator setzen.

    • Horstmann
    • 17. Juli 2023 um 09:51

    Probier vielleicht das mal, zusätzlich zu deinem Code:

    CSS
    menuseparator.bookmarks-actions-menuseparator {
        display: flex !important;
    }
  • In diesem Script NACH dem Text "Anzahl Ordner / Anzahl Links." bzw. "Anzahl Ordner / Anzahl Link(s) -> Link(s) in Tab(s) öffnen" einen Separator setzen.

    • Horstmann
    • 17. Juli 2023 um 09:36
    Zitat von omar1979
    Zitat von BrokenHeart

    Dann hast du vermutlich irgendwas selbst "verbastelt", da ja im Skript der Separator extra eingefügt wird:

    Ich habe in allen Popups die Separatoren mit css entfernt. Wenn ich jetzt die lösche, dann tauchen überall wieder Separatoren auf. :(

    Was ist denn dein CSS Code dafür?

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

    • Horstmann
    • 17. Juli 2023 um 01:03
    Zitat von Mira_Belle
    Zitat von Horstmann

    Probier spasseshalber mal das:

    JavaScript
    // BookmarkCount.uc.js
    
    /* ******************************************************************************************************************* */
    /* Author BrokenHeart               => https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536 **** */
    /* Correction from BrokenHeart      => https://www.camp-firefox.de/forum/thema/136572/?postID=1229696#post1229696 **** */
    /* Extension from Sören Henschel    => https://www.camp-firefox.de/forum/thema/136572/?postID=1229555#post1229555 **** */
    /* Customized by Mira inspired by grisu2099     ********************************************************************** */
    /* Source                           => https://www.camp-firefox.de/forum/thema/136572/?postID=1229875#post1229883 **** */
    /* Customized by Mira inspired by Horstmann     ********************************************************************** */
    /* Source                           => https://www.camp-firefox.de/forum/thema/136572/?postID=1229993#post1229993 **** */
    /* ******************************************************************************************************************* */
    /* Finaly Source                    => https://www.camp-firefox.de/forum/thema/136572/?postID=1230128#post1230128 **** */
    /* ******************************************************************************************************************* */
    /* Custom Counter in the Bookmarks for folders and links ************************************************************* */
    /* ******************************************************************************************************************* */
    
    (function() {
    
        if (!window.gBrowser) return;
        
        setTimeout(function() {
            setFunction();
        },50);
    
        let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
        let icon1 = "Folder.png"
        let icon2 = "Link.png"
    
        function setFunction() {
    
            const css =`
                .countClass1::before {
                    content: "";
                    background-image: url(${profilePath}/${icon1}); 
                    background-repeat: no-repeat;
                    background-size: 16px;  /* icon size */
                    //background-position: center;
                    margin-right: -10px !important; /* Abstand bis zum "Wert" der Ordner */
                    margin-left: 15px !important;   /* Abstand bis zum Icon der Ordner */
                    height: 16px;
                    width: 16px;
                    fill: #c0c0c0;
                    fill-opacity: 1;
                }
                .countClass1::after {
                    content: attr(data-value1) !important;
                    font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                    font-size: 12px !important;
                    font-weight: 900 !important;
                    color: #FFB90F !important;
                    padding-top: 1px !important;
                }
                .countClass2::before {
                    content: "";
                    background-image: url(${profilePath}/${icon2});
                    background-repeat: no-repeat;
                    background-size: 16px;  /* icon size */
                    background-position: center;
                    margin-right: 6px !important;   /* Abstand bis zum "Wert" der Links */
                    margin-left: 10px !important;   /* Abstand bis zum Icon der Links */
                    height: 16px;
                    width: 16px;
                    fill: #c0c0c0;
                    fill-opacity: 1;
                }
                .countClass2::after {
                    content: attr(data-value2);
                    font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                    font-size: 12px !important;
                    font-weight: 900 !important; 
                    color: #FFD700 !important;
                    margin-right: -6px !important;  /* Abstand zum Pfeil rechts */
                }
                .countClass2 image {
                    order: 1;                       /* Pfeil hinter dem "Wert" der Links */
                }
    
    
                /* Ergaenzungen */ 
    
                .countClass1 label {
                    margin-inline: 0px !important;
                }
    
    
               .menu-right.countClass2 {
                    margin-inline: 0px !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 newbarMenu = document.getElementById('fp-statusbar-1');
            let bmbMenu = document.getElementById('bookmarks-menu-button');
            let bookMenu = document.getElementById('bookmarksMenu');
            let persToolBar = document.getElementById('PersonalToolbar');
    
            if(newbarMenu)
                newbarMenu.addEventListener('popupshowing', onPopupShowing );
            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;
                  item.style.color = '#c0c0c0';
                  
                  let label1 = item.childNodes[3];
      
                  label1.classList.add('countClass1');
                  let strCountOut1 = String(menuCount).padEnd(2) + '\xa0';     // padEnd2 => zwei Stellen, plus Abstand 
                  label1.setAttribute('data-value1', strCountOut1);
    
                  let label2 = item.childNodes[4];
      
                  label2.classList.add('countClass2');
                  let strCountOut2 = String(menuitemCount).padEnd(3, '\xa0');  // padEnd3 => drei Stellen, Abstand bei nur einer Ziffer    
                  label2.setAttribute('data-value2', strCountOut2);
    
                }, 100);
            }
        }    
    })();
    
    
    
    
    
    
    
    
    
    
    
    
    
    //Fügt in den Lesezeichen Ordner ganz oben die Anzahl von Links und Unterordner hinzu.
    (function() {
    
      if (!window.gBrowser)
        return;
    
      function setFunction() {
        PlacesViewBase.prototype._mayAddCommandsItems =
        function PVB__mayAddCommandsItems(aPopup) {
          let hasMultipleURIs = false;
          let menuitemCount = 0;
          let menuCount = 0;
          if (aPopup._placesNode.childCount > 0) {
            for (let item of aPopup.children) {
              if (item._placesNode) {
                if (item.localName == 'menuitem') {
                  menuitemCount++;
                } else if (item.localName == 'menu') {
                  menuCount++;
                }
              }
            }
            if (menuitemCount > 0 || menuCount > 0) {
              hasMultipleURIs = true;
            }
          }
          if (!hasMultipleURIs)  {
            aPopup.setAttribute("nofooterpopup", "true");
            if (aPopup._endOptOpenAllInTabs) {
              aPopup.removeChild(aPopup._endOptOpenAllInTabs);
              aPopup._endOptOpenAllInTabs = null;
              aPopup.removeChild(aPopup._endOptSeparator);
              aPopup._endOptSeparator = null;
            }
            return;
          }
    
          aPopup.removeAttribute("nofooterpopup");
          if (!aPopup._endOptOpenAllInTabs) {
            aPopup._endOptSeparator = document.createXULElement("menuseparator");
            aPopup._endOptSeparator.className = "bookmarks-actions-menuseparator";
            aPopup.insertBefore(aPopup._endOptSeparator, aPopup.firstChild);
            aPopup._endOptOpenAllInTabs = document.createXULElement("menuitem");
            aPopup._endOptOpenAllInTabs.className = "openintabs-menuitem";
            if (this.options?.extraClasses?.entry) {
              aPopup._endOptOpenAllInTabs.classList.add(
                this.options.extraClasses.entry
              );
            }
            aPopup._endOptOpenAllInTabs.setAttribute(
              "oncommand",
              "PlacesUIUtils.openMultipleLinksInTabs(this.parentNode._placesNode, event, " +
                "PlacesUIUtils.getViewForNode(this));"
            );
            aPopup._endOptOpenAllInTabs.setAttribute(
              "onclick",
              "checkForMiddleClick(this, event); event.stopPropagation();"
            );
            aPopup.insertBefore(aPopup._endOptOpenAllInTabs, aPopup.firstChild);
          }
    
          let label = menuitemCount + " Link";
            if (menuitemCount != 1) {
              label += "s";
            }
            label += " / " + menuCount + " Ordner."
            if (menuitemCount == 1) {
              label += " -> Link in Tab öffnen."
            } else if (menuitemCount > 1) {
              label += " -> Links in Tabs öffnen."
            }
    
          aPopup._endOptOpenAllInTabs.setAttribute("label", label);
        }
      }
    
      setTimeout(function() {
          setFunction();
      },50);
      
    })();
    Alles anzeigen

    Was hast Du denn geändert?

    omar1979 hat sein ganzes Lesezeichenmenü verbogen.Glaube nicht, dass der Fehler am Skript liegt, eher an einem der Maßnahmen, die er fürs Verbiegen verwendet.

    Das was nach Ergaenzungen kommt, nur um 2 mögliche Fehlerquellen auszuschliessen.

    Auch wenn dann vielleicht der Rest nicht mehr passt.

    Aber wie oben schon angemerkt, ich denke du hast recht mit deiner Diagnose. ;)

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

    • Horstmann
    • 17. Juli 2023 um 00:22
    Zitat von omar1979

    Hallo allen

    Ich habe für mich das Script im Beitrag-Nr: 230 von Mira_Belle angepasst.

    Das einzige Problem ist, dass es hier in dem ersten Bild der Abstand zwischen den Ordner-Icon und den Anzahl(Wert) grösser ist als im zweiten Bild. Kann mir dabei jemand helfen? Besten Dank.

    Bild 1: Lesezeichen im Lesezeichen-Menü: Bild 2: Lesezeichen auf einer Zusatz-Leiste:

           

    Hier noch das Script:

    Alles anzeigen

    Probier spasseshalber mal das:

    JavaScript
    // BookmarkCount.uc.js
    
    /* ******************************************************************************************************************* */
    /* Author BrokenHeart               => https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536 **** */
    /* Correction from BrokenHeart      => https://www.camp-firefox.de/forum/thema/136572/?postID=1229696#post1229696 **** */
    /* Extension from Sören Henschel    => https://www.camp-firefox.de/forum/thema/136572/?postID=1229555#post1229555 **** */
    /* Customized by Mira inspired by grisu2099     ********************************************************************** */
    /* Source                           => https://www.camp-firefox.de/forum/thema/136572/?postID=1229875#post1229883 **** */
    /* Customized by Mira inspired by Horstmann     ********************************************************************** */
    /* Source                           => https://www.camp-firefox.de/forum/thema/136572/?postID=1229993#post1229993 **** */
    /* ******************************************************************************************************************* */
    /* Finaly Source                    => https://www.camp-firefox.de/forum/thema/136572/?postID=1230128#post1230128 **** */
    /* ******************************************************************************************************************* */
    /* Custom Counter in the Bookmarks for folders and links ************************************************************* */
    /* ******************************************************************************************************************* */
    
    (function() {
    
        if (!window.gBrowser) return;
        
        setTimeout(function() {
            setFunction();
        },50);
    
        let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
        let icon1 = "Folder.png"
        let icon2 = "Link.png"
    
        function setFunction() {
    
            const css =`
                .countClass1::before {
                    content: "";
                    background-image: url(${profilePath}/${icon1}); 
                    background-repeat: no-repeat;
                    background-size: 16px;  /* icon size */
                    //background-position: center;
                    margin-right: -10px !important; /* Abstand bis zum "Wert" der Ordner */
                    margin-left: 15px !important;   /* Abstand bis zum Icon der Ordner */
                    height: 16px;
                    width: 16px;
                    fill: #c0c0c0;
                    fill-opacity: 1;
                }
                .countClass1::after {
                    content: attr(data-value1) !important;
                    font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                    font-size: 12px !important;
                    font-weight: 900 !important;
                    color: #FFB90F !important;
                    padding-top: 1px !important;
                }
                .countClass2::before {
                    content: "";
                    background-image: url(${profilePath}/${icon2});
                    background-repeat: no-repeat;
                    background-size: 16px;  /* icon size */
                    background-position: center;
                    margin-right: 6px !important;   /* Abstand bis zum "Wert" der Links */
                    margin-left: 10px !important;   /* Abstand bis zum Icon der Links */
                    height: 16px;
                    width: 16px;
                    fill: #c0c0c0;
                    fill-opacity: 1;
                }
                .countClass2::after {
                    content: attr(data-value2);
                    font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                    font-size: 12px !important;
                    font-weight: 900 !important; 
                    color: #FFD700 !important;
                    margin-right: -6px !important;  /* Abstand zum Pfeil rechts */
                }
                .countClass2 image {
                    order: 1;                       /* Pfeil hinter dem "Wert" der Links */
                }
    
    
                /* Ergaenzungen */ 
    
                .countClass1 label {
                    margin-inline: 0px !important;
                }
    
    
               .menu-right.countClass2 {
                    margin-inline: 0px !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 newbarMenu = document.getElementById('fp-statusbar-1');
            let bmbMenu = document.getElementById('bookmarks-menu-button');
            let bookMenu = document.getElementById('bookmarksMenu');
            let persToolBar = document.getElementById('PersonalToolbar');
    
            if(newbarMenu)
                newbarMenu.addEventListener('popupshowing', onPopupShowing );
            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;
                  item.style.color = '#c0c0c0';
                  
                  let label1 = item.childNodes[3];
      
                  label1.classList.add('countClass1');
                  let strCountOut1 = String(menuCount).padEnd(2) + '\xa0';     // padEnd2 => zwei Stellen, plus Abstand 
                  label1.setAttribute('data-value1', strCountOut1);
    
                  let label2 = item.childNodes[4];
      
                  label2.classList.add('countClass2');
                  let strCountOut2 = String(menuitemCount).padEnd(3, '\xa0');  // padEnd3 => drei Stellen, Abstand bei nur einer Ziffer    
                  label2.setAttribute('data-value2', strCountOut2);
    
                }, 100);
            }
        }    
    })();
    
    
    
    
    
    
    
    
    
    
    
    
    
    //Fügt in den Lesezeichen Ordner ganz oben die Anzahl von Links und Unterordner hinzu.
    (function() {
    
      if (!window.gBrowser)
        return;
    
      function setFunction() {
        PlacesViewBase.prototype._mayAddCommandsItems =
        function PVB__mayAddCommandsItems(aPopup) {
          let hasMultipleURIs = false;
          let menuitemCount = 0;
          let menuCount = 0;
          if (aPopup._placesNode.childCount > 0) {
            for (let item of aPopup.children) {
              if (item._placesNode) {
                if (item.localName == 'menuitem') {
                  menuitemCount++;
                } else if (item.localName == 'menu') {
                  menuCount++;
                }
              }
            }
            if (menuitemCount > 0 || menuCount > 0) {
              hasMultipleURIs = true;
            }
          }
          if (!hasMultipleURIs)  {
            aPopup.setAttribute("nofooterpopup", "true");
            if (aPopup._endOptOpenAllInTabs) {
              aPopup.removeChild(aPopup._endOptOpenAllInTabs);
              aPopup._endOptOpenAllInTabs = null;
              aPopup.removeChild(aPopup._endOptSeparator);
              aPopup._endOptSeparator = null;
            }
            return;
          }
    
          aPopup.removeAttribute("nofooterpopup");
          if (!aPopup._endOptOpenAllInTabs) {
            aPopup._endOptSeparator = document.createXULElement("menuseparator");
            aPopup._endOptSeparator.className = "bookmarks-actions-menuseparator";
            aPopup.insertBefore(aPopup._endOptSeparator, aPopup.firstChild);
            aPopup._endOptOpenAllInTabs = document.createXULElement("menuitem");
            aPopup._endOptOpenAllInTabs.className = "openintabs-menuitem";
            if (this.options?.extraClasses?.entry) {
              aPopup._endOptOpenAllInTabs.classList.add(
                this.options.extraClasses.entry
              );
            }
            aPopup._endOptOpenAllInTabs.setAttribute(
              "oncommand",
              "PlacesUIUtils.openMultipleLinksInTabs(this.parentNode._placesNode, event, " +
                "PlacesUIUtils.getViewForNode(this));"
            );
            aPopup._endOptOpenAllInTabs.setAttribute(
              "onclick",
              "checkForMiddleClick(this, event); event.stopPropagation();"
            );
            aPopup.insertBefore(aPopup._endOptOpenAllInTabs, aPopup.firstChild);
          }
    
          let label = menuitemCount + " Link";
            if (menuitemCount != 1) {
              label += "s";
            }
            label += " / " + menuCount + " Ordner."
            if (menuitemCount == 1) {
              label += " -> Link in Tab öffnen."
            } else if (menuitemCount > 1) {
              label += " -> Links in Tabs öffnen."
            }
    
          aPopup._endOptOpenAllInTabs.setAttribute("label", label);
        }
      }
    
      setTimeout(function() {
          setFunction();
      },50);
      
    })();
    Alles anzeigen
  • Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

    • Horstmann
    • 16. Juli 2023 um 22:52
    Zitat von omar1979
    Zitat von Horstmann

    Wenn du den zweiten Teil weglässt, hast du dann auch das Problem?

    Hab jetzt als Test den 2.ten Teil gelöscht und das Problem besteht immernoch.

    Kann nur vermuten, dass der Code von deiner Zusatzleiste querschiesst, oder sonstwas von deinem Code für Popups; ich hab's nur mal kurz in meinem Zusatzleistenprofil probiert, kein Problem.

    Das wäre aber vermutlich schon ein eigenes Thema.

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

    • Horstmann
    • 16. Juli 2023 um 21:31
    Zitat von omar1979

    Achja.. das 2.te Script in diesem Script nach dem ca 10 Zeilen Leerzeichen ist für den Teil,

    wo das mit dem "Anzahl Links / Anzahl Ordner / Links im Tab öffnen".

    Wenn du den zweiten Teil weglässt, hast du dann auch das Problem?

    Verschiedene Scripts zu mischen ist nicht unbedingt eine gute Idee, wenn sie ähnliche Bereiche ansprechen.

    Vielleicht eher was für ein eigenes Thema?

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

    • Horstmann
    • 16. Juli 2023 um 21:13

    Die eine Frage die wir uns natürlich alle gestellt haben: was macht eigentlich das label im ersten Teil des Zählers?

    Antwort: nichts! X/

    So geht das aber nicht, also wird die faule Socke jetzt benutzt! :!:

    Wer immer noch die Geduld hat an dem Script weiter rumzuschrauben, hier ein Vorschlag (Test); der relevante Eintrag ist label test.

    Sollte eigentlich wie der Rest frei verschiebbar und belegbar sein, ohne zu viel Ärger zu machen.

    Zumindest in diesem Script, was meine aktuelle Testversion der Variante mit den extra Fonts für den Zähler ist (stört sich sonst eigentlich keiner daran dass die Null mit vielen Mono-Fonts durchgestrichen ist? ;) )

    Braucht man vielleicht nicht für ein erfülltes Leben, aber könnte nett sein noch was zum Spielen zu haben. ;)

    JavaScript
    // JavaScript Document
    // BookmarkCount.uc.js - modified zu oft
    // Author BrokenHeart
    // Modified by Mira / Horstmann
    // 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
    
    
    // TEST
    
    
    (function() {
    
        if (!window.gBrowser) return;
        
        setTimeout(function() {
            setFunction();
        },50);
    
    
        //Custom icons in profile/chrome/icons folder, code shared by Mira
    
        let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
        let icon1 = "folder3neuFat2b.png"   // flower.png
        let icon2 = "faviconfull.svg"
    
        function setFunction() {
    
            const css =`
    
    
                /**  Basics  **/
    
                /* Font Size / font weight counter , disable to use default  / fonts list */
                :root {
                    --counter_fontsize: 11px;   
                    /*--counter_fontweight: 800;*/     
                    --counter_fonts: "Droid Sans Mono", "SF Mono", "Andale Mono", Consolas, "Lucida Console", "Courier New", monospace;   
                    /*--counter_fonts: 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 --> label test */ 
                /*.countClass1 label {
                    margin-inline: 0px !important;
                }*/
    
                /* Folder counter box distance left / right */
                hbox.menu-accel-container.countClass1 {
                    margin-left: 16px !important;   /* minimum distance to left for narrow popups*/ 
                    margin-right: 4px !important;             /* distance to Items / links counter box */ 
                }
    
    
    
    
                                                            /* label test */
    
    
                .countClass1 label {
                    height: 12px !important;
                    width: 4px !important;
                    background-color: green !important;
                    order: 1;    
                    margin-inline: 5px 0px !important;    
                }
    
    
    
    
                /****  folder counter box  ****/
    
                /* Icon */
                .countClass1::before {
                    content: "";
                    /*background-image: url(${profilePath}/${icon1});*/         /*  Custom icon  */
                    background-image: url("chrome://global/skin/icons/folder.svg");
                    background-repeat: no-repeat;
                    background-size: 14px;                                                           /* icon size */
                    background-position: center;
                    margin-right: 4px !important;                           /* distance icon -> counter */
                    height: 16px;
                    width: 16px;
                    /*fill: #c0c0c0;*/                                /* .svg icon colour / opacity if usable */
                    fill-opacity: 1;
                }
    
                /* Counter */
                .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 */
                .countClass2::before {
                    content: "";
                    /*background-image: url(${profilePath}/${icon2});*/      /*  Custom icon  */
                    background-image: url("chrome://browser/skin/bookmark-hollow.svg");
                    background-repeat: no-repeat;
                    background-size: 14px;                                                         /* icon size */
                    background-position: center;
                    margin-right: 4px !important;                        /* distance icon -> counter */
                    height: 16px;
                    width: 16px;
                    /*fill: #c0c0c0;*/                             /* .svg icon colour / opacity if usable */
                    fill-opacity: 1;
                }
    
                /* Counter */
                .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 */
                    margin-right: 4px !important;                               /* distance to arrow */
                }
    
                /* Arrow right */
                /* Move arrow to the right */
                .countClass2 image {
                    order: 1;        
                    /*margin-right: 0px !important;*/  /*  distance arrow  -->  box border  */
                }
    
    
               /** Extra stuff  **/
    
               /*  Some fonts not centered Fix, optional, experimental  */
               /* .countClass1::after, .countClass2::after {
                    height: var(--counter_fontsize) !important;                  
                }*/
    
    
                /*  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;
                }
    
            `;
    
            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
                  let label1 = item.childNodes[3];
                  label1.classList.add('countClass1');
                  //let strCountOut1 = String(menuCount).padStart(2,  '\xa0');  // Numbers right // padEnd for left 
                  let strCountOut1 = String("[" + menuCount + "]").padStart(4,  '\xa0');  // Klammern // Brackets
                  label1.setAttribute('data-value1', strCountOut1);
    
                  // Links counter, 3 digits
                  let label2 = item.childNodes[4];
                  label2.classList.add('countClass2');
                  //let strCountOut2 = String(menuitemCount).padStart(3, '\xa0');  // Numbers right // padEnd for left 
                  let strCountOut2 = String("[" + menuitemCount + "]").padStart(5,  '\xa0');  // Klammern // Brackets
                  label2.setAttribute('data-value2', strCountOut2);
    
                }, 100);
            }
        }    
    })();
    Alles anzeigen

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

    • Horstmann
    • 16. Juli 2023 um 18:52
    Zitat von Dharkness

    Aber bitte doch

    Dankeschön! :)

    Zitat von Mira_Belle

    :D Viele Wege führen nach Rom :!:

    Ebenfalls danke! :)

    Deswegen meine Frage; hab beides schon probiert, aber es gibt halt oft Alternativen.

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

    • Horstmann
    • 16. Juli 2023 um 17:27
    Zitat von Dharkness

    So, das ↓ habe ich jetzt daraus gebaut, also noch einmal Dankeschön. :)

    Code dazu, zack-zack! ;)

    Wollte nur mal sehen, wie genau du den Trennstrich nach dem ersten Zähler eingebaut hast; kann's mir zwar ungefähr vorstellen, wäre aber prima wenn du das Script nachreichen könntest. :)

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

    • Horstmann
    • 16. Juli 2023 um 08:33
    Zitat von Mira_Belle

    Habe mich damit ein wenig beschäftigt und habe festgestellt, dass es prinzipiell an den Fonts liegt.

    Leider habe ich keine befriedigte Lösung gefunden, die allgemein greift,

    so bleibt als einfachste Lösung nur

    padding-bottom für zu tief gestellte Ziffern

    oder

    padding-top für zu hoch gestellte Ziffern zu nutzen,

    um diese Auszurichten.

    Alles anzeigen

    Oder schauen was noch an Monospace Fonts auf dem System rumliegen, und die mal probieren.

    In Windows gibt's doch sicher auch eine App die die installierten Schriften auflistet?

    Ich wollte auch unbedingt die durchgestrichene 0 (Null) loswerden, die der andere Font benutzt. ;)

    Und dann ginge evtl. auch sowas.



    Zitat von grisu2099

    Ja, aber die Version mit den Zahlen vorne habe ich vorrätig... ;) :D

    Verstehe. ;)

    Danke übrigens, sieht für mich besser aus rechtsbündig.

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

    • Horstmann
    • 15. Juli 2023 um 22:49
    Zitat von grisu2099
    Zitat von Dharkness

    Jetzt noch den Text rechtsbündig ausrichten und das ganze wäre perfekt, siehst Du da eine Möglichkeit?

    Wenn du damit leben kannst, daß die Zahlen vor den Icons sind, kannst du ja mal diese Version testen:

    Aber wieso, die Zahlen rechtsbündig geht doch genauso gut mit den Zahlen nach den Icons? :/

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

    • Horstmann
    • 15. Juli 2023 um 16:02
    Zitat von Mira_Belle

    Sooo,

    nach einigen Anregungen und weiterem Code eine weitere neue Version des Skriptes.


    Ich habe nun auch mit so einigen Fonts unter Windows 10 herumexperimentiert,

    habe dabei auch festgestellt, dass so mancher Font quasi hochgestellt wird.

    Darum, bzw., welcher Wert es genau ist um den Font dann mittig zu bekommen,

    kümmere ich mich noch.

    Eventuell weiß es ja auch schon jemand, ich brauch’ aber jetzt erst einmal 'ne Pause.

    Alles anzeigen


    Dankeschön, und erhol dich gut. :) ;)

    Dann sehen wir doch ähnliche Probleme, seltsam mit diesen Fonts... :/

    Nur weil ich auch in der Gegend unterwegs bin, hier ein weiterer Versuch meinerseits; die Fonts Einstellung oben muss man sich evtl. anpassen oder ergänzen, je nach OS.

    Die Icons sind hier wieder von Firefox, und wie die Farben/Outlines/Hintergründe NUR zum einfacheren Testen gedacht, damit man (hoffentlich) das Script ansonsten nicht bearbeiten muss vor dem testen. ;)

    Die Abstände passen für meinen Geschmack, sind aber voll anpassbar.

    Negative Margins versuche ich immer zu vermeiden, weil man dann oft zum einen ein anderweitiges Problem nur kaschiert, und zum anderen anfängt Elemente übereinander zu schieben.

    Was nach meiner - sehr beschränkten Erfahrung - nur klappt wenn man entweder Glück hat, oder den Rest sauber anpasst.

    Hier ist es aber denk ich unnötig.


    TEST: ;)

    JavaScript
    // JavaScript Document
    // BookmarkCount.uc.js - modified #xx TEST
    // Author BrokenHeart
    // Modified by Mira / Horstmann
    // 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, code shared by Mira
    
        let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
        let icon1 = "folder3neuFat2b.png"   // flower.png
        let icon2 = "faviconfull.svg"
    
        function setFunction() {
    
            const css =`
    
    
                /**  Basics  **/
    
                /* Font Size / font weight counter , disable to use default  / fonts list */
                :root {
                    --counter_fontsize: 11px;   
                    /*--counter_fontweight: 800;*/     
                    --counter_fonts: "Droid Sans Mono", "SF Mono", "Andale Mono", monospace;   
                    /*--counter_fonts: 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 */ 
                .countClass1 label {
                    margin-inline: 0px !important;
                }
    
                /* Folder counter box distance left / right */
                hbox.menu-accel-container.countClass1 {
                    margin-left: 16px !important;                  /* minimum distance to left */ 
                    margin-right: 4px !important;       /* distance to Items / links counter box */ 
                }
    
                /****  folder counter box  ****/
    
                /* Icon */
                .countClass1::before {
                    content: "";
                    /*background-image: url(${profilePath}/${icon1});*/         /*  Custom icon  */
                    background-image: url("chrome://global/skin/icons/folder.svg");
                    background-repeat: no-repeat;
                    background-size: 14px;                                                            /* icon size */
                    background-position: center;
                    margin-right: 4px !important;                            /* distance icon -> counter */
                    height: 16px;
                    width: 16px;
                    /*fill: #c0c0c0;*/         /* .svg icon colour / opacity if usable */
                    fill-opacity: 1;
                }
    
                /* Counter */
                .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 */
                .countClass2::before {
                    content: "";
                    /*background-image: url(${profilePath}/${icon2});*/      /*  Custom icon  */
                    background-image: url("chrome://browser/skin/bookmark-hollow.svg");
                    background-repeat: no-repeat;
                    background-size: 14px;                                                         /* icon size */
                    background-position: center;
                    margin-right: 4px !important;                         /* distance icon -> counter */
                    height: 16px;
                    width: 16px;
                    /*fill: #c0c0c0;*/         /* .svg icon colour / opacity if usable */
                    fill-opacity: 1;
                }
    
                /* Counter */
                .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 */
                    margin-right: 4px !important;                               /* distance to arrow */
                }
    
                /* Arrow right */
                /* Move arrow to the right */
                .countClass2 image {
                    order: 1;        
                }
    
    
               /** Extra stuff  **/
    
               /*  Some fonts not centered Fix, optional, experimental  */
               /* .countClass1::after, .countClass2::after {
                    height: var(--counter_fontsize) !important;                  
                }*/
    
    
                /*  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: lightblue;
                }
    
            `;
    
            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
                  let label1 = item.childNodes[3];
                  label1.classList.add('countClass1');
                  let strCountOut1 = String(menuCount).padEnd(2,  '\xa0');
                  label1.setAttribute('data-value1', strCountOut1);
    
                  // Links counter, 3 digits
                  let label2 = item.childNodes[4];
                  label2.classList.add('countClass2');
                  let strCountOut2 = String(menuitemCount).padEnd(3, '\xa0');
                  label2.setAttribute('data-value2', strCountOut2);
    
                }, 100);
            }
        }    
    })();
    Alles anzeigen

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

    • Horstmann
    • 15. Juli 2023 um 11:32
    Zitat von Mira_Belle

    Sören Hentzschel

    Es ging um diesen Code aus Beitrag #231

    und das Problem, dass die Ausrichtung genau mit diesem Code

    in Windows wohl passt, aber auf dem Mac anders dargestellt wird.

    Für "uns" stellt sich nun die Frage, woran das liegen könnte.

    Ist es der Code, oder ist es BS abhängig?

    Wie kann man das verhindern?

    Alles anzeigen

    Also, zusammenfassend, hier ist das Problem auf meiner Seite - und eine mögliche Lösung:

    Im Script haben wir für den Font: font-family: Consolas, "Lucida Console", "Courier New", monospace !important;.

    Auf meinem Mac (High Sierra) sind nicht alle dieser Font vorhanden, laut Browserwerkzeugen wählt Fx / mein OS daraus Courier New aus.

    Damit ist die Schrift in ihrem Textfeld oben links angeordnet, und eben nicht in der Höhe zentriert (links ist so gewollt).

    Siehe erstes Bild im Anhang.

    Also hab ich mal in meinen Schriften gekramt und nach Mono Dingens gesucht, und habe diesen Font probiert --> font-family: "Andale Mono" !important;.

    Und siehe da: der Text ist zentriert! :)

    Siehe zweites Bild.

    Die Frage bleibt, warum (nur bei mir am Mac?) der eine Font passt, und der andere nicht. :/

    Wie man sieht, kenne ich mich mit Fonts übrigens gar nicht aus.

    Erstmal ist das aber eine Lösung auf meiner Seite, auch wenn ich mir noch einen hübscheren Font suchen werde - der dann hoffentlich passt... ;)

    Hier das dazugehörige, unaufgeräumte TEST Script:

    JavaScript
    // BookmarkCount.uc.js  TEST
    
    
    (function() {
    
        if (!window.gBrowser) return;
        
        setTimeout(function() {
            setFunction();
        },50);
    
        let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
        let icon1 = "folder3neuFat2b.png"   // flower.png
        let icon2 = "faviconfull.svg"
    
        function setFunction() {
    
            const css =`
                .countClass1::before {
                    content: "";
                    /*background-image: url(${profilePath}/${icon1});*/          /*  TEST  */
                    background-image: url("chrome://global/skin/icons/folder.svg");
                    background-repeat: no-repeat;
                    background-size: 16px;  /* icon size */
                    background-position: center;
                    margin-right: 4px !important;       /* Abstand bis zum "Wert" der Ordner */ 
                    margin-left: 16px !important;       /* Abstand gesamt links bis zum Titel FIX TEST */ 
                    height: 16px;
                    width: 16px;
                    /*fill: #c0c0c0;*/         /*  TEST  */
                    fill-opacity: 1;
                }
    
        /* Default FX left margin ist 16px !! -->  CHANGE  */ 
                .countClass1 label {
                    margin-inline: 0px !important;
                }
    
                .countClass1::after {
                    content: attr(data-value1) !important;
                    font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                    /*font-family:  "Andale Mono" !important;*/
                    font-size: 12px !important;
                    font-weight: 600 !important;
                    /*color: #FFD700 !important;    */          /*  TEST  */
                    color: red !important;
                    background-color: lightblue;          /*  TEST  */
                }
    
    
                .countClass2::before {
                    content: "";
                    /*background-image: url(${profilePath}/${icon2});*/        /*  TEST  */
                    background-image: url("chrome://browser/skin/bookmark-hollow.svg");
                    background-repeat: no-repeat;
                    background-size: 16px;  /* icon size */
                    background-position: center;
                    margin-right: 4px !important;   /* Abstand bis zum "Wert" der Links */
                    margin-left: 4px !important;             /* Abstand bis zum Icon der Links FIX TEST */
                    height: 16px;
                    width: 16px;
                    /*fill: #c0c0c0;*/         /*  TEST  */
                    fill-opacity: 1;
                }
    
                .countClass2::after {
                    content: attr(data-value2);
                    font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                    /*font-family:  "Andale Mono" !important;*/
                    font-size: 12px !important;
                    font-weight: 600 !important; 
                    /*color: #FFD700 !important;    */          /*  TEST  */
                    color: red !important;
                    margin-right: 4px !important;  /* Abstand zum Pfeil rechts FIX TEST */
                    background-color: lightblue;          /*  TEST  */
                }
    
                .countClass2 image {
                    order: 1;                       /* Pfeil hinter dem "Wert" der Links */
                }
    
                                                 /* Ordner container Inhalt zentriert -->  CHANGE  */ 
    
                hbox.menu-accel-container.countClass1 {
                    align-items: center !important;
                }
    
                                                                  /*  Outline only for testing  TEST2  */ 
    
                menu.menu-iconic.bookmark-item {
                     outline: 1px solid orange !important;
                     outline-offset: -8px !important;
                }
    
                                                                                  /*  Font center FIX TEST OFF */
    
               /* .countClass1::after, .countClass2::after {
                    height: 12px;                       /* height gleich = font-size */
                }*/
    
            `;
    
            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;
                  //item.style.color = '#c0c0c0';
                  
                  let label1 = item.childNodes[3];
      
                  label1.classList.add('countClass1');
    
                  let strCountOut1 = String(menuCount).padEnd(2,  '\xa0');     //   FIX TEST
    
                  //let strCountOut1 = String(menuCount).padEnd(2) + '\xa0';     // padEnd2 => zwei Stellen, plus Abstand 
                  label1.setAttribute('data-value1', strCountOut1);
    
    
    
                  let label2 = item.childNodes[4];
      
                  label2.classList.add('countClass2');
                  let strCountOut2 = String(menuitemCount).padEnd(3, '\xa0');  // padEnd3 => drei Stellen, Abstand bei nur einer Ziffer    
                  label2.setAttribute('data-value2', strCountOut2);
    
                }, 100);
            }
        }    
    })();
    Alles anzeigen


    Zitat von Sören Hentzschel

    Wenn ich zu irgendetwas was sagen soll, dann bitte ich darum, mir in einem Beitrag den Code mitzuteilen, den ich testen soll und 1:1 kopieren kann, ohne mir noch aus anderen Beiträgen Informationen suchen zu müssen. Mir ist es in diesem Thread nämlich mittlerweile deutlich zu unübersichtlich geworden mit den vielen Nutzern und ihren jeweils eigenen Varianten.

    Geht mir genauso. ;)

    S. oben für eine Übersicht.


    Zitat von FuchsFan
    Zitat von Horstmann

    ich vermute auch dass bei dreistelligen Linkzahlen (der rechte Zähler), die Sache nicht passt.

    Doch, passt! :thumbup: ;)

    Die Breite ist mit width: 25px !important; auf drei Stellen eingestellt.


    Bitteschön

    Ah, verstehe, geht so auch, danke für den Code.

    Ich mach's etwas anders, v.a. weil der blaue Hintergrund bei mir nur zum Testen verwendet wird, und das height/width für die Texte ein etwas grober Test-Hack war.

    Aber wenns passt... ;)

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

    • Horstmann
    • 15. Juli 2023 um 09:40
    Zitat von FuchsFan
    Zitat von Horstmann

    Gut beobachtet, das ist denk ich durch die unterschiedliche Art des Paddings für den ersten und zweiten Zahlenblock.

    Das habe ich mit Eurem Code so gelöst, eventuell hilft es weiter (oben letzter Screenshot von mir).

    Da wäre der gesamte Code sinnvoll zu sehen, ich vermute auch dass bei dreistelligen Linkzahlen (der rechte Zähler), die Sache nicht passt.

Unterstütze uns!

Jährlich (2025)

92,9 %

92,9% (604,17 von 650 EUR)

Jetzt spenden
  1. Kontakt
  2. Datenschutz
  3. Impressum
Community-Software: WoltLab Suite™
Mastodon