Beiträge von Mira_Belle

Mira_Belle

Mh, bitte beachten!

JavaScript

let useStyle1 = true; // <- HIER Weiche setzen: true = Variante 1, false = Variante 2

durch

JavaScript

let useStyle = 1; // <- HIER Weiche setzen:  0 = Symbole hinter den Zählern, 1 = Symbole vor den Zählern

sowie

JavaScript

let cssBeforeBlock1 = `

und

JavaScript

let cssBeforeBlock2 = `

durch

JavaScript

let css_one = `

JavaScript

let css_two = `

und

CSS

      /* Dynamisch gewählter before-Block */
      ${useStyle1 ? cssBeforeBlock1 : cssBeforeBlock2}

durch

CSS

      /* Dynamisch gewählter before-Block */
      ${useStyle ? css_one : css_two}

Find' ich etwas besser.

Mira_Belle

Zitat von Horstmann

Wenn's jetzt noch eine Möglichkeit gäbe, die Reihenfolge von Icon und Zähler einfach umzukehren, ohne neues Script/CSS.

Etwas Woodoo

JavaScript

(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 = "folder-fat.svg";                     //  Custom  Folder Icon
  let icon2 = "bookmark-hollow.svg";                //  Custom  Link Icon
  //let icon3 = "arrow-right_II.svg";                 //  Custom  Arrow Icon
  let icon3 = "arrow-right.svg";

  // Custom settings
  let bm_font_size = 12; 
  let cs_font_weight = 700;
  //let cs_font_color = "#FFD700";
  //let cs_icon_color = "#C0C0C0";
  let bm_icon_size = 16;

  // NEU: Schriftfarbe getrennt definieren
  //let cs_font_color_1 = "#FFA500";                 // Farbe für Folder-Zähler (links)
  //let cs_font_color_2 = "#00FFFF";                 // Farbe für Link-Zähler (rechts)
  let cs_font_color_1 = "#FFD700";                 // Farbe für Folder-Zähler (links)
  let cs_font_color_2 = "#FFD700";                 // Farbe für Link-Zähler (rechts)

  // NEU: Symbolfarber getrennt definieren 
  //let cs_icon_color_1 = "#5fe575";                 // Farbe für "Ordner", 1.Symbol
  //let cs_icon_color_2 = "#fbf328";                 // Farbe für "Link", 2.Symbol
  //let cs_icon_color_3 = "#bbf700";                 // Farbe für den Pfeil
  let cs_icon_color_1 = "#C0C0C0";                 // Farbe für "Ordner", 1.Symbol
  let cs_icon_color_2 = "#C0C0C0";                 // Farbe für "Link", 2.Symbol
  let cs_icon_color_3 = "#C0C0C0";                 // Farbe für den Pfeil


  // Calculated settings
  let cs_font_size = `${bm_font_size}px`;
  let cs_icon_size = `${bm_icon_size}px`;
  let cs_width_one = `calc(${bm_icon_size}px + 1.4em)`;
  let cs_width_uno = `calc(${bm_icon_size}px)`;
  let cs_width_two = `calc(${bm_icon_size}px + 1.4em)`;
  let cs_width_due = `calc(${bm_icon_size}px)`;

  let useStyle1 = false; // <- HIER Weiche setzen: true = Variante 1, false = Variante 2

  // Symbole hinter den Zählern
  let cssBeforeBlock1 = `

    /* Counter #1 Folder */
    #bmContent::before {
      content: attr(data-value1);
      width: ${cs_width_one};
      align-items: center;
      display: flex;
      justify-content: end;
      margin-inline: 16px 4px;                        /* min. Abstand links für enge Popups, rechts zum 2ten Counter */
      background-image: url("${ProfilePath}/${icon1}")!important;
      background-position: center right calc(${cs_width_one} - ${cs_icon_size});
      background-repeat: no-repeat;
      background-size: ${cs_icon_size} ${cs_icon_size};     
      color: ${cs_font_color_1};                        /* Farbe der 1. Zahl */
      fill: ${cs_icon_color_1};                         /* Farbe des 1. Symbols */
    }

    /* Counter #2 Links */
    #bmContent::after {
      content: attr(data-value2);
      width: ${cs_width_two};
      align-items: center;
      display: flex;
      justify-content: end;
      margin-inline: -2px;
      background-image: url("${ProfilePath}/${icon2}") !important;
      background-position: center right calc(${cs_width_two} - ${cs_icon_size});
      background-repeat: no-repeat;
      background-size: ${cs_icon_size} ${cs_icon_size};            
      color: ${cs_font_color_2};                        /* Farbe der 2. Zahl */
      fill: ${cs_icon_color_2};                         /* Farbe des 2. Symbols */
    }
  `;

  // Symbole vor den Zählern
  let cssBeforeBlock2 = `

    /* Counter #1 Folder */
    #bmContent::before {
      content: attr(data-value1);
      width: ${cs_width_one};
      align-items: center;
      display: flex;
      justify-content: end;
      background-image: url("${ProfilePath}/${icon1}")!important;
      background-position: center right calc(${cs_width_uno} - ${cs_icon_size});
      background-repeat: no-repeat;
      background-size: ${cs_icon_size} ${cs_icon_size};     
      color: ${cs_font_color_1};                        /* Farbe der 1. Zahl */
      fill: ${cs_icon_color_1};                         /* Farbe des 1. Symbols */
      padding: 4px 20px 0px 10px;
      margin-inline: 0px -10px;
    }

  	#bmContent::after {
			content: attr(data-value2);
      width: ${cs_width_two};
      align-items: center;
      display: flex;
      justify-content: end;
      /*justify-content: flex-end; */
      background-image: url("${ProfilePath}/${icon2}")!important;
      background-position: center right calc(${cs_width_due} - ${cs_icon_size});
      background-repeat: no-repeat;
      background-size: ${cs_icon_size} ${cs_icon_size};            
      color: ${cs_font_color_2};                        /* Farbe der 2. Zahl */
      fill: ${cs_icon_color_2};                         /* Farbe des 2. Symbols */
			padding: 4px 22px 0 0;
		}
  `;

  function setFunction() {

    const css =`

      /* Counter rechtsbuendig */
      #bmContent {
        display: flex !important;
        margin-inline: auto 0 !important;
        font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
        font-size: ${cs_font_size} !important;
        font-weight: ${cs_font_weight} !important;
        height: ${cs_icon_size};
      }

      /* Dynamisch gewählter before-Block */
      ${useStyle1 ? cssBeforeBlock1 : cssBeforeBlock2}

      /* Pfeil */
      menupopup > menu::after {
        content: "";
        background-image: url("${ProfilePath}/${icon3}")!important;
        height: ${cs_icon_size};
        height: ${cs_icon_size};
        fill: ${cs_icon_color_3} !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;

          // Neues Element für Zaehler
          let bmCounta = item.childNodes[1];
            if (!bmCounta) return;                            // Falls undefiniert
          bmCounta.innerHTML = ""
          let bmContent = document.createElement("bmContent");
          bmContent.id = "bmContent";
          bmCounta.appendChild(bmContent);

          //let strCountOut1 = "" + menuCount + "";           //  Has no brackets
          //let strCountOut1 = "(" + menuCount + ")";         //  Has round brackets
          //let strCountOut1 = "[" + menuCount + "]";         //  Has square brackets
          let strCountOut1 = String(menuCount).padEnd(2, " ");
          bmContent.setAttribute('data-value1', strCountOut1);

          //let strCountOut2 = "" + menuitemCount + "";        //  Has no brackets
          //let strCountOut2 = "(" + menuitemCount + ")";      //  Has round brackets
          //let strCountOut2 = "[" + menuitemCount + "]";      //  Has square brackets
          let strCountOut2 = String(menuitemCount).padEnd(2, " ");
          bmContent.setAttribute('data-value2', strCountOut2);

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

Alles anzeigen

Mira_Belle

Zitat von grisu2099

Hast du nicht - geht auch ohne
Vergessen hast du dagegen das i in important - und ohne das geht es natürlich nicht...

Noch dümmer!

Nutze nun ein eigenes Symbol und diesen Code:

CSS

menupopup > menu::after {
  content: "";
  background-image: url("${ProfilePath}/${icon3}")!important;
  height: ${cs_icon_size};
  height: ${cs_icon_size};
  fill: ${cs_icon_color_3} !important;
}

Danke an alle.

Zitat von Sören Hentzschel

Ein Hoch auf die Syntax-Hervorhebung in unserem Forum.

Ja, hätte mir auffallen müssen.
Kommt davon, wenn man zwischen kochen und coden hin und her springt.
War aber einfach mal wieder zu ungeduldig.

Mira_Belle

Zitat von 2002Andreas

Teste bitte wenn du magst:

Och komm'.
Kann doch nicht wahr sein!
Habe ich einfach -moz-context-properties: fill !important; vergessen.
Klar geht es dann nicht.

Aber Danke 2002Andreas für den leichten Schlag auf den Hinterkopf.

Mira_Belle

Nebenkriegsschauplatz!

Ich wollte diesen Pfeil direkt beeinflussen.
Farbe ändern.
Den Selektor habe ich gefunden.

CSS

menupopup > menu::after {
  content: "";
  background-image: url("chrome://global/skin/icons/arrow-right.svg");
  background-size: contain;
  width: 1em;
  height: 1em;
  fill: lime !mportant;
}

Trage ich DAS in die Stilbearbeitung ein, ändert sich die Farbe.
Toll.
Trage ich den Code im Skript ein, tut sich nichts

Mira_Belle

Zitat von Horstmann

Was war denn die Fehlerkorrektur, und in welchem Script?

Mh. Ich habe mich da womöglich missverständlich ausgedrückt!
Es war kein Fehler im Skript, sondern ich habe da eine Fehlerkorrektur eingebaut!

JavaScript

if (!bmCounta) return;                            // Falls undefiniert

Nachtrag.

Habe noch etwas gebastelt
Ich wollte die Farben der "Zähler" sowie der Symbole getrennt voneinander einstellen können.
Resultat:

JavaScript

  // Custom settings
  let bm_font_size = 12; 
  let cs_font_weight = 700;
  //let cs_font_color = "#FFD700";
  //let cs_icon_color = "#C0C0C0";
  let bm_icon_size = 16;

  // NEU: Schriftfarbe getrennt definieren
  let cs_font_color_1 = "#FFD700";                 // Farbe für Folder-Zähler (links)
  let cs_font_color_2 = "#00FFFF";                 // Farbe für Link-Zähler (rechts)

  // NEU: Symbolfarber getrennt definieren 
  let cs_icon_color_1 = "#5fe575";                 // Farbe für "Ordner", 1.Symbol
  let cs_icon_color_2 = "#fbf328";                 // Farbe für "Link", 2.Symbol

  // Calculated settings
  let cs_font_size = `${bm_font_size}px`;
  let cs_icon_size = `${bm_icon_size}px`;
  let cs_width_one = `calc(${bm_icon_size}px + 1.4em)`;
  let cs_width_two = `calc(${bm_icon_size}px + 1.4em)`;

  function setFunction() { ...

Alles anzeigen

Natürlich müssen auf die "Aufrufe" der Variablen angepasst werden
Wer es nicht hinbekommt, fragen, dann gibt es das ganze Skript.

Nur um es zu verdeutlichen, extreme Farben!

Mira_Belle

So, lieber Horstmann, habe etwas an Deinem neuen Skript herumgebastelt!
Für mich ist es jetzt perfekt!
Ich danke Dir ganz, ganz lich für Dein gelungenes CSS!
Ich habe mir erlaubt, die Variablen in JavaScript zu realisieren.
Man beachte bitte die kleine Fehlerkorrektur in Zeile 125.

Ganz toll finde ich, dass ich nun wieder SVG nutzen kann, die eben nicht auf 16px*16px fest genagelt sind,
sondern eben auch solche, die viel größer sind!

Hier nun meine finale Abwandlung!

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 **** */
/* Adjustments for 139 and customized by Mira inspired by Horstmann     ********************************************** */
/* Source                           => https://www.camp-firefox.de/forum/thema/136572/?postID=1270254#post1270254 **** */
/* ******************************************************************************************************************* */
/* Version 1.01                     => https://www.camp-firefox.de/forum/thema/136572/?postID=1230128#post1230128 **** */
/* Version 1.02                     => https://www.camp-firefox.de/forum/thema/136572/?postID=1230334#post1230334 **** */
/* Version 1.03a                    => https://www.camp-firefox.de/forum/thema/136572/?postID=1270258#post1270258 **** */
/* ******************************************************************************************************************* */
/* Custom Counter in the Bookmarks for folders and links ************************************************************* */
/* ******************************************************************************************************************* */

(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 = "folder-fat.svg";                     //  Custom  Folder Icon
  let icon2 = "bookmark-hollow.svg";                //  Custom  Link Icon

  // Custom settings
  let bm_font_size = 12; 
  let cs_font_weight = 700;
  let cs_font_color = "#FFD700";
  let cs_icon_color = "#C0C0C0";
  let bm_icon_size = 16;

  // Calculated settings
  let cs_font_size = `${bm_font_size}px`;
  let cs_icon_size = `${bm_icon_size}px`;
  let cs_width_one = `calc(${bm_icon_size}px + 1.4em)`;
  let cs_width_two = `calc(${bm_icon_size}px + 1.4em)`;

  function setFunction() {

    const css =`

      /* Counter rechtsbuendig */
      #bmContent {
        display: flex !important;
        margin-inline: auto 0 !important;
        font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
        font-size: ${cs_font_size} !important;
        font-weight: ${cs_font_weight} !important;
        height: ${cs_icon_size};
      }

      /* Counter #1 Folder */
      #bmContent::before {
        content: attr(data-value1);
        width: ${cs_width_one};
        align-items: center;
        display: flex;
        justify-content: end;
        margin-inline: 16px 4px;                        /* min. Abstand links für enge Popups, rechts zum 2ten Counter */
        background-image: url("${ProfilePath}/${icon1}")!important;
        background-position: center right calc(${cs_width_one} - ${cs_icon_size});
        background-repeat: no-repeat;
        background-size: ${cs_icon_size} ${cs_icon_size};     
        color: ${cs_font_color};                        /* Farbe der 1. Zahl */
        fill: ${cs_icon_color};                         /* Farbe des 1. Symbols */
      }

      /* Counter #2 Links */
      #bmContent::after {
        content: attr(data-value2);
        width: ${cs_width_two};
        align-items: center;
        display: flex;
        justify-content: end;
        margin-inline: -2px;
        background-image: url("${ProfilePath}/${icon2}") !important;
        background-position: center right calc(${cs_width_two} - ${cs_icon_size});
        background-repeat: no-repeat;
        background-size: ${cs_icon_size} ${cs_icon_size};            
        color: ${cs_font_color};                        /* Farbe der 2. Zahl */
        fill: ${cs_icon_color};                         /* Farbe des 2. Symbols */
      }
    `;

    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;

          // Neues Element für Zaehler
          let bmCounta = item.childNodes[1];
            if (!bmCounta) return;                            // Falls undefiniert
          bmCounta.innerHTML = ""
          let bmContent = document.createElement("bmContent");
          bmContent.id = "bmContent";
          bmCounta.appendChild(bmContent);

          //let strCountOut1 = "" + menuCount + "";           //  Has no brackets
          //let strCountOut1 = "(" + menuCount + ")";         //  Has round brackets
          //let strCountOut1 = "[" + menuCount + "]";         //  Has square brackets
          let strCountOut1 = String(menuCount).padEnd(2, " ");
          bmContent.setAttribute('data-value1', strCountOut1);

          //let strCountOut2 = "" + menuitemCount + "";        //  Has no brackets
          //let strCountOut2 = "(" + menuitemCount + ")";      //  Has round brackets
          //let strCountOut2 = "[" + menuitemCount + "]";      //  Has square brackets
          let strCountOut2 = String(menuitemCount).padEnd(2, " ");
          bmContent.setAttribute('data-value2', strCountOut2);

          // Attribut parent va für 0 + 0
          if (bmContent.parentElement) {
            bmContent.parentElement.classList.add('pfeil');
            bmContent.parentElement.setAttribute('data-value3', strCountOut1 + strCountOut2);
          }
        }, 100);
    }
  }
})();

Alles anzeigen

Funktioniert in der Nightly.

Mira_Belle

Ich habe auch so meine Probleme.
1. Die Grafiken lassen sich nicht mehr einzeln ansprechen, damit man z.B. unterschiedliche Farben wählen kann.

Das andere Problem konnte ich lösen. Die Variablen

JavaScript

(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 = "Test_3.svg"                    //  Custom  Folder Icon
  let icon1 = "folder-fat.svg";
  let icon2 = "bookmark-hollow.svg";           //  Custom  Link Icon

  let cs_font_size = 12;
  let cs_font_weight = 700;
  let cs_font_color = "#FFD700";
  let cs_icon_color = "#C0C0C0";

  let bm_icon_size = 16;
  let cm_icon_size = `${bm_icon_size}px`;
  let cm_width_one = `calc(${bm_icon_size}px + 1.4em)`;
  let cm_width_two = `calc(${bm_icon_size}px + 1.4em)`;

  function setFunction() {

    const css =`

      /* Counter rechtsbuendig */
      #bmContent {
        display: flex !important;
        margin-inline: auto 0 !important;
        font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
        font-size: ${cs_font_size}px !important;
        font-weight: ${cs_font_weight} !important;
      }

      /* Feste Breite der Counter abhaengig von Anzahl/Grösse Ziffern -> Icons untereinander auf gleicher Hoehe */
      /* --bm_width = Icon Grösse 16px Standard + Fontbreite (+ Abstand Icon zu Zahl)  gelöscht "+ 2px" */

      #bmContent {
        background-image: url("${ProfilePath}/${icon1}"), url("${ProfilePath}/${icon2}") !important;
        background-position: center left calc(${cm_icon_size}),
                             center right calc(${cm_width_two} - ${cm_icon_size});                     
        background-repeat: no-repeat;
        background-size: ${cm_icon_size} ${cm_icon_size};
        height: ${cm_icon_size};
        fill: ${cs_icon_color};                         /* Farbe der Icons */
      }      

      /* Counter #1 Folder */
      #bmContent::before {
        content: attr(data-value1);
        width: ${cm_width_one};
        align-items: center;
        display: flex;
        justify-content: end;
        margin-inline: 16px 8px;   /* min. Abstand links für enge Popups, rechts zum 2ten Counter */     
        color: ${cs_font_color};                        /* Farbe der 1. Zahl */
      }

      /* Counter #2 Links */
      #bmContent::after {
        content: attr(data-value2);
        width: ${cm_width_two};
        align-items: center;
        display: flex;
        justify-content: end;
        color: ${cs_font_color};                        /* Farbe der 2. Zahl */
        margin-inline: -2px;
      }
    `;

    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;

          // Neues Element für Zaehler
          let bmCounta = item.childNodes[1];
            if (!bmCounta) return;                            // Falls undefiniert
          bmCounta.innerHTML = ""
          let bmContent = document.createElement("bmContent");
          bmContent.id = "bmContent";
          bmCounta.appendChild(bmContent);

          //let strCountOut1 = "" + menuCount + "";           //  Has no brackets
          //let strCountOut1 = "(" + menuCount + ")";         //  Has round brackets
          //let strCountOut1 = "[" + menuCount + "]";         //  Has square brackets
          let strCountOut1 = String(menuCount).padEnd(2, " ");
          bmContent.setAttribute('data-value1', strCountOut1);

          //let strCountOut2 = "" + menuitemCount + "";        //  Has no brackets
          //let strCountOut2 = "(" + menuitemCount + ")";      //  Has round brackets
          //let strCountOut2 = "[" + menuitemCount + "]";      //  Has square brackets
          let strCountOut2 = String(menuitemCount).padEnd(2, " ");
          bmContent.setAttribute('data-value2', strCountOut2);

          // Attribut parent va für 0 + 0
          if (bmContent.parentElement) {
            bmContent.parentElement.classList.add('pfeil');
            bmContent.parentElement.setAttribute('data-value3', strCountOut1 + strCountOut2);
          }
        }, 100);
    }
  }
})();

Alles anzeigen

Mira_Belle

Und das laut Aussage von Sören ja auch überhaupt nichts mit BitLocker zu tun.
Nur blöd, wenn man von dem Key gar nichts weiß und MS einem die Daten weggeschlossen hat.

Aber das gibt es ja so gar nicht, schreiben hier so einige!

Mira_Belle

Zitat von Mira_Belle

Und dann hast Du auch noch jene, bei der die Icons als background-images eingebunden werden.
Ich bin gespannt.

Ok, ich bin ungeduldig!
Aber wenn DAS klappt, werde ich mein Problem mit den Grafikgrößen wieder los!
Denn ich habe die original SVG nur in width="1344" height="1339" vorliegen.
Bisher arbeite ich mit einer "Notlösung".

Mira_Belle

Dharkness Hast Du außer den Symbolen noch etwas ......
AH, Hostmann ist da ein kleiner Fauxpas unterlaufen!

Ersetze mal

JavaScript

        //let strCountOut1 = "" + menuCount + "";      //  Has no brackets
        //let strCountOut1 = "(" + menuCount + ")";    //  Has round brackets
        let strCountOut1 = "[" + menuCount + "]";      //  Has square brackets
        bmContent.setAttribute('data-value1', strCountOut1);

        //let strCountOut2 = "" + menuCount + "";        //  Has no brackets
        //let strCountOut2 = "(" + menuCount + ")";      //  Has round brackets
        let strCountOut2 = "[" + menuitemCount + "]";    //  Has square brackets
        bmContent.setAttribute('data-value2', strCountOut2);

durch

JavaScript

        //let strCountOut1 = "" + menuCount + "";      //  Has no brackets
        //let strCountOut1 = "(" + menuCount + ")";    //  Has round brackets
        let strCountOut1 = "[" + menuCount + "]";      //  Has square brackets
        bmContent.setAttribute('data-value1', strCountOut1);

        //let strCountOut2 = "" + menuitemCount + "";        //  Has no brackets
        //let strCountOut2 = "(" + menuitemCount + ")";      //  Has round brackets
        let strCountOut2 = "[" + menuitemCount + "]";    //  Has square brackets
        bmContent.setAttribute('data-value2', strCountOut2);

Aktiviere nun Deine gewünschte Anzeige.

Mira_Belle

Horstmann Erst einmal vielen Dank für diese tolle Version.

Habe etwas gespielt und es funktioniert wie von mir gewünscht.

Bin nun hin- und hergerissen, welche Version ich nun benutzen soll.

Und dann hast Du auch noch jene, bei der die Icons als background-images eingebunden werden.
Ich bin gespannt.

Mira_Belle

.DeJaVu hat recht.
Und wir müssen nicht endlos diskutieren.

Mira_Belle

Fein, was zum Spielen!

Zitat von Horstmann

Ich hätte auch noch eine CSS Test-Variante mit den Icons separat zu den Zahlen als background-image , falls du damit spielen willst

Und ja, genau die hätte ich gerne, denn mit den Icons als background-images habe ich mir bisher die Zähne ausgebissen.

Mira_Belle

So, hier eine meiner Versionen, natürlich zusammen geklaut und geschustert.

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 **** */
/* Adjustments for 139 and customized by Mira inspired by Horstmann     ********************************************** */
/* Source                           => https://www.camp-firefox.de/forum/thema/136572/?postID=1270038#post1270038 **** */
/* ******************************************************************************************************************* */
/* Version 1.01                     => https://www.camp-firefox.de/forum/thema/136572/?postID=1230128#post1230128 **** */
/* Version 1.02                     => https://www.camp-firefox.de/forum/thema/136572/?postID=1230334#post1230334 **** */
/* Version 1.03                     => https://www.camp-firefox.de/forum/thema/136572/?postID=1270113#post1270113 **** */
/* ******************************************************************************************************************* */
/* Custom Counter in the Bookmarks for folders and links ************************************************************* */
/* ******************************************************************************************************************* */

(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 = "Test_3.svg"                    //  Custom  Folder Icon
    let icon2 = "bookmark-hollow.svg"           //  Custom  Link Icon

    let cs_font_size = 12
    let cs_font_weight = 900
    let cs_font_color = "#FFD700"
    let cs_icon_color = "#C0C0C0"

    function setFunction() {

        const css =`

            #bmContent {
                display: flex !important;
                margin-inline: auto 0 !important;
                padding-left: 10px;                         / Abstand zwischen Label und Icon */
                font-family:  Consolas, "Lucida Console", "Courier New", monospace !important;
                font-size: ${cs_font_size}px !important;
                font-weight: ${cs_font_weight} !important;
            }

            #bmContent::before {
                content: url("${ProfilePath}/${icon1}")         /*  Custom icon  */
                        attr(data-value1);
                width: calc(8px + 2.1em);                       /* Feste Breite rechter Counter für 2 Ziffern -> Icons auf gleicher Höhe */
                justify-content: space-between;
                align-items: center;
                display: flex;
            /*    margin-inline: 5px;      */                       /* Abstand links für enge Popups, rechts zum 2ten Counter */
                margin-right: 5px;                              /* Abstand 1. Zahl bis Icon */
                
                fill: ${cs_icon_color};                         /* Farbe des Icons */
                color: ${cs_font_color};                        /* Farbe der 1. Zahl */
            }

            #bmContent::after {
                content: url("${ProfilePath}/${icon2}")         /*  Custom icon  */
                        attr(data-value2);
                width: calc(8px + 2.1em);                       /* Feste Breite rechter Counter für 2 Ziffern -> Icons auf gleicher Höhe */
                align-items: center;
                display: flex;
                margin-inline: -4px;                            /* Abstand 2. Zahl bis Pfeil */
                justify-content: space-between;
                fill: ${cs_icon_color};                         /* Farbe des Icons */
                color: ${cs_font_color};                        /* Farbe der 2. Zahl */
            }
		`;

        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;

              let bmCounta = item.childNodes[1];
              bmCounta.innerHTML = " "
              let bmContent = document.createElement("bmContent");
              bmContent.id = "bmContent";
              bmCounta.appendChild(bmContent);

                //    let strCountOut1 = "[" + menuCount + "]";   //  Has square brackets
                //    let strCountOut1 = + menuCount + "";   //  Has no brackets
                    let strCountOut1 = String(menuCount).padEnd(2, " ");
                    bmContent.setAttribute('data-value1', strCountOut1);

                //    let strCountOut2 = "[" + menuitemCount + "]"; //  Has square brackets
                //    let strCountOut2 = + menuitemCount + ""; //  Has no brackets
                    let strCountOut2 = String(menuitemCount).padEnd(2, "");
                    bmContent.setAttribute('data-value2', strCountOut2);

            }, 50);
        }
    }

})();

Alles anzeigen

Mira_Belle

Naja, Du hast da so einige Funktionen eingebaut,
die ich z.B. gar nicht bräuchte.
Somit würde der css-Teil um einiges kompakter werden.

Aber ich finde Deine Ideen schon irgendwie nice.

Was das JS angeht, wir machen da mal langsam. Das wird schon.

Mira_Belle

Horstmann Wow , css ist schon was Feines, wenn man es versteht!

Ich muss mir das durch ausprobieren immer erst "ertasten", ok, nicht alles, aber vieles.

Werde "Dein" Skript mal ausprobieren und zerpflücken.
Danke schön.

Nachtrag.

Jetzt habe ich mir nur den Code und das Bild angeschaut und stelle fest, ich verstehe mehr als ich dachte.
Werde dieses Skript meinen Bedürfnissen mal anpassen und schauen was geht.
Wird aber ein paar Tage dauern, ist ja Ostern und da ist für so etwas keine Zeit.

Mira_Belle

Hi

Allen Boardies ein frohes Ostern.

Mira_Belle

Zitat von Horstmann

Ich meinte Zeilen 128 und 131, zB let strCountOut1 = menuCount; .

Ah, dann lag ich doch richtig mit meiner Vermutung!

Verschiedene Möglichkeiten! Ich habe DIE aber noch nicht alle im "neuen" Skript durch probiert.

JavaScript

              let strCountOut1 = + menuCount + '\xa0';
//              let strCountOut1 = String(menuCount).padStart(2, '\xa0');    // rechtsbündig
//              let strCountOut1 = String(menuCount).padEnd(2) + '\xa0';     // padEnd2 => zwei Stellen, plus Abstand              
//              let strCountOut1 = String(menuCount).padStart(2, '\xa0'); 
              bmContent.setAttribute('data-value1', strCountOut1);

              let label2 = item.childNodes[4];  
              label2.classList.add('countClass2');

              let strCountOut2 = + menuitemCount + '\xa0';
//              let strCountOut2 = String(menuitemCount).padStart(3, '\xa0');    // rechtsbündig
//              let strCountOut2 = String(menuitemCount).padEnd(3, '\xa0');      // padEnd3 => drei Stellen, Abstand bei nur einer Ziffer
//              let strCountOut2 = String(menuitemCount).padStart(3, '\xa0');
              bmContent.setAttribute('data-value2', strCountOut2);

Alles anzeigen

Mira_Belle

Zitat von Horstmann

Und - das ist ein Test, kein fertiger Code!

Aber eine nette Sache!

Apropos String Dingens, habe gerade eben geschaut, was Du da meinen könntest.
Denn ich ging wohl von was anderem aus!
Und was soll ich sagen? Ich verstehe nur Bahnhof und weiß somit gar nicht, was genau Du meinst!
Kannst Du die Zeilen im Code benennen, um die es geht?
Eventuell raff ich es dann ja, vielleicht, möglicherweise.

Beiträge von Mira_Belle

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

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

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

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

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

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

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

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

Windows 11

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

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

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

Windows 11

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

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

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

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

Frohe Ostern

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

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