Statusleiste mit Fortschrittsanzeige?

NoNameNeeded

Ich glaube zwar nicht, dass das in sinnvoller Weise umsetzbar ist aber ich frage einfach mal:
Manche kennen sicher noch die Fortschrittsanzeige die es mal in der Statusleiste gab (ja, die Statusleiste gibt es in dem Sinne auch nicht mehr, dazu später mehr).

Dazu meine Frage: Ist es möglich so etwas wieder zu basteln?

Es gibt ein Addon, welches etwas ähnliches macht (nur halt nicht in der Statusleiste):
https://addons.mozilla.org/de/firefox/add…d-progress-bar/

Allerdings ist das nicht sehr zufriedenstellend, da die Leiste erst angezeigt wird, wenn die Seite schon fast geladen ist, die gesamte Ladezeit über ist diese Leiste also gar nicht zu sehen (es müsste also ein anderer Code sein).

Da es ja die Statusleiste auch nicht mehr gibt, habe ich dazu ein css Script gefunden, da sollte diese Fortschrittsanzeige also dann angezeigt werden:

CSS

/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/
:root {
  --statusbar_background_color: grey;
  --statusbar_font_color: black;
}

:-moz-any(statuspanel,#statuspanel) {
  -moz-appearance: none !important;
  background-color: unset !important;
  width: unset !important
  border: 0 !important;
}

#browser-bottombox {
    height: 22px;
    border: 0px solid transparent !important;
    border-right: 1px solid transparent !important;
    box-shadow: 0 2px #c0c0c0 inset, 1px 3px #505050 inset, -1px -1px #fff inset !important;
    padding-top: 1px !important;
}
#statuspanel {
    height: 18px !important;
    left: 0px !important;
    width: 100% !important;
    bottom: 1px !important;
    padding-left: 3px !important;
    padding-top: 1px !important;
    padding-bottom: 2px !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    transition-property: none !important;
    /*box-shadow: 1px 1px #505050 inset, -1px -1px #fff inset !important;*/

}
#statuspanel-inner {
    font-size: 12pt !important;
    height: 14px !important;
}
#statuspanel-label {
    border: none !important;
    padding: 0px !important;
    background: transparent !important;
}

html[inFullscreen="true"] #browser-bottombox {
    display:none !important;
}
html[inFullscreen="true"] #statuspanel {}
    
#status-bar {
   background: transparent !important;
   height: 22px;
   margin-top: -3px;
}

Alles anzeigen

Wie gesagt, ich glaube eigentlich nicht, dass das gehen wird aber fragen kostet ja nichts (und natürlich könnte ich wirklich sehr gut verstehen wenn sich niemand die Mühe machen will, so etwas nachzubasteln).

Thiersee

Du brauchst nichts basteln, es gibt auch diesen Add-On

Download Manager (S3)

Es wird eine Status-Leiste (unten) eingeblendet, siehe Bild

NoNameNeeded

Danke, aber darum geht's nicht.

Es geht nicht um den Fortschritt von Downloads sondern um den Fortschritt des Ladens einer Webseite.

Thiersee

OK, dann war es ein Misverständnis meinerseits!

Gabbo

Oder ist das hier genehm?

Beitrag

Re: Loading Bar

Es funktioniert bei mir bereits in Fx 60 nicht.

Glücklicherweise ist nur wenig zu ändern:

(Quelltext, 214 Zeilen)

aborix

3. Juli 2018 um 17:30

NoNameNeeded

Soll eine Lade-Anzeige in der Url-bar sein?

Selbst bei leerem Chrome-Ordner (nur mit der userchrome.js und dem Script oben) sehe ich da irgendwie nichts.

Gabbo

Stimmt auffallend, gibt eine neuere Version hier (getestet und funktioniert):

userChrome.js/loading-bar.uc.js at master · Endor8/userChrome.js

Skripte für die Firefox-Erweiterung userChromeJS. Contribute to Endor8/userChrome.js development by creating an account on GitHub.

github.com

Optik ist im css-Teil anpassbar.

NoNameNeeded

Scheint zu funktionieren.

Die Frage ist nur wie ich das in angepasster Form nun in ein kleines "Fenster" in der Statusleiste bekomme.

Nur zur Erinnerung, so sah das einmal aus: Dort wo "1 Fehler" steht wäre dann der blaue Fortschrittsbalken:

https://molily.de/js/images/firebug-konsole.png

NoNameNeeded

Ich hab's jetzt zwar in die Statusbar bekommen, allerdings nimmt die Progress bar jetzt die gesamte Statusbar ein, es sollte aber nur ein kleiner Teil rechts sein (die Streifen brauche ich übrigens auch nicht).

Code

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

(function(){
    var cssStr = `
            #statuspanel {
                background-image: repeating-linear-gradient(-45deg, rgba(0,0,128,0), rgba(0,0,128,0) 6px, rgba(0,0,128,1) 6px, rgba(0,0,128,1) 12px), linear-gradient(to left, rgba(0,0,128) 0%, rgba(0,0,128,.7) 100%);
                background-size:0 0;
                
                background-repeat:repeat-x, no-repeat;
                transition: background-size 350ms ease 0s;
                
            }
            #statuspanel: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: 51x 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 = $("statuspanel");
      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

NoNameNeeded

Meinst du ein Bild der Statusleiste?

Es ist ein grauer Streifen:

Gabbo

Sorry, falschen Button geklickt, Beitrag gelöscht.

So wird das nichts,

Die Statusleiste sollte in .js vorliegen, dann könnten Fachleute beide Scripte vereinen oder integrieren...

Außerdem kannst Du das Erscheinungsbild (Streifen, die Du nicht brauchst) doch selbst per css anpassen, ansonsten ist diese Baustelle sowieso zu groß für Dich...

NoNameNeeded

Ich kann aber aus einer css-Datei keine js-Datei machen.

Meines Wissens beherbegen js-Dateien Funktionen während css-Dateien nur vorhandenes anpassen können.

Es scheint ja aber auch so schon mal prinzipiell in die richtige Richtung zu gehen, denn in die Statusleiste habe ich die Progressbar ja schon mal bekommen.

Nur wie ich die Position anpassen kann oder die Streifen wegbekomme, das weiß ich nicht.

Und ja, hätte ich große Ahnung von diesen Dingen, würde ich gar nicht erst fragen sondern es einfach alles selbst machen, schon klar.

Update:
Aber vllt. ist das alles sowieso nicht nötig, denn wie ich gerade festgestellt habe, wird beim Laden der Youtube-Seite überhaupt kein Fortschritt angezeigt oder wenn überhaupt dann nur ganz zum Schluss (obwohl natürlich einiges geladen wird).

Das ganze soll aber nicht nur ein Gimmick sein, sondern den tatsächlichen Ladefortschritt grafisch darstellen.

ODER es wird nur dann etwas angezeigt, wenn etwas direkt aus dem Internet geladen wird, nicht wenn es aus dem Cache geladen wird?
Ich weiß es nicht...

Wenn das nicht geht, dann kann ich damit leben.

Gabbo

Ok, ich gebe auf.

Im Prinzip geht's eben in die falsche Richtung...

Viel Glück mit Deinem Lösungsansatz! Versuch das! Das Resultat wird Deinen Lernprozess optimieren. Und ja, vielleicht solltest Du mal was selbst machen.

NoNameNeeded

Wenn du mir sagst, wie ich aus einer css-Datei eine js-Datei mache, dann werde ich das gerne versuchen.

Ich mache all das selbst, was ich machen kann.

Mira_Belle

Was Gabbo Dir sagen wollte,

mit der js-Datei erstellst Du Dir Deine Funktion und deren Wirkweise,

mit der css-Datei kannst Du das Aussehen beeinflussen.

Und nun viel Erfolg.

Gruß

Mira

NoNameNeeded

Das hatte ich ja oben auch schon vermutet:

Zitat von NoNameNeeded

Ich kann aber aus einer css-Datei keine js-Datei machen.
Meines Wissens beherbegen js-Dateien Funktionen während css-Dateien nur vorhandenes anpassen können.

NoNameNeeded

Hab's mittlerweile so halbwegs hingekriegt.

Nur die Funktion an sich ist nicht so der Bringer, soll heißen, der Fortschritt der Anzeige spiegelt nicht wirklich den Fortschritt des Ladevorgangs wider, sondern kann in Millisekunden eingestellt werden.

Das untergräbt den Sinn des Ganzen irgendwie.

Deswegen meine Frage: Kann die Funktion jemand so verändern, dass die Anzeige tatsächlich den Fortschritt des Ladevorgangs zeigt?

Hier die von mir angepasste Funktion (nicht über teilweise unsinnigen Code wundern, ich hab' halt herumprobiert ohne wirklich viel Ahnung davon zu haben, wobei dadurch nicht das hier beschriebene Problem verursacht wurde, das habe ich natürlich schon überprüft):

CSS

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

(function(){
    var cssStr = `
            #browser-bottombox {
background-image: linear-gradient(90deg, rgba(0,0,128,0), rgba(0,0,128,0) 5px, rgba(0,0,128,1) 5px, rgba(0,0,128,1) 2px), linear-gradient(to right, rgba(0,0,128) 0%, rgba(0,0,128) 5%, rgba(0,0,128) 10%, rgba(0,0,128) 20%,rgba(0,0,128) 30%, rgba(0,0,128) 40%, rgba(0,0,128) 50%, rgba(0,0,128) 60%, rgba(0,0,128,5) 70%, rgba(0,0,128,6) 80%,rgba(0,0,128,.7) 100%);
                background-size:0 0;
                margin-right: 200px !important;
                margin-left: 1600px !important;
                background-position: left center !important;
                background-repeat: no-repeat;
                transition: background-size 1350ms ease 0s;
                
            }
            #browser-bottombox: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: 0 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 = $("browser-bottombox");
      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 = '1% 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

P.S:
Falls es hilft, das von mir im ersten Beitrag hier genannte Addon ist diesbezüglich zwar auch nicht großartig, aber immerhin etwas besser (hier sieht man tatsächlich, dass sich der Fortschrittsbalken an dem tatsächlichen Ladefortschritt orientiert, wenn er auch erst etwas spät angezeigt wird).

Ich hab in diesem Addon folgende js-Datei gefunden.

Vllt. lässt sich dieser Code ja irgendwie in den oberen in sinnvoller Weise einbauen:

CSS

(function() {
    'use strict';

    var inserted = 0;
    var loaded   = 0;
    var last_pct = 1;
    var last_ts  = 0;
    var finished = false;
    var setup_done = false;
    var css = null;

    // load settings
    var settings;
    browser.storage.local.get({
        color: "#FF0000",
        incognito_color: "#D020D0",
        width: "2",
        opacity: "0.75",
        place: "top",
        smooth: "no"
    }).then((item) => {
        if (css != null) {
            setupCss(item)
        } else {
            settings = item
        }
    }, onError);

    const listenerCfg = {"once": true, "capture": true, "passive": true};

    function onError(error) {
        console.log(`Error: ${error}`);
    }

    function hexToRgbA(hex){
        var c;
        if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
            c= hex.substring(1).split('');
            if(c.length == 3){
                c= [c[0], c[0], c[1], c[1], c[2], c[2]];
            }
            c= "0x" + c.join("");
            return "rgba("+[(c>>16)&255, (c>>8)&255, c&255].join(",")+",1)";
        }
        return "rgba(255,0,0,1)";
    }

    function setupCss(settings) {
        setup_done = true;
        let incognito = browser.extension.inIncognitoContext;
        let color = hexToRgbA(incognito ? settings.incognito_color : settings.color);
        let opacity = settings.opacity;
        let transition = ((settings.smooth == "yes") ? "right 0.5s linear, " : "");
        css.appendChild(document.createTextNode(`
            html:before {
                background: ${color};
                opacity: ${opacity};
                transition: ${transition} opacity 0.85s ease-out;
                position: fixed;
                content: "";
                z-index: 2147483647;
                ${settings.place}: 0;
                left: 0;
                height: ${settings.width}px;
            }
        `));
    }

    function updateProgress() {
        if (document.body != null && !finished) {
            if (css == null) {
                css = document.createElement('style');
                css.type = 'text/css';
                css.appendChild(document.createTextNode(`
                    html:before {
                        right: 99%;
                    }
                `));
                document.body.appendChild(css);
            }
            if (settings != null && !setup_done) {
                setupCss(settings);
            }

            const pct = 100 - (inserted - loaded) * 100 / inserted;
            const ts = Date.now()
            if (pct <= 100 && pct > last_pct && ts >= last_ts + 250) {
                last_pct = pct;
                last_ts = ts;
                const space = 100 - pct;
                css.firstChild.replaceWith(document.createTextNode(`
                    html:before {
                        right: ${space}%;
                    }
                `));
            }
        }
    }

    function onLoadHandler(node) {
        loaded++;
        updateProgress()
        if (!finished && node.self == node && css != null) { // i.e. the window is loaded
            finished = true;
            css.firstChild.replaceWith(document.createTextNode(`
                html:before {
                    right: 0;
                }
            `));
            setTimeout(function() {
                css.firstChild.replaceWith(document.createTextNode(`
                    html:before {
                        right: 0;
                        opacity: 0 !important;
                    }
                `));
                setTimeout(function() {
                    css.firstChild.replaceWith(document.createTextNode(`
                        html:before {
                            z-index: -2147483646;
                        }`)
                    )}, 850);
            }, 150);
        }
    }

    let observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            mutation.addedNodes.forEach((node) => {
                if (node.nodeName == "BODY") {
                    inserted++;
                    node.addEventListener( "load", () => onLoadHandler(node), listenerCfg);
                    updateProgress();
                } else if (((node.nodeName == "SCRIPT" ||
                            node.nodeName == "VIDEO"  || node.nodeName == "IMG"    ||
                            node.nodeName == "IFRAME" || node.nodeName == "FRAME") && node.src != "" ) ||
                            (node.nodeName == "LINK" && node.rel == "stylesheet" && window.matchMedia(node.media))
                ) {
                    inserted++;
                    node.addEventListener( "error",   () => onLoadHandler(node), listenerCfg);
                    node.addEventListener( "abort",   () => onLoadHandler(node), listenerCfg);
                    node.addEventListener( "load",    () => onLoadHandler(node), listenerCfg);
                    updateProgress();
                }
            });
        });
    });
    window.addEventListener( "load", () => onLoadHandler(window), listenerCfg);
    observer.observe(document, {childList: true, subtree: true});
})();

Alles anzeigen