LoadingBar.uc.js - Script für Ladefortschritt in URL-Bar: Farbe ändern?

klickman · Bildschirmfoto 2017-12-04 um 20.47.41.jpg

Hallo Kollegern,

ich hatte hier danach gefragt:

Zitat

Stattdessen soll sich die Fortschrittsanzeige in der URL-Bar befinden. Bis FF56 war das durch die Erweiterung Status-4-Evar möglich und sah bei mir so aus:
[attachment=1]Fortschritt FF56.jpg[/attachment]

Nun habe ich dieses Script hier gefunden:

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) 12px), -moz-linear-gradient(left, 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) 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

Bewirkt in meinem 57er folgendes:
[attachment=0]Bildschirmfoto 2017-12-04 um 20.47.41.jpg[/attachment]

Frage: Das Muster gefällt mir, nur wie lässt sich die Farbe ändern, z. B. in ein helles Grau?

Son Goku

Hallo,
sollte in folgender Zeile machbar sein

Code

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%);

http://www.farbtabelle.at/farben-umrechnen/

EffPeh

Ergänzend:
Dieser Wert sollte es sein. Das 0.7 ist die Transparenz. 0 = durchsichtig; 1 = Vollfarbe

Code

rgba(17,238,238,.7)

Ein helles Grau wäre also etwas in der Art:

Code

rgba(230,230,230,.7)

klickman

Ah, vielen Dank euch beiden! :klasse: Ich versuche das gleich mal umzusetzen.

klickman

Das war es in der Tat! Vielen Dank!
Hier übrigens auch noch ein sehr brauchbarer Farbumrechner bzw. Kalkulator: http://drpeterjones.com/colorcalc/

EffPeh

Farbumrechner??? Profis rechnen das im Kopf aus... :lol:

klickman

Öhm... :mrgreen:

robotest

Das hätte ich gerne aber für Downloads.
Ist das machbar?

loshombre

Script Download Statusbar ausprobieren.
Vorher muss aber die Statusbar mit nem Script zurück zum Fuchs, oder im Download Script selbst die Bar umschrauben auf Tab, oder auf irgend eine Leiste der Menübar.

hwww

Hallo
Ich habe das gleiche Script und möchte auch die Farbe ändern.Es klappt so wie es EffPeh beschrieben hat aber nicht bei mir.Wo genau muss das geändert oder ergänzt werden?Muss der Eintrag "rgba(17,238,238,.7)" raus und dafür "rgba(230,230,230,.7)" rein?Oder muss "rgba(230,230,230,.7)" noch dazu?Habe das Script in eine txt Datei gewandelt die Änderungen vorgenommen und wieder in uc.js Datei gewandelt danach FF neu gestartet.War das so richtig?

Danke schon mal im voraus hwww

loshombre

Es wird nix ergänzt. Die rgb Farben werden einfach durch andere ersetzt.
Und es werden auch keine Dateien in irgendwas umgewandelt.
Javascript mit nem vernünftigen Editor öffnen, machen was man machen will, speichern, schließen und wichtig beim Fuchsstart den Scriptcache löschen.

klickman

hwww:
Schau dir mein Script an und vergleiche es genau mit dem originalen. Dort, wo die Werte von mir verändert sind, trägst du einfach deine ein:

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) 12px), -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(140,140,140,.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) 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

loshombre:
Der Scriptcache wird doch gelöscht, wenn er den Fuchs neu startet, oder unterliege ich einem Irrtum? :-??

loshombre

Da ich nicht wissen kann, wie ihr alle hier euren Fuchs in Verbindung mit Scripten so startet, kann und muss ich immer wieder drauf hinweisen.
Wenn die userchrome.js nach neustem aktuellen Stand angelegt ist, dann ja.
Ansonsten nicht!
Also endweder steht in der userchrome.js die zusätzliche Zeile zum Scriptcache löschen, oder man nutzt ein Restart Script, das in der Lage ist, den Cache beim Neustart zu löschen. Es geht auch beides, das ist kein Problem.
Ohne den ganzen Klamotten hier wird der Fuchs beim Start gar nichts löschen!

klickman

Code

userChrome.ignoreCache = true;
userChrome.import("*", "UChrm");

Das ist der Inhalt meiner userChrome.js. Ich nehme an, "ignoreCache" bedeutet, dass er beim Starten des Fuchses außen vor bleibt, also nichts aus ihm gelesen wird. Ist das gleichzusetzen mit leeren?

2002Andreas

Zitat von klickman

Ist das gleichzusetzen mit leeren?

Ja.

klickman

Zitat von 2002Andreas

Ja.

Wie immer, danke für deine rasche Antwort! :klasse:

hwww

Hallo
Dank an alle die sich die Mühe gemacht haben zu Antworten.War wieder mal der Fehler von mir!Hatte bei allen Tests mit der Änderung der Farben den userChrome.js-Cache nicht gelöscht.Jetzt funktioniert es wunderbar.

Allen ein schönes Wochenende hwww