SuperSize: Show srcPath and Component in info cards

For structural nodes, still shows the "idPath", because our data model
does not allow mapping subpaths -> components.

Also fixes cell alignment in the infocard where titles were center
aligned over right-aligned values.

Bug: 880671
Change-Id: I5be0bb6b07aba20a9c49bffa4c14da45f8bb0599
Reviewed-on: https://chromium-review.googlesource.com/c/1313076
Commit-Queue: agrieve <agrieve@chromium.org>
Reviewed-by: Samuel Huang <huangs@chromium.org>
Cr-Commit-Position: refs/heads/master@{#604939}

tools/binary_size/libsupersize/static/infocard-ui.js

@@ -74,21 +74,32 @@ const displayInfocard = (() => {
     }
 
     /**
-     * Updates the path text, which shows the idPath of the node but highlights
-     * the symbol name portion using bold text.
+     * Updates the path text, which shows the idPath for directory nodes, and
+     * srcPath / component for symbol nodes.
      * @param {TreeNode} node
      */
-    _updatePath(node) {
+    _updatePaths(node) {
+      let pathFragment;
+      if (node.srcPath) {
+        pathFragment = dom.createFragment([
+            dom.textElement('span', 'Path: ', 'symbol-name-info'),
+            document.createTextNode(node.srcPath),
+            document.createElement('br'),
+            dom.textElement('span', 'Component: ', 'symbol-name-info'),
+            document.createTextNode(node.componet || '(No component)'),
+        ]);
+      } else {
         const path = node.idPath.slice(0, node.shortNameIndex);
         const boldShortName = dom.textElement(
           'span',
           shortName(node),
           'symbol-name-info'
         );
-      const pathFragment = dom.createFragment([
+        pathFragment = dom.createFragment([
           document.createTextNode(path),
           boldShortName,
         ]);
+      }
 
       // Update DOM
       dom.replace(this._pathInfo, pathFragment);
@@ -145,7 +156,7 @@ const displayInfocard = (() => {
 
       // Update DOM
       this._updateSize(node);
-      this._updatePath(node);
+      this._updatePaths(node);
       if (type !== this._lastType) {
         // No need to create a new icon if it is identical.
         const icon = getIconTemplate(type);

tools/binary_size/libsupersize/static/infocard.css

@@ -9,7 +9,7 @@
   left: 8px;
   right: 8px;
   margin: 0 auto;
-  max-width: 512px;
+  max-width: 720px;
   max-height: 50vh;
   overflow-y: auto;
   background: white;
@@ -94,6 +94,7 @@
   border-top: 1px solid #dadce0;
   padding-top: 8px;
   clear: right;
+  text-align: left;
 }
 .canvas-overlay {
   position: absolute;
@@ -108,9 +109,6 @@
   min-width: 100%;
   font-size: 14px;
 }
-.type-breakdown-info th {
-  text-align: left;
-}
 .type-breakdown-info th[scope='row'] {
   font-weight: normal;
 }

tools/binary_size/libsupersize/static/shared.js

@@ -18,6 +18,8 @@
  * arrays indicate this is a leaf node.
  * @prop {TreeNode | null} parent Parent tree node. null if this is a root node.
  * @prop {string} idPath Full path to this node.
+ * @prop {string} srcPath Path to the source containing this symbol.
+ * @prop {string} component OWNERS Component for this symbol.
  * @prop {number} shortNameIndex The name of the node is include in the idPath.
  * This index indicates where to start to slice the idPath to read the name.
  * @prop {number} size Byte size of this node and its children.

tools/binary_size/libsupersize/static/tree-worker.js

@@ -49,6 +49,14 @@ function getSourcePath(fileEntry) {
   return fileEntry[_KEYS.SOURCE_PATH];
 }
 
+/**
+ * @param {Meta} meta
+ * @param {FileEntry} fileEntry
+ */
+function getComponent(meta, fileEntry) {
+  return meta.components[fileEntry[_KEYS.COMPONENT_INDEX]];
+}
+
 /**
  * Find the last index of either '/' or `sep` in the given path.
  * @param {string} path
@@ -91,6 +99,8 @@ function _compareFunc(a, b) {
 function createNode(options) {
   const {
     idPath,
+    srcPath,
+    component,
     type,
     shortNameIndex,
     size = 0,
@@ -102,6 +112,8 @@ function createNode(options) {
     children: [],
     parent: null,
     idPath,
+    srcPath,
+    component,
     type,
     shortNameIndex,
     size,
@@ -128,13 +140,16 @@ class TreeBuilder {
    * @param {(symbolNode: TreeNode) => boolean} options.highlightTest Called to
    * see if a symbol should be highlighted.
    * @param {string} options.sep Path seperator used to find parent names.
+   * @param {Meta} options.meta Metadata associated with this tree.
    */
   constructor(options) {
     this._getPath = options.getPath;
     this._filterTest = options.filterTest;
     this._highlightTest = options.highlightTest;
     this._sep = options.sep || _PATH_SEP;
+    this._meta = options.meta;
 
+    // srcPath and component don't make sense for the root node.
     this.rootNode = createNode({
       idPath: this._sep,
       shortNameIndex: 0,
@@ -234,6 +249,8 @@ class TreeBuilder {
           if (classNode == null) {
             classNode = createNode({
               idPath: classIdPath,
+              srcPath: node.srcPath,
+              component: node.component,
               shortNameIndex: childNode.shortNameIndex,
               type: _CONTAINER_TYPES.JAVA_CLASS,
             });
@@ -341,6 +358,9 @@ class TreeBuilder {
       // get parent from cache if it exists, otherwise create it
       parentNode = this._parents.get(parentPath);
       if (parentNode == null) {
+        // srcPath and component are not available for parent nodes, since they
+        // are stored alongside FileEntry. We could extract srcPath from idPath,
+        // but it doesn't really add enough value to warrent doing so.
         parentNode = createNode({
           idPath: parentPath,
           shortNameIndex: lastIndexOf(parentPath, this._sep) + 1,
@@ -365,9 +385,13 @@ class TreeBuilder {
    */
   addFileEntry(fileEntry, diffMode) {
     const idPath = this._getPath(fileEntry);
+    const srcPath = getSourcePath(fileEntry);
+    const component = getComponent(this._meta, fileEntry);
     // make node for this
     const fileNode = createNode({
       idPath,
+      srcPath,
+      component,
       shortNameIndex: lastIndexOf(idPath, this._sep) + 1,
       type: _CONTAINER_TYPES.FILE,
     });
@@ -384,6 +408,8 @@ class TreeBuilder {
       const symbolNode = createNode({
         // Join file path to symbol name with a ":"
         idPath: `${idPath}:${symbol[_KEYS.SYMBOL_NAME]}`,
+        srcPath,
+        component,
         shortNameIndex: idPath.length + 1,
         size,
         type,
@@ -707,20 +733,13 @@ async function buildTree(groupBy, filterTest, highlightTest, onProgress) {
   /** @type {{ [gropyBy: string]: (fileEntry: FileEntry) => string }} */
   const getPathMap = {
     component(fileEntry) {
-      const component = meta.components[fileEntry[_KEYS.COMPONENT_INDEX]];
+      const component = getComponent(meta, fileEntry);
       const path = getSourcePath(fileEntry);
       return `${component || '(No component)'}>${path}`;
     },
     source_path: getSourcePath,
   };
 
-  builder = new TreeBuilder({
-    sep: groupBy === 'component' ? '>' : _PATH_SEP,
-    getPath: getPathMap[groupBy],
-    filterTest,
-    highlightTest,
-  });
-
   /**
    * Creates data to post to the UI thread. Defaults will be used for the root
    * and percent values if not specified.
@@ -767,6 +786,15 @@ async function buildTree(groupBy, filterTest, highlightTest, onProgress) {
         // First line of data is used to store meta information.
         meta = /** @type {Meta} */ (dataObj);
         diffMode = meta.diff_mode;
+
+        builder = new TreeBuilder({
+          getPath: getPathMap[groupBy],
+          filterTest,
+          highlightTest,
+          sep: groupBy === 'component' ? '>' : _PATH_SEP,
+          meta,
+        });
+
         postToUi();
       } else {
         builder.addFileEntry(/** @type {FileEntry} */ (dataObj), diffMode);