Beiträge von Speravir

Speravir

Zitat von milupo

Das kann jeder für sich entscheiden, vielleicht fügt man einen Kommentar in das Skript ein, der auf die unterschiedlichen Möglichkeiten hinweist.

Dann benötigt man aber den Repeating-Linear-Gradient nicht und keine drei Wertangaben und auch keine Angabe zum Winkel, sondern es würde ein weiterer Linear-Gradient ausreichen (also ein vor den schon vorhandenen gesetzter). Allerdings hast Du natürlich insofern Recht, als es viiiel einfacher ist, nur den dritten Wert an den zweiten anzupassen.

Zitat von milupo

Endor bevorzugt gestreift und ich verwende derzeit auch gestreift.

Me too. War meines Erachtens auch schon bei den Addons so.

Speravir

Zitat von Sören Hentzschel

Einfach die URL eines Themas oder Beitrags einfügen,

(etc.) Danke!

Zitat von Sören Hentzschel

Du kannst jederzeit die manuelle Link-Funktion nutzen.

So, wie ich es schon die ganze Zeit mache … deswegen ja die Nachfrage.

Speravir

Zitat von milupo

Das funktioniert bei mir gar nicht im Nightly. Ich habe dann z-index entfernt und dann läuft es.

Hmpf, dabei habe ich das extra in einem neuen Profil getestet – allerdings nicht ohne Z-Index.

Zitat von milupo

Übrigens, bei der letzten Farbangabe von repeating-linear-gradient entscheidet die Pixelangabe darüber, ob der Balken durchgehend farbig (6px) oder nicht durchgehend farbig (12px) erscheint.

Oh, das ist ein Fehler. Bei mir selbst ist dieser Faux-Pas nicht vorhanden (stand schon seit weiß-ich-nicht-mehr auf 12px, vielleicht hatte ich das mal für mich korrigiert), aber ich hatte das Skript hier von weiter oben kopiert. Die Pixelangaben im Repeating-Linear-Gradient hängen natürlich voneinander ab; man könnte zum Beispiel auch den dritten Wert auf 6px belassen und dafür den zweiten auf 3px setzen. Bei gleichen Werten ergibt diese Deklaration keinen Sinn.

Endor , ich habe das Skript in Beitrag 30 aktualisiert. Neben der anderen Pixelangabe und der Entfernung des Z-Indexes habe ich auch ein (bei mir) unnötiges !important entfernt.

Speravir

Zitat von .DeJaVu

Code

[thread='131191'][/thread]
[post='1153874'][/post]

Sören Hentzschel (oder jemand anderes): wie fügt man das eigentlich hier ein? Also außer durch direktes Eintippen. Ich habe bisher immer ausschließlich die Linkfunktion genutzt (und mag die Einblendungen auch nicht, aber evtl. gibt es zum Teil doch Vorteile).

Speravir

Zitat von milupo

Ich habe jetzt mal bei #urlbar-background in meinem CSS-Code left: 2em; z-index: -2 dazugefügt und die Prozessleiste funktioniert nun:

[…]

Die Werte für left und z-index sind willkürlich gewählt. Wichtig ist hier, dass der Wert von z-index negativ sein muss.

Wow! Da denke ich mir doch, warum nicht alles auf #urlbar-background anwenden? Und das sieht bei mir mit dem anderen Userstil sogar besser aus!
(Edit: Ein Fehler im CSS-Code repariert: 1x 6px → 12px, entsprechend folgender Postings Z-Index in #urlbar-background entfernt.)

JavaScript

/* LoadingBar.uc.js */
// Location Bar Enhancer5.1; Loading Bar0.3.0

(function(){
    var cssStr = `
            #urlbar-background {
                background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,0) 6px, rgba(255,255,255,1) 6px, rgba(255,255,255,1) 12px), linear-gradient(to right, rgba(255,255,255) 0%, rgba(69,69,69) 100%);
                background-size:0 0;
                background-repeat:repeat-x, no-repeat;
                transition: background-size 350ms ease 0s;
            }
            #urlbar-background:not([style="background-size: 0% 100%;"]) {
                animation: progress-bar-stripes 2s linear infinite;
            }
            @keyframes progress-bar-stripes {
                from {
                    background-position: 0 0;
                }
                to {
                    background-position: 51px 0;
                }
            }
    `.replace(/\s{2,}|\r|\n/,"");
    
    var style = document.createProcessingInstruction("xml-stylesheet", "type=\"text/css\"" + " href=\"data:text/css;base64," + btoa(cssStr) + "\"");
    var mainW = document.getElementById("main-window");
    document.insertBefore(style, mainW);

    function main(window) {
      var {document, gBrowser} = window;
      function $(id) { return document.getElementById(id) };
      var urlbar = $("urlbar-background");
      let pageProgress = 0;
      let async = makeWindowHelpers(window).async;
      var LoadingBar = {
        listener: {
          onChangeTab: function(e) {
            urlbar.style.backgroundSize = '0% 100%';
            pageProgress = 0;
          },
          onProgressChange: function(aBrowser,webProgress,request,curSelfProgress,maxSelfProgress,curTotalProgress,maxTotalProgress) {
            if (gBrowser.contentDocument === aBrowser.contentDocument) {
                var val = (curTotalProgress-1)/(maxTotalProgress-1);
                pageProgress = val;
                urlbar.style.backgroundSize = (100*val) + '% 100%';
                if (val > 0.9)
                  async(function() {
                    if (pageProgress > 0.95)
                        urlbar.style.backgroundSize = '100% 100%';
                }, 1000);
            }
          },
          onStateChange: function() {
            if (pageProgress > 0.95){
                async(function() {
                    urlbar.style.backgroundSize = '0% 100%';
                    pageProgress = 0;
                }, 1000);
            }else{
                urlbar.style.backgroundSize = '0% 100%';
            }
          }
        }
      };

      gBrowser.tabContainer.addEventListener('TabSelect',LoadingBar.listener.onChangeTab,false);
      gBrowser.addTabsProgressListener(LoadingBar.listener);

      unload(function() {
        gBrowser.tabContainer.removeEventListener('TabSelect',LoadingBar.listener.onChangeTab,false);

        gBrowser.removeTabsProgressListener(LoadingBar.listener);
      }, window);
    }



    watchWindows(main, "navigator:browser");

    function runOnLoad(window, callback, winType) {
      window.addEventListener("load", function() {
        window.removeEventListener("load", arguments.callee, false);

        if (window.document.documentElement.getAttribute("windowtype") == winType)
          callback(window);
      }, false);
    }

    function runOnWindows(callback, winType) {
      function watcher(window) {
        try {
          callback(window);
        }
        catch(ex) {}
      }

      let browserWindows = Services.wm.getEnumerator(winType);
      while (browserWindows.hasMoreElements()) {
        let browserWindow = browserWindows.getNext();
        if (browserWindow.document.readyState == "complete")
          watcher(browserWindow);
        else
          runOnLoad(browserWindow, watcher, winType);
      }
    }

    function watchWindows(callback, winType) {
      function watcher(window) {
        try {
          callback(window);
        }
        catch(ex) {}
      }

      runOnWindows(callback, winType);

      function windowWatcher(subject, topic) {
        if (topic == "domwindowopened")
          runOnLoad(subject, watcher, winType);
      }
      Services.ww.registerNotification(windowWatcher);

      unload(function() { Services.ww.unregisterNotification(windowWatcher) });
    }

    function unload(callback, container) {
      let unloaders = unload.unloaders;
      if (unloaders == null)
        unloaders = unload.unloaders = [];

      if (callback == null) {
        unloaders.slice().forEach(function(unloader) { unloader() });
        unloaders.length = 0;
        return null;
      }

      if (container != null) {
        container.addEventListener("unload", removeUnloader, false);

        let origCallback = callback;
        callback = function() {
          container.removeEventListener("unload", removeUnloader, false);
          origCallback();
        }
      }

      function unloader() {
        try {
          callback();
        }
        catch(ex) {}
      }
      unloaders.push(unloader);


    function removeUnloader() {
        let index = unloaders.indexOf(unloader);
        if (index != -1)
          unloaders.splice(index, 1);
      }
      return removeUnloader;
    }
    
    function makeWindowHelpers(window) {
      let {clearTimeout, setTimeout} = window;

      function async(callback, delay) {
        delay = delay || 0;
        let timer = setTimeout(function() {
          stopTimer();
          callback();
        }, delay);

        function stopTimer() {
          if (timer == null)
            return;
          clearTimeout(timer);
          timer = null;
        }
      }

      return {
        async: async,
      };
    }

})();

Alles anzeigen

Endor , wenn es so läuft und Du das wieder übernimmst, erwähne auch und vor allem Milupo. ~~Ich habe hier übrigens z-index: -1 gewählt.~~ Und beachten: Ich habe nicht nur innerhalb des CSS-Bereichs etwas geändert, sondern auch in Zeile 33 32, damit das Skript überhaupt auf den Urlbar-Hintergrund angewandt wird. Das Skript habe ich wieder von weiter oben übertragen, kann also sein, dass die Farbangaben wieder geändert werden müssen.

Speravir

O je, bei mir ist auch noch noch dieses aktiv: Adressleiste per CSS entsprechend Sicherheitsstatus einfärben.

Man findet darin diese Stilregel:

CSS

#urlbar {
    position: relative;
    z-index: 4;
}

Endor , @laubenpieper oder milupo: Könnt ihr mal probeweise in das Skript im CSS-Bereich innerhalb desselben Urlbar-Selektors die beiden Deklarationen eintragen? Es geht hier, soweit ich mich erinnere, vor allem um den Z-Index.

Allerdings funktioniert das Skript so oder so nicht mehr exakt so wie früher.

Milupo, versteh ich das richtig, dass die Rundungen über den Userstil von dir selbst eingefügt sind, oder sind die demnächst Standard?

Speravir

Zitat von Boersenfeger

Vielen Dank für die Bearbeitung!

Zitat von Endor

Habe es hochgeladen.

[…]

~~Gebe nun nochmals MIthrandir Bescheid.~~ Erledigt

Freut mich alles!

Speravir

Nachdem ich mich vor längerer Zeit mal damit beschäftigt hatte (vergleiche Posting vom 18. Juli 2019), hatte ich das Skript fast vergessen. Es lief einfach weiter und funktionierte. Ich benutzte die Version, wie sie Endor oben in Beitrag #2 präsentierte.

Nun fiel mir in Version 86 aber auf, dass es einen Fehler und eine Warnung verursachte (sicher schon länger), und ich hab es daraufhin leicht umgebaut (Änderungen nur in den Zeilen 5, 15, 17, 20 und 23 plus Kommentarzeile nach vorn verschoben):

JavaScript

/* LoadingBar.uc.js */
// Location Bar Enhancer5.1; Loading Bar0.3.0

(function(){
    var cssStr = `
            #urlbar {
                background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,0) 6px, rgba(255,255,255,1) 6px, rgba(255,255,255,1) 6px), linear-gradient(to right, rgba(255,255,255) 0%, rgba(69,69,69) 100%);
                background-size:0 0;
                background-repeat:repeat-x, no-repeat;
                transition: background-size 350ms ease 0s !important;
            }
            #urlbar:not([style="background-size: 0% 100%;"]) {
                animation: progress-bar-stripes 2s linear infinite;
            }
            @keyframes progress-bar-stripes {
                from {
                    background-position: 0 0;
                }
                to {
                    background-position: 51px 0;
                }
            }
    `.replace(/\s{2,}|\r|\n/,"");
    
    var style = document.createProcessingInstruction("xml-stylesheet", "type=\"text/css\"" + " href=\"data:text/css;base64," + btoa(cssStr) + "\"");
    var mainW = document.getElementById("main-window");
    document.insertBefore(style, mainW);

    function main(window) {
      var {document, gBrowser} = window;
      function $(id) { return document.getElementById(id) };
      var urlbar = $("urlbar");
      let pageProgress = 0;
      let async = makeWindowHelpers(window).async;
      var LoadingBar = {
        listener: {
          onChangeTab: function(e) {
            urlbar.style.backgroundSize = '0% 100%';
            pageProgress = 0;
          },
          onProgressChange: function(aBrowser,webProgress,request,curSelfProgress,maxSelfProgress,curTotalProgress,maxTotalProgress) {
            if (gBrowser.contentDocument === aBrowser.contentDocument) {
                var val = (curTotalProgress-1)/(maxTotalProgress-1);
                pageProgress = val;
                urlbar.style.backgroundSize = (100*val) + '% 100%';
                if (val > 0.9)
                  async(function() {
                    if (pageProgress > 0.95)
                        urlbar.style.backgroundSize = '100% 100%';
                }, 1000);
            }
          },
          onStateChange: function() {
            if (pageProgress > 0.95){
                async(function() {
                    urlbar.style.backgroundSize = '0% 100%';
                    pageProgress = 0;
                }, 1000);
            }else{
                urlbar.style.backgroundSize = '0% 100%';
            }
          }
        }
      };

      gBrowser.tabContainer.addEventListener('TabSelect',LoadingBar.listener.onChangeTab,false);
      gBrowser.addTabsProgressListener(LoadingBar.listener);

      unload(function() {
        gBrowser.tabContainer.removeEventListener('TabSelect',LoadingBar.listener.onChangeTab,false);

        gBrowser.removeTabsProgressListener(LoadingBar.listener);
      }, window);
    }



    watchWindows(main, "navigator:browser");

    function runOnLoad(window, callback, winType) {
      window.addEventListener("load", function() {
        window.removeEventListener("load", arguments.callee, false);

        if (window.document.documentElement.getAttribute("windowtype") == winType)
          callback(window);
      }, false);
    }

    function runOnWindows(callback, winType) {
      function watcher(window) {
        try {
          callback(window);
        }
        catch(ex) {}
      }

      let browserWindows = Services.wm.getEnumerator(winType);
      while (browserWindows.hasMoreElements()) {
        let browserWindow = browserWindows.getNext();
        if (browserWindow.document.readyState == "complete")
          watcher(browserWindow);
        else
          runOnLoad(browserWindow, watcher, winType);
      }
    }

    function watchWindows(callback, winType) {
      function watcher(window) {
        try {
          callback(window);
        }
        catch(ex) {}
      }

      runOnWindows(callback, winType);

      function windowWatcher(subject, topic) {
        if (topic == "domwindowopened")
          runOnLoad(subject, watcher, winType);
      }
      Services.ww.registerNotification(windowWatcher);

      unload(function() { Services.ww.unregisterNotification(windowWatcher) });
    }

    function unload(callback, container) {
      let unloaders = unload.unloaders;
      if (unloaders == null)
        unloaders = unload.unloaders = [];

      if (callback == null) {
        unloaders.slice().forEach(function(unloader) { unloader() });
        unloaders.length = 0;
        return null;
      }

      if (container != null) {
        container.addEventListener("unload", removeUnloader, false);

        let origCallback = callback;
        callback = function() {
          container.removeEventListener("unload", removeUnloader, false);
          origCallback();
        }
      }

      function unloader() {
        try {
          callback();
        }
        catch(ex) {}
      }
      unloaders.push(unloader);


    function removeUnloader() {
        let index = unloaders.indexOf(unloader);
        if (index != -1)
          unloaders.splice(index, 1);
      }
      return removeUnloader;
    }
    
    function makeWindowHelpers(window) {
      let {clearTimeout, setTimeout} = window;

      function async(callback, delay) {
        delay = delay || 0;
        let timer = setTimeout(function() {
          stopTimer();
          callback();
        }, delay);

        function stopTimer() {
          if (timer == null)
            return;
          clearTimeout(timer);
          timer = null;
        }
      }

      return {
        async: async,
      };
    }

})();

Alles anzeigen

Endor, willst Du das bei dir auf der Github-Ressource veröffentlichen? Mithrandir scheint ja leider völlig inaktiv zu sein.

Speravir

Zitat von Sören Hentzschel

Weder JPEG noch PNG sind das pauschal bessere oder schlechtere Bildformat und SVG als Vektorgrafikformat ist sowieso eine ganz andere Baustelle. JPEG zu verwenden ist jedenfalls definitiv kein Fehler, auch in der Verwendung für das Web nicht. Es kommt immer drauf an.

jahrud präsentiert Grafiken auf der Website. Ich bezog mich bei meiner Antwort auf diese Äußerungen in der Wikipedia (und inhaltlich gleich bei Wikimedia Commons), nach denen dort seit Jahren vorgegangen wird:

Zitat von Wikipedia, „Hilfe:Dateien“

Verwende

SVG, ein „verlustfreies“ Format, für Diagramme und Grafiken;

PNG, ein „verlustfreies“ Format, für Zeichnungen/Diagramme jeglicher Art (insbesondere Bilder mit Beschriftungen, gegebenenfalls auch für gescannte Bilder oder Fotos in Druckqualität) sowie für Grafiken, falls SVG nicht möglich ist;

Wie dort auch zu lesen ist, sind die Kompressionsartefakte bei JPEG unter Umständen ein Problem und genau die können erheblich dazu beitragen, dass Schrift unscharf dargestellt wird.

Zitat von Sören Hentzschel

Das Größen-Handling ist bei keinem Web-kompatiblen Format so kompliziert wie bei SVG.

Eben weil SVG ein Vektorformat ist, dachte ich, man müsse weniger Größenvorgaben machen, deshalb meine Äußerung, aber OK – und wenn es in Wordpress nicht erlaubt ist, hier im konkreten Fall auch nicht relevant.

Zitat von Sören Hentzschel

WebP bedeutet keinesfalls, Benutzer älterer Browser auszuschließen, da man problemlos mehrere Bildformate angeben kann.

Aha, stimmt. Was ich meinte, kann man unter Can I use... WebP image format nachsehen.

Speravir

Zitat von jahrud

Gibte es keine Lösung für dieses Problem?

Den Webseiten-Betreiber auf das Problem aufmerksam machen.

Zitat von jahrud

Auf meiner Website werden speziell Grafikdateien sehr unscharf dargestellt.

Ach, das bist Du selbst.

Ein Fehler, den ich sehe: Du solltest Grafiken nicht als JPEG darstellen, Nimm am allerbesten SVG, dann müsstest Du auch die ganzen Größenjonglagen nicht einbauen, oder wenigstens PNG (ich vermute, du konvertierst sie sowieso mit einem PHP-Modul, oder?). .DeJaVu schreibt von WEBP, was bei modernen Browsern oft bessere Ergebnisse trotz Komprimierung erzeugt (war ja auch ein Beweggrund der Entwicklung), ich erkenne aber nicht, wie er hier darauf kommt. Und man schließt Benutzer älterer Browser aus.

Eventuell ist es auch abhängig von den benutzen Schriften, aber das ist nur eine Vermutung ins Blaue hinein.

Zitat von jahrud

Wenn ich die Grafiken z.B. unter Chrome aufrufe, werden die ordnungsgmäß angezeigt.

Ich hab kein Chrome, aber SRWare Iron (Link zum Wikipedia-Artikel), und sehe keinen Unterschied. Soll heißen: In beiden Browsern ist die Darstellung der Schrift leicht unscharf; es handelt sich hier also sehr wahrscheinlich um kein Firefox-Problem.

Speravir

Lösung: Im Quelltext der Seite steht die Zeile

HTML

<link rel="icon" type="image/png" href="/data/styles/2/styles/LexwareTheme/favicons/favicon.ico" sizes="32x32" />

(ist doch gar kein PNG!). Wenn ich jetzt https://forum.lexware.de/data/styles/2/…ons/favicon.ico aufrufe, wird mir das Bild mit dem weißen L auf rotem Grund angezeigt (ich sehe gerade, dass Andreas es oben ebenfalls abruft), aber nur in Größe 16x16px, das Favicon im Tab ist jedoch auch hier das andere, das metromax für das falsche hält, denn:
Seit Urzeiten des Favicon-Mechanismus fragen die Browser auch nach einem Favicon direkt unterhalb der Domain, hier also nach https://forum.lexware.de/favicon.ico, und dieser Aufruf liefert dieses andere Bild – und das ist mit 48x48px größer!

Speravir

Tolle Idee. Tolle Erweiterungen dieser.

Zitat von Sören Hentzschel

Du fährst mit dem Cursor über das darüber liegende checkbox-Element.

Bzw. das radio-Element. Zusammen mit der hellsten verfügbaren Grünfarbvariable:

CSS

checkbox:hover image.checkbox-check[checked],
radio:hover image.radio-check[selected] {
    background: var(--green-50) !important;
}

Speravir

Danke für die Aufklärung.

Speravir

Zitat von Karthagos

Das würde aber auch in der Umkehr bedeuten, dass ich jede Seite, die ich aufrufe, in Cookiesbro definieren muß

Exakt. Bzw. ich kenne Cookiesbro nicht, aber andere Addons haben eine Standardvoreinstellung und dann muss man nur noch die Cookies definieren, die von dieser abweichen.

Speravir

Zitat von Sören Hentzschel

Durch die Verwendung von Elasticsearch entstehen zusätzliche Kosten, welche von mir aus privater Tasche bezahlt werden.

Upps, das überrascht mich. Also, dass dort weitere Kosten entstehen, denn ich dachte, das wäre freie Software, weil MediaWiki es ebenfalls nutzt, vergleiche Extension:CirrusSearch. Allerdings steht im Wikipedia-Artikel ja auch etwas zur Lizenzsituation.

Oder geht’s hier darum, dass Du einen weiteren Server benutzt oder benutzen musst?

Speravir

Zitat von 2002Andreas

Den Link dazu hatte Sören in Beitrag Nr. 2 gepostet...wo ist nun dein Problem wieder

Stimmt. Nur bezog ich mich ausschließlich auf Barbaras Posting, wollte das aber nicht sooo deutlich schreiben. Offensichtlich war auch Barbara selbst gar nicht klar, dass sie dasselbe Skript empfohlen hat.

Speravir

Zitat von Karthagos

Wo liegt mein Fehler

Welche Einstellungen hast Du in Bezug auf Cookies im Firefox selbst, also unter„Datenschutz & Sicherheit“? Dort solltest Du Cookies nicht löschen lassen, wenn das ein Addon übernehmen soll.

Speravir

Zitat von 2002Andreas

Nicht ganz.

Wenn schon, dann ist es ist ein von mir verändertes Script von Aris, was ich auch extra geschrieben hatte.

Wo Du Recht hast, hast Du Recht. Und tatsächlich hast Du das ja in das Skript eingetragen. Da habe ich nicht genau genug aufgepasst/weit genug gelesen.

(Das wäre aber nicht passiert, wenn der Link zu Deinem Posting angegeben worden wäre. Womit wir dann wieder beim alten Streitthema wären …)

Speravir

Zitat von BarbaraZ-

Als Alternative gibt es hier noch was von Andreas, welches ich nutze

Nein, du nutzt eines von Aris (siehe unter CustomJSforFx/scripts). Steht auch so in der ersten Zeile.

Speravir

Zitat von ch55

Vielen Dank für die zahlreichen Hinweise, von denen zwei in Kombination zur Lösung führten.

Und dir Danke für die Rückmeldung.

Zitat von Zitronella

oh bezüglich alter Firefox Version war das natürlich mein Fehler, irgendwie hatte ich mich in der Versionsnummer geirrt oder verlesen.

Allet jut. Wie ging noch mal die Redewendung? „Wer ohne Fehler im Glashaus sitzt, rufe als erstes ‚Jehova‘“ oder so?

Beiträge von Speravir

Url-Bar farbiger Balken beim laden.

2020-Update 2: Aktualisierung auf WoltLab Suite 5.3

Url-Bar farbiger Balken beim laden.

2020-Update 2: Aktualisierung auf WoltLab Suite 5.3

Url-Bar farbiger Balken beim laden.

Url-Bar farbiger Balken beim laden.

Url-Bar farbiger Balken beim laden.

Url-Bar farbiger Balken beim laden.

Ausgefranste Schrift auf meiner Website

Ausgefranste Schrift auf meiner Website

Schönheitsfehler falsches Favicon

about:preferences#privacy - Reihenfolge geändert

Neue Suchfunktion, powered by Elasticsearch

Cookies in Firefox verwalten

Neue Suchfunktion, powered by Elasticsearch

Wer hat eine funktionierende Version von RestartFirefoxButtonM.uc.js

Cookies in Firefox verwalten

Wer hat eine funktionierende Version von RestartFirefoxButtonM.uc.js

Wer hat eine funktionierende Version von RestartFirefoxButtonM.uc.js

javascriptvoid(0)