[commit: haddock] master: Fix issue with hyperlink highlight styling in Chrome browser. (671e7dc)

[git at git.haskell.org]

Repository : ssh://git@git.haskell.org/haddock

On branch  : master
Link       : http://git.haskell.org/haddock.git/commitdiff/671e7dc60266d1e0fdabd34956719961c1333fb3

>---------------------------------------------------------------

commit 671e7dc60266d1e0fdabd34956719961c1333fb3
Author: Łukasz Hanuszczak <lukasz.hanuszczak at gmail.com>
Date:   Mon Jun 29 20:33:18 2015 +0200

    Fix issue with hyperlink highlight styling in Chrome browser.


>---------------------------------------------------------------

671e7dc60266d1e0fdabd34956719961c1333fb3
 haddock-api/resources/html/highlight.js  | 57 ++++++++------------------------
 haddock-api/resources/html/solarized.css |  2 +-
 2 files changed, 15 insertions(+), 44 deletions(-)

diff --git a/haddock-api/resources/html/highlight.js b/haddock-api/resources/html/highlight.js
index a538fea..1e903bd 100644
--- a/haddock-api/resources/html/highlight.js
+++ b/haddock-api/resources/html/highlight.js
@@ -1,48 +1,19 @@
 
-var styleForRule = function (rule) {
-	var sheets = document.styleSheets;
-	for (var s = 0; s < sheets.length; s++) {
-		var rules = sheets[s].cssRules;
-		if (rules === null) {
-			return null;
-		}
+var highlight = function (on) {
+	return function () {
+		var links = document.getElementsByTagName('a');
+		for (var i = 0; i < links.length; i++) {
+			var that = links[i];
 
-		for (var r = 0; r < rules.length; r++) {
-			if (rules[r].selectorText == rule) {
-				return rules[r].style;
+			if (this.href != that.href) {
+				continue;
 			}
-		}
-	}
-};
-
-var highlight = function () {
-	/*
-	 * Chrome for security reasons disallows to read .cssRules property.
-	 * So, we are forced to pick some color and set it as a highlight.
-	 */
-	var style = styleForRule("a:hover");
-	var color = style !== null ? style["background-color"] : "#808080";
-
-	var links = document.getElementsByTagName('a');
-	for (var i = 0; i < links.length; i++) {
-		var that = links[i];
-		if (this.href == that.href) {
-			that.style["background-color"] = color;
-		}
-	}
-};
 
-/*
- * I have no idea what is the proper antonym for "highlight" in this
- * context. "Diminish"? "Unhighlight"? "Lowlight" sounds ridiculously
- * so I like it.
- */
-var lowlight = function () {
-	var links = document.getElementsByTagName('a');
-	for (var i = 0; i < links.length; i++) {
-		var that = links[i];
-		if (this.href == that.href) {
-			that.style["background-color"] = "";
+			if (on) {
+				that.classList.add("hover-highlight");
+			} else {
+				that.classList.remove("hover-highlight");
+			}
 		}
 	}
 };
@@ -50,7 +21,7 @@ var lowlight = function () {
 window.onload = function () {
 	var links = document.getElementsByTagName('a');
 	for (var i = 0; i < links.length; i++) {
-		links[i].onmouseover = highlight;
-		links[i].onmouseout = lowlight;
+		links[i].onmouseover = highlight(true);
+		links[i].onmouseout = highlight(false);
 	}
 };
diff --git a/haddock-api/resources/html/solarized.css b/haddock-api/resources/html/solarized.css
index e4bff38..e83dc5e 100644
--- a/haddock-api/resources/html/solarized.css
+++ b/haddock-api/resources/html/solarized.css
@@ -50,6 +50,6 @@ a:link, a:visited {
 	border-bottom: 1px solid #eee8d5;
 }
 
-a:hover {
+a:hover, a.hover-highlight {
 	background-color: #eee8d5;
 }