lornajane avatar lornajane committed cebc7ae

adding style changes via js because they're working on every page for me. Also: pink

Comments (0)

Files changed (6)

+.chrome_keyboardnav_hint {
+    color: #000000;
+	background-color: white;
+	border: 2px solid orange;
+	padding: 0;
+	margin: 0;
+	font-size: 10pt;
+	line-height: 10pt;
+	position: absolute;
+    z-index: 2147483647;
+}
+
+.chrome_keyboardnav_hinta {
+	background-color: yellow !important;
+}
+
+#chrome_keyboardnav_hints {
+}
+/*
+	Copyright 2010 xnoreq
+	
+*/
+
+const HINT_CLASS = "chrome_keyboardnav_hint",
+	HINT_CLASS_A = "chrome_keyboardnav_hinta",
+	HINTS_ID = "chrome_keyboardnav_hints";
+
+const KEY_ESC = 27, KEY_COMMA = 188, KEY_RETURN = 13;
+	
+const DEF_CHARS = "0123456789abcdefghijklmnopqrstuvwxyz";
+
+var hintChars = localStorage["hintchars"];
+if (!hintChars) {
+	hintChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+}
+
+var mode = undefined;
+
+
+function isTextInput(e) {
+	return ((e.tagName == "INPUT" && (e.type == "text" || e.type == "password")) ||
+			e.tagName == "TEXTAREA");
+}
+
+function emulateMouseClick(target, ctrlKey, altKey, shiftKey, metaKey){
+	if (isTextInput(target) || target.tagName == "SELECT") {
+		target.focus();
+	} else {
+		var event = document.createEvent("MouseEvents");
+		event.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, ctrlKey, altKey, shiftKey, metaKey, 0, null);
+		target.dispatchEvent(event);
+	}
+}
+
+
+function HintMode() {
+	var nodes, hints, hintsDiv, input;
+	
+	this.init = function() {
+		hints = [];
+		input = "";
+		
+		var i, j, sel, elem;
+		nodes = [document.getElementsByTagName("a"),
+				document.getElementsByTagName("input"),
+				document.getElementsByTagName("textarea"),
+				document.getElementsByTagName("textarea"),
+				document.getElementsByTagName("select"),
+				document.getElementsByTagName("img"),
+				document.getElementsByTagName("button")];
+		sel = [];
+		for (i = 0; i < nodes.length; i++) {
+			elem = nodes[i];
+			for (j = 0; j < elem.length; j++) {
+				sel.push(elem[j]);
+			}
+		}
+		nodes = [];
+		for (i = 0; i < sel.length; i++) {
+			elem = sel[i];
+			if ((elem.tagName == "A" && !elem.href) ||
+				(elem.tagName == "INPUT" && elem.type == "hidden") ||
+				(elem.tagName == "IMG" && !elem.onclick)) {
+				
+				continue;
+			}
+			
+			if (elem.offsetWidth > 0 && elem.offsetHeight > 0) {
+				nodes.push(elem);
+			}
+		}
+		
+		hintsDiv = document.createElement("div");
+		hintsDiv.id = HINTS_ID;
+		document.body.appendChild(hintsDiv);
+		
+		var node, cr, span, hint;
+		for (var i = 0; i < nodes.length; i++) {
+			node = nodes[i];
+			cr = node.getBoundingClientRect();
+			span = document.createElement("span");
+			hint = hints[i] = {"str": nts(i), "node": node, "span": span};
+			
+			span.innerText = hint["str"];
+			span.className = HINT_CLASS;
+			hintsDiv.appendChild(span);
+			
+			span.style.top = Math.max(window.pageYOffset + cr.top, 0) + "px";
+			span.style.left = Math.max(window.pageXOffset + cr.left - span.offsetWidth, 0) + "px";
+            span.style.position = "absolute";
+            span.style.color = "#000000";
+	        span.style.backgroundColor = "white";
+	        span.style.border = "2px solid #F04DB4";
+	        span.style.padding = "0";
+	        span.style.margin = "0";
+	        span.style.fontSize = "10pt";
+	        span.style.lineHeight = "10pt";
+	        span.style.position = "absolute";
+            span.style.zIndex = "2147483647";
+		}
+	}
+	
+	this.handleKeyDown = function(e, modifier) {
+		switch (e.keyCode) {
+			case KEY_ESC:
+				if (!modifier) {
+					e.preventDefault();
+					this.hide();
+					mode = undefined;
+				}
+				break;
+			case KEY_COMMA:
+				if (!modifier) {
+					e.preventDefault();					
+					if (input == "") {
+						this.hide();
+						mode = undefined;
+					} else {
+						setHintClass.call(this, input, HINT_CLASS);
+						input = "";
+					}
+				}
+				break;
+			case KEY_RETURN:
+				var hint = setHintClass.call(this, input, HINT_CLASS);
+				if (hint) {
+					e.preventDefault();
+					emulateMouseClick(hint["node"], e.ctrlKey, e.altKey, e.shiftKey, e.metaKey);
+				}
+				input = "";
+				break;
+		}
+		
+		var c = String.fromCharCode(e.keyCode);
+		if (!modifier && hintChars.indexOf(c) >= 0) {
+			e.preventDefault();
+			setHintClass.call(this, input, HINT_CLASS);
+						
+			input += c;
+			var hint = setHintClassA.call(this, input, HINT_CLASS + " " + HINT_CLASS_A);
+		}
+	}
+	
+	this.hide = function() {
+		document.body.removeChild(hintsDiv);
+		hints = hintsDiv = null;
+		input = "";
+	}
+	
+	function setHintClass(str, cls) {
+		var num = stn(str);
+		if (!isNaN(num)) {
+			var hint = hints[num];
+			if (hint) {
+				hint["span"].className = cls;
+				hint["span"].style.backgroundColor = "white";
+				return hint;
+			}
+		}
+		return null;
+	}
+	
+	function setHintClassA(str, cls) {
+		var num = stn(str);
+		if (!isNaN(num)) {
+			var hint = hints[num];
+			if (hint) {
+				hint["span"].className = cls;
+				hint["span"].style.backgroundColor = "yellow";
+				return hint;
+			}
+		}
+		return null;
+	}
+	
+	function nts(num) {
+		var tmp = num.toString(hintChars.length);
+		var str = "";
+		for (var i = 0; i < tmp.length; i++) {
+			str += hintChars[DEF_CHARS.indexOf(tmp.charAt(i))];
+		}
+		return str;
+	}
+	
+	function stn(tmp) {
+		var str = "";
+		for (var i = 0; i < tmp.length; i++) {
+			str += DEF_CHARS[hintChars.indexOf(tmp.charAt(i))];
+		}
+		var num = parseInt(str, hintChars.length);
+		return num;
+	}
+}
+
+
+document.addEventListener('keydown', function(e) {
+	var modifier = (e.ctrlKey || e.altKey || e.shiftKey || e.metaKey);
+	var active = document.activeElement;
+	if (active && isTextInput(active)) {
+		if (e.keyCode == KEY_ESC && !modifier) {
+			e.preventDefault();
+			active.blur();
+		}
+	}
+	else if (mode == undefined) {
+		if (e.keyCode == KEY_COMMA && !modifier) {
+			e.preventDefault();
+			mode = new HintMode();
+			mode.init();
+		}
+	} else {
+		mode.handleKeyDown(e, modifier);
+	}
+}, true);
+{
+   "manifest_version": 2,
+   "content_scripts": [ {
+      "all_frames": false,
+      "css": [ "keyboardnav.css" ],
+      "js": [ "keyboardnav.js" ],
+      "matches": [ "http://*/*", "https://*/*", "ftp://*/*" ],
+      "run_at": "document_end"
+   } ],
+   "description": "Throw away your mouse and browse the web using your keyboard instead.",
+   "icons": {
+      "128": "icon128.png",
+      "48": "icon48.png"
+   },
+   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDa6MemOX6Bxpo0Sw+4RkqnHaINJ049FdQxo+rJEcuaXKLVksV2G4g5b83PExdpu+UOiwbskJWcRxiErvXwA/tjk0VkTWiBD+eZ9jcVXqEdLkAqfqW2j5Nr2CN0nWRuyLHBsBmMMXAVvDditU7kl9NHjutVGlBp4wxNkVNqxKo0oQIDAQAB",
+   "name": "Keyboard Navigation",
+   "options_page": "options.html",
+   "update_url": "http://clients2.google.com/service/update2/crx",
+   "version": "0.1.5"
+}
+<html>
+<head><title>Keyboard Navigation Options</title></head>
+<script type="text/javascript">
+
+// Saves options to localStorage.
+function save_options() {
+	var table = localStorage["hintchars"];
+	var inputTable = document.getElementById("hintchars");
+
+	if (inputTable.value.length == 0 || inputTable.value.length > 36) {
+		alert("Please enter up to 36 hint characters.");
+		return;
+	}
+	localStorage["hintchars"] = inputTable.value;
+}
+
+// Restores select box state to saved value from localStorage.
+function restore_options() {
+  var table = localStorage["hintchars"];
+  if (!table) {
+    return;
+  }
+  
+  var inputTable = document.getElementById("hintchars");
+  inputTable.value = table;
+}
+
+</script>
+
+<body onload="restore_options()">
+<h1>Keyboard Navigation Options</h1>
+<p>Hint characters: <input type="text" id="hintchars" value="ABCDEFGHIJKLMNOPQRSTUVWXYZ" />
+<br>(Enter up to 36 characters that will be used in the hints.)
+</p>
+<p>Note: Options don't work yet due to a limitation of the extension system.</p>
+
+<p>
+<button onclick="save_options()">Save</button>
+</p>
+
+</body>
+</html>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.