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..64aee0e8ab56861ec1eaf49030f98806f61fb962
--- /dev/null
+++ b/chrome/browser/resources/chromeos/emulator/device_emulator.js
@@ -0,0 +1,122 @@
+// Copyright 2015 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.
+
+cr.define('device_emulator', function() {
+  'use strict';
+
+  /**
+   * Updates the UI with the battery status.
+   * @param {number} percent Battery percentage (out of 100).
+   */
+  function setBatteryInfo(percent) {
+    var slider = $('battery-percent-slider');
+    var text = $('battery-percent-text');
+
+    slider.value = percent;
+    text.value = percent.toString();

[michaelpg, 2015/06/26 17:45:59]

just use slider.valueAsNumber/text.valueAsNumber

[rfrappier, 2015/06/26 18:58:03]

Done.

+  }
+
+  /**
+   * Event listener fired when the battery percent slider is moved and the mouse
+   * is released. Updates the ChromeOS UI.

[michaelpg, 2015/06/26 17:46:00]

uber nit: Chrome OS is two words! :-P

[rfrappier, 2015/06/26 18:58:03]

Done.

+   * @param {Event} event Contains information about the event which was fired.
+   */
+  function onBatterySliderChange(event) {
+    var slider = event.target;
+    chrome.send('updateBatteryInfo', [slider.valueAsNumer]);
+  }
+
+  /**
+   * Event listener fired when the battery percent slider is moved. Updates
+   * the battery slider's associated text input.
+   * @param {Event} event Contains information about the event which was fired.
+   */
+  function onBatterySliderInput(event) {
+    var slider = event.target;
+    var text = $('battery-percent-text');
+
+    text.value = slider.value;
+  }
+
+  /**
+   * Event listener fired when a percentage is entered in the battery
+   * percentage text input. Updates the slider and ChromeOS UI.
+   * @param {Event} event Contains information about the event which was fired.
+   */
+  function onBatteryTextChange(event) {
+    var text = event.target;
+    var slider = $('battery-percent-slider');
+    var percent = text.valueAsNumber;
+
+    if (isNaN(percent)) {
+      percent = 0;
+      text.valueAsNumber = 0;
+    }
+
+    slider.value = percent;
+
+    chrome.send('updateBatteryInfo', [percent]);
+  }
+
+  function initialize() {
+    chrome.send('requestBatteryInfo');
+
+    wireEvents();
+    initializeControls();
+  }
+
+  /**
+   * Initializes any form controls as necessary.
+   */
+  function initializeControls() {
+    // Initialize the Power Source select box
+    var select = $('power-source-select');
+    var disconnectedOptionValue = loadTimeData.getString('DISCONNECTED');

[michaelpg, 2015/06/26 17:46:00]

use camelCase for localized string keys: 'disconnected', 'usbPower'

[rfrappier, 2015/06/26 18:58:03]

Done.

+    var usbPowerOptionValue = loadTimeData.getString('USB_POWER');
+    var acPowerOptionValue = loadTimeData.getString('AC_POWER');
+
+    select.appendChild(createOptionForSelect(acPowerOptionValue,
+        'AC Power (Main/Line Power Connected)'));
+    select.appendChild(createOptionForSelect(usbPowerOptionValue,
+        'USB Power'));
+    select.appendChild(createOptionForSelect(disconnectedOptionValue,
+        'Disconnected (No external power source)'));
+
+    select.value = disconnectedOptionValue;
+  }
+
+  /**
+   * A helper function to create and return an <option> node
+   * to be added to a select box.
+   * @param {string} value Will be the <option>'s value attribute.
+   * @param {string} text Will be the <option>'s innerHTML attribute.
+   */
+  function createOptionForSelect(value, text) {
+    var opt = document.createElement('option');
+    opt.value = value;
+    opt.innerHTML = text;
+
+    return opt;
+  }
+
+  /**
+   * Sets up all event listeners for the page.
+   */
+  function wireEvents() {
+    var slider = $('battery-percent-slider');
+    var text = $('battery-percent-text');
+
+    slider.addEventListener('change', onBatterySliderChange);
+    slider.addEventListener('input', onBatterySliderInput);
+    text.addEventListener('input', onBatteryTextChange);

[michaelpg, 2015/06/26 17:45:59]

name should match event ('input' is probably fine)

[rfrappier, 2015/06/26 18:58:03]

Done.

+  }
+
+  // Return an object with all of the exports.
+  return {
+    initialize: initialize,
+    setBatteryInfo: setBatteryInfo,
+  };
+});
+
+document.addEventListener('DOMContentLoaded', device_emulator.initialize);