Skip to content

GitLab

T
tangled
Commit 87a869af authored by dpapad's avatar dpapad Committed by Commit Bot
Browse files
Options

Migrate chrome://accessibility to use JS modules. 

Also adding some minimal JS type checking.

Bug: None
Change-Id: I17a74b88666b5d8e17ab5ce65f0271392bb0ee00
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2444485
Auto-Submit: dpapad <dpapad@chromium.org>
Commit-Queue: dpapad <dpapad@chromium.org>
Reviewed-by: default avatarAbigail Klein <abigailbklein@google.com>
Reviewed-by: default avatarDominic Mazzoni <dmazzoni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#814603}
parent de6bbcbc
Show whitespace changes
Inline Side-by-side
Showing with 473 additions and 468 deletions
chrome/browser/accessibility/accessibility_ui.cc
View file @ 87a869af
...@@ -458,8 +458,7 @@ void AccessibilityUIMessageHandler::ToggleAccessibility( ...@@ -458,8 +458,7 @@ void AccessibilityUIMessageHandler::ToggleAccessibility(
// accessibility mode buttons are updated. // accessibility mode buttons are updated.
AllowJavascript(); AllowJavascript();
std::unique_ptr<base::DictionaryValue> new_mode(BuildTargetDescriptor(rvh)); std::unique_ptr<base::DictionaryValue> new_mode(BuildTargetDescriptor(rvh));
CallJavascriptFunction("accessibility.showOrRefreshTree", CallJavascriptFunction("showOrRefreshTree", *(new_mode.get()));
*(new_mode.get()));
} }
} }
...@@ -534,7 +533,6 @@ void AccessibilityUIMessageHandler::RequestWebContentsTree( ...@@ -534,7 +533,6 @@ void AccessibilityUIMessageHandler::RequestWebContentsTree(
CHECK(IsValidJSValue(request_type_p)); CHECK(IsValidJSValue(request_type_p));
std::string request_type = *request_type_p; std::string request_type = *request_type_p;
CHECK(request_type == kShowOrRefreshTree || request_type == kCopyTree); CHECK(request_type == kShowOrRefreshTree || request_type == kCopyTree);
request_type = "accessibility." + request_type;
const std::string* allow_p = data->FindStringPath("filters.allow"); const std::string* allow_p = data->FindStringPath("filters.allow");
CHECK(IsValidJSValue(allow_p)); CHECK(IsValidJSValue(allow_p));
...@@ -597,7 +595,6 @@ void AccessibilityUIMessageHandler::RequestNativeUITree( ...@@ -597,7 +595,6 @@ void AccessibilityUIMessageHandler::RequestNativeUITree(
CHECK(IsValidJSValue(request_type_p)); CHECK(IsValidJSValue(request_type_p));
std::string request_type = *request_type_p; std::string request_type = *request_type_p;
CHECK(request_type == kShowOrRefreshTree || request_type == kCopyTree); CHECK(request_type == kShowOrRefreshTree || request_type == kCopyTree);
request_type = "accessibility." + request_type;
const std::string* allow_p = data->FindStringPath("filters.allow"); const std::string* allow_p = data->FindStringPath("filters.allow");
CHECK(IsValidJSValue(allow_p)); CHECK(IsValidJSValue(allow_p));
...@@ -696,7 +693,7 @@ void AccessibilityUIMessageHandler::RequestAccessibilityEvents( ...@@ -696,7 +693,7 @@ void AccessibilityUIMessageHandler::RequestAccessibilityEvents(
result->SetString(kEventLogsField, event_logs_str); result->SetString(kEventLogsField, event_logs_str);
event_logs_.clear(); event_logs_.clear();
CallJavascriptFunction("accessibility.startOrStopEvents", *(result.get())); CallJavascriptFunction("startOrStopEvents", *(result.get()));
} }
} }
......
chrome/browser/resources/BUILD.gn
View file @ 87a869af
...@@ -16,6 +16,7 @@ assert(!is_ios, "Chromium/iOS shouldn't use anything in //chrome") ...@@ -16,6 +16,7 @@ assert(!is_ios, "Chromium/iOS shouldn't use anything in //chrome")
if (enable_js_type_check) { if (enable_js_type_check) {
group("closure_compile") { group("closure_compile") {
deps = [ deps = [
"accessibility:closure_compile",
"components:closure_compile", "components:closure_compile",
"engagement:closure_compile", "engagement:closure_compile",
"interventions_internals:closure_compile", "interventions_internals:closure_compile",
......
chrome/browser/resources/accessibility/BUILD.gn 0 → 100644
View file @ 87a869af
# Copyright 2020 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.
import("//third_party/closure_compiler/compile_js.gni")
js_type_check("closure_compile") {
uses_js_modules = true
deps = [ ":accessibility" ]
}
js_library("accessibility") {
deps = [ "//ui/webui/resources/js:util.m" ]
}
chrome/browser/resources/accessibility/accessibility.html
View file @ 87a869af
...@@ -10,10 +10,7 @@ found in the LICENSE file. ...@@ -10,10 +10,7 @@ found in the LICENSE file.
<title>Accessibility Internals</title> <title>Accessibility Internals</title>
<link rel="stylesheet" href="chrome://resources/css/chrome_shared.css"> <link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
<link rel="stylesheet" href="accessibility.css"> <link rel="stylesheet" href="accessibility.css">
<script src="chrome://resources/js/cr.js"></script> <script type="module" src="accessibility.js"></script>
<script src="chrome://resources/js/action_link.js"></script>
<script src="chrome://resources/js/util.js"></script>
<script src="accessibility.js"></script>
</head> </head>
<body> <body>
<h1>Accessibility Internals</h1> <h1>Accessibility Internals</h1>
......
chrome/browser/resources/accessibility/accessibility.js
View file @ 87a869af
...@@ -2,12 +2,13 @@ ...@@ -2,12 +2,13 @@
// Use of this source code is governed by a BSD-style license that can be // Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file. // found in the LICENSE file.
cr.define('accessibility', function() { import 'chrome://resources/js/action_link.js';
'use strict';
// Note: keep these values in sync with the values in import {$} from 'chrome://resources/js/util.m.js';
// ui/accessibility/ax_mode.h
const AXMode = { // Note: keep these values in sync with the values in
// ui/accessibility/ax_mode.h
const AXMode = {
kNativeAPIs: 1 << 0, kNativeAPIs: 1 << 0,
kWebContents: 1 << 1, kWebContents: 1 << 1,
kInlineTextBoxes: 1 << 2, kInlineTextBoxes: 1 << 2,
...@@ -22,12 +23,12 @@ cr.define('accessibility', function() { ...@@ -22,12 +23,12 @@ cr.define('accessibility', function() {
}, },
get kAXModeComplete() { get kAXModeComplete() {
return AXMode.kNativeAPIs | AXMode.kWebContents | return AXMode.kNativeAPIs | AXMode.kWebContents | AXMode.kInlineTextBoxes |
AXMode.kInlineTextBoxes | AXMode.kScreenReader | AXMode.kHTML; AXMode.kScreenReader | AXMode.kHTML;
} }
}; };
function requestData() { function requestData() {
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
xhr.open('GET', 'targets-data.json', false); xhr.open('GET', 'targets-data.json', false);
xhr.send(null); xhr.send(null);
...@@ -36,9 +37,9 @@ cr.define('accessibility', function() { ...@@ -36,9 +37,9 @@ cr.define('accessibility', function() {
return JSON.parse(xhr.responseText); return JSON.parse(xhr.responseText);
} }
return []; return [];
} }
function getIdFromData(data) { function getIdFromData(data) {
if (data.type == 'page') { if (data.type == 'page') {
return data.processId + '.' + data.routingId; return data.processId + '.' + data.routingId;
} else if (data.type == 'browser') { } else if (data.type == 'browser') {
...@@ -47,9 +48,9 @@ cr.define('accessibility', function() { ...@@ -47,9 +48,9 @@ cr.define('accessibility', function() {
console.error('Unknown data type.', data); console.error('Unknown data type.', data);
return ''; return '';
} }
} }
function toggleAccessibility(data, element, mode, globalStateName) { function toggleAccessibility(data, element, mode, globalStateName) {
if (!data[globalStateName]) { if (!data[globalStateName]) {
return; return;
} }
...@@ -64,9 +65,9 @@ cr.define('accessibility', function() { ...@@ -64,9 +65,9 @@ cr.define('accessibility', function() {
'modeId': mode, 'modeId': mode,
'shouldRequestTree': shouldRequestTree 'shouldRequestTree': shouldRequestTree
}]); }]);
} }
function requestTree(data, element) { function requestTree(data, element) {
const allow = $('filter-allow').value; const allow = $('filter-allow').value;
const allowEmpty = $('filter-allow-empty').value; const allowEmpty = $('filter-allow-empty').value;
const deny = $('filter-deny').value; const deny = $('filter-deny').value;
...@@ -86,8 +87,7 @@ cr.define('accessibility', function() { ...@@ -86,8 +87,7 @@ cr.define('accessibility', function() {
'requestNativeUITree', [{ 'requestNativeUITree', [{
'sessionId': data.sessionId, 'sessionId': data.sessionId,
'requestType': requestType, 'requestType': requestType,
'filters': 'filters': {'allow': allow, 'allowEmpty': allowEmpty, 'deny': deny}
{'allow': allow, 'allowEmpty': allowEmpty, 'deny': deny}
}]); }]);
}, delay); }, delay);
} else { } else {
...@@ -99,9 +99,9 @@ cr.define('accessibility', function() { ...@@ -99,9 +99,9 @@ cr.define('accessibility', function() {
'filters': {'allow': allow, 'allowEmpty': allowEmpty, 'deny': deny} 'filters': {'allow': allow, 'allowEmpty': allowEmpty, 'deny': deny}
}]); }]);
} }
} }
function requestEvents(data, element) { function requestEvents(data, element) {
const start = element.textContent == 'Start recording'; const start = element.textContent == 'Start recording';
if (start) { if (start) {
element.textContent = 'Stop recording'; element.textContent = 'Stop recording';
...@@ -130,9 +130,9 @@ cr.define('accessibility', function() { ...@@ -130,9 +130,9 @@ cr.define('accessibility', function() {
chrome.send('requestAccessibilityEvents', [ chrome.send('requestAccessibilityEvents', [
{'processId': data.processId, 'routingId': data.routingId, 'start': start} {'processId': data.processId, 'routingId': data.routingId, 'start': start}
]); ]);
} }
function initialize() { function initialize() {
console.log('initialize'); console.log('initialize');
const data = requestData(); const data = requestData();
...@@ -164,9 +164,9 @@ cr.define('accessibility', function() { ...@@ -164,9 +164,9 @@ cr.define('accessibility', function() {
$('filter-allow').value = allow ? allow : '*'; $('filter-allow').value = allow ? allow : '*';
$('filter-allow-empty').value = allowEmpty ? allowEmpty : ''; $('filter-allow-empty').value = allowEmpty ? allowEmpty : '';
$('filter-deny').value = deny ? deny : ''; $('filter-deny').value = deny ? deny : '';
} }
function bindCheckbox(name, value) { function bindCheckbox(name, value) {
if (value == 'on') { if (value == 'on') {
$(name).checked = true; $(name).checked = true;
} }
...@@ -179,35 +179,35 @@ cr.define('accessibility', function() { ...@@ -179,35 +179,35 @@ cr.define('accessibility', function() {
'setGlobalFlag', [{'flagName': name, 'enabled': $(name).checked}]); 'setGlobalFlag', [{'flagName': name, 'enabled': $(name).checked}]);
document.location.reload(); document.location.reload();
}); });
} }
function addToPagesList(data) { function addToPagesList(data) {
// TODO: iterate through data and pages rows instead // TODO: iterate through data and pages rows instead
const id = getIdFromData(data); const id = getIdFromData(data);
const row = document.createElement('div'); const row = document.createElement('div');
row.className = 'row'; row.className = 'row';
row.id = id; row.id = id;
formatRow(row, data); formatRow(row, data, null);
row.processId = data.processId; row.processId = data.processId;
row.routingId = data.routingId; row.routingId = data.routingId;
const pages = $('pages'); const pages = $('pages');
pages.appendChild(row); pages.appendChild(row);
} }
function addToBrowsersList(data) { function addToBrowsersList(data) {
const id = getIdFromData(data); const id = getIdFromData(data);
const row = document.createElement('div'); const row = document.createElement('div');
row.className = 'row'; row.className = 'row';
row.id = id; row.id = id;
formatRow(row, data); formatRow(row, data, null);
const browsers = $('browsers'); const browsers = $('browsers');
browsers.appendChild(row); browsers.appendChild(row);
} }
function formatRow(row, data, requestType) { function formatRow(row, data, requestType) {
if (!('url' in data)) { if (!('url' in data)) {
if ('error' in data) { if ('error' in data) {
row.appendChild(createErrorMessageElement(data)); row.appendChild(createErrorMessageElement(data));
...@@ -263,17 +263,17 @@ cr.define('accessibility', function() { ...@@ -263,17 +263,17 @@ cr.define('accessibility', function() {
} else if ('error' in data) { } else if ('error' in data) {
row.appendChild(createErrorMessageElement(data)); row.appendChild(createErrorMessageElement(data));
} }
} }
function insertHeadingInline(parentElement, headingText, id) { function insertHeadingInline(parentElement, headingText, id) {
const h3 = document.createElement('h3'); const h3 = document.createElement('h3');
h3.textContent = headingText; h3.textContent = headingText;
h3.style.display = 'inline'; h3.style.display = 'inline';
h3.id = id + ':title'; h3.id = id + ':title';
parentElement.appendChild(h3); parentElement.appendChild(h3);
} }
function formatValue(data, property) { function formatValue(data, property) {
const value = data[property]; const value = data[property];
if (property == 'faviconUrl') { if (property == 'faviconUrl') {
...@@ -300,9 +300,9 @@ cr.define('accessibility', function() { ...@@ -300,9 +300,9 @@ cr.define('accessibility', function() {
} }
span.className = property; span.className = property;
return span; return span;
} }
function getNameForAccessibilityMode(mode) { function getNameForAccessibilityMode(mode) {
switch (mode) { switch (mode) {
case AXMode.kNativeAPIs: case AXMode.kNativeAPIs:
return 'Native'; return 'Native';
...@@ -320,9 +320,9 @@ cr.define('accessibility', function() { ...@@ -320,9 +320,9 @@ cr.define('accessibility', function() {
return 'PDF'; return 'PDF';
} }
return 'unknown'; return 'unknown';
} }
function createModeElement(mode, data, globalStateName) { function createModeElement(mode, data, globalStateName) {
const currentMode = data['a11yMode']; const currentMode = data['a11yMode'];
const link = document.createElement('a', 'action-link'); const link = document.createElement('a', 'action-link');
link.setAttribute('role', 'button'); link.setAttribute('role', 'button');
...@@ -340,9 +340,9 @@ cr.define('accessibility', function() { ...@@ -340,9 +340,9 @@ cr.define('accessibility', function() {
'click', 'click',
toggleAccessibility.bind(this, data, link, mode, globalStateName)); toggleAccessibility.bind(this, data, link, mode, globalStateName));
return link; return link;
} }
function createShowAccessibilityTreeElement( function createShowAccessibilityTreeElement(
data, id, requestType, opt_refresh) { data, id, requestType, opt_refresh) {
const show = document.createElement('button'); const show = document.createElement('button');
if (requestType == 'showOrRefreshTree') { if (requestType == 'showOrRefreshTree') {
...@@ -352,16 +352,16 @@ cr.define('accessibility', function() { ...@@ -352,16 +352,16 @@ cr.define('accessibility', function() {
show.textContent = 'Refresh accessibility tree'; show.textContent = 'Refresh accessibility tree';
}, 5000); }, 5000);
} else { } else {
show.textContent = opt_refresh ? 'Refresh accessibility tree' : show.textContent =
'Show accessibility tree'; opt_refresh ? 'Refresh accessibility tree' : 'Show accessibility tree';
} }
show.id = id + ':showOrRefreshTree'; show.id = id + ':showOrRefreshTree';
show.setAttribute('aria-expanded', String(opt_refresh)); show.setAttribute('aria-expanded', String(opt_refresh));
show.addEventListener('click', requestTree.bind(this, data, show)); show.addEventListener('click', requestTree.bind(this, data, show));
return show; return show;
} }
function createHideAccessibilityTreeElement(id) { function createHideAccessibilityTreeElement(id) {
const hide = document.createElement('button'); const hide = document.createElement('button');
hide.textContent = 'Hide accessibility tree'; hide.textContent = 'Hide accessibility tree';
hide.id = id + ':hideTree'; hide.id = id + ':hideTree';
...@@ -379,17 +379,17 @@ cr.define('accessibility', function() { ...@@ -379,17 +379,17 @@ cr.define('accessibility', function() {
} }
}); });
return hide; return hide;
} }
function createCopyAccessibilityTreeElement(data, id) { function createCopyAccessibilityTreeElement(data, id) {
const copy = document.createElement('button'); const copy = document.createElement('button');
copy.textContent = 'Copy accessibility tree'; copy.textContent = 'Copy accessibility tree';
copy.id = id + ':copyTree'; copy.id = id + ':copyTree';
copy.addEventListener('click', requestTree.bind(this, data, copy)); copy.addEventListener('click', requestTree.bind(this, data, copy));
return copy; return copy;
} }
function createStartStopAccessibilityEventRecordingElement(data, id) { function createStartStopAccessibilityEventRecordingElement(data, id) {
const show = document.createElement('button'); const show = document.createElement('button');
show.classList.add('recordEventsButton'); show.classList.add('recordEventsButton');
show.textContent = 'Start recording'; show.textContent = 'Start recording';
...@@ -397,9 +397,9 @@ cr.define('accessibility', function() { ...@@ -397,9 +397,9 @@ cr.define('accessibility', function() {
show.setAttribute('aria-expanded', 'false'); show.setAttribute('aria-expanded', 'false');
show.addEventListener('click', requestEvents.bind(this, data, show)); show.addEventListener('click', requestEvents.bind(this, data, show));
return show; return show;
} }
function createErrorMessageElement(data) { function createErrorMessageElement(data) {
const errorMessageElement = document.createElement('div'); const errorMessageElement = document.createElement('div');
const errorMessage = data.error; const errorMessage = data.error;
const nbsp = '\u00a0'; const nbsp = '\u00a0';
...@@ -416,10 +416,10 @@ cr.define('accessibility', function() { ...@@ -416,10 +416,10 @@ cr.define('accessibility', function() {
}); });
errorMessageElement.appendChild(closeLink); errorMessageElement.appendChild(closeLink);
return errorMessageElement; return errorMessageElement;
} }
// Called from C++ // Called from C++
function showOrRefreshTree(data) { function showOrRefreshTree(data) {
const id = getIdFromData(data); const id = getIdFromData(data);
const row = $(id); const row = $(id);
if (!row) { if (!row) {
...@@ -429,10 +429,10 @@ cr.define('accessibility', function() { ...@@ -429,10 +429,10 @@ cr.define('accessibility', function() {
row.textContent = ''; row.textContent = '';
formatRow(row, data, 'showOrRefreshTree'); formatRow(row, data, 'showOrRefreshTree');
$(id + ':showOrRefreshTree').focus(); $(id + ':showOrRefreshTree').focus();
} }
// Called from C++ // Called from C++
function startOrStopEvents(data) { function startOrStopEvents(data) {
const id = getIdFromData(data); const id = getIdFromData(data);
const row = $(id); const row = $(id);
if (!row) { if (!row) {
...@@ -440,12 +440,12 @@ cr.define('accessibility', function() { ...@@ -440,12 +440,12 @@ cr.define('accessibility', function() {
} }
row.textContent = ''; row.textContent = '';
formatRow(row, data); formatRow(row, data, null);
$(id + ':startOrStopEvents').focus(); $(id + ':startOrStopEvents').focus();
} }
// Called from C++ // Called from C++
function copyTree(data) { function copyTree(data) {
const id = getIdFromData(data); const id = getIdFromData(data);
const row = $(id); const row = $(id);
if (!row) { if (!row) {
...@@ -454,7 +454,7 @@ cr.define('accessibility', function() { ...@@ -454,7 +454,7 @@ cr.define('accessibility', function() {
const copy = $(id + ':copyTree'); const copy = $(id + ':copyTree');
if ('tree' in data) { if ('tree' in data) {
navigator.clipboard.writeText(data.tree) navigator.clipboard.writeText(data['tree'])
.then(() => { .then(() => {
copy.textContent = 'Copied to clipboard!'; copy.textContent = 'Copied to clipboard!';
setTimeout(() => { setTimeout(() => {
...@@ -474,19 +474,19 @@ cr.define('accessibility', function() { ...@@ -474,19 +474,19 @@ cr.define('accessibility', function() {
showOrRefreshTree(data); showOrRefreshTree(data);
$(id + ':copyTree').focus(); $(id + ':copyTree').focus();
} }
} }
function createNativeUITreeElement(browser) { function createNativeUITreeElement(browser) {
const id = 'browser.' + browser.id; const id = 'browser.' + browser.id;
const row = document.createElement('div'); const row = document.createElement('div');
row.className = 'row'; row.className = 'row';
row.id = id; row.id = id;
formatRow(row, browser); formatRow(row, browser, null);
return row; return row;
} }
// type is either 'tree' or 'eventLogs' // type is either 'tree' or 'eventLogs'
function createAccessibilityOutputElement(data, id, type) { function createAccessibilityOutputElement(data, id, type) {
let treeElement = $(id + ':' + type); let treeElement = $(id + ':' + type);
if (!treeElement) { if (!treeElement) {
treeElement = document.createElement('pre'); treeElement = document.createElement('pre');
...@@ -499,15 +499,11 @@ cr.define('accessibility', function() { ...@@ -499,15 +499,11 @@ cr.define('accessibility', function() {
treeElement.appendChild(lineElement); treeElement.appendChild(lineElement);
} }
return treeElement; return treeElement;
} }
// These are the functions we export so they can be called from C++. // These are the functions we export so they can be called from C++.
return { window.copyTree = copyTree;
copyTree: copyTree, window.showOrRefreshTree = showOrRefreshTree;
initialize: initialize, window.startOrStopEvents = startOrStopEvents;
showOrRefreshTree: showOrRefreshTree,
startOrStopEvents: startOrStopEvents
};
});
document.addEventListener('DOMContentLoaded', accessibility.initialize); document.addEventListener('DOMContentLoaded', initialize);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment