Add activity recording capability to gcm internals page. User can refresh, start/stop recording, an…

chrome/browser/resources/gcm_internals.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.
 
 cr.define('gcmInternals', function() {
   'use strict';
 
+  var isRecording = false;
+
   /**
    * If the info dictionary has property prop, then set the text content of
    * element to the value of this property.
    * @param {!Object} info A dictionary of device infos to be displayed.
    * @param {string} prop Name of the property.
    * @param {string} element The id of a HTML element.
    */
   function setIfExists(info, prop, element) {
     if (info[prop] !== undefined) {
       $(element).textContent = info[prop];
     }
   }
 
   /**
    * Display device informations.
    * @param {!Object} info A dictionary of device infos to be displayed.
    */
   function displayDeviceInfo(info) {
     setIfExists(info, 'androidId', 'android-id');
     setIfExists(info, 'profileServiceCreated', 'profile-service-created');
     setIfExists(info, 'gcmEnabledState', 'gcm-enabled-state');
     setIfExists(info, 'signedInUserName', 'signed-in-username');
     setIfExists(info, 'gcmClientCreated', 'gcm-client-created');
     setIfExists(info, 'gcmClientState', 'gcm-client-state');
     setIfExists(info, 'gcmClientReady', 'gcm-client-ready');
     setIfExists(info, 'connectionClientCreated', 'connection-client-created');
     setIfExists(info, 'connectionState', 'connection-state');
+    setIfExists(info, 'appIdsCached', 'app-ids-cached');
+    setIfExists(info, 'sendQueueSize', 'send-queue-size');
+    setIfExists(info, 'unackedQueueSize', 'unacked-queue-size');
+  }
+
+  /**
+   * Remove all the child nodes of the element.
+   * @param {HTMLElement} ele A HTML element.

[fgorski, 2014/03/18 21:28:37]

rename ele to element.

[juyik, 2014/03/20 01:09:53]

Done.

+   */
+  function removeAllChildNodes(ele) {
+    while (ele.firstChild) {
+      ele.removeChild(ele.firstChild);
+    }
+  }
+
+  /**
+   * For each item in line, add a row to the table. Each item is actually a list
+   * of sub-items; each of which will have a corresponding cell created in that
+   * row, and the sub-item will be displayed in the cell.
+   * @param {HTMLElement} table A HTML tbody element.
+   * @param {!Object} list A list of list of item.
+   */
+  function addRows(table, list) {
+    for (var i = 0; i < list.length; ++i) {
+      var row = document.createElement('tr');
+      for (var j = 0; j < list[i].length; ++j) {

[fgorski, 2014/03/18 21:28:37]

Why did we choose to have a list here instead of a JSON object?

[juyik, 2014/03/20 01:09:53]

Do you mean a dictionary kind of object? I thought using list would simplify the
code since it's generally applicable to all activities. If I use dictionary,
there would be lots of code that create cells for every different property names
of different activities.

+        var cell = document.createElement('td');
+
+        if (j == 0) {

[fgorski, 2014/03/18 21:28:37]

in that case you should probably have a simple loop starting at 1 and a couple
of lines before the loop for element 0

[juyik, 2014/03/20 01:09:53]

Done.

+          // The first element is always a timestamp.
+          var d = new Date(list[i][j]);
+          cell.textContent = d.toString();
+        } else

[jianli, 2014/03/18 23:53:23]

nit: add brackets for else to be symmetric

[juyik, 2014/03/20 01:09:53]

N/A anymore after I refactored the code.

+          cell.textContent = list[i][j];
+        row.appendChild(cell);
+      }
+      if ((i % 2) == 0)
+        row.className = 'odd-number-row';
+      table.appendChild(row);
+    }
+  }
+
+  /**
+   * Refresh all displayed information.
+   */
+  function refreshAll() {
+    chrome.send('getGcmInternalsInfo', [false]);
+  }
+
+  /**
+   * Toggle the isRecording variable and send it to browser.
+   */
+  function setRecording() {
+    isRecording = !isRecording;
+    chrome.send('setGcmInternalsRecording', [isRecording]);
+  }
+
+  /**
+   * Clear all the activity logs.
+   */
+  function clearLogs() {
+    chrome.send('getGcmInternalsInfo', [true]);
   }
 
   function initialize() {
-    chrome.send('getGcmInternalsInfo');
+    $('recording').disabled = true;
+    $('refresh').onclick = refreshAll;
+    $('recording').onclick = setRecording;
+    $('clear-logs').onclick = clearLogs;
+    chrome.send('getGcmInternalsInfo', [false]);
   }
 
   /**
    * Callback function accepting a dictionary of info items to be displayed.
    * @param {!Object} infos A dictionary of info items to be displayed.
    */
   function setGcmInternalsInfo(infos) {
+    isRecording = infos.isRecording;
+    if (isRecording)
+      $('recording').textContent = 'Stop Recording';
+    else
+      $('recording').textContent = 'Start Recording';
+    $('recording').disabled = false;
     if (infos.deviceInfo !== undefined) {
       displayDeviceInfo(infos.deviceInfo);
     }
+
+    removeAllChildNodes($('checkin-info'));
+    removeAllChildNodes($('register-info'));
+    removeAllChildNodes($('send-info'));
+    removeAllChildNodes($('receive-info'));
+    if (infos.checkinInfo !== undefined) {
+      addRows($('checkin-info'), infos.checkinInfo);
+    }
+    if (infos.registerInfo !== undefined) {
+      addRows($('register-info'), infos.registerInfo);
+    }
+    if (infos.sendInfo !== undefined) {
+      addRows($('send-info'), infos.sendInfo);
+    }
+    if (infos.receiveInfo !== undefined) {
+      addRows($('receive-info'), infos.receiveInfo);
+    }
   }
 
   // Return an object with all of the exports.
   return {
     initialize: initialize,
     setGcmInternalsInfo: setGcmInternalsInfo,
   };
 });
 
 document.addEventListener('DOMContentLoaded', gcmInternals.initialize);