Remove CallJavascriptFunctionUnsafe calls from chrome://device-emulator, part2.

Replacing calls to the global device_emulator namespace with
FireWebUIListener() and ResolveJavascriptCallback().

This is in preparation of migrating this page to Polymer3.

Bug: 1015241
Change-Id: Ic77512ee3972bbe8957a293b7c1cb8082f40b9ea
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1874586
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#708443}

chrome/browser/resources/chromeos/emulator/BUILD.gn

@@ -15,6 +15,9 @@ js_type_check("closure_compile") {
 }
 
 js_library("audio_settings") {
+  deps = [
+    "//ui/webui/resources/js:cr",
+  ]
   externs_list = [ "$externs_path/chrome_send.js" ]
 }
 
@@ -26,16 +29,19 @@ js_library("bluetooth_settings") {
 }
 
 js_library("battery_settings") {
+  deps = [
+    "//ui/webui/resources/js:web_ui_listener_behavior",
+  ]
   externs_list = [ "$externs_path/chrome_send.js" ]
 }
 
 js_library("input_device_settings") {
+  deps = [
+    "//ui/webui/resources/js:web_ui_listener_behavior",
+  ]
   externs_list = [ "$externs_path/chrome_send.js" ]
 }
 
 js_library("device_emulator_pages") {
-  deps = [
-    "//ui/webui/resources/js:cr",
-  ]
   externs_list = [ "$externs_path/chrome_send.js" ]
 }

chrome/browser/resources/chromeos/emulator/audio_settings.html

@@ -8,6 +8,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_radio_group/cr_radio_group.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
+<link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="icons.html">
 <link rel="import" href="shared_styles.html">

chrome/browser/resources/chromeos/emulator/audio_settings.js

@@ -122,7 +122,8 @@ Polymer({
   },
 
   ready: function() {
-    chrome.send('requestAudioNodes');
+    cr.sendWithPromise('requestAudioNodes').then(
+        this.updateAudioNodes_.bind(this));
   },
 
   /**
@@ -201,8 +202,9 @@ Polymer({
   /**
    * Called by the WebUI which provides a list of nodes.
    * @param {!Array<!AudioNode>} nodeList A list of audio nodes.
+   * @private
    */
-  updateAudioNodes: function(nodeList) {
+  updateAudioNodes_: function(nodeList) {
     /** @type {!Array<!AudioNode>} */ var newNodeList = [];
     for (var i = 0; i < nodeList.length; ++i) {
       // Create a new audio node and add all the properties from |nodeList[i]|.

chrome/browser/resources/chromeos/emulator/battery_settings.html

@@ -8,6 +8,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_radio_group/cr_radio_group.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/cr_elements/md_select_css.html">
+<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="icons.html">

chrome/browser/resources/chromeos/emulator/battery_settings.js

@@ -5,6 +5,8 @@
 Polymer({
   is: 'battery-settings',
 
+  behaviors: [WebUIListenerBehavior],
+
   properties: {
     /** The system's battery percentage. */
     batteryPercent: Number,
@@ -127,6 +129,8 @@ Polymer({
   ],
 
   ready: function() {
+    this.addWebUIListener(
+        'power-properties-updated', this.onPowerPropertiesUpdated_.bind(this));
     chrome.send('requestPowerInfo');
   },
 
@@ -184,8 +188,9 @@ Polymer({
    *   battery_time_to_full_sec: number,
    *   external_power_source_id: string,
    * }} properties
+   * @private
    */
-  updatePowerProperties: function(properties) {
+  onPowerPropertiesUpdated_: function(properties) {
     this.batteryPercent = properties.battery_percent;
     this.batteryState = this.batteryStateOptions[properties.battery_state];
     this.timeUntilEmpty = properties.battery_time_to_empty_sec;

chrome/browser/resources/chromeos/emulator/device_emulator.html

@@ -4,7 +4,6 @@
   <title>Device Emulator</title>
   <link rel="import" href="chrome://resources/html/polymer.html">
 
-  <link rel="import" href="chrome://resources/html/cr.html">
   <link rel="import" href="chrome://resources/html/util.html">
   <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
   <link rel="import" href="device_emulator_pages.html">

chrome/browser/resources/chromeos/emulator/device_emulator_pages.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_drawer/cr_drawer.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">

chrome/browser/resources/chromeos/emulator/device_emulator_pages.js

@@ -2,12 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-cr.exportPath('device_emulator', {
-  audioSettings: null,
-  batterySettings: null,
-  bluetoothSettings: null,
-});
-
 Polymer({
   is: 'device-emulator-pages',
 
@@ -21,9 +15,6 @@ Polymer({
 
   /** @override */
   ready: function() {
-    for (const page of this.$$('iron-pages').children)
-      device_emulator[page.id] = page;
-
     chrome.send('initializeDeviceEmulator');
   },
 

chrome/browser/resources/chromeos/emulator/input_device_settings.html

@@ -2,6 +2,7 @@
 
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
+<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="icons.html">

chrome/browser/resources/chromeos/emulator/input_device_settings.js

@@ -5,6 +5,15 @@
 Polymer({
   is: 'input-device-settings',
 
+  behaviors: [WebUIListenerBehavior],
+
+  ready: function() {
+    this.addWebUIListener(
+        'touchpad-exists-changed', this.setTouchpadExists_.bind(this));
+    this.addWebUIListener(
+        'mouse-exists-changed', this.setMouseExists_.bind(this));
+  },
+
   /**
    * @param {!Event} e
    * Callback when the user toggles the touchpad.
@@ -26,16 +35,18 @@ Polymer({
   /**
    * Callback when the existence of a fake mouse changes.
    * @param {boolean} exists
+   * @private
    */
-  setMouseExists: function(exists) {
+  setMouseExists_: function(exists) {
     this.$.mouse.checked = exists;
   },
 
   /**
    * Callback when the existence of a fake touchpad changes.
    * @param {boolean} exists
+   * @private
    */
-  setTouchpadExists: function(exists) {
+  setTouchpadExists_: function(exists) {
     this.$.touchpad.checked = exists;
   },
 });

chrome/browser/ui/webui/chromeos/emulator/device_emulator_message_handler.cc

@@ -51,17 +51,6 @@ const char kUpdatePowerSourceId[] = "updatePowerSourceId";
 const char kSetHasTouchpad[] = "setHasTouchpad";
 const char kSetHasMouse[] = "setHasMouse";
 
-// Define callback functions that will update the JavaScript variable
-// and the web UI.
-const char kUpdateAudioNodes[] =
-    "device_emulator.audioSettings.updateAudioNodes";
-const char kUpdatePowerPropertiesJSCallback[] =
-    "device_emulator.batterySettings.updatePowerProperties";
-const char kTouchpadExistsCallback[] =
-    "device_emulator.inputDeviceSettings.setTouchpadExists";
-const char kMouseExistsCallback[] =
-    "device_emulator.inputDeviceSettings.setMouseExists";
-
 const char kPairedPropertyName[] = "Paired";
 
 // Wattages to use as max power for power sources.
@@ -178,8 +167,7 @@ void DeviceEmulatorMessageHandler::PowerObserver::PowerChanged(
   power_properties.SetString("external_power_source_id",
                              proto.external_power_source_id());
 
-  owner_->web_ui()->CallJavascriptFunctionUnsafe(
-      kUpdatePowerPropertiesJSCallback, power_properties);
+  owner_->FireWebUIListener("power-properties-updated", power_properties);
 }
 
 DeviceEmulatorMessageHandler::DeviceEmulatorMessageHandler()
@@ -290,6 +278,9 @@ void DeviceEmulatorMessageHandler::HandleRequestBluetoothPair(
 
 void DeviceEmulatorMessageHandler::HandleRequestAudioNodes(
     const base::ListValue* args) {
+  AllowJavascript();
+  const base::Value& callback_id = args->GetList()[0];
+
   // Get every active audio node and create a dictionary to
   // send it to JavaScript.
   base::ListValue audio_nodes;
@@ -307,7 +298,8 @@ void DeviceEmulatorMessageHandler::HandleRequestAudioNodes(
 
     audio_nodes.Append(std::move(audio_node));
   }
-  web_ui()->CallJavascriptFunctionUnsafe(kUpdateAudioNodes, audio_nodes);
+
+  ResolveJavascriptCallback(callback_id, audio_nodes);
 }
 
 void DeviceEmulatorMessageHandler::HandleInsertAudioNode(
@@ -650,15 +642,13 @@ void DeviceEmulatorMessageHandler::ConnectToBluetoothDevice(
 void DeviceEmulatorMessageHandler::TouchpadExists(bool exists) {
   if (!IsJavascriptAllowed())
     return;
-  web_ui()->CallJavascriptFunctionUnsafe(kTouchpadExistsCallback,
-                                         base::Value(exists));
+  FireWebUIListener("touchpad-exists-changed", base::Value(exists));
 }
 
 void DeviceEmulatorMessageHandler::MouseExists(bool exists) {
   if (!IsJavascriptAllowed())
     return;
-  web_ui()->CallJavascriptFunctionUnsafe(kMouseExistsCallback,
-                                         base::Value(exists));
+  FireWebUIListener("mouse-exists-changed", base::Value(exists));
 }
 
 }  // namespace chromeos