Bug 723047 - Stack frames should display the location next to the function name; r=past

browser/devtools/debugger/debugger-view.js

@@ -150,35 +150,35 @@ DebuggerView.Stackframes = {
    *
    * @param number aDepth
    *        The frame depth specified by the debugger.
-   * @param string aFrameIdText
-   *        The id to be displayed in the list.
    * @param string aFrameNameText
    *        The name to be displayed in the list.
+   * @param string aFrameDetailsText
+   *        The details to be displayed in the list.
    * @return object
    *         The newly created html node representing the added frame.
    */
-  addFrame: function DVF_addFrame(aDepth, aFrameIdText, aFrameNameText) {
+  addFrame: function DVF_addFrame(aDepth, aFrameNameText, aFrameDetailsText) {
     // make sure we don't duplicate anything
     if (document.getElementById("stackframe-" + aDepth)) {
       return null;
     }
 
     let frame = document.createElement("div");
-    let frameId = document.createElement("span");
     let frameName = document.createElement("span");
+    let frameDetails = document.createElement("span");
 
     // create a list item to be added to the stackframes container
     frame.id = "stackframe-" + aDepth;
     frame.className = "dbg-stackframe list-item";
 
-    // this list should display the id and name of the frame
-    frameId.className = "dbg-stackframe-id";
+    // this list should display the name and details for the frame
     frameName.className = "dbg-stackframe-name";
-    frameId.appendChild(document.createTextNode(aFrameIdText));
+    frameDetails.className = "dbg-stackframe-details";
     frameName.appendChild(document.createTextNode(aFrameNameText));
+    frameDetails.appendChild(document.createTextNode(aFrameDetailsText));
 
-    frame.appendChild(frameId);
     frame.appendChild(frameName);
+    frame.appendChild(frameDetails);
 
     this._frames.appendChild(frame);
 

browser/devtools/debugger/debugger.css

@@ -67,6 +67,26 @@
   overflow: auto;
 }
 
+.dbg-stackframe {
+  display: block;
+}
+
+.dbg-stackframe-name {
+  float: left;
+}
+
+.dbg-stackframe-details {
+  float: right;
+}
+
+.dbg-stackframe-name:-moz-locale-dir(rtl) {
+  float: right;
+}
+
+.dbg-stackframe-details:-moz-locale-dir(rtl) {
+  float: left;
+}
+
 /**
  * Properties elements
  */

browser/devtools/debugger/debugger.js

@@ -370,10 +370,12 @@ var StackFrames = {
    */
   _addFramePanel: function SF_addFramePanel(aFrame) {
     let depth = aFrame.depth;
-    let idText = "#" + aFrame.depth + " ";
-    let nameText = this._frameTitle(aFrame);
+    let label = SourceScripts._getScriptLabel(aFrame.where.url);
 
-    let panel = DebuggerView.Stackframes.addFrame(depth, idText, nameText);
+    let startText = this._frameTitle(aFrame);
+    let endText = label + ":" + aFrame.where.line;
+
+    let panel = DebuggerView.Stackframes.addFrame(depth, startText, endText);
 
     if (panel) {
       panel.stackFrame = aFrame;
@@ -397,7 +399,7 @@ var StackFrames = {
    */
   _frameTitle: function SF_frameTitle(aFrame) {
     if (aFrame.type == "call") {
-      return aFrame["calleeName"] ? aFrame["calleeName"] + "()" : "(anonymous)";
+      return aFrame["calleeName"] ? aFrame["calleeName"] : "(anonymous)";
     }
 
     return "(" + aFrame.type + ")";

browser/themes/gnomestripe/devtools/debugger.css

@@ -116,8 +116,13 @@ a {
   background-color: white;
 }
 
-.dbg-stackframe-id {
-  -moz-padding-end: 1em;
+.dbg-stackframe {
+  -moz-padding-start: 4px;
+  -moz-padding-end: 4px;
+}
+
+.dbg-stackframe-name {
+  font-weight: 600;
 }
 
 /**

browser/themes/pinstripe/devtools/debugger.css

@@ -120,8 +120,13 @@ a {
   background-color: white;
 }
 
-.dbg-stackframe-id {
-  -moz-padding-end: 1em;
+.dbg-stackframe {
+  -moz-padding-start: 4px;
+  -moz-padding-end: 4px;
+}
+
+.dbg-stackframe-name {
+  font-weight: 600;
 }
 
 /**

browser/themes/winstripe/devtools/debugger.css

@@ -116,8 +116,13 @@ a {
   background-color: white;
 }
 
-.dbg-stackframe-id {
-  -moz-padding-end: 1em;
+.dbg-stackframe {
+  -moz-padding-start: 4px;
+  -moz-padding-end: 4px;
+}
+
+.dbg-stackframe-name {
+  font-weight: 600;
 }
 
 /**