Bug 1219854 - Add more robust source name parsing for displaying allocation stack tree items; r=jsantell

browser/locales/en-US/chrome/browser/devtools/memory.properties

@@ -117,3 +117,8 @@ heapview.field.totalcount=Total Count
 
 # LOCALIZATION NOTE (heapview.field.name): The name of the column in the heap view for name.
 heapview.field.name=Name
+
+# LOCALIZATION NOTE (unknownSource): When we do not know the source filename of
+# a frame in the allocation stack breakdown tree view, we use this string
+# instead.
+unknownSource=(unknown)

devtools/client/memory/components/frame.js

@@ -3,8 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const { DOM: dom, createClass, PropTypes } = require("devtools/client/shared/vendor/react");
-const { L10N } = require("../utils");
-const { URL } = require("sdk/url");
+const { L10N, parseSource } = require("../utils");
 
 const Frame = module.exports = createClass({
   displayName: "frame-view",
@@ -16,25 +15,24 @@ const Frame = module.exports = createClass({
 
   render() {
     let { toolbox, frame } = this.props;
+    const { short, long, host } = parseSource(frame);
 
-    let url = new URL(frame.source);
-    let spec = url.toString();
     let func = frame.functionDisplayName || "";
-    let tooltip = `${func} (${spec}:${frame.line}:${frame.column})`;
-    let viewTooltip = L10N.getFormatStr("viewsourceindebugger", `${spec}:${frame.line}:${frame.column}`);
-    let onClick = () => toolbox.viewSourceInDebugger(spec, frame.line);
+    let tooltip = `${func} (${long}:${frame.line}:${frame.column})`;
+    let viewTooltip = L10N.getFormatStr("viewsourceindebugger", `${long}:${frame.line}:${frame.column}`);
+    let onClick = () => toolbox.viewSourceInDebugger(long, frame.line);
 
     let fields = [
       dom.span({ className: "frame-link-function-display-name" }, func),
-      dom.a({ className: "frame-link-filename", onClick, title: viewTooltip }, url.fileName),
+      dom.a({ className: "frame-link-filename", onClick, title: viewTooltip }, short),
       dom.span({ className: "frame-link-colon" }, ":"),
       dom.span({ className: "frame-link-line" }, frame.line),
       dom.span({ className: "frame-link-colon" }, ":"),
       dom.span({ className: "frame-link-column" }, frame.column)
     ];
 
-    if (url.scheme === "http" || url.scheme === "https" || url.scheme === "ftp") {
-      fields.push(dom.span({ className: "frame-link-host" }, url.host));
+    if (host) {
+      fields.push(dom.span({ className: "frame-link-host" }, host));
     }
 
     return dom.span({ className: "frame-link", title: tooltip }, ...fields);

devtools/client/memory/test/unit/test_utils.js

@@ -49,3 +49,22 @@ add_task(function *() {
   ok(utils.breakdownEquals(utils.getCustomBreakdowns()["My Breakdown"], custom),
     "utils.getCustomBreakdowns() returns custom breakdowns");
 });
+
+// Test `utils.parseSource`.
+add_task(function* () {
+  const url = "http://example.com/foo/bar/baz.js";
+  let results = utils.parseSource(url);
+  equal(results.short, "baz.js");
+  equal(results.long, url);
+  equal(results.host, "example.com");
+
+  results = utils.parseSource("self-hosted");
+  equal(results.short, "self-hosted");
+  equal(results.long, "self-hosted");
+  equal(results.host, undefined);
+
+  results = utils.parseSource("");
+  equal(typeof results.short, "string");
+  equal(typeof results.long, "string");
+  equal(results.host, undefined);
+});

devtools/client/memory/utils.js

@@ -3,9 +3,12 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const { Cu } = require("chrome");
+
 Cu.import("resource://devtools/client/shared/widgets/ViewHelpers.jsm");
 const STRINGS_URI = "chrome://browser/locale/devtools/memory.properties"
 const L10N = exports.L10N = new ViewHelpers.L10N(STRINGS_URI);
+
+const { URL } = require("sdk/url");
 const { assert } = require("devtools/shared/DevToolsUtils");
 const { Preferences } = require("resource://gre/modules/Preferences.jsm");
 const CUSTOM_BREAKDOWN_PREF = "devtools.memory.custom-breakdowns";
@@ -268,3 +271,46 @@ exports.getSnapshotTotals = function (snapshot) {
     count: count || 0,
   };
 };
+
+/**
+ * Parse a source into a short and long name as well as a host name.
+ *
+ * @param {String} source
+ *        The source to parse.
+ *
+ * @returns {Object}
+ *          An object with the following properties:
+ *            - {String} short: A short name for the source.
+ *            - {String} long: The full, long name for the source.
+ *            - {String?} host: If available, the host name for the source.
+ */
+exports.parseSource = function (source) {
+  const sourceStr = source ? String(source) : "";
+
+  let short;
+  let long;
+  let host;
+
+  try {
+    const url = new URL(sourceStr);
+    short = url.fileName;
+    host = url.host;
+    long = url.toString();
+  } catch (e) {
+    // Malformed URI.
+    long = sourceStr;
+    short = sourceStr.slice(0, 100);
+  }
+
+  if (!short) {
+    // Last ditch effort.
+
+    if (!long) {
+      long = L10N.getStr("unknownSource");
+    }
+
+    short = long.slice(0, 100);
+  }
+
+  return { short, long, host };
+};