Dieses funktioniert einwandfrei
Hättest du ja dann auch gleich posten können.
Hatte Mira das nicht schon hier gepostet ?
Offengestanden kann ich auch aus den Antworten von nierewa nicht schlau werden .
Für mich sind sie unvollständig und unklar .
Dieses funktioniert einwandfrei
Hättest du ja dann auch gleich posten können.
Hatte Mira das nicht schon hier gepostet ?
Offengestanden kann ich auch aus den Antworten von nierewa nicht schlau werden .
Für mich sind sie unvollständig und unklar .
Ja, das habe ich bereits wieder gelöscht.
War überflüssig, kommt von diesem Relikt hier:
Code Alles anzeigenfunction onClick(aEvent) { let b1 = document.getElementById('nav-bar-button'); if (d1.style.height == '') { d1.style.height = '0px'; b1.style.backgroundColor = '#72a572'; } else if (d1.style.height == '22px') { d1.style.height = '0px'; b1.style.backgroundColor = '#72a572'; } else if(d1.style.height == '0px') { d1.style.height = '22px'; b1.style.backgroundColor = '#323232';
Ein persönlicher Touch.
Danke fürs Testen und selbstverständlich für die tolle Leistung!
Ah, verstehe .
Und so sehr ich mich über Komplimente freue - es ist etwas unverdient, und sollte an BrokenHeart gehen, der ( mindestens ) den Grossteil der Arbeit gemacht hat .
Ich habe mir mal die Freiheit genommen und diese tolle Arbeit zu einem Code zusammengefügt, vielleicht kann's ja jemand brauchen. Ob das allerdings noch mit dem Update auf 109 funktioniert, weiss ich nicht.
Danke , macht einen guten Eindruck !
Selber benutze ich für diverse Versionen zum Einklappen der Lesezeichenleiste nur noch das hier , bzw Varianten davon .
Mit der vorrangig CSS basierten Rangehensweise bekommt man eine Menge Kontrolle über alle relevanten Elemente , was v.a. Sinn macht wenn man vertikal geht mit der Leiste .
Nur eines in deinen Scripts : sollten b1 und b2 nicht jeweils d1 und d2 heissen ?
Ich werde wohl um ein Grundlegendes Reset nicht herumkommen, kann das ja mal erst probieren und mir vorher ne Kopie von dieser Version machen. Dann das Profil wieder zurück und sehen, ob es am FF Code liegt (war wie gesagt nach dem letzten Update) oder im Profil der Wurm begraben ist.
Probier vielleicht erstmal Ansicht - Symbolleisten - Symbolleiste anpassen, und unten rechts auf Standard wiederherstellen klicken .
Wenigstens musst Du dann nur die Buttons wieder zurechtrücken, falls es funktioniert .
Kommt mir irgendwie bekannt vor.
BeitragRE: Schaltfläche um Lesezeichen Leiste ein/auszublenden ?
Das Script funktioniert nicht mehr, nicht mehr so richtig!
Kleinigkeit am Rande, nach dem Update erschien in der Lesezeichenleiste so ein blauer Feil,
nervig und störend! Wo für der wohl gut war?
(Quelltext, 4 Zeilen)
Schwups und weg war er!
So nun zum Script.
Es blendet nach wie vor die Leiste ein und nach voreingestellter Zeit auch wieder aus,
nur
es sind keine Lesezeichen zu sehen!
Erst wenn man auf ">>" vor "Weitere Lesezeichen" klickt, sind da die Lesezeichen,
all jene, die eigentlich auf der Leiste…
Mira_Belle15. Dezember 2022 um 17:52
Es sei eine kleine Zwischenfrage erlaubt!
Wenn bei zwei unterschiedlichen JavaScripten der gleiche Fehler auftritt,
liegt der Fehler an den Scripten?
Ich bin nach wie vor der Meinung es hat mit style.visibility = zu tun,
denn genau aus diesem Grund habe ich ja auf Anraten von Horstmann auf style.height und Pixelwerten umgestellt.
Hat es bei Dir eigentlich geholfen, das Skript von style.visibilty auf style.height umzustellen ?
Du hattest da ja auch das Problem mit dem Overflow >> Button und sonst leerer Lesezeichen Leiste, wenn das Skript verwendet wurde .
Ich habe inzwischen weiter rum getestet, und kann in FF 108.01 das Problem weiterhin nicht reproduzieren - fast nicht .
Wenn ich - mit dem Skript vom ersten Beitrag - wie wild zwischen Lesezeichenleiste verstecken mit dem Scriptbutton, und Leiste verstecken mit Lesezeichen-Symbolleiste Immer/Nie anzeigen wechsle - also alles was man nicht machen darf mit diesem Script - und noch dazu zusätzliche Browserfenster benutze - dann taucht irgendwann in der Lesezeichenleiste ein unnötiges >> Overflow Symbol auf .
Das aber keine Liste öffnet , und die Lesezeichen sind auch noch da wo sie hingehören .
aber erfolgreich am Laufen - mit aktivierten Weitere Lesezeichen
Das war in Fx 108.
In Fx 109 musste ich es erst entfernen.
Na super, da kann ich mich ja auf den Update freuen ...
Den Eintrag Weitere Lesezeichen gibt es bei mir nicht.
Ohne den Eintrag funktioniert das Skript aus Beitrag Nr.1 hier ohne Probleme.
Mit dem Eintrag muss ich die Änderung in dem Skript machen.
Moment, hier hast Du das Skript aus der ersten Post aber erfolgreich am Laufen - mit aktivierten Weitere Lesezeichen .
Den Eintrag Weitere Lesezeichen gibt es bei mir nicht.
Den hatte ich bereits aus der Lesezeichensymbolleite gelöscht.Du nutzt weiteren CSS-Code?
Oder wie ist das zu verstehen?
Gute Frage !
Was mir jetzt aufgefallen ist, die Leiste ist doch nicht ganz leer.
Ganz am rechten Rand sieht man dieses: >> und wenn man da drauf klickt kommen alle Lesezeichen.
Es scheint also so, als würde nur etwas vor allen richtigen Lesezeichen eingefügt:
Aha, also doch .
Das ist der Overflow, wie oben schon erwähnt .
Aber eigentlich sollten vor dem Overflow Button alle Lesezeichen die in die Leiste passen angezeigt werden, und nur der Rest in diesem Überhangfenster angelegt werden .
Bei mir funktioniert Dein Skript in einem sonst leeren Profil problemlos, auch wenn ich die Lesezeichenleiste vollpacke bis sie überläuft .
Das ist in FF 108.01 ( Mac ) .
Danke fürs testen
Gehört hier im Forum zum Service
Bei Gelegenheit .
Mir ist gerade aufgefallen, dass der Button "Toggle Bookmartoolbar" bei nir nicht funktioniert
Hmm, schwieriger Kunde ; hast Du schon mal über about:support den Start Cache gelöscht ?
Wenn ein Theme oder userChrome.css benutzt wird, vielleicht mal ohne probieren ?
Und wenn die offene Lesezeichenleiste leer ist, ist sie komplett leer, ohne irgendwelche Buttons oder Icons ?
Die Leiste ist beim Start erst mal ausgeblendet. Wenn ich sie brauche drücke ich eben AltGr+l
Das funktioniert auch so weit. Doch seit kurzem ist die Lesezeichensymbolleiste leer.Ich muß erst über Ansicht -> Symbolleisten -> Lesezeichen-Symbolleiste von "Immer anzeigen" auf "Nie anzeigen" stellen und wieder zurück.
Dann werden die Lesezeichen in der Symbolleiste wieder angezeigt.Weiß jemand wo der Fehler liegt und wie ich das script ändern muß, wenn es denn daran liegt?
Dieses Verhalten mit dem Script kenne ich eigentlich nur, wenn man FF startet und Lesezeichen-Symbolleiste beim Start auf Nie anzeigen steht .
Oder auch wenn man im Betrieb auf Nie anzeigen wechselt und wieder zurück, also genau anders herum als Du es beschreibst .
Das Script funktioniert ( bei mir ) eigentlich nur, wenn Lesezeichen-Symbolleiste dauerhaft auf Immer anzeigen steht .
Bei leerer Lesezeichenleiste, siehst Du dann einen Text , sowas wie Lesezeichen hier ablegen oder etwas in der Art, oder ?
Besteht die Möglichkeit, diesen CSS-Code irgendwie in dem Script unter zubekommen?
Des Rätsels Lösung:
Freut mich dass es klappt .
Nur eines mit Deiner min-heightt im Script statt CSS :
Damit wird beim Verwenden einer transition beim Öffnen von FF diese Animation abgespielt .
D.h. trotz geschlossener Lesezeichenleiste als Anfangszustand im Script, wird FF mit offener Leiste gestartet, und die Leiste schliesst sich dann aber selbstständig und sofort entprechend der Animation .
Kannst mal testen mit z.B. :
Ich selber wollte unbedingt die Animation , das ein Mitgrund für die Übung, aber ohne die scheint es keinen Unterschied zu machen .
Gleiches Problem wenn ich beides ins Script packe statt in CSS, etwas so :
PersonalToolbar.style.setProperty('min-height', '0', 'important' );
PersonalToolbar.style.setProperty('transition', 'all 0.5s steps(6, end)', 'important' );
Und damit Sören nicht moppert , es scheint auch alternativ zu deinem Code das zu reichen :
Leiste ist immer sichtbar!
Beim Start "breit", nach klick auf Symbol etwas "schmaler".
Bei weiterem klick auf das Symbol wieder "breit".
Es kann auch sein dass nur ein CSS Eintrag fehlt, dann passiert was Du beschreibst auch :
Alles anzeigenLeiste ist immer sichtbar!
Beim Start "breit", nach klick auf Symbol etwas "schmaler".
Bei weiterem klick auf das Symbol wieder "breit".
Bekomme das mit ...
... mit style.visibility mit zB style.height und Pixelwerten arbeitet , ...
... einfach nicht auf die Kette.
Kann mir bitte jemand aufzeigen, wo genau der Fehler liegt?
Das ursprüngliche Script von Brokenheart - hier - hatte ich zum Testen mal so auf height Funktion umgestellt, und funktioniert bei mir auch .
Die Einträge fürs Icon müsstest Du für dich anpassen bzw aus Deinem Script übernehmen , und die Pixelwerte nach Wusch ändern .
// JavaScript Document
//Button_PersonalToolbar.uc.js
(function ptbut() {
if (location != 'chrome://browser/content/browser.xul' && location != 'chrome://browser/content/browser.xhtml')
return;
const startHeight = '0px'; //'0px' oder '24px' Hoehe Leiste
let autoCloseTime = 8000; // 0 = kein Auto-Close / >0 Zeit in Millisekunden
let intervalID = 0;
try {
CustomizableUI.createWidget({
id: 'PersonalToolbar-button',
type: 'custom',
defaultArea: CustomizableUI.AREA_NAVBAR,
onBuild: function(aDocument) {
var toolbaritem = aDocument.createXULElement('toolbarbutton');
var currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
var buttonicon = "toolbar.png"
var props = {
id: 'PersonalToolbar-button',
class: 'toolbarbutton-1 chromeclass-toolbar-additional',
removable: true,
label: 'Toggle',
tooltiptext: 'Toggle Bookmarktoolbar',
style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) +'");',
};
for(var p in props)
toolbaritem.setAttribute(p, props[p]);
return toolbaritem;
}
});
} catch(e) { };
if( startHeight === '24px' || startHeight === '0px' ) {
document.getElementById('PersonalToolbar').style.height = startHeight;
}
else {
document.getElementById('PersonalToolbar').style.height = '24px';
}
document.getElementById('PersonalToolbar-button').addEventListener( "click", onClick );
document.addEventListener('keydown', (event) => {
var keyName = event.key;
// Mac : Funktion wird ausgeführt, wenn Cmd + < gedrückt wird
if (event.metaKey && keyName == '<') {
onClick(event);
}
}, false
);
function onClick(aEvent) {
var d2 = document.getElementById('PersonalToolbar');
if (d2.style.height == "") {
d2.style.height = "0px";
} else if (d2.style.height == "24px") {
d2.style.height = "0px";
} else if (d2.style.height == "0px") {
d2.style.height = "24px";
if(!intervalID && autoCloseTime) {
intervalID = aEvent.target.ownerGlobal.setInterval( autoClose, autoCloseTime );
}
}
}
function autoClose() {
if( intervalID ) {
let d2 = document.getElementById('PersonalToolbar');
if( d2.style.height == "24px") {
d2.style.height = "0px";
clearInterval(intervalID);
intervalID=0;
}
}
}
})();
Alles anzeigen
In der CSS braucht's dazu noch :
Ein Ansatz wäre, toolbaritem statt toolbarbutton in die Regel zu setzen. Aber ich wollte nur auf diesen neuen Umstand hinweisen. Ich schrieb doch, dass ich mir die Stile nicht näher angesehen habe.
Alternativ nimmt man einen Klassennamen (toolbaritem könnte zu allgemein sein), wie es visoer gemacht hat:
#nav-bar .toolbaritem-combined-buttons.unified-extensions-item.chromeclass-toolbar-additional {
Eine Klasse sollte aber völlig ausreichen. Bei mir sieht es so aus:
CSS/* Symbole enger zusammen */ #nav-bar .toolbaritem-combined-buttons { margin-inline: -2px !important; }
Das ist ein Abwandlung der Originalregel, die auf alle Toolbars wirkt und einen zusätzlichen Abstand von 2px vorschreibt.
Beides spricht bei mir nur Extension Buttons an, in einem sonst blanken Profil, und hat keine Auswirkungen auf die restlichen Buttons in der Navbar .
Sind da evtl. noch andere CSS Regeln mit im Spiel ?
Ebenfalls im blanke Profil probiert, wäre hier noch ein Vorschlag für Separatoren mit dem ::after Dingens ; das scheint alle Buttons abzudecken die ich finden konnte , bitte mal testen .
Mit den auskommentierten margins kann man noch spielen .
#nav-bar toolbarbutton:not(.unified-extensions-item-action, #PanelUI-menu-button)::after, toolbaritem.unified-extensions-item::after {
content: "|" !important;
display: flex !important;
color: red !important;
/*margin-left: -3px !important;
margin-right: -4px !important;
margin-inline: 0px !important;*/
}
#nav-bar toolbarbutton:not(.unified-extensions-item-action, #PanelUI-menu-button), toolbaritem.unified-extensions-item {
padding-inline: 0px !important;
margin-inline: 0px !important;
}
#nav-bar {
padding-inline: var(--toolbarbutton-outer-padding) !important;
}
Alles anzeigen
Vorweg, danke für den Gegentest.
Es ging mir mehr um den Vergleich der Abstände, ob sie auch so weit auseinander liegen wie bei Barbara auf ihrem Screenshot.
Mit deinem Code sind sie so wie auf meinen Screenshots zu sehen ist.
Also nicht die weiten Abstände.
Dann weiß ich es auch nicht, an was es liegen könnte
Immer ein Vergnügen, wenn ich mal was beitragen kann .
Die 'weiten' Abstände sehe ich eigentlich auch mit keinem der CSS Codes von oben - sehe sie allerdings schon in einem komplett unveränderten 108.1er Profil ( dann natürlich ohne Trenner ) , was ja aber normal ist .
Daher die Vermutung dass da bei Barbara immer noch was am Laufen ist das querschlägt .
Eine kurze, grobe Test CSS noch dazu, Erweiterungen sind dabei halbwegs mit berücksichtigt, vielleicht hilft's ja jemand :
//
Es wäre ja sehr freundlich, wenn andere User den Code auch mal testen würden.
Nicht das es an mir liegt, und ich etwas übersehen habe
Getestet, und den Code für schlecht befunden .
Sogar in Deinen Screenshots sieht man dass die Separatoren teils gar nicht auftauchen, oder teils nicht sauber an beiden Button Enden anliegen .
Man könnte sowas probieren :
#nav-bar toolbarbutton::after {
content: "|" !important;
display: flex !important;
color: red !important;
margin-left: -3px !important;
margin-right: -4px !important;
}
#nav-bar .toolbarbutton-1 {
--toolbarbutton-outer-padding: 0px !important;
}
Alles anzeigen
Oder nur mit den margin Werten im ersten Teil rumspielen, und den 2ten Teil mit dem padding weglassen .
Die Buttons lassen sich so eigentlich recht beliebig zwischen den und über die Separatoren verschieben .
So oder so ist es nicht perfekt, v.a. Separatoren für die Extension Buttons werden gar nicht oder nicht sauber dargestellt , was evtl. mit 108 zusammenhängt ; und was ausgehend von der OP der eigentliche Grund für die Anpassungsarie sein könnte .
Dazu gibt es noch unerwünschte Quasi-Separatoren im Bibliothek-Button Popup .
Es funkt kein anderer Code dazwischen. Das war das erste, was ich ausprobiert hatte, alle Codes zu deaktivieren. Nur mit diesem Code klappt es auch nicht. Vor allem, weil ich diese Unstimmigkeit vor dem Update nicht hatte.
Ohne irgendein Script oder eigenes CSS zu verwenden, ist das Problem auch da ?
Falls nicht, könnte es sein dass alle Codes deaktivieren vielleicht nicht ganz geklappt hat ?
Schon komisch!
Woran es gelegen hat, ....
Hatte einige Lesezeichen auf der Leiste und davon waren viele in dem "Überhangmenü".
All jene habe ich nun in einen anderen Ordner verschoben und siehe da, die Leiste funktioniert genauso wie sie soll.
Ob es an den "unsichtbaren" Trennlinien" liegt? Wenn ich mal Muße habe, gehe ich der Sache auf den Grund.
Screenshots würden schon helfen in so einem Fall , und evtl. die CSS für deine Lesezeichenleiste ; so ist das alles nicht ganz nachvollziehbar .
Mit 108 haben sich ein paar mehr Dinge als üblich verändert ; habe auch gerade den Lesezeichen Overflow Button in einem Testprofil anpassen müssen, weil sich die Einbindung von dem Ding geändert hat .
Meine eigene Version vom Script funktioniert allerdings weiterhin ohne Probleme .
Die neue Eieruhr Variante hatte ich auch mal getestet, ist aber sofort rausgeflogen - unglaublich irritierend .
Nochmal Dankeschön Sören , aufgrund von deinem Hinweis hat's jetzt geklappt .
Letztendlich musste ich nur statt customizationui-widget-panel das übergeordnete Element(?) benutzen, was nav-bar ist .
Ich vermute customizationui-widget-panel existiert quasi nicht vor dem Öffnen des Popup Panels, und kann deswegen nicht angesprochen werden, deshalb wohl auch der Error .
Damit sind jetzt die Positionen der Popups für (hoffentlich) alle möglichen Buttons in meiner vertikalen Lesezeichenleiste an die veränderbare Breite der Leiste angepasst .
Das funktionierende Script sieht jetzt so aus :
//Toggle PersonalToolbar + Browser + Popups Test
(function ptbut() {
if (location != 'chrome://browser/content/browser.xul' && location != 'chrome://browser/content/browser.xhtml')
return;
try {
CustomizableUI.createWidget({
id: 'PersonalToolbar-button',
type: 'custom',
defaultArea: CustomizableUI.AREA_NAVBAR,
onBuild: function(aDocument) {
var toolbaritem = aDocument.createXULElement('toolbarbutton');
var props = {
id: 'PersonalToolbar-button',
class: 'toolbarbutton-1 chromeclass-toolbar-additional',
removable: true,
label: 'Toggle Bookmarks',
tooltiptext: 'Toggle Bookmarktoolbar',
};
for(var p in props)
toolbaritem.setAttribute(p, props[p]);
return toolbaritem;
}
});
} catch(e) { };
document.getElementById('PersonalToolbar-button').addEventListener( "click", onClick );
document.addEventListener('keydown', (event) => {
var keyName = event.key;
// Mac keyboard shortcut German Cmd + <
if (event.metaKey && keyName == '<') {
onClick(event);
}
}, false
);
function onClick(aEvent) {
PersonalToolbar.classList.toggle("wide-mode");
browser.classList.toggle("margin");
document.getElementById('nav-bar').classList.toggle('wider-cui');
}
})();
Alles anzeigen
Die entsprechend korrigierte CSS wäre dann diese :
@-moz-document url(chrome://browser/content/browser.xhtml) {
/*** Adjust Widths , Margins custom ***/
:root:not([inDOMFullscreen]) {
--uc-toggle-narrow: 40px;
--uc-toggle-wide: 130px;
}
#PersonalToolbar:not([customizing]) {
position: fixed;
display: flex;
flex-direction: column;
left: 0;
min-width: 0px !important;
width: var(--uc-personalbar-width);
height: 100vh;
max-height: 100vh !important;
transition: all 0.4s ease !important;
}
:root:not([chromehidden~="toolbar"]):not([customizing]) body > #browser,
:root:not([chromehidden~="toolbar"]):not([customizing]) body > #browser-bottombox,
:root:not([chromehidden~="toolbar"]):not([customizing]) #customization-container {
margin-left: var(--uc-personalbar-width);
transition: all 0.4s ease !important;
}
/** Toggle narrow / wide / flip for startup state **/
#PersonalToolbar, #browser {
--uc-personalbar-width: var(--uc-toggle-narrow) !important;
}
#PersonalToolbar.wide-mode, #browser.margin {
--uc-personalbar-width: var(--uc-toggle-wide) !important;
}
#nav-bar {
--uc-personalbar-width: var(--uc-toggle-narrow) !important;
}
#nav-bar.wider-cui {
--uc-personalbar-width: var(--uc-toggle-wide) !important;
}
/* Popups position */
#PlacesToolbarItems > .bookmark-item > menupopup, #OtherBookmarks #OtherBookmarksPopup {
margin-inline-start: calc(var(--uc-personalbar-width) - 8px) !important;
margin-top: -25px !important;
}
#PersonalToolbar .cui-widget-panel {
margin-right: calc(var(--uc-personalbar-width) - 8px) !important;
margin-top: -25px !important;
}
#nav-bar #customizationui-widget-panel.bookmarks-toolbar {
margin-right: calc(var(--uc-personalbar-width) - 13px) !important;
margin-top: -21px !important;
transition: all 0.4s ease !important;
}
/** Bookmarks Toggle button **/
#PersonalToolbar-button .toolbarbutton-icon {
list-style-image: url("toolbar.png") !important;
}
/* Bookmarks vertical */
#personal-bookmarks {
overflow-y: auto; scrollbar-width: none;
}
#PersonalToolbar > #personal-bookmarks > #PlacesToolbar > hbox {
-moz-box-orient: vertical !important;
}
#PersonalToolbar #PlacesToolbarItems {
display: flex;
flex-direction: column;
}
/* Extra buttons adjustments */
#PersonalToolbar > .toolbarbutton-1 {
padding-block: 4px !important;
}
#PersonalToolbar > .toolbarbutton-1 > .toolbarbutton-text {
display: -moz-box !important;
visibility: hidden !important;
text-align: start !important;
}
/* Bookmarks adjustments */
#PersonalToolbar #PlacesToolbarItems > .bookmark-item {
padding-block: 4px !important;
}
/* Bookmarks text left */
#PlacesToolbarItems > .bookmark-item > .toolbarbutton-text {
text-align: start !important;
padding-left: 6px !important;
}
/* Separator adjust Seite */
#PlacesToolbarItems > toolbarseparator {
margin-inline: 5px 7px !important;
}
}
Alles anzeigen