[chromeos] Add an about:power UI.

chrome/browser/resources/chromeos/power.js

+// Copyright 2014 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.
+
+
+function getTimeString(timePast) {

[Daniel Erat, 2014/01/06 23:02:41]

timePast -> secPast

[Siva Chandra, 2014/01/07 01:19:19]

Done.

+  var d = new Date();
+  d.setSeconds(d.getSeconds() - timePast);
+  return d.toLocaleTimeString();
+}
+
+ /**
+  * Plot a line graph of data versus time on a HTML canvas element.
+  *
+  * @param {DOMElement} canvas The canvas on which the line graph is drawn.

[arv (Not doing code reviews), 2014/01/06 23:29:57]

Invalid type. Do you mean {Element} or maybe more specific {HTMLCanvasElement}?

[Siva Chandra, 2014/01/07 01:19:19]

Done.

+  * @param {Array.integer} tdata The time (in seconds) in the past when the

[arv (Not doing code reviews), 2014/01/06 23:29:57]

Array.<number>

JS only has one number type

[Siva Chandra, 2014/01/07 01:19:19]

Done.

+  *     corresponding data in plots was sampled.
+  * @param {Array.<Object>} plots An array of objects with fields 'data' and
+  *     'color'. The field 'data' is an array of samples to be plotted as a
+  *     line graph with 'color'. The elements in the 'data' array are ordered
+  *     corresponding to their sampling time in the argument 'tdata'. Also,
+  *     the number of elements in the data array should be the same as in the
+  *     time array 'tdata' above.
+  * @param {number} ymin Minimum bound of y-axis
+  * @param {number} ymax Maximum bound of y-axis.
+  * @param {integer} yprecision An integer value representing the number of
+  *     digits of precision the y-axis data should be printed with.
+  */
+function plotLineGraph(canvas, tdata, plots, ymin, ymax, yprecision) {

[arv (Not doing code reviews), 2014/01/06 23:29:57]

tdata -> tData or maybe timeData?

ymax -> yMax

...

[Siva Chandra, 2014/01/07 01:19:19]

Done.

+  var textFont = '12px Arial';
+  var textHeight = 12;
+  var padding = 5;  // Pixels
+  var gridColor = '#CCC';

[arv (Not doing code reviews), 2014/01/06 23:29:57]

#ccc

[Siva Chandra, 2014/01/07 01:19:19]

Done.

+  var ctx = canvas.getContext('2d');
+  var size = tdata.length;
+
+  function printErrorText(text) {
+    ctx.clearRect(0, 0, canvas.scrollWidth, canvas.scrollHeight);

[arv (Not doing code reviews), 2014/01/06 23:29:57]

canvas.width and height is more idiomatic

[Siva Chandra, 2014/01/07 01:19:19]

Done.

+    ctx.font = textFont;
+    ctx.fillText(text, 15, 15);

[Daniel Erat, 2014/01/06 23:02:41]

move these "15" magic numbers into an "errorOffsetPixels" or similar variable

[Siva Chandra, 2014/01/07 01:19:19]

Done.

+  }
+
+  if (size < 2) {
+    printErrorText(loadTimeData.getString('notEnoughDataAvailableYet'));
+    return;
+  }
+
+  for (var count in plots) {

[arv (Not doing code reviews), 2014/01/06 23:29:57]

Don't use for-in loops over arrays. Stick to plain old c style loops.

[Siva Chandra, 2014/01/07 01:19:19]

Done.

+    if (plots[count].data.length != size) {
+      printErrorText(loadTimeData.getString('timeAndPlotDataMismatch'));
+      return;
+    }
+  }
+
+  function valueToString(value) {

[arv (Not doing code reviews), 2014/01/06 23:29:57]

i18n?

Why not use Intl for all your number to string needs?

[Siva Chandra, 2014/01/07 01:19:19]

How to i18n-ize numbers from within a js chrome resource?

[arv (Not doing code reviews), 2014/01/07 15:23:54]

Intl is part of JavaScript and it provides locale aware number formatting. I'm
not sure what 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Obje...

Something along the lines of:

new Intl.NumberFormat('fr-CA', {style: 'decimal', maximumSignificantDigits:
2}).format(1.234567)

I'm not sure you really care about this though?

[Siva Chandra, 2014/01/07 22:05:16]

I am tempted to say i18n for numbers does not matter/is not required. None of
the other chromeos JS scripts use it for numbers.

+    return Number(value).toPrecision(yprecision);
+  }
+
+  function getTextWidth(text) {
+    ctx.font = textFont;
+    return ctx.measureText(text).width + 2;

[Daniel Erat, 2014/01/06 23:02:41]

why +2?

(i.e. please add a comment)

[Siva Chandra, 2014/01/07 01:19:19]

Done.

+  }
+
+  function drawText(text, x, y) {

[Daniel Erat, 2014/01/06 23:02:41]

move this up and make printErrorText() use it

[Siva Chandra, 2014/01/07 01:19:19]

Done.

+    ctx.font = textFont;
+    ctx.fillStyle = '#000';
+    ctx.fillText(text, x, y);
+  }
+
+  function drawHighlightText(text, x, y, color) {
+    ctx.strokeStyle = '#000';
+    ctx.strokeRect(x, y - textHeight, getTextWidth(text), textHeight);
+    ctx.fillStyle = color;
+    ctx.fillRect(x, y - textHeight, getTextWidth(text), textHeight);
+    ctx.fillStyle = '#FFF';
+    ctx.fillText(text, x, y);
+  }
+
+  function drawLine(x1, y1, x2, y2, color) {
+    var colorBackup = ctx.strokeStyle;

[arv (Not doing code reviews), 2014/01/06 23:29:57]

ctx.save()
...
ctx.restore()

[Siva Chandra, 2014/01/07 01:19:19]

Done.

+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.strokeStyle = color;
+    ctx.stroke();
+    ctx.strokeStyle = colorBackup;
+  }
+
+  // The strokeRect method of the 2d context of a canvas draws a bounding
+  // rectangle with an offset origin and greater dimensions. Hence, use this
+  // function to draw a rect at the desired location with desired dimensions.
+  function drawRect(x, y, width, height, color) {

[arv (Not doing code reviews), 2014/01/06 23:29:57]

Is there a reason why this (and other functions) are local functions of
plotLineGraph?

[Siva Chandra, 2014/01/07 01:19:19]

I am viewing this as a pseudo plotting object which "manages" itself. That is,
when invoked, it creates a 'state' and operates on the state. If I make the
functions global, we will still be doing the same, but will require to pass this
state to each of the helper functions. Also, I do not see a need to make the
helpers global. They are "private" to this pseudo class. All other functions
should only be calling the main plotting function.

+    drawLine(x, y, x + width - 1, y, color);
+    drawLine(x, y, x, y + height - 1, color);
+    drawLine(x, y + height - 1, x + width - 1, y + height - 1, color);
+    drawLine(x + width - 1, y, x + width - 1, y + height - 1, color);
+  }
+
+  var yminStr = valueToString(ymin);
+  var ymaxStr = valueToString(ymax);
+  var yhalfStr = valueToString((ymax + ymin) / 2);
+  var yminWidth = getTextWidth(yminStr);
+  var ymaxWidth = getTextWidth(ymaxStr);
+  var yhalfWidth = getTextWidth(yhalfStr);
+
+  var xminStr = tdata[0];
+  var xmaxStr = tdata[size - 1];
+  var xminWidth = getTextWidth(xminStr);
+  var xmaxWidth = getTextWidth(xmaxStr);
+
+  var xorigin = padding + Math.max(yminWidth, ymaxWidth, xminWidth / 2);
+  var yorigin = padding + textHeight;
+  var width = canvas.scrollWidth - xorigin - xmaxWidth / 2 - padding;
+  if (width < size) {
+    canvas.width += canvas.width + size - width;
+    width = size;
+  }
+  var height = canvas.scrollHeight - yorigin - textHeight - padding;
+
+  function drawPlots() {
+    // Start fresh.
+    ctx.clearRect(0, 0, canvas.scrollWidth, canvas.scrollHeight);
+
+    // Draw the bounding rectangle.
+    drawRect(xorigin, yorigin, width, height, gridColor);
+
+    // Draw the x and y bound values.
+    drawText(ymaxStr, xorigin - ymaxWidth, yorigin + textHeight);
+    drawText(yminStr, xorigin - yminWidth, yorigin + height);
+    drawText(xminStr, xorigin - xminWidth / 2, yorigin + height + textHeight);
+    drawText(xmaxStr,
+             xorigin + width - xmaxWidth / 2,
+             yorigin + height + textHeight);
+
+    // Draw y-level (horizontal) lines.
+    drawLine(xorigin, yorigin + height / 4,
+             xorigin + width, yorigin + height / 4,
+             gridColor);
+    drawLine(xorigin, yorigin + height / 2,
+             xorigin + width, yorigin + height / 2, gridColor);
+    drawLine(xorigin, yorigin + 3 * height / 4,
+             xorigin + width, yorigin + 3 * height / 4,
+             gridColor);
+
+    // Draw half-level value.
+    drawText(yhalfStr,
+             xorigin - yhalfWidth,
+             yorigin + height / 2 + textHeight / 2);
+
+    // Draw the plots.
+    var yvalRange = ymax - ymin;
+    for (var count in plots) {
+      var plot = plots[count];
+      var ydata = plot.data;
+      ctx.strokeStyle = plot.color;
+      ctx.beginPath();
+      for (var i = 0; i < size; ++i) {

[arv (Not doing code reviews), 2014/01/06 23:29:57]

prefer i++ for consistency

[Siva Chandra, 2014/01/07 01:19:19]

Done.

+        var xpos = xorigin + Math.floor(i / (size - 1) * (width - 1));
+        var val = ydata[i];
+        var ypos = yorigin + height - 1 -
+                   Math.round((val - ymin) / yvalRange * (height - 1));
+        if (i == 0) {
+          ctx.moveTo(xpos, ypos);
+        } else {
+          ctx.lineTo(xpos, ypos);
+        }
+      }
+      ctx.stroke();
+    }
+  }
+
+  function drawTimeGuide(tdataIndex) {
+    var x = xorigin + tdataIndex / (size - 1) * (width - 1);
+    drawLine(x, yorigin, x, yorigin + height - 1, '#000');
+    drawText(tdata[tdataIndex],
+             x - getTextWidth(tdata[tdataIndex]) / 2,
+             yorigin - 2);
+
+    for (var count in plots) {
+      var ydata = plots[count].data;
+
+      // Draw small black square on the plot where the time guide intersects
+      // it.
+      var val = ydata[tdataIndex];
+      var ypos = yorigin + height - 1 -
+                 Math.round((val - ymin) / (ymax - ymin) * (height - 1));
+      ctx.fillStyle = '#000';
+      ctx.fillRect(x - 2, ypos - 2, 4, 4);
+
+      // Draw the val to right of the intersection.
+      var valStr = valueToString(val);
+      var yloc;
+      if (ypos - textHeight / 2 < yorigin) {
+        yloc = yorigin + textHeight;
+      } else if (ypos + textHeight / 2 >= ypos + height) {
+        yloc = yorigin + height - 1;
+      } else {
+        yloc = ypos + textHeight / 2;
+      }
+      drawHighlightText(
+          valStr, x + 5, ypos + textHeight / 2, plots[count].color);
+    }
+  }
+
+  function onMouseOverOrMove(event) {
+    drawPlots();
+
+    var x = event.clientX - canvas.offsetLeft + canvas.parentNode.scrollLeft;

[arv (Not doing code reviews), 2014/01/06 23:29:57]

Maybe use canvas.getBoundingClientRect() instead? It would simplify the code and
make it less error prone.

[Siva Chandra, 2014/01/07 01:19:19]

Done.

+    var y = event.clientY - canvas.offsetTop + canvas.parentNode.scrollTop;
+    if (x < xorigin || x >= xorigin + width ||
+        y < yorigin || y >= yorigin + height) {
+      return;
+    }
+
+    if (width == size) {
+      drawTimeGuide(x - xorigin);
+    } else {
+      drawTimeGuide(Math.round((x - xorigin) / (width - 1) * (size - 1)));
+    }
+  }
+
+  function onMouseOut(event) {

[Daniel Erat, 2014/01/06 23:02:41]

use canvas.addEventListener('mouseout', function(event) { ...

[Siva Chandra, 2014/01/07 01:19:19]

Done.

+    drawPlots();
+  }
+
+  drawPlots();
+  canvas.onmouseover = onMouseOverOrMove;

[arv (Not doing code reviews), 2014/01/06 23:29:57]

Do you need touch events too?

[Siva Chandra, 2014/01/07 01:19:19]

Single touch events are already captured is it not? I tested it on pixel and it
works. Sliding, I am not sure we want it. Do we need to do something special to
enable/disable/handle?

+  canvas.onmousemove = onMouseOverOrMove;

[Daniel Erat, 2014/01/06 23:02:41]

use addEventListener for these too

[Siva Chandra, 2014/01/07 01:19:19]

Done.

+  canvas.onmouseout = onMouseOut;
+}
+
+/**
+ * Display the battery charge vs time on a line graph.
+ *
+ * @param {Array.<Object>} power_supply_array An array of objects with fields
+ *     representing the battery charge, time when the charge measurement was
+ *     taken, and whether there was external power connected at that time.
+ */
+function showBatteryChargeData(power_supply_array) {

[Daniel Erat, 2014/01/06 23:02:41]

powerSupplyArray

[arv (Not doing code reviews), 2014/01/06 23:29:57]

no underscores in js

[Siva Chandra, 2014/01/07 01:19:19]

Done.

[Siva Chandra, 2014/01/07 01:19:19]

Done.

+  canvas = $('battery-charge-canvas');
+  tdata = new Array();

[arv (Not doing code reviews), 2014/01/06 23:29:57]

tdata = [];

[Siva Chandra, 2014/01/07 01:19:19]

Done.

+  plot = new Array();
+  for (var i in power_supply_array) {
+    tdata[i] = getTimeString(power_supply_array[i].seconds_past);
+    plot[i] = power_supply_array[i].battery_percent;
+  }
+
+  plots = new Array();

[arv (Not doing code reviews), 2014/01/06 23:29:57]

plots = [
  {
    color: ...
  }
];

[Siva Chandra, 2014/01/07 01:19:19]

Done.

+  plots[0] = {
+    color: '#0000FF',
+    data: plot
+  };
+  plotLineGraph(canvas, tdata, plots, 0.00, 100.00, 3);
+}
+
+function requestBatteryChargeData() {
+  chrome.send('requestBatteryChargeData');
+}
+
+var PowerUI = {

[arv (Not doing code reviews), 2014/01/06 23:29:57]

Only classes/constructors should be capitalized.

[Siva Chandra, 2014/01/07 01:19:19]

Done.

+  showBatteryChargeData: showBatteryChargeData
+};
+
+document.addEventListener('DOMContentLoaded', function() {
+  requestBatteryChargeData();
+  $('battery-charge-reload-button').onclick = requestBatteryChargeData;
+});