Run clang-format under c/b/r/sync_file_system_internals

This step was intentionally skipped in previous CL that migrated
this UI to JS modules to make reviewing easier.

Fixed: 1154192
Change-Id: I505e3960bcb5a86a8de11b548b08834ce6fd1f77
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2567462
Commit-Queue: John Lee <johntlee@chromium.org>
Auto-Submit: dpapad <dpapad@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#833407}

chrome/browser/resources/sync_file_system_internals/dump_database.js

@@ -10,72 +10,72 @@ import {sendWithPromise} from 'chrome://resources/js/cr.m.js';
 import {$} from 'chrome://resources/js/util.m.js';
 import {createElementFromText} from './utils.js';
 
-  /**
-   * Get the database dump.
-   */
-  function refreshDatabaseDump() {
-    sendWithPromise('getDatabaseDump').then(onGetDatabaseDump);
-  }
-
-  /**
-   * Creates a table by filling |header| and |body|.
-   * @param {!HTMLElement} div The outer container of the table to be
-   *     renderered.
-   * @param {!HTMLElement} header The table header element to be fillied by
-   *     this function.
-   * @param {!HTMLElement} body The table body element to be filled by this
-   *     function.
-   * @param {Array} databaseDump List of dictionaries for the database dump.
-   *     The first element must have metadata of the entry.
-   *     The remaining elements must be dictionaries for the database dump,
-   *     which can be iterated using the 'keys' fields given by the first
-   *     element.
-   */
-  function createDatabaseDumpTable(div, header, body, databaseDump) {
-    const metadata = databaseDump.shift();
-    div.appendChild(createElementFromText('h3', metadata['title']));
+/**
+ * Get the database dump.
+ */
+function refreshDatabaseDump() {
+  sendWithPromise('getDatabaseDump').then(onGetDatabaseDump);
+}
 
-    let tr = document.createElement('tr');
-    for (let i = 0; i < metadata.keys.length; ++i) {
-      tr.appendChild(createElementFromText('td', metadata.keys[i]));
-    }
-    header.appendChild(tr);
+/**
+ * Creates a table by filling |header| and |body|.
+ * @param {!HTMLElement} div The outer container of the table to be
+ *     renderered.
+ * @param {!HTMLElement} header The table header element to be fillied by
+ *     this function.
+ * @param {!HTMLElement} body The table body element to be filled by this
+ *     function.
+ * @param {Array} databaseDump List of dictionaries for the database dump.
+ *     The first element must have metadata of the entry.
+ *     The remaining elements must be dictionaries for the database dump,
+ *     which can be iterated using the 'keys' fields given by the first
+ *     element.
+ */
+function createDatabaseDumpTable(div, header, body, databaseDump) {
+  const metadata = databaseDump.shift();
+  div.appendChild(createElementFromText('h3', metadata['title']));
 
-    for (let i = 0; i < databaseDump.length; i++) {
-      const entry = databaseDump[i];
-      tr = document.createElement('tr');
-      for (let k = 0; k < metadata.keys.length; ++k) {
-        tr.appendChild(createElementFromText('td', entry[metadata.keys[k]]));
-      }
-      body.appendChild(tr);
-    }
+  let tr = document.createElement('tr');
+  for (let i = 0; i < metadata.keys.length; ++i) {
+    tr.appendChild(createElementFromText('td', metadata.keys[i]));
   }
+  header.appendChild(tr);
 
-  /**
-   * Handles callback from onGetDatabaseDump.
-   * @param {Array} databaseDump List of lists for the database dump.
-   */
-  function onGetDatabaseDump(databaseDump) {
-    const placeholder = $('dump-database-placeholder');
-    placeholder.innerHTML = trustedTypes.emptyHTML;
-    for (let i = 0; i < databaseDump.length; ++i) {
-      const div = /** @type {!HTMLElement} */ (document.createElement('div'));
-      const table = document.createElement('table');
-      const header =
-          /** @type {!HTMLElement} */ (document.createElement('thead'));
-      const body =
-          /** @type {!HTMLElement} */ (document.createElement('tbody'));
-      createDatabaseDumpTable(div, header, body, databaseDump[i]);
-      table.appendChild(header);
-      table.appendChild(body);
-      div.appendChild(table);
-      placeholder.appendChild(div);
+  for (let i = 0; i < databaseDump.length; i++) {
+    const entry = databaseDump[i];
+    tr = document.createElement('tr');
+    for (let k = 0; k < metadata.keys.length; ++k) {
+      tr.appendChild(createElementFromText('td', entry[metadata.keys[k]]));
     }
+    body.appendChild(tr);
   }
+}
 
-  function main() {
-    refreshDatabaseDump();
-    $('refresh-database-dump').addEventListener('click', refreshDatabaseDump);
+/**
+ * Handles callback from onGetDatabaseDump.
+ * @param {Array} databaseDump List of lists for the database dump.
+ */
+function onGetDatabaseDump(databaseDump) {
+  const placeholder = $('dump-database-placeholder');
+  placeholder.innerHTML = trustedTypes.emptyHTML;
+  for (let i = 0; i < databaseDump.length; ++i) {
+    const div = /** @type {!HTMLElement} */ (document.createElement('div'));
+    const table = document.createElement('table');
+    const header =
+        /** @type {!HTMLElement} */ (document.createElement('thead'));
+    const body =
+        /** @type {!HTMLElement} */ (document.createElement('tbody'));
+    createDatabaseDumpTable(div, header, body, databaseDump[i]);
+    table.appendChild(header);
+    table.appendChild(body);
+    div.appendChild(table);
+    placeholder.appendChild(div);
   }
+}
+
+function main() {
+  refreshDatabaseDump();
+  $('refresh-database-dump').addEventListener('click', refreshDatabaseDump);
+}
 
-  document.addEventListener('DOMContentLoaded', main);
+document.addEventListener('DOMContentLoaded', main);

chrome/browser/resources/sync_file_system_internals/extension_statuses.js

@@ -10,40 +10,40 @@ import {sendWithPromise} from 'chrome://resources/js/cr.m.js';
 import {$} from 'chrome://resources/js/util.m.js';
 import {createElementFromText} from './utils.js';
 
-  /**
-   * Get initial map of extension statuses (pending batch sync, enabled and
-   * disabled).
-   */
-  function refreshExtensionStatuses() {
-    sendWithPromise('getExtensionStatuses').then(onGetExtensionStatuses);
-  }
+/**
+ * Get initial map of extension statuses (pending batch sync, enabled and
+ * disabled).
+ */
+function refreshExtensionStatuses() {
+  sendWithPromise('getExtensionStatuses').then(onGetExtensionStatuses);
+}
 
-  /**
-   * Handles callback from onGetExtensionStatuses.
-   * @param {!Array<!{
-   *   extensionName: string,
-   *   extensionID: string,
-   *   status: string,
-   * }>} extensionStatuses
-   */
-  function onGetExtensionStatuses(extensionStatuses) {
-    const itemContainer = $('extension-entries');
-    itemContainer.textContent = '';
+/**
+ * Handles callback from onGetExtensionStatuses.
+ * @param {!Array<!{
+ *   extensionName: string,
+ *   extensionID: string,
+ *   status: string,
+ * }>} extensionStatuses
+ */
+function onGetExtensionStatuses(extensionStatuses) {
+  const itemContainer = $('extension-entries');
+  itemContainer.textContent = '';
 
-    for (let i = 0; i < extensionStatuses.length; i++) {
-      const originEntry = extensionStatuses[i];
-      const tr = document.createElement('tr');
-      tr.appendChild(createElementFromText('td', originEntry.extensionName));
-      tr.appendChild(createElementFromText('td', originEntry.extensionID));
-      tr.appendChild(createElementFromText('td', originEntry.status));
-      itemContainer.appendChild(tr);
-    }
+  for (let i = 0; i < extensionStatuses.length; i++) {
+    const originEntry = extensionStatuses[i];
+    const tr = document.createElement('tr');
+    tr.appendChild(createElementFromText('td', originEntry.extensionName));
+    tr.appendChild(createElementFromText('td', originEntry.extensionID));
+    tr.appendChild(createElementFromText('td', originEntry.status));
+    itemContainer.appendChild(tr);
   }
+}
 
-  function main() {
-    refreshExtensionStatuses();
-    $('refresh-extensions-statuses')
-        .addEventListener('click', refreshExtensionStatuses);
-  }
+function main() {
+  refreshExtensionStatuses();
+  $('refresh-extensions-statuses')
+      .addEventListener('click', refreshExtensionStatuses);
+}
 
-  document.addEventListener('DOMContentLoaded', main);
+document.addEventListener('DOMContentLoaded', main);

chrome/browser/resources/sync_file_system_internals/file_metadata.js

@@ -12,133 +12,133 @@ import {$} from 'chrome://resources/js/util.m.js';
 
 import {createElementFromDictionary, createElementFromText} from './utils.js';
 
-  /**
-   * Gets extension data so the select drop down can be filled.
-   */
-  function refreshExtensions() {
-    sendWithPromise('getExtensions').then(onGetExtensions);
-  }
+/**
+ * Gets extension data so the select drop down can be filled.
+ */
+function refreshExtensions() {
+  sendWithPromise('getExtensions').then(onGetExtensions);
+}
 
-  /**
-   * Renders result of getFileMetadata as a table.
-   * @param {!Array<!{
-   *   extensionName: string,
-   *   extensionID: string,
-   *   status: string,
-   * }>} extensionStatuses of dictionaries containing 'extensionName',
-   *     'extensionID', 'status'.
-   */
-  function onGetExtensions(extensionStatuses) {
-    const select = $('extensions-select');
-
-    // Record existing drop down extension ID. If it's still there after the
-    // refresh then keep it as the selected value.
-    const oldSelectedExtension = getSelectedExtensionId();
-
-    select.textContent = '';
-    for (let i = 0; i < extensionStatuses.length; i++) {
-      const originEntry = extensionStatuses[i];
-      const tr = document.createElement('tr');
-      const title = originEntry.extensionName + ' [' + originEntry.status + ']';
-      select.options.add(new Option(title, originEntry.extensionID));
-
-      // If option was the previously only selected, make it selected again.
-      if (originEntry.extensionID != oldSelectedExtension) {
-        continue;
-      }
-      select.options[select.options.length - 1].selected = true;
+/**
+ * Renders result of getFileMetadata as a table.
+ * @param {!Array<!{
+ *   extensionName: string,
+ *   extensionID: string,
+ *   status: string,
+ * }>} extensionStatuses of dictionaries containing 'extensionName',
+ *     'extensionID', 'status'.
+ */
+function onGetExtensions(extensionStatuses) {
+  const select = $('extensions-select');
+
+  // Record existing drop down extension ID. If it's still there after the
+  // refresh then keep it as the selected value.
+  const oldSelectedExtension = getSelectedExtensionId();
+
+  select.textContent = '';
+  for (let i = 0; i < extensionStatuses.length; i++) {
+    const originEntry = extensionStatuses[i];
+    const tr = document.createElement('tr');
+    const title = originEntry.extensionName + ' [' + originEntry.status + ']';
+    select.options.add(new Option(title, originEntry.extensionID));
+
+    // If option was the previously only selected, make it selected again.
+    if (originEntry.extensionID != oldSelectedExtension) {
+      continue;
     }
-
-    // After drop down has been loaded with options, file metadata can be loaded
-    refreshFileMetadata();
+    select.options[select.options.length - 1].selected = true;
   }
 
-  /**
-   * @return {?string} extension ID that's currently selected in drop down box.
-   */
-  function getSelectedExtensionId() {
-    const dropDown = $('extensions-select').options;
-    if (dropDown.selectedIndex >= 0) {
-      return dropDown[dropDown.selectedIndex].value;
-    }
+  // After drop down has been loaded with options, file metadata can be loaded
+  refreshFileMetadata();
+}
 
-    return null;
+/**
+ * @return {?string} extension ID that's currently selected in drop down box.
+ */
+function getSelectedExtensionId() {
+  const dropDown = $('extensions-select').options;
+  if (dropDown.selectedIndex >= 0) {
+    return dropDown[dropDown.selectedIndex].value;
   }
 
-  /**
-   * Get File Metadata depending on which extension is selected from the drop
-   * down if any.
-   */
-  function refreshFileMetadata() {
-    const dropDown = $('extensions-select');
-    if (dropDown.options.length === 0) {
-      $('file-metadata-header').textContent = '';
-      $('file-metadata-entries').textContent = 'No file metadata available.';
-      return;
-    }
+  return null;
+}
 
-    const selectedExtensionId = getSelectedExtensionId();
-    sendWithPromise('getFileMetadata', selectedExtensionId)
-        .then(onGetFileMetadata);
+/**
+ * Get File Metadata depending on which extension is selected from the drop
+ * down if any.
+ */
+function refreshFileMetadata() {
+  const dropDown = $('extensions-select');
+  if (dropDown.options.length === 0) {
+    $('file-metadata-header').textContent = '';
+    $('file-metadata-entries').textContent = 'No file metadata available.';
+    return;
   }
 
-  /**
-   * Renders result of getFileMetadata as a table.
-   */
-  function onGetFileMetadata(fileMetadataMap) {
-    const header = $('file-metadata-header');
-    // Only draw the header if it hasn't been drawn yet
-    if (header.children.length === 0) {
-      const tr = document.createElement('tr');
-      tr.appendChild(createElementFromText('td', 'Type'));
-      tr.appendChild(createElementFromText('td', 'Status'));
-      tr.appendChild(createElementFromText('td', 'Path', {width: '250px'}));
-      tr.appendChild(createElementFromText('td', 'Details'));
-      header.appendChild(tr);
-    }
+  const selectedExtensionId = getSelectedExtensionId();
+  sendWithPromise('getFileMetadata', selectedExtensionId)
+      .then(onGetFileMetadata);
+}
 
-    // Add row entries.
-    const itemContainer = $('file-metadata-entries');
-    itemContainer.textContent = '';
-    for (let i = 0; i < fileMetadataMap.length; i++) {
-      const metadatEntry = fileMetadataMap[i];
-      const tr = document.createElement('tr');
-      tr.appendChild(createFileIconCell(metadatEntry.type));
-      tr.appendChild(createElementFromText('td', metadatEntry.status));
-      tr.appendChild(createElementFromText('td', metadatEntry.path));
-      tr.appendChild(createElementFromDictionary('td', metadatEntry.details));
-      itemContainer.appendChild(tr);
-    }
+/**
+ * Renders result of getFileMetadata as a table.
+ */
+function onGetFileMetadata(fileMetadataMap) {
+  const header = $('file-metadata-header');
+  // Only draw the header if it hasn't been drawn yet
+  if (header.children.length === 0) {
+    const tr = document.createElement('tr');
+    tr.appendChild(createElementFromText('td', 'Type'));
+    tr.appendChild(createElementFromText('td', 'Status'));
+    tr.appendChild(createElementFromText('td', 'Path', {width: '250px'}));
+    tr.appendChild(createElementFromText('td', 'Details'));
+    header.appendChild(tr);
   }
 
-  /**
-   * @param {string} type file type string.
-   * @return {!HTMLElement} TD with file or folder icon depending on type.
-   */
-  function createFileIconCell(type) {
-    const img = document.createElement('div');
-    const lowerType = type.toLowerCase();
-    if (lowerType == 'file') {
-      img.style.content = getImage('chrome://theme/IDR_DEFAULT_FAVICON');
-    } else if (lowerType == 'folder') {
-      img.style.content = getImage('chrome://theme/IDR_FOLDER_CLOSED');
-      img.className = 'folder-image';
-    }
-
-    const imgWrapper = document.createElement('div');
-    imgWrapper.appendChild(img);
-
-    const td = /** @type {!HTMLElement} */ (document.createElement('td'));
-    td.className = 'file-icon-cell';
-    td.appendChild(imgWrapper);
-    td.appendChild(document.createTextNode(type));
-    return td;
+  // Add row entries.
+  const itemContainer = $('file-metadata-entries');
+  itemContainer.textContent = '';
+  for (let i = 0; i < fileMetadataMap.length; i++) {
+    const metadatEntry = fileMetadataMap[i];
+    const tr = document.createElement('tr');
+    tr.appendChild(createFileIconCell(metadatEntry.type));
+    tr.appendChild(createElementFromText('td', metadatEntry.status));
+    tr.appendChild(createElementFromText('td', metadatEntry.path));
+    tr.appendChild(createElementFromDictionary('td', metadatEntry.details));
+    itemContainer.appendChild(tr);
   }
+}
 
-  function main() {
-    refreshExtensions();
-    $('refresh-metadata-button').addEventListener('click', refreshExtensions);
-    $('extensions-select').addEventListener('change', refreshFileMetadata);
+/**
+ * @param {string} type file type string.
+ * @return {!HTMLElement} TD with file or folder icon depending on type.
+ */
+function createFileIconCell(type) {
+  const img = document.createElement('div');
+  const lowerType = type.toLowerCase();
+  if (lowerType == 'file') {
+    img.style.content = getImage('chrome://theme/IDR_DEFAULT_FAVICON');
+  } else if (lowerType == 'folder') {
+    img.style.content = getImage('chrome://theme/IDR_FOLDER_CLOSED');
+    img.className = 'folder-image';
   }
 
-  document.addEventListener('DOMContentLoaded', main);
+  const imgWrapper = document.createElement('div');
+  imgWrapper.appendChild(img);
+
+  const td = /** @type {!HTMLElement} */ (document.createElement('td'));
+  td.className = 'file-icon-cell';
+  td.appendChild(imgWrapper);
+  td.appendChild(document.createTextNode(type));
+  return td;
+}
+
+function main() {
+  refreshExtensions();
+  $('refresh-metadata-button').addEventListener('click', refreshExtensions);
+  $('extensions-select').addEventListener('change', refreshFileMetadata);
+}
+
+document.addEventListener('DOMContentLoaded', main);

chrome/browser/resources/sync_file_system_internals/sync_service.js

@@ -13,91 +13,91 @@ import {$} from 'chrome://resources/js/util.m.js';
 
 import {createElementFromText} from './utils.js';
 
-  /**
-   * Request Sync Service Status.
-   */
-  function refreshServiceStatus() {
-    sendWithPromise('getServiceStatus').then(onGetServiceStatus);
-  }
+/**
+ * Request Sync Service Status.
+ */
+function refreshServiceStatus() {
+  sendWithPromise('getServiceStatus').then(onGetServiceStatus);
+}
 
-  /**
-   * Called when service status is initially retrieved or updated via events.
-   * @param {string} statusString Service status enum as a string.
-   */
-  function onGetServiceStatus(statusString) {
-    $('service-status').textContent = statusString;
-  }
+/**
+ * Called when service status is initially retrieved or updated via events.
+ * @param {string} statusString Service status enum as a string.
+ */
+function onGetServiceStatus(statusString) {
+  $('service-status').textContent = statusString;
+}
 
-  /**
-   * Request Google Drive Notification Source. e.g. XMPP or polling.
-   */
-  function refreshNotificationSource() {
-    sendWithPromise('getNotificationSource').then(onGetNotificationSource);
-  }
+/**
+ * Request Google Drive Notification Source. e.g. XMPP or polling.
+ */
+function refreshNotificationSource() {
+  sendWithPromise('getNotificationSource').then(onGetNotificationSource);
+}
 
-  /**
-   * Handles callback from getNotificationSource.
-   * @param {string} sourceString Notification source as a string.
-   */
-  function onGetNotificationSource(sourceString) {
-    $('notification-source').textContent = sourceString;
-  }
+/**
+ * Handles callback from getNotificationSource.
+ * @param {string} sourceString Notification source as a string.
+ */
+function onGetNotificationSource(sourceString) {
+  $('notification-source').textContent = sourceString;
+}
 
-  // Keeps track of the last log event seen so it's not reprinted.
-  let lastLogEventId = -1;
+// Keeps track of the last log event seen so it's not reprinted.
+let lastLogEventId = -1;
 
-  /**
-   * Request debug log.
-   */
-  function refreshLog() {
-    sendWithPromise('getLog', lastLogEventId).then(onGetLog);
-  }
+/**
+ * Request debug log.
+ */
+function refreshLog() {
+  sendWithPromise('getLog', lastLogEventId).then(onGetLog);
+}
 
-  /**
-   * Clear old logs.
-   */
-  function clearLogs() {
-    chrome.send('clearLogs');
-    $('log-entries').innerHTML = trustedTypes.emptyHTML;
-  }
+/**
+ * Clear old logs.
+ */
+function clearLogs() {
+  chrome.send('clearLogs');
+  $('log-entries').innerHTML = trustedTypes.emptyHTML;
+}
 
-  /**
-   * Handles callback from getUpdateLog.
-   * @param {!Array<!{
-   *   id: number,
-   *   logEvent: string,
-   *   time: string,
-   * }>} logEntries List of dictionaries containing 'id', 'time', 'logEvent'.
-   */
-  function onGetLog(logEntries) {
-    const itemContainer = $('log-entries');
-    for (let i = 0; i < logEntries.length; i++) {
-      const logEntry = logEntries[i];
-      const tr = document.createElement('tr');
-      const error = /ERROR/.test(logEntry.logEvent) ? ' error' : '';
-      tr.appendChild(
-          createElementFromText('td', logEntry.time, {'class': 'log-time'}));
-      tr.appendChild(createElementFromText(
-          'td', logEntry.logEvent, {'class': 'log-event' + error}));
-      itemContainer.appendChild(tr);
-
-      lastLogEventId = logEntry.id;
-    }
+/**
+ * Handles callback from getUpdateLog.
+ * @param {!Array<!{
+ *   id: number,
+ *   logEvent: string,
+ *   time: string,
+ * }>} logEntries List of dictionaries containing 'id', 'time', 'logEvent'.
+ */
+function onGetLog(logEntries) {
+  const itemContainer = $('log-entries');
+  for (let i = 0; i < logEntries.length; i++) {
+    const logEntry = logEntries[i];
+    const tr = document.createElement('tr');
+    const error = /ERROR/.test(logEntry.logEvent) ? ' error' : '';
+    tr.appendChild(
+        createElementFromText('td', logEntry.time, {'class': 'log-time'}));
+    tr.appendChild(createElementFromText(
+        'td', logEntry.logEvent, {'class': 'log-event' + error}));
+    itemContainer.appendChild(tr);
+
+    lastLogEventId = logEntry.id;
   }
+}
 
-  /**
-   * Get initial sync service values and set listeners to get updated values.
-   */
-  function main() {
-    decorate('tabbox', TabBox);
-    $('clear-log-button').addEventListener('click', clearLogs);
-    refreshServiceStatus();
-    refreshNotificationSource();
+/**
+ * Get initial sync service values and set listeners to get updated values.
+ */
+function main() {
+  decorate('tabbox', TabBox);
+  $('clear-log-button').addEventListener('click', clearLogs);
+  refreshServiceStatus();
+  refreshNotificationSource();
 
-    addWebUIListener('service-status-changed', onGetServiceStatus);
+  addWebUIListener('service-status-changed', onGetServiceStatus);
 
-    // TODO: Look for a way to push entries to the page when necessary.
-    window.setInterval(refreshLog, 1000);
-  }
+  // TODO: Look for a way to push entries to the page when necessary.
+  window.setInterval(refreshLog, 1000);
+}
 
-  document.addEventListener('DOMContentLoaded', main);
+document.addEventListener('DOMContentLoaded', main);

chrome/browser/resources/sync_file_system_internals/task_log.js

@@ -6,53 +6,53 @@ import {addWebUIListener} from 'chrome://resources/js/cr.m.js';
 import {$} from 'chrome://resources/js/util.m.js';
 import {createElementFromText} from './utils.js';
 
-  const nextTaskLogSeq = 1;
-
-  /**
-   * Handles per-task log event.
-   * @param {!{
-   *   duration: number,
-   *   task_description: string,
-   *   result_description: string,
-   *   details: !Array,
-   * }} taskLog
-   */
-  function onTaskLogRecorded(taskLog) {
-    const details = document.createElement('td');
-    details.classList.add('task-log-details');
-
-    const label = document.createElement('label');
-    details.appendChild(label);
-
-    const collapseCheck = document.createElement('input');
-    collapseCheck.setAttribute('type', 'checkbox');
-    collapseCheck.classList.add('task-log-collapse-check');
-    label.appendChild(collapseCheck);
-
-    const ul = document.createElement('ul');
-    for (let i = 0; i < taskLog.details.length; ++i) {
-      ul.appendChild(createElementFromText('li', taskLog.details[i]));
-    }
-    label.appendChild(ul);
-
-    const tr = document.createElement('tr');
-    tr.appendChild(createElementFromText(
-        'td', taskLog.duration.toString(), {'class': 'task-log-duration'}));
-    tr.appendChild(createElementFromText(
-        'td', taskLog.task_description, {'class': 'task-log-description'}));
-    tr.appendChild(createElementFromText(
-        'td', taskLog.result_description, {'class': 'task-log-result'}));
-    tr.appendChild(details);
-
-    $('task-log-entries').appendChild(tr);
+const nextTaskLogSeq = 1;
+
+/**
+ * Handles per-task log event.
+ * @param {!{
+ *   duration: number,
+ *   task_description: string,
+ *   result_description: string,
+ *   details: !Array,
+ * }} taskLog
+ */
+function onTaskLogRecorded(taskLog) {
+  const details = document.createElement('td');
+  details.classList.add('task-log-details');
+
+  const label = document.createElement('label');
+  details.appendChild(label);
+
+  const collapseCheck = document.createElement('input');
+  collapseCheck.setAttribute('type', 'checkbox');
+  collapseCheck.classList.add('task-log-collapse-check');
+  label.appendChild(collapseCheck);
+
+  const ul = document.createElement('ul');
+  for (let i = 0; i < taskLog.details.length; ++i) {
+    ul.appendChild(createElementFromText('li', taskLog.details[i]));
   }
-
-  /**
-   * Get initial sync service values and set listeners to get updated values.
-   */
-  function main() {
-    addWebUIListener('task-log-recorded', onTaskLogRecorded);
-    chrome.send('observeTaskLog');
-  }
-
-  document.addEventListener('DOMContentLoaded', main);
+  label.appendChild(ul);
+
+  const tr = document.createElement('tr');
+  tr.appendChild(createElementFromText(
+      'td', taskLog.duration.toString(), {'class': 'task-log-duration'}));
+  tr.appendChild(createElementFromText(
+      'td', taskLog.task_description, {'class': 'task-log-description'}));
+  tr.appendChild(createElementFromText(
+      'td', taskLog.result_description, {'class': 'task-log-result'}));
+  tr.appendChild(details);
+
+  $('task-log-entries').appendChild(tr);
+}
+
+/**
+ * Get initial sync service values and set listeners to get updated values.
+ */
+function main() {
+  addWebUIListener('task-log-recorded', onTaskLogRecorded);
+  chrome.send('observeTaskLog');
+}
+
+document.addEventListener('DOMContentLoaded', main);