Die Schrift in der Adresszeile vertikal mittig positionieren

2002Andreas

Zitat von Boersenfeger

Steht in #1

Da steht dein CSS-Code, aber nicht das Skript für die bunte Url

Boersenfeger

2002Andreas Ich habe jetzt mal rumprobiert und mit deinem abgewandelten CCS Erfolg gehabt:

CSS

/* Ausmitten der Beschriftung */
#urlbar-input {
  .urlbar:not([focused])[domaindir="ltr"] > .urlbar-input-container > .urlbar-input-box > & {
  margin-top: -5px !important; 
  }
}

Den Code für die farbige URL finde ich nicht, suche auch nicht mehr weiter.

Dankeschön!

2002Andreas

Zitat von Boersenfeger

Den Code für die farbige URL finde ich nicht

Das ist auch kein Code, sondern ein Skript:

Zitat von Boersenfeger

mit deinem abgewandelten CCS Erfolg gehabt:

Ok.

Boersenfeger

Ja, das Script kann ich liefern:

JavaScript

// ==UserScript==
// @name                 dav_LinkifiesLocationBar.us.js
// @version              ?
// @description          dav_LinkifiesLocationBar
// @based on             https://github.com/sdavidg/firefoxChromeScripts/blob/main/scripts/dav_LinkifiesLocationBar.uc.js
// @modified by          Mira_Belle [https://www.camp-firefox.de/forum/]
// ==/UserScript==

/*
Idea based on
https://addons.mozilla.org/en-US/firefox/addon/locationbar%C2%B2/
https://github.com/simonlindholm/locationbar2
*/
setTimeout(function() {
	if (location.href != 'chrome://browser/content/browser.xhtml') return;

	function getWindow(){
		return window;
	}
	var localWindow = getWindow();
	localWindow.dav_LinkifiesLocationBar = {};

    var styleBase = `
		@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

		.claseLocationBar{
            display: block;
            position: absolute;
            height: 24px;
            width: 100%;
            line-height: 24px;
            white-space:nowrap;
            overflow:hidden;
		}
		.claseLocationBar span{
			position: relative;
		    margin: 0 1px;
		    display: inline-block;
		}
		.claseLocationBar .label_pathname {
			margin-inline: unset !important;
		}
		locationBarTag{
		    display: inline;
		}
    /*  Von mir hinzugefügt!    */
/*        .claseLocationBar span.protocol{
		    display: none;
		}
*/		/*************************************
		*************** COLORS ***************
		*************************************/
		.claseLocationBar span.protocol{
		    font-weight: bold;
            color: #c1121c;
		    margin-right: -1px;
		}
		.claseLocationBar .subdomain {
		    font-weight: bold;
		    color: #397ff8;
		}
		.claseLocationBar span.hostname{
		    font-weight: bold;
		    color: #038709;
		}
		.claseLocationBar span.port{
		    color: #00aeff;
		}
		.claseLocationBar span.pathname{
		    color: #ff0700;
		}
		.claseLocationBar span.hash{
		    color: #00ffff;
		    margin-left: -1px;
		}
		.claseLocationBar span.search{
		    color: #3900FF;
		}
		.claseLocationBar .extension{
            color: #ffffff;
		}
    `;

	var style_pathnameArrow = `
		@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
		.claseLocationBar span.pathname{
			padding-left:9px;
			margin: 0 2px;
		}
        .claseLocationBar .pathname:before{
			content:'/';
			font-weight: bold;
			margin-left: -10px;
            margin-right: 2px;
			color: #0db7bc;
		}		       
		.claseLocationBar .label_pathname{
			display: none;
		}
	`;

	var stylexul = `
		.urlbar-input-box[dav_LinkifiesLocationBar] #urlbar-input:focus ~ .claseLocationBar{
		   display: none !important;
		}
		.urlbar-input-box[dav_LinkifiesLocationBar]  #urlbar-input:focus{
		   opacity: 1;
		}
		.urlbar-input-box[dav_LinkifiesLocationBar]  #urlbar-input{
		   opacity: 0;
		}
    `;

/*
AGENT_SHEET: 0
USER_SHEET: 1
AUTHOR_SHEET: 2
*/
	var CSS_Loader = {
		sss: Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService),
		load: function(cssCode) {
			this.unload(cssCode);
			var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(cssCode), null, null);
			this.sss.loadAndRegisterSheet(uri, this.sss.AGENT_SHEET);
		},
		unload: function(cssCode) {
			var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(cssCode), null, null);
			if (this.sss.sheetRegistered(uri,this.sss.AGENT_SHEET))
			{
				this.sss.unregisterSheet(uri,this.sss.AGENT_SHEET);
			}
		}
	}

	function extend() {
		var copy, target = {};
		for (var i = 0, l = arguments.length; i < l; i++) {
			var options = arguments[i];
			for (var name in options) {
				copy = options[name];
				if (copy !== undefined) {
					target[name] = copy;
				}
			}
		}
		return target;
	}

	var styleString = (style) => {
		return Object.keys(style).reduce((prev, curr) => {
			return `${prev += curr.split(/(?=[A-Z])/).join('-').toLowerCase()}:${style[curr]};`
		}, '');
	};

	function createElement(elto) {
		elto = extend({
			attrArray: {},
			evtListener: [],
			estilos: {}
		}, elto);

		var node = getWindow().document.createXULElement(elto.type);

		Object.keys(elto.attrArray).forEach(key => {
			if(key == "innerHTML"){
				node.innerHTML = encodeHTML(elto.attrArray[key]);
			}
			else {
				node.setAttribute(key, elto.attrArray[key]);
			}
		});

		elto.evtListener.forEach(evt => {
			node.addEventListener(evt.type, evt.funcion, false);
		});

		let estilo = styleString(elto.estilos);
		if (estilo) {
			node.setAttribute("style", estilo);
		}

		return node;
	}

	function encodeHTML(text) {
		return decodeURI(text)
			.replace(/&/g, '&amp;')
			.replace(/</g, '&lt;')
			.replace(/>/g, '&gt;')
			.replace(/"/g, '&quot;')
			.replace(/'/g, '&apos;');
	}

    function appendPart(text, clase) {
        // Nur leere Strings abbrechen – außer bei pathname
        if (!text && clase !== "pathname") return;

        if (clase == "pathname") {
            let spSlash = createElement({
                type: "label",
                attrArray: {
                    class: "label_pathname",
                    innerHTML: "/"
                }
            });
            divLocationBar.appendChild(spSlash);
        }

        let sp = createElement({
            type: "span",
            attrArray: {
                class: clase,
                innerHTML: text || "" // Auch "" explizit anzeigen
            },
        });
        divLocationBar.appendChild(sp);
        sp.setAttribute("href", divLocationBar.textContent);
        return sp;
    }


	function borraPrevio() {
		var divPrevio = localWindow.document.querySelector(".claseLocationBar");
		if (divPrevio) {
			divPrevio.parentNode.removeChild(divPrevio)
		}
	}

	var debounce = (fn, ms = 0) => {
	  let timeoutId;
	  return function(...args) {
		clearTimeout(timeoutId);
		timeoutId = setTimeout(() => fn.apply(this, args), ms);
	  };
	};

	var pintaLocation = debounce(pintaLocation_, 50);

    function pintaLocation_() {
        divLocationBar.innerHTML = '';

        var urlBarInput = getWindow().document.querySelector("#urlbar-input").value;
        var urlGBrowser = gBrowser.currentURI.displaySpec;

        if (urlGBrowser.startsWith("about")) {
            divLocationBar.innerHTML = encodeHTML(urlBarInput);
            return;
        }

        var url = urlGBrowser.indexOf(urlBarInput) !== -1 ? urlGBrowser : urlBarInput;

        try {
            var { protocol, hostname, port, pathname, hash, search } = new URL(url);
        } catch (e) {
            console.error("Fehler beim Parsen der URL:", e);
            divLocationBar.innerHTML = encodeHTML(urlBarInput);
            return;
        }

        var partido = hostname.split(".");
        var subdomain;
        if (partido.length > 2 && !partido.every(v => v == v - 0)) {    //Es wird geprüf, ob es sich nicht um eine IP handelt (nur Zahlen)
            subdomain = partido.splice(0, partido.length - 2).join(".");
            hostname = partido.join(".");
        }

        appendPart(protocol + "//", "protocol");
        if (subdomain) {
            appendPart(subdomain + ".", "subdomain");
        }
        appendPart(hostname, "hostname");
        if (port) {
            appendPart(":" + port, "port");
        }

        if (pathname === "/") {    // Spezialfall: Nur ein einfacher Slash
            appendPart("", "pathname");
        } else {
            let arrayPathname = pathname.split("/");
            arrayPathname.forEach((elto, index) => {
                if (index === 0 && elto === "") return;     // erstes leeres Element (vor dem ersten Slash)

                let sp = appendPart(elto, "pathname");

                let arrayDot = elto.split(".");
                if (arrayDot.length > 1) {
                    let extension = arrayDot.pop();
                    sp.innerHTML = "";
                    sp.appendChild(createElement({
                        type: "locationBarTag",
                        attrArray: {
                            href: sp.getAttribute("href"),
                            innerHTML: arrayDot.join(".")
                        }
                    }));
                    sp.appendChild(createElement({
                        type: "locationBarTag",
                        attrArray: {
                            class: "extension",
                            href: sp.getAttribute("href"),
                            innerHTML: "." + extension
                        }
                    }));
                }
            });
        }

        appendPart(search, "search");
        appendPart(hash, "hash");
    }

	/******************* INIT ***************************/
	var urlbarInput = getWindow().document.querySelector("#urlbar-input");
	var timeMouseMove = -1;
	function hideDivLocatonBar(){
		urlbarInput.focus();
	}
	var divLocationBar = createElement({
		type: "div",
		attrArray: {
			class: "claseLocationBar"
		},
		evtListener: [{
			type: "click",
			funcion: function() {
				hideDivLocatonBar()
			}
		}]
	});

	borraPrevio();
	urlbarInput.parentNode.appendChild(divLocationBar);
	urlbarInput.parentNode.setAttribute("dav_LinkifiesLocationBar", true);
	urlbarInput.addEventListener("blur", pintaLocation);
	pintaLocation();

	var last_displaySpec = "";
	setInterval(function(){
		let actual_displaySpec = gBrowser.currentURI.displaySpec;
		if(last_displaySpec != actual_displaySpec){
			last_displaySpec = actual_displaySpec;
			pintaLocation();
		}
	}, 50);

	CSS_Loader.load(styleBase);
	CSS_Loader.load(style_pathnameArrow);
	CSS_Loader.load(stylexul);
	/******************* END INIT ***************************/
	dav_LinkifiesLocationBar.globalShutdown = function(){
		var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"]
					.getService(Components.interfaces.nsIWindowMediator);
		var ws = wm.getEnumerator(null);
		while(ws.hasMoreElements()) {
			var w = ws.getNext();
			w.dav_LinkifiesLocationBar.shutdown(w);
		}
	}
}, 50);

Alles anzeigen

2002Andreas

Zitat von Boersenfeger

das Script kann ich liefern:

Das könntest du wenn dann noch in das Skript einfügen:

nach Zeile 26 im Skript.

Boersenfeger

Danke, aber das geänderte CSS bringts.

Die Schrift in der Adresszeile vertikal mittig positionieren

Ähnliche Themen

Mehrzeilige Tableiste für aktuelle Firefox-Versionen