[Offline pages] Create offline internals page for Android

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';
+
+  var storedPagesAttributes = ['onlineUrl', 'namespace', 'size'];

[Dan Beam, 2016/05/26 00:54:39]

nit: FINAL_CONST_LIKE_THIS (i.e. STORED_PAGE_ATTRIBUTES)

[chili, 2016/05/27 01:36:59]

Done.

+  var queueAttributes = ['onlineUrl', 'creation time', 'status'];
+
+  /**
+   * Remove all the child nodes of the element.
+   * @param {HTMLElement} element A HTML element
+   */
+  function clearChildren(element) {
+    element.textContent = '';
+  }
+
+  /**
+   * Clear the specified table.
+   */
+  function clearTable(tableId) {
+    var element = $(tableId);
+    if (!element)
+      return;

[Dan Beam, 2016/05/26 00:54:39]

shouldn't this blow up because of programmer error when $(tableId) returns null?

[chili, 2016/05/27 01:36:59]

I've removed the checks.

Not sure what you mean by 'blow up'.  If we don't do the check, then javascript
should just silently log something in console and that'd be it, which is not
that much better than currently

We shouldn't 'blow up' and render the page unusable. There are a number of other
functions coming to the page that will be useful even if someone accidentally
deleted a table they shouldn't have.

+
+    clearChildren(element);
+  }
+
+  /**
+   * Fill stored pages table.
+   * @param {HTMLElement} element A HTML element
+   * @param {Object} data An array object representing stored offline pages
+   */
+  function fillStoredPages(element, data) {
+    if (!element) {

[Dan Beam, 2016/05/26 00:54:39]

nit: no curlies around 1-line conditionals

[Dan Beam, 2016/05/26 00:54:39]

when should this validly just return?

[chili, 2016/05/27 01:36:59]

Acknowledged.

[chili, 2016/05/27 01:36:59]

Done.

+      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 keyIndex = 0;
+          keyIndex < storedPagesAttributes.length;
+          keyIndex++) {

[Dan Beam, 2016/05/26 00:54:39]

i don't know if this runs on iOS (or if the linter would like this), but you
could do:

for (var storedPagesAttribute of storedPagesAttributes) {
  ...
  cell.textContent = data[i][storedPagesAttribute];
  ...
}

[chili, 2016/05/27 01:36:59]

offline stuff is only available on android. trying to see if the linter likes
it.

+        var cell = document.createElement('td');
+        cell.textContent = data[i][storedPagesAttributes[keyIndex]];
+        row.appendChild(cell);
+      }
+      element.appendChild(row);
+    }
+  }
+
+  /**
+   * Fill requests table.
+   * @param {HTMLElement} element A HTML element
+   * @param {Object} data An array object representing the request queue

[Dan Beam, 2016/05/26 00:54:39]

Object -> !Array

[chili, 2016/05/27 01:36:59]

Done.

+   */
+  function fillRequestQueue(element, data) {
+    if (!element) {
+      return;
+    }
+    for (var i = 0; i < data.length; i++) {
+      var row = document.createElement('tr');
+
+      for (var keyIndex = 0;
+          keyIndex < queueAttributes.length;
+          keyIndex++) {
+        var cell = document.createElement('td');
+        cell.textContent = data[i][queueAttributes[keyIndex]];
+        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.
+   * @param {Object} info An object containing both stored pages and

[Dan Beam, 2016/05/26 00:54:39]

it'd be useful to type this more strongly, i.e.

  @param {{AllPages: !Array, Queue: !Array}} info

[chili, 2016/05/27 01:36:59]

Done.

+   *     request queue status
+   */
+  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());

[Dan Beam, 2016/05/26 00:54:39]

$ is not jQuery

[chili, 2016/05/27 01:36:59]

Darn :(

+    });
+    chrome.send('deleteSelectedPages', [selectedIds]);
+  }
+
+  /**
+   * Initializing everything.

[Dan Beam, 2016/05/26 00:54:39]

is this comment useful?

[chili, 2016/05/27 01:36:59]

Done.

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