Migrate CallJavascriptFunction to FireWebUIListener in chrome://accessibility.

Calling JS functions by name from C++ is an obsolete pattern. Use
FireWebUIListener/addWebUIListener which is the suggested approach.

Also extracting all chrome.send() calls to a local BrowserProxy class
which makes the code more readable and is consistent with the
BrowserProxy pattern used in other WebUIs.

Bug: None
Change-Id: I911b114b6687e7b0108296a38636811bc066dd12
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2450722
Commit-Queue: dpapad <dpapad@chromium.org>
Reviewed-by: Dominic Mazzoni <dmazzoni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#814634}

chrome/browser/accessibility/accessibility_ui.cc

@@ -458,7 +458,7 @@ void AccessibilityUIMessageHandler::ToggleAccessibility(
     // accessibility mode buttons are updated.
     AllowJavascript();
     std::unique_ptr<base::DictionaryValue> new_mode(BuildTargetDescriptor(rvh));
-    CallJavascriptFunction("showOrRefreshTree", *(new_mode.get()));
+    FireWebUIListener("showOrRefreshTree", *(new_mode.get()));
   }
 }
 
@@ -552,7 +552,7 @@ void AccessibilityUIMessageHandler::RequestWebContentsTree(
     result->SetInteger(kProcessIdField, process_id);
     result->SetInteger(kRoutingIdField, routing_id);
     result->SetString(kErrorField, "Renderer no longer exists.");
-    CallJavascriptFunction(request_type, *(result.get()));
+    FireWebUIListener(request_type, *(result.get()));
     return;
   }
 
@@ -582,7 +582,7 @@ void AccessibilityUIMessageHandler::RequestWebContentsTree(
   std::string accessibility_contents =
       web_contents->DumpAccessibilityTree(internal, property_filters);
   result->SetString(kTreeField, accessibility_contents);
-  CallJavascriptFunction(request_type, *(result.get()));
+  FireWebUIListener(request_type, *(result.get()));
 }
 
 void AccessibilityUIMessageHandler::RequestNativeUITree(
@@ -630,7 +630,7 @@ void AccessibilityUIMessageHandler::RequestNativeUITree(
       result->SetKey(kTreeField,
                      base::Value(RecursiveDumpAXPlatformNodeAsString(
                          node, 0, property_filters)));
-      CallJavascriptFunction(request_type, *(result.get()));
+      FireWebUIListener(request_type, *(result.get()));
       return;
     }
   }
@@ -640,7 +640,7 @@ void AccessibilityUIMessageHandler::RequestNativeUITree(
   result->SetInteger(kSessionIdField, session_id);
   result->SetString(kTypeField, kBrowser);
   result->SetString(kErrorField, "Browser no longer exists.");
-  CallJavascriptFunction(request_type, *(result.get()));
+  FireWebUIListener(request_type, *(result.get()));
 }
 
 void AccessibilityUIMessageHandler::Callback(const std::string& str) {
@@ -693,7 +693,7 @@ void AccessibilityUIMessageHandler::RequestAccessibilityEvents(
     result->SetString(kEventLogsField, event_logs_str);
     event_logs_.clear();
 
-    CallJavascriptFunction("startOrStopEvents", *(result.get()));
+    FireWebUIListener("startOrStopEvents", *(result.get()));
   }
 }
 

chrome/browser/resources/accessibility/BUILD.gn

@@ -10,5 +10,8 @@ js_type_check("closure_compile") {
 }
 
 js_library("accessibility") {
-  deps = [ "//ui/webui/resources/js:util.m" ]
+  deps = [
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js:util.m",
+  ]
 }

chrome/browser/resources/accessibility/accessibility.js

@@ -4,8 +4,45 @@
 
 import 'chrome://resources/js/action_link.js';
 
+import {addWebUIListener} from 'chrome://resources/js/cr.m.js';
 import {$} from 'chrome://resources/js/util.m.js';
 
+class BrowserProxy {
+  toggleAccessibility(processId, routingId, modeId, shouldRequestTree) {
+    chrome.send('toggleAccessibility', [{
+                  processId,
+                  routingId,
+                  modeId,
+                  shouldRequestTree,
+                }]);
+  }
+
+  requestNativeUITree(sessionId, requestType, allow, allowEmpty, deny) {
+    chrome.send('requestNativeUITree', [{
+                  sessionId,
+                  requestType,
+                  filters: {allow, allowEmpty, deny},
+                }]);
+  }
+
+  requestWebContentsTree(
+      processId, routingId, requestType, allow, allowEmpty, deny) {
+    chrome.send('requestWebContentsTree', [
+      {processId, routingId, requestType, filters: {allow, allowEmpty, deny}}
+    ]);
+  }
+
+  requestAccessibilityEvents(processId, routingId, start) {
+    chrome.send('requestAccessibilityEvents', [{processId, routingId, start}]);
+  }
+
+  setGlobalFlag(flagName, enabled) {
+    chrome.send('setGlobalFlag', [{flagName, enabled}]);
+  }
+}
+
+const browserProxy = new BrowserProxy();
+
 // Note: keep these values in sync with the values in
 // ui/accessibility/ax_mode.h
 const AXMode = {
@@ -59,12 +96,8 @@ function toggleAccessibility(data, element, mode, globalStateName) {
   const tree = $(id + ':tree');
   // If the tree is visible, request a new tree with the updated mode.
   const shouldRequestTree = !!tree && tree.style.display != 'none';
-  chrome.send('toggleAccessibility', [{
-                'processId': data.processId,
-                'routingId': data.routingId,
-                'modeId': mode,
-                'shouldRequestTree': shouldRequestTree
-              }]);
+  browserProxy.toggleAccessibility(
+      data.processId, data.routingId, mode, shouldRequestTree);
 }
 
 function requestTree(data, element) {
@@ -83,21 +116,12 @@ function requestTree(data, element) {
   if (data.type == 'browser') {
     const delay = $('native-ui-delay').value;
     setTimeout(() => {
-      chrome.send(
-          'requestNativeUITree', [{
-            'sessionId': data.sessionId,
-            'requestType': requestType,
-            'filters': {'allow': allow, 'allowEmpty': allowEmpty, 'deny': deny}
-          }]);
+      browserProxy.requestNativeUITree(
+          data.sessionId, requestType, allow, allowEmpty, deny);
     }, delay);
   } else {
-    chrome.send(
-        'requestWebContentsTree', [{
-          'processId': data.processId,
-          'routingId': data.routingId,
-          'requestType': requestType,
-          'filters': {'allow': allow, 'allowEmpty': allowEmpty, 'deny': deny}
-        }]);
+    browserProxy.requestWebContentsTree(
+        data.processId, data.routingId, requestType, allow, allowEmpty, deny);
   }
 }
 
@@ -127,9 +151,8 @@ function requestEvents(data, element) {
       }
     }
   }
-  chrome.send('requestAccessibilityEvents', [
-    {'processId': data.processId, 'routingId': data.routingId, 'start': start}
-  ]);
+  browserProxy.requestAccessibilityEvents(
+      data.processId, data.routingId, start);
 }
 
 function initialize() {
@@ -164,6 +187,10 @@ function initialize() {
   $('filter-allow').value = allow ? allow : '*';
   $('filter-allow-empty').value = allowEmpty ? allowEmpty : '';
   $('filter-deny').value = deny ? deny : '';
+
+  addWebUIListener('copyTree', copyTree);
+  addWebUIListener('showOrRefreshTree', showOrRefreshTree);
+  addWebUIListener('startOrStopEvents', startOrStopEvents);
 }
 
 function bindCheckbox(name, value) {
@@ -175,8 +202,7 @@ function bindCheckbox(name, value) {
     $(name).labels[0].classList.add('disabled');
   }
   $(name).addEventListener('change', function() {
-    chrome.send(
-        'setGlobalFlag', [{'flagName': name, 'enabled': $(name).checked}]);
+    browserProxy.setGlobalFlag(name, $(name).checked);
     document.location.reload();
   });
 }
@@ -418,7 +444,7 @@ function createErrorMessageElement(data) {
   return errorMessageElement;
 }
 
-// Called from C++
+// WebUI listener handler for the 'showOrRefreshTree' event.
 function showOrRefreshTree(data) {
   const id = getIdFromData(data);
   const row = $(id);
@@ -431,7 +457,7 @@ function showOrRefreshTree(data) {
   $(id + ':showOrRefreshTree').focus();
 }
 
-// Called from C++
+// WebUI listener handler for the 'startOrStopEvents' event.
 function startOrStopEvents(data) {
   const id = getIdFromData(data);
   const row = $(id);
@@ -444,7 +470,7 @@ function startOrStopEvents(data) {
   $(id + ':startOrStopEvents').focus();
 }
 
-// Called from C++
+// WebUI listener handler for the 'copyTree' event.
 function copyTree(data) {
   const id = getIdFromData(data);
   const row = $(id);
@@ -501,9 +527,4 @@ function createAccessibilityOutputElement(data, id, type) {
   return treeElement;
 }
 
-// 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', initialize);