Create chrome://device-emulator and add the ability to get a battery percentage and send an updated…

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

Index: chrome/browser/resources/chromeos/emulator/device_emulator.js
diff --git a/chrome/browser/resources/chromeos/emulator/device_emulator.js b/chrome/browser/resources/chromeos/emulator/device_emulator.js
new file mode 100644
index 0000000000000000000000000000000000000000..cc70395a5d93afb59b744a48bd30bc1aa8f19afc
--- /dev/null
+++ b/chrome/browser/resources/chromeos/emulator/device_emulator.js
@@ -0,0 +1,55 @@
+cr.define('device_emulator', function() {
+  'use strict';
+
+  function returnBatteryInfo(percent) {

[michaelpg, 2015/06/24 23:33:48]

setBatteryInfo makes more sense I think

[michaelpg, 2015/06/24 23:33:48]

Annotate for Closure (we don't closure-compile yet, but we plan to):

https://developers.google.com/closure/compiler/docs/js-for-compiler

e.g.
/**
 * Updates the UI with the battery status.
 * @param {number} percent Battery percentage (out of 100).
 */

[rfrappier, 2015/06/25 17:09:21]

Done.

[rfrappier, 2015/06/25 17:09:21]

Done.

+    var slider = $('batteryPercentSlider');
+    var text = $('batteryPercentText');
+
+    slider.value = percent;
+    text.value = percent.toString();
+  }
+
+  function onBatterySliderChange() {
+    var slider = $('batteryPercentSlider');
+    var text = $('batteryPercentText');
+
+    text.value = slider.value;
+
+    chrome.send('updateBatteryInfo', [parseInt(slider.value)]);

[michaelpg, 2015/06/24 23:33:48]

[slider.valueAsNumber]

[rfrappier, 2015/06/25 17:09:21]

Done.

+  }
+
+  function onBatteryTextChange() {
+    var slider = $('batteryPercentSlider');
+    var text = $('batteryPercentText');
+    var percent = (text.value !== '') ? parseInt(text.value) : 0;

[michaelpg, 2015/06/24 23:33:48]

parseInt will return NaN if given something unparseable:

var percent = parseInt(text.value) || 0;

Or, because |text| is <input type="number"> and the default step is 1:

var percent = text.valueAsNumber;
if (isNaN(percent)) {
  percent = 0;
  text.valueAsNumber = 0;
}

Or something like that.

[rfrappier, 2015/06/25 17:09:21]

Done.

+
+    if (isNaN(percent)) {
+      percent = 0;
+      text.value = '0';
+    }
+
+    slider.value = percent;
+
+    chrome.send('updateBatteryInfo', [percent]);
+  }
+
+  function initialize() {
+    chrome.send('requestBatteryInfo');
+
+    var slider = $('batteryPercentSlider');
+    var text = $('batteryPercentText');
+
+    slider.addEventListener('input', onBatterySliderChange);

[michaelpg, 2015/06/24 23:33:48]

I'd suggest listening to 'change' instead, so we don't generate hundreds of IPC
calls by wiggling the mouse.

[rfrappier, 2015/06/25 17:09:21]

How about I listen for 'change' for sending the percent to ChromeOS, and listen
to 'input' so the user can see which percent they are setting while the slider
is moving?

[rfrappier, 2015/06/25 17:09:21]

Done.

[michaelpg, 2015/06/25 18:18:19]

Good idea.

+    text.addEventListener('input', onBatteryTextChange);
+  }
+
+  // Return an object with all of the exports.
+  return {
+    initialize: initialize,
+    returnBatteryInfo: returnBatteryInfo,
+    onBatterySliderChange: onBatterySliderChange,

[michaelpg, 2015/06/24 23:33:48]

Why export on*Change?

[rfrappier, 2015/06/25 17:09:21]

It's not necessary. Not sure why I put them there, actually. Will remove

+    onBatteryTextChange: onBatteryTextChange,
+  };
+});
+
+document.addEventListener('DOMContentLoaded', device_emulator.initialize);