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

chrome/browser/resources/offline_pages/offline_internals.js

Index: chrome/browser/resources/offline_pages/offline_internals.js
diff --git a/chrome/browser/resources/offline_pages/offline_internals.js b/chrome/browser/resources/offline_pages/offline_internals.js
index d5fb091e9a3315cc5aaf66c1d61079b5cfcc50bb..fd790023212bf22d2d3e4a613806d7edd0d57c45 100644
--- a/chrome/browser/resources/offline_pages/offline_internals.js
+++ b/chrome/browser/resources/offline_pages/offline_internals.js
@@ -2,51 +2,50 @@
 // 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;
-
-  /**
-   * @typedef {{
-   *   status: string,
-   *   onlineUrl: string,
-   *   creationTime: number,
-   *   id: string,
-   *   namespace: string,
-   *   attemptCount: number
-   * }}
-   */
-  var SavePageRequest;
+  /** @type {?Array<OfflinePage>} */

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

this should be !Array<!OfflinePage>

[chili, 2016/06/14 17:25:43]

Comment from dpapad@ in the previous CL mentioned that closure defaults types
inside arrays/collections to not null, which means the ! is not needed.

[Dan Beam, 2016/06/14 17:53:23]

that's fine, but ? means "or null", which these variable no longer are

+  var offlinePages = [];
 
-  /**
-   * Clear the specified table.
-   * @param {string} tableId id of the table to clear.
-   */
-  function clearTable(tableId) {
-    $(tableId).textContent = '';
-  }
+  /** @type {?Array<SavePageRequest>} */

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

same here, !Array<!SavePageRequest>

[chili, 2016/06/14 17:25:43]

same as above

+  var savePageRequests = [];
 
   /**
    * 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');
 
@@ -68,20 +67,23 @@ cr.define('offlineInternals', function() {
       row.appendChild(cell);
 
       cell = document.createElement('td');
-      cell.textContent = pages[i].size;
+      cell.textContent = Math.round(pages[i].size / 1024);

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

should this be using ui::FormatBytes()?

https://cs.chromium.org/chromium/src/ui/base/text/bytes_formatting.h?q=base+b...

[chili, 2016/06/14 17:25:43]

I didn't because format byte would return a string.  Though I want to display
the size in kb, I still want the download to be the full number.  If this is a
big problem, I'll just revert the byte -> kb

       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');
 
@@ -97,15 +99,17 @@ cr.define('offlineInternals', function() {
       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);
   }
 
   /**
@@ -117,25 +121,34 @@ cr.define('offlineInternals', function() {
 
   /**
    * Callback when pages are deleted.
-   * @param {string} deletePageStatus The status of delete page call.
+   * @param {string} status The status of the request.
+   */
+  function pagesDeleted(status) {
+    $('page-actions-info').textContent = status;
+    cr.sendWithPromise('getStoredPagesInfo').then(fillStoredPages);
+  }
+
+  /**
+   * 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 pagesDeleted(deletePageStatus) {
-    // TODO(chili): decide what to do here. Perhaps a refresh of just
-    // the stored pages table?
+  function escapeString(strObj) {
+    // CSV single quotes are encoded as "". There can also be commas.
+    return '"' + strObj.replace(/"/g, '""') + '"';
   }
 
   /**
-   * Callback when information is loaded.
-   * @param {{AllPages: !Array<OfflinePageItem>,
-   *          Queue: !Array<SavePageRequest>}} info An object containing both
-   *     stored pages and request queue status.
+   * 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 setOfflineInternalsInfo(info) {
-    clearTable('stored-pages');
-    clearTable('request-queue');
+  function download() {
+    var json = JSON.stringify({
+        offlinePages: offlinePages,
+        savePageRequests: savePageRequests});
 
-    fillStoredPages($('stored-pages'), info.AllPages);
-    fillRequestQueue($('request-queue'), info.Queue);
+    var uriContent = 'data:text/json,' + encodeURIComponent(json);

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

application/json?

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

using encodeURIComponent seems a little dubious...

[chili, 2016/06/14 17:25:43]

Done.

[chili, 2016/06/14 17:25:43]

Done.

[dewittj, 2016/06/14 17:32:54]

From RFC2397 for data URLs:
 Without ";base64", the data (as a sequence of
   octets) is represented using ASCII encoding for octets inside the
   range of safe URL characters and using the standard %xx hex encoding
   of URLs for octets outside that range.

So you still need to encode the json.  I think that encodeURIComponent is the
right function here.

Dan, what is dubious about that?

[chili, 2016/06/14 21:42:12]

I'm putting this back, since we're using data uri, and I'd rather the URL we
generate be valid than fail for some odd reason.

+    window.open(uriContent, 'dump.json');
   }
 
   /**
@@ -144,9 +157,10 @@ cr.define('offlineInternals', function() {
   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);
@@ -156,6 +170,7 @@ cr.define('offlineInternals', function() {
     $('clear-all').onclick = deleteAllPages;
     $('clear-selected').onclick = deleteSelectedPages;
     $('refresh').onclick = refreshAll;
+    $('download').onclick = download;
     refreshAll();
   }