Beiträge von Horstmann

Horstmann

Zitat von Endor

funktioniert

Horstmann

Zitat von Endor

Teste mal ob das so passt.
Vielleicht hat ja jemand eine Idee wie man das Symbol auch noch fett kriegt.

Man könnte stroke hinzufügen, evtl. sowas:

Code

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="#d90000" fill-opacity="1.0" stroke="#d90000" stroke-width="1">
  <path d="m9.108 7.776 4.709-4.709a.626.626 0 0 0-.884-.885L8.244 6.871l-.488 0-4.689-4.688a.625.625 0 1 0-.884.885L6.87 7.754l0 .491-4.687 4.687a.626.626 0 0 0 .884.885L7.754 9.13l.491 0 4.687 4.687a.627.627 0 0 0 .885 0 .626.626 0 0 0 0-.885L9.108 8.223l0-.447z"/>
</svg>

Den stroke-width Wert kann man dann anpassen nach Gusto.

Horstmann

Zitat von bluuubb33

Hallo, ich wollte:
1) Höhe der Tabs verkleinern: Wie auf dem Screenshot zu sehen ist der Tab kleiner geworden, jedoch entsteht unter dem Tab ein Leerraum. Wie bekomme ich diesen weg?
2) Webseite Icon nach oben verschieben: Auf dem Screnshot kann man erkennen das das Webseiten-Icon (in diesem Fall von Firefox) zu weit unten ist. Wie kann ich das beheben?

Als ersten Schritt würde ich den Code für die Tabs nehmen, und in die Tonne klopfen.
Die Farben könntest du evtl. behalten, ist aber auch nicht das Wahre; die Positionierung der Elemente geht so aber nicht.

Danach kommt es darauf an, wie du die Tabs haben möchtest: nur die Höhe (der Leiste oder der Tabs?) geringer, mit oder ohne Abstand oben/unten und seitlich, und jeweils wieviel.

Das kann man alles anpassen, nur müsstest du genauer beschreiben was du haben möchtest.

Horstmann

Verstehe, danke für die Erklärung.

Wenn ich endlich einen neuen Mac habe und aus meiner ESR Hölle rauskomme, gehe ich das Nesting an, scheint ja relativ einfach zu sein.

Und ja, CSS hübscher machen ist immer nett.

Horstmann

Zitat von Sören Hentzschel

.... Dafür gibt es keinen :is()-Selektor mehr, der durch die Verschachtelung nicht mehr notwendig ist,

Moment - heisst das :is funktioniert nicht mehr mit Firefox, oder wird der Selektor nur nicht mehr benutzt im CSS Code?
Ich vermute ja eher Letzteres, wollte aber mal nachfragen.

Horstmann

Zitat von Firefox_94.0.1

Zitat von Horstmann

Zitat von Firefox_94.0.1

Wie würdest du das überdenken? Woran erkenne ich, ob der Code nichts macht bzw falsch ist?

.... Der Übersicht halber habe ich oben nur den Code für die hier relevante Lesezeichenleiste eingestellt. Daher macht die Farbgebung von nur dem geposteten Code tatsächlich keinen Sinn.

Dann gibt's dazu nichts weiter zu sagen von meiner Seite - ohne Code kein Brot! (ahem; reimt sich aber )

Anscheinend haben sich ein paar Properties geändert für die Bookmark Icons, der Code von weiter oben sollte eine Weile halten.

Horstmann

Zitat von Firefox_94.0.1

Wie würdest du das überdenken? Woran erkenne ich, ob der Code nichts macht bzw falsch ist?

Da würde ich gerne helfen, weiss aber nicht was dein Code genau machen soll.

Wenn ich den bei mir reinstelle, macht farblich kaum was Sinn, auch bei verschiedenen Themes.
Man müsste noch wissen welches Theme du benutzt, ob noch anderen CSS Code, oder evtl. Erweiterungen wie Firefox Color.

Den ::part Part hat Milupo ja schon erwähnt.

Aber wenn's jetzt wieder klappt, dann ist ja gut.

Horstmann

Zitat von Firefox_94.0.1

... , funktioniert wie gewünscht.

Den Code würde ich bei Gelegenheit mal überdenken; der ist überladen und unnötig komplex, macht teilweise gar nix oder ist schlicht falsch, und adaptiert sich nicht sauber für viele Themes.

Zitat von 2002Andreas
Teste bitte mal:
Code
....

Hilfreicher wäre es generell schon, die Lösung auch einfach mit dazu zu anzugeben und kurz tz beschreiben, dann haben auch noch andere was davon.

Den gesamten Codeschlamassel sollte wohl keiner übernehmen.

Horstmann

Zitat von Dicken

Falls doch irgendwer noch einen Tipp für mich hat, ...

Du könntest noch sowas hier probieren, ist eine Variante der klassischen Zusatzleiste, davon gibt es hier noch viele weitere Beispiele; der Klassiker ist wohl eine von Aris.

Mit dem Hinzufügen von Links kenne ich mich noch weniger aus als mit dem Rest von Javascript, aber hab mal ein extra Script für zumindest einen Linkbutton gebastelt. Es geht bestimmt eleganter, aber das Forum hier scheint zZ etwas beratungsmüde.

Die Icons hängen unten an, kannst natürlich eigene benutzen; diese Scripts gehen davon aus, dass diese Icons in einem Ordner namens icons im chrome Ordner sind.

Ein Button zum komplett ausblenden ist auch integriert.

JavaScript

//Toggle newtoolbar 7D


(function() {

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

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

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

        tb.setAttribute("collapsed", "false");
        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);

	    toolbox_new.appendChild(tb);

        document.getElementById('browser').parentNode.appendChild(toolbox_new);

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

   try {
        CustomizableUI.createWidget({
            id: 'NewToolbar-button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    let currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
                    let buttonicon = "newtoolbar.png"
                    let toolbaritem = aDocument.createXULElement('toolbarbutton');
                    let props = {
                        id: 'NewToolbar-button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Toggle New Toolbar',
                        tooltiptext: 'Toggle New toolbar',
                        style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) + '");',
                    };

                    for(let p in props)
                        toolbaritem.setAttribute(p, props[p]);
                    return toolbaritem;
                }
        });
    } catch(e) { };

document.getElementById('NewToolbar-button').addEventListener( "click", onClick );
        function onClick(aEvent, keyEvent=false) {
        if(!keyEvent && aEvent.button != 0) {
            return;
        }
         newtoolbar.classList.toggle("off-mode");
 };

const css =`

:root {
    --ug-newbar_width: 44px;
    --ug-newbar_max_width: 166px;
    --ug-newbar_bg_color: lightblue;
    --ug-newbar_radius: 8px;
}

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

#newtoolbar {
    display: flex;
    width: var(--ug-newbar_width);
    padding: 4px !important;
    background-color: var(--ug-newbar_bg_color) !important;
    border-radius: 0 var(--ug-newbar_radius) var(--ug-newbar_radius) 0;
    transition: width 0.5s ease, margin-left 0.5s ease !important;
}

#newtoolbar:not([customizing]):hover {
    width: var(--ug-newbar_max_width);
}

#newtoolbar:not([customizing]).off-mode {
    margin-left: calc(0px - var(--ug-newbar_width));
}

#newtoolbar .toolbarbutton-1 {
    margin-block: 2px !important;
    justify-content: flex-start !important;
}

#newtoolbar:not([customizing]):hover .toolbarbutton-1 .toolbarbutton-icon {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

#newtoolbar:not([customizing]):hover .toolbarbutton-1 .toolbarbutton-text {
    display: flex !important;
    text-align: start !important;
    padding-left: 0px !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

#newtoolbar[customizing] {
    min-width: var(--ug-newbar_width) !important;
    padding-bottom: 48px !important;
    background: var(--ug-newbar_bg_color) !important;
}

#customization-content-container {
    margin-left: var(--ug-newbar_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

Link Button:

JavaScript

//  link button
  
  (function() {

   if (location != 'chrome://browser/content/browser.xhtml') return;
    
    try {
        CustomizableUI.createWidget({
            id: 'Link1_Button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
            onBuild: function(aDocument) {            
                let currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
                let buttonicon = "google1px.png"
                let toolbaritem = aDocument.createXULElement('toolbarbutton');
                let props = {
                    id: 'Link1_Button',
                    class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                    label: 'Google',
                    tooltiptext: 'Link1_Button Tip',
                    style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) + '");',

                    onclick: 'if (event.button == 0) { \
                                        openTrustedLinkIn("https://www.google.com/", "tab");\
                                 }; '
                };
                for (let p in props)
                    toolbaritem.setAttribute(p, props[p]);
                return toolbaritem;
            }
        });
    } catch(e) { };
   
})();

Alles anzeigen

Horstmann

Zitat von lenny2

Ist es Ihr Ziel, Ihr eigenes vertikales Paneel zu entwerfen...

Genau; die Leisten von Aris kenne ich, sind mir aber zu überfrachtet und unflexibel.

Horstmann

Ich bastle zum xten Mal an einer zusätzlichen Toolbar rum.

Ein wiederkehrendes Problem ist, dass diese Toolbar je nach Konfiguration nicht im Anpassen Fenster angezeigt wird.

Was funktioniert ist zB dieser (sehr grobe Test-) Code; der benutzt document.getElementById('browser').parentNode.appendChild(tb);:

JavaScript

//Toggle newtoolbar


(function() {

    if (location.href !== 'chrome://browser/content/browser.xhtml')
        return;
    
    setTimeout(function() {
        setFunction();
    },50);

    function setFunction() {

        const css =`

#newtoolbar3 {
    position: absolute;
    display: flex;
    top: 310px;
    z-index: 444 !important;
    left: 0;
    min-width: unset !important;
    width: 36px;
    height: 50%;
    max-height: 100% !important; 
    background-color: powderblue !important;
}

#newtoolbar3.wide-mode {
    width: 136px;
    background-color: orange !important;
}

#newtoolbar3[customizing] {
    background-color: pink !important;
}

#NewToolbar-button .toolbarbutton-icon {
    list-style-image: url("chrome://browser/skin/bookmark-hollow.svg") !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);
}

        var tb = document.createXULElement('toolbar');
        var tb_label = "New Toolbar";
        tb.id = 'newtoolbar3';

        tb.setAttribute("collapsed", "false");
        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);
        //tb.setAttribute('insertbefore','appcontent');


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

        //document.getElementById('appcontent').parentNode.appendChild(tb);   

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


   try {
        CustomizableUI.createWidget({
            id: 'NewToolbar-button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    var toolbaritem = aDocument.createXULElement('toolbarbutton');
                    var props = {
                        id: 'NewToolbar-button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Toggle New Toolbar',
                        tooltiptext: 'Toggle New toolbar',
                    };
                    
                    for(var p in props)
                        toolbaritem.setAttribute(p, props[p]);
                    return toolbaritem;
                }
        });
    } catch(e) { };
    
document.getElementById('NewToolbar-button').addEventListener( "click", onClick );
        function onClick(aEvent, keyEvent=false) {          
        if(!keyEvent && aEvent.button != 0) {
            return;    
        }

        newtoolbar3.classList.toggle("wide-mode");
     }

})();

Alles anzeigen

Was nicht funktioniert für das Anapssen Fenster, ist dieser Code, mit document.getElementById('appcontent').parentNode.appendChild(tb);

CSS

//Toggle newtoolbar


(function() {

    if (location.href !== 'chrome://browser/content/browser.xhtml')
        return;
    
    setTimeout(function() {
        setFunction();
    },50);

    function setFunction() {

        const css =`

#newtoolbar3 {
    position: absolute;
    display: flex;
    top: 310px;
    z-index: 444 !important;
    left: 0;
    min-width: unset !important;
    width: 36px;
    height: 50%;
    max-height: 100% !important; 
    background-color: powderblue !important;
}

#newtoolbar3.wide-mode {
    width: 136px;
    background-color: orange !important;
}

#newtoolbar3[customizing] {
    background-color: pink !important;
}

#NewToolbar-button .toolbarbutton-icon {
    list-style-image: url("chrome://browser/skin/bookmark-hollow.svg") !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);
}

        var tb = document.createXULElement('toolbar');
        var tb_label = "New Toolbar";
        tb.id = 'newtoolbar3';

        tb.setAttribute("collapsed", "false");
        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);
        //tb.setAttribute('insertbefore','appcontent');


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

        document.getElementById('appcontent').parentNode.appendChild(tb);   

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


   try {
        CustomizableUI.createWidget({
            id: 'NewToolbar-button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    var toolbaritem = aDocument.createXULElement('toolbarbutton');
                    var props = {
                        id: 'NewToolbar-button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Toggle New Toolbar',
                        tooltiptext: 'Toggle New toolbar',
                    };
                    
                    for(var p in props)
                        toolbaritem.setAttribute(p, props[p]);
                    return toolbaritem;
                }
        });
    } catch(e) { };
    
document.getElementById('NewToolbar-button').addEventListener( "click", onClick );
        function onClick(aEvent, keyEvent=false) {          
        if(!keyEvent && aEvent.button != 0) {
            return;    
        }

        newtoolbar3.classList.toggle("wide-mode");
     }

})();

Alles anzeigen

Im Prinzip sind mir die Abhängigkeiten unklar, die ein Element im Anpassen Fenster auftauchen lassen und ein anderes nicht; unklar ist mir auch alles was Javascript angeht.

Ideen und Vorschläge willkommen!

Horstmann

Das exakt gleiche Problem habe ich schon lange, mindestens seit einem Jahr; manchmal will die DHL Seite einfach nicht.

Auch nach vielen Versuchen die genaue Ursache zu finden - kein Erfolg.
Es scheint als ob die DHL Website oft ein Problem mit egal welchen vorhandenen Firefox Modifikationen hat, oft aber auch nicht.

Direkte Links zu zB Sendungsverfolgungen funktionieren aber eigentlich immer, auch wenn der Login spinnt.
Hier ist das auf einem Mac.

Horstmann

Zitat von Mira_Belle

Aber auch als ich meinen Fehler bemerkte und in meinem Testprofil ohne andern CSS ausprobierte
funktionierte er nicht.

Schade, aber Danke für's probieren!

Horstmann

Zitat von Dharkness

Zitat von Horstmann

Und damit?

Die Button fehlen noch immer.

Danke nochmal für's Testen.

Dann muss dafür wohl ein Windows User ran, falls sich jemand interessiert; kann ich wie gesagt leider nicht regeln am Mac...
Das Prinzip zum Verschieben dieser Buttons ist eigentlich einfach, aber auch etwas abhängig vom OS.

Anregungen gäb's zB hier oder hier.

Horstmann

Zitat von Dharkness

Apropos Test, mir ist gerade aufgefallen das unter Windows, wenn die Titelleiste nicht angezeigt wird, die die Button zum Minimieren, Maximieren, Verkleinern und Schleißen nicht angezeigt werden.

Und damit? (Testfarben auch geändert, oben hoffentlich abschaltbar):

CSS

                     /*****  Responsive Oneliner Test B  *****/ 


/* uncomment to turn test colors OFF */ 
/*
:root {
    --ug-bg_color: none;
}
*/


/* Tabs bar max width */ 

#TabsToolbar {
    --ug-max_width: 60vw;
}


:root:not([customizing]) #navigator-toolbox {
    display: flex !important;
    position: relative !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    --tabs-navbar-shadow-size: 0px !important;
    --toolbarbutton-outer-padding: 0px !important;
}

#PersonalToolbar {
    width: 100vw !important;
}

:root:not([customizing]) #nav-bar {
    flex-grow: 1 !important;
    flex-basis: 0px !important;
    --toolbar-start-end-padding: 2px !important;
}

#urlbar-container {
    flex-shrink: 1 !important;
    min-width: 200px !important;
    /*max-width: 520px !important;*/
}

/* Only for url container max-width set */ 
/*
#nav-bar-customization-target  {
    justify-content: center !important;
}
*/

/* Url popup width */ 
#urlbar[breakout][breakout-extend] {
    width: 400px !important;
    /*right: 0 !important;
    left: auto !important;*/
}



/* Only for url container max-width set */ 
/*
#nav-bar-customization-target  {
    justify-content: center !important;
}
*/
/* url container left  */ 
/*
#urlbar-container {
    order: -1 !important;
}
*/


#TabsToolbar {
    background-color: var(--toolbar-bgcolor) !important;
    --toolbarbutton-inner-padding: 8px !important;
    --ug-button_width: 
          calc(2 * var(--toolbarbutton-inner-padding) + 16px + 2 * var(--toolbarbutton-outer-padding));
    --ug_contain: initial;
    padding-inline: 12px 2px !important;
}

:root[uidensity="compact"] #TabsToolbar {
    --toolbarbutton-inner-padding: 6px !important;
}

@media screen and (max-width: 1300px) {
    #TabsToolbar {
        --ug-max_width: 40vw;
    }
}

/**  fix tab width jump when tab content changes  **/

:root:not([customizing]) .tabbrowser-tab:not([pinned]) {
    width: 205px;
}


/**  control tab overflow, currently needs new tab button in tabs bar on the right  **/

.scrollbox-clip[orient="horizontal"] {
    contain: var(--ug_contain, initial) !important;
}

#tabbrowser-tabs:not([overflow], [hasadjacentnewtabbutton]) {
    max-width: var(--ug-max_width) !important;
}

#tabbrowser-tabs[hasadjacentnewtabbutton] {
    max-width: calc(var(--ug-max_width) - 1 * var(--ug-button_width)) !important;
}

/**  fix tab bar width jump when hitting overflow  **/
#tabbrowser-tabs[overflow] {
    max-width: calc(var(--ug-max_width) - 1 * var(--ug-button_width)) !important;
}

#tabbrowser-tabs[overflow][hasadjacentnewtabbutton] {
    max-width: calc(var(--ug-max_width) - 3 * var(--ug-button_width)) !important;
}


@supports -moz-bool-pref("browser.tabs.tabmanager.enabled") {
#tabbrowser-tabs[overflow] {
    max-width: calc(var(--ug-max_width) - 0 * var(--ug-button_width)) !important;
    }

#tabbrowser-tabs[overflow][hasadjacentnewtabbutton] {
    max-width: calc(var(--ug-max_width) - 2 * var(--ug-button_width)) !important;
    }
}




#tabs-newtab-button {
    padding-left: 2px !important;
}

.titlebar-spacer { 
    display: none !important;
}


/**   window control buttons right / position for Mac   **/

@media (-moz-platform: macos) {

:root[tabsintitlebar]:not([sizemode="fullscreen"]) #TabsToolbar > .titlebar-buttonbox-container {
    position: absolute !important;
    outline: 2px solid var(--ug-bg_color, orange) !important;
    outline-offset: -2px !important;    top: 0 !important;
    right: 0 !important;
    height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) !important;
    z-index: 3 !important;
    padding-inline: 2px 16px !important;
}

#TabsToolbar .titlebar-buttonbox {
    margin-inline: 0 !important;
}

:root[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
    padding-right: calc(72px + 0px) !important;
}
}


/**   window control buttons right / position for Windows ??   **/

@media (-moz-platform: windows) {

:root[tabsintitlebar]:not([sizemode="fullscreen"]) #TabsToolbar > .titlebar-buttonbox-container {
    position: absolute !important;
    outline: 2px solid var(--ug-bg_color, orange) !important;
    outline-offset: -2px !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 3 !important;
}

:root[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
    padding-right: calc(138px + 0px) !important;
}
}


/*  window control buttons off  Test  */
/*
.titlebar-buttonbox-container { 
    display: none !important;
}

:root[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
    padding-right: 12px !important;
}
*/


/*  test colors  */

#PersonalToolbar {
    outline: 2px solid var(--ug-bg_color, grey) !important;
    outline-offset: -2px !important;
}


#nav-bar {
    outline: 2px solid var(--ug-bg_color, powderblue) !important;
    outline-offset: -2px !important;
}
#TabsToolbar {
    outline: 2px solid var(--ug-bg_color, orange) !important;
    outline-offset: -2px !important;
}

Alles anzeigen

Horstmann

Zitat von Dharkness

Funktioniert hier im hellen Theme soweit ohne Probleme, leider zu viel Nacharbeit für das dunkle Theme.

Hmm, das mit den Testfarben ist wohl nicht so ganz ausgegoren....
Der Code sieht eigentlich keine Farbänderungen vor, ist nur für besseren Überblick beim Testen.

Vielen Dank für den Test!

Horstmann

Zitat von Mira_Belle

Wie bekomme ich die Tableiste & die "Navbar" auf eine Leiste?
In meinem Testprofil sind beide Leisten jeweils getrennt.

Oje, erster Test schonmal daneben gegangen - Oneliner kein Oneliner ....

Kein anderer CSS Code, keine Scripts, nur im Testprofil?
Und hättest Du evtl. einen Screenshot?

Danke für die Antwort.

Horstmann

Ich bastle seit einiger Zeit immer mal wieder an einem kleinen Oneliner CSS Code rum, und es würde mich interessieren was Ihr generell davon haltet - und, noch wichtiger, ob das Ding bei euch halbwegs funktioniert.

Die Idee dahinter ist, dass die Tableiste sich bis zu einer bestimmten Breite, bzw. einer bestimmten Anzahl an Tabs, verbreitert, den Raum aber wieder frei gibt sobald genügend Tabs geschlossen sind.

Die Navbar passt sich entsprechend in der Breite an, und füllt jeweils den kompletten verbleibenden Raum; im Gegensatz dazu kenne ich nur Oneliner welche eine feste Breite für die beiden Bestandteile - Navbar und TabLeiste - benutzen.
Kann natürlich gut sein ich habe was verpasst.

Fall jemand Lust hat, wäre es prima wenn ihr den Code mal kurz in ein Testprofil werfen könntet; ich bin hier momentan auf Mac und 115esr festgenagelt, da kann ich nur begrenzt testen.

Speziell die Window Control Buttons kann ich am Mac eh nicht testen; würde mich interessieren wie das so passt oder auch nicht, auch in Vollbild und mit/ohne Titelleiste aktiv.

Ein weiterer Aspekt - bei maximaler Tableistenbreite darf sich deren Breite nicht dann ändern, wenn der Overflow ansetzt, und unabhängig davon ob der Neuer Tab Button oder der Alltabs Button vorhanden sind.

Momentan klappt das nur sauber, wenn der Neuer Tab Button da ist und rechts der Tabs sitzt; das ist nur eine unnötig verwirrende Kleinigkeit, hat aber gedauert bis ich zumindest die Ansätze korrekt hatte.

Hier dann der Code; Kommentare sehr willkommen.

Es ist ein Testcode, also nicht besonders sauber; Testfarben lassen sich ganz oben abschalten:

CSS

                     /*****  Responsive Oneliner Test A  *****/ 


/* uncomment to turn test colors OFF */ 
/*
:root {
    --ug-bg_color: none;
}
*/


/* Tabs bar max width */ 

#TabsToolbar {
    --ug-max_width: 60vw;
}



:root:not([customizing]) #navigator-toolbox {
    display: flex !important;
    position: relative !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    --tabs-navbar-shadow-size: 0px !important;
    --toolbarbutton-outer-padding: 0px !important;
}

#PersonalToolbar {
    width: 100vw !important;
}

:root:not([customizing]) #nav-bar {
    flex-grow: 1 !important;
    flex-basis: 0px !important;
    --toolbar-start-end-padding: 2px !important;
}

#urlbar-container {
    flex-shrink: 1 !important;
    min-width: 200px !important;
    /*max-width: 520px !important;*/
}

/* Only for url container max-width set */ 
/*
#nav-bar-customization-target  {
    justify-content: center !important;
}
*/

/* Url popup width */ 
#urlbar[breakout][breakout-extend] {
    width: 400px !important;
    /*right: 0 !important;
    left: auto !important;*/
}



/* Only for url container max-width set */ 
/*
#nav-bar-customization-target  {
    justify-content: center !important;
}
*/
/* url container left  */ 
/*
#urlbar-container {
    order: -1 !important;
}
*/


#TabsToolbar {
    background-color: var(--toolbar-bgcolor) !important;
    --toolbarbutton-inner-padding: 8px !important;
    --ug-button_width: 
          calc(2 * var(--toolbarbutton-inner-padding) + 16px + 2 * var(--toolbarbutton-outer-padding));
    --ug_contain: initial;
    padding-inline: 12px 2px !important;
}

:root[uidensity="compact"] #TabsToolbar {
    --toolbarbutton-inner-padding: 6px !important;
}

@media screen and (max-width: 1300px) {
    #TabsToolbar {
        --ug-max_width: 40vw;
    }
}

/**  fix tab width jump when tab content changes  **/

:root:not([customizing]) .tabbrowser-tab:not([pinned]) {
    width: 205px;
}


/**  control tab overflow, currently needs new tab button in tabs bar on the right  **/

.scrollbox-clip[orient="horizontal"] {
    contain: var(--ug_contain, initial) !important;
}

#tabbrowser-tabs:not([overflow], [hasadjacentnewtabbutton]) {
    max-width: var(--ug-max_width) !important;
}

#tabbrowser-tabs[hasadjacentnewtabbutton] {
    max-width: calc(var(--ug-max_width) - 1 * var(--ug-button_width)) !important;
}

/**  fix tab bar width jump when hitting overflow  **/
#tabbrowser-tabs[overflow] {
    max-width: calc(var(--ug-max_width) - 1 * var(--ug-button_width)) !important;
}

#tabbrowser-tabs[overflow][hasadjacentnewtabbutton] {
    max-width: calc(var(--ug-max_width) - 3 * var(--ug-button_width)) !important;
}


@supports -moz-bool-pref("browser.tabs.tabmanager.enabled") {
#tabbrowser-tabs[overflow] {
    max-width: calc(var(--ug-max_width) - 0 * var(--ug-button_width)) !important;
    }

#tabbrowser-tabs[overflow][hasadjacentnewtabbutton] {
    max-width: calc(var(--ug-max_width) - 2 * var(--ug-button_width)) !important;
    }
}




#tabs-newtab-button {
    padding-left: 2px !important;
}

.titlebar-spacer { 
    display: none !important;
}


/**   window control buttons right / position for Mac   **/

@media (-moz-platform: macos) {

:root[tabsintitlebar]:not([sizemode="fullscreen"]) #TabsToolbar > .titlebar-buttonbox-container {
    position: absolute !important;
    background-color: var(--ug-bg_color, hsla(50, 80%, 82%, 1)) !important;
    top: 0 !important;
    right: 0 !important;
    height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) !important;
    z-index: 3 !important;
    padding-inline: 2px 16px !important;
}

#TabsToolbar .titlebar-buttonbox {
    margin-inline: 0 !important;
}

:root[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
    padding-right: calc(72px + 0px) !important;
}
}


/**   window control buttons right / position for Windows ??   **/

@media (-moz-platform: windows) {

:root[tabsintitlebar]:not([sizemode="fullscreen"]) #TabsToolbar > .titlebar-buttonbox-container {
    position: absolute !important;
    background-color: var(--ug-bg_color, hsla(50, 80%, 82%, 1)) !important;
    top: 0 !important;
    right: 0 !important;
}

:root[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
    padding-right: calc(138px + 0px) !important;
}
}


/*  window control buttons off  Test  */
/*
.titlebar-buttonbox-container { 
    display: none !important;
}

:root[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
    padding-right: 12px !important;
}
*/



/*  test colors  */

#PersonalToolbar {
    background-color: var(--ug-bg_color, hsla(200, 45%, 87%, 1)) !important;
}
#nav-bar {
    background-color: var(--ug-bg_color, hsla(120, 50%, 85%, 1)) !important;
}
#TabsToolbar {
    background-color: var(--ug-bg_color, hsla(50, 80%, 82%, 1)) !important;
}

.tabbrowser-tab .tab-background  {
    background-color: hsla(0, 0%, 90%, 1) !important;
    background-image: none !important;
    outline: 1px solid hsla(0, 0%, 70%, 1) !important;
    outline-offset: -0px !important;
    box-shadow: none !important;
}

.tabbrowser-tab:not([visuallyselected], [multiselected], :hover) .tab-background  {
    background-color: hsla(0, 0%, 80%, 1) !important;
    outline-offset: -1px !important;
}



/****    Extra stuff    ****/



/*  test border between tabs / navbar  OFF  */

#TabsToolbar {
    /*border-image: linear-gradient(to right, darkblue, darkorchid) 1 / 0 4px 0 0 !important;*/
    /*box-shadow: 10px 0px 12px 0 rgba(255, 0, 0, 1),
                         inset -10px 0px 12px 0 rgba(255, 0, 255, 1) !important;*/
    /*z-index: 3 !important;*/
}

/*
#nav-bar {
    border-image: linear-gradient(to right,
        transparent 0px, cyan 6px, orange 6px 8px, 
        red 8px, transparent 14px) 14 / 0 0 0 14px / 0 7px !important
}
*/


/*  testing outline for equal button distance, size  */
/*
toolbarbutton > image, .toolbarbutton-badge-stack  {
    outline: 1px solid hsla(0, 80%, 70%, 1) !important;
    outline-offset: -1px !important;
}
*/


/*  Tabs Ellipsis  */
  
.tab-label-container {
    mask-image: none !important;
}

.tab-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    /*text-overflow: " ..." !important;*/
    white-space: nowrap !important;
    max-width: 100% !important;    
}

/* disable alltabs button completely / must have browser.tabs.tabmanager.enabled = true */
/*
#alltabs-button {
    display: none !important;
}
*/

Alles anzeigen

Horstmann

Zitat von Shelly

... funktioniert.

Prima.

Horstmann

Zitat von 2002Andreas
Zitat von Shelly

die Lesezeichen mittig anzeigen zu lassen

Teste bitte mal:
CSS
#PlacesToolbarItems {
  display: flex !important;
  justify-content: center !important ;
}

Damit geht allerdings der Overflow bei mir in beide Richtungen bei schmalen Fenster/vielen Bookmarks; links werden Bookmarks abgeschnitten/verschwinden und nur die rechts in's Overflow Menü geschoben.

Daher Vorschlag:

CSS

#PlacesToolbarItems { 
    justify-content: safe center !important;
}

Beiträge von Horstmann

userChrome.js Scripte für den Fuchs (Diskussion)

userChrome.js Scripte für den Fuchs (Diskussion)

Höhe Tabs reduzieren / Webseite Icon verschieben / Schriftgröße Webadresse vergrößern

CSS-Style für die Button [Visit from clipboard]

CSS-Style für die Button [Visit from clipboard]

Standard-Favicon ("Weltkugel") in Lesezeichenleiste Farbe ändern

Standard-Favicon ("Weltkugel") in Lesezeichenleiste Farbe ändern

Standard-Favicon ("Weltkugel") in Lesezeichenleiste Farbe ändern

Seitennavigation - Fly Out Menü

Skript für zusätzliche Toolbar, nicht angezeigt im Anpassen Fenster

Skript für zusätzliche Toolbar, nicht angezeigt im Anpassen Fenster

dhl.de: keine EInloggen möglich, Seite wechselt ständig

Kleiner Testcode für flexiblen Oneliner

Kleiner Testcode für flexiblen Oneliner

Kleiner Testcode für flexiblen Oneliner

Kleiner Testcode für flexiblen Oneliner

Kleiner Testcode für flexiblen Oneliner

Kleiner Testcode für flexiblen Oneliner

Lesezeichen mittig anzeigen lassen

Lesezeichen mittig anzeigen lassen