[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.
 
 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;
 
   /**
    * @typedef {{
    *   status: string,
    *   onlineUrl: string,
    *   creationTime: number,
    *   id: string,
    *   namespace: string,
    *   attemptCount: number
    * }}
    */
   var SavePageRequest;
 
+  var currentStoredPagesData = null;

[dewittj, 2016/06/03 23:12:05]

needs /** @type {...} */

[chili, 2016/06/09 22:29:16]

Done.

+  var currentRequestQueueData = null;
+
   /**
    * Clear the specified table.
-   * @param {string} tableId id of the table to clear.
+   * @param {string} tableId ID of the table to clear.
    */
   function clearTable(tableId) {

[dewittj, 2016/06/03 23:12:05]

nit: make this take an element, then pass it in;  this way you are searching the
document by ID only once in each function that clears a table.

[chili, 2016/06/09 22:29:16]

Done.

     $(tableId).textContent = '';
   }
 
   /**
    * Fill stored pages table.
-   * @param {HTMLElement} element A HTML element.
-   * @param {!Array<OfflinePageItem>} data An array object representing
+   * @param {!Array<OfflinePageItem} data An array object representing

[dewittj, 2016/06/03 23:12:06]

Missing ">"

[chili, 2016/06/09 22:29:16]

Done.

    *     stored offline pages.
    */
-  function fillStoredPages(element, data) {
+  function fillStoredPages(data) {
+    clearTable('stored-pages');
+    var element = $('stored-pages');
+
     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', data[i].id);
 
       checkboxCell.appendChild(checkbox);
       row.appendChild(checkboxCell);
 
       var cell = document.createElement('td');
       cell.textContent = data[i].onlineUrl;
       row.appendChild(cell);
 
       cell = document.createElement('td');
       cell.textContent = data[i].namespace;
       row.appendChild(cell);
 
       cell = document.createElement('td');
-      cell.textContent = data[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>} data An array object representing
    *     the request queue.
    */
-  function fillRequestQueue(element, data) {
+  function fillRequestQueue(data) {
+    clearTable('request-queue');
+    var element = $('request-queue');
+
     for (var i = 0; i < data.length; i++) {
       var row = document.createElement('tr');
 
       var cell = document.createElement('td');
       cell.textContent = data[i].onlineUrl;
       row.appendChild(cell);
 
       cell = document.createElement('td');
       cell.textContent = new Date(data[i].creationTime);
       row.appendChild(cell);
 
       cell = document.createElement('td');
       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) {
+    $('random-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 add quotes around a string.
+   * @param {string} strObj The obj to add quotes around.

[dewittj, 2016/06/03 23:12:05]

@return {string} the escaped string

[chili, 2016/06/09 22:29:16]

Done.

    */
-  function setOfflineInternalsInfo(info) {
-    clearTable('stored-pages');
-    clearTable('request-queue');
-
-    fillStoredPages($('stored-pages'), info.AllPages);
-    fillRequestQueue($('request-queue'), info.Queue);
+  function addQuotes(strObj) {

[dewittj, 2016/06/03 23:12:06]

need to escape backslashes and quotes in the incoming string here.

[chili, 2016/06/09 22:29:16]

backslashes don't need to be escaped.  Added escaping for quotes

+    return '"' + strObj + '"';
   }
 
   /**
+   * 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.lastAccessedTime).toString(),
+            obj.accessCount];
+        objFieldArr = objFieldArr.map(addQuotes);
+        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(addQuotes);
+        csv += objFieldArr.join(',') + '\n';
+      }
+    }
+
+    var uriContent = 'data:text/csv,' + encodeURIComponent(csv);
+    window.open(uriContent, 'dump.csv');

[dewittj, 2016/06/03 23:12:06]

Does this open a window, or does it cause a download?

[chili, 2016/06/09 22:29:16]

This will open a window that'll ask you to download.  Unfortunately, while it's
named 'dump.csv', the file downloaded will be download.csv.  According to an old
stackoverflow thread, chrome seemed to have lost ability to obey default file
download names

clicking 'open' on the download will display csv in tabular format

+  }
+
+  /**
    * 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);
     }
 
     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);