Firefox 74 Nightly - CSS-Code für mehrzeilige Lesezeichenleiste funktioniert nicht mehr

milupo

Hallo,

mal etwas Anderes als Fx 72 und die Tableiste: Es geht um das 74er Nightly und um die Lesezeichenleiste. Ich habe folgenden Code für die mehrzeilige Lesezeichenleiste:

CSS

@-moz-document url("chrome://places/content/places.xhtml"){

/* Lesezeichenleiste mehrreihig */

#personal-bookmarks {
--bookmark_items_height: 29px;
--bookmark_items_lines: 2; /* Anzahl der angezeigten Reihen*/
}

/* Abstand der Lesezeichen untereinander, die Werte können angepasst werden */
/* Zum aktivieren die Auskommentierungszeichen /*..am Anfang und Ende der Zeile bitte entfernen*/

#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item{
padding-top: 4px !important;
padding-bottom: 6px !important;
/* margin-top: -2px !important; */
/* margin-bottom: -2px !important; */
vertical-align: middle!important;
}

#personal-bookmarks {
display: block!important;
-moz-window-dragging: no-drag !important;
}

#personal-bookmarks #PlacesToolbar {
display: block;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
max-height: calc( var(--bookmark_items_lines) * var(--bookmark_items_height) );
}

#personal-bookmarks #PlacesToolbar > hbox {
display: -moz-stack !important;
left: 0px;
right: 0px;
width: 100%;
}

#personal-bookmarks #PlacesToolbar #PlacesToolbarItems {
overflow-x: visible;
overflow-y: visible;
}

#personal-bookmarks #PlacesToolbar #PlacesToolbarItems > box {
display: block;
}

#personal-bookmarks #PlacesToolbar > .bookmark-item{
visibility: visible !important;
}

#personal-bookmarks #PlacesToolbar .chevron{
visibility: collapse;
}

#personal-bookmarks #PlacesToolbar > hbox > hbox{
overflow-x: hidden;
overflow-y: hidden;
}

#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator[collapsed="true"],
#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator{
display: none;
}

#PlacesToolbarItems > .scrollbox-innerbox {
display: flex;
flex-wrap: wrap;
overflow-x: hidden !important;
overflow-y: visible !important;
max-height: calc(var(--bookmark_items_height)*(var(--bookmark_items_lines))) !important
}

#personal-bookmarks > .arrowscrollbox{
min-height: unset !important;
}

#personal-bookmarks .scrollbox-innerbox{
display: flex;
flex-wrap: wrap;
}

#PersonalToolbar {
min-height: var(--bookmark_items_height) !important;
max-height: calc(var(--bookmark_items_height)*(var(--bookmark_items_lines))) !important;
}

#PlacesToolbar,
#PlacesToolbarItems {
overflow: visible;
display: block;
}

/* Damit wird eine Trennline neben den Lesezeichen wieder angezeigt wenn erwünscht */

#personal-bookmarks #PlacesToolbar toolbarseparator{
-moz-appearance: none !important;
visibility: visible !important;
display: inline;
text-shadow: none !important;
border-left: 2px solid ThreeDShadow !important;
margin-right:3px!important;
}
}

Alles anzeigen

Die Lesezeichen stehen jetzt wieder nur in einer Zeile und restliche Lesezeichen unter dem Pfeilspitzensymbol.

BrokenHeart

Also bei mir funktioniert dein Code, so wie er da steht, weder in der FF72 noch in der Nightly. Was mich ehrlich gesagt auch nicht wundert, da @-moz-document url("chrome://places/content/places.xhtml") die CSS-Einstellungen ja auf die Lesezeichenverwaltung bzw. Bibliotheksansicht beschränkt.

Wenn ich diese Bereichs-Einschränkung entferne funktioniert es in der FF72. Aber in der Nightly erstellt er dann für jedes Lesezeichen bzw. Ordner eine neue Zeile ( hab jetzt kein Screenshot...) .

Woran das liegt habe ich jetzt nicht mehr getestet...

milupo

Danke für die Antwort. Die URL habe ich nachträglich eingefügt, weil dann im Nightly die Lesezeichen wenigstens in einer Zeile angezeigt werden. Ansonsten werden die Lesezeichen untereinander angezeigt, wie du schon richtig bemerkt hast.

BrokenHeart

Zitat von milupo

Die URL habe ich nachträglich eingefügt, weil dann im Nightly die Lesezeichen wenigstens in einer Zeile angezeigt werden.

Ok, verstehe.

Zitat von milupo

Ansonsten werden die Lesezeichen untereinander angezeigt, wie du schon richtig bemerkt hast.

So auf die Schnelle kann ich auch keine 'offensichtliche' Ursache finden....

milupo

Zitat von BrokenHeart

So auf die Schnelle kann ich auch keine 'offensichtliche' Ursache finden....

Ich habe ja auch schon geforscht, aber bisher auch nichts gefunden. Manchmal wünsche ich mir einen CSS-Baum, der die Hierarchie der Elemente und der zugehörigen CSS-Selektoren und -Eigenschaften zeigt.

Fox2Fox

Zitat von milupo

Die Lesezeichen stehen jetzt wieder nur in einer Zeile und restliche Lesezeichen unter dem Pfeilspitzensymbol.

Mit deinem Code stehen die LZ auch wieder in einer Reihe. Aber mehrreihig klappt damit nicht.

Meine Anfrage

milupo

Zitat von Fox2Fox

Mit deinem Code stehen die LZ auch wieder in einer Reihe. Aber mehrreihig klappt damit nicht.

Ja, ich habe aber immer noch keine Lösung.

milupo

Ich habe von der japanischen Seite folgenden Code:

CSS

@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {

     / * Mehrstufige Lesezeichen-Symbolleiste  */
    #PersonalToolbar,
    #PlacesToolbarItems {
        max-height: calc(20px * 3) !important;
    }
    #personal-bookmarks,
    #PlacesToolbar,
    #PlacesToolbar > hbox {
        display: block;
    }
    #PersonalToolbar toolbarbutton {
        min-height: 20px !important;
        max-height: 20px !important;
    }
    #PlacesToolbarItems {
        display: flex;
        flex-wrap: wrap;
        overflow-x: visible;
        overflow-y: auto;
    }
    #PlacesToolbarItems > scrollbar {
        -moz-window-dragging: no-drag;
    }
    #PlacesToolbar #PlacesChevron {
        display: none;
    }

}

Alles anzeigen

Fast den gleichen Code hat mir Endor im Thread von Fox2Fox angeboten. Er hat nicht funktioniert, aber es kann sein, dass er doch funktioniert. Ich war selbst noch mal auf der japanischen Seite und habe die obige Version getestet. Funktionierte nicht, aber irgendwie hatte ich die Idee, mach doch mal das Anpassen-Fenster auf. Und siehe da, ich habe es gleich wieder zu gemacht und schon funktionierte der Code, jedenfalls bei mir. Also, lasst euch nicht verblüffen, sondern öffnet und schließt das Anpassen-Fenster.

BrokenHeart

milupo: Danke

Funktioniert hier auf Anhieb (ohne Anpassen-Fenster öffnen).

Benutze zwar keine mehrzeilige Lesezeichenleiste, aber gut zu wissen, falls man es sich vielleicht doch mal anders überlegt..

Fox2Fox

Zitat von milupo

Ich habe von der japanischen Seite folgenden Code:

Der Code funktioniert soweit. Aber wenn ich eine dritte Reihe aufmache, siehts so aus

Von der dritten Reihe sieht man noch die Spitzen der Buchstaben.

Ist das in diesem Code noch einstellbar, dass auch eine dritte Reihe vollständig angezeigt wird?

2002Andreas

Zitat von Fox2Fox

dass auch eine dritte Reihe vollständig angezeigt wird?

Teste bitte mal:

CSS

@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {

     /* Mehrstufige Lesezeichen-Symbolleiste */
    #PersonalToolbar {
        max-height: calc(20px * 5) !important;
    }
    #personal-bookmarks,
    #PlacesToolbar,
    #PlacesToolbar > hbox {
        display: block;
    }
    #PersonalToolbar toolbarbutton {
        min-height: 20px !important;
        max-height: 20px !important;
    }
    #PlacesToolbarItems {
        max-height:60px!important;
        display: flex!important;
        flex-wrap: wrap!important;
        overflow-x: visible!important;
        overflow-y: auto!important;
    }
    #PlacesToolbarItems > scrollbar {
        -moz-window-dragging: no-drag;
    }
    #PlacesToolbar #PlacesChevron {
        display: none;
    }
}

Alles anzeigen

Fox2Fox

Zitat von 2002Andreas

Teste bitte mal:

Sehe jetzt 3 Reihen. Habe eine 4. Reihe hinzugefügt, dann macht sich ein Scrollbalken breit. Klicke ich auf den Scrollbalken

(siehe Pfeil), verkleinert sich das gesamte Firefox-Fenster. So, als würde ich auf die Titelleiste doppelt klicken.

milupo

Probiere mal folgenden Code:

CSS

@-moz-document url("chrome://browser/content/browser.xhtml") {

     / * Mehrstufige Lesezeichen-Symbolleiste  */
     
    #PersonalToolbar {
         min-height: 20px !important;
    }
             
    #PersonalToolbar,
    #PlacesToolbarItems {
        max-height: calc(20px * 5) !important;
    }
    #personal-bookmarks,
    #PlacesToolbar,
    #PlacesToolbar > hbox {
        display: block;
    }
    #PersonalToolbar toolbarbutton {
        min-height: 20px !important;
        max-height: 20px !important;
    }
    #PlacesToolbarItems {
  display: flex;
        flex-wrap: wrap;
        overflow-x: visible;
        overflow-y: auto;        
    }
    #PlacesToolbarItems {
        -moz-window-dragging: no-drag;
    }
    #PlacesToolbar #PlacesChevron {
        display: none;
    }
 }

Alles anzeigen

Ich habe die Zeilen 5 - 7 hinzugefügt und die Zeile 17 von Andreas' Code weggelassen.

2002Andreas

Zitat von Fox2Fox

verkleinert sich das gesamte Firefox-Fenster

Das kann ich bestätigen.

War mir nur nicht aufgefallen(sorry), da ich immer mit dem Mausrad scrolle, und das funktioniert.

Leider finde ich den Grund nicht, warum es mit dem Scrollbalken ziehen nicht funktioniert

Evtl. fällt einem anderen User ja noch etwas ein dazu.

BrokenHeart

Bitte mal testen:

CSS

@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {

     /* Mehrstufige Lesezeichen-Symbolleiste */
    #PersonalToolbar {
        max-height: calc(20px * 5) !important;
    }
    #personal-bookmarks,
    #PlacesToolbar,
    #PlacesToolbar > hbox {
        display: block;
    }
    #PersonalToolbar toolbarbutton {
        min-height: 20px !important;
        max-height: 20px !important;
    }
    #PlacesToolbarItems {
        max-height:60px!important;
        display: flex!important;
        flex-wrap: wrap!important;
        overflow-x: visible!important;
        overflow-y: auto!important;
    }
    #PlacesToolbar,
    #PersonalToolbar > scrollbar {
        -moz-window-dragging: no-drag !important;
    }
    #PlacesToolbar #PlacesChevron {
        display: none;
    }
}

Alles anzeigen

2002Andreas

Zitat von BrokenHeart

Bitte mal testen:

Hallo BrokenHeart ..

auch damit funktioniert leider der Scrollbalken nicht.

Ich habe auch schon zig Möglichkeiten ausprobiert, aber keine Lösung gefunden

Aber danke für deine Unterstützung

BrokenHeart

Also bei mir funktioniert die Scrollbar

Oops: Sorry, gerade gesehen, dass um die Nightly geht...

Edit: In der Nightly funktioniert es bei mir mit dem CSS-Code auch.

2002Andreas

In Fx 74!?

Es funktioniert doch...sorry.

Allerdings muss man die jeweiligen Pfeile dazu anklicken, den Thumb halten mit der Maus geht nicht

milupo

Ach, bei mir gibt es keine Bildlaufleiste, da ich den Selektor scrollbar weggelassen habe, aufgrund folgender Bemerkung auf der japanischen Seite, von der der Code stammt:

Zitat

Wenn Sie ___ userChrome.css kopieren und einfügen, ändern Sie #PlacesToolbarItems> Bildlaufleiste in Zeile 23 in #PlacesToolbarItems. Wenn Sie dies nicht tun, können Sie die Bildlaufleiste, die in drei oder mehr Schritten angezeigt wird, nicht berühren.

Übersetzt mit der Erweiterung WebTranslate. So genau weiß ich aber, was damit gemeint ist. Der Selektor wurde durch die Erweiterung mitübersetzt, dort muss aber scrollbar stehen bleiben.

2002Andreas

Zitat von 2002Andreas

den Thumb halten mit der Maus geht nicht

Nach einem weiteren Neustart vom Nightly funktioniert es jetzt damit auch

Danke BrokenHeart