path: root/chromium/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.

/**
 * Plot a line graph of data versus time on a HTML canvas element.
 *
 * @param {HTMLCanvasElement} plotCanvas The canvas on which the line graph is
 *     drawn.
 * @param {HTMLCanvasElement} legendCanvas The canvas on which the legend for
 *     the line graph is drawn.
 * @param {Array<number>} tData The time (in seconds) in the past when the
 *     corresponding data in plots was sampled.
 * @param {Array<{data: Array<number>, color: string}>} plots An
 *     array of plots to plot on the canvas. The field 'data' of a plot is an
 *     array of samples to be plotted as a line graph with color speficied by
 *     the field '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(
    plotCanvas, legendCanvas, tData, plots, yMin, yMax, yPrecision) {
  var textFont = 12 * devicePixelRatio + 'px Arial';
  var textHeight = 12 * devicePixelRatio;
  var padding = 5 * devicePixelRatio;  // Pixels
  var errorOffsetPixels = 15 * devicePixelRatio;
  var gridColor = '#ccc';
  var plotCtx = plotCanvas.getContext('2d');
  var size = tData.length;

  function drawText(ctx, text, x, y) {
    ctx.font = textFont;
    ctx.fillStyle = '#000';
    ctx.fillText(text, x, y);
  }

  function printErrorText(ctx, text) {
    ctx.clearRect(0, 0, plotCanvas.width, plotCanvas.height);
    drawText(ctx, text, errorOffsetPixels, errorOffsetPixels);
  }

  if (size < 2) {
    printErrorText(plotCtx,
                   loadTimeData.getString('notEnoughDataAvailableYet'));
    return;
  }

  for (var count = 0; count < plots.length; count++) {
    if (plots[count].data.length != size) {
      throw new Error('Mismatch in time and plot data.');
    }
  }

  function valueToString(value) {
    if (Math.abs(value) < 1) {
      return Number(value).toFixed(yPrecision - 1);
    } else {
      return Number(value).toPrecision(yPrecision);
    }
  }

  function getTextWidth(ctx, text) {
    ctx.font = textFont;
    // For now, all text is drawn to the left of vertical lines, or centered.
    // Add a 2 pixel padding so that there is some spacing between the text
    // and the vertical line.
    return Math.round(ctx.measureText(text).width) + 2 * devicePixelRatio;
  }

  function getLegend(text) {
    return ' ' + text + '    ';
  }

  function drawHighlightText(ctx, text, x, y, color) {
    ctx.strokeStyle = '#000';
    ctx.strokeRect(x, y - textHeight, getTextWidth(ctx, text), textHeight);
    ctx.fillStyle = color;
    ctx.fillRect(x, y - textHeight, getTextWidth(ctx, text), textHeight);
    ctx.fillStyle = '#fff';
    ctx.fillText(text, x, y);
  }

  function drawLine(ctx, x1, y1, x2, y2, color) {
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.strokeStyle = color;
    ctx.lineWidth = 1 * devicePixelRatio;
    ctx.stroke();
    ctx.restore();
  }

  // The strokeRect method of the 2d context of a plotCanvas 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(ctx, x, y, width, height, color) {
    var offset = 1 * devicePixelRatio;
    drawLine(ctx, x, y, x + width - offset, y, color);
    drawLine(ctx, x, y, x, y + height - offset, color);
    drawLine(ctx, x, y + height - offset, x + width - offset,
        y + height - offset, color);
    drawLine(ctx, x + width - offset, y, x + width - offset,
        y + height - offset, color);
  }

  function drawLegend() {
    // Show a legend only if at least one individual plot has a name.
    var valid = false;
    for (var i = 0; i < plots.length; i++) {
      if (plots[i].name != null) {
        valid = true;
        break;
      }
    }
    if (!valid) {
      legendCanvas.hidden = true;
      return;
    }


    var padding = 2 * devicePixelRatio;
    var legendSquareSide = 12 * devicePixelRatio;
    var legendCtx = legendCanvas.getContext('2d');
    var xLoc = padding;
    var yLoc = padding;
    // Adjust the height of the canvas before drawing on it.
    for (var i = 0; i < plots.length; i++) {
      if (plots[i].name == null) {
        continue;
      }
      var legendText = getLegend(plots[i].name);
      xLoc += legendSquareSide + getTextWidth(legendCtx, legendText) +
              2 * padding;
      if (i < plots.length - 1) {
        var xLocNext = xLoc +
                       getTextWidth(legendCtx, getLegend(plots[i + 1].name)) +
                       legendSquareSide;
        if (xLocNext >= legendCanvas.width) {
          xLoc = padding;
          yLoc = yLoc + 2 * padding + textHeight;
        }
      }
    }

    legendCanvas.height = yLoc + textHeight + padding;
    legendCanvas.style.height =
        legendCanvas.height / devicePixelRatio + 'px';

    xLoc = padding;
    yLoc = padding;
    // Go over the plots again, this time drawing the legends.
    for (var i = 0; i < plots.length; i++) {
      legendCtx.fillStyle = plots[i].color;
      legendCtx.fillRect(xLoc, yLoc, legendSquareSide, legendSquareSide);
      xLoc += legendSquareSide;

      var legendText = getLegend(plots[i].name);
      drawText(legendCtx, legendText, xLoc, yLoc + textHeight - 1);
      xLoc += getTextWidth(legendCtx, legendText) + 2 * padding;

      if (i < plots.length - 1) {
        var xLocNext = xLoc +
                       getTextWidth(legendCtx, getLegend(plots[i + 1].name)) +
                       legendSquareSide;
        if (xLocNext >= legendCanvas.width) {
          xLoc = padding;
          yLoc = yLoc + 2 * padding + textHeight;
        }
      }
    }
  }

  var yMinStr = valueToString(yMin);
  var yMaxStr = valueToString(yMax);
  var yHalfStr = valueToString((yMax + yMin) / 2);
  var yMinWidth = getTextWidth(plotCtx, yMinStr);
  var yMaxWidth = getTextWidth(plotCtx, yMaxStr);
  var yHalfWidth = getTextWidth(plotCtx, yHalfStr);

  var xMinStr = tData[0];
  var xMaxStr = tData[size - 1];
  var xMinWidth = getTextWidth(plotCtx, xMinStr);
  var xMaxWidth = getTextWidth(plotCtx, xMaxStr);

  var xOrigin = padding + Math.max(yMinWidth,
                                   yMaxWidth,
                                   Math.round(xMinWidth / 2));
  var yOrigin = padding + textHeight;
  var width = plotCanvas.width - xOrigin - Math.floor(xMaxWidth / 2) - padding;
  if (width < size) {
    plotCanvas.width += size - width;
    width = size;
  }
  var height = plotCanvas.height - yOrigin - textHeight - padding;
  var linePlotEndMarkerWidth = 3;

  function drawPlots() {
    // Start fresh.
    plotCtx.clearRect(0, 0, plotCanvas.width, plotCanvas.height);

    // Draw the bounding rectangle.
    drawRect(plotCtx, xOrigin, yOrigin, width, height, gridColor);

    // Draw the x and y bound values.
    drawText(plotCtx, yMaxStr, xOrigin - yMaxWidth, yOrigin + textHeight);
    drawText(plotCtx, yMinStr, xOrigin - yMinWidth, yOrigin + height);
    drawText(plotCtx,
             xMinStr,
             xOrigin - xMinWidth / 2,
             yOrigin + height + textHeight);
    drawText(plotCtx,
             xMaxStr,
             xOrigin + width - xMaxWidth / 2,
             yOrigin + height + textHeight);

    // Draw y-level (horizontal) lines.
    drawLine(plotCtx,
             xOrigin + 1, yOrigin + height / 4,
             xOrigin + width - 2, yOrigin + height / 4,
             gridColor);
    drawLine(plotCtx,
             xOrigin + 1, yOrigin + height / 2,
             xOrigin + width - 2, yOrigin + height / 2, gridColor);
    drawLine(plotCtx,
             xOrigin + 1, yOrigin + 3 * height / 4,
             xOrigin + width - 2, yOrigin + 3 * height / 4,
             gridColor);

    // Draw half-level value.
    drawText(plotCtx,
             yHalfStr,
             xOrigin - yHalfWidth,
             yOrigin + height / 2 + textHeight / 2);

    // Draw the plots.
    var yValRange = yMax - yMin;
    for (var count = 0; count < plots.length; count++) {
      var plot = plots[count];
      var yData = plot.data;
      plotCtx.strokeStyle = plot.color;
      plotCtx.lineWidth = 2;
      plotCtx.beginPath();
      var beginPath = true;
      for (var i = 0; i < size; i++) {
        var val = yData[i];
        if (typeof val === 'string') {
          // Stroke the plot drawn so far and begin a fresh plot.
          plotCtx.stroke();
          plotCtx.beginPath();
          beginPath = true;
          continue;
        }
        var xPos = xOrigin + Math.floor(i / (size - 1) * (width - 1));
        var yPos = yOrigin + height - 1 -
                   Math.round((val - yMin) / yValRange * (height - 1));
        if (beginPath) {
          plotCtx.moveTo(xPos, yPos);
          // A simple move to does not print anything. Hence, draw a little
          // square here to mark a beginning.
          plotCtx.fillStyle = '#000';
          plotCtx.fillRect(xPos - linePlotEndMarkerWidth,
                           yPos - linePlotEndMarkerWidth,
                           linePlotEndMarkerWidth * devicePixelRatio,
                           linePlotEndMarkerWidth * devicePixelRatio);
          beginPath = false;
        } else {
          plotCtx.lineTo(xPos, yPos);
          if (i === size - 1 || typeof yData[i + 1] === 'string') {
            // Draw a little square to mark an end to go with the start
            // markers from above.
            plotCtx.fillStyle = '#000';
            plotCtx.fillRect(xPos - linePlotEndMarkerWidth,
                             yPos - linePlotEndMarkerWidth,
                             linePlotEndMarkerWidth * devicePixelRatio,
                             linePlotEndMarkerWidth * devicePixelRatio);
          }
        }
      }
      plotCtx.stroke();
    }

    // Paint the missing time intervals with |gridColor|.
    // Pick one of the plots to look for missing time intervals.
    function drawMissingRect(start, end) {
      var xLeft = xOrigin + Math.floor(start / (size - 1) * (width - 1));
      var xRight = xOrigin + Math.floor(end / (size - 1) * (width - 1));
      plotCtx.fillStyle = gridColor;
      // The x offsets below are present so that the blank space starts
      // and ends between two valid samples.
      plotCtx.fillRect(xLeft + 1, yOrigin, xRight - xLeft - 2, height - 1);
    }
    var inMissingInterval = false;
    var intervalStart;
    for (var i = 0; i < size; i++) {
      if (typeof plots[0].data[i] === 'string') {
        if (!inMissingInterval) {
          inMissingInterval = true;
          // The missing interval should actually start from the previous
          // sample.
          intervalStart = Math.max(i - 1, 0);
        }

        if (i == size - 1) {
          // If this is the last sample, just draw missing rect.
          drawMissingRect(intervalStart, i);
        }
      } else if (inMissingInterval) {
        inMissingInterval = false;
        drawMissingRect(intervalStart, i);
      }
    }
  }

  function drawTimeGuide(tDataIndex) {
    var x = xOrigin + tDataIndex / (size - 1) * (width - 1);
    drawLine(plotCtx, x, yOrigin, x, yOrigin + height - 1, '#000');
    drawText(plotCtx,
             tData[tDataIndex],
             x - getTextWidth(plotCtx, tData[tDataIndex]) / 2,
             yOrigin - 2);

    for (var count = 0; count < plots.length; count++) {
      var yData = plots[count].data;

      // Draw small black square on the plot where the time guide intersects
      // it.
      var val = yData[tDataIndex];
      var yPos, valStr;
      if (typeof val === 'string') {
        yPos = yOrigin + Math.round(height / 2);
        valStr = val;
      } else {
        yPos = yOrigin + height - 1 -
            Math.round((val - yMin) / (yMax - yMin) * (height - 1));
        valStr = valueToString(val);
      }
      plotCtx.fillStyle = '#000';
      plotCtx.fillRect(x - 2, yPos - 2, 4, 4);

      // Draw the val to right of the intersection.
      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(plotCtx, valStr, x + 5, yLoc, plots[count].color);
    }
  }

  function onMouseOverOrMove(event) {
    drawPlots();

    var boundingRect = plotCanvas.getBoundingClientRect();
    var x = Math.round((event.clientX - boundingRect.left) * devicePixelRatio);
    var y = Math.round((event.clientY - boundingRect.top) * devicePixelRatio);
    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) {
    drawPlots();
  }

  drawLegend();
  drawPlots();
  plotCanvas.addEventListener('mouseover', onMouseOverOrMove);
  plotCanvas.addEventListener('mousemove', onMouseOverOrMove);
  plotCanvas.addEventListener('mouseout', onMouseOut);
}

var sleepSampleInterval = 30 * 1000; // in milliseconds.
var sleepText = loadTimeData.getString('systemSuspended');
var invalidDataText = loadTimeData.getString('invalidData');
var offlineText = loadTimeData.getString('offlineText');

var plotColors = ['Red', 'Blue', 'Green', 'Gold', 'CadetBlue', 'LightCoral',
                  'LightSlateGray', 'Peru', 'DarkRed', 'LawnGreen', 'Tan'];

/**
 * Add canvases for plotting to |plotsDiv|. For every header in |headerArray|,
 * one canvas for the plot and one for its legend are added.
 *
 * @param {Array<string>} headerArray Headers for the different plots to be
 *     added to |plotsDiv|.
 * @param {HTMLDivElement} plotsDiv The div element into which the canvases
 *     are added.
 * @return {<string>: {plotCanvas: <HTMLCanvasElement>,
 *                     legendCanvas: <HTMLCanvasElement>} Returns an object
 *    with the headers as 'keys'. Each element is an object containing the
 *    legend canvas and the plot canvas that have been added to |plotsDiv|.
 */
function addCanvases(headerArray, plotsDiv) {
  // Remove the contents before adding new ones.
  while (plotsDiv.firstChild != null) {
    plotsDiv.removeChild(plotsDiv.firstChild);
  }
  var width = Math.floor(plotsDiv.getBoundingClientRect().width);
  var canvases = {};
  for (var i = 0; i < headerArray.length; i++) {
    var header = document.createElement('h4');
    header.textContent = headerArray[i];
    plotsDiv.appendChild(header);

    var legendCanvas = document.createElement('canvas');
    legendCanvas.width = width * devicePixelRatio;
    legendCanvas.style.width = width + 'px';
    plotsDiv.appendChild(legendCanvas);

    var plotCanvasDiv = document.createElement('div');
    plotCanvasDiv.style.overflow = 'auto';
    plotsDiv.appendChild(plotCanvasDiv);

    plotCanvas = document.createElement('canvas');
    plotCanvas.width = width * devicePixelRatio;
    plotCanvas.height = 200 * devicePixelRatio;
    plotCanvas.style.height = '200px';
    plotCanvasDiv.appendChild(plotCanvas);

    canvases[headerArray[i]] = {plot: plotCanvas, legend: legendCanvas};
  }
  return canvases;
}

/**
 * Add samples in |sampleArray| to individual plots in |plots|. If the system
 * resumed from a sleep/suspend, then "suspended" sleep samples are added to
 * the plot for the sleep duration.
 *
 * @param {Array<{data: Array<number>, color: string}>} plots An
 *     array of plots to plot on the canvas. The field 'data' of a plot is an
 *     array of samples to be plotted as a line graph with color speficied by
 *     the field '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' below.
 * @param {Array<number>} tData The time (in seconds) in the past when the
 *     corresponding data in plots was sampled.
 * @param {Array<number>} absTime
 * @param {Array<number>} sampleArray The array of samples wherein each
 *     element corresponds to the individual plot in |plots|.
 * @param {number} sampleTime Time in milliseconds since the epoch when the
 *     samples in |sampleArray| were captured.
 * @param {number} previousSampleTime Time in milliseconds since the epoch
 *     when the sample prior to the current sample was captured.
 * @param {Array<{time: number, sleepDuration: number}>} systemResumedArray An
 *     array objects corresponding to system resume events. The 'time' field is
 *     for the time in milliseconds since the epoch when the system resumed. The
 *     'sleepDuration' field is for the time in milliseconds the system spent
 *     in sleep/suspend state.
 */
function addTimeDataSample(plots, tData, absTime, sampleArray,
                           sampleTime, previousSampleTime,
                           systemResumedArray) {
  for (var i = 0; i < plots.length; i++) {
    if (plots[i].data.length != tData.length) {
      throw new Error('Mismatch in time and plot data.');
    }
  }

  var time;
  if (tData.length == 0) {
    time = new Date(sampleTime);
    absTime[0] = sampleTime;
    tData[0] = time.toLocaleTimeString();
    for (var i = 0; i < plots.length; i++) {
      plots[i].data[0] = sampleArray[i];
    }
    return;
  }

  for (var i = 0; i < systemResumedArray.length; i++) {
    var resumeTime = systemResumedArray[i].time;
    var sleepDuration = systemResumedArray[i].sleepDuration;
    var sleepStartTime = resumeTime - sleepDuration;
    if (resumeTime < sampleTime) {
      if (sleepStartTime < previousSampleTime) {
        // This can happen if pending callbacks were handled before actually
        // suspending.
        sleepStartTime = previousSampleTime + 1000;
      }
      // Add sleep samples for every |sleepSampleInterval|.
      var sleepSampleTime = sleepStartTime;
      while (sleepSampleTime < resumeTime) {
        time = new Date(sleepSampleTime);
        absTime.push(sleepSampleTime);
        tData.push(time.toLocaleTimeString());
        for (var j = 0; j < plots.length; j++) {
          plots[j].data.push(sleepText);
        }
        sleepSampleTime += sleepSampleInterval;
      }
    }
  }

  time = new Date(sampleTime);
  absTime.push(sampleTime);
  tData.push(time.toLocaleTimeString());
  for (var i = 0; i < plots.length; i++) {
    plots[i].data.push(sampleArray[i]);
  }
}

/**
 * Display the battery charge vs time on a line graph.
 *
 * @param {Array<{time: number,
 *                 batteryPercent: number,
 *                 batteryDischargeRate: number,
 *                 externalPower: number}>} powerSupplyArray 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.
 * @param {Array<{time: ?, sleepDuration: ?}>} systemResumedArray An array
 *     objects with fields 'time' and 'sleepDuration'. Each object corresponds
 *     to a system resume event. The 'time' field is for the time in
 *     milliseconds since the epoch when the system resumed. The 'sleepDuration'
 *     field is for the time in milliseconds the system spent in sleep/suspend
 *     state.
 */
function showBatteryChargeData(powerSupplyArray, systemResumedArray) {
  var chargeTimeData = [];
  var chargeAbsTime = [];
  var chargePlot = [
    {
      name: loadTimeData.getString('batteryChargePercentageHeader'),
      color: 'Blue',
      data: []
    }
  ];
  var dischargeRateTimeData = [];
  var dischargeRateAbsTime = [];
  var dischargeRatePlot = [
    {
      name: loadTimeData.getString('dischargeRateLegendText'),
      color: 'Red',
      data: []
    },
    {
      name: loadTimeData.getString('movingAverageLegendText'),
      color: 'Green',
      data: []
    },
    {
      name: loadTimeData.getString('binnedAverageLegendText'),
      color: 'Blue',
      data: []
    }
  ];
  var minDischargeRate = 1000;  // A high unrealistic number to begin with.
  var maxDischargeRate = -1000; // A low unrealistic number to begin with.
  for (var i = 0; i < powerSupplyArray.length; i++) {
    var j = Math.max(i - 1, 0);

    addTimeDataSample(chargePlot,
                      chargeTimeData,
                      chargeAbsTime,
                      [powerSupplyArray[i].batteryPercent],
                      powerSupplyArray[i].time,
                      powerSupplyArray[j].time,
                      systemResumedArray);

    var dischargeRate = powerSupplyArray[i].batteryDischargeRate;
    var inputSampleCount = $('sample-count-input').value;

    var movingAverage = 0;
    var k = 0;
    for (k = 0; k < inputSampleCount && i - k >= 0; k++) {
      movingAverage += powerSupplyArray[i - k].batteryDischargeRate;
    }
    // |k| will be atleast 1 because the 'min' value of the input field is 1.
    movingAverage /= k;

    var binnedAverage = 0;
    for (k = 0; k < inputSampleCount; k++) {
      var currentSampleIndex = i - i % inputSampleCount + k;
      if (currentSampleIndex >= powerSupplyArray.length) {
        break;
      }

      binnedAverage +=
          powerSupplyArray[currentSampleIndex].batteryDischargeRate;
    }
    binnedAverage /= k;

    minDischargeRate = Math.min(dischargeRate, minDischargeRate);
    maxDischargeRate = Math.max(dischargeRate, maxDischargeRate);
    addTimeDataSample(dischargeRatePlot,
                      dischargeRateTimeData,
                      dischargeRateAbsTime,
                      [dischargeRate, movingAverage, binnedAverage],
                      powerSupplyArray[i].time,
                      powerSupplyArray[j].time,
                      systemResumedArray);
  }
  if (minDischargeRate == maxDischargeRate) {
    // This means that all the samples had the same value. Hence, offset the
    // extremes by a bit so that the plot looks good.
    minDischargeRate -= 1;
    maxDischargeRate += 1;
  }

  plotsDiv = $('battery-charge-plots-div');

  canvases = addCanvases(
      [loadTimeData.getString('batteryChargePercentageHeader'),
       loadTimeData.getString('batteryDischargeRateHeader')],
      plotsDiv);

  batteryChargeCanvases = canvases[
      loadTimeData.getString('batteryChargePercentageHeader')];
  plotLineGraph(
      batteryChargeCanvases['plot'],
      batteryChargeCanvases['legend'],
      chargeTimeData,
      chargePlot,
      0.00,
      100.00,
      3);

  dischargeRateCanvases = canvases[
      loadTimeData.getString('batteryDischargeRateHeader')];
  plotLineGraph(
      dischargeRateCanvases['plot'],
      dischargeRateCanvases['legend'],
      dischargeRateTimeData,
      dischargeRatePlot,
      minDischargeRate,
      maxDischargeRate,
      3);
}

/**
 * Shows state occupancy data (CPU idle or CPU freq state occupancy) on a set of
 * plots on the about:power UI.
 *
 * @param {Array<Array<{
 *     time: number,
 *     cpuOnline: boolean,
 *     timeInState: Object<number>}>} timeInStateData Array of arrays
 *     where each array corresponds to a CPU on the system. The elements of the
 *     individual arrays contain state occupancy samples.
 * @param {Array<{time: ?, sleepDuration: ?}>} systemResumedArray An array
 *     objects with fields 'time' and 'sleepDuration'. Each object corresponds
 *     to a system resume event. The 'time' field is for the time in
 *     milliseconds since the epoch when the system resumed. The 'sleepDuration'
 *     field is for the time in milliseconds the system spent in sleep/suspend
 *     state.
 * @param {string} i18nHeaderString The header string to be displayed with each
 *     plot. For example, CPU idle data will have its own header format, and CPU
 *     freq data will have its header format.
 * @param {string} unitString This is the string capturing the unit, if any,
 *     for the different states. Note that this is not the unit of the data
 *     being plotted.
 * @param {HTMLDivElement} plotsDivId The div element in which the plots should
 *     be added.
 */
function showStateOccupancyData(timeInStateData,
                                systemResumedArray,
                                i18nHeaderString,
                                unitString,
                                plotsDivId) {
  var cpuPlots = [];
  for (var cpu = 0; cpu < timeInStateData.length; cpu++) {
    var cpuData = timeInStateData[cpu];
    if (cpuData.length == 0) {
      cpuPlots[cpu] = {plots: [], tData: []};
      continue;
    }
    tData = [];
    absTime = [];
    // Each element of |plots| is an array of samples, one for each of the CPU
    // states. The number of states is dicovered by looking at the first
    // sample for which the CPU is online.
    var plots = [];
    var stateIndexMap = [];
    var stateCount = 0;
    for (var i = 0; i < cpuData.length; i++) {
      if (cpuData[i].cpuOnline) {
        for (var state in cpuData[i].timeInState) {
          var stateName = state;
          if (unitString != null) {
            stateName += ' ' + unitString;
          }
          plots.push({
              name: stateName,
              data: [],
              color: plotColors[stateCount]
          });
          stateIndexMap.push(state);
          stateCount += 1;
        }
        break;
      }
    }
    // If stateCount is 0, then it means the CPU has been offline
    // throughout. Just add a single plot for such a case.
    if (stateCount == 0) {
      plots.push({
          name: null,
          data: [],
          color: null
      });
      stateCount = 1; // Some invalid state!
    }

    // Pass the samples through the function addTimeDataSample to add 'sleep'
    // samples.
    for (var i = 0; i < cpuData.length; i++) {
      var sample = cpuData[i];
      var valArray = [];
      for (var j = 0; j < stateCount; j++) {
        if (sample.cpuOnline) {
          valArray[j] = sample.timeInState[stateIndexMap[j]];
        } else {
          valArray[j] = offlineText;
        }
      }

      var k = Math.max(i - 1, 0);
      addTimeDataSample(plots,
                        tData,
                        absTime,
                        valArray,
                        sample.time,
                        cpuData[k].time,
                        systemResumedArray);
    }

    // Calculate the percentage occupancy of each state. A valid number is
    // possible only if two consecutive samples are valid/numbers.
    for (var k = 0; k < stateCount; k++) {
      var stateData = plots[k].data;
      // Skip the first sample as there is no previous sample.
      for (var i = stateData.length - 1; i > 0; i--) {
        if (typeof stateData[i] === 'number') {
          if (typeof stateData[i - 1] === 'number') {
            stateData[i] = (stateData[i] - stateData[i - 1]) /
                           (absTime[i] - absTime[i - 1]) * 100;
          } else {
            stateData[i] = invalidDataText;
          }
        }
      }
    }

    // Remove the first sample from the time and data arrays.
    tData.shift();
    for (var k = 0; k < stateCount; k++) {
      plots[k].data.shift();
    }
    cpuPlots[cpu] = {plots: plots, tData: tData};
  }

  headers = [];
  for (var cpu = 0; cpu < timeInStateData.length; cpu++) {
    headers[cpu] =
        'CPU ' + cpu + ' ' + loadTimeData.getString(i18nHeaderString);
  }

  canvases = addCanvases(headers, $(plotsDivId));
  for (var cpu = 0; cpu < timeInStateData.length; cpu++) {
    cpuCanvases = canvases[headers[cpu]];
    plotLineGraph(cpuCanvases['plot'],
                  cpuCanvases['legend'],
                  cpuPlots[cpu]['tData'],
                  cpuPlots[cpu]['plots'],
                  0,
                  100,
                  3);
  }
}

function showCpuIdleData(idleStateData, systemResumedArray) {
  showStateOccupancyData(idleStateData,
                         systemResumedArray,
                         'idleStateOccupancyPercentageHeader',
                         null,
                         'cpu-idle-plots-div');
}

function showCpuFreqData(freqStateData, systemResumedArray) {
  showStateOccupancyData(freqStateData,
                         systemResumedArray,
                         'frequencyStateOccupancyPercentageHeader',
                         'MHz',
                         'cpu-freq-plots-div');
}

function requestBatteryChargeData() {
  chrome.send('requestBatteryChargeData');
}

function requestCpuIdleData() {
  chrome.send('requestCpuIdleData');
}

function requestCpuFreqData() {
  chrome.send('requestCpuFreqData');
}

/**
 * Return a callback for the 'Show'/'Hide' buttons for each section of the
 * about:power page.
 *
 * @param {string} sectionId The ID of the section which is to be shown or
 *     hidden.
 * @param {string} buttonId The ID of the 'Show'/'Hide' button.
 * @param {function} requestFunction The function which should be invoked on
 *    'Show' to request for data from chrome.
 * @return {function} The button callback function.
 */
function showHideCallback(sectionId, buttonId, requestFunction) {
  return function() {
    if ($(sectionId).hidden) {
      $(sectionId).hidden = false;
      $(buttonId).textContent = loadTimeData.getString('hideButton');
      requestFunction();
    } else {
      $(sectionId).hidden = true;
      $(buttonId).textContent = loadTimeData.getString('showButton');
    }
  }
}

var powerUI = {
  showBatteryChargeData: showBatteryChargeData,
  showCpuIdleData: showCpuIdleData,
  showCpuFreqData: showCpuFreqData
};

document.addEventListener('DOMContentLoaded', function() {
  $('battery-charge-section').hidden = true;
  $('battery-charge-show-button').onclick = showHideCallback(
      'battery-charge-section',
      'battery-charge-show-button',
      requestBatteryChargeData);
  $('battery-charge-reload-button').onclick = requestBatteryChargeData;
  $('sample-count-input').onclick = requestBatteryChargeData;

  $('cpu-idle-section').hidden = true;
  $('cpu-idle-show-button').onclick = showHideCallback(
      'cpu-idle-section', 'cpu-idle-show-button', requestCpuIdleData);
  $('cpu-idle-reload-button').onclick = requestCpuIdleData;

  $('cpu-freq-section').hidden = true;
  $('cpu-freq-show-button').onclick = showHideCallback(
      'cpu-freq-section', 'cpu-freq-show-button', requestCpuFreqData);
  $('cpu-freq-reload-button').onclick = requestCpuFreqData;
});