resources/chromeos/drive_internals.js

// Copyright (c) 2012 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.

/**
 * Converts a number in bytes to a string in megabytes split by comma into
 * three digit block.
 * @param {number} bytes The number in bytes.
 * @return {string} Formatted string in megabytes.
 */
function ToMegaByteString(bytes) {
  var mb = Math.floor(bytes / (1 << 20));
  return mb.toString().replace(
      /\d+?(?=(\d{3})+$)/g,  // Digit sequence (\d+) followed (?=) by 3n digits.
      function(three_digit_block) { return three_digit_block + ','; }
  );
}

/**
 * Updates the Drive related Flags section.
 * @param {Array} flags List of dictionaries describing flags.
 */
function updateDriveRelatedFlags(flags) {
  var ul = $('drive-related-flags');
  updateKeyValueList(ul, flags);
}

/**
 * Updates the Drive related Preferences section.
 * @param {Array} preferences List of dictionaries describing preferences.
 */
function updateDriveRelatedPreferences(preferences) {
  var ul = $('drive-related-preferences');
  updateKeyValueList(ul, preferences);
}

/**
 * Updates the Connection Status section.
 * @param {Object} connStatus Dictionary containing connection status.
 */
function updateConnectionStatus(connStatus) {
  $('connection-status').textContent = connStatus['status'];
  $('has-refresh-token').textContent = connStatus['has-refresh-token'];
  $('has-access-token').textContent = connStatus['has-access-token'];
}

/**
 * Updates the GCache Contents section.
 * @param {Array} gcacheContents List of dictionaries describing metadata
 * of files and directories under the GCache directory.
 * @param {Object} gcacheSummary Dictionary of summary of GCache.
 */
function updateGCacheContents(gcacheContents, gcacheSummary) {
  var tbody = $('gcache-contents');
  for (var i = 0; i < gcacheContents.length; i++) {
    var entry = gcacheContents[i];
    var tr = document.createElement('tr');

    // Add some suffix based on the type.
    var path = entry.path;
    if (entry.is_directory)
      path += '/';
    else if (entry.is_symbolic_link)
      path += '@';

    tr.appendChild(createElementFromText('td', path));
    tr.appendChild(createElementFromText('td', entry.size));
    tr.appendChild(createElementFromText('td', entry.last_modified));
    tr.appendChild(createElementFromText('td', entry.permission));
    tbody.appendChild(tr);
  }

  $('gcache-summary-total-size').textContent =
      ToMegaByteString(gcacheSummary['total_size']);
}

/**
 * Updates the File System Contents section. The function is called from the
 * C++ side repeatedly with contents of a directory.
 * @param {string} directoryContentsAsText Pre-formatted string representation
 * of contents a directory in the file system.
 */
function updateFileSystemContents(directoryContentsAsText) {
  var div = $('file-system-contents');
  div.appendChild(createElementFromText('pre', directoryContentsAsText));
}

/**
 * Updates the Cache Contents section.
 * @param {Object} cacheEntry Dictionary describing a cache entry.
 * The function is called from the C++ side repeatedly.
 */
function updateCacheContents(cacheEntry) {
  var tr = document.createElement('tr');
  tr.appendChild(createElementFromText('td', cacheEntry.local_id));
  tr.appendChild(createElementFromText('td', cacheEntry.md5));
  tr.appendChild(createElementFromText('td', cacheEntry.is_present));
  tr.appendChild(createElementFromText('td', cacheEntry.is_pinned));
  tr.appendChild(createElementFromText('td', cacheEntry.is_dirty));

  $('cache-contents').appendChild(tr);
}

/**
 * Updates the Local Storage summary.
 * @param {Object} localStorageSummary Dictionary describing the status of local
 * stogage.
 */
function updateLocalStorageUsage(localStorageSummary) {
  var freeSpaceInMB = ToMegaByteString(localStorageSummary.free_space);
  $('local-storage-freespace').innerText = freeSpaceInMB;
}

/**
 * Updates the summary about in-flight operations.
 * @param {Array} inFlightOperations List of dictionaries describing the status
 * of in-flight operations.
 */
function updateInFlightOperations(inFlightOperations) {
  var container = $('in-flight-operations-contents');

  // Reset the table. Remove children in reverse order. Otherwides each
  // existingNodes[i] changes as a side effect of removeChild.
  var existingNodes = container.childNodes;
  for (var i = existingNodes.length - 1; i >= 0; i--) {
    var node = existingNodes[i];
    if (node.className == 'in-flight-operation')
      container.removeChild(node);
  }

  // Add in-flight operations.
  for (var i = 0; i < inFlightOperations.length; i++) {
    var operation = inFlightOperations[i];
    var tr = document.createElement('tr');
    tr.className = 'in-flight-operation';
    tr.appendChild(createElementFromText('td', operation.id));
    tr.appendChild(createElementFromText('td', operation.type));
    tr.appendChild(createElementFromText('td', operation.file_path));
    tr.appendChild(createElementFromText('td', operation.state));
    var progress = operation.progress_current + '/' + operation.progress_total;
    if (operation.progress_total > 0) {
      var percent = operation.progress_current / operation.progress_total * 100;
      progress += ' (' + Math.round(percent) + '%)';
    }
    tr.appendChild(createElementFromText('td', progress));

    container.appendChild(tr);
  }
}

/**
 * Updates the summary about about resource.
 * @param {Object} aboutResource Dictionary describing about resource.
 */
function updateAboutResource(aboutResource) {
  var quotaTotalInMb = ToMegaByteString(aboutResource['account-quota-total']);
  var quotaUsedInMb = ToMegaByteString(aboutResource['account-quota-used']);

  $('account-quota-info').textContent =
      quotaUsedInMb + ' / ' + quotaTotalInMb + ' (MB)';
  $('account-largest-changestamp-remote').textContent =
      aboutResource['account-largest-changestamp-remote'];
  $('root-resource-id').textContent = aboutResource['root-resource-id'];
}

/**
 * Updates the summary about app list.
 * @param {Object} appList Dictionary describing app list.
 */
function updateAppList(appList) {
  $('app-list-etag').textContent = appList['etag'];

  var itemContainer = $('app-list-items');
  for (var i = 0; i < appList['items'].length; i++) {
    var app = appList['items'][i];
    var tr = document.createElement('tr');
    tr.className = 'installed-app';
    tr.appendChild(createElementFromText('td', app.name));
    tr.appendChild(createElementFromText('td', app.application_id));
    tr.appendChild(createElementFromText('td', app.object_type));
    tr.appendChild(createElementFromText('td', app.supports_create));

    itemContainer.appendChild(tr);
  }
}

/**
 * Updates the local cache information about account metadata.
 * @param {Object} localMetadata Dictionary describing account metadata.
 */
function updateLocalMetadata(localMetadata) {
  var changestamp = localMetadata['account-largest-changestamp-local'];

  $('account-largest-changestamp-local').textContent =
      changestamp.toString() +
      (changestamp > 0 ? ' (loaded)' : ' (not loaded)') +
      (localMetadata['account-metadata-refreshing'] ? ' (refreshing)' : '');
}

/**
 * Updates the summary about delta update status.
 * @param {Object} deltaUpdateStatus Dictionary describing delta update status.
 */
function updateDeltaUpdateStatus(deltaUpdateStatus) {
  $('push-notification-enabled').textContent =
        deltaUpdateStatus['push-notification-enabled'];
  $('last-update-check-time').textContent =
        deltaUpdateStatus['last-update-check-time'];
  $('last-update-check-error').textContent =
        deltaUpdateStatus['last-update-check-error'];
}

/**
 * Updates the event log section.
 * @param {Array} log Array of events.
 */
function updateEventLog(log) {
  var ul = $('event-log');
  updateKeyValueList(ul, log);
}

/**
 * Creates an element named |elementName| containing the content |text|.
 * @param {string} elementName Name of the new element to be created.
 * @param {string} text Text to be contained in the new element.
 * @return {HTMLElement} The newly created HTML element.
 */
function createElementFromText(elementName, text) {
  var element = document.createElement(elementName);
  element.appendChild(document.createTextNode(text));
  return element;
}

/**
 * Updates <ul> element with the given key-value list.
 * @param {HTMLElement} ul <ul> element to be modified.
 * @param {Array} list List of dictionaries containing 'key', 'value' (optional)
 * and 'class' (optional). For each element <li> element with specified class is
 * created.
 */
function updateKeyValueList(ul, list) {
  for (var i = 0; i < list.length; i++) {
    var item = list[i];
    var text = item.key;
    if (item.value != '')
      text += ': ' + item.value;

    var li = createElementFromText('li', text);
    if (item.class)
      li.classList.add(item.class);
    ul.appendChild(li);
  }
}

/**
 * Updates the text next to the 'reload' button to update the status.
 * @param {boolean} success whether or not reloading has succeeded.
 */
function updateReloadStatus(success) {
  $('reload-status-text').textContent = (success ? 'success' : 'failed');
}

document.addEventListener('DOMContentLoaded', function() {
  chrome.send('pageLoaded');

  // Update the table of contents.
  var toc = $('toc');
  var sections = document.getElementsByTagName('h2');
  for (var i = 0; i < sections.length; i++) {
    var section = sections[i];
    var a = createElementFromText('a', section.textContent);
    a.href = '#' + section.id;
    var li = document.createElement('li');
    li.appendChild(a);
    toc.appendChild(li);
  }

  $('button-clear-access-token').addEventListener('click', function() {
    chrome.send('clearAccessToken');
  });

  $('button-clear-refresh-token').addEventListener('click', function() {
    chrome.send('clearRefreshToken');
  });

  $('button-reload-drive-filesystem').addEventListener('click', function() {
    $('reload-status-text').textContent = 'reloading...';
    chrome.send('reloadDriveFileSystem');
  });

  $('button-show-file-entries').addEventListener('click', function() {
    var button = $('button-show-file-entries');
    button.parentNode.removeChild(button);
    chrome.send('listFileEntries');
  });

  window.setInterval(function() {
    chrome.send('periodicUpdate');
  }, 1000);
});