chrome/browser/resources/sync_internals/node_browser.html

<!-- TODO(akalin): Move to a three-pane view; node tree on the left
(minus leaf nodes), tree contents list on the upper right, selected
item detail on the lower right. -->

<div id="sync-node-main">
  <!-- TODO(akalin): Figure out how to get this element to be as tall
       as its container (style.height=100% doesn't work).  Also fix
       behavior when tree is too tall (currently it makes you scroll the
       entire page). -->
  <div id="sync-node-tree-container">
    <tree id="sync-node-tree" icon-visibility="parent"></tree>
  </div>
  <div id="sync-node-splitter"></div>
  <div id="sync-node-browser-container">
    <table id="node-browser">
      <tr>
        <td>ID</td>
        <td jscontent="id"></td>
      </tr>
      <tr>
        <td>Modification Time</td>
        <td jscontent="modificationTime"></td>
      </tr>
      <tr>
        <td>Parent</td>
        <td jsContent="parentId"></td>
      </tr>
      <tr>
        <td>Is Folder</td>
        <td jscontent="isFolder"></td>
      </tr>
      <tr>
        <td>Title</td>
        <td jscontent="title"></td>
      </tr>
      <tr>
        <td>Type</td>
        <td jscontent="type"></td>
      </tr>
      <tr>
        <td>External ID</td>
        <td jscontent="externalId"></td>
      </tr>
      <tr>
        <td>Predecessor</td>
        <td jscontent="predecessorId"></td>
      </tr>
      <tr>
        <td>Successor</td>
        <td jscontent="successorId"></td>
      </tr>
      <tr>
        <td>First Child</td>
        <td jscontent="firstChildId"></td>
      </tr>
      <tr>
        <td>Entry</td>
        <td><pre jscontent="entry"></pre></td>
      </tr>
    </table>
  </div>
</div>

<script src="chrome://sync-internals/node_browser.js"></script>