| OLD | NEW |
| 1 // Copyright (c) 2013 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2013 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 cr.define('accessibility', function() { | 5 cr.define('accessibility', function() { |
| 6 'use strict'; | 6 'use strict'; |
| 7 | 7 |
| 8 // Keep in sync with view_message_enums.h | |
| 9 var AccessibilityModeFlag = { | |
| 10 Platform: 1 << 0, | |
| 11 FullTree: 1 << 1 | |
| 12 } | |
| 13 | |
| 14 var AccessibilityMode = { | |
| 15 Off: 0, | |
| 16 Complete: | |
| 17 AccessibilityModeFlag.Platform | AccessibilityModeFlag.FullTree, | |
| 18 EditableTextOnly: AccessibilityModeFlag.Platform, | |
| 19 TreeOnly: AccessibilityModeFlag.FullTree | |
| 20 } | |
| 21 | |
| 22 function isAccessibilityComplete(mode) { | |
| 23 return ((mode & AccessibilityMode.Complete) == AccessibilityMode.Complete); | |
| 24 } | |
| 25 | |
| 26 function requestData() { | 8 function requestData() { |
| 27 var xhr = new XMLHttpRequest(); | 9 var xhr = new XMLHttpRequest(); |
| 28 xhr.open('GET', 'targets-data.json', false); | 10 xhr.open('GET', 'targets-data.json', false); |
| 29 xhr.send(null); | 11 xhr.send(null); |
| 30 if (xhr.status === 200) { | 12 if (xhr.status === 200) { |
| 31 console.log(xhr.responseText); | 13 console.log(xhr.responseText); |
| 32 return JSON.parse(xhr.responseText); | 14 return JSON.parse(xhr.responseText); |
| 33 } | 15 } |
| 34 return []; | 16 return []; |
| 35 } | 17 } |
| (...skipping 15 matching lines...) Expand all Loading... |
| 51 row.appendChild(document.createTextNode(' | ')); | 33 row.appendChild(document.createTextNode(' | ')); |
| 52 row.appendChild(createShowAccessibilityTreeElement(data, row, false)); | 34 row.appendChild(createShowAccessibilityTreeElement(data, row, false)); |
| 53 } | 35 } |
| 54 } | 36 } |
| 55 | 37 |
| 56 function requestAccessibilityTree(data, element) { | 38 function requestAccessibilityTree(data, element) { |
| 57 chrome.send('requestAccessibilityTree', | 39 chrome.send('requestAccessibilityTree', |
| 58 [String(data.processId), String(data.routeId)]); | 40 [String(data.processId), String(data.routeId)]); |
| 59 } | 41 } |
| 60 | 42 |
| 61 function toggleGlobalAccessibility() { | |
| 62 chrome.send('toggleGlobalAccessibility'); | |
| 63 document.location.reload(); // FIXME see TODO above | |
| 64 } | |
| 65 | |
| 66 function toggleInternalTree() { | |
| 67 chrome.send('toggleInternalTree'); | |
| 68 document.location.reload(); // FIXME see TODO above | |
| 69 } | |
| 70 | |
| 71 function initialize() { | 43 function initialize() { |
| 72 console.log('initialize'); | 44 console.log('initialize'); |
| 73 var data = requestData(); | 45 var data = requestData(); |
| 74 | 46 |
| 75 addGlobalAccessibilityModeToggle(data['global_a11y_mode']); | 47 bindCheckbox('native', data['native']); |
| 76 | 48 bindCheckbox('web', data['web']); |
| 77 addInternalTreeToggle(data['global_internal_tree_mode']); | 49 bindCheckbox('text', data['text']); |
| 50 bindCheckbox('screenreader', data['screenreader']); |
| 51 bindCheckbox('html', data['html']); |
| 52 bindCheckbox('internal', data['internal']); |
| 78 | 53 |
| 79 $('pages').textContent = ''; | 54 $('pages').textContent = ''; |
| 80 | 55 |
| 81 var list = data['list']; | 56 var list = data['list']; |
| 82 for (var i = 0; i < list.length; i++) { | 57 for (var i = 0; i < list.length; i++) { |
| 83 addToPagesList(list[i]); | 58 addToPagesList(list[i]); |
| 84 } | 59 } |
| 85 } | 60 } |
| 86 | 61 |
| 87 function addGlobalAccessibilityModeToggle(global_a11y_mode) { | 62 function bindCheckbox(name, value) { |
| 88 var full_a11y_on = isAccessibilityComplete(global_a11y_mode); | 63 $(name).checked = value; |
| 89 $('toggle_global').textContent = (full_a11y_on ? 'on' : 'off'); | 64 $(name).addEventListener('change', function() { |
| 90 $('toggle_global').setAttribute('aria-pressed', | 65 chrome.send('setGlobalFlag', [name, $(name).checked]); |
| 91 (full_a11y_on ? 'true' : 'false')); | 66 document.location.reload(); // FIXME see TODO above |
| 92 $('toggle_global').addEventListener('click', | 67 }); |
| 93 toggleGlobalAccessibility); | |
| 94 } | |
| 95 | |
| 96 function addInternalTreeToggle(global_internal_tree_mode) { | |
| 97 var on = global_internal_tree_mode; | |
| 98 $('toggle_internal').textContent = (on ? 'on' : 'off'); | |
| 99 $('toggle_internal').setAttribute('aria-pressed', | |
| 100 (on ? 'true' : 'false')); | |
| 101 $('toggle_internal').addEventListener('click', | |
| 102 toggleInternalTree); | |
| 103 } | 68 } |
| 104 | 69 |
| 105 function addToPagesList(data) { | 70 function addToPagesList(data) { |
| 106 // TODO: iterate through data and pages rows instead | 71 // TODO: iterate through data and pages rows instead |
| 107 var id = data['processId'] + '.' + data['routeId']; | 72 var id = data['processId'] + '.' + data['routeId']; |
| 108 var row = document.createElement('div'); | 73 var row = document.createElement('div'); |
| 109 row.className = 'row'; | 74 row.className = 'row'; |
| 110 row.id = id; | 75 row.id = id; |
| 111 formatRow(row, data); | 76 formatRow(row, data); |
| 112 | 77 |
| 113 row.processId = data.processId; | 78 row.processId = data.processId; |
| 114 row.routeId = data.routeId; | 79 row.routeId = data.routeId; |
| 115 | 80 |
| 116 var list = $('pages'); | 81 var list = $('pages'); |
| 117 list.appendChild(row); | 82 list.appendChild(row); |
| 118 } | 83 } |
| 119 | 84 |
| 120 function formatRow(row, data) { | 85 function formatRow(row, data) { |
| 121 if (!('url' in data)) { | 86 if (!('url' in data)) { |
| 122 if ('error' in data) { | 87 if ('error' in data) { |
| 123 row.appendChild(createErrorMessageElement(data, row)); | 88 row.appendChild(createErrorMessageElement(data, row)); |
| 124 return; | 89 return; |
| 125 } | 90 } |
| 126 } | 91 } |
| 127 var properties = ['favicon_url', 'name', 'url']; | 92 var properties = ['favicon_url', 'name', 'url']; |
| 128 for (var j = 0; j < properties.length; j++) | 93 for (var j = 0; j < properties.length; j++) |
| 129 row.appendChild(formatValue(data, properties[j])); | 94 row.appendChild(formatValue(data, properties[j])); |
| 130 | 95 |
| 131 row.appendChild(createToggleAccessibilityElement(data)); | 96 row.appendChild(createToggleAccessibilityElement(data)); |
| 132 if (isAccessibilityComplete(data['a11y_mode'])) { | 97 if (data['a11y_mode']) { |
| 133 row.appendChild(document.createTextNode(' | ')); | 98 row.appendChild(document.createTextNode(' | ')); |
| 134 if ('tree' in data) { | 99 if ('tree' in data) { |
| 135 row.appendChild(createShowAccessibilityTreeElement(data, row, true)); | 100 row.appendChild(createShowAccessibilityTreeElement(data, row, true)); |
| 136 row.appendChild(document.createTextNode(' | ')); | 101 row.appendChild(document.createTextNode(' | ')); |
| 137 row.appendChild(createHideAccessibilityTreeElement(row.id)); | 102 row.appendChild(createHideAccessibilityTreeElement(row.id)); |
| 138 row.appendChild(createAccessibilityTreeElement(data)); | 103 row.appendChild(createAccessibilityTreeElement(data)); |
| 139 } | 104 } |
| 140 else { | 105 else { |
| 141 row.appendChild(createShowAccessibilityTreeElement(data, row, false)); | 106 row.appendChild(createShowAccessibilityTreeElement(data, row, false)); |
| 142 if ('error' in data) | 107 if ('error' in data) |
| (...skipping 19 matching lines...) Expand all Loading... |
| 162 | 127 |
| 163 var span = document.createElement('span'); | 128 var span = document.createElement('span'); |
| 164 span.textContent = ' ' + text + ' '; | 129 span.textContent = ' ' + text + ' '; |
| 165 span.className = property; | 130 span.className = property; |
| 166 return span; | 131 return span; |
| 167 } | 132 } |
| 168 | 133 |
| 169 function createToggleAccessibilityElement(data) { | 134 function createToggleAccessibilityElement(data) { |
| 170 var link = document.createElement('a', 'action-link'); | 135 var link = document.createElement('a', 'action-link'); |
| 171 link.setAttribute('role', 'button'); | 136 link.setAttribute('role', 'button'); |
| 172 var full_a11y_on = isAccessibilityComplete(data['a11y_mode']); | 137 var full_a11y_on = data['a11y_mode']; |
| 173 link.textContent = 'accessibility ' + (full_a11y_on ? 'on' : 'off'); | 138 link.textContent = 'accessibility ' + (full_a11y_on ? 'on' : 'off'); |
| 174 link.setAttribute('aria-pressed', (full_a11y_on ? 'true' : 'false')); | 139 link.setAttribute('aria-pressed', (full_a11y_on ? 'true' : 'false')); |
| 175 link.addEventListener('click', | 140 link.addEventListener('click', |
| 176 toggleAccessibility.bind(this, data, link)); | 141 toggleAccessibility.bind(this, data, link)); |
| 177 return link; | 142 return link; |
| 178 } | 143 } |
| 179 | 144 |
| 180 function createShowAccessibilityTreeElement(data, row, opt_refresh) { | 145 function createShowAccessibilityTreeElement(data, row, opt_refresh) { |
| 181 var link = document.createElement('a', 'action-link'); | 146 var link = document.createElement('a', 'action-link'); |
| 182 link.setAttribute('role', 'button'); | 147 link.setAttribute('role', 'button'); |
| (...skipping 58 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 241 return treeElement; | 206 return treeElement; |
| 242 } | 207 } |
| 243 | 208 |
| 244 return { | 209 return { |
| 245 initialize: initialize, | 210 initialize: initialize, |
| 246 showTree: showTree | 211 showTree: showTree |
| 247 }; | 212 }; |
| 248 }); | 213 }); |
| 249 | 214 |
| 250 document.addEventListener('DOMContentLoaded', accessibility.initialize); | 215 document.addEventListener('DOMContentLoaded', accessibility.initialize); |
| OLD | NEW |