Statusleiste mit Fortschrittsanzeige?

/* 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;
}

/* 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,
      };
    }

})();

(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});
})();