Fx 68 Skript LoadingBar.uc.js

Kerian

Hallo Schraubergemeinde,

seit dem Update auf 68.0 funktioniert bei mir das Skript LoadingBar.uc.js nicht mehr. Kann das jemand bestätigen?

Hab die letzte Version von hier https://github.com/ardiman/userCh…ster/loadingbar.

Könnte da jemand von den Spezialisten mal reinschauen?

milupo

Bei mir funktioniert diese Version noch:

JavaScript

// ==UserScript==
// @include            main
// @version            0.3.3
// @note            [20141128]兼容E10S
// @note            [20150206]添加connecting动画
// @note            [20150404]尝试改善某些情况下的CPU占用
// @note            [20150711]更新CSS linear-gradient(),radial-gradient()标准语法(nightly 150710)。
// ==/UserScript==
location == "chrome://browser/content/browser.xul" && (function () {
    //Location Bar Enhancer5.1;Loading Bar0.3.0
    var loadingBar = {
        progress: new WeakMap(),
        init: function () {
            if(document.getElementById('UCloadingBar')) return;
            var sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService);
            sss.loadAndRegisterSheet(Services.io.newURI('data:text/css;base64,' + btoa((function () {/*
                @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
                @-moz-document url("chrome://browser/content/browser.xul"){
                    @keyframes UCloadingBarPulse {
                        0% {opacity:1}
                        50% {opacity:0}
                        100% {opacity:1}
                    }
                    @keyframes loadingBarConnecting {
                        0% {transform: translateX(300%)}
                        100% {transform: translateX(-300%)}
                    }
                    #UCloadingBar, #UCloadingBar[connecting]::after{
                        background-size: 100% 5px;
                        background-repeat: repeat-x;
                        height: 10px;
                    }
                    #UCloadingBar{
                        position: fixed;
                        pointer-events:none;
                        border-left:2px transparent;
                        border-right:2px transparent;
                        overflow: hidden;
                        opacity:1;
                        transform: translateX(-100%);
                        background-image:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 25%, rgba(254,178,53,1) 100%);
                        width:100%;
                    }
                    #UCloadingBar:not([style*="translateX(-100%)"]){
                        transition: transform 800ms ease 0s;
                    }
                    #UCloadingBar:not([connecting])::after {
                        display:none;
                    }
                    #UCloadingBar[connecting]::after {
                        content:'';
                        animation: loadingBarConnecting 2500ms infinite linear;
                        background-image: radial-gradient(ellipse farthest-corner at center top, rgba(254,178,53, 1) 25%, rgba(255,255,255,0.25) 100%);
                        width: 30%;
                        position: absolute;
                    }
                    #UCloadingBar[connecting]{
                        background-image:none;
                    }
                    #UCloadingBar[complete]{
                        opacity:0;
                    }
                    #UCloadingBar[complete][style*="translateX(0%)"]{
                        transition: opacity 800ms ease 100ms;
                    }
                    #UCloadingBar[style]:not([connecting]):not([complete])::before{
                        content:'';
                        position: absolute;
                        top:-10px;
                        right: 0px;
                        width: 100px;
                        height: 100%;
                        box-shadow: 0px 0px 10px 3px rgba(254,178,53,1), 0px 0px 5px 2px rgba(254,178,53,1);
                        transform: rotate(3deg) translate(0px, -4px);
                        animation:UCloadingBarPulse 2s ease-out 0s infinite;
                    }
                }
            */}).toString().replace(/^.+\s|.+$|\t+\/\/.*/g, '')), null, null), sss.USER_SHEET);
            var appcontent = document.getElementById('appcontent'),
                lb  = document.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'hbox');
            lb.id = 'UCloadingBar';
            appcontent.insertBefore(lb, appcontent.firstChild);
            this.progressBar = lb;
            gBrowser.tabContainer.addEventListener('TabSelect', this, false);
            gBrowser.addTabsProgressListener(this);
        },
        setConnecting: function(connecting){
            if(connecting){
                this.progressBar.hasAttribute('connecting') || this.progressBar.setAttribute('connecting', 'true');
            }else{
                this.progressBar.hasAttribute('connecting') && this.progressBar.removeAttribute('connecting');
            }
        },
        setComplete: function(complete){
            if(complete){
                this.progressBar.hasAttribute('complete') || this.progressBar.setAttribute('complete', 'true');
            }else{
                this.progressBar.hasAttribute('complete') && this.progressBar.removeAttribute('complete');
            }
            return complete;
        },
        handleEvent: function (e) {
            if (e.type == 'TabSelect') {
                this.onChangeTab();
            }
        },
        onChangeTab: function () {
            var cd = gBrowser.selectedBrowser,
                val = this.progress.get(cd);
            if (!val) {
                val = [0, false];
                newTab = true;
                this.progress.set(cd, val);
            }
            if(!this.progressBar) return;

            this.setConnecting(val[1]);
            this.progressBar.style.transition = 'none';
            if (val[0] > 0.95) {
                if(!this.setComplete(val[0] == 1)){
                    this.progressBar.style.transform = 'translateX(0%)';
                }
            }else{
                this.setComplete(false);
                this.progressBar.style.transform = 'translateX('+((!val[0] && val[1] ? 1 : val[0]) * 100 - 100) + '%)';
            }
            setTimeout(function(){
                this.progressBar.style.transition = '';
            }.bind(this), 50);
        },
        onProgressChange: function (aBrowser, webProgress, request, curSelfProgress, maxSelfProgress, curTotalProgress, maxTotalProgress) {
            var val = (curTotalProgress - 1) / (maxTotalProgress - 1);
            if (!/^((ht|f)tps?\:|about:blank)/.test((aBrowser.registeredOpenURI || {asciiSpec: 'about:blank'}).asciiSpec)){
                return this.progress.set(aBrowser, [val, false]);
            }
            this.progress.set(aBrowser, [val, false]);
            if (this.progressBar && gBrowser.selectedBrowser === aBrowser) {
                this.setConnecting(false);

                if (val > 0.95) {
                    this.progressBar.style.transform = 'translateX(0%)';
                }else{
                    this.progressBar.style.transform = 'translateX('+((val * 100) - 100) + '%)';
                }
            }
        },
        onStateChange: function (aBrowser, aWebProgress, aRequest, aStateFlags, aStatus) {
            var val = this.progress.get(aBrowser),
                isCBrowser = gBrowser.selectedBrowser === aBrowser;
            if(!val){
                val = [0, false];
                this.progress.set(aBrowser, val);
            }

            if (aStateFlags & 1 && aStateFlags & 262144){
                if (!(aStateFlags & 16777216)){
                    val = [0, /^((ht|f)tps?\:|about:blank)/.test((aBrowser.registeredOpenURI || {asciiSpec: 'about:blank'}).asciiSpec)];
                    if(isCBrowser) {
                        this.progressBar.style.transform = 'translateX(0%)';
                        val[1] && this.setComplete(false);
                        this.setConnecting(val[1]);
                    }
                    this.progress.set(aBrowser, val);
                }
            }else if(aStateFlags & 16){
                if(isCBrowser) {
                    this.timer(function(){
                        this.progress.get(aBrowser)[0] == 1 && this.setComplete(true);
                    }.bind(this), 1000);
                    this.setConnecting(false);
                }
                this.progress.set(aBrowser, [1, false]);
            }
        },
        timer: function (callback, delay) {
            delay = delay || 0;
            var stopTimer = function (){
                if (this._timer == null) return;
                clearTimeout(this._timer);
                this._timer = null;
            }.bind(this);
            this._timer = setTimeout(function(){
                stopTimer();
                callback();
            }, delay);

        }
    };
    loadingBar.init();
})();

Alles anzeigen

Kerian

Hallo milupo, danke für Deine Rückmeldung!

Bei Deinem Code handelt es sich um den langen schmalen Balken oben im Webfenster. Der funktioniert bei mir auch.

Mein Code erzeugte ein farbliches Verlaufsmuster in der url-bar, bzw. zeigte es mir bis Version 67.0.4

[Blockierte Grafik: https://github.com/ardiman/userChrome.js/raw/master/loadingbar/scr_loadingbar.png]

CSS

/* LoadingBar.uc.js */

(function(){
//Location Bar Enhancer5.1;Loading Bar0.3.0
var cssStr = (function(){/*
#urlbar {
background-image: -moz-repeating-linear-gradient(top -45deg, rgba(255,255,255,0), rgba(255,255,255,0) 6px, rgba(255,255,255,1) 6px, rgba(255,255,255,1) 6px), -moz-linear-gradient(left, rgba(0, 255, 255) 0%, rgba(0,255,0) 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;
}
@-moz-keyframes progress-bar-stripes {
from {
background-position: 0, 0;
}
to {
background-position: 51px 0, 0;
}
}
*/}).toString().replace(/^.+\s|.+$/,"");

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

milupo

Hallo Kerian, wahrscheinlich hatte ich eine ältere Version, denn der Dateiname ist gleich.

Aber stimmt, deine Version funktioniert nicht und ich muss ehrlich sagen, ich bin nicht so bewandert in JavaScript. Da müssen wir wahrscheinlich auf aborix warten, er ist unser JavaScript-Spezialist.

Kerian

Zitat von milupo

Da müssen wir wahrscheinlich auf aborix warten, er ist unser JavaScript-Spezialist.

Ok, dann warten wir mal auf aborix, vielleicht schaut er ja mal rein. Wenn nicht, werde ich nicht sterben, ein bischen Schwund ist halt immer

Danke für Deine Mühe

hwww

Zitat von Kerian

seit dem Update auf 68.0 funktioniert bei mir das Skript LoadingBar.uc.js nicht mehr. Kann das jemand bestätigen?

Ja läuft bei mir auch nicht mehr. Bin beim Suchen darauf gestoßen "Load Progress Bar" - "https://addons.mozilla.org/de/firefox/add…d-progress-bar/". Ähnlich wie das was wir vorher hatten nur unterhalb meiner Lesen Zeichenleiste.

Gruß hwww

Andredd1

Bei mir funktioniert sie nur noch beim öffnen/laden eines neuen Tab, nur reload bzw. laden einer neuen Seite im gleichen Tab geht nicht mehr.

Vielleicht könnte die Info ja hilfreich für das anpassen sein

aborix

In der Browser-Konsole kommt für Zeile 7:

CSS

                background-image: -moz-repeating-linear-gradient(top -45deg, rgba(255,255,255,0), rgba(255,255,255,0) 6px, rgba(255,255,255,1) 6px, rgba(255,255,255,1) 12px), -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(17,238,238,.7) 100%);

diese CSS-Meldung:

Fehler beim Verarbeiten des Wertes für 'background-image'

Das hängt möglicherweise damit zusammen:

Zitat von Firefox 68 for developers

While we're keeping the prefixed versions of the various gradient properties (linear-gradient(), radial-gradient(), and repeating-radial-gradient() available for compatibility reasons, we have revised how they're parsed so that they're handled much more like the non-prefixed versions. This means that certain existing styles won't work correctly.

In particular, the complicated syntax taking both an angle and a position will no longer work, and the to keyword in the <side-or-corner> parameter is not required for the prefixed gradient properties. You are encouraged to use the standard, non-prefixed gradient properties instead, as they're now widely supported (bug 1547939).

Weiß jemand, was zu ändern ist?

Sören Hentzschel

1. Erst einmal alle -moz-Präfixes entfernen, die da bereits seit fast sieben Jahren (!) nichts mehr zu suchen haben.

2. Die Standard-Syntax sieht ein to-Schlüsselwort bei Richtungsangaben vor. Achtung: Die Richtung ist bei der Standard-Syntax genau entgegengesetzt. Das heißt, aus einem left beispielsweise wird to right.

3. Wo sowohl eine Richtung als auch ein Winkel angegeben ist, nur den Winkel verwenden.

Ergibt:

CSS

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) 0%, rgba(17,238,238,.7) 100%);

Das Ergebnis sieht exakt identisch zur alten Syntax aus. Getestet mit Firefox ESR 60 und Firefox Nightly 70.

Kerian

@ aborix und Sören!

Funktioniert auch wieder mit Fx 68.0!

Superklasse, vielen Dank euch beiden

milupo

Ich kenne das Skript nicht weiter, bei mir funktioniert es nur beim Start von Firefox, nicht beim Laden irgendeiner Seite. Ist das so gewollt?

Kerian

milupo

Bei mir funktioniert es wieder beim laden von allen Seiten, allerdings nur in einem neuen Tab. Beim reload oder laden von Seiten im selben Tab geht es nicht, hatte ja auch Andredd1 schon geschrieben. Wobei ich mich gerade frage wieso es bei ihm noch funktionierte?

Da ich aber jede Seite in einem neuen Tab lade ist diese Version für mich perfekt.

Für alle Interessierten hier nochmal der komplette Code, die Farben und das Verlaufsmuster kann man sich in Zeile 7 anpassen.

CSS

/* LoadingBar.uc.js */

(function(){
//Location Bar Enhancer5.1;Loading Bar0.3.0
var cssStr = (function(){/*
#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) 12px), linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(17,238,238,.7) 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;
}
@-moz-keyframes progress-bar-stripes {
from {
background-position: 0, 0;
}
to {
background-position: 51px 0, 0;
}
}
*/}).toString().replace(/^.+\s|.+$/,"");

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

milupo

Danke, Kerian. Ja, ich kann bestätigen, dass das Skript beim Laden in einem neuen Tab ebenfalls funktioniert.

Speravir

Nur als Anmerkung:

Zitat von Sören Hentzschel

1. Erst einmal alle -moz-Präfixes entfernen, die da bereits seit fast sieben Jahren (!) nichts mehr zu suchen haben.

Ich benutze dieses Skript seit Jahren (und davor ein entsprechendes Addon). Bei irgendeinem Update des Firefox, das noch gar nicht so ewig lange her sein kann (müsste eigentlich bei der Umstellung auf Fx57 gewesen sein), hatte ich mal probiert, den CSS-Teil im Skript umzustellen, aber damals wollte es nicht so richtig funktionieren (wie genau, weiß ich nicht mehr) und habe deshalb die alte Version wieder aktiviert. Auf jeden Fall habe ich mir das Skript damals wegen möglicher Konflikte mit der Adressleistenfärbung angesehen, vgl. Adressleiste per CSS entsprechend Sicherheitsstatus einfärben.

Sören Hentzschel

In den letzten sieben Jahren hat sich daran nichts mehr geändert. Die Sache mit den Verläufen ist halt, dass es eben nicht reicht, nur das Präfix zu entfernen. Die Syntax ist unterschiedlich und muss entsprechend angepasst werden, wenn man das -moz- entfernt.

Speravir

Zitat von Sören Hentzschel

Die Sache mit den Verläufen ist halt, dass es eben nicht reicht, nur das Präfix zu entfernen. Die Syntax ist unterschiedlich und muss entsprechend angepasst werden, wenn man das -moz- entfernt.

Du darfst mir glauben, dass ich das getan hatte. Weil es nicht funktionierte, hatte ich das sogar noch einmal kontrolliert. Einen Fehler kann ich natürlich trotzdem nicht hundertprozentig ausschließen.

Ein später Nachtrag, falls jemand dieses Thema über eine Suchanfrage findet: Siehe jetzt eine geänderte Version in diesem Posting vom 20. März 2021 (weitere Updates eventuell bei Endor: https://github.com/Endor8/userChr…ster/loadingbar).

Fx 68 Skript LoadingBar.uc.js

Ähnliche Themen

Aktuelle Nightly Version - Scripte funktionieren nicht mehr

extras_config_menu funktioniert im Nightly nicht mehr