Low contrast web browsing (yay!)

From: Todd Carson <toc@daybefore.net>

6 files changed, 618 insertions, 7 deletions

diff --git a/Makefile b/Makefile
index 9ade2dc..8e4ae90 100644
--- a/Makefile
+++ b/Makefile
@@ -23,9 +23,10 @@ MANDIR= ${PREFIX}/man/cat
 
 CLEANFILES += javascript.h
 
-${.CURDIR}/javascript.h: hinting.js input-focus.js
+${.CURDIR}/javascript.h: hinting.js input-focus.js inverse.js
 	perl ${.CURDIR}/js-merge-helper.pl ${.CURDIR}/hinting.js \
-	    ${.CURDIR}/input-focus.js >  ${.CURDIR}/javascript.h
+	    ${.CURDIR}/input-focus.js ${.CURDIR}/inverse.js \
+	>  ${.CURDIR}/javascript.h
 
 beforeinstall:
 	mkdir -p ${PREFIX}/share/xxxterm
@@ -34,6 +35,7 @@ beforeinstall:
 	cp ${.CURDIR}/xxxtermicon48.png ${PREFIX}/share/xxxterm
 	cp ${.CURDIR}/xxxtermicon64.png ${PREFIX}/share/xxxterm
 	cp ${.CURDIR}/xxxtermicon128.png ${PREFIX}/share/xxxterm
+	cp ${.CURDIR}/style.css ${PREFIX}/share/xxxterm
 
 ${PROG} ${OBJS} beforedepend: ${.CURDIR}/javascript.h
 
diff --git a/inverse.js b/inverse.js
new file mode 100644
index 0000000..87a6728
--- /dev/null
+++ b/inverse.js
@@ -0,0 +1,444 @@
+/*
+ * CSS from NightShift - Eye Care by vetinari
+ * http://userstyles.org/styles/18192
+ */
+
+function inverse() {
+	var css = "
+	    body, html { min-height: 100%!important; }
+	    html, body { background-color:#111!important }
+	    body>*:not(:empty) { background-color:#222!important }
+	    body>*>*:not(:empty) { background-color:#222!important }
+	    body>*>*>*:not(:empty) { background-color:#282828!important }
+	    body>*>*>*>*:not(:empty) { background-color:#282828!important }
+	    body>*>*>*>*>*:not(:empty) {background-color:#383838!important }
+	    body>*>*>*>*>* * { background-color:#383838!important }
+	    body table[border=\"0\"] td { background-color:#111!important }
+	    body table table[border=\"0\"] td {
+	    	background-color:#333!important
+	    }
+	    body table table table[border=\"0\"] td {
+	    	background-color:#222!important
+	    }
+	    body table table table table[border=\"0\"] td {
+	    	background-color:#444!important
+	    }
+	    body *:empty { background-color: #252525!important }
+
+	    body p:not(:empty),
+	    body p *,
+	    body h1,
+	    body h1 *,
+	    body h2,
+	    body h2 *,
+	    body h3,
+	    body h3 *,
+	    body h4,
+	    body h4 *,
+	    body h5,
+	    body h5 *,
+	    body strong>*,
+	    body b>*,
+	    body em>*,
+	    body i>*,
+	    body span>*:not(img){ background:transparent none!important }
+
+	    body h1,
+	    body h1 *,
+	    body h2,
+	    body h2 *,
+	    p>strong:only-of-type,
+	    p>b:only-of-type{ color: #a98!important }
+
+	    body h3,
+	    body h3 *,
+	    body h4,
+	    body h4 *{ color: #aaa!important }
+	    *:not([onclick]):not(input):not(a):not(img):not([class^=\"UI\"]),
+	    body a:not(:empty),
+	    div:not([onclick]) {
+	    	background-image:none!important;
+	        text-indent:0!important
+	    }
+	    *[onclick] { color:#79a!important }
+	    *[onclick]:hover { color:#99a8aa!important }
+	    body hr { 
+	    	background: #666 none!important;
+	    	color: #666!important;
+	        border:1px solid #666!important;
+	    	height: 1px!important;
+	        overflow:hidden!important;
+	    	display: block!important }
+	    * { color: #c0c0c0!important; border-color:#666!important; }
+	    * body a, body a *{ color: #B6AA7B!important; }
+	    body a:hover, body a:hover * {
+	    	color: #D9C077!important;
+	        text-decoration: underline!important
+	    }
+	    body img,a[href] img,
+	    a[href] button,
+	    input[type=\"image\"],*[onclick]:empty,
+	    body a:empty{ opacity:.5!important }
+	    body img:hover,
+	    a[href]:hover img,
+	    a[href]:hover button,
+	    *[onclick]:empty:hover,
+	    body a:empty:hover{ opacity:1!important }
+
+	    body input[type],
+	    body textarea[name],
+	    body input[name],
+	    body input[id],
+	    body select[name] {
+	    	-webkit-appearance:none!important;
+	        color: #bbb!important;
+	    	-webkit-border-radius:4px !important;
+	        border-width: 1px!important;
+	        border-color: #778!important;
+	    	border-style:solid!important;
+	        background:#555 none!important
+	    }
+	    body select[name] {
+	    	-webkit-appearance:none!important;
+	        color: #bbb!important;
+	    	-webkit-border-radius:4px !important;
+	        border-width: 1px!important;
+	        border-color: #778!important;
+	    	border-style:solid!important;
+	        background-color:#555!important
+	    }
+	    body input>*, body textarea>* {
+	        background:transparent none!important;
+	        color: #bbb!important;
+	    	border-style:solid!important;
+	        border-width: 0px!important;
+	    }
+	    body select * {
+	    	background-color:transparent !important;
+	        color: #bbb!important;
+	    	border-style:solid!important;
+	        border-width: 0px!important;
+	    }
+	    pre:not(:empty),
+	    code:not(:empty),
+	    cite:not(:empty),
+	    pre:not(:empty) *,
+	    code:not(:empty) *,
+	    cite:not(:empty) * {
+	    	background-image:url(data:image/gif; base64,
+	    	R0lGODlhBAAEAIAAABERESIiIiH5BAAAAAAALAAAAAAEAAQAAAIGTACXaHkFADs=
+	    	)
+	    !important;
+	    color: #bcc8dc!important;
+	    }";
+	var heads = document.getElementsByTagName("head");
+	var orig = inverse;
+
+	if (heads.length == 0)
+		return function() {};
+
+	var node = document.createElement("style");
+	node.type = "text/css";
+	node.appendChild(document.createTextNode(css));
+	heads[0].appendChild(node); 
+	return function() {
+		node.parentNode.removeChild(node);
+		return orig;
+	};
+}
+/*
+ * CSS from NightShift - Eye Care by vetinari
+ * http://userstyles.org/styles/18192
+ */
+
+function inverse() {
+	var css = "
+	    body, html { min-height: 100%!important; }
+	    html, body { background-color:#111!important }
+	    body>*:not(:empty) { background-color:#222!important }
+	    body>*>*:not(:empty) { background-color:#222!important }
+	    body>*>*>*:not(:empty) { background-color:#282828!important }
+	    body>*>*>*>*:not(:empty) { background-color:#282828!important }
+	    body>*>*>*>*>*:not(:empty) {background-color:#383838!important }
+	    body>*>*>*>*>* * { background-color:#383838!important }
+	    body table[border=\"0\"] td { background-color:#111!important }
+	    body table table[border=\"0\"] td {
+	    	background-color:#333!important
+	    }
+	    body table table table[border=\"0\"] td {
+	    	background-color:#222!important
+	    }
+	    body table table table table[border=\"0\"] td {
+	    	background-color:#444!important
+	    }
+	    body *:empty { background-color: #252525!important }
+
+	    body p:not(:empty),
+	    body p *,
+	    body h1,
+	    body h1 *,
+	    body h2,
+	    body h2 *,
+	    body h3,
+	    body h3 *,
+	    body h4,
+	    body h4 *,
+	    body h5,
+	    body h5 *,
+	    body strong>*,
+	    body b>*,
+	    body em>*,
+	    body i>*,
+	    body span>*:not(img){ background:transparent none!important }
+
+	    body h1,
+	    body h1 *,
+	    body h2,
+	    body h2 *,
+	    p>strong:only-of-type,
+	    p>b:only-of-type{ color: #a98!important }
+
+	    body h3,
+	    body h3 *,
+	    body h4,
+	    body h4 *{ color: #aaa!important }
+	    *:not([onclick]):not(input):not(a):not(img):not([class^=\"UI\"]),
+	    body a:not(:empty),
+	    div:not([onclick]) {
+	    	background-image:none!important;
+	        text-indent:0!important
+	    }
+	    *[onclick] { color:#79a!important }
+	    *[onclick]:hover { color:#99a8aa!important }
+	    body hr { 
+	    	background: #666 none!important;
+	    	color: #666!important;
+	        border:1px solid #666!important;
+	    	height: 1px!important;
+	        overflow:hidden!important;
+	    	display: block!important }
+	    * { color: #c0c0c0!important; border-color:#666!important; }
+	    * body a, body a *{ color: #B6AA7B!important; }
+	    body a:hover, body a:hover * {
+	    	color: #D9C077!important;
+	        text-decoration: underline!important
+	    }
+	    body img,a[href] img,
+	    a[href] button,
+	    input[type=\"image\"],*[onclick]:empty,
+	    body a:empty{ opacity:.5!important }
+	    body img:hover,
+	    a[href]:hover img,
+	    a[href]:hover button,
+	    *[onclick]:empty:hover,
+	    body a:empty:hover{ opacity:1!important }
+
+	    body input[type],
+	    body textarea[name],
+	    body input[name],
+	    body input[id],
+	    body select[name] {
+	    	-webkit-appearance:none!important;
+	        color: #bbb!important;
+	    	-webkit-border-radius:4px !important;
+	        border-width: 1px!important;
+	        border-color: #778!important;
+	    	border-style:solid!important;
+	        background:#555 none!important
+	    }
+	    body select[name] {
+	    	-webkit-appearance:none!important;
+	        color: #bbb!important;
+	    	-webkit-border-radius:4px !important;
+	        border-width: 1px!important;
+	        border-color: #778!important;
+	    	border-style:solid!important;
+	        background-color:#555!important
+	    }
+	    body input>*, body textarea>* {
+	        background:transparent none!important;
+	        color: #bbb!important;
+	    	border-style:solid!important;
+	        border-width: 0px!important;
+	    }
+	    body select * {
+	    	background-color:transparent !important;
+	        color: #bbb!important;
+	    	border-style:solid!important;
+	        border-width: 0px!important;
+	    }
+	    pre:not(:empty),
+	    code:not(:empty),
+	    cite:not(:empty),
+	    pre:not(:empty) *,
+	    code:not(:empty) *,
+	    cite:not(:empty) * {
+	    	background-image:url(data:image/gif; base64,
+	    	R0lGODlhBAAEAIAAABERESIiIiH5BAAAAAAALAAAAAAEAAQAAAIGTACXaHkFADs=
+	    	)
+	    !important;
+	    color: #bcc8dc!important;
+	    }";
+	var heads = document.getElementsByTagName("head");
+	var orig = inverse;
+
+	if (heads.length == 0)
+		return function() {};
+
+	var node = document.createElement("style");
+	node.type = "text/css";
+	node.appendChild(document.createTextNode(css));
+	heads[0].appendChild(node); 
+	return function() {
+		node.parentNode.removeChild(node);
+		return orig;
+	};
+}
+/*
+ * CSS from NightShift - Eye Care by vetinari
+ * http://userstyles.org/styles/18192
+ */
+
+function inverse() {
+	var css = "
+	    body, html { min-height: 100%!important; }
+	    html, body { background-color:#111!important }
+	    body>*:not(:empty) { background-color:#222!important }
+	    body>*>*:not(:empty) { background-color:#222!important }
+	    body>*>*>*:not(:empty) { background-color:#282828!important }
+	    body>*>*>*>*:not(:empty) { background-color:#282828!important }
+	    body>*>*>*>*>*:not(:empty) {background-color:#383838!important }
+	    body>*>*>*>*>* * { background-color:#383838!important }
+	    body table[border=\"0\"] td { background-color:#111!important }
+	    body table table[border=\"0\"] td {
+	    	background-color:#333!important
+	    }
+	    body table table table[border=\"0\"] td {
+	    	background-color:#222!important
+	    }
+	    body table table table table[border=\"0\"] td {
+	    	background-color:#444!important
+	    }
+	    body *:empty { background-color: #252525!important }
+
+	    body p:not(:empty),
+	    body p *,
+	    body h1,
+	    body h1 *,
+	    body h2,
+	    body h2 *,
+	    body h3,
+	    body h3 *,
+	    body h4,
+	    body h4 *,
+	    body h5,
+	    body h5 *,
+	    body strong>*,
+	    body b>*,
+	    body em>*,
+	    body i>*,
+	    body span>*:not(img){ background:transparent none!important }
+
+	    body h1,
+	    body h1 *,
+	    body h2,
+	    body h2 *,
+	    p>strong:only-of-type,
+	    p>b:only-of-type{ color: #a98!important }
+
+	    body h3,
+	    body h3 *,
+	    body h4,
+	    body h4 *{ color: #aaa!important }
+	    *:not([onclick]):not(input):not(a):not(img):not([class^=\"UI\"]),
+	    body a:not(:empty),
+	    div:not([onclick]) {
+	    	background-image:none!important;
+	        text-indent:0!important
+	    }
+	    *[onclick] { color:#79a!important }
+	    *[onclick]:hover { color:#99a8aa!important }
+	    body hr { 
+	    	background: #666 none!important;
+	    	color: #666!important;
+	        border:1px solid #666!important;
+	    	height: 1px!important;
+	        overflow:hidden!important;
+	    	display: block!important }
+	    * { color: #c0c0c0!important; border-color:#666!important; }
+	    * body a, body a *{ color: #B6AA7B!important; }
+	    body a:hover, body a:hover * {
+	    	color: #D9C077!important;
+	        text-decoration: underline!important
+	    }
+	    body img,a[href] img,
+	    a[href] button,
+	    input[type=\"image\"],*[onclick]:empty,
+	    body a:empty{ opacity:.5!important }
+	    body img:hover,
+	    a[href]:hover img,
+	    a[href]:hover button,
+	    *[onclick]:empty:hover,
+	    body a:empty:hover{ opacity:1!important }
+
+	    body input[type],
+	    body textarea[name],
+	    body input[name],
+	    body input[id],
+	    body select[name] {
+	    	-webkit-appearance:none!important;
+	        color: #bbb!important;
+	    	-webkit-border-radius:4px !important;
+	        border-width: 1px!important;
+	        border-color: #778!important;
+	    	border-style:solid!important;
+	        background:#555 none!important
+	    }
+	    body select[name] {
+	    	-webkit-appearance:none!important;
+	        color: #bbb!important;
+	    	-webkit-border-radius:4px !important;
+	        border-width: 1px!important;
+	        border-color: #778!important;
+	    	border-style:solid!important;
+	        background-color:#555!important
+	    }
+	    body input>*, body textarea>* {
+	        background:transparent none!important;
+	        color: #bbb!important;
+	    	border-style:solid!important;
+	        border-width: 0px!important;
+	    }
+	    body select * {
+	    	background-color:transparent !important;
+	        color: #bbb!important;
+	    	border-style:solid!important;
+	        border-width: 0px!important;
+	    }
+	    pre:not(:empty),
+	    code:not(:empty),
+	    cite:not(:empty),
+	    pre:not(:empty) *,
+	    code:not(:empty) *,
+	    cite:not(:empty) * {
+	    	background-image:url(data:image/gif; base64,
+	    	R0lGODlhBAAEAIAAABERESIiIiH5BAAAAAAALAAAAAAEAAQAAAIGTACXaHkFADs=
+	    	)
+	    !important;
+	    color: #bcc8dc!important;
+	    }";
+	var heads = document.getElementsByTagName("head");
+	var orig = inverse;
+
+	if (heads.length == 0)
+		return function() {};
+
+	var node = document.createElement("style");
+	node.type = "text/css";
+	node.appendChild(document.createTextNode(css));
+	heads[0].appendChild(node); 
+	return function() {
+		node.parentNode.removeChild(node);
+		return orig;
+	};
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..4926f03
--- /dev/null
+++ b/style.css
@@ -0,0 +1,124 @@
+/*
+ * NIGHTSHIFT - eye care:
+ * A darkening style for all websites.
+ * by vetinari - 2009
+ * contact: vetinari.userstyles@inode.at
+ */
+
+body,html { min-height: 100%!important; }
+
+html, body { background-color:#111!important }
+
+body>*:not(:empty){ background-color:#222!important }
+
+body>*>*:not(:empty){ background-color:#222!important }
+
+body>*>*>*:not(:empty){ background-color:#282828!important }
+
+body>*>*>*>*:not(:empty){ background-color:#282828!important }
+
+body>*>*>*>*>*:not(:empty){ background-color:#383838!important }
+
+body>*>*>*>*>* *{ background-color:#383838!important }
+
+body table[border="0"] td{ background-color:#111!important }
+
+body table table[border="0"] td{ background-color:#333!important }
+
+body table table table[border="0"] td{ background-color:#222!important }
+
+body table table table table[border="0"] td{ background-color:#444!important }
+
+body *:empty{ background-color: #252525!important }
+
+body p:not(:empty), body p *, body h1, body h1 *, body h2, body h2 *, body h3,
+body h3 *, body h4, body h4 *, body h5, body h5 *, body strong>*, body b>*, body
+em>*, body i>*,  body span>*:not(img) { 
+	background:transparent none!important
+}
+
+body h1, body h1 *, body h2, body h2 *, p>strong:only-of-type,
+p>b:only-of-type {
+	color: #a98!important
+}
+
+body h3, body h3 *, body h4, body h4 *{ color: #aaa!important }
+
+*:not([onclick]):not(input):not(a):not(img):not([class^="UI"]), body
+a:not(:empty), div:not([onclick]) {
+	background-image:none!important;
+	text-indent:0!important
+}
+
+*[onclick] { color:#79a!important }
+
+*[onclick]:hover { color:#99a8aa!important }
+
+body hr {
+	background: #666 none!important;
+	color: #666!important;
+	border:1px solid #666!important;
+	height: 1px!important;
+	overflow:hidden!important;
+	display: block!important
+}
+
+* { color: #c0c0c0!important; border-color:#666!important; }
+
+* body a, body a * { color: #B6AA7B!important; }
+
+body a:hover, body a:hover * {
+	color: #D9C077!important;
+	text-decoration: underline!important
+}
+
+body img,a[href] img, a[href] button, input[type="image"],*[onclick]:empty, body
+a:empty {
+	opacity:.5!important
+}
+
+body img:hover,a[href]:hover img, a[href]:hover button, *[onclick]:empty:hover,
+body a:empty:hover {
+	opacity:1!important
+}
+
+body input[type], body textarea[name], body input[name], body input[id], body
+select[name]{
+	-moz-appearance:none!important;
+	color: #bbb!important;
+	-moz-border-radius:4px !important;
+	border-width: 1px!important;
+	border-color: #778!important;
+	border-style:solid!important;
+	background:#555 none  !important
+}
+
+body select[name] {
+	-moz-appearance:none!important;
+	color: #bbb!important;
+	-moz-border-radius:4px !important;
+	border-width: 1px!important;
+	border-color: #778!important;
+	border-style:solid!important;
+	background-color:#555!important
+}
+
+body input>*, body textarea>* {
+	background:transparent none !important;
+	color: #bbb!important;
+	border-style:solid!important;
+	border-width: 0px!important;
+}
+
+body select * {
+	background-color:transparent !important;
+	color: #bbb!important;
+	border-style:solid!important;
+	border-width: 0px!important;
+}
+
+pre:not(:empty), code:not(:empty) , cite:not(:empty), pre:not(:empty) *,
+code:not(:empty) *, cite:not(:empty)
+* {
+	background-image:url(data:image/gif;base64,R0lGODlhBAAEAIAAABERESIiIiH5BAAAAAAALAAAAAAEAAQAAAIGTACXaHkFADs=)!important;
+	color: #bcc8dc!important;}
diff --git a/xxxterm.1 b/xxxterm.1
index e3e1928..b359f9c 100644
--- a/xxxterm.1
+++ b/xxxterm.1
@@ -338,6 +338,14 @@ Commands to exit the browser.
 Quit
 .Pq Cm quit
 .El
+.Ss Low-Contrast Color Scheme
+This command toggles the page's style between the default CSS and a
+low-contrast color scheme with light grey text on a dark grey background.
+.Pp
+.Bl -tag -width Ds -offset indent -compact
+.It Cm i
+Toggle the current tab's style.
+.El
 .Sh COMMAND MODE
 Command mode works in a similar fashion to the
 .Xr vi 1
diff --git a/xxxterm.c b/xxxterm.c
index 8c3d953..a26ab32 100644
--- a/xxxterm.c
+++ b/xxxterm.c
@@ -20,9 +20,6 @@
 
 /*
  * TODO:
- *	inverse color browsing
- *	favs
- *		- store in sqlite
  *	multi letter commands
  *	pre and post counts for commands
  *	autocompletion on various inputs
@@ -208,6 +205,10 @@ struct tab {
 	char			hint_buf[128];
 	char			hint_num[128];
 
+	/* custom stylesheet */
+	int			styled;
+	char			*stylesheet;
+
 	/* search */
 	char			*search_text;
 	int			search_forward;
@@ -1852,6 +1853,29 @@ hint(struct tab *t, struct karg *args)
 	return (0);
 }
 
+void
+apply_style(struct tab *t)
+{
+	g_object_set(G_OBJECT(t->settings),
+	    "user-stylesheet-uri", t->stylesheet, (char *)NULL);
+}
+
+int
+userstyle(struct tab *t, struct karg *args)
+{
+	DNPRINTF(XT_D_JS, "userstyle: tab %d\n", t->tab_id);
+
+	if (t->styled) {
+		t->styled = 0;
+		g_object_set(G_OBJECT(t->settings),
+		    "user-stylesheet-uri", NULL, (char *)NULL);
+	} else {
+		t->styled = 1;
+		apply_style(t);
+	}
+	return (0);
+}
+
 /*
  * Doesn't work fully, due to the following bug:
  * https://bugs.webkit.org/show_bug.cgi?id=51747
@@ -4657,6 +4681,9 @@ struct key_binding {
 	/* hinting */
 	{ "hinting",		0,	0,	GDK_f,		hint,		{.i = 0} },
 
+	/* custom stylesheet */
+	{ "userstyle",		0,	0,	GDK_i,		userstyle,	{.i = 0 } },
+
 	/* navigation */
 	{ "goback",		0,	0,	GDK_BackSpace,	navaction,	{.i = XT_NAV_BACK} },
 	{ "goback",		MOD1,	0,	GDK_Left,	navaction,	{.i = XT_NAV_BACK} },
@@ -5751,6 +5778,9 @@ notify_load_status_cb(WebKitWebView* wview, GParamSpec* pspec, struct tab *t)
 			check_and_set_js(uri, t);
 		}
 
+		if (t->styled)
+			apply_style(t);
+
 		show_ca_status(t, uri);
 
 		/* we know enough to autosave the session */
@@ -6567,9 +6597,10 @@ create_browser(struct tab *t)
 		    (char *)NULL);
 		t->user_agent = g_strdup_printf("%s %s+", strval, version);
 		g_free(strval);
-	} else {
+	} else
 		t->user_agent = g_strdup(user_agent);
-	}
+
+	t->stylesheet = g_strdup_printf("file://%s/style.css", resource_dir);
 
 	setup_webkit(t);
 
@@ -6753,6 +6784,7 @@ delete_tab(struct tab *t)
 
 	gtk_widget_destroy(t->vbox);
 	g_free(t->user_agent);
+	g_free(t->stylesheet);
 	g_free(t);
 
 	recalc_tabs();
diff --git a/xxxterm.conf b/xxxterm.conf
index 0be9c93..fd9e14e 100644
--- a/xxxterm.conf
+++ b/xxxterm.conf
@@ -145,6 +145,7 @@
 # keybinding	= focusaddress,F6
 # keybinding	= focussearch,F7
 # keybinding	= hinting,f
+# keybinding	= userstyle,i
 # keybinding	= goback,BackSpace
 # keybinding	= goback,M1-Left
 # keybinding	= goforward,S-BackSpace