[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 OfflinePage;
+
+/**
+ * @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<OfflinePage>} */
+  var offlinePages = null;

[Dan Beam, 2016/06/14 00:07:50]

why is this null and not []?

[chili, 2016/06/14 04:45:21]

Done.

 
-  /**
-   * @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 savePageRequests = null;

[Dan Beam, 2016/06/14 00:07:50]

why not []?

[chili, 2016/06/14 04:45:21]

Done.

 
   /**
    * Fill stored pages table.
-   * @param {HTMLElement} element A HTML element.
-   * @param {!Array<OfflinePageItem>} pages An array object representing
+   * @param {!Array<OfflinePage>} pages An array object representing
    *     stored offline pages.
    */
-  function fillStoredPages(element, pages) {
+  function fillStoredPages(pages) {
+    var storedPagesTable = $('stored-pages');
+    storedPagesTable.textContent = '';
+
     for (var i = 0; i < pages.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);
 
       checkboxCell.appendChild(checkbox);
       row.appendChild(checkboxCell);
 
       var cell = document.createElement('td');
       cell.textContent = pages[i].onlineUrl;
       row.appendChild(cell);
 
       cell = document.createElement('td');
       cell.textContent = pages[i].namespace;
       row.appendChild(cell);
 
       cell = document.createElement('td');
-      cell.textContent = pages[i].size;
+      cell.textContent = Math.round(pages[i].size / 1024);
       row.appendChild(cell);
 
-      element.appendChild(row);
+      storedPagesTable.appendChild(row);
     }
+    offlinePages = pages;
   }
 
   /**
    * Fill requests table.
-   * @param {HTMLElement} element A HTML element.
    * @param {!Array<SavePageRequest>} requests An array object representing
    *     the request queue.
    */
-  function fillRequestQueue(element, requests) {
+  function fillRequestQueue(requests) {
+    var requestQueueTable = $('request-queue');
+    requestQueueTable.textContent = '';
+
     for (var i = 0; i < requests.length; i++) {
       var row = document.createElement('tr');
 
       var cell = document.createElement('td');
       cell.textContent = requests[i].onlineUrl;
       row.appendChild(cell);
 
       cell = document.createElement('td');
       cell.textContent = new Date(requests[i].creationTime);
       row.appendChild(cell);
 
       cell = document.createElement('td');
       cell.textContent = requests[i].status;
       row.appendChild(cell);
 
-      element.appendChild(row);
+      requestQueueTable.appendChild(row);
     }
+    savePageRequests = requests;
   }
 
   /**
    * 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) {
+    // CSV single quotes are encoded as "". There can also be commas.
+    return '"' + strObj.replace(/"/g, '""') + '"';

[Dan Beam, 2016/06/14 00:07:50]

what if there's a comma in the string?

I am mentioning this because I saw it in csv_writer.cc's implementation and
tests

[chili, 2016/06/14 04:45:21]

That is why we wrap the entire string with quotes and escape any quotes the
string may already have...

the csv_writer only puts quotes if there are commas in the string, which is more
efficient, but this is no less correct

[Dan Beam, 2016/06/14 15:43:36]

ah, ok, cool

   }
 
   /**
+   * Downloads all the stored page and request queue information into a file.
+   * TODO(chili): Create a CSV writer that can abstract out the line joining.
+   */
+  function download() {
+    var csv = '';
+    // Create header & csv for stored pages.
+    if (offlinePages && offlinePages.length > 0) {
+      csv += 'Online URL,Namespace,Size,ID,File Path,Creation Time,' +
+          'Last Accessed Time,Access Count\n';
+      for (let page of offlinePages) {
+        var csvFields = [
+            page.onlineUrl,
+            page.namespace,
+            page.size,
+            page.id,
+            page.filePath,
+            new Date(page.creationTime).toString(),
+            new Date(page.lastAccessTime).toString(),
+            page.accessCount];
+        csvFields = csvFields.map(escapeString);
+        csv += csvFields.join(',') + '\n';
+      }
+    }
+    csv += '\n';
+    // Create header & csv for request queue.
+    if (savePageRequests && savePageRequests.length > 0) {
+      csv += 'Online URL,Creation Time,Status,Namespace,Last Attempt Time,ID\n';
+
+      for (let request of savePageRequests) {
+        var csvFields = [
+          request.onlineUrl,
+          new Date(request.creationTime).toString(),
+          request.status,
+          request.namespace,
+          new Date(request.lastAttempt).toString(),
+          request.id];
+        csvFields = csvFields.map(escapeString);
+        csv += csvFields.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);