Come modificare la colorazione del sorgente in Firefox

In Firefox è possibile vedere il sorgente della pagina (o della selezione) corrente con l’apposita voce di menu oppure con la scorciatoia da tastiera CMD – U (su Mac) oppure CTRL – U (su WC e Linux).
Solo che quel che esce per default è di un brutto che manco a li cani.
Il problema è che una volta era facile personalizzare l’aspetto del codice, aggiungendo un CSS specifico in una determinata posizione sul file system.
Non ve lo riporto, tanto non vale più.

Oggi non è più così facile, perché il tutto non è documentato e si deve procedere per reverse-engeneering^1,2.Mettendo assieme quel che si sa e quello che le interiora dicono agli aruspici, ne viene fuori che l’unico modo è quello di creare il famoso (o famigerato, fate voi)

userContent.css

in

~/Application Support/Firefox/Profiles/NomeDelProfilo/Chrome/

e laddove /Chrome/ non fosse presente, crearla.

Solo che questo CSS si applica a tutte le pagine web che il browser manda in terra.

La soluzione è quella di scrivere il CSS non proprio in maniera standard, forzandone l’applicazione sole alle pagine dei sorgenti e non a quelle di tutti gli altri siti.
Eggià, ma come si fa a dire a Firefox che un CSS che lui vorrebbe applicare al mondo intiero lo deve invece usare solo quando visualizza il sporgente delle pagine?
Beh, voi non lo vedete, ma in realtà la funzione di visualizzazione del sorgente di una pagina è la stessa pagina che state visitando, ma nell’URL non viene chiamata con un protocollo standard, ma con

view-source:

quindi la pagina
https://edue.wordpress.com/
ha per sorgente

view-source:https://edue.wordpress.com/

(provate col copia e incolla in Firefox, WordPress ha tra le sue numerose features da scassacazzi quella di intercettare gli URL e farne quel che vuole).

In questo modo la visualizzazione non viene presa in carico dal modulo di rendering consueto, ma da una libreria ad hoc che in realtà il rendering non lo fa, ma si occupa di fare solo la colorazione della sintassi (se è abilitata, ma questa è un’altra storia).

Bene, se nel CSS di cui sopra (userContent.css) mettete una direttiva che impone a Firefox di applicarlo solo alle URL che iniziano con il meta-protocollo view-source:, lui lo fa.

OK, ma come dirglielo?

Mettendo tutto il CSS dentro una direttiva non standard siffatta:

@-moz-document url-prefix(view-source:)
{
}

In questo modo si dice a Firefox (@-moz-document) che se l’URL inizia (url-prefix) con il meta-protocollo di cui sopra (view-source:), vale quello che c’è tra le due graffe più esterne ({,}).

Il codice completo con i selettori conosciuti e funzionanti ad oggi è quello che segue:

@-moz-document url-prefix(view-source:)
{
	/* 
	*|*:root
	{
		background: url(viewsource.jpg) top center no-repeat white !important;
	}
	*/
	#viewsource
	{
		font-family: Menlo !important;
		font-size: 9pt !important;
		white-space: pre;
	}
	.comment
	{
		color: red !important;
		font-style: normal !important;
		font-weight: normal !important;
	}
	.error
	{
		color: red !important;
		font-style: normal !important;
		font-weight: normal !important;
		background-color: rgba(255,0,0, .3);
	}
	.doctype
	{
		color: #004080 !important;
		font-style: normal !important;
		font-weight: normal !important;
	}
	.markupdeclaration
	{
		color: #004080 !important;
		font-style: normal !important;
		font-weight: normal !important;
	}
	.start-tag
	{
		color: #004080 !important;
		font-style: normal !important;
		font-weight: normal !important;
	}
	.end-tag
	{
		color: #004080 !important;
		font-style: normal !important;
		font-weight: normal !important;
	}
	.entity
	{
		color: #800040 !important;
		font-style: normal !important;
		font-weight: normal !important;
	}
	.attribute-name
	{
		color: green !important;
		font-style: normal !important;
		font-weight: normal !important;
	}
	.attribute-value
	{
		color: orange !important;
		font-style: normal !important;
		font-weight: normal !important;
	}
}

In giro se ne trovano altri, ma i selettori che contengono non sono (più?) riconosciuti da Firefox 36 e seguenti.
Se ne conoscete altri, ben lieto di aggiungerli, però prima provateli.

Nel caso, tenete presente che non funziona nulla se non aggiungete (sissignore, ad OGNI riga) !important prima del “;”.

Il motivo c’è: userContent.css viene caricato per ULTIMO dopo tutti gli altri, quindi dovrebbe andare naturalmente in override sulle regole omonime? Pare di no.

Aggiornamenti

• 20150209: Aggiunto il selettore .error

* * *

1. Messing With Firefox's View Source CSS File | CSS-Tricks
2. How can I change view-page source (^U) background color? • mozillaZine Forums
3. eDue – CSS – Cascading Style Sheet: Caratteristiche nominali, posizionali e contestuali | Zooid, il figlio di HAL

Autore: eDue

Bieco illuminista Vedi tutti gli articoli di eDue