Display the library name in the tree view.

res/style.css

@@ -106,8 +106,9 @@ body, #root, .profileViewer {
   padding-left: 5px;
 }
 
-.treeViewRowColumn.treeViewMainColumn {
-  flex: 1;
+.treeViewAppendageColumn {
+  margin-left: 10px;
+  color: #999;
 }
 
 .treeViewRow.even, .treeViewRow.even > .treeViewFixedColumn {

src/content/components/ProfileTreeView.js

@@ -14,6 +14,7 @@ class ProfileTreeView extends Component {
       { propName: 'selfTime', title: 'Self' },
     ];
     this._mainColumn = { propName: 'name', title: '' };
+    this._appendageColumn = { propName: 'lib', title: '' };
     this._onSelectedFuncStackChange = this._onSelectedFuncStackChange.bind(this);
     this._onExpandedFuncStacksChange = this._onExpandedFuncStacksChange.bind(this);
   }
@@ -73,6 +74,7 @@ class ProfileTreeView extends Component {
       <TreeView tree={tree}
                 fixedColumns={this._fixedColumns}
                 mainColumn={this._mainColumn}
+                appendageColumn={this._appendageColumn}
                 onSelectionChange={this._onSelectedFuncStackChange}
                 onExpandedNodesChange={this._onExpandedFuncStacksChange}
                 selectedNodeId={selectedFuncStack}

src/content/components/TreeView.js

@@ -67,7 +67,7 @@ class TreeViewRow extends Component {
   }
 
   render() {
-    const { node, depth, fixedColumns, mainColumn, index, canBeExpanded, isExpanded, selected, highlightString } = this.props;
+    const { node, depth, fixedColumns, mainColumn, appendageColumn, index, canBeExpanded, isExpanded, selected, highlightString } = this.props;
     const evenOddClassName = (index % 2) === 0 ? 'even' : 'odd';
     return (
       <div className={`treeViewRow ${evenOddClassName} ${selected ? 'selected' : ''}`} style={{height: '16px'}} onClick={this._onClick}>
@@ -83,6 +83,9 @@ class TreeViewRow extends Component {
         <span className={`treeViewRowColumn treeViewMainColumn ${mainColumn.propName}`}>
           {reactStringWithHighlightedSubstrings(node[mainColumn.propName], highlightString, 'treeViewHighlighting')}
         </span>
+        <span className={`treeViewRowColumn treeViewAppendageColumn ${appendageColumn.propName}`}>
+          {node[appendageColumn.propName]}
+        </span>
       </div>
     );
   }
@@ -100,6 +103,10 @@ TreeViewRow.propTypes = {
     propName: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired,
   }).isRequired,
+  appendageColumn: PropTypes.shape({
+    propName: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+  }),
   index: PropTypes.number.isRequired,
   canBeExpanded: PropTypes.bool.isRequired,
   isExpanded: PropTypes.bool.isRequired,
@@ -146,14 +153,15 @@ class TreeView extends Component {
   }
 
   _renderRow(nodeId, index) {
-    const { tree, expandedNodeIds, fixedColumns, mainColumn, selectedNodeId, highlightString } = this.props;
+    const { tree, expandedNodeIds, fixedColumns, mainColumn, appendageColumn, selectedNodeId, highlightString } = this.props;
     const node = tree.getNode(nodeId);
     const canBeExpanded = tree.hasChildren(nodeId);
     const isExpanded = expandedNodeIds.includes(nodeId);
     return (
       <TreeViewRow node={node}
                    fixedColumns={fixedColumns}
                    mainColumn={mainColumn}
+                   appendageColumn={appendageColumn}
                    depth={tree.getDepth(nodeId)}
                    nodeId={nodeId}
                    index={index}
@@ -320,6 +328,10 @@ TreeView.propTypes = {
   onExpandedNodesChange: PropTypes.func.isRequired,
   onSelectionChange: PropTypes.func.isRequired,
   highlightString: PropTypes.string,
+  appendageColumn: PropTypes.shape({
+    propName: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+  }),
 };
 
 export default TreeView;

src/content/profile-tree.js

@@ -2,11 +2,12 @@ import { timeCode } from '../common/time-code';
 import { getSampleFuncStacks } from './profile-data';
 
 class ProfileTree {
-  constructor(funcStackTable, funcStackTimes, funcStackChildCount, funcTable, stringTable, rootTotalTime, rootCount) {
+  constructor(funcStackTable, funcStackTimes, funcStackChildCount, funcTable, resourceTable, stringTable, rootTotalTime, rootCount) {
     this._funcStackTable = funcStackTable;
     this._funcStackTimes = funcStackTimes;
     this._funcStackChildCount = funcStackChildCount;
     this._funcTable = funcTable;
+    this._resourceTable = resourceTable;
     this._stringTable = stringTable;
     this._rootTotalTime = rootTotalTime;
     this._rootCount = rootCount;
@@ -66,11 +67,16 @@ class ProfileTree {
   getNode(funcStackIndex) {
     let node = this._nodes.get(funcStackIndex);
     if (node === undefined) {
+      const funcIndex = this._funcStackTable.func[funcStackIndex];
+      const funcName = this._stringTable.getString(this._funcTable.name[funcIndex]);
+      const libNameIndex = this._resourceTable.name[this._funcTable.resource[funcIndex]];
+      const libName = libNameIndex !== undefined ? this._stringTable.getString(libNameIndex) : '';
       node = {
         totalTime: `${this._funcStackTimes.totalTime[funcStackIndex].toFixed(1)}ms`,
         totalTimePercent: `${(100 * this._funcStackTimes.totalTime[funcStackIndex] / this._rootTotalTime).toFixed(1)}%`,
         selfTime: `${this._funcStackTimes.selfTime[funcStackIndex].toFixed(1)}ms`,
-        name: this._stringTable.getString(this._funcTable.name[this._funcStackTable.func[funcStackIndex]]),
+        name: funcName,
+        lib: libName,
       };
       this._nodes.set(funcStackIndex, node);
     }
@@ -106,6 +112,6 @@ export function getCallTree(thread, interval, funcStackInfo) {
       }
     }
     const funcStackTimes = { selfTime: funcStackSelfTime, totalTime: funcStackTotalTime };
-    return new ProfileTree(funcStackTable, funcStackTimes, numChildren, thread.funcTable, thread.stringTable, rootTotalTime, numRoots);
+    return new ProfileTree(funcStackTable, funcStackTimes, numChildren, thread.funcTable, thread.resourceTable, thread.stringTable, rootTotalTime, numRoots);
   });
 }