Beiträge von Mira_Belle

Mira_Belle

Bei mir leider auch.
So sollte es aussehen:

Tut es aber nicht mehr.

CSS

@-moz-document url-prefix("chrome://browser/content/aboutDialog.xhtml")
{
  #updateIcon {
    display: none !important;
  }

  /*---------------------------------------------------*/
  /****       Anpassungen an dem About:Dialog       ****/
  /*---------------------------------------------------*/

  #aboutDialog {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
  }

  #aboutDialog vbox,
	#aboutDialogContainer hbox,
	#clientBox vbox,
	#contributeDesc > label:nth-child(1),
	#contributeDesc > label:nth-child(2),
	#releasenotes,
	#trademark,
	#updateButton,
	label.bottom-link:nth-child(3),
	[href='about:credits'],
	[href='about:license'],
	[href='about:rights'],
	[href='https://www.mozilla.org/?utm_source=firefox-browser&utm_medium=firefox-desktop&utm_campaign=about-dialog']
  {
    font-size: 15px !important;
  }

  /*    Das ist Links das FF-Logo */

  #leftBox {
    appearance: none !important;
    border-radius: 10px !important;
    /*		background-image: url("../image/index_test.png") !important;    */
    background-image: url("../image/mozilla-firefox-logo.png") !important;
    background-repeat: no-repeat !important;
    background-color: var(--uc-color-black-light) !important;
    background-position: center center !important;
    background-size: 225px !important;
    min-width: 225px !important;
    margin-top: 80px !important;
  }

  /*    Das ist Rechts die Box    */

  #rightBox::before {
    content: "Firefox Browser" !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    color: #fff582 !important;
    text-shadow: 4px 4px #ff0000 !important;
    margin-left: 50px !important;
  }

  #rightBox {
    background-image: none !important;
    padding-top: 1px !important;
    margin-top: 1px !important;
    margin-left: 10px !important;
    margin-right: -7px !important;
  }

  #aboutDialog,
  #bottomBox,
  #clientBox {
    background-color: var(--uc-color-black-light) !important;
  }

  #icons.icon {
    margin: 10px !important;
  }

  /*    Update-Check ohne Erwartung ;)*/
  /*    Blendet Original-Animationen aus!*/

  #icons > .update-throbber {
    /*		visibility: hidden !important; */
    display: none !important;
  }

  /*	#updateDeck #checkingForUpdates > label {   */
  [data-l10n-id="update-checkingForUpdates"] {
    appearance: none !important;
    border-radius: 10px !important;
    background-image: url("../image/sample_3.gif") !important;
    background-repeat: no-repeat !important;
    background-color: var(--uc-color-black-light) !important;
    background-position: -10px center !important;
    background-size: 36px !important;
    color: #eee8aa !important;
    font-size: 1.5em !important;
    font-weight: 400 !important;
    min-height: 28px !important;
    margin-top: 0 !important;
    margin-right: -10px !important;
    margin-bottom: 12px !important;
    /*		margin-left: 20px !important;   */
    margin-left: 75px !important;
    padding-top: 2px !important;
    padding-right: 25px !important;
    padding-bottom: 0 !important;
    padding-left: 45px !important;
  }

  /*    Blendet Original-Icon aus!*/

  #icons > .noUpdatesFound {
    display: none !important;
  }

  /*	#noUpdatesFound > label:nth-child(1) {  */
  [data-l10n-id="update-noUpdatesFound"] {
    appearance: none !important;
    border-radius: 10px !important;
    background-image: url("../image/tick_2.png") !important;
    background-repeat: no-repeat !important;
    background-color: var(--uc-color-black-light) !important;
    background-position: 0 center !important;
    background-size: 36px !important;
    color: ar(--uc-color-orange-normal) !important;
    font-size: 1.5em !important;
    font-weight: 400 !important;
    min-height: 28px !important;
    margin-top: 0 !important;
    margin-right: -10px !important;
    margin-bottom: 12px !important;
    /*		margin-left: 20px !important;   */
    margin-left: 75px !important;
    padding-top: 2px !important;
    padding-right: 25px !important;
    padding-bottom: 0 !important;
    padding-left: 45px !important;
  }

  /*  Das muss noch gecheckt werden   */

  #downloadAndInstallButton {
    appearance: none !important;
    border-radius: 10px !important;
    /*	background-image:  url("./image/herz.png") !important;		*/
    background-repeat: no-repeat !important;
    background-color: var(--uc-color-black-light) !important;
    background-position: 0% center !important;
    background-size: 16px !important;
    color: var(--uc-color-white-dark) !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 10px !important;
    padding-top: 0 !important;
    padding-right: 10px !important;
    padding-bottom: 2px !important;
    padding-left: 10px !important;
  }

  #downloadAndInstallButton:hover {
    background: #404040 !important;
    background-position: 12px 4px !important;
    color: var(--uc-color-white-dark) !important;
  }

  #updateButton {
    appearance: none !important;
    border-radius: 10px !important;
    background-image: url("../image/herz.png") !important;
    background-repeat: no-repeat !important;
    background-color: var(--uc-color-black-light) !important;
    background-position: 0% center !important;
    background-size: 16px !important;
    color: var(--uc-color-white-dark) !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 10px !important;
    padding-top: 0 !important;
    padding-right: 10px !important;
    padding-bottom: 2px !important;
    padding-left: 10px !important;
    border-color: var(--uc-color-white-dark) !important;
    border-style: solid !important;
    border-width: 2px !important;
  }
  #updateButton:hover {
    background: #404040 !important;
    background-position: 12px 4px !important;
    color: var(--uc-color-white-dark) !important;
    border-color: ar(--uc-color-orange-normal) !important;
  }
  /*    Dazugehörige default-GFX is im Weg...*/

  #icons > .apply {
    display: none !important;
  }

  /*	Versionsanzeige		*/

  #version.update::before {
    content: "Meine derzeitige Firefox-Version ist: ";
    font-size: 18px !important;
    font-weight: normal !important;
    color: ar(--uc-color-orange-normal) !important;
    margin-right: 5px !important;
    margin-left: -65px !important;
  }

  #version {
    margin-top: 10px !important;
    margin-left: 50px !important;
    margin-right: -40px !important;
    font-size: 22px !important;
    font-weight: bold !important;
    color: #ff64ff !important;
  }

  /*     ohne Unterstrich	*/

  #releasenotes,	  										/*     Neue Funktionen und Änderungen	*/  
    #submit-feedback,	 									/*     Feedback senden	*/ 
    [href='https://www.mozilla.org/?utm_source=firefox-browser&utm_medium=firefox-desktop&utm_campaign=about-dialog'],
    [href='about:credits'],	  								/*     globalen Comunity	*/  
    #contributeDesc > label:nth-child(1),	  				/*     Spenden Sie	*/  
    #contributeDesc > label:nth-child(2),	  				/*     machen Sie mit!	*/  
    [href='about:license'],	  								/*     Information zur Lizensierung	*/  
    [href='about:rights'], 	  								/*     Endanwenderrechte	*/  
    label.bottom-link:nth-child(3)	  						/*     Datenschutzbestimmungen	*/ {
    text-decoration: none !important;
  }

  description.text-blurb:nth-child(3) > label:nth-child(1) {
    text-decoration: none !important;
  }

  /*	Text	*/

  .text-blurb {
    font-size: 15px !important;
    color: var(--uc-color-white-dark) !important;
    padding-right: 1px !important;
  }

  /*     Neue Funktionen und Änderungen	*/

  #releasenotes {
    appearance: none !important;
    background: var(--uc-color-black-light) !important;
    color: var(--uc-color-white-dark) !important;
    margin-top: 2px !important;
    margin-left: 0px !important;
    top: 35px !important;
    left: -330px !important;
    min-width: 250px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 2px !important;
    border-color: var(--uc-color-white-dark) !important;
    border-style: solid !important;
    border-width: 2px !important;

    border-radius: 8px !important;
    position: relative;
  }

  #releasenotes:hover {
    background: #404040 !important;
    color: var(--uc-color-white-dark) !important;
    border-color: ar(--uc-color-orange-normal) !important;
  }

  description.text-blurb:nth-child(3) {
    margin-top: 15px !important;
    margin-left: 59px !important;
    margin-bottom: 15px !important;
  }

  /*     Firefox-Hilfe	*/

  description.text-blurb:nth-child(3) > label:nth-child(1) {
    appearance: none !important;
    background: var(--uc-color-black-light) !important;
    color: var(--uc-color-white-dark) !important;
    margin-left: 10px !important;
    margin-top: 35px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 2px !important;
    border-color: var(--uc-color-white-dark) !important;
    border-style: solid !important;
    border-width: 2px !important;
    background-position: 12px 4px !important;
    border-radius: 8px !important;
  }
  description.text-blurb:nth-child(3) > label:nth-child(1):hover {
    background: #404040 !important;
    background-position: 12px 4px !important;
    color: var(--uc-color-white-dark) !important;
    border-color: ar(--uc-color-orange-normal) !important;
  }

  /*     Feedback senden	*/

  #submit-feedback {
    appearance: none !important;
    background: var(--uc-color-black-light) !important;
    color: var(--uc-color-white-dark) !important;
    margin-left: 10px !important;
    margin-top: 35px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 2px !important;
    border-color: var(--uc-color-white-dark) !important;
    border-style: solid !important;
    border-width: 2px !important;
    background-position: 12px 4px !important;
    border-radius: 8px !important;
  }
  #submit-feedback:hover {
    background: #404040 !important;
    background-position: 12px 4px !important;
    color: var(--uc-color-white-dark) !important;
    border-color: ar(--uc-color-orange-normal) !important;
  }

  /*     Mozilla	*/

  [href='https://www.mozilla.org/?utm_source=firefox-browser&utm_medium=firefox-desktop&utm_campaign=about-dialog']
  {
    appearance: none !important;
    background: var(--uc-color-black-light) !important;
    color: var(--uc-color-white-dark) !important;
    margin-left: 1px !important;
    margin-right: 1px !important;
    margin-top: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 1px !important;
    border-color: var(--uc-color-white-dark) !important;
    border-style: solid !important;
    border-width: 2px !important;
    background-position: 12px 4px !important;
    border-radius: 8px !important;
  }

  [href='https://www.mozilla.org/?utm_source=firefox-browser&utm_medium=firefox-desktop&utm_campaign=about-dialog']:hover
  {
    background: #404040 !important;
    background-position: 12px 4px !important;
    color: var(--uc-color-white-dark) !important;
    border-color: ar(--uc-color-orange-normal) !important;
  }

  /*     globalen Comunity	*/

  [href="about:credits"] {
    appearance: none !important;
    background: var(--uc-color-black-light) !important;
    color: var(--uc-color-white-dark) !important;
    margin-left: 1px !important;
    margin-right: 1px !important;
    margin-top: 0px !important;
    margin-bottom: 5px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 1px !important;
    border-color: var(--uc-color-white-dark) !important;
    border-style: solid !important;
    border-width: 2px !important;
    background-position: 12px 4px !important;
    border-radius: 8px !important;
  }

  [href="about:credits"]:hover {
    background: #404040 !important;
    background-position: 12px 4px !important;
    color: var(--uc-color-white-dark) !important;
    border-color: ar(--uc-color-orange-normal) !important;
  }

  /*    Hinter dem Komma einen Zeilenumbruch erzwingen	*/

  #detailsBox > description#communityDesc {
    max-width: 450px !important;
  }

  /*     Spenden Sie	*/

  #contributeDesc > label:nth-child(1) {
    appearance: none !important;
    background: var(--uc-color-black-light) !important;
    color: var(--uc-color-white-dark) !important;
    margin-left: 1px !important;
    margin-right: 1px !important;
    margin-top: 2px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 2px !important;
    border-color: var(--uc-color-white-dark) !important;
    border-style: solid !important;
    border-width: 2px !important;
    background-position: 12px 4px !important;
    border-radius: 8px !important;
  }

  #contributeDesc > label:nth-child(1):hover {
    background: #404040 !important;
    background-position: 12px 4px !important;
    color: var(--uc-color-white-dark) !important;
    border-color: ar(--uc-color-orange-normal) !important;
  }

  /*     machen Sie mit!	*/

  #contributeDesc > label:nth-child(2) {
    appearance: none !important;
    background: var(--uc-color-black-light) !important;
    color: var(--uc-color-white-dark) !important;
    margin-left: 1px !important;
    margin-right: 1px !important;
    margin-top: 2px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 2px !important;
    border-color: var(--uc-color-white-dark) !important;
    border-style: solid !important;
    border-width: 2px !important;
    background-position: 12px 4px !important;
    border-radius: 8px !important;
  }

  #contributeDesc > label:nth-child(2):hover {
    background: #404040 !important;
    background-position: 12px 4px !important;
    color: var(--uc-color-white-dark) !important;
    border-color: ar(--uc-color-orange-normal) !important;
  }

  /*     Information zur Lizensierung	*/

  [href="about:license"] {
    appearance: none !important;
    background: var(--uc-color-black-light) !important;
    color: var(--uc-color-white-dark) !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    margin-top: 1px !important;
    margin-bottom: 20px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 2px !important;
    border-color: var(--uc-color-white-dark) !important;
    border-style: solid !important;
    border-width: 2px !important;
    background-position: 12px 4px !important;
    border-radius: 8px !important;
  }

  [href="about:license"]:hover {
    background: #404040 !important;
    background-position: 12px 4px !important;
    color: var(--uc-color-white-dark) !important;
    border-color: ar(--uc-color-orange-normal) !important;
  }

  /*     Endanwenderrechte	*/

  [href="about:rights"] {
    appearance: none !important;
    background: var(--uc-color-black-light) !important;
    color: var(--uc-color-white-dark) !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    margin-top: 1px !important;
    margin-bottom: 20px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 2px !important;
    border-color: var(--uc-color-white-dark) !important;
    border-style: solid !important;
    border-width: 2px !important;
    background-position: 12px 4px !important;
    border-radius: 8px !important;
  }

  [href="about:rights"]:hover {
    background: #404040 !important;
    background-position: 12px 4px !important;
    color: var(--uc-color-white-dark) !important;
    border-color: ar(--uc-color-orange-normal) !important;
  }

  /*     Datenschutzbestimmungen	*/

  label.bottom-link:nth-child(3) {
    appearance: none !important;
    background: var(--uc-color-black-light) !important;
    color: var(--uc-color-white-dark) !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    margin-top: 1px !important;
    margin-bottom: 20px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 2px !important;
    border-color: var(--uc-color-white-dark) !important;
    border-style: solid !important;
    border-width: 2px !important;
    background-position: 12px 4px !important;
    border-radius: 8px !important;
  }

  label.bottom-link:nth-child(3):hover {
    background: #404040 !important;
    background-position: 12px 4px !important;
    color: var(--uc-color-white-dark) !important;
    border-color: ar(--uc-color-orange-normal) !important;
  }

  /*    Text ganz unten, Logo und Warenzeichen	*/

  #trademark {
    padding-top: 10px !important;
    text-align: center !important;
    color: var(--uc-color-white-dark) !important;
    margin-block: 15px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  /*    Den Text "design by me ©" will ich ganz unten rechts inne Ecke.... */

  #bottomBox::after {
    display: flex !important;
    content: "design by me ©" !important;
    font-size: 11px !important;
    margin-left: 850px !important;
    color: var(--uc-color-white-dark) !important;
    padding-left: 12px !important;
  }

  #aboutDialog {
    margin-bottom: 0px !important;
  }
}

Alles anzeigen

Mira_Belle

OK, wir wollen es ja nicht zu umfassend und kompliziert machen!
Da ich auch andere Quellen nutze, z.B. hier das Board aber auch MDN oder auch Quellen fernab von Europa,
und den Code mehr oder weniger immer irgendwie bearbeite, wäre es meiner Meinung echt nicht Zielführend
im Anhang dann eine Latte an Quellen zu nennen!

Ich werde im Skript und auch in den Beiträgen in Zukunft darauf hinweisen, dass KI im Spiel war.

Und ich meine, es ist doch keinem geholfen, wenn ich drunterschreibe:

Zitat

Teile oder einzelne Zeilen des Codes stammen von:
"https://www.perplexity.ai/",
"https://chat.mistral.ai/chat",
"https://chatgpt.com/",
"https://duckduckgo.com/?q=DuckDuckGo+…a=chat&duckai=1"
oder gar "https://lmarena.ai/de".
Des Weiteren habe ich auf MDN & javascript.info recherchiert und es könnten Codefragmente aus anderen Skripten von
"https://github.com/ywzhaiqi/userChromeJS",
"https://github.com/ardiman/userChrome.js",
"https://github.com/alice0775/userChrome.js",
"https://github.com/Endor8/userChrome.js",
"https://github.com/Aris-t2/CustomJSforFx/tree/master/scripts"
oder
"https://github.com/benzBrake/Fire…er/userChromeJS"
enthalten sein.

Alles anzeigen

Und eine kleine Anmerkung von mir.
Es ist schon sehr interessant, dass das eine oder andere Skript von hier
auf "https://u6.getuploader.com/script/" landet.
Die können gar nicht so schlecht sein.

Mira_Belle

Zitat von Sören Hentzschel

Es soll einfach klar sein, wenn KI involviert war.

Das habe ich, so hoffe ich, zu Deiner Zufriedenheit umgesetzt.

Zitat von Sören Hentzschel

Die Nennung des genutzten Anbieters halte ich für sinnvoll.

Mh, das wiederum ist bei "https://lmarena.ai/de" schwierig, da im Battle immer zwei KI's zum
Einsatz kommen und man nie weiß welche.
Aber z.Z. nutze ich meist "https://www.perplexity.ai/" und "https://chat.mistral.ai/chat"
und auch hier nutze ich beide oft parallel und mixe den Code, je nachdem, was ich für besser halte
und/oder was besser funktioniert!
Also so wirklich kann ich es nicht immer "sagen"!

Ich hoffe, es reicht, wenn ich dazu schreibe, dass KI zum Einsatz kam.

Mira_Belle

Zitat von Horstmann

Nuja.

Oh sorry!
Ich habe Dich total falsch verstanden
Dachte Du meinst es so, wie Mitlesers Leiste funktioniert.

Mira_Belle

Auch Dir ein Danke, lieber Sören.

Und allen anderen, die eventuell noch kommen werden auch.

Mira_Belle

Hehe, Danke, lieber Andreas.

Mira_Belle

Zitat von Horstmann

Oder etwa doch?

Mira_Belle

Zitat von Horstmann

Sorry für das hin und her, aber manchmal braucht's ein paar Schritte mehr bis es passt.

Wem "sagst" Du das? Ist doch bei all meinen JS nicht anders!
Da klappt so manches nicht von Anfang an und es bedarf mehrere Anläufe.

Zitat von Horstmann

So sollte hoffentlich auch die Animation im Anpassenfenster klappen, .....

Das klappte schon vorher sehr gut.
Du hast das CSS arg geändert, jedoch mag mein Auge in der Ausführung des Codes keine Veränderungen wahrnehmen.
Aber sehr wahrscheinlich ist nun der Code robuster und sauberer,
aber was weiß ich schon? Mit solchem komplexen CSS komme ich einfach nicht zurecht.
Mal was per CSS verschieben, ausblenden oder einfach eine Farbe zu weisen, das bekomme ich noch hin,
aber dann hört es auch schon auf.

Mira_Belle

Zitat von Horstmann

... daher würde ich den aktualisierten Code komplett übernehmen ...

OK, wird gemacht. Danke.

Mira_Belle

Zitat von Horstmann

Wenn du in Zeile 113 die outline aktivierst, siehst du was passiert, der Container(?) #flybox_new behält Grösse und Position, da ja der Inhalt #new_flybar nur verschoben wird.

Ich sehe und glaube zu verstehen.

Zitat von Horstmann

Mit display:none - oder in Zeile 141 width aktivieren als Test - wird die Grösse vom Container mit veringert.

Ja, auch gesehen, aber dann (display:none) ist der schöne Effekt weg (sanftes ein- und ausblenden)

Zitat von Horstmann

Bei Benutzung no width würde man dann translate damit ersetzen, wenn man das konsequent umsetzen würde.

Das wiederum kapiere ich nicht! no width ?

Ich werde die Version nutzen, die Du ursprünglich gepostest hat.
Die funktioniert wunderbar und ich bin happy,
also noch einmal vielen lieben Dank dafür.

Mira_Belle

Zitat von Horstmann

Evtl. testen:

Perfekt

Danke.

Mira_Belle

Irgendwie müsste da was mit "#flybox_new" gehen.
Wenn ausgeblendet, "#flybox_new" => display: none;

aus #137?
Äh, das hier:

JavaScript

// New switchable toolbar rechts/links – Version mit gleitendem Slide‑In/Out‑Effekt

(function() {
  if (!window.gBrowser)
    return;

  const
  // ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■    
    id           = 'NewToolbar_fly_button',
    label        = 'Toggle New Toolbar',
    tooltiptext  = 'Toggle New toolbar',
    // Icon-------------------------------------------------------
    icon         = 'Dock Side Right.svg',   // Icon-Dateiname
    iconPath     = '/chrome/icons/',
    tbWidth      = '34px',                  // Sichtbare Leistenbreite
    isPosH       = 0,                       // 0 = rechts, 1 = links
    isPosV       = '30%',                   // vertikale Position der Leiste
  // isPosV      = '0%',       Leiste am oberen Fensterrand;
  // isPosV      = '50%',      Leiste mittig zur Fensterhöhe;
	// isPosV      = '100%',     Leiste am unteren Fensterrand;
     delay       = '0.6s';                  // Dauer (schneller/langsamer)
  // ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

  const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));

  if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
    Services.prefs.setBoolPref('svg.context-properties.content.enabled', true);
  }

  const flybox_new = document.createXULElement('toolbox');
  flybox_new.setAttribute('orient','horizontal');
  flybox_new.id = 'flybox_new';

  const toolbar = document.createXULElement('toolbar');
  toolbar.id = 'new_flybar';
  toolbar.setAttribute('orient', 'vertical');
  toolbar.setAttribute('customizable', true);
  toolbar.setAttribute('mode', 'icons');
  toolbar.setAttribute('context', 'toolbar-context-menu');
  toolbar.setAttribute('class','toolbar-primary chromeclass-toolbar browser-toolbar customization-target');
  toolbar.setAttribute('toolboxid', 'navigator-toolbox');
  toolbar.setAttribute('toolbarname', 'New Toolbar');
  toolbar.setAttribute('label', 'New Toolbar');

  let savedState = false;
  try {
    savedState = Services.prefs.getBoolPref("userChrome.newFlybar.off");
  } catch(e) {}

  if (savedState) toolbar.classList.add("fly_off_mode");

  flybox_new.appendChild(toolbar);
  document.getElementById('browser').parentNode.appendChild(flybox_new);

  CustomizableUI.registerArea(toolbar.id, {legacy: true});
  CustomizableUI.registerToolbarNode(toolbar);

  try {
    CustomizableUI.createWidget({
      id,
      defaultArea: CustomizableUI.AREA_NAVBAR,
      label,
      tooltiptext,
      onCreated: (button) => {
        button.style.MozContextProperties = 'fill, stroke, fill-opacity';
        button.style.listStyleImage = 'url("' + curProfDir + iconPath + icon + '")';
        button.style.minWidth = 'fit-content';
      }
    });
  } catch(e) {};

  document.getElementById('NewToolbar_fly_button').addEventListener("click", flybar);
  
  function flybar(event) {
    if (event.button === 0) {
      const new_flybar = document.getElementById('new_flybar');
      new_flybar.classList.toggle("fly_off_mode");
      const state = new_flybar.classList.contains("fly_off_mode");
      Services.prefs.setBoolPref("userChrome.newFlybar.off", state);
    }
  }
  
  if (isPosH === 1)
    flybox_new.classList.add("fly_left");
  else
    flybox_new.classList.remove("fly_left");

  const css = `
    :root {
      --ug-toolbar_width: ${tbWidth};
      --ug-bg_color: #2b2b2b;
      --ug-border_width: 3px;
      --ug-border_radius: 8px;
      --ug-border_color: #f3a200;
    }

    #flybox_new {
      position: fixed !important;
      display: flex !important;
      ${isPosH === 0
        ? `right: 0 !important; margin-right: calc(-1 * var(--ug-border_width));`
        : `left: 0 !important; margin-left: calc(-1 * var(--ug-border_width));`}
      top: ${isPosV} !important;
      transform: translateY(-${isPosV}) !important;
      height: fit-content !important;
      z-index: 2 !important;
    }

    #new_flybar {
      display: flex;
      width: calc(var(--ug-toolbar_width) + 2*var(--ug-border_width));
      min-width: 0 !important;
      overflow: hidden !important;
      justify-content: center !important;
      padding-block: 4px;
      background-color: var(--ug-bg_color) !important;
      border: var(--ug-border_width) solid var(--ug-border_color) !important;
      ${isPosH === 0
        ? `border-radius: var(--ug-border_radius) 0 0 var(--ug-border_radius);`
        : `border-radius: 0 var(--ug-border_radius) var(--ug-border_radius) 0;`}
      transition: transform ${delay} ease-in-out,
                  opacity ${delay} ease-in-out,
                  border-width ${delay} ease-in-out;
      transform: translateX(0);
      opacity: 1;
    }

    #new_flybar.fly_off_mode {
      transform: ${isPosH === 0 ? 'translateX(100%)' : 'translateX(-100%)'};
      opacity: 0;
      border-width: 0 !important;
      pointer-events: none;
    }

    #new_flybar > :is(.toolbarbutton-1, toolbaritem),
    #new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
      margin-inline: 0px !important;
      margin-block: 2px !important;
      padding: 0px !important;
    /*  opacity: 1 !important;  */
      transition: none;
    }

    /*---  customizing  ---*/

    #main-window[customizing]  #flybox_new.fly_left {
      left: unset !important;
      right: 0px !important;
      margin-inline: 0px calc(-1 * var(--ug-fly_border_width)) !important;
    }

    #new_flybar[customizing] {
      align-items: center !important;
      width: calc(var(--ug-toolbar_width) + var(--ug-fly_border_width)) !important;
      min-height: var(--ug-toolbar_width) !important;
      padding-bottom: 48px !important;
      border-radius: var(--ug-border_radius) 0 0 var(--ug-border_radius) !important;
      transition: none !important;
    }

    #main-window:not([customizing]) #new_flybar.fly_off_mode[customizing] {
      transition: none !important;
      opacity: 0 !important;
    }

    #customization-content-container {
      margin-right: var(--ug-toolbar_width) !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);

})();

Alles anzeigen

Mira_Belle

Horstmann Habe ich auch schon gemacht, ändert aber nichts.

Mira_Belle

Zitat von 2002Andreas

Nur bei aktivierter Titelleiste öffnet sich ein neuer Tab nach Doppelklick auf die Tableiste.

Da muss man erst einmal drauf kommen.

Danke.

Mira_Belle

Eine nicht ganz so schöne Sache habe ich aber nun entdeckt!
Der Bereich, der von der Toolbar überdeckt wird, wird auch im ausgeblendeten Zustand "überdeckt"!
Was bedeutet, dass an dieser Stelle der Slider der Scrollbar nicht "angefasst" werden kann.

Ich prüfe mal, ob das mit Mitlesers Toolbar auch so ist.

Nein, ist nicht so.
Es hat ganz sicher etwas mit dem sanften ein und ausblenden zu tun.
Denn Mitlesers Toolbar "ploppt" auf.
Kann ich in meinem Skript nachvollziehen.

Mir fällt das aber z.Z. nichts Passendes ein.

Mira_Belle

Zitat von BrokenHeart

Bei mir (Win10) öffnet sich im Fehlerbehebungsmodus kein neuer Tab, sondern das Firefox-Fenster ändert seinen Status von maximiert auf verkleinert und umgekehrt. Das ist das Standardverhalten...

Merkwürdig, habe ich nun auch gemacht, nur um es nachvollziehen zu können,
und was soll ich sagen? Bei mir, auch Win10, öffnet sich ein neuer Tab.

Mira_Belle

Zitat von BrokenHeart

sucht aber nach der Funktionalität, die einen neuen Tab öffnet, wenn man auf die Tableiste doppelt klickt!

Oh, das kommt davon, wenn man nicht zu 100% bei der Sache ist. Sorry.

Also ich habe soeben ein neues Profil erstellt und, ....
bei "doppelklick" in die Tableiste mit der linken Maustaste öffnet sich ein neuer TAB.
Und nun?

Mira_Belle

Versuch mal dieses Skript.

JavaScript

// 'Doubleclick on tab reloads tab' script for Firefox 126+ by Aris

/* ***************************************************************************************************************** */
/* Github: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/tabstoolbar_doubleclickontab_reloadtab.uc.js */
/* ***************************************************************************************************************** */

var DoubleClickOnTabReloadTab = {
	init: function() {
		try {
			gBrowser.tabContainer.addEventListener("dblclick", function abcde(e) {
				if(e.button==0) {
					BrowserCommands.reload();
					e.stopPropagation();
					e.preventDefault();
				}
			}, false);
		} catch(e) {}
	}
}
setTimeout(function() {
  	DoubleClickOnTabReloadTab.init();
},500);

Alles anzeigen

Funktioniert hier mit Firefox 146.0 (64-Bit)

Mira_Belle

Zitat von Horstmann

Und auch wenn ihr kein anständiges Anpassenfenster mögt , hier mal ein Vorschlag:

Doch, doch, danke schön.
Klappt super.
Und auch für den Tipp mit der Leiste und der Rahmenbreite!
Denn das hatte ich ganz vergessen!

Mira_Belle

Lange hat es gedauert, viel Versuche waren nötig, aber jetzt habe ich es!
Die zusätzliche Toolbar ist endlich so, wie sie für mich sein soll.
Ich danke Dir Horstmann und auch Mitleser für Eure Ideen und eigenen Umsetzungen einer solchen Leiste.

Hier nun meine Interpretation der Codeschnipsel, die ich aus Euren Skripten bunt zusammen gewürfelt habe.
Wer es mal testen mag, bitte schön.

JavaScript

// New switchable toolbar rechts/links – Version mit gleitendem Slide‑In/Out‑Effekt

(function() {
  if (!window.gBrowser)
    return;

  const
  // ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■    
    id           = 'NewToolbar_fly_button',
    label        = 'Toggle New Toolbar',
    tooltiptext  = 'Toggle New toolbar',
    // Icon-------------------------------------------------------
    icon         = 'Dock Side Right.svg',   // Icon-Dateiname
    iconPath     = '/chrome/icons/',
    visible      = '34px',                  // Sichtbare Leistenbreite
    isPosH       = 0,                       // 0 = rechts, 1 = links
    isPosV       = '30%',                   // vertikale Position der Leiste
  // isPosV      = '0%',       Leiste am oberen Fensterrand;
  // isPosV      = '50%',      Leiste mittig zur Fensterhöhe;
	// isPosV      = '100%',     Leiste am unteren Fensterrand;
     delay       = '0.6s';                  // Dauer (schneller/langsamer)
  // ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

  const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));

  if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
    Services.prefs.setBoolPref('svg.context-properties.content.enabled', true);
  }

  const flybox_new = document.createXULElement('toolbox');
  flybox_new.setAttribute('orient','horizontal');
  flybox_new.id = 'flybox_new';

  const toolbar = document.createXULElement('toolbar');
  toolbar.id = 'new_flybar';
  toolbar.setAttribute('orient', 'vertical');
  toolbar.setAttribute('customizable', true);
  toolbar.setAttribute('mode', 'icons');
  toolbar.setAttribute('context', 'toolbar-context-menu');
  toolbar.setAttribute('class','toolbar-primary chromeclass-toolbar browser-toolbar customization-target');
  toolbar.setAttribute('toolboxid', 'navigator-toolbox');
  toolbar.setAttribute('toolbarname', 'New Toolbar');
  toolbar.setAttribute('label', 'New Toolbar');

  let savedState = false;
  try {
    savedState = Services.prefs.getBoolPref("userChrome.newFlybar.off");
  } catch(e) {}

  if (savedState) toolbar.classList.add("fly_off_mode");

  flybox_new.appendChild(toolbar);
  document.getElementById('browser').parentNode.appendChild(flybox_new);

  CustomizableUI.registerArea(toolbar.id, {legacy: true});
  CustomizableUI.registerToolbarNode(toolbar);

  try {
    CustomizableUI.createWidget({
      id,
      defaultArea: CustomizableUI.AREA_NAVBAR,
      label,
      tooltiptext,
      onCreated: (button) => {
        button.style.MozContextProperties = 'fill, stroke, fill-opacity';
        button.style.listStyleImage = 'url("' + curProfDir + iconPath + icon + '")';
        button.style.minWidth = 'fit-content';
      }
    });
  } catch(e) {};

  document.getElementById('NewToolbar_fly_button').addEventListener("click", flybar);

  function flybar(event) {
    if (event.button === 0) {
      const new_flybar = document.getElementById('new_flybar');
      new_flybar.classList.toggle("fly_off_mode");
      const state = new_flybar.classList.contains("fly_off_mode");
      Services.prefs.setBoolPref("userChrome.newFlybar.off", state);
    }
  }

  if (isPosH === 1)
    flybox_new.classList.add("fly_left");
  else
    flybox_new.classList.remove("fly_left");

  const css = `
    :root {
      --ug-toolbar_width: ${visible};
      --ug-bg_color: #2b2b2b;
      --ug-border_width: 2px;
      --ug-border_radius: 8px;
      --ug-border_color: #f3a200;
    }

    #flybox_new {
      position: fixed !important;
      display: flex !important;
      ${isPosH === 0
        ? `right: 0 !important; margin-right: calc(-1 * var(--ug-border_width));`
        : `left: 0 !important; margin-left: calc(-1 * var(--ug-border_width));`}
      top: ${isPosV} !important;
      transform: translateY(-${isPosV}) !important;
      height: fit-content !important;
      z-index: 4 !important;
    }

    #new_flybar {
      display: flex;
      width: var(--ug-toolbar_width);
      min-width: 0 !important;
      overflow: hidden !important;
      justify-content: center !important;
      padding-block: 4px;
      background-color: var(--ug-bg_color) !important;
      border: var(--ug-border_width) solid var(--ug-border_color) !important;
      ${isPosH === 0
        ? `border-radius: var(--ug-border_radius) 0 0 var(--ug-border_radius);`
        : `border-radius: 0 var(--ug-border_radius) var(--ug-border_radius) 0;`}
      transition: transform ${delay} ease-in-out,
                  opacity ${delay} ease-in-out,
                  border-width ${delay} ease-in-out;
      transform: translateX(0);
      opacity: 1;
    }

    #new_flybar.fly_off_mode {
      transform: ${isPosH === 0 ? 'translateX(100%)' : 'translateX(-100%)'};
      opacity: 0;
      border-width: 0 !important;
      pointer-events: none;
    }

    #new_flybar > :is(.toolbarbutton-1, toolbaritem),
    #new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
      margin-inline: 0px !important;
      margin-block: 2px !important;
      padding: 0px !important;
      opacity: 1 !important;
      transition: none;
    }
  `;

  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);

})();

Alles anzeigen

Skript ist unter Zuhilfenahme von KI entstanden.

PS:
Das mit dem Pfeil war wirklich eine blöde Idee,
aber hinterher ist man immer schlauer, heißt es doch, oder?

Beiträge von Mira_Belle

CSS für About Dialog /Nightly passt nicht mehr

Neue Quicklink-Button

Neue Quicklink-Button

Seitennavigation - Fly Out Menü

Der Glückwunsch-Thread

Der Glückwunsch-Thread

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

[FFX 145.x] Doppelklick (linke Maustaste) auf die Tableiste neuen Tab öffnen?

Seitennavigation - Fly Out Menü

[FFX 145.x] Doppelklick (linke Maustaste) auf die Tableiste neuen Tab öffnen?

[FFX 145.x] Doppelklick (linke Maustaste) auf die Tableiste neuen Tab öffnen?

[FFX 145.x] Doppelklick (linke Maustaste) auf die Tableiste neuen Tab öffnen?

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü