Sidebar wird bei "Drag & Drop" nicht eingeblendet

Foxen666

Problem: Sidebar wird bei "Drag & Drop" nicht eingeblendet

Um die Lesezeichensidebar einzublenden benutze ich seit kurzem nachfolgenden Code. Ich habe das aus Gründen der Unfähigkeit auch nicht selber geschreiben, sondern von hier kopiert https://www.windowspower.de/firefox-83-sid…-hover-oeffnen/

Eigentlich funktoniert das bei meinem Firefox 84.0.1 (64-Bit) sehr gut.

Allerdings kann ich nicht wie früher Tabs per drag&drop in die Lesezeichensidebar ziehen, weil sie sich dann einfach nicht öffnet.

Ich vermisse diese Funktion sehr. Kann mir bitte jemand helfen?

CSS: Code

/* Sidebar per Maushover einblenden (source: https://www.windowspower.de/firefox-83-sidebar-per-hover-oeffnen/)*/


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

#menu_bookmarksSidebar {
display: -moz-box !important;
}

#bookmarks-view-children {
margin-top: -120px !important;
margin-left: -15px !important;
}

.sidebar-placesTreechildren::-moz-tree-separator {
margin: 0px 500px !important;
}

#sidebar-box {
display: block !important;
position: fixed !important;
top: 126px;
bottom: -35px;
width: 0px !important;
overflow-x: hidden !important;
-moz-appearance: none !important;
border: 1px solid transparent !important;
border-left: 0 !important;
opacity: 0 !important;
transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;
z-index: 2 !important;
}

#sidebar-box:hover {
width: 230px !important;
opacity: 1 !important;
transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;
}

#sidebar-splitter {
display: none !important;
}

#sidebar {
display: block !important;
width: 100% !important;
height: 94%;
}
}

Alles anzeigen

Edit von 2002Andreas
Zur Information für Dich:

Zitat

Während es in manchen Foren üblich ist, sich an bestehende Themen dranzuhängen, bitten wir Nutzer in diesem Forum, für ihre Probleme jeweils eigene Themen zu erstellen. Nur so kann jedem Nutzer zielgerichtet und effizient geholfen werden, ohne dass die Probleme eines Nutzers untergehen. Auch könnte eine bereits vorgenommene "Erledigt"-Markierung ansonsten dafür sorgen, dass man nicht die Hilfe erhält, die man sonst erhalten würde, weil nicht jeder Helfer zwingend in Hilfe-Themen liest, welche bereits als erledigt markiert sind.

Deswegen habe ich Deine Frage abgetrennt und in diesen neuen Thread verschoben.

milupo

Der CSS-Code ist nur für die Sidebar. Damit sie sich erst per Hover öffnet. Und da hast du ja, geschrieben, dass der Code funktioniert.

Zitat von Foxen666

Allerdings kann ich nicht wie früher Tabs per drag&drop in die Lesezeichenleiste ziehen, weil sie sich dann einfach nicht öffnet.

Das Ziehen von Tabs in die Lesezeichenleiste funktioniert hier bei mir. Was heißt hier, sie öffnet sich nicht - wieso lässt du dir die Lesezeichenleiste nicht anzeigen?

Foxen666

Oh, sorry. Mein Fehler, ich habs falsch beschrieben. Es geht schon um die Sidebar.

Ich würde gerne Tabs in die Lesezeichensidebar ziehen können, um sie da in die gewünschten Ordner zu legen. Die Sidebar öffnet sich „normal“ wie gesagt einwandfrei. Will ich aber was reinziehen und ablegen, wird sie mir nicht eingeblendet.

Eventuell habe ich inzwischen sogar hier die Antwort gefunden: https://github.com/piroor/treestyletab/issues/2215

“sidebar won't pop-up when I move the cursor to the edge of the window while dragging a Tab.”

die Antwort darauf: “It looks a bug or designed behavior of Firefox itself.”

Das was ich will scheint also nicht möglich zu sein? Ich weiß halt nix, aber hab dafür wenig Ahnung... Zugegeben habe ich gestern Abend noch die absoluten Basics nachgelesen und die Datei userChrome.css erstellt. Apropos: Danke für die Anleitung dazu!

2002Andreas

Zitat von Foxen666

scheint also nicht möglich zu sein?

Hallo und Willkommen hier im Forum. ?

Ich bin mir zwar nicht sicher, aber mit einem CSS Code wird das wohl nicht funktionieren.

Es liegt daran, dass der Fokus vom Mauszeiger dann auf dem Tab zwecks speichern ist.

Wenn du die linke Maustaste gedrückt hälst, und dann an den linken Rand gehst, öffnet sich die Sidebar auch nicht.

Ob sich das Problem mit einem Script lösen lässt kann ich dir leider nicht sagen.

Gedulde dich aber bitte etwas, evtl. fällt einem anderen User ja noch etwas ein dazu.

Foxen666

Danke für die Antwort und die Einschätzung!

Wär wohl ein bisschen zu perfekt gewesen, wenn das mit einem CSS Code geklappt hätte. Meine „ersten Schritte“ mit Scripten waren gestern nämlich nicht so erfolgreich.

Ja, ich gedulde mich und würde mich natürlich freuen wenn jemand noch eine Idee zum Ausprobieren hat! ?

Foxen666

Ich habe noch etwas gegrübelt wie ich das Problem iwie umgehen kann.

Gibt es vielleicht eine Möglichkeit, wie man die Sidebar so steuern kann bzw. vorübergehend festpinnen, sodass sie mal eine bestimmte Zeit geöffnet bleibt.

Ich meine, dass man sie „eine bestimmte Zeit offenhält“, währenddessen die Tabs in verschiedene Unterorder bei den Lesezeichen ziehen kann, und anschließend verhält sie sich wieder „normal“.

2002Andreas

Zitat von Foxen666

eine bestimmte Zeit offenhält

Teste bitte mal:

CSS

/*Sidebar per hover ausfahren*/

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

#menu_bookmarksSidebar {
     display: -moz-box !important;
     }

#bookmarks-view-children {
     margin-top: -120px !important;
     margin-left: -15px !important;
    }

#sidebar-header {
    display: none !important;
    }

#sidebar-search-container {
    display: none !important;
    }

.sidebar-placesTreechildren::-moz-tree-separator {
    margin: 0px 500px !important;
    }

#sidebar-box {
    display: block !important;
    position: fixed!important;
    top: 116px;
    bottom: -35px;
    width: 0px !important;
    overflow-x: hidden !important;
    appearance: none !important;
    border: 1px solid transparent !important;
    border-left: 0 !important;
    opacity: 0 !important;
    transition: width .2s ease-out 3.2s, opacity .2s ease-out 3.2s !important;
    z-index: 2 !important;
    }

#sidebar-box:hover {
    width: 230px !important; 
    opacity: 1 !important;
    transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;
    }

#sidebar-splitter {
    display: none !important;
    }

#sidebar {
    display: block !important;
    width: 100% !important;
    height: 95%;
    }
}

Alles anzeigen

Den Zeitwert kannst du dir in Zeile 38 anpassen:

ease-out 3.2s, opacity .2s ease-out 3.2s

Erst mit der Maus an den linken Rand damit sich die Sidebar öffnet, dann den Tab reinziehen.

Foxen666

Das funktioniert einwandfrei!

Mit dieser einfachen Lösung bzw. Problemvermeidung kann ich denke ich recht gut arbeiten.

Dankeschön!!

2002Andreas

Freut mich wenn ich dir damit helfen konnte, war gern geschehen

geldhuegel

Den Wunsch hatte auch auch schon seit längerem.

2002Andreas: Dein neues CSS lädt die Sidebar links. Es fehlt bei mir die Überschrift und das Suchfeld. Ich verwende folgendes CSS (wahrscheinlich auch von dir):

CSS

/* Sidebar rechte Seite, und nur bei hover sichtbar*/

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

#sidebar-box {
    -moz-appearance: none !important;
    display: block !important;
    position: fixed !important;
    top: 125px;
    right: 0;
    bottom: 0px;
    width: 0px !important;
    overflow-x: hidden !important;
    border: 1px solid transparent !important;
    border-left: 0 !important;
    opacity: 0 !important;
    transition: width .2s ease-out 3.2s, opacity .2s ease-out 3.2s !important;
    z-index: 2 !important;
    }
#sidebar-box:hover {
    width: 350px !important; 
    opacity: 1 !important;
    transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;
    }
#sidebar {
    display: block !important;
    width: 100% !important;
    height: 100%;
    }
}

In Zeile 18 habe ich zweimal ease-out von .2s auf 3.2s geändert und es funktioniert wie gewünscht. 
Spricht etwas grundsätzliches dagegen diesen Code weiter zu verwenden?

Alles anzeigen

2002Andreas

Zitat von geldhuegel

Es fehlt bei mir die Überschrift und das Suchfeld.

Dann müssen diese Einträge wieder entfernt werden aus dem Code:

CSS

#sidebar-splitter {
    display: none !important;
    }
    
#sidebar-header {
    display: none !important;
    }

#sidebar-search-container {
    display: none !important;
    }

Alles anzeigen

und hier dann evtl. die Abstände noch angepasst werden:

CSS

#sidebar-box {
    display: block !important;
    position: fixed!important;
    top: 116px;
    bottom: -35px;

Z.B. so dann:

CSS

/*Sidebar per hover ausfahren*/

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

#menu_bookmarksSidebar {
     display: -moz-box !important;
     }

#bookmarks-view-children {
     margin-top: -20px !important;
     margin-left: -15px !important;
    }


.sidebar-placesTreechildren::-moz-tree-separator {
    margin: 0px 500px !important;
    }

#sidebar-box {
    display: block !important;
    position: fixed!important;
    top: 116px;
    bottom: -15px;
    width: 0px !important;
    overflow-x: hidden !important;
    appearance: none !important;
    border: 1px solid transparent !important;
    border-left: 0 !important;
    opacity: 0 !important;
    transition: width .2s ease-out 3.2s, opacity .2s ease-out 3.2s !important;
    z-index: 2 !important;
    }

#sidebar-box:hover {
    width: 230px !important; 
    opacity: 1 !important;
    transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;
    }
    
#sidebar {
    display: block !important;
    width: 100% !important;
    height: 95%;
    }
}

Alles anzeigen

geldhuegel

Zwischenzeitlich habe ich die beiden Codes mal verglichen und folgende Änderungen vorgenommen:

Entfernt:

CSS

#sidebar-header {
    display: none !important;
    }



#sidebar-search-container {
    display: none !important;
    }

im Abschnitt #sidebar-box eine Zeile mit dem Wert right: 0; eingefügt und noch eine Breite geändert. Meine .CSS sieht nun so aus:

CSS

/*Sidebar per hover ausfahren*/

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

#menu_bookmarksSidebar {
     display: -moz-box !important;
     }

#bookmarks-view-children {
     margin-top: -120px !important;
     margin-left: -15px !important;
    }

.sidebar-placesTreechildren::-moz-tree-separator {
    margin: 0px 500px !important;
    }

#sidebar-box {
    display: block !important;
    position: fixed!important;
    top: 125px;
    right: 0;
    bottom: 0px;
    width: 0px !important;
    overflow-x: hidden !important;
    appearance: none !important;
    border: 1px solid transparent !important;
    border-left: 0 !important;
    opacity: 0 !important;
    transition: width .2s ease-out 3.2s, opacity .2s ease-out 3.2s !important;
    z-index: 2 !important;
    }

#sidebar-box:hover {
    width: 350px !important; 
    opacity: 1 !important;
    transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;
    }

#sidebar-splitter {
    display: none !important;
    }

#sidebar {
    display: block !important;
    width: 100% !important;
    height:100%;
    }
}

Alles anzeigen

Jetzt habe ich auch mit deinem neuen Code die Sidebar wieder rechts mit Titel und Suchfenster. Breite und Abstand sind auch ok.

Mein Tun hat ja nichts mit programmieren zu tun sondern ist nur vergleichen und probieren. Und ein bisschen Logik-Erinnerung an früheres Arbeiten mit CA1, 7 und 11.