diff options
Diffstat (limited to 'chromium/content/browser/resources/accessibility')
3 files changed, 267 insertions, 0 deletions
diff --git a/chromium/content/browser/resources/accessibility/accessibility.css b/chromium/content/browser/resources/accessibility/accessibility.css new file mode 100644 index 00000000000..e00a9223e89 --- /dev/null +++ b/chromium/content/browser/resources/accessibility/accessibility.css @@ -0,0 +1,30 @@ +/* + * Copyright (c) 2013 The Chromium Authors. All rights reserved. + * Use of this source code is governed by a BSD-style license that can be + * found in the LICENSE file. + */ + +body { + font-family: Arial, sans-serif; + font-size: 12px; + margin: 10px; + min-width: 47em; + padding-bottom: 65px; +} + +img { + float: left; + height: 16px; + padding-right: 5px; + width: 16px; +} + +.row { + border-bottom: 1px solid #A0A0A0; + padding: 5px; +} + +.url { + color: #A0A0A0; +} + diff --git a/chromium/content/browser/resources/accessibility/accessibility.html b/chromium/content/browser/resources/accessibility/accessibility.html new file mode 100644 index 00000000000..c1a2d8d0bfc --- /dev/null +++ b/chromium/content/browser/resources/accessibility/accessibility.html @@ -0,0 +1,25 @@ +<!DOCTYPE HTML> +<html> +<!-- +Copyright (c) 2013 The Chromium Authors. All rights reserved. +Use of this source code is governed by a BSD-style license that can be +found in the LICENSE file. +--> +<head> + <meta charset="utf-8"> + <title>Accessibility</title> + <link rel="stylesheet" href="accessibility.css"> + <script src="chrome://resources/js/cr.js"></script> + <script src="chrome://resources/js/load_time_data.js"></script> + <script src="chrome://resources/js/util.js"></script> + <script src="strings.js"></script> + <script src="accessibility.js"></script> +</head> +<body> + <h1>Accessibility</h1> + <div id="global" class="row">Global accessibility mode: + <a id="toggle_global" href="#"></a></div> + <div id="pages" class="list"></div> + <script src="chrome://resources/js/i18n_template2.js"></script> +</body> +</html> diff --git a/chromium/content/browser/resources/accessibility/accessibility.js b/chromium/content/browser/resources/accessibility/accessibility.js new file mode 100644 index 00000000000..5d98b48c62f --- /dev/null +++ b/chromium/content/browser/resources/accessibility/accessibility.js @@ -0,0 +1,212 @@ +// Copyright (c) 2013 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +cr.define('accessibility', function() { + 'use strict'; + + function requestData() { + var xhr = new XMLHttpRequest(); + xhr.open('GET', 'targets-data.json', false); + xhr.send(null); + if (xhr.status === 200) { + console.log(xhr.responseText); + return JSON.parse(xhr.responseText); + } + return []; + } + + // TODO(aboxhall): add a mechanism to request individual and global a11y + // mode, xhr them on toggle... or just re-requestData and be smarter about + // ID-ing rows? + + function toggleAccessibility(data, element) { + chrome.send('toggleAccessibility', + [String(data.processId), String(data.routeId)]); + var a11y_was_on = (element.textContent.match(/on/) != null); + element.textContent = ' accessibility ' + (a11y_was_on ? ' off' : ' on'); + var row = element.parentElement; + if (a11y_was_on) { + while (row.lastChild != element) + row.removeChild(row.lastChild); + } else { + row.appendChild(document.createTextNode(' | ')); + row.appendChild(createShowAccessibilityTreeElement(data, row, false)); + } + } + + function requestAccessibilityTree(data, element) { + chrome.send('requestAccessibilityTree', + [String(data.processId), String(data.routeId)]); + } + + function toggleGlobalAccessibility() { + chrome.send('toggleGlobalAccessibility'); + document.location.reload(); // FIXME see TODO above + } + + function initialize() { + console.log('initialize'); + var data = requestData(); + + addGlobalAccessibilityModeToggle(data['global_a11y_mode']); + + $('pages').textContent = ''; + + var list = data['list']; + for (var i = 0; i < list.length; i++) { + addToPagesList(list[i]); + } + } + + function addGlobalAccessibilityModeToggle(global_a11y_mode) { + $('toggle_global').textContent = (global_a11y_mode == 0 ? 'off' : 'on'); + $('toggle_global').addEventListener('click', + toggleGlobalAccessibility); + } + + function addToPagesList(data) { + // TODO: iterate through data and pages rows instead + var id = data['processId'] + '.' + data['routeId']; + var row = document.createElement('div'); + row.className = 'row'; + row.id = id; + formatRow(row, data); + + row.processId = data.processId; + row.routeId = data.routeId; + + var list = $('pages'); + list.appendChild(row); + } + + function formatRow(row, data) { + if (!('url' in data)) { + if ('error' in data) { + row.appendChild(createErrorMessageElement(data, row)); + return; + } + } + var properties = ['favicon_url', 'name', 'url']; + for (var j = 0; j < properties.length; j++) + row.appendChild(formatValue(data, properties[j])); + + row.appendChild(createToggleAccessibilityElement(data)); + if (data['a11y_mode'] != 0) { + row.appendChild(document.createTextNode(' | ')); + if ('tree' in data) { + row.appendChild(createShowAccessibilityTreeElement(data, row, true)); + row.appendChild(document.createTextNode(' | ')); + row.appendChild(createHideAccessibilityTreeElement(row.id)); + row.appendChild(createAccessibilityTreeElement(data)); + } + else { + row.appendChild(createShowAccessibilityTreeElement(data, row, false)); + if ('error' in data) + row.appendChild(createErrorMessageElement(data, row)); + } + } + } + + function formatValue(data, property) { + var value = data[property]; + + if (property == 'favicon_url') { + var faviconElement = document.createElement('img'); + if (value) + faviconElement.src = value; + faviconElement.alt = ""; + return faviconElement; + } + + var text = value ? String(value) : ''; + if (text.length > 100) + text = text.substring(0, 100) + '\u2026'; // ellipsis + + var span = document.createElement('span'); + span.textContent = ' ' + text + ' '; + span.className = property; + return span; + } + + function createToggleAccessibilityElement(data) { + var link = document.createElement('a'); + link.setAttribute('href', '#'); + var a11y_mode = data['a11y_mode']; + link.textContent = 'accessibility ' + (a11y_mode == 0 ? 'off' : 'on'); + link.addEventListener('click', + toggleAccessibility.bind(this, data, link)); + return link; + } + + function createShowAccessibilityTreeElement(data, row, opt_refresh) { + var link = document.createElement('a'); + link.setAttribute('href', '#'); + if (opt_refresh) + link.textContent = 'refresh accessibility tree'; + else + link.textContent = 'show accessibility tree'; + link.id = row.id + ':showTree'; + link.addEventListener('click', + requestAccessibilityTree.bind(this, data, link)); + return link; + } + + function createHideAccessibilityTreeElement(id) { + var link = document.createElement('a'); + link.setAttribute('href', '#'); + link.textContent = 'hide accessibility tree'; + link.addEventListener('click', + function() { + $(id + ':showTree').textContent = 'show accessibility tree'; + var existingTreeElements = $(id).getElementsByTagName('pre'); + for (var i = 0; i < existingTreeElements.length; i++) + $(id).removeChild(existingTreeElements[i]); + var row = $(id); + while (row.lastChild != $(id + ':showTree')) + row.removeChild(row.lastChild); + }); + return link; + } + + function createErrorMessageElement(data) { + var errorMessageElement = document.createElement('div'); + var errorMessage = data.error; + errorMessageElement.innerHTML = errorMessage + ' '; + var closeLink = document.createElement('a'); + closeLink.href='#'; + closeLink.textContent = '[close]'; + closeLink.addEventListener('click', function() { + var parentElement = errorMessageElement.parentElement; + parentElement.removeChild(errorMessageElement); + if (parentElement.childElementCount == 0) + parentElement.parentElement.removeChild(parentElement); + }); + errorMessageElement.appendChild(closeLink); + return errorMessageElement; + } + + function showTree(data) { + var id = data.processId + '.' + data.routeId; + var row = $(id); + if (!row) + return; + + row.textContent = ''; + formatRow(row, data); + } + + function createAccessibilityTreeElement(data) { + var treeElement = document.createElement('pre'); + var tree = data.tree; + treeElement.textContent = tree; + return treeElement; + } + + return { + initialize: initialize, + showTree: showTree + }; +}); + +document.addEventListener('DOMContentLoaded', accessibility.initialize); |