Customizing Firefox view-source style -- Solarized Dark theme with wallpaper

firefox-viewsource-customize.md

Customizing Firefox view-source style

TL;DR

1. Open (or create) chrome/userContent.css under your Firefox profile folder
2. Append attached CSS content and save file
3. Restart Firefox

---

Introduction

Although the good ol' days of viewing source in browser (via Ctrl+U or Right click → View Page Source for most browsers) can be dated, it still hasn't been completely retired yet, and can still be useful for cases like checking out vanilla HTML source (not post-processed by JavaScript, for example). This gist is about customizing view-source style semi-permanently through adding user style to Firefox profile.

The original view-source style is available from resource://content-accessible/viewsource.css, as of Firefox 57. However it is protected resource and can't be modified at will; customization can only be saved externally and reimported everytime one uses Style Editor under Web Developer Tools.

To alleviate unnecessary reimport each and every time upon browser start, it is possible to add extra styles to Firefox profile instead. This is the same as how Stylish works.

Note: Since Firefox 68/69, extra advanced Firefox config is needed. Launch about:config in Firefox and check for the key toolkit.legacyUserProfileCustomizations.stylesheets.

Caveats

Beware of a few issues before choosing to customize this way:

• The default view-source stylesheet, viewsource.css, is loaded after userContent.css. That means merely copying style from viewsource.css and changing values won't work, as later resource would override earlier ones with same specificity.
• Another parculiarity about view-source is that, even CSS selectors with higher specificity won't work. That means replacing pre rule with #viewsource pre would actually render the rule useless.
• The only fix is, attach changes with !important rule. Strongly unrecommended for general web development, but for user customization this is a valid usage.
• userContent.css won't show up under Web Developer Tools, only viewsource.css is available. That implies more tedious debugging.

Usage of Solarized Dark theme

Solarized theme is one of the most widely used color palette, featuring precisely calculated lightness and hue relationships. Colors used in attached CSS try to be as faithful to both Solarized colors and original view-source color choices as possible, but there are a few changes due to contrast problems (and personal choices?):

• HTML entities (&, < etc) were originally displayed in violet, but Solarized violet is too close to normal text color under Solarized Dark theme. So I changed HTML entity color to yellowish instead.
• Text shadow applied to blue / cyan syntax highlights to enhance font outline.
• Plain background is boring, right? Right? The stylesheet below applies a blueish tint (resembling Solarized Dark background color, #002B36) to the left half of background image (where most HTML is shown), as well as translucency to guarantee background luminosity is low enough.
• Zebra stripping applied to background

Everybody is free to experiment with your own favourite background filters.

Changes to view-source UI

• Line number widened to 6 digits. Yes, HTML with tens of thousands of lines really does exist (as demonstrated with screenshot above, over 58000 lines actually)
• Border added between line number and content

Future user changes

On view-source UI, it is possible to check out its stylesheet by launching Web Developer Tool F12, and select Style Editor tab. Users can then freely pick styles they are not satisfied with, and incorporate changes to userContent.css.

userContent.css

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

	*|*:root {
		background: none !important;
	}

	#viewsource {
		font-family: "Roboto Mono", Inconsolata, "Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, -moz-fixed !important;
		line-height: 1.5em;
		background-image:
		url(https://farm9.staticflickr.com/8536/8680613751_71ef92bbdb_o_d.jpg),
		linear-gradient(to right, #002b36d0, #002b36d0, #000000d0),
		linear-gradient(#00000040 50%, transparent 50%);
		background-size: cover, cover, auto 3em;
		background-position: center, center, top 10px left 0;
		background-attachment: fixed, fixed, scroll;
		background-repeat: no-repeat, no-repeat, repeat-y;
		background-blend-mode: overlay, normal, normal;
		color: #839496;
	}

	pre[id]:before,
	span[id]:before {
		width: 6ch !important;
		color: #586e75 !important;
		margin-left: -7ch !important;
	}
	pre {
		padding-left: 1ch;
		margin-left: 6ch !important;
		border-left: 2px solid #073642;
	}
	pre > :first-child {
		padding-right: 1ch;
	}

	.highlight .start-tag {
	 color: #d33682 !important;
	}
	.highlight .end-tag {
	 color: #d33682 !important;
	}
	.highlight .comment {
	 color: #586e75 !important;
	}
	.highlight .cdata {
	 color: #cb4b16 !important;
	}
	.highlight .doctype {
	 color: #268be2 !important;
	}
	.highlight .pi {
	 color: #268be2 !important; /* orchid -> blue */
	}
	.highlight .entity {
	 color: #b58900 !important; /* violet -> yellow */
	}
	.highlight .attribute-name {
	 color: #93a1a1 !important;
	}
	.highlight .attribute-value {
	 color: #2aa198 !important;
	 text-shadow: 1px 1px 2px black;
	}
	.highlight .markupdeclaration {
	 color: #859900 !important;
	}
	.highlight .error,
	.highlight .error > :-moz-any(.start-tag, .end-tag, .comment, .cdata, .doctype,
	.pi, .entity, .attribute-name, .attribute-value) {
		color: #002b36 !important;
		background-color: #dc322f !important;
	}
}