Beiträge von Horstmann

Zitat von Mr. Cutty

Verkleinere ich die Browserbreite entsprechend kann das Popup etwas länger sein als die Searchbar, dies ist aber tolerierbar. Ich nutze den Browser eh hauptsächlich bei voller Browserbreite.

Vom Schlagschatten habe ich keinen Code der beim Popup funktioniert.

Nochmal was zum Probieren, das könnte/sollte dann ähnlich aussehen wie das URL Popup, mit Schagschatten etc., und mittig sitzen bis das Suchfenster sehr klein wird.

Die korrespondierenden Einträge in deiner CSS müssten dann entsprechend gelöscht bzw. in der Form geöndert werden, v.a. alles was die Searchbar/Popup Breite betrifft, und der komplette Popup Code.

Es sollte keinen Ärger geben mit anderen Popups, aber das hab ich nicht komplett getestet.

#search-container {
    width: 380px !important;
    max-width: 380px !important;
}

#PopupSearchAutoComplete {
    width: calc(380px + 2*var(--panel-shadow-margin)) !important;
    max-width: calc(380px + 2*var(--panel-shadow-margin)) !important;
    margin-left: calc(0px - var(--panel-shadow-margin)) !important;
    background: transparent !important;
    --panel-shadow: 2px 2px 2px #787878 !important;
    --panel-border-color: #7FB0EF !important;
    --panel-border-radius: 4px !important;
    --panel-shadow-margin: 4px !important;
    --ug-panel-border-width: 2px !important;
}

slot {
    border-width: var(--ug-panel-border-width, initial) !important;
}

Nachtrag: Oder etwas einfacher, könntest du auch probieren:

#search-container {
    min-width: 250px !important;
    max-width: 380px !important;
}

#PopupSearchAutoComplete {
    margin-left: calc(0px - var(--panel-shadow-margin)) !important;
    background: transparent !important;
    --panel-shadow-margin: 4px !important;
    --panel-shadow: 2px 2px 2px #787878 !important;
    --panel-border-color: transparent !important;
    --panel-border-radius: 4px !important;
    border-radius: 4px !important;
    outline: 2px solid #7FB0EF !important;
    outline-offset: calc(0px - var(--panel-shadow-margin) - 2px) !important;
}

Zitat von Mira_Belle

Vollbild! Kann man eine solch wichtige Information nicht angeben!!

Mein Reden...

Zitat von Mr. Cutty

Standard? Auch beim Standard-Theme Hell. Wechsel ich z.B. zum Theme Firefox Alpenglow, ist es lila um die Searchbar. Beim Theme Dunkel ist es türkis.

Ist dann wohl vom Betriebssystem abhängig, und dessen Einstellungen.

Nachtrag, ist vom OS abhängig; mein macOs ist auf graues Interface gestellt, in Normalmodus ist der Rahmen auch blau etc..

Zitat von Mr. Cutty

Passt bei mir.

Den gesamten CSS-Code in der userChrome.css hatte ich gepostet und auch wenn die Standard-Theme Hell und andere die bei Firefox Standardmäßig dabei sind aktiviere, passt das Pop-Up immer noch schön drunter.

Dann ist ja prima.

Aber eine Frage noch - das könnte ein OS Ding sein, oder weil ich noch auf 115esr bin - woher kommt der blaue Rahmen um den search-container, also das Eingabefeld vom Suchfeld?

Bei mir ist und bleibt der Rahmen vom Eingabefeld grau, nur das Popup ist blau umrandet.

Zitat von Mr. Cutty

Was ich mit Schlagschatten meinte ist z.B. bei #1 und #14 zu sehen.

Theme: Shades of Firefox (die CSS-Sachen gibt es teilweise schon länger als ich das Theme nutze).

Der CSS-Code entspricht den Stand 21.05.2024 um 15:42 Uhr.

Code

etc...

Wenn ich noch einen dieser base64 Icon Codes sehe, küble ich über alles hier ....

Um 18.04 ist hier das Popup Fenster immer noch um ca. 2 Pixel nach rechts verschoben.

Ergo - Bist du sicher, dass absolut gar kein anderer CSS Code benutzt wird als der in #23, oder eine Erweiterung die das Layout beeinflussen könnte?

Zitat von Mr. Cutty

Und die Screenshots siind auch nicht gefälscht, so funktioniert es bei mir.

Fälschung meinte ich ja auch nicht, glaube aber da fehlt halt noch was an Code zum besseren Verständnis.

Was den Schatten von manchen Popups angeht, das ist etwas abhängig vom Betriebssystem; wir hatten das Thema mal vor einer Weile....

Zitat von Mr. Cutty

Horstmann Bis auf den Schlagschatten (beim Suchergebnisfenster) passt es ja nun.

Ich weiss nur nicht, wie das mit dem Code den du hier angibst funktionieren kann.
Ähnlich verblüffend ist, dass sich deine Screenshots dauernd ändern, ohne dass der jeweilige Code dazu passt.

Offengestanden habe ich den Verdacht, dass du Code und Screenshots bunt durcheinander hier einstellst; und wie schon erwähnt, zweimal die Hälfte fehlt scheints.

ZB ist da plötzlich ein CSS Code für den #search-container, der vorher nicht erwähnt war - wieso nicht?

Wenn man dir jede nötige Info einzeln aus der Nase ziehen muss, dann könntest du es mal auf Reddit versuchen, da ist das normal.

Zitat von Mr. Cutty

Jetzt wäre noch der übliche versetze Schatten unten/rechts gut, den ich nicht hinbekommen habe, und die Größe/Länge des Auswahlfensters dem der Searchbar anzupassen.

Dieses Popup ist generell so breit wie das Suchfeld, daher würde ich an der Breite nicht rumbasteln.

Wenn du dem Popup eine Border gibst, wird es aber um diese Border breiter - in deinem Fall 4px - und weil die position fixed ist, ohne weitere Angabe im Fx Code, sitzt das Fenster dann eigentlich linksbündig, aber um diese 4 Pixel verbreitert.

Was aber bei dir etwas anders zu sein scheint, daher vermute ich mal dass du wichtige Teile deines CSS Codes hier nicht angegeben hast.

Daher wäre mein Vorschlag, dass du erstmal deinen Code komplett angibst, oder zumindest alles was mit searchbar, popups, panels etc. zu tun hat.

Eines könnte man noch probieren, s. andere Thread.

Zitat von Mr. Cutty

Danke. Durch das entfernen dieses Codes ist die Url-Auflistung schon mal wieder da wo sie hingehört (fast).

Du könntest eines noch probieren, gefunden hier.

Zitat

They changed CSS variable name so this is what I did.

top: calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2) !important; 

Zitat von Sören Hentzschel

Zitat von Horstmann

Der Wert von 0.01px ist mir zwar ein Rätsel

Der Grund für diese merkwürdige Angabe ist, dass Rahmen immer mindestens einen Gerätepixel breit sind, selbst wenn du 0.01px angibst. Wenn du aber einen höherauflösenden Bildschirm verwendest, wird bei Angabe von 1px etwas mehr verwendet. Mit diesem Trick wird vermieden, dass Bruchteile eines zusätzlichen Gerätepixels verwendet werden.

Dankeschön!
Irgendwas in der Art hatte ich mir gedacht, war aber etwas ratlos was genau der Grund ist.

Zitat von Sören Hentzschel

border-top-color: transparent macht aber im Vergleich dazu tatsächlich einen Unterschied, weil dann der Rahmen zwar nicht sichtbar, aber ja noch da ist und das Element daher um die Breite des transparenten Rahmens verschoben ist. Das hast du selbst ja auch erkannt, wie man an deinem Beispiel sieht. Ich wollte es nur der Vollständigkeit halber erwähnt haben, damit niemand denkt, das „macht keinen Unterschied“ würde sich auch noch darauf beziehen.

Aus dem Grund würde ich erstmal border-top-color: transparent probieren, eben weil es ein quasi physischer "Baustein" ist, den Mozilla mit Absicht dort eingebaut hat.

Wenn der Inhalt dann visuell nicht mittig sitzt o.ä, nimmt man die Border halt ganz raus.

Der Wert von 0.01px ist mir zwar ein Rätsel, aber das hier ist alles was ich aktuell dazu finden konnte.

Zitat von SuperDAU#0815

Tipps aus #24 funktionieren beide.

Prima!

Zitat von SuperDAU#0815

Danke, aber hat leider nichts geändert.

Ich hab mal zurückgelesen, scheint's du hast eine Menge alten Code am Laufen der in die Quere kommen könnte, und den kennt hier offensichtlich keiner.

Gepostet hattest du auch nur einen Bruchteil davon.

Vielleicht ist es an der Zeit sich mal die Browserwerkzeuge anzuschauen.

Zitat von SuperDAU#0815

Hallo,

ab FF 126 ist die Linie in ähnlicher Form wieder da, läuft jetzt aber scheinbar unter allen Tabs durch und stört somit nochmehr.

Würde mich freuen, wenn das behebbar wäre.

Du könntest mal einen dieser beiden Codes probieren:

#nav-bar {
    border-top: 0px !important;
}

Oder:

#nav-bar {
    border-top-color: transparent !important;
}

Zitat von milupo

Zitat von Endor

siehe mein Script oben.

Habe ich dann gesehen, ich weiß aber nicht vorher, ob und wer etwas schreibt. Außerdem interessiert es einen Nutzer vielleicht, was sich wirklich geändert hat und braucht sich dann aber nicht durch das ganze Skript kämpfen.

Absolut nichts gegen die grosszügige Hilfe von Endor , versteht sich, aber ein kommentarlos korrigiertes Script/CSS Code etc. hat nur begrenzten Nutzen für nur Einige - zu wissen was und/oder warum geändert wurde, und Hinwiese wie man es selber hinbekommt, das hilft dafür und für viele andere Anwendungen.

Es gibt natürlich auch schon einige hilfreiche Beiträge dazu, wie hier etc..

Zitat von Mira_Belle

Zitat

... wenn man nicht alles selber macht ...

Menno, das hört sich jetzt aber böse an.

Habe auch schon dran gehangen, aber keine brauchbare Version zustande gebracht.
Muss aber gesehen, war auch nicht so intensiv am Basteln.

Werde Deine Version mal testen.
-------------------------------------------
Funktioniert! FF 125.0.3 (64-Bit)

Sorry, hab schnell noch das Smiley nachgeliefert, war natürlich nur ein Scherzchen..
Ich hab deine CSS Lösungen in einigen Scripts, funktionieren alle prima.

Und nicht zu vergessen dein geniales Profilbutton Script, das benutze ich mehr als alles Andere.

Selber habe ich zu wenig Ahnung von JS um den potentiellen Fehler zu finden; hab's versucht, war aber nix.

Zitat von Speravir

Zitat von Mira_Belle

var buttonicon = "LettersT-2.png"

Am Ende dieser Zeile (Nr. 19 oben) fehlt ein Semikolon. Ich sehe aber gerade, dass der Fehler zuvor schon bei Horstmann vorhanden ist, dort in Z.16.

Danke, Fehler behoben.
Und ja, das mit der Variable ist der Clou am Ganzen.

Und hier noch eine Variante mit im Script integriertem CSS - wenn man nicht alles selber macht, hoffe das klappt so bei Euch.
Das benutzt das abgewandelte Script von 2002Andreas , die CSS Formel von Mitleser weiter oben, und von Mira_Belle die Lösung für 2 separate Icons, aus einem früheren Projekt.
Vielen Dank für die Hilfe!

Icons hängen unten an, wieder brav in chrome/icons packen, und einige CSS Einträge zum Spielen, grossteils auskommentiert, aber da zur Veranschaulichung.

WIe's dann aussieht - hoffentlich - in Toolbar bzw. Overflowmenü, s. Screenshots (nicht über die Farben etc. wundern, das ist nur mein Testprofil).

// https://www.camp-firefox.de/forum/thema/136599-tooltips-nur-f%C3%BCr-die-bedienoberfl%C3%A4che-ausschalten/?postID=1249369#post1249369

// tooltip-toggle.uc.js 
// Toggle tooltips, CSS, Icons, raus #6b

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

    try {
        CustomizableUI.createWidget({
            id: 'tooltip_button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                var toolbaritem = aDocument.createXULElement('toolbarbutton');
                var props = {
                    id: 'tooltip_button',
                    class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                    removable: true,
                    label: 'Tooltip Toggle',
                    tooltiptext: "toggle tooltips",
                    background: Services.prefs.getBoolPref('browser.chrome.toolbar_tips') ? 'red' : 'cyan',
                    oncommand: '(' + onCommand.toString() + ')()'
                };
                for (var p in props)
                toolbaritem.setAttribute(p, props[p]);
                return toolbaritem;
            }
        });
       } catch(e) { }  

    function onCommand() {
               var prefs = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefBranch);

               var isEnabled = !prefs.getBoolPref('browser.chrome.toolbar_tips');
               prefs.setBoolPref('browser.chrome.toolbar_tips', isEnabled);

               if (isEnabled) {
                     tooltip_button.setAttribute('background', 'red');
               }
               else {
                     tooltip_button.setAttribute('background', 'cyan');
               }
           }

   (function () {

        let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
        let iconOff = "LettersToff-2.png";           // OFF icon     
        let iconOn = "LettersT-2.png";              // ON icon   
        let css = `

            /***  icons  ON/OFF  ***/
            toolbar:not([customizing]) #tooltip_button[background ="cyan"] {
                list-style-image: url("${ProfilePath}/${iconOff}") !important;
            }
            #tooltip_button {
                list-style-image: url("${ProfilePath}/${iconOn}") !important;
            }

            /*** tooltips OFF adjustments ***/
            /* button in toolbar */
            toolbar:not([customizing]) #tooltip_button[background ="cyan"]:not(:hover, :active) .toolbarbutton-icon {
                /*opacity: 0.5 !important;
                background: pink !important;*/
            }
            /* button in overflow menu */
            :root:not([customizing]) #tooltip_button[background ="cyan"]:not(:hover, :active) label {
                opacity: 0.5 !important;
                text-decoration: line-through red;
            }

            /*** tooltips ON adjustments ***/
            /* 
            toolbar:not([customizing]) #tooltip_button[background ="red"]:not(:hover, :active) .toolbarbutton-icon {
                background: lightblue !important;
            }
            */
        `;
        let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
        let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
        sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
        })(); 
})();

Zitat von Mira_Belle

Nu aber, sorry.

JavaScript

        var button = document.getElementById('tooltip_button');
        if (isEnabled) {
            button.style.background = 'red';
        } else {
            button.style.background = 'cyan';
        }

Hmm, will bei mir nicht klappen - bin aber auf 115esr/Mac, evtl. liegt's daran?

Was diesen background Teil angeht, das dient nur zum Erstellen der Attribute, die man dann im CSS weiterverwenden kann, nicht dazu den Hintergrund zu färben.

Zitat von Mira_Belle

JavaScript

// https://www.camp-firefox.de/forum/thema/136599-tooltips-nur-f%C3%BCr-die-bedienoberfl%C3%A4che-ausschalten/?postID=1249369#post1249369

// tooltip-toggle_5.uc.js raus#1


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

    try {
        CustomizableUI.createWidget({
            id: 'tooltip_button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                var currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
                var buttonicon = "LettersT-2.png"      
                    var toolbaritem = aDocument.createXULElement('toolbarbutton');
                    var props = {
                        id: 'tooltip_button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Tooltip Toggle',
                        tooltiptext: "toggle tooltips",
                        style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) + '");',
                        background: Services.prefs.getBoolPref('browser.chrome.toolbar_tips') ?
                  'red' : 'cyan',
                        oncommand: '(' + onCommand.toString() + ')()'
                };
                for (var p in props)
                    toolbaritem.setAttribute(p, props[p]);
                return toolbaritem;
            }
        });
       } catch(e) { };  

    function onCommand() {

               var prefs = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefBranch);

               var isEnabled = !prefs.getBoolPref('browser.chrome.toolbar_tips');
               prefs.setBoolPref('browser.chrome.toolbar_tips', isEnabled);

               if (isEnabled)
                     tooltip_button.setAttribute('background', 'red')
               else
                     tooltip_button.setAttribute('background', 'cyan');
    };


    (function () {
        let sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);       
        let uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`

        /* tooltips OFF adjustments */
        /* button in toolbar */
        toolbar:not([customizing]) #tooltip_button[background ="cyan"]:not(:hover, :active) .toolbarbutton-icon {
            opacity: 0.5 !important;
        }
        
        /* button in overflow menu */
        :root:not([customizing]) #tooltip_button[background ="cyan"] label {
            opacity: 0.5 !important;
        }
        `), null, null);        
        sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
    })

})();

Alles anzeigen

Oups, funktioniert nur leider nicht, jedenfalls der CSS Teil.