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

FuchsFan

Zitat von BrokenHeart

Hier noch meine Version

Und das sagst Du jetzt nicht, wie Du das da hin gezaubert hast.

grisu2099

Zitat von FuchsFan

Und das sagst Du jetzt nicht, wie Du das da hin gezaubert hast.

Ich wollte auch gerade schreiben, daß er vergessen hat den Code zu posten...

Endor

BrokenHeart .

Danke, dann ist alles klar.

Frage, wie hast Du bei Dir das Ordner Symbol und das Sternsymbol anstelle der
Klammern usw. eingebaut. Sieht toll aus.
Mfg.
Endor

BrokenHeart

Zitat von FuchsFan

Und das sagst Du jetzt nicht, wie Du das da hin gezaubert hast.

Doch, natürlich, aber da ist nix mit Zauberei oder Voodoo. Das ist so trivial, dass ihr euch mit der flachen Hand gegen die Stirn schlagen werdet!

Hier die "Wunder"-Zeile :

let strCountOut = "📁" + String(menuCount).padEnd(2, '\xa0') + "⭐" + String(menuitemCount).padEnd(3, '\xa0');

Die Emojis/Icons können z.B. direkt in den Editor (NP++) über [Windows-Taste]+[.] in den Code kopiert werden.

Damit alle Abstände gleich bleiben, muss im CSS Teil natürlich ein 'monospace'-Font verwendet werden z.B. 'Consolas' etc.:

CSS

.countClass::after {
                content: attr(data-value); 
                font-family:  Consolas, "Lucida Console", "Courier New", monospace;
                font-size: 11px;
                font-weight: 900;
                color: rgb(100,200,255);
            }

Das ist alles...

grisu2099

Zitat von BrokenHeart

Die Emojis/Icons können z.B. direkt in den Editor (NP++) über [Windows-Taste]+[.] in den Code kopiert werden.

Muß man nur wissen...

Funktioniert auch andersrum:

Finde ich sogar noch besser (logischer)

Geht dann mit dieser "Zauberzeile":

let strCountOut = + String(menuCount) + "📁" + " / " + String(menuitemCount).padStart(2, '\xa0') + "⭐" ;

FuchsFan

Zitat von BrokenHeart

Das ist so trivial, dass ihr euch mit der flachen Hand gegen die Stirn schlagen werdet!

Erst einmal ein herzliches Dankeschön für den kleinen Aufhübscher, gefällt mir.

Nun habe ich schon einige Male mit der Faust an die Stirn geschlagen, aber da öffnet sich keine geheime Kammer.

Da wäre ich nie drauf gekommen, weil ich das überhaupt nicht kenne.

Da muss ich mal üben, ob ich das auch schaffe, sehr gefährlich.

grisu2099

Zitat von FuchsFan

Da wäre ich nie drauf gekommen, weil ich das überhaupt nicht kenne.

Da bist du nicht allein!!

Gibt es da vielleicht auch noch einen Trick, wie man (z.B.) eine auf dem Rechner vorhandene Grafik an dieser Stelle einbaut?

FuchsFan

Zitat von grisu2099

Gibt es da vielleicht auch noch einen Trick, wie man (z.B.) eine auf dem Rechner vorhandene Grafik an dieser Stelle einbaut?

Da habe ich mich auch schon dran versucht, aber....??????

Mira_Belle

Na toll, jetzt muss ich auch Symbole haben

Nur ich bekomme es einfach nicht hin!

Habe es so versucht:

JavaScript

              let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
              let ico1 = "folder.svg"
              let ico2 = "bookmark.svg"

              let strCountOut = + profilePath + ico1 + String(menuCount).padEnd(2, '\xa0') + profilePath + ico2 + String(menuitemCount).padEnd(3, '\xa0');

Funktioniert natürlich nicht!

Muss irgendwas mit xxx..style.listStyleImage = profilePath + ico1 und xxx.menuitem.style.listStyleImage = profilePath + ico2 basteln.

Nur wie bekomme ich das dann mit der Zeile let strCountOut = .... unter?

Oder bin ich da etwa ganz auf dem Holzweg?

Sören Hentzschel

Man kann eine Grafik nicht in eine Zeichenkette einbetten. Ein Unicode-Zeichen ist in dem Sinne keine Grafik, sondern ein „Buchstabe“.

grisu2099

Danke für die Erklärung.

Damit ist diese Idee dann erledigt...

harff182

Aber Mann/Frau/Divers könnte sich ja aus den Unicodes was passendes raussuchen:

Index of /Public/7.0.0/charts

Mira_Belle

Geht nicht, gibt's nicht

Ok, wird wohl so sein, dass es nicht per Zeichenkette einbetten geht,

aber es gibt da ja noch das CSS.

Habe es geschafft per

JavaScript

    const css = `

      .countClass::before {
        content: url(${profilePath}/${ico1});
        display: inline-block;
        vertical-align: middle;
        width: 16px; /* Breite des Icons anpassen */
        height: 16px; /* Höhe des Icons anpassen */
        margin-right: 1px; /* Abstand zwischen Symbol und Text anpassen */
      }
      .countClass::after {
        font-family: Consolas, "Lucida Console", "Courier New", monospace;
        color: red;
        font-size: 13px;
        font-weight: 900;
      }
    `;

Alles anzeigen

das Ordnersymbol rein zu wurschteln.

Was mir nicht gelingen will, ist das auseinander klabustern von + menuCount + "/" & + menuitemCount +

damit ich irgendwie dazwischen den Stern platzieren kann.

omar1979

Ich hab diese Zeile bei mir so:

let strCountOut = " (🔗= " + menuitemCount + " - 📁= " + menuCount + ")"

Und sieht so aus:

Mira_Belle

Schaut z.Z. so aus, ist aber nur eine Notlösung

Wie ich schon schrieb, möchte ich auch das Sternchen, welches ja hier noch ein Unicodezeichen U+2B50 ist,

auch durch eine Grafik ersetzen.

Hier erst einmal "mein", zugegeben chaotischer, Code.

JavaScript

// JavaScript Document
// BookmarkCount.uc.js
// Author BrokenHeart
// Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229536#post1229536
//
// Korrektur von BrokenHeart
// Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229696#post1229696
// 
// Erweiterung von Sören Henschel
// Source file https://www.camp-firefox.de/forum/thema/136572/?postID=1229555#post1229555


(function() {

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

  let profilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))            
  let ico1 = "folder_org.svg"
  let ico2 = "bookmark.svg"



  function setFunction() {

    const css =`

        .countClass::before {
          content: url(${profilePath}/${ico1});
          display: inline-block;
          vertical-align: middle;
          width: 16px; /* Breite des Icons anpassen */
          height: 16px; /* Höhe des Icons anpassen */
          margin-right: -20px; /* Abstand zwischen Symbol und Text anpassen */
        }    

        .countClass::after {
          content: attr(data-value); 
          font-family:  Consolas, "Lucida Console", "Courier New", monospace;
          color: red;
          font-size: 13px;
          font-weight: 600;
          padding-right: 15px;
        }
    `;

    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;        // Hinzugefügt
        itemPopup.collapsed = true;     // Hinzugefügt
        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;         // Hinzugefügt
        itemPopup.collapsed = false;      // Hinzugefügt
              
        let label = item.childNodes[3]; //label.menu-iconic-text
        item.style.color = 'silver';
        label.classList.add('countClass');

//              let strCountOut = "  (" + menuCount + "/" + menuitemCount + ")"
//              let strCountOut = "  (" + String(menuCount).padStart(2, '0') + "/" + String(menuitemCount).padStart(2, '0') + ")"             

//              let strCountOut1 = "  (" + String(menuCount).padStart(2, '0') + ")";
//              let strCountOut2 = "  (" + String(menuitemCount).padStart(2, '0') + ")";
//              let strCountOut = ` ${menuCount} "/" ${menuitemCount}`;
//              let strCountOut = "📁" + String(menuCount).padEnd(2, '\xa0') + "⭐" + String(menuitemCount).padEnd(3, '\xa0');

//        let strCountOut = "📙 " + String(menuCount).padEnd(2, '\xa0') + "⭐ " + String(menuitemCount).padEnd(3, '\xa0');
        let strCountOut = + String(menuCount).padEnd(2, '\xa0') + " ⭐" + String(menuitemCount).padEnd(3, '\xa0');
//              let strCountOut = + String(menuCount).padEnd(2, '\xa0') + String(menuitemCount).padEnd(3, '\xa0');
//              let strCountOut = " ("+ "Ordner: " + String(menuCount).padStart(2, '0') + " / Links: " + String(menuitemCount).padStart(2, '0') + ")"
//              let strCountOut = " ("+ String(menuCount).padStart(2, '0') + "/" + String(menuitemCount).padStart(2, '0') + ")"
//              let strCountOut = "  (" + String(menuCount).padStart(2, '0') + " Ordner / " + String(menuitemCount).padStart(2, '0') + " Links" + ")"
//              let strCountOut =  + menuCount + " Ordner / " + String(menuitemCount).padStart(2, '0') + " Links"
        label.setAttribute('data-value', strCountOut);
//                label.setAttribute('data-value', strCountOut1, strCountOut2);

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

Alles anzeigen

Horstmann

Zitat von Mira_Belle

Wie ich schon schrieb, möchte ich auch das Sternchen, welches ja hier noch ein Unicodezeichen U+2B50 ist,
auch durch eine Grafik ersetzen.

Mit .countClass::before etc. kann man via CSS einfach ein Bildchen einfügen und verschieben, das ist nicht das Problem.

Wie du schon schreibst, das Problem ist eine eigene Grafik zwischen die beiden Einträge für menucount und menuitemcount zu quetschen.

Ganz grob kann man mit CSS auch ein Doppelicon zB so drüberlegen (Iconpfad und -Name entsprechend anpassen), was dann aber Leerzeichen im Script benötigt, die auch für mehrstellige Zahlen passen müssen.

CSS

.countClass {
    outline: 1px solid lightblue !important;
    background-image: url("icons/icon1.png"),
                      url("icon2.png") !important;
    background-size: 16px 100% !important;
    background-repeat: no-repeat !important;
    background-position:  left, right 8px center !important;
}

Elegant und flexibel ist das aber nicht.

oldman53

Hallo @all,

die Anzahl Lesezeichen / Ordner anzeigen zu lassen erfordert schon Gehirnschmalz, keine Frage.

Aber was stellt man mit den Infos an? Nur zur Kenntnis nehmen oder anfangen auszumisten?

FuchsFan

Zitat von oldman53

Aber was stellt man mit den Infos an?

Bei dem Wetter würde ich sie in's Schwimmbad mitnehmen.

Wenn es Dir zu viel wird, lass es links (oder rechts) liegen.

oldman53

Zitat von FuchsFan

Bei dem Wetter würde ich sie in's Schwimmbad mitnehmen.

Wäre eine Möglichkeit, erklärt aber trotzdem nicht den verwertbaren Zweck der angezeigten Werte.

Zitat von FuchsFan

Wenn es Dir zu viel wird, lass es links (oder rechts) liegen.

Wäre ebenso eine Möglichkeit, ich bin aber interessiert / wissbegierig zum Aufwand vs Nutzen.

Mira_Belle

Zitat von oldman53

Wäre ebenso eine Möglichkeit, ich bin aber interessiert / wissbegierig zum Aufwand vs Nutzen.

Ohweh, Nutzen lass einfach mal außen vor, es ist viel mehr "Hobby" und da fragt auch kein Mensch nach nutzen.