Beiträge von Horstmann
-
-
Ja so funktioniert es hier einwandfrei.
Danke !
Keine saubere Lösung, aber die einfachste.
Nur nochmal: speziell die panel Codeteile sind schwer zu kontrollieren und offensichtlich nicht durchgetestet, und das Ganze ist nur ein Test!
Als nächstes kommt noch Einer und will die Suchergebnisse Popups auch umanimiert haben, etc.., ... -
Es tritt hier nur bei Schaltfläche Lesezeichen in der Menüleiste auf.
Wenn ich warte werden die fehlenden später nachgeladen.
Mfg.
EndorDanke; Menüleiste ist hier am Mac nicht testbar, da fällt mir leider nichts zu ein.
Das um teils Sekunden verspätete Auftauchen hatte ich in einigen wenigen Fällen in alten Versionen, aber dann waren alle Einträge betroffen.
Erstmal bin ich aber beruhigt; wenn es in der Lesezeichenleiste und der Schaltfläche Lesezeichenmenü normal funktioniert, ist wohl kein generelles Problem da.
Falls du das aktuellste Script benutzt, und die Verblassenfunktion aktiv hast, probier mal let bm_opacity_null = 0;, und/oder let trenner = 1; oder let trenner = 3; zu setzen, und schauen ob es besser ist.
Und könntest du bitte einen Screenshot vom Menüleisten Popup machen, und zeigen oder beschreiben welche 3 Einträge zuerst geladen werden? Ich hätte da einen Verdacht.
-
Hallo Mira_Belle .
Ich kann das Verhalten bestätigen.
Verhält sich hier genau so wie von Dir beschrieben.
Mfg.
EndorHmm, ich habe diverse Varianten bei mir getestet, auch das von Mira, keine Probleme.
Wenn du mal das vorhergegangene Script von #492 probierst, gibt es das gleiche Problem, dass erst beim zweiten Laden alle Anzeigen sichtbar sind?
Obwohl dir das bestimmt schnell aufgefallen wäre.Eins könntet ihr noch testen, wenn das Problem auftritt: das Popup mit nur 3 Einträgen offenlassen für ein paar Sekunden, schauen ob der Rest lädt.
-
Das Script aus #70 funktioniert hier auch, sorgt bei mir aber dafür, dass gespeicherte Suchanfragen nicht mehr aufrufbar sind. Die Suchfelder reagieren nicht mehr auf die Eingabe.
Danke für die Meldung!
ich habe in #70 das Script grob dafür angepasst, Zeilen 73/74, #PopupSearchAutoComplete ist neu.
-
Mich interessiert halt auch ob was klappt oder nicht nach dem Aufwand, und wie es optimiert werden kann.
Daher ist jedes Feedback von Usern immer ein willkommener Beitrag - ich werd den Code selber eh nicht benutzen - aber natürlich nicht obligatorisch.. -
Ist es nur bei mir so, dass beim Öffnen erst einmal nur bei den oberen drei "Einträgen" die "Werte" angezeigt werden
und erst beim zweiten Mal öffnen, dann bei allen Ordner?Kann ich nicht nachvollziehen; kannste mal das Script mit deinen benutzten Einstellungen einstellen, am besten auch noch die Icons?
-
Die Idee war eher das alles zu reduzieren, ohne jeden Button/Schaltfläche einzeln zu listen; Andreas hat inzwischen ja teils schon vorgegriffen.
Grober Testcode, inkl. Grobversuch mit Haupt Popups für Hamburger, Downloadbutton, Extensionbutton, Overflowkram; Menuleiste nicht testbar am Mac, aller anderer älterer Code muss raus:
JavaScript
Alles anzeigen//Popup Position Finder mit Popup Animationen CSS / universal test 2 //popup_position.uc.js (function () { if (!window.gBrowser) return; document.addEventListener("popupshowing", function (e) { let popup = e.target; if (popup.localName !== "menupopup") return; let anchor = popup.anchorNode; if (!anchor || typeof anchor.screenX === "undefined") return; let flippedH = popup.screenX < anchor.screenX; popup.classList.remove('flipper'); if (flippedH) { popup.classList.add('flipper'); } }); const sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService); const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(` menu > menupopup { --trans_x: -100%; } menu > menupopup.flipper { --trans_x: 100%; } /* --- Hauptmenus --- */ :is(toolbarbutton, menubar > menu) > menupopup { opacity: 0 !important; transform: translateY(-100%) !important; } :is(toolbarbutton, menubar > menu)[open] > menupopup { opacity: 1 !important; transform: translateY(0) !important; transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important; } /* --- Untermenus --- */ :is(toolbarbutton, menubar > menu) menu > menupopup { opacity: 0 !important; transform: translateX(var(--trans_x)) !important; } :is(toolbarbutton, menubar > menu) menu[open] > menupopup { opacity: 1 !important; transform: translateX(0) !important; transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important; } /* --- Panels test --- */ panel { outline: 2px solid red; outline-offset: -2px !important; } panel[mainviewshowing] { outline: 2px solid cyan; outline-offset: -2px !important; } panel { opacity: 0 !important; transform: translateY(-100%) !important; } panel[panelopen], #PopupSearchAutoComplete { /*will-change: transform, opacity !important; transition-property: transform, opacity !important; --animation-easing-function: ease-in-out !important;*/ --panelui-subview-transition-duration: 2s !important; opacity: 1 !important; transform: translateY(0) !important; transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important; } /* panel:not([mainviewshowing]) { opacity: 0 !important; transform: translateY(-100%) !important; } panel[panelopen]:not([mainviewshowing]) { opacity: 1 !important; transform: translateY(0) !important; transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important; } */ `), null, null); sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET); })();
Hab jetzt nicht mehr den ganzen Thread mitverfolgt, aber hier mal als Anregung für die Untermenüs im Hamburger-Popup. Dürfte in der Umsetzung einfacher sein, da ja schon von Haus aus eine (wesentlich kürze) Animation vorgesehen ist:
Guter Fund, hilft weiter an der Stelle, und in anderen ähnlichen Untermenus auch.
Von der Art gibt es Unmengen im Fx Code, da hatte ich mich noch nicht rangetraut. -
Obiges Script funktioniert hier in der Menüleiste überhaupt nicht.
Lesezeichenleiste geht es prima, und auch bei einzelnen Schaltflächen von Scripten.
.....
Alles funktioniert. Es fehlen mir nur die Hamburger Schaltfläche- bzw. das Popup
usw.Ahhh, ok, dann vergessen wir das schnell wieder.
Die Menüleiste Button IDs in Windows könnte jemand rauszufinden, evtl. #menubar-items etc. oder sowas (unmöglich am Mac zu testen) und zu toolbarbutton mit einfügen, aber man kann auch einfach die Liste weiterbenutzen.
Auf die Schnelle würde mir noch sowas einfallen für den Rest, ist aber sehr grob, deckt die Untermenus nicht ab für Hamburger etc., und müsste gründlich getestet werden: -
Frage, kann man das Popup der Hamburger Schaltfläche, des #nav-bar-overflow-button,
der Unifiedextensionsschaltfläche, der Alletabsschaltfläche in der Tableise usw.
auch damit eventuell ansprechen? Weil dann wäre es komplett.
Mfg.
EndorDanke für den Upload!
Und ja, man kann das erweitern, und die Frage nach einer universellen Anpassung habe ich befürchtet.
Ich weiss über die diversen Popups gerade soviel, und habe soviel Zeit damit verbracht die Dinger einzeln umzubauen in der Vergangenheit, dass ich für diesen Zweck lieber die Finger davon lasse.
Ausserdem hab ich das Ganze quasi blind geschrieben - nicht nur auf Mac, sondern auch auf 115esr.
Zum einen müsste man die jeweiligen "Hauptmenu" Popups raussuchen und die Animation anpassen, das deckt eine gewisse Spannbreite an Popupdesigns ab, ist aber machbar und kein Drama mit reinem CSS.
Die Submenus mit der horizontalen Animation sind erstmal auch nicht so schwierig - aber für die automatische rechts/links Anpassung müsste man auch den Javascript Teil anpassen, und das ganze dann wieder sauber verschachteln im CSS.
Was die potentiellen Auswirkungen auf andere Popups betrifft, Kontext etc., ist nochmal ein anderes Thema.Oder man sucht die existierenden FX Animation mal durch, evtl. kann man die ja überschreiben wo vorhanden - und zugänglich.
Wenn jemand weiter daran basteln möchte, evtl. kann sowas als mehr generell gefasster Anfang dienen, könnte zumindest für die Basis-Button Popups klappen, und dafür evtl. sogar den ganzen Code von oben ersetzen:
JavaScript
Alles anzeigen//Popup Position Finder mit Popup Animationen CSS / universal test 1 //popup_position.uc.js (function () { if (!window.gBrowser) return; document.addEventListener("popupshowing", function (e) { let popup = e.target; if (popup.localName !== "menupopup") return; let anchor = popup.anchorNode; if (!anchor || typeof anchor.screenX === "undefined") return; let flippedH = popup.screenX < anchor.screenX; popup.classList.remove('flipper'); if (flippedH) { popup.classList.add('flipper'); } }); const sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService); const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(` menu > menupopup { --trans_x: -100%; } menu > menupopup.flipper { --trans_x: 100%; } /* --- Hauptmenus --- */ toolbarbutton > menupopup { opacity: 0 !important; transform: translateY(-100%) !important; } toolbarbutton[open] > menupopup { opacity: 1 !important; transform: translateY(0) !important; transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important; } /* --- Untermenus --- */ toolbarbutton menu > menupopup { opacity: 0 !important; transform: translateX(var(--trans_x)) !important; /*margin-top: -7px !important;*/ /*margin-inline: 16px !important;*/ } toolbarbutton menu[open] > menupopup { opacity: 1 !important; transform: translateX(0) !important; transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important; } `), null, null); sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET); })();
-
Script funktioniert
Prima, danke für die Rückmeldung!
Ich habe den Header mal genauer geschrieben, falls du das hochladen möchtest; nur den Link zum Posting #51 schafft mein Mac gerade nicht sauber, wohl zu viele Leer/Sonderzeichen, falls du den noch hinzufügen möchtest. -
Die ganze Arbeit
Danke!
Aber ich seh das ja als Mannschaftssport, und deine Beiträge und die wichtige Korrektur von Mitleser für mein kleines JS haben das Ganze um die Kurve gebracht.
Hoffe das Ganze funktioniert auch noch nach weiterem Benutzen oder Testen, Popups sind etwas temperamentvoll und sehr komplex geregelt in Fx, ist halt schon eine ernsthafte App.
Den CSS Code könnte man sicher mit Nesting und parent IDs deutlich straffen, aber lieber einfach anfangen.Coole Sache, funktioniert richtig gut und ich bin Stolz darauf eine faule Socke zu sein...
Danke für's Testen!
-
Sodele, mal was zum Testen für geneigte User, basierend auf dem Script von Mitleser , für die faulen Socken die alles in Einem brauchen.
Die optionalen Submenu Abstände (margins) sind vorhanden aber noch auskommentiert, benutzen nach Wunsch; die Idee ist dass die hier im Thread erwähnten Anpassungen in einem Aufguss funktionieren sollten.
Bitte alles andere CSS oder Scripts von zuvor deaktivieren, sonst gibt's Überschneidungen.JavaScript
Alles anzeigen//Popup Position Finder mit Popup Animationen CSS / RC 1 //popup_position.uc.js (function () { if (!window.gBrowser) return; document.addEventListener("popupshowing", function (e) { let popup = e.target; if (popup.localName !== "menupopup") return; let anchor = popup.anchorNode; if (!anchor || typeof anchor.screenX === "undefined") return; let flippedH = popup.screenX < anchor.screenX; popup.classList.remove('flipper'); if (flippedH) { popup.classList.add('flipper'); } }); const sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService); const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(` /*** --- Menu Popup Animation Anpassung Menuleiste, Lesezeichenmenu, Lesezeichenleiste --- ***/ menu > menupopup { --trans_x: -100%; } menu > menupopup.flipper { --trans_x: 100%; } /* --- Hauptmenus --- */ :is( #file-menu, #edit-menu, #view-menu, #history-menu, #bookmarksMenu, #tools-menu, #helpMenu, #AppMenuButton, #bookmarks-menu-button) > menupopup { opacity: 0 !important; transform: translateY(-100%) !important; } :is(#file-menu, #edit-menu, #view-menu, #history-menu, #bookmarksMenu, #tools-menu, #helpMenu, #AppMenuButton, #bookmarks-menu-button)[open] > menupopup { opacity: 1 !important; transform: translateY(0) !important; transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out !important; } /* --- Untermenus --- */ :is(#file-menu, #edit-menu, #view-menu, #history-menu, #bookmarksMenu, #tools-menu, #helpMenu, #AppMenuButton, #bookmarks-menu-button) menu > menupopup { opacity: 0 !important; transform: translateX(var(--trans_x)) !important; /*margin-top: -7px !important;*/ /*margin-inline: 16px !important;*/ } :is(#file-menu, #edit-menu, #view-menu, #history-menu, #bookmarksMenu, #tools-menu, #helpMenu, #AppMenuButton, #bookmarks-menu-button) menu[open] > menupopup { opacity: 1 !important; transform: translateX(0) !important; transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out !important; } /* --- Lesezeichenleiste --- */ #PlacesToolbar .bookmark-item > menupopup { opacity: 0 !important; transform: translateY(-100%) !important; } #PlacesToolbar .bookmark-item[open] > menupopup { opacity: 1 !important; transform: translateY(0) !important; transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important; } /* --- Lesezeichenleiste Untermenus --- */ #PlacesToolbar .bookmark-item menu > menupopup { opacity: 0 !important; transform: translateX(var(--trans_x)) !important; /*margin-top: -7px !important;*/ /*margin-inline: 16px !important;*/ } #PlacesToolbar .bookmark-item menu[open] > menupopup { opacity: 1 !important; transform: translateX(0) !important; transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important; } `), null, null); sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET); })();
-
Beispiel Lesezeichenpopups:
Läuft! Das will-change habe ich auskommentiert; ohne läuft es auf meinem Recher einfach besser. Nette Spielerei, mal sehn' wie lange es hält.
Danke für's Testen, und das Einpflegen in ein Script.
will-change scheint tatsächlich unnötig zu sein, irgendwann in meinem Testverlauf hat das mal einen Unterschied gemacht.
-
Die Positionierung funktioniert ab dem zweiten Öffnen eines Popups.
Moin, das könnte an popupshown statt popupshowing liegen.
Unglaublich, das scheint zu klappen, Danke!!!
Ich habe mir den Wolf gesucht, und es ist so einfach, wie findest du nur immer diese Lösungen?Also, das angepasste Script, für jeden der/die es testen möchte:
JavaScript
Alles anzeigen//popup position finder //popup_position.uc.js (function () { if (!window.gBrowser) return; document.addEventListener("popupshowing", function (e) { let popup = e.target; if (popup.localName !== "menupopup") return; let anchor = popup.anchorNode; if (!anchor || typeof anchor.screenX === "undefined") return; let flippedH = popup.screenX < anchor.screenX; popup.classList.remove('flipper'); if (flippedH) { popup.classList.add('flipper'); } }); })();
Im CSS wird Folgendes hinzugefügt, wie in #37 schon benutzt:
X:
Die Einträge für transform: translateX(0) !important; bleiben genau so;
Die Einträge für transform: translateX(-100%) !important; werden geändert zu transform: translateX(var(--trans_x)) !important; .Y:
transform: translateY(... wird nicht verändert.Beispiel Lesezeichenpopups:
CSS
Alles anzeigenmenu > menupopup { --trans_x: -100%; } menu > menupopup.flipper { --trans_x: 100%; } #PlacesToolbar .bookmark-item > menupopup { will-change: transform, opacity !important; opacity: 0 !important; transform: translateY(-100%) !important; } #PlacesToolbar .bookmark-item[open] > menupopup { opacity: 1 !important; transform: translateY(0) !important; transition: transform 0.9s ease, opacity 1.9s ease !important; } #PlacesToolbar .bookmark-item menu > menupopup { will-change: transform, opacity !important; opacity: 0 !important; /* transform: translateX(-100%) !important; */ transform: translateX(var(--trans_x)) !important; } #PlacesToolbar .bookmark-item menu[open] > menupopup { opacity: 1 !important; transform: translateX(0) !important; transition: transform 0.9s ease, opacity 1.9s ease !important; }
-
Hat etwas gedauert, denke wir können das noch hier reinquetschen?
Damit werden alle Lesezeichen Menus von oben nach unten animiert; der zweite, auskommentierte Teil wäre dann eine Änderung nur für Submenus, und links nach rechts öffnen, Zeit-Werte anpassen nach Belieben.
translateX(100%) wäre dann wieder rechts nach links.Könnte klappen:
CSS
Alles anzeigen#PlacesToolbar .bookmark-item > menupopup { will-change: transform, opacity !important; opacity: 0 !important; transform: translateY(-100%) !important; } #PlacesToolbar .bookmark-item[open] > menupopup { opacity: 1 !important; transform: translateY(0) !important; transition: transform 0.9s ease, opacity 1.9s ease !important; } /* #PlacesToolbar .bookmark-item menu > menupopup { will-change: transform, opacity !important; opacity: 0 !important; transform: translateX(-100%) !important; } #PlacesToolbar .bookmark-item menu[open] > menupopup { opacity: 1 !important; transform: translateX(0) !important; transition: transform 0.9s ease, opacity 1.9s ease !important; } */
Für die Submenus könnte man stattdessen auch eine andere horizontale Transformation benutzen:
CSS
Alles anzeigen#PlacesToolbar .bookmark-item menu > menupopup { will-change: transform, opacity !important; opacity: 0 !important; transform: scaleX(0) !important; } #PlacesToolbar .bookmark-item menu[open] > menupopup { opacity: 1 !important; transform: scaleX(100%) !important; transition: transform 0.9s ease, opacity 1.9s ease !important; }
der hatteImmer gerne, prima das es klappt soweit!
-
So geht es!
Schweet!
Komplett könnte sowas klappen; weitere IDs wie für app menu oder wie das Teufelszeug heisst in Windows könnte man einpflegen.
Das lässt sich bestimmt auch weiter kürzen, aber wie erwähnt ohne Zugriff auf die Menüleiste am Mac ist das das Ende hier.
Bitte mal kurz antesten.CSS
Alles anzeigen/* --- Flexible Popup Position ??? fuer zusaetzliches Javascript --- */ menu > menupopup { --trans_x: -100%; } menu > menupopup.flipper { --trans_x: 100%; } /* --- Hauptmenu --- */ :is( #file-menu, #edit-menu, #view-menu , #history-menu, #bookmarksMenu, #tools-menu, #helpMenu) > menupopup { will-change: transform, opacity !important; opacity: 0 !important; transform: translateY(-100%) !important; } :is(#file-menu, #edit-menu, #view-menu , #history-menu, #bookmarksMenu, #tools-menu, #helpMenu)[open] > menupopup { opacity: 1 !important; transform: translateY(0) !important; transition: transform 0.8s ease, opacity 0.3s ease !important; } /* --- Untermenus --- */ :is(#file-menu, #edit-menu, #view-menu , #history-menu, #bookmarksMenu, #tools-menu, #helpMenu) menu > menupopup { will-change: transform, opacity !important; opacity: 0 !important; transform: translateX(var(--trans_x)) !important; } :is(#file-menu, #edit-menu, #view-menu , #history-menu, #bookmarksMenu, #tools-menu, #helpMenu) menu[open] > menupopup { opacity: 1 !important; transform: translateX(0) !important; transition: transform 0.8s ease, opacity 0.3s ease !important; }
Aber, und evtl. können die Javascript Leute hier was dazu beitragen:
Popups öffnen sich je nach Position im Monitor/Browserfenster mal rechts, mal links vom übergeordneten Popup Fenster, je nachdem wo Platz ist.
Mit dem obigen CSS funktioniert die horizontale Animation nur von links nach rechts, idealerweise würde die Animation die Richtung wechseln, basiert auf der horizontalen Position des Popups.
Was nicht so einfach ist, weil nur das Hauptpopup eine via CSS zugänglich definierte Position hat; s. hier oder hier.Der CSS Code oben hat eine Provision für den Fall, basierend auf diesem sehr groben JS Script (ohne das Script funktioniert der CSS Code ganz normal).
Die Positionierung funktioniert manchmal, oft aber nicht.
Edit: Die Positionierung funktioniert ab dem zweiten Öffnen eines Popups.
Warnung: dieses JS ist modifiziertes AI, konnte sonst nix finden.JavaScript
Alles anzeigen//popup position finder //pop_position.uc.js (function () { if (!window.gBrowser) return; document.addEventListener("popupshown", function (e) { let popup = e.target; if (popup.localName !== "menupopup") return; let anchor = popup.anchorNode; if (!anchor || typeof anchor.screenX === "undefined") return; let flippedH = popup.screenX < anchor.screenX; if (flippedH) { popup.classList.add('flipper'); }; }); })();
-
Probier mal #bookmarksMenu menupopup ==> #bookmarksMenu > menupopup
Also so:CSS
Alles anzeigen/* Lesezeichen */ #bookmarksMenu > menupopup { will-change: transform, opacity !important; opacity: 0 !important; transform: translateY(-100%) !important; } #bookmarksMenu[open] menupopup { opacity: 1 !important; transform: translateY(0) !important; transition: transform 0.8s ease, opacity 0.3s ease !important; } /* ----------------------------------------------------------------------- */ #bookmarksMenu menu > menupopup { will-change: transform, opacity !important; opacity: 0 !important; transform: translateX(-100%) !important; } #bookmarksMenu menu[open] > menupopup { opacity: 1 !important; transform: translateX(0) !important; transition: transform 0.8s ease, opacity 0.3s ease !important; } /* ----------------------------------------------------------------------- */
Bis auf Ansicht und die Lesezeichen haben die anderen Menüs keine solchen Untermenüs.
Chronik -> Kürzlich geschlossene Fenster/Tabs
Extras -> Browser-Werkzeuge
Mal auf das #bookmarksMenu warten; wenn das klappt mach ich einen Komplettvorschlag.
-
So ist es schon besser und dass die Untermenüs eben auch von links nach rechts aufscrollen.Aber nur bei den Untermenus von #view-menu, ist das so gewollt?
-
Aaaaalso:
Mal nur für eines komplett, das alte CSS dafür erstmal entfernen; es wird nur die ID für das Hauptmenü Bearbeiten benutzt.
Die ersten beiden Codeblöcke sind für das erste Popup, was wir schon hatten, aber mit > ; die letzten beiden Codeblöcke sind für die Untermenüs.CSS
Alles anzeigen#edit-menu > menupopup { will-change: transform, opacity !important; opacity: 0 !important; transform: translateY(-100%) !important; } #edit-menu[open] > menupopup { opacity: 1 !important; transform: translateY(0) !important; transition: transform 1.5s ease, opacity 1.5s ease !important; } #edit-menu menu > menupopup { will-change: transform, opacity !important; opacity: 0 !important; transform: translateX(-100%) !important; } #edit-menu menu[open] > menupopup { opacity: 1 !important; transform: translateX(0) !important; transition: transform 1.5s ease, opacity 1.5s ease !important; }