[Offline Pages] Link the internals page with the offline model and request

chrome/browser/resources/offline_pages/offline_internals.js

 // Copyright 2016 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.
 
+/**
+ * @typedef {{
+ *   onlineUrl: string,
+ *   creationTime: number,
+ *   id: string,
+ *   namespace: string,
+ *   size: string,
+ *   filePath: string,
+ *   lastAccessTime: number,
+ *   accessCount: number
+ *  }}
+ */
+var OfflinePageItem;
+
+/**
+ * @typedef {{
+ *   status: string,
+ *   onlineUrl: string,
+ *   creationTime: number,
+ *   id: string,
+ *   namespace: string,
+ *   lastAttempt: number
+ * }}
+ */
+var SavePageRequest;
+
 cr.define('offlineInternals', function() {
   'use strict';
 
-  /**
-   * @typedef {{
-   *   onlineUrl: string,
-   *   creationTime: number,
-   *   status: number,
-   *   id: string,
-   *   namespace: string,
-   *   size: string,
-   *   filePath: string,
-   *   lastAccessTime: number,
-   *   accessCount: number
-   *  }}
-   */
-  var OfflinePageItem;
+  /** @type {Array<OfflinePageItem>} */
+  var currentStoredPagesData = null;
 
-  /**
-   * @typedef {{
-   *   status: string,
-   *   onlineUrl: string,
-   *   creationTime: number,
-   *   id: string,
-   *   namespace: string,
-   *   attemptCount: number
-   * }}
-   */
-  var SavePageRequest;
-
-  /**
-   * Clear the specified table.
-   * @param {string} tableId id of the table to clear.
-   */
-  function clearTable(tableId) {
-    $(tableId).textContent = '';
-  }
+  /** @type {Array<SavePageRequest>} */
+  var currentRequestQueueData = null;
 
   /**
    * Fill stored pages table.
-   * @param {HTMLElement} element A HTML element.
-   * @param {!Array<OfflinePageItem>} pages An array object representing
+   * @param {!Array<OfflinePageItem>} data An array object representing

[dpapad, 2016/06/09 23:36:30]

Can the array hold null/undefined values? If not then the annotation should be
as follows (here and elsewhere):

@param {!Array<!OfflinePageItem>}

    *     stored offline pages.
    */
-  function fillStoredPages(element, pages) {
-    for (var i = 0; i < pages.length; i++) {
+  function fillStoredPages(data) {
+    var element = $('stored-pages');
+    element.textContent = '';
+
+    for (var i = 0; i < data.length; i++) {
       var row = document.createElement('tr');
 
       var checkboxCell = document.createElement('td');
       var checkbox = document.createElement('input');
       checkbox.setAttribute('type', 'checkbox');
       checkbox.setAttribute('name', 'stored');
-      checkbox.setAttribute('value', pages[i].id);
+      checkbox.setAttribute('value', data[i].id);
 
       checkboxCell.appendChild(checkbox);
       row.appendChild(checkboxCell);
 
       var cell = document.createElement('td');
-      cell.textContent = pages[i].onlineUrl;
+      cell.textContent = data[i].onlineUrl;
       row.appendChild(cell);
 
       cell = document.createElement('td');
-      cell.textContent = pages[i].namespace;
+      cell.textContent = data[i].namespace;
       row.appendChild(cell);
 
       cell = document.createElement('td');
-      cell.textContent = pages[i].size;
+      cell.textContent = Math.round(data[i].size / 1024);
       row.appendChild(cell);
 
       element.appendChild(row);
     }
+    currentStoredPagesData = data;
   }
 
   /**
    * Fill requests table.
-   * @param {HTMLElement} element A HTML element.
-   * @param {!Array<SavePageRequest>} requests An array object representing
+   * @param {!Array<SavePageRequest>} data An array object representing
    *     the request queue.
    */
-  function fillRequestQueue(element, requests) {
-    for (var i = 0; i < requests.length; i++) {
+  function fillRequestQueue(data) {
+    var element = $('request-queue');
+    element.textContent = '';
+
+    for (var i = 0; i < data.length; i++) {

[dpapad, 2016/06/09 23:36:30]

Nit (optional): You can use forEach instead

data.forEach(function(request) {
  ...
  cell.textContent = request.onlineUrl;
  ... 
});

       var row = document.createElement('tr');
 
       var cell = document.createElement('td');
-      cell.textContent = requests[i].onlineUrl;
+      cell.textContent = data[i].onlineUrl;
       row.appendChild(cell);
 
       cell = document.createElement('td');
-      cell.textContent = new Date(requests[i].creationTime);
+      cell.textContent = new Date(data[i].creationTime);
       row.appendChild(cell);
 
       cell = document.createElement('td');
-      cell.textContent = requests[i].status;
+      cell.textContent = data[i].status;
       row.appendChild(cell);
 
       element.appendChild(row);
     }
+    currentRequestQueueData = data;
   }
 
   /**
    * Refresh all displayed information.
    */
   function refreshAll() {
-    cr.sendWithPromise('getOfflineInternalsInfo').then(setOfflineInternalsInfo);
+    cr.sendWithPromise('getStoredPagesInfo').then(fillStoredPages);
+    cr.sendWithPromise('getRequestQueueInfo').then(fillRequestQueue);
   }
 
   /**
    * Delete all pages in the offline store.
    */
   function deleteAllPages() {
     cr.sendWithPromise('deleteAllPages').then(pagesDeleted);
   }
 
   /**
    * Callback when pages are deleted.
-   * @param {string} deletePageStatus The status of delete page call.
+   * @param {string} status The status of the request.
    */
-  function pagesDeleted(deletePageStatus) {
-    // TODO(chili): decide what to do here. Perhaps a refresh of just
-    // the stored pages table?
+  function pagesDeleted(status) {
+    $('page-actions-info').textContent = status;
+    cr.sendWithPromise('getStoredPagesInfo').then(fillStoredPages);
   }
 
   /**
-   * Callback when information is loaded.
-   * @param {{AllPages: !Array<OfflinePageItem>,
-   *          Queue: !Array<SavePageRequest>}} info An object containing both
-   *     stored pages and request queue status.
+   * Helper function to JSON-escape and add quotes around a string.
+   * @param {string} strObj The obj to escape and add quotes around.
+   * @return {string} the escaped string.
    */
-  function setOfflineInternalsInfo(info) {
-    clearTable('stored-pages');
-    clearTable('request-queue');
-
-    fillStoredPages($('stored-pages'), info.AllPages);
-    fillRequestQueue($('request-queue'), info.Queue);
+  function escapeString(strObj) {
+    strObj.replace(/"/g, '""'); // CSV single quotes are encoded as "".
+    return '"' + strObj + '"'; // There can be commas in the string.
   }
 
   /**
+   * Downloads all the stored page and request queue information into a file.
+   */
+  function download() {
+    var csv = '';
+    // Create header & csv for stored pages.
+    if (currentStoredPagesData && currentStoredPagesData.length > 0) {
+      csv += 'Online URL,Namespace,Size,ID,File Path,Creation Time,' +
+          'Last Accessed Time,Access Count\n';
+      for (let obj of currentStoredPagesData) {
+        var objFieldArr = [
+            obj.onlineUrl,
+            obj.namespace,
+            obj.size,
+            obj.id,
+            obj.filePath,
+            new Date(obj.creationTime).toString(),
+            new Date(obj.lastAccessTime).toString(),
+            obj.accessCount];
+        objFieldArr = objFieldArr.map(escapeString);
+        csv += objFieldArr.join(',') + '\n';
+      }
+    }
+    csv += '\n';
+    // Create header & csv for request queue.
+    if (currentRequestQueueData && currentRequestQueueData.length > 0) {
+      csv += 'Online URL,Creation Time,Status,Namespace,Last Attempt Time,ID\n';
+
+      for (let obj of currentRequestQueueData) {
+        var objFieldArr = [
+          obj.onlineUrl,
+          new Date(obj.creationTime).toString(),
+          obj.status,
+          obj.namespace,
+          new Date(obj.lastAttempt).toString(),
+          obj.id];
+        objFieldArr = objFieldArr.map(escapeString);
+        csv += objFieldArr.join(',') + '\n';
+      }
+    }
+
+    var uriContent = 'data:text/csv,' + encodeURIComponent(csv);
+    window.open(uriContent, 'dump.csv');
+  }
+
+  /**
    * Delete selected pages from the offline store.
    */
   function deleteSelectedPages() {
     var checkboxes = document.getElementsByName('stored');
     var selectedIds = [];
-    for (var checkbox of checkboxes) {
-      if (checkbox.checked)
-        selectedIds.push(checkbox.value);
+
+    for (var i = 0; i < checkboxes.length; i++) {
+      if (checkboxes[i].checked) {
+        selectedIds.push(checkboxes[i].value);
+      }
     }
 
     cr.sendWithPromise('deleteSelectedPages', selectedIds).then(pagesDeleted);
   }
 
   function initialize() {
     $('clear-all').onclick = deleteAllPages;
     $('clear-selected').onclick = deleteSelectedPages;
     $('refresh').onclick = refreshAll;
+    $('download').onclick = download;
     refreshAll();
   }
 
   // Return an object with all of the exports.
   return {
     initialize: initialize,
   };
 });
 
 document.addEventListener('DOMContentLoaded', offlineInternals.initialize);