Bug 1127487 - FrameNode.prototype.getInfo should be able to parse columns in locations, r=jsantell

browser/devtools/profiler/test/browser_profiler_tree-frame-node.js

@@ -9,7 +9,7 @@ function test() {
   let { FrameNode } = devtools.require("devtools/profiler/tree-model");
 
   let frame1 = new FrameNode({
-    location: "hello/<.world (http://foo/bar.js:123)",
+    location: "hello/<.world (http://foo/bar.js:123:987)",
     line: 456
   });
 
@@ -25,13 +25,15 @@ function test() {
     "The first frame node has the correct url.");
   is(frame1.getInfo().line, 123,
     "The first frame node has the correct line.");
+  is(frame1.getInfo().column, 987,
+    "The first frame node has the correct column.");
   is(frame1.getInfo().categoryData.toSource(), "({})",
     "The first frame node has the correct category data.");
   is(frame1.getInfo().isContent, true,
     "The first frame node has the correct content flag.");
 
   let frame2 = new FrameNode({
-    location: "hello/<.world (http://foo/bar.js#baz:123)",
+    location: "hello/<.world (http://foo/bar.js#baz:123:987)",
     line: 456
   });
 
@@ -47,13 +49,15 @@ function test() {
     "The second frame node has the correct url.");
   is(frame2.getInfo().line, 123,
     "The second frame node has the correct line.");
+  is(frame2.getInfo().column, 987,
+    "The second frame node has the correct column.");
   is(frame2.getInfo().categoryData.toSource(), "({})",
     "The second frame node has the correct category data.");
   is(frame2.getInfo().isContent, true,
     "The second frame node has the correct content flag.");
 
   let frame3 = new FrameNode({
-    location: "hello/<.world (http://foo/#bar:123)",
+    location: "hello/<.world (http://foo/#bar:123:987)",
     line: 456
   });
 
@@ -69,13 +73,15 @@ function test() {
     "The third frame node has the correct url.");
   is(frame3.getInfo().line, 123,
     "The third frame node has the correct line.");
+  is(frame3.getInfo().column, 987,
+    "The third frame node has the correct column.");
   is(frame3.getInfo().categoryData.toSource(), "({})",
     "The third frame node has the correct category data.");
   is(frame3.getInfo().isContent, true,
     "The third frame node has the correct content flag.");
 
   let frame4 = new FrameNode({
-    location: "hello/<.world (http://foo/:123)",
+    location: "hello/<.world (http://foo/:123:987)",
     line: 456
   });
 
@@ -91,13 +97,15 @@ function test() {
     "The fourth frame node has the correct url.");
   is(frame4.getInfo().line, 123,
     "The fourth frame node has the correct line.");
+  is(frame4.getInfo().column, 987,
+    "The fourth frame node has the correct column.");
   is(frame4.getInfo().categoryData.toSource(), "({})",
     "The fourth frame node has the correct category data.");
   is(frame4.getInfo().isContent, true,
     "The fourth frame node has the correct content flag.");
 
   let frame5 = new FrameNode({
-    location: "hello/<.world (resource://foo.js -> http://bar/baz.js:123)",
+    location: "hello/<.world (resource://foo.js -> http://bar/baz.js:123:987)",
     line: 456
   });
 
@@ -113,6 +121,8 @@ function test() {
     "The fifth frame node has the correct url.");
   is(frame5.getInfo().line, 123,
     "The fifth frame node has the correct line.");
+  is(frame5.getInfo().column, 987,
+    "The fifth frame node has the correct column.");
   is(frame5.getInfo().categoryData.toSource(), "({})",
     "The fifth frame node has the correct category data.");
   is(frame5.getInfo().isContent, false,
@@ -121,6 +131,7 @@ function test() {
   let frame6 = new FrameNode({
     location: "Foo::Bar::Baz",
     line: 456,
+    column: 123,
     category: 8
   });
 
@@ -136,6 +147,8 @@ function test() {
     "The sixth frame node has the correct url.");
   is(frame6.getInfo().line, 456,
     "The sixth frame node has the correct line.");
+  is(frame6.getInfo().column, 123,
+    "The sixth frame node has the correct column.");
   is(frame6.getInfo().categoryData.abbrev, "other",
     "The sixth frame node has the correct category data.");
   is(frame6.getInfo().isContent, false,
@@ -157,6 +170,8 @@ function test() {
     "The seventh frame node has the correct url.");
   is(frame7.getInfo().line, null,
     "The seventh frame node has the correct line.");
+  is(frame7.getInfo().column, null,
+    "The seventh frame node has the correct column.");
   is(frame7.getInfo().categoryData.abbrev, "js",
     "The seventh frame node has the correct category data.");
   is(frame7.getInfo().isContent, false,

browser/devtools/profiler/test/browser_profiler_tree-view-04.js

@@ -59,7 +59,7 @@ function test() {
 
   let functionCell = D.target.childNodes[5];
 
-  is(functionCell.childNodes.length, 8,
+  is(functionCell.childNodes.length, 9,
     "The number of columns displayed for function cells is correct.");
   is(functionCell.childNodes[0].className, "arrow theme-twisty",
     "The first node displayed for function cells is correct.");
@@ -69,13 +69,15 @@ function test() {
     "The third node displayed for function cells is correct.");
   is(functionCell.childNodes[3].className, "plain call-tree-line",
     "The fourth node displayed for function cells is correct.");
-  is(functionCell.childNodes[4].className, "plain call-tree-host",
+  is(functionCell.childNodes[4].className, "plain call-tree-column",
     "The fifth node displayed for function cells is correct.");
-  is(functionCell.childNodes[5].className, "plain call-tree-zoom",
+  is(functionCell.childNodes[5].className, "plain call-tree-host",
+    "The fifth node displayed for function cells is correct.");
+  is(functionCell.childNodes[6].className, "plain call-tree-zoom",
     "The sixth node displayed for function cells is correct.");
-  is(functionCell.childNodes[6].tagName, "spacer",
+  is(functionCell.childNodes[7].tagName, "spacer",
     "The seventh node displayed for function cells is correct.");
-  is(functionCell.childNodes[7].className, "plain call-tree-category",
+  is(functionCell.childNodes[8].className, "plain call-tree-category",
     "The eight node displayed for function cells is correct.");
 
   finish();

browser/devtools/profiler/utils/tree-model.js

@@ -136,12 +136,15 @@ ThreadNode.prototype = {
  *        so it may very well (not?) include the function name, url, etc.
  * @param number line
  *        The line number inside the source containing this function call.
+ * @param number column
+ *        The column number inside the source containing this function call.
  * @param number category
  *        The category type of this function call ("js", "graphics" etc.).
  */
-function FrameNode({ location, line, category }) {
+function FrameNode({ location, line, column, category }) {
   this.location = location;
   this.line = line;
+  this.column = column;
   this.category = category;
   this.sampleTimes = [];
   this.samples = 0;
@@ -200,24 +203,28 @@ FrameNode.prototype = {
     // default to an "unknown" category otherwise.
     let categoryData = CATEGORY_MAPPINGS[this.category] || {};
 
-    // Parse the `location` for the function name, source url and line.
-    let firstParen = this.location.indexOf("(");
-    let lastColon = this.location.lastIndexOf(":");
-    let resource = this.location.substring(firstParen + 1, lastColon);
-    let line = this.location.substring(lastColon + 1).replace(")", "");
+    // Parse the `location` for the function name, source url, line, column etc.
+    let lineAndColumn = this.location.match(/((:\d+)*)\)?$/)[1];
+    let [, line, column] = lineAndColumn.split(":");
+    line = line || this.line;
+    column = column || this.column;
+
+    let firstParenIndex = this.location.indexOf("(");
+    let lineAndColumnIndex = this.location.indexOf(lineAndColumn);
+    let resource = this.location.substring(firstParenIndex + 1, lineAndColumnIndex);
+
     let url = resource.split(" -> ").pop();
     let uri = nsIURL(url);
     let functionName, fileName, hostName;
 
     // If the URI digged out from the `location` is valid, this is a JS frame.
     if (uri) {
-      functionName = this.location.substring(0, firstParen - 1);
+      functionName = this.location.substring(0, firstParenIndex - 1);
       fileName = (uri.fileName + (uri.ref ? "#" + uri.ref : "")) || "/";
       hostName = uri.host;
     } else {
       functionName = this.location;
       url = null;
-      line = null;
     }
 
     return {
@@ -226,7 +233,8 @@ FrameNode.prototype = {
       fileName: fileName,
       hostName: hostName,
       url: url,
-      line: line || this.line,
+      line: line,
+      column: column,
       categoryData: categoryData,
       isContent: !!isContent(this)
     };

browser/devtools/profiler/utils/tree-view.js

@@ -237,6 +237,11 @@ CallView.prototype = Heritage.extend(AbstractTreeItem.prototype, {
     lineNode.setAttribute("value", frameInfo.line ? ":" + frameInfo.line : "");
     cell.appendChild(lineNode);
 
+    let columnNode = this.document.createElement("label");
+    columnNode.className = "plain call-tree-column";
+    columnNode.setAttribute("value", frameInfo.column ? ":" + frameInfo.column : "");
+    cell.appendChild(columnNode);
+
     let hostNode = this.document.createElement("label");
     hostNode.className = "plain call-tree-host";
     hostNode.setAttribute("value", frameInfo.hostName || "");

browser/themes/shared/devtools/performance.inc.css

@@ -142,7 +142,8 @@
 
 .call-tree-item:not([origin="content"]) .call-tree-name,
 .call-tree-item:not([origin="content"]) .call-tree-url,
-.call-tree-item:not([origin="content"]) .call-tree-line {
+.call-tree-item:not([origin="content"]) .call-tree-line,
+.call-tree-item:not([origin="content"]) .call-tree-column {
   /* Style chrome and non-JS nodes differently. */
   opacity: 0.6;
 }
@@ -164,14 +165,21 @@
   color: var(--theme-highlight-orange);
 }
 
+.call-tree-column {
+  color: var(--theme-highlight-orange);
+  opacity: 0.6;
+}
+
 .call-tree-host {
   -moz-margin-start: 8px !important;
   font-size: 90%;
   color: var(--theme-content-color2);
 }
 
+.call-tree-name[value=""],
 .call-tree-url[value=""],
 .call-tree-line[value=""],
+.call-tree-column[value=""],
 .call-tree-host[value=""] {
   display: none;
 }

browser/themes/shared/devtools/profiler.inc.css

@@ -305,7 +305,8 @@
 
 .call-tree-item:not([origin="content"]) .call-tree-name,
 .call-tree-item:not([origin="content"]) .call-tree-url,
-.call-tree-item:not([origin="content"]) .call-tree-line {
+.call-tree-item:not([origin="content"]) .call-tree-line,
+.call-tree-item:not([origin="content"]) .call-tree-column {
   /* Style chrome and non-JS nodes differently. */
   opacity: 0.6;
 }
@@ -323,19 +324,25 @@
   color: var(--theme-highlight-blue);
 }
 
-
 .call-tree-line {
   color: var(--theme-highlight-orange);
 }
 
+.call-tree-column {
+  color: var(--theme-highlight-orange);
+  opacity: 0.6;
+}
+
 .call-tree-host {
   -moz-margin-start: 8px !important;
   font-size: 90%;
   color: var(--theme-content-color2);
 }
 
+.call-tree-name[value=""],
 .call-tree-url[value=""],
 .call-tree-line[value=""],
+.call-tree-column[value=""],
 .call-tree-host[value=""] {
   display: none;
 }