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(
// accessibility mode buttons are updated.
AllowJavascript();
std::unique_ptr<base::DictionaryValue> new_mode(BuildTargetDescriptor(rvh));
CallJavascriptFunction("accessibility.showOrRefreshTree",
*(new_mode.get()));
CallJavascriptFunction("showOrRefreshTree", *(new_mode.get()));
}
}
......@@ -534,7 +533,6 @@ void AccessibilityUIMessageHandler::RequestWebContentsTree(
CHECK(IsValidJSValue(request_type_p));
std::string request_type = *request_type_p;
CHECK(request_type == kShowOrRefreshTree || request_type == kCopyTree);
request_type = "accessibility." + request_type;
const std::string* allow_p = data->FindStringPath("filters.allow");
CHECK(IsValidJSValue(allow_p));
......@@ -597,7 +595,6 @@ void AccessibilityUIMessageHandler::RequestNativeUITree(
CHECK(IsValidJSValue(request_type_p));
std::string request_type = *request_type_p;
CHECK(request_type == kShowOrRefreshTree || request_type == kCopyTree);
request_type = "accessibility." + request_type;
const std::string* allow_p = data->FindStringPath("filters.allow");
CHECK(IsValidJSValue(allow_p));
......@@ -696,7 +693,7 @@ void AccessibilityUIMessageHandler::RequestAccessibilityEvents(
result->SetString(kEventLogsField, event_logs_str);
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")
if (enable_js_type_check) {
group("closure_compile") {
deps = [
"accessibility:closure_compile",
"components:closure_compile",
"engagement: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.
<title>Accessibility Internals</title>
<link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
<link rel="stylesheet" href="accessibility.css">
<script src="chrome://resources/js/cr.js"></script>
<script src="chrome://resources/js/action_link.js"></script>
<script src="chrome://resources/js/util.js"></script>
<script src="accessibility.js"></script>
<script type="module" src="accessibility.js"></script>
</head>
<body>
<h1>Accessibility Internals</h1>
......
chrome/browser/resources/accessibility/accessibility.js
View file @ 87a869af
......@@ -2,12 +2,13 @@
// 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';
import 'chrome://resources/js/action_link.js';
// Note: keep these values in sync with the values in
// ui/accessibility/ax_mode.h
const AXMode = {
import {$} from 'chrome://resources/js/util.m.js';
// Note: keep these values in sync with the values in
// ui/accessibility/ax_mode.h
const AXMode = {
kNativeAPIs: 1 << 0,
kWebContents: 1 << 1,
kInlineTextBoxes: 1 << 2,
......@@ -22,12 +23,12 @@ cr.define('accessibility', function() {
},
get kAXModeComplete() {
return AXMode.kNativeAPIs | AXMode.kWebContents |
AXMode.kInlineTextBoxes | AXMode.kScreenReader | AXMode.kHTML;
return AXMode.kNativeAPIs | AXMode.kWebContents | AXMode.kInlineTextBoxes |
AXMode.kScreenReader | AXMode.kHTML;
}
};
};
function requestData() {
function requestData() {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'targets-data.json', false);
xhr.send(null);
......@@ -36,9 +37,9 @@ cr.define('accessibility', function() {
return JSON.parse(xhr.responseText);
}
return [];
}
}
function getIdFromData(data) {
function getIdFromData(data) {
if (data.type == 'page') {
return data.processId + '.' + data.routingId;
} else if (data.type == 'browser') {
......@@ -47,9 +48,9 @@ cr.define('accessibility', function() {
console.error('Unknown data type.', data);
return '';
}
}
}
function toggleAccessibility(data, element, mode, globalStateName) {
function toggleAccessibility(data, element, mode, globalStateName) {
if (!data[globalStateName]) {
return;
}
......@@ -64,9 +65,9 @@ cr.define('accessibility', function() {
'modeId': mode,
'shouldRequestTree': shouldRequestTree
}]);
}
}
function requestTree(data, element) {
function requestTree(data, element) {
const allow = $('filter-allow').value;
const allowEmpty = $('filter-allow-empty').value;
const deny = $('filter-deny').value;
......@@ -86,8 +87,7 @@ cr.define('accessibility', function() {
'requestNativeUITree', [{
'sessionId': data.sessionId,
'requestType': requestType,
'filters':
{'allow': allow, 'allowEmpty': allowEmpty, 'deny': deny}
'filters': {'allow': allow, 'allowEmpty': allowEmpty, 'deny': deny}
}]);
}, delay);
} else {
......@@ -99,9 +99,9 @@ cr.define('accessibility', function() {
'filters': {'allow': allow, 'allowEmpty': allowEmpty, 'deny': deny}
}]);
}
}
}
function requestEvents(data, element) {
function requestEvents(data, element) {
const start = element.textContent == 'Start recording';
if (start) {
element.textContent = 'Stop recording';
......@@ -130,9 +130,9 @@ cr.define('accessibility', function() {
chrome.send('requestAccessibilityEvents', [
{'processId': data.processId, 'routingId': data.routingId, 'start': start}
]);
}
}
function initialize() {
function initialize() {
console.log('initialize');
const data = requestData();
......@@ -164,9 +164,9 @@ cr.define('accessibility', function() {
$('filter-allow').value = allow ? allow : '*';
$('filter-allow-empty').value = allowEmpty ? allowEmpty : '';
$('filter-deny').value = deny ? deny : '';
}
}
function bindCheckbox(name, value) {
function bindCheckbox(name, value) {
if (value == 'on') {
$(name).checked = true;
}
......@@ -179,35 +179,35 @@ cr.define('accessibility', function() {
'setGlobalFlag', [{'flagName': name, 'enabled': $(name).checked}]);
document.location.reload();
});
}
}
function addToPagesList(data) {
function addToPagesList(data) {
// TODO: iterate through data and pages rows instead
const id = getIdFromData(data);
const row = document.createElement('div');
row.className = 'row';
row.id = id;
formatRow(row, data);
formatRow(row, data, null);
row.processId = data.processId;
row.routingId = data.routingId;
const pages = $('pages');
pages.appendChild(row);
}
}
function addToBrowsersList(data) {
function addToBrowsersList(data) {
const id = getIdFromData(data);
const row = document.createElement('div');
row.className = 'row';
row.id = id;
formatRow(row, data);
formatRow(row, data, null);
const browsers = $('browsers');
browsers.appendChild(row);
}
}
function formatRow(row, data, requestType) {
function formatRow(row, data, requestType) {
if (!('url' in data)) {
if ('error' in data) {
row.appendChild(createErrorMessageElement(data));
......@@ -263,17 +263,17 @@ cr.define('accessibility', function() {
} else if ('error' in data) {
row.appendChild(createErrorMessageElement(data));
}
}
}
function insertHeadingInline(parentElement, headingText, id) {
function insertHeadingInline(parentElement, headingText, id) {
const h3 = document.createElement('h3');
h3.textContent = headingText;
h3.style.display = 'inline';
h3.id = id + ':title';
parentElement.appendChild(h3);
}
}
function formatValue(data, property) {
function formatValue(data, property) {
const value = data[property];
if (property == 'faviconUrl') {
......@@ -300,9 +300,9 @@ cr.define('accessibility', function() {
}
span.className = property;
return span;
}
}
function getNameForAccessibilityMode(mode) {
function getNameForAccessibilityMode(mode) {
switch (mode) {
case AXMode.kNativeAPIs:
return 'Native';
......@@ -320,9 +320,9 @@ cr.define('accessibility', function() {
return 'PDF';
}
return 'unknown';
}
}
function createModeElement(mode, data, globalStateName) {
function createModeElement(mode, data, globalStateName) {
const currentMode = data['a11yMode'];
const link = document.createElement('a', 'action-link');
link.setAttribute('role', 'button');
......@@ -340,9 +340,9 @@ cr.define('accessibility', function() {
'click',
toggleAccessibility.bind(this, data, link, mode, globalStateName));
return link;
}
}
function createShowAccessibilityTreeElement(
function createShowAccessibilityTreeElement(
data, id, requestType, opt_refresh) {
const show = document.createElement('button');
if (requestType == 'showOrRefreshTree') {
......@@ -352,16 +352,16 @@ cr.define('accessibility', function() {
show.textContent = 'Refresh accessibility tree';
}, 5000);
} else {
show.textContent = opt_refresh ? 'Refresh accessibility tree' :
'Show accessibility tree';
show.textContent =
opt_refresh ? 'Refresh accessibility tree' : 'Show accessibility tree';
}
show.id = id + ':showOrRefreshTree';
show.setAttribute('aria-expanded', String(opt_refresh));
show.addEventListener('click', requestTree.bind(this, data, show));
return show;
}
}
function createHideAccessibilityTreeElement(id) {
function createHideAccessibilityTreeElement(id) {
const hide = document.createElement('button');
hide.textContent = 'Hide accessibility tree';
hide.id = id + ':hideTree';
......@@ -379,17 +379,17 @@ cr.define('accessibility', function() {
}
});
return hide;
}
}
function createCopyAccessibilityTreeElement(data, id) {
function createCopyAccessibilityTreeElement(data, id) {
const copy = document.createElement('button');
copy.textContent = 'Copy accessibility tree';
copy.id = id + ':copyTree';
copy.addEventListener('click', requestTree.bind(this, data, copy));
return copy;
}
}
function createStartStopAccessibilityEventRecordingElement(data, id) {
function createStartStopAccessibilityEventRecordingElement(data, id) {
const show = document.createElement('button');
show.classList.add('recordEventsButton');
show.textContent = 'Start recording';
......@@ -397,9 +397,9 @@ cr.define('accessibility', function() {
show.setAttribute('aria-expanded', 'false');
show.addEventListener('click', requestEvents.bind(this, data, show));
return show;
}
}
function createErrorMessageElement(data) {
function createErrorMessageElement(data) {
const errorMessageElement = document.createElement('div');
const errorMessage = data.error;
const nbsp = '\u00a0';
......@@ -416,10 +416,10 @@ cr.define('accessibility', function() {
});
errorMessageElement.appendChild(closeLink);
return errorMessageElement;
}
}
// Called from C++
function showOrRefreshTree(data) {
// Called from C++
function showOrRefreshTree(data) {
const id = getIdFromData(data);
const row = $(id);
if (!row) {
......@@ -429,10 +429,10 @@ cr.define('accessibility', function() {
row.textContent = '';
formatRow(row, data, 'showOrRefreshTree');
$(id + ':showOrRefreshTree').focus();
}
}
// Called from C++
function startOrStopEvents(data) {
// Called from C++
function startOrStopEvents(data) {
const id = getIdFromData(data);
const row = $(id);
if (!row) {
......@@ -440,12 +440,12 @@ cr.define('accessibility', function() {
}
row.textContent = '';
formatRow(row, data);
formatRow(row, data, null);
$(id + ':startOrStopEvents').focus();
}
}
// Called from C++
function copyTree(data) {
// Called from C++
function copyTree(data) {
const id = getIdFromData(data);
const row = $(id);
if (!row) {
......@@ -454,7 +454,7 @@ cr.define('accessibility', function() {
const copy = $(id + ':copyTree');
if ('tree' in data) {
navigator.clipboard.writeText(data.tree)
navigator.clipboard.writeText(data['tree'])
.then(() => {
copy.textContent = 'Copied to clipboard!';
setTimeout(() => {
......@@ -474,19 +474,19 @@ cr.define('accessibility', function() {
showOrRefreshTree(data);
$(id + ':copyTree').focus();
}
}
}
function createNativeUITreeElement(browser) {
function createNativeUITreeElement(browser) {
const id = 'browser.' + browser.id;
const row = document.createElement('div');
row.className = 'row';
row.id = id;
formatRow(row, browser);
formatRow(row, browser, null);
return row;
}
}
// type is either 'tree' or 'eventLogs'
function createAccessibilityOutputElement(data, id, type) {
// type is either 'tree' or 'eventLogs'
function createAccessibilityOutputElement(data, id, type) {
let treeElement = $(id + ':' + type);
if (!treeElement) {
treeElement = document.createElement('pre');
......@@ -499,15 +499,11 @@ cr.define('accessibility', function() {
treeElement.appendChild(lineElement);
}
return treeElement;
}
}
// These are the functions we export so they can be called from C++.
return {
copyTree: copyTree,
initialize: initialize,
showOrRefreshTree: showOrRefreshTree,
startOrStopEvents: startOrStopEvents
};
});
// These are the functions we export so they can be called from C++.
window.copyTree = copyTree;
window.showOrRefreshTree = showOrRefreshTree;
window.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