Bug 1219073 - part 2 - Add styling and link to the debugger of SavedFrames in memory tool tree. r=fitzgen

devtools/client/memory/app.js

@@ -31,12 +31,14 @@ const App = createClass({
   childContextTypes: {
     front: PropTypes.any,
     heapWorker: PropTypes.any,
+    toolbox: PropTypes.any,
   },
 
   getChildContext() {
     return {
       front: this.props.front,
       heapWorker: this.props.heapWorker,
+      toolbox: this.props.toolbox,
     }
   },
 
@@ -48,7 +50,8 @@ const App = createClass({
       heapWorker,
       breakdown,
       allocations,
-      inverted
+      inverted,
+      toolbox,
     } = this.props;
 
     let selectedSnapshot = snapshots.find(s => s.selected);
@@ -79,6 +82,7 @@ const App = createClass({
           HeapView({
             snapshot: selectedSnapshot,
             onSnapshotClick: () => dispatch(takeSnapshotAndCensus(front, heapWorker)),
+            toolbox
           })
         )
       )

devtools/client/memory/components/frame.js

@@ -0,0 +1,40 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const { DOM: dom, createClass, PropTypes } = require("devtools/client/shared/vendor/react");
+const { URL } = require("sdk/url");
+
+const Frame = module.exports = createClass({
+  displayName: "frame-view",
+
+  propTypes: {
+    frame: PropTypes.object.isRequired,
+    toolbox: PropTypes.object.isRequired,
+  },
+
+  render() {
+    let { toolbox, frame } = this.props;
+
+    let url = new URL(frame.source);
+    let spec = url.toString();
+    let func = frame.functionDisplayFrame || "";
+    let tooltip = `${func} (${spec}:${frame.line}:${frame.column})`;
+    let onClick = () => toolbox.viewSourceInDebugger(spec, frame.line);
+
+    let fields = [
+      dom.span({ className: "frame-link-function-display-name" }, func),
+      dom.a({ className: "frame-link-filename", onClick }, url.fileName),
+      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));
+    }
+
+    return dom.span({ className: "frame-link", title: tooltip }, ...fields);
+  }
+});

devtools/client/memory/components/heap.js

@@ -37,13 +37,13 @@ function createParentMap (node, aggregator=Object.create(null)) {
  * @param {CensusTreeNode} census
  * @return {Object}
  */
-function createTreeProperties (census) {
+function createTreeProperties (census, toolbox) {
   let map = createParentMap(census);
 
   return {
-    getParent: node => map(node.id),
+    getParent: node => map[node.id],
     getChildren: node => node.children || [],
-    renderItem: (item, depth, focused, arrow) => new TreeItem({ item, depth, focused, arrow }),
+    renderItem: (item, depth, focused, arrow) => new TreeItem({ toolbox, item, depth, focused, arrow }),
     getRoots: () => census.children,
     getKey: node => node.id,
     itemHeight: HEAP_TREE_ROW_HEIGHT,
@@ -68,7 +68,7 @@ const Heap = module.exports = createClass({
   },
 
   render() {
-    let { snapshot, onSnapshotClick } = this.props;
+    let { snapshot, onSnapshotClick, toolbox } = this.props;
     let census = snapshot ? snapshot.census : null;
     let state = snapshot ? snapshot.state : "initial";
     let statusText = snapshot ? getSnapshotStatusTextFull(snapshot) : "";
@@ -107,7 +107,7 @@ const Heap = module.exports = createClass({
             dom.span({ className: "heap-tree-item-total-count" }, "Total Count"),
             dom.span({ className: "heap-tree-item-name" }, "Name")
           ),
-          Tree(createTreeProperties(snapshot.census))
+          Tree(createTreeProperties(snapshot.census, toolbox))
         ];
         break;
     }

devtools/client/memory/components/moz.build

@@ -4,6 +4,7 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
+    'frame.js',
     'heap.js',
     'list.js',
     'snapshot-list-item.js',

devtools/client/memory/components/tree-item.js

@@ -3,7 +3,8 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const { isSavedFrame } = require("devtools/shared/DevToolsUtils");
-const { DOM: dom, createClass, PropTypes } = require("devtools/client/shared/vendor/react");
+const { DOM: dom, createClass, createFactory, PropTypes } = require("devtools/client/shared/vendor/react");
+const FrameView = createFactory(require("./frame"));
 
 const INDENT = 10;
 const MAX_SOURCE_LENGTH = 200;
@@ -17,36 +18,23 @@ const TreeItem = module.exports = createClass({
   displayName: "tree-item",
 
   render() {
-    let { item, depth, arrow, focused } = this.props;
+    let { item, depth, arrow, focused, toolbox } = this.props;
 
     return dom.div({ className: `heap-tree-item ${focused ? "focused" :""}` },
-      dom.span({ className: "heap-tree-item-bytes" }, item.bytes),
-      dom.span({ className: "heap-tree-item-count" }, item.count),
-      dom.span({ className: "heap-tree-item-total-bytes" }, item.totalBytes),
-      dom.span({ className: "heap-tree-item-total-count" }, item.totalCount),
-      dom.span({ className: "heap-tree-item-name", style: { marginLeft: depth * INDENT }},
+      dom.span({ className: "heap-tree-item-field heap-tree-item-bytes" }, item.bytes),
+      dom.span({ className: "heap-tree-item-field heap-tree-item-count" }, item.count),
+      dom.span({ className: "heap-tree-item-field heap-tree-item-total-bytes" }, item.totalBytes),
+      dom.span({ className: "heap-tree-item-field heap-tree-item-total-count" }, item.totalCount),
+      dom.span({ className: "heap-tree-item-field heap-tree-item-name", style: { marginLeft: depth * INDENT }},
         arrow,
-        this.toLabel(item.name)
+        this.toLabel(item.name, toolbox)
       )
     );
   },
 
-  toLabel(name) {
+  toLabel(name, toolbox) {
     return isSavedFrame(name)
-      ? this.savedFrameToLabel(name)
+      ? FrameView({ frame: name, toolbox })
       : String(name);
   },
-
-  savedFrameToLabel(frame) {
-    return [
-      dom.span({ className: "heap-tree-item-function-display-name" },
-               frame.functionDisplayFrame || ""),
-      dom.span({ className: "heap-tree-item-at" }, "@"),
-      dom.span({ className: "heap-tree-item-source" }, frame.source.slice(0, MAX_SOURCE_LENGTH)),
-      dom.span({ className: "heap-tree-item-colon" }, ":"),
-      dom.span({ className: "heap-tree-item-line" }, frame.line),
-      dom.span({ className: "heap-tree-item-colon" }, ":"),
-      dom.span({ className: "heap-tree-item-column" }, frame.column)
-    ];
-  }
 });

devtools/client/memory/initializer.js

@@ -28,7 +28,7 @@ function initialize () {
   return Task.spawn(function*() {
     let root = document.querySelector("#app");
     gStore = Store();
-    let app = createElement(App, { front: gFront, heapWorker: gHeapAnalysesClient });
+    let app = createElement(App, { toolbox: gToolbox, front: gFront, heapWorker: gHeapAnalysesClient });
     let provider = createElement(Provider, { store: gStore }, app);
     render(provider, root);
     unsubscribe = gStore.subscribe(onStateChange);

devtools/client/themes/memory.css

@@ -218,7 +218,7 @@ html, .theme-body, #app, #memory-tool, #memory-tool-container {
   height: var(--heap-tree-row-height);
 }
 
-.heap-tree-item span, .header span {
+.heap-tree-item-field, .header span {
   float: left;
 }
 
@@ -267,7 +267,7 @@ html, .theme-body, #app, #memory-tool, #memory-tool-container {
 }
 
 .heap-tree-item-name {
-  padding-left: 10px;
+  padding-left: 5px;
 }
 
 .error::before {
@@ -286,3 +286,34 @@ html, .theme-body, #app, #memory-tool, #memory-tool-container {
 .theme-light .error::before {
   background-image: url(chrome://devtools/skin/themes/images/webconsole.svg#light-icons);
 }
+
+/**
+ * Frame View components
+ */
+
+.focused .frame-link-filename,
+.focused .frame-link-column,
+.focused .frame-link-line,
+.focused .frame-link-host,
+.focused .frame-link-colon {
+  color: var(--theme-selection-color);
+}
+
+.frame-link-filename {
+  color: var(--theme-highlight-blue);
+  cursor: pointer;
+}
+
+.frame-link-filename:hover {
+  text-decoration: underline;
+}
+
+.frame-link-column, .frame-link-line, .frame-link-colon {
+  color: var(--theme-highlight-orange);
+}
+
+.frame-link-host {
+  font-size: 90%;
+  margin-left: 5px;
+  color: var(--theme-content-color2);
+}