accessibility-developer-tools
Version:
This is a library of accessibility-related testing and utility code.
221 lines (184 loc) • 5 kB
HTML
<html>
<!--
Copyright 2010 The Closure Library Authors. All Rights Reserved.
Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
<title>Deps Tree</title>
<script type="text/javascript" src="../base.js"></script>
<script type="text/javascript">
goog.require('goog.object');
goog.require('goog.array');
goog.require('goog.debug');
goog.require('goog.events');
</script>
<style type="text/css">
h1 {
font: bold 24px verdana,sans-serif;
margin: 0px;
margin-bottom: 14px;
}
div {
position: relative;
font: normal 9px verdana,sans-serif;
padding: 3px;
margin: 5px;
background-color: #EEE;
border: 1px solid #999;
cursor: pointer;
color: #333;
}
div.hover {
background-color: #EE6;
border: 1px solid #990;
color: #000;
}
div.hilite {
background-color: #AFA;
border: 1px solid #090;
}
div.infile {
background-color: #FFA;
border: 1px solid #990;
}
div.required {
background-color: #FAA;
border: 1px solid #900;
}
</style>
</head>
<body>
<h1>Closure Dependency Graph</h1>
<script type="text/javascript">
// HackHack
// Hacked together quickly to provide a quick visible analysis. Not meant to be
// a complete or long lived tool.
var levels = [];
var visited = [];
var change = true;
var i = 0;
while (change) {
change = false;
levels[i] = [];
var newVisited = goog.array.clone(visited);
goog.object.forEach(goog.dependencies_.nameToPath, function(path, ns) {
var deps = goog.object.clone(goog.dependencies_.requires[path]);
goog.array.forEach(newVisited, function(value) {
goog.object.remove(deps, value);
});
if (goog.object.getCount(deps) == 0 && !goog.object.contains(visited, ns)) {
change = true;
levels[i].push(ns);
visited.push(ns);
}
});
i++;
}
var errors = [];
goog.object.forEach(goog.dependencies_.nameToPath, function(path, ns) {
if (!goog.array.contains(visited, ns)) {
errors.push(ns);
}
});
if (errors.length > 0) {
alert('The following files were not added to dependency graph: \n' +
errors.join('\n'));
}
document.write('<table><tr>')
goog.array.forEach(levels, function(level) {
document.write('<td>');
goog.array.forEach(level, function(ns) {
document.write(
goog.getMsg('<div id="{$ns}" class="dep">{$ns}</div>', {ns:ns}));
});
});
document.write('</tr></table>')
var currentTarget = null;
var hilited = [];
var required = [];
var infile = [];
goog.events.listen(document, 'mouseover', handleMouse);
goog.events.listen(document, 'keydown', handleKeys);
function handleMouse(e) {
highlightElement(e.target);
}
function handleKeys(e) {
if (currentTarget) {
switch (e.keyCode) {
case 40:
highlightElement(currentTarget.nextSibling);
break;
case 38:
highlightElement(currentTarget.previousSibling);
break;
case 39:
// right
break;
case 37:
// left
break;
default:
return;
}
e.preventDefault();
}
}
function highlightElement(el) {
if (el && el.id) {
goog.array.forEach(hilited.concat(required).concat(infile), function(ns) {
document.getElementById(ns).className = 'dep';
});
hilited.length = 0;
required.length = 0;
infile.length = 0;
if (currentTarget) {
currentTarget.className = 'dep';
}
highlightDeps(el.id);
highlightRequired(el.id);
highlightFile(el.id);
el.className = 'dep hover';
currentTarget = el;
}
}
function highlightFile(ns) {
var names = goog.dependencies_.pathToNames[goog.dependencies_.nameToPath[ns]];
goog.object.forEach(names, function(value, name) {
document.getElementById(name).className = 'dep infile';
infile.push(name);
});
}
function highlightRequired(ns) {
goog.object.forEach(goog.dependencies_.requires, function(value, key) {
if (goog.object.containsKey(value, ns)) {
var names = goog.dependencies_.pathToNames[key];
goog.object.forEach(names, function(val, id) {
if (!goog.array.contains(required, id)) {
document.getElementById(id).className = 'dep required';
required.push(id);
highlightRequired(id);
}
});
}
});
}
function highlightDeps(ns) {
var deps = goog.dependencies_.requires[goog.dependencies_.nameToPath[ns]];
goog.object.forEach(deps, function(value, key) {
if (!goog.array.contains(hilited, key)) {
document.getElementById(key).className = 'dep hilite';
hilited.push(key);
highlightDeps(key);
}
});
}
</script>
<div class="hover">selected item</div>
<div class="infile">...is in same file as the selected item</div>
<div class="hilite">...is a dependency of the selected item</div>
<div class="required">the selected item is a dependency of...</div>
</body>
</html>