Beiträge von Mira_Belle

Mira_Belle

Sören Hentzschel Danke für Deine nachträgliche Antwort!
Das mit den Quellen konnte ich nun auch nachvollziehen und werde das in Zukunft gar nicht mehr verfolgen noch posten.

Zum Erstellen, bzw. abändern von Skripten werde ich nach wie vor KI nutzen.
Natürlich probiere ich erst selber aus, was ich schon kann und was nicht.

Nur eine Frage! Wie, mit welchem Satz soll ich auf den gebrauch einer KI hinweisen und, soll auch die KI genannt werden?
Ich nutze ja gelegentlich verschiedene und mach daraus einen Wettkampf der KI's.

Mira_Belle

Zitat von Horstmann

Wobei sich bei den Versionen mit Extra Button schon die Frage stellt, warum man nicht einfach den Hauptbutton benutzt, ...

Das frage ich mich auch.
Ich bin noch am Testen und hatte diese Idee.
Ob es nun sinnvoll ist, steht auf einem anderen Blatt.
Und wie und ob ich so eine Leite nutzen werde, steht auch noch nicht zu 100% fest,
aber so habe ich nun ein halbes dutzend Optionen.
Danke.

Mira_Belle

Zitat von Horstmann

Du müsstest dir das selber anschauen, das CSS ist aufwendig, und ich biete momentan nur die existierenden Versionen an.
Mir gefällt es besser, wenn der Button nach dem Ausklappen nicht noch zusätzlich Platz in Richtung Browserinhalt einnimmt.

Schade, aber so sind die "Geschmäcker" halt verschieden.
Is´ so!

Zitat von Horstmann

Im Prinzip musst du nur das ::before Element von #22 mit dem Button von #29 ersetzen, und dann halt basteln.
Hier wäre ein Anfang für ein alternatives CSS in deinem Sinne; eine komplette Anpassung ist mir zu viel Aufwand.

Und da ich mit CSS irgendwie auf Kriegsfuß stehe, wenn es um so aufwändigen und komplexen Code geht,
bleibe ich erst einmal bei meiner Interpretation Deiner Leiste.

Aber vielen lieben Dank für die zusätzliche Leiste.

Mira_Belle

Die Version aus #22 funktionierte wunderbar!
Von der Optik gefiel sie mir auch.

Nun sehe ich Deine neue Variante, und dachte, cool, übertrage doch einfach den Code für das "Klicken" auf den Pfeil.

Falsch gedacht!!
Das CSS ist ja sowas von anders! Da steige ich nicht durch.
Und leider gefällt mir die Optik nicht!
Verrätst Du mir, wie man den Pfeil, bzw. diese Fläche wieder vor die Leiste bekommt.
Also das die Optik wieder genau der Optik aus #22 entspricht.

Mira_Belle

Danke Horstmann
Mit margin-inline: 0px !important; das Problem mit der Ausrichtung gelöst!

Und da das Problem mit der Hintergrundfarbe in Deinem vorgeschlagenen Skript,
wie auch in Mitlesers Skript vorhanden war/ist, konnte die Ursache ja nur im Skript
für die eigenen Buttons liegen.
Habe den Fehler lokalisieren können und werde dahingehen alle "Buttons" überarbeiten.

Mira_Belle

Zitat von Horstmann

Aus dem Pfeil kann man auch einen zusätzlichen Button machen, der das ein/ausblenden bei click übernimmt; nur ein Button und hover Funktion, das wäre mir zu viel.

Da komme ich vielleicht noch darauf zurück, aber vorerst nicht!

Ich habe mit dem, mit Deinem Skript etwas herumgespielt.
Learning by doing, sozusagen.

Hier mal mein bisheriges Ergebnis, zu dem ich aber noch Fragen hätte!

JavaScript

//Toggle newtoolbar 8 rechts/links

(function() {

    if (location.href !== 'chrome://browser/content/browser.xhtml')
        return;

        let ButtonIcon = 'flower-satt32.png';
        let Fly_Position = 0;  // 0 = right , 1 = left

        let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
        let IconPath = '/chrome/icons/';
        let ImagePath = ProfilePath + IconPath + ButtonIcon;

        let Path = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));

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

        let tb = document.createXULElement('toolbar');
        let tb_label = "New Toolbar";
        tb.id = 'new_flybar';

        tb.setAttribute('customizable', true);
        tb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
        tb.setAttribute('orient', 'vertical');
        tb.setAttribute('mode', 'icons');
        tb.setAttribute("toolboxid","navigator-toolbox");
        tb.setAttribute('context', 'toolbar-context-menu');
        tb.setAttribute("toolbarname", tb_label);
        tb.setAttribute("label", tb_label);

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

        CustomizableUI.registerArea('new_flybar', {legacy: true});
        CustomizableUI.registerToolbarNode(tb);

   try {
        CustomizableUI.createWidget({
            id: 'NewToolbar_fly_button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    let toolbaritem = aDocument.createXULElement('toolbarbutton');
                    let props = {
                        id: 'NewToolbar_fly_button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Toggle New Toolbar',
                        tooltiptext: 'Toggle New toolbar',
                        style: 'list-style-image: url("' + ImagePath + '");',
                    };
                    for(let p in props)
                        toolbaritem.setAttribute(p, props[p]);
                    return toolbaritem;
                }
        });
    } catch(e) { };

    document.getElementById('NewToolbar_fly_button').addEventListener( "click", flybar );
    function flybar() {
        if (event.button === 0 ) {
        new_flybar.classList.toggle("fly_off_mode");
       }
    };

    if (Fly_Position === 1) {
       flybox_new.classList.add("fly_left");
       }
    else {
       flybox_new.classList.remove("fly_left");
    };

const css =`


:root {
    --ug-newbar_width: 0px;
    --ug-newbar_inner_width: 32px;
    --ug-newbar_max_width: calc(var(--ug-newbar_inner_width) + 2*var(--ug-fly_border));

    --ug-arrow_width: 20px;
    --ug-arrow_height: 34px;

    --ug-newbar_bg_color: #2b2b2b;
    --ug-newbar_radius: 8px;
    --ug-fly_border: 3px;
    --ug-fly_border_color: orange;
    --ug-fly_delay: 3s; /* animation delay when closing */
}

#flybox_new {
    position: fixed;
    display: flex;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 4 !important;
    height: fit-content;
    width: fit-content;
}

#new_flybar {
    display: flex;
    min-width: 0px !important;
    width: var(--ug-newbar_width);
    overflow: hidden !important;
    justify-content: center !important;
    padding-block: 4px;
    background-color: var(--ug-newbar_bg_color) !important;
    border-color: var(--ug-fly_border_color);
    border-style: solid !important;
    border-width: var(--ug-fly_border);
    border-radius: 0 0 0 var(--ug-newbar_radius);
    margin-inline: 0px calc(0px - 2*var(--ug-fly_border));
    transition: width 0.5s ease, margin 0.5s ease;
    transition-delay: var(--ug-fly_delay);
}

 #new_flybar:not([customizing]):hover {
    width: var(--ug-newbar_max_width);
    margin-inline: 0px calc(0px - 1*var(--ug-fly_border));
    transition-delay: 0s;
}

#new_flybar:not([customizing]).fly_off_mode {
    display: none !important;
}

#new_flybar > :is(.toolbarbutton-1, toolbaritem),
#new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
    margin-block: 2px !important;
    padding: 0px !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease;
    transition-delay: var(--ug-fly_delay);
}

#new_flybar:not([customizing]):hover > :is(.toolbarbutton-1, toolbaritem) {
    opacity: 1 !important;
    transition: opacity 0.5s ease;
    transition-delay: 0s;
}

/*---  arrow  ---*/

#new_flybar::before {
    content:"";
    display: flex;
    position: absolute;
    background-color: var(--ug-newbar_bg_color);    
    top: 0px;
    left: calc(-0px - var(--ug-arrow_width) - 1*var(--ug-fly_border));
    height: var(--ug-arrow_height);
    width: calc(var(--ug-arrow_width) + 1*var(--ug-fly_border));
    /*background-image: url(chrome://global/skin/icons/arrow-left.svg);*/
background-image: url("${Path}/Chevron-left.svg");
-moz-context-properties: fill, fill-opacity;
fill: #fafafa;
    background-repeat: no-repeat;
    background-size: 16px;
    background-position-x: left calc(50% - 0.5*var(--ug-fly_border)) ;
    background-position-y: calc(50% - 0px);
    border-right-width: 0px !important;
    border-radius: var(--ug-newbar_radius) 0 0 var(--ug-newbar_radius);
    border: var(--ug-fly_border) solid var(--ug-fly_border_color);
    transition: right 0.5s ease, left 0.5s ease, margin 0.5s ease;
    transition-delay: var(--ug-fly_delay);
}

#new_flybar:hover::before {
    /*background-image: url(chrome://global/skin/icons/arrow-right.svg);*/
background-image: url("${Path}/Chevron-right.svg");
-moz-context-properties: fill, fill-opacity;
fill: #fafafa;
    transition-delay: 0s;
}

/*---  left  ---*/

:root:not([customizing]) #flybox_new.fly_left {
    left: 0;
}

#flybox_new.fly_left #new_flybar:not([customizing]) {
    border-radius: 0 0 var(--ug-newbar_radius) 0;
    margin-inline: calc(0px - 2*var(--ug-fly_border)) 0px;
}

#flybox_new.fly_left #new_flybar:not([customizing]):hover {
    width: var(--ug-newbar_max_width);
    margin-inline: calc(0px - 1*var(--ug-fly_border)) 0px;
}

#flybox_new.fly_left #new_flybar::before {
    left: unset;
    right: calc(-0px - var(--ug-arrow_width) - 1*var(--ug-fly_border));
    border-left-width: 0px !important;
    border-right-width: var(--ug-fly_border) !important;
    border-radius: 0 var(--ug-newbar_radius) var(--ug-newbar_radius) 0;
    background-image: url(chrome://global/skin/icons/arrow-right.svg);
    background-position-x: right calc(50% - 0.5*var(--ug-fly_border)) ;
}

 #flybox_new.fly_left #new_flybar:hover::before {
    background-image: url(chrome://global/skin/icons/arrow-left.svg);
}


/*---  customizing  ---*/

#new_flybar[customizing] {
    min-width: var(--ug-newbar_max_width) !important;
    min-height: var(--ug-newbar_max_width) !important;
    padding-bottom: 48px !important;
    border-radius: var(--ug-newbar_radius) 0 0 var(--ug-newbar_radius) !important;
}

#new_flybar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
    opacity: 1 !important;
}

#customization-content-container {
    margin-right: var(--ug-newbar_max_width) !important;
}

#new_flybar[customizing]::before {
    display: none !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

Es funktioniert so weit alles recht gut, nur warum werden eigene Buttons anders behandelt als jene,
die von Erweiterungen stammen.

Zum Beispiel werden die Buttons von Erweiterungen weiter rechts dargestellt.
Sie sind also etwas außerhalb der Mitte.
Dann "eigene" Buttons, deren Hintergrundfarbe, beim Hovern, entspricht nicht der im Skript definierten Farbe.
Bei einem roten Symbol im Button ist die "Hoverfarbe" dann auch leicht rötlich.
Bei blau bläulich und bei gelb eben gelblich.
Nur bei Buttons von Erweiterungen, da stimmt es!

Mira_Belle

Horstmann Cool, das ist ja fast so, wie ich mir das vorgestellt habe!

Mira_Belle

Mitleser Bitte verstehe mich nicht falsch!
Ich finde Deine Version einer zusätzlichen Leiste einfach suuuuper

Was Du da zitierst, war eine Reaktion auf Deine Aussage:

Zitat

Das ist doch wiedermal Schrott; niemand braucht das! 🦄️🫎️

Also Schwamm drüber, ja?

Mira_Belle

Mitleser Wofür bedankst Du Dich bei Sören?
1. War es Andreas, der die Beiträge abgetrennt hat,
und
2. war es mein "Wunsch"! => Siehe hier.

Mira_Belle

Zitat von Horstmann

Sollte eigentlich nur plug&play sein für deine Extras.

Nicht ganz, Du hast ja IDs geändert. Habe ich aber hinbekommen.
Aus "newtoolbar" wurde ja "new_toolbar".

Mira_Belle

Zitat von Horstmann

Die korrigierte Version kommt zügig; der Themebug ist sehr spezifisch, nur bei theme_fix_2 mit Toolbar oben, das Ausschalten ist defekt.

Misst, dann muss ich ja schon wieder Basteln.

Mira_Belle

Zitat von Horstmann

Mira_Belle , siehst du das Problem bei dir, rechte Leiste wird nicht komplett ausgeblendet mit #185, mit oder ohne Theme?

Weder mit Theme noch mit eigener Backgroud-Farbe!

Hast Du jetzt eine neue, überarbeitete Version?
Wegen des Themebug! Welchem Themebug?

Mira_Belle

Zitat von Horstmann

Mein Vorschlag wäre, meine letzte Version von #185 zu nehmen, und dort dein JS Verschwinden Dingens einzubauen.

Genau so werde ich es machen.
Ist wohl viel einfacher als das von mir zerstörte Ding zu reparieren.

Zitat von FuchsFan

Holla, die Waldfee! Das ist aber deine alleinige Wahrnehmung, ...

Da bin ich aber froh, dachte schon.

Mira_Belle

Zitat von FuchsFan

Das steht dir frei, ganz wie du möchtest.

Warum so "angepisst"? Fakt ist, in der Version aus #185 von Horstmann gibt es das einfach gar nicht!

Test bitte noch einmal ganz ohne Deine CSS und auch ganz ohne andere Skripte! _{(anderes Profil)}
Ich vermute, dass da bei Dir irgendwas anders rein funkt.

Mira_Belle

Zitat von FuchsFan

Das teste ich doch gerade.

Das bezweifele ich.
In Horstmanns Skript gibt es das nicht

Was ich aber so grundsätzlich merkwürdig finde, was ist so schwer, die Kommentare in den Settings zu lesen?
_{(Anmerkung! Das ist jetzt gar nicht böse gemeint!!)}

JavaScript

    // Auto-Close Einstellungen
        let autoCloseTime = 5000;   // 0 = kein Auto-Close / >0 Zeit in Millisekunden /5000 => 5sec
        let intervalID = 0;

    // End of user settings

Aber da Du diese Funktion ja so grundsätzlich gar nicht haben willst,
und obendrein in dieser Version von mir die von Horstmann beschriebenen Bugs vorhanden sind,
würde ich Dir von en empfehlen die neueste Ausgabe aus #185 zu nutzen.

Mira_Belle

Uh, autsch, oh weh.
Horstmann Du hast absolut recht!

CSS

        #toolbox_new.top_mode {
            top: 0px;
            bottom: unset;
        }

Das CSS muss weg und /-- Top (NEU) --/ muss zu /*-- Top (NEU) --*/ geändert werden.

Ich und CSS, tz, tz, tz.

Mira_Belle

2002Andreas Äh, Danke.
Gerade noch einmal getestet!

Was mich etwas irritierte, gleichen Test, Skript für eine Zusatzleiste deaktiviert, hatte ich schon einmal gemacht
und da waren die Buttons weg.
Oder ich habe mal wieder nicht richtig geschaut.
Also, nochmals Danke.

Mira_Belle

Wird dieser nicht durch eine Erweiterung erzeugt?
Wenn ja, in die Einstellungen dieser mal nachschauen, ob man da was einstellen kann.

Mira_Belle

Diese Leiste von Mitleser werde ich mir mal näher anschauen. Danke dafür.

Aber eine Frage, die mich seit gestern beschäftigt,
was geschieht, wenn das Skript irgendeiner Leiste nach einem Update nicht mehr funktioniert!

Da hat man, also ich z.B., die Leise mit einem Dutzend Buttons oder Schaltflächen bestückt,
und dann sind sie nicht mehr erreichbar.
Wie kann man sie "retten"?
In welcher Datei ist das Layout gespeichert?

_{(Ich wüsste mir schon zu helfen, aber es muss ja auch eine einfache Möglichkeit geben)}

Mira_Belle

Zitat von Horstmann

Übrigens: vom Anpassenfenster abgesehen

CSS ist nicht so mein Ding.
Ich bin schon froh, dass die Leiste oben angezeigt wird.
So im Groben und Ganzen erfüllt sie jetzt, für mich, ihren Zweck
und für Deine Arbeit danke ich Dir.
Ohne Dich, bzw. Deine Leiste, wäre meine Adressleiste und auch die Menüleiste
immer noch voll von Buttons.
So konnte ich einige "auslagern", jene, die ich nicht ganz so oft nutze (brauche).

Und ich bin immer noch am Ausprobieren, an welcher Stelle die Zusatzleiste für mich
am besten passt. Favoriten, rechts oder oben.

Beiträge von Mira_Belle

Neue Quicklink-Button

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Seitennavigation - Fly Out Menü

Schaltbare vertikale Overlay-Zusatzleiste

Schaltbare vertikale Overlay-Zusatzleiste

Eigene Zusatzleisten

Eigene Zusatzleisten

Eigene Zusatzleisten

Eigene Zusatzleisten

Eigene Zusatzleisten

Eigene Zusatzleisten

Eigene Zusatzleisten

Eigene Zusatzleisten

Eintrag unter Extras entfernen

Eigene Zusatzleisten

Eigene Zusatzleisten