Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(596)

Side by Side Diff: content/browser/resources/accessibility/accessibility.js

Issue 2552203005: Enable toggling of new accessibility modes in chrome://accessibility (Closed)
Patch Set: Created 4 years ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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
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);
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698