[Offline pages] Create offline internals page for Android

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
new file mode 100644
index 0000000000000000000000000000000000000000..2aeb6ac036e5cfbf4e26df595b70f59ea844332a
--- /dev/null
+++ b/chrome/browser/resources/offline_pages/offline_internals.js
@@ -0,0 +1,139 @@
+// 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';
+
+  var storedPagesAttributes = ['onlineUrl', 'namespace', 'size'];
+  var queueAttributes = ['onlineUrl', 'creation time', 'status'];
+
+  /**
+   * Remove all the child nodes of the element.
+   * @param {HTMLElement} element A HTML element

[dewittj, 2016/05/25 20:08:45]

Is this being compiled by closure compiler?  I recall hearing that that was the
case a while ago.  If so, please annotate all functions with @param and @return
where possible.

[chili, 2016/05/25 20:22:55]

Done.

+   */
+  function clearChildren(element) {
+    element.textContent = '';
+  }
+
+  /**
+   * Clear the specified table.
+   */
+  function clearTable(tableId) {
+    var element = $(tableId);
+    if (!element)
+      return;
+
+    clearChildren(element);
+  }
+
+  /**
+   * Fill stored pages table.
+   */
+  function fillStoredPages(element, data) {
+    if (!element) {
+      return;
+    }
+    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);
+
+      for (var key in storedPagesAttributes) {
+        var cell = document.createElement('td');
+        cell.textContent = data[i][key];
+        row.appendChild(cell);
+      }
+      element.appendChild(row);
+    }
+  }
+
+  /**
+   * Fill requests table.
+   */
+  function fillRequestQueue(element, data) {
+    if (!element) {
+      return;
+    }
+    for (var i = 0; i < data.length; i++) {
+      var row = document.createElement('tr');
+
+      for (var key in queueAttributes) {

[dewittj, 2016/05/25 20:08:44]

I don't like using var..in loops for arrays, since the key will be a numeric
index, right?  Clearer to use for (var i = 0; i < foo...

[chili, 2016/05/25 20:22:55]

Data is actually of type List<Map<String, Object>>, so 'key' is not numeric, but
the string key value to the map

if we change to for (var j = 0; j < foo...), then we would have cell.textContent
= data[i][queueAttributes[j]], which is more confusing I think.

If you still prefer an explicit for loop, I can change it

[dewittj, 2016/05/25 20:30:13]

What I'm trying to say is that you already should be doing
data[i][queueAttributes[key]] to get the correct behavior.  I ran this code in
the console:

var queueAttributes = ['onlineUrl', 'creation time', 'status']; for (var k in
queueAttributes) { console.log(k); }
0
1
2

Not only is k numeric, but it also includes other things that come along on
Array.prototype (so should also test for hasOwnProperty)

Am I misunderstanding something?

[chili, 2016/05/25 20:52:18]

Ah. I misunderstood your comment.  Yes, I overlooked the fact that for-in loops
in javascript iterate over the enumerable properties of Array (which end up
being its index, and also in non-deterministic order >"< ugh javascript).

Fixed now.  Thanks for catching this!

+        var cell = document.createElement('td');
+        cell.textContent = data[i][key];
+        row.appendChild(cell);
+      }
+      element.appendChild(row);
+    }
+  }
+
+  /**
+   * Refresh all displayed information.
+   */
+  function refreshAll() {
+    chrome.send('getOfflineInternalsInfo');
+  }
+
+  /**
+   * Delete all pages in the offline store.
+   */
+  function deleteAllPages() {
+    chrome.send('deleteAllPages');
+  }
+
+  /**
+   * Callback when pages are deleted.
+   */
+  function pagesDeleted() {
+    // TODO(chili): decide what to do here. Perhaps a refresh of just
+    // the stored pages table?
+  }
+
+  /**
+   * Callback when information is loaded.
+   */
+  function setOfflineInternalsInfo(info) {
+    clearTable('stored-pages');
+    clearTable('request-queue');
+
+    fillStoredPages($('stored-pages'), info.AllPages);
+    fillRequestQueue($('request-queue'), info.Queue);
+  }
+
+  /**
+   * Delete selected pages from the offline store.
+   */
+  function deleteSelectedPages() {
+    var selectedIds = new Array();
+    $('input:checkbox[name=stored]:checked').each(function() {
+      selectedIds.push($(this).val());
+    });
+    chrome.send('deleteSelectedPages', [selectedIds]);
+  }
+
+  /**
+   * Initializing everything.
+   */
+  function initialize() {
+    $('clear-all').onclick = deleteAllPages;
+    $('clear-selected').onClick = deleteSelectedPages;
+    $('refresh').onclick = refreshAll;
+    chrome.send('getOfflineInternalsInfo');
+  }
+
+  // Return an object with all of the exports.
+  return {
+    initialize: initialize,
+    setOfflineInternalsInfo: setOfflineInternalsInfo,
+    pagesDeleted: pagesDeleted
+  };
+});
+
+document.addEventListener('DOMContentLoaded', offlineInternals.initialize);