Add line and column number to flame graph and stack chart tooltips (f…

…irefox-devtools#2173)

* Add line and column number to flame graph and stack chart tooltips

Fixes firefox-devtools#2094

* Update FlameGraph snapshot test to include filename in the tooltips

src/components/tooltip/CallNode.js

@@ -169,14 +169,24 @@ export class TooltipCallNode extends React.PureComponent<Props> {
     // Only JavaScript functions have a filename.
     const fileNameIndex = thread.funcTable.fileName[funcIndex];
     if (fileNameIndex !== null) {
+      let fileName = thread.stringTable.getString(fileNameIndex);
+      const lineNumber = thread.funcTable.lineNumber[funcIndex];
+      if (lineNumber !== null) {
+        fileName += ':' + lineNumber;
+        const columnNumber = thread.funcTable.columnNumber[funcIndex];
+        if (columnNumber !== null) {
+          fileName += ':' + columnNumber;
+        }
+      }
+
       // Because of our use of Grid Layout, all our elements need to be direct
       // children of the grid parent. That's why we use arrays here, to add
       // the elements as direct children.
       resourceOrFileName = [
         <div className="tooltipLabel" key="file">
           File:
         </div>,
-        thread.stringTable.getString(fileNameIndex),
+        fileName,
       ];
     } else {
       const resourceIndex = thread.funcTable.resource[funcIndex];

src/test/components/FlameGraph.test.js

@@ -189,6 +189,15 @@ function setupFlameGraph() {
     E[cat:Graphics]  G[cat:Graphics]
   `);
 
+  // Add some file and line number to the profile so that tooltips generate
+  // an interesting snapshot.
+  const { funcTable, stringTable } = profile.threads[0];
+  for (let funcIndex = 0; funcIndex < funcTable.length; funcIndex++) {
+    funcTable.lineNumber[funcIndex] = funcIndex + 10;
+    funcTable.columnNumber[funcIndex] = funcIndex + 100;
+    funcTable.fileName[funcIndex] = stringTable.indexForString('path/to/file');
+  }
+
   const store = storeWithProfile(profile);
 
   const renderResult = render(

src/test/components/__snapshots__/FlameGraph.test.js.snap

@@ -177,6 +177,12 @@ exports[`FlameGraph has a tooltip that matches the snapshot 1`] = `
           />
           DOM
         </div>
+        <div
+          class="tooltipLabel"
+        >
+          File:
+        </div>
+        path/to/file:10:100
       </div>
     </div>
   </div>