Merge m-c to fx-team

browser/devtools/commandline/test/head.js

@@ -67,5 +67,10 @@ registerCleanupFunction(function tearDown() {
     gBrowser.removeCurrentTab();
   }
 
-  console = undefined;
+  // Force GC, because it seems that GCLI can outrun the garbage collector
+  // in some situations, which causes test failures in later tests
+  // Bug 774619 is an example.
+  window.QueryInterface(Ci.nsIInterfaceRequestor)
+      .getInterface(Ci.nsIDOMWindowUtils)
+      .garbageCollect();
 });

browser/devtools/debugger/test/Makefile.in

@@ -85,6 +85,7 @@ MOCHITEST_BROWSER_TESTS = \
 	browser_dbg_iframes.js \
 	browser_dbg_pause-exceptions.js \
 	browser_dbg_multiple-windows.js \
+	browser_dbg_bfcache.js \
 	browser_dbg_breakpoint-new-script.js \
 	browser_dbg_bug737803_editor_actual_location.js \
 	browser_dbg_progress-listener-bug.js \
@@ -93,14 +94,6 @@ MOCHITEST_BROWSER_TESTS = \
 	head.js \
 	$(NULL)
 
-ifneq ($(OS_ARCH),WINNT)
-MOCHITEST_BROWSER_TESTS += \
-	browser_dbg_bfcache.js \
-	$(NULL)
-else
-$(filter disabled-temporarily--bug-774619, browser_dbg_bfcache.js)
-endif
-
 MOCHITEST_BROWSER_PAGES = \
 	browser_dbg_tab1.html \
 	browser_dbg_tab2.html \

browser/devtools/framework/Target.jsm

@@ -217,6 +217,7 @@ TabTarget.prototype = {
     this.tab.linkedBrowser.addProgressListener(this._webProgressListener);
     this.tab.addEventListener("TabClose", this);
     this.tab.parentNode.addEventListener("TabSelect", this);
+    this.tab.ownerDocument.defaultView.addEventListener("close", this);
     this._handleThreadState = this._handleThreadState.bind(this);
     this.on("thread-resumed", this._handleThreadState);
     this.on("thread-paused", this._handleThreadState);
@@ -228,6 +229,7 @@ TabTarget.prototype = {
   handleEvent: function (event) {
     switch (event.type) {
       case "TabClose":
+      case "close":
         this.destroy();
         break;
       case "TabSelect":
@@ -264,6 +266,7 @@ TabTarget.prototype = {
       this.tab.linkedBrowser.removeProgressListener(this._webProgressListener)
       this._webProgressListener.target = null;
       this._webProgressListener = null;
+      this.tab.ownerDocument.defaultView.removeEventListener("close", this);
       this.tab.removeEventListener("TabClose", this);
       this.tab.parentNode.removeEventListener("TabSelect", this);
       this.off("thread-resumed", this._handleThreadState);

browser/devtools/framework/Toolbox.jsm

@@ -256,6 +256,7 @@ Toolbox.prototype = {
         this._buildDockButtons();
         this._buildTabs();
         this._buildButtons();
+        this._addKeysToWindow();
 
         this.selectTool(this._defaultToolId).then(function(panel) {
           this.emit("ready");
@@ -270,6 +271,39 @@ Toolbox.prototype = {
     return deferred.promise;
   },
 
+  /**
+   * Adds the keys and commands to the Toolbox Window in window mode.
+   */
+  _addKeysToWindow: function TBOX__addKeysToWindow() {
+    if (this.hostType != Toolbox.HostType.WINDOW) {
+      return;
+    }
+    let doc = this.doc.defaultView.parent.document;
+    for (let [id, toolDefinition] of gDevTools._tools) {
+      if (toolDefinition.key) {
+        // Prevent multiple entries for the same tool.
+        if (doc.getElementById("key_" + id)) {
+          continue;
+        }
+        let key = doc.createElement("key");
+        key.id = "key_" + id;
+
+        if (toolDefinition.key.startsWith("VK_")) {
+          key.setAttribute("keycode", toolDefinition.key);
+        } else {
+          key.setAttribute("key", toolDefinition.key);
+        }
+
+        key.setAttribute("modifiers", toolDefinition.modifiers);
+        key.setAttribute("oncommand", "void(0);"); // needed. See bug 371900
+        key.addEventListener("command", function(toolId) {
+          this.selectTool(toolId);
+        }.bind(this, id), true);
+        doc.getElementById("toolbox-keyset").appendChild(key);
+      }
+    }
+  },
+
   /**
    * Build the buttons for changing hosts. Called every time
    * the host changes.
@@ -371,6 +405,8 @@ Toolbox.prototype = {
 
     tabs.appendChild(radio);
     deck.appendChild(vbox);
+
+    this._addKeysToWindow();
   },
 
   /**
@@ -520,6 +556,7 @@ Toolbox.prototype = {
       Services.prefs.setCharPref(this._prefs.LAST_HOST, this._host.type);
 
       this._buildDockButtons();
+      this._addKeysToWindow();
 
       this.emit("host-changed");
     }.bind(this));
@@ -570,6 +607,14 @@ Toolbox.prototype = {
       panel.parentNode.removeChild(panel);
     }
 
+    if (this.hostType == Toolbox.HostType.WINDOW) {
+      let doc = this.doc.defaultView.parent.document;
+      let key = doc.getElementById("key_" + id);
+      if (key) {
+        key.parentNode.removeChild(key);
+      }
+    }
+
     if (this._toolPanels.has(toolId)) {
       let instance = this._toolPanels.get(toolId);
       instance.destroy();

browser/devtools/framework/test/Makefile.in

@@ -21,6 +21,7 @@ MOCHITEST_BROWSER_FILES = \
 		browser_target_events.js \
 		browser_toolbox_tool_ready.js \
 		browser_toolbox_sidebar.js \
+		browser_toolbox_window_shortcuts.js \
 		$(NULL)
 
 include $(topsrcdir)/config/rules.mk

browser/devtools/framework/test/browser_toolbox_window_shortcuts.js

@@ -0,0 +1,73 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let temp = {};
+Cu.import("resource:///modules/devtools/Toolbox.jsm", temp);
+let Toolbox = temp.Toolbox;
+temp = null;
+
+let toolbox, toolIDs, idIndex;
+
+function test() {
+  waitForExplicitFinish();
+
+  addTab("about:blank", function() {
+    toolIDs = [];
+    for (let [id, definition] of gDevTools._tools) {
+      if (definition.key) {
+        toolIDs.push(id);
+      }
+    }
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    idIndex = 0;
+    gDevTools.showToolbox(target, toolIDs[0], Toolbox.HostType.WINDOW)
+             .then(testShortcuts);
+  });
+}
+
+function testShortcuts(aToolbox, aIndex) {
+  if (aIndex == toolIDs.length) {
+    tidyUp();
+    return;
+  }
+
+  toolbox = aToolbox;
+  info("Toolbox fired a `ready` event");
+
+  toolbox.once("select", selectCB);
+
+  if (aIndex != null) {
+    // This if block is to allow the call of selectCB without shortcut press for
+    // the first time. That happens because on opening of toolbox, one tool gets
+    // selected atleast.
+
+    let key = gDevTools._tools.get(toolIDs[aIndex]).key;
+    let toolModifiers = gDevTools._tools.get(toolIDs[aIndex]).modifiers;
+    let modifiers = {
+      accelKey: toolModifiers.contains("accel"),
+      altKey: toolModifiers.contains("alt"),
+      shiftKey: toolModifiers.contains("shift"),
+    };
+    idIndex = aIndex;
+    info("Testing shortcut for tool " + aIndex + ":" + toolIDs[aIndex] +
+         " using key " + key);
+    EventUtils.synthesizeKey(key, modifiers, toolbox.doc.defaultView.parent);
+  }
+}
+
+function selectCB(event, id) {
+  info("toolbox-select event from " + id);
+
+  is(toolIDs.indexOf(id), idIndex,
+     "Correct tool is selected on pressing the shortcut for " + id);
+
+  testShortcuts(toolbox, idIndex + 1);
+}
+
+function tidyUp() {
+  toolbox.destroy();
+  gBrowser.removeCurrentTab();
+
+  toolbox = toolIDs = idIndex = Toolbox = null;
+  finish();
+}

browser/devtools/framework/toolbox-window.xul

@@ -15,7 +15,7 @@
         macanimationtype="document"
         fullscreenbutton="true"
         windowtype="devtools:toolbox"
-        width="700" height="320"
+        width="900" height="320"
         persist="screenX screenY width height sizemode">
 
   <commandset id="toolbox-commandset">

browser/devtools/webconsole/webconsole.js

@@ -993,12 +993,24 @@ WebConsoleFrame.prototype = {
   {
     let body = null;
     let clipboardText = null;
-    let sourceURL = null;
+    let sourceURL = aMessage.filename;
-    let sourceLine = 0;
+    let sourceLine = aMessage.lineNumber;
     let level = aMessage.level;
     let args = aMessage.arguments;
     let objectActors = [];
 
+    // Gather the actor IDs.
+    args.forEach(function(aValue) {
+      if (aValue && typeof aValue == "object" && aValue.actor) {
+        objectActors.push(aValue.actor);
+        let displayStringIsLong = typeof aValue.displayString == "object" &&
+                                  aValue.displayString.type == "longString";
+        if (displayStringIsLong) {
+          objectActors.push(aValue.displayString.actor);
+        }
+      }
+    }, this);
+
     switch (level) {
       case "log":
       case "info":
@@ -1012,51 +1024,32 @@ WebConsoleFrame.prototype = {
         args.forEach(function(aValue) {
           clipboardArray.push(WebConsoleUtils.objectActorGripToString(aValue));
           if (aValue && typeof aValue == "object" && aValue.actor) {
-            objectActors.push(aValue.actor);
             let displayStringIsLong = typeof aValue.displayString == "object" &&
                                       aValue.displayString.type == "longString";
             if (aValue.type == "longString" || displayStringIsLong) {
               clipboardArray.push(l10n.getStr("longStringEllipsis"));
             }
-            if (displayStringIsLong) {
-              objectActors.push(aValue.displayString.actor);
-            }
           }
         }, this);
         clipboardText = clipboardArray.join(" ");
-        sourceURL = aMessage.filename;
-        sourceLine = aMessage.lineNumber;
 
         if (level == "dir") {
           body.objectProperties = aMessage.objectProperties;
         }
-        else if (level == "groupEnd") {
-          objectActors.forEach(this._releaseObject, this);
-
-          if (this.groupDepth > 0) {
-            this.groupDepth--;
-          }
-          return; // no need to continue
-        }
-
         break;
       }
 
       case "trace": {
-        let filename = WebConsoleUtils.abbreviateSourceURL(args[0].filename);
+        let filename = WebConsoleUtils.abbreviateSourceURL(aMessage.filename);
-        let functionName = args[0].functionName ||
+        let functionName = aMessage.functionName ||
                            l10n.getStr("stacktrace.anonymousFunction");
-        let lineNumber = args[0].lineNumber;
 
         body = l10n.getFormatStr("stacktrace.outputMessage",
-                                 [filename, functionName, lineNumber]);
+                                 [filename, functionName, sourceLine]);
-
-        sourceURL = args[0].filename;
-        sourceLine = args[0].lineNumber;
 
         clipboardText = "";
 
-        args.forEach(function(aFrame) {
+        aMessage.stacktrace.forEach(function(aFrame) {
           clipboardText += aFrame.filename + " :: " +
                            aFrame.functionName + " :: " +
                            aFrame.lineNumber + "\n";
@@ -1068,41 +1061,59 @@ WebConsoleFrame.prototype = {
 
       case "group":
       case "groupCollapsed":
-        clipboardText = body = args;
+        clipboardText = body = aMessage.groupName;
-        sourceURL = aMessage.filename;
-        sourceLine = aMessage.lineNumber;
         this.groupDepth++;
         break;
 
-      case "time":
+      case "time": {
-        if (!args) {
+        let timer = aMessage.timer;
+        if (!timer) {
           return;
         }
-        if (args.error) {
+        if (timer.error) {
-          Cu.reportError(l10n.getStr(args.error));
+          Cu.reportError(l10n.getStr(timer.error));
           return;
         }
-        body = l10n.getFormatStr("timerStarted", [args.name]);
+        body = l10n.getFormatStr("timerStarted", [timer.name]);
         clipboardText = body;
-        sourceURL = aMessage.filename;
-        sourceLine = aMessage.lineNumber;
         break;
+      }
 
-      case "timeEnd":
+      case "timeEnd": {
-        if (!args) {
+        let timer = aMessage.timer;
+        if (!timer) {
           return;
         }
-        body = l10n.getFormatStr("timeEnd", [args.name, args.duration]);
+        body = l10n.getFormatStr("timeEnd", [timer.name, timer.duration]);
         clipboardText = body;
-        sourceURL = aMessage.filename;
-        sourceLine = aMessage.lineNumber;
         break;
+      }
 
       default:
         Cu.reportError("Unknown Console API log level: " + level);
         return;
     }
 
+    // Release object actors for arguments coming from console API methods that
+    // we ignore their arguments.
+    switch (level) {
+      case "group":
+      case "groupCollapsed":
+      case "groupEnd":
+      case "trace":
+      case "time":
+      case "timeEnd":
+        objectActors.forEach(this._releaseObject, this);
+        objectActors = [];
+    }
+
+    if (level == "groupEnd") {
+      if (this.groupDepth > 0) {
+        this.groupDepth--;
+      }
+      return; // no need to continue
+    }
+
     let node = this.createMessageNode(CATEGORY_WEBDEV, LEVELS[level], body,
                                       sourceURL, sourceLine, clipboardText,
                                       level, aMessage.timeStamp);
@@ -1114,7 +1125,7 @@ WebConsoleFrame.prototype = {
     // Make the node bring up the property panel, to allow the user to inspect
     // the stack trace.
     if (level == "trace") {
-      node._stacktrace = args;
+      node._stacktrace = aMessage.stacktrace;
 
       this.makeOutputMessageLink(node, function _traceNodeClickCallback() {
         if (node._panelOpen) {

browser/themes/gnomestripe/devtools/common.css

@@ -15,9 +15,10 @@
 .devtools-toolbar {
   -moz-appearance: none;
   padding: 4px 3px;
-  box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
-  background: -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
   color: hsl(210,30%,85%);
+  background-image: url(background-noise-toolbar.png), linear-gradient(#3e4750, #3e4750);
+  border-bottom: 1px solid #060a0d;
+  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, -1px 0 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(204,45%,98%,.05) inset;
 }
 
 .devtools-menulist,
@@ -221,11 +222,15 @@
 .devtools-sidebar-tabs > tabs {
   -moz-appearance: none;
   position: static;
-  box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
-  background-image: linear-gradient(to bottom, hsl(210,11%,36%), hsl(210,11%,18%));
   color: hsl(210,30%,85%);
   margin-bottom: 0;
   padding: 0;
+  background-image: url(background-noise-toolbar.png), linear-gradient(#3e4750, #3e4750);
+  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, -1px 0 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(204,45%,98%,.05) inset;
+  border-width: 0 0 1px 0;
+  border-color: hsla(210,8%,5%,.6);
+  border-style: solid;
+  overflow: hidden;
 }
 
 .devtools-sidebar-tabs > tabs > .tabs-right,
@@ -235,33 +240,84 @@
 
 .devtools-sidebar-tabs > tabs > tab {
   -moz-appearance: none;
-  padding: 0;
+  /* We want to match the height of a toolbar with a toolbarbutton 
+   * First, we need to replicated the padding of toolbar (4px),
+   * then, the padding of the button itself from toolbarbutton.css (3px),
+   * Also, we need to take the border of the buttons into accout (1px).
+   * Padding-bottom is one pixel shorter because we need to include the
+   * black border.
+   */
+  padding: 8px 3px 7px;
+  -moz-padding-start: 6px;
   margin: 0;
   min-width: 78px;
-  min-height: 22px;
   text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
   text-align: center;
   color: inherit;
   -moz-box-flex: 1;
   border-width: 0;
-  -moz-border-end-width: 1px;
-  border-color: hsla(210,8%,5%,.6);
-  border-style: solid;
   background: transparent;
   border-radius: 0;
-}
-
-.devtools-sidebar-tabs > tabs > tab:-moz-focusring {
   position: static;
+  -moz-margin-start: -1px;
 }
 
-.devtools-sidebar-tabs > tabs > tab:last-of-type {
+.devtools-sidebar-tabs > tabs > tab:first-of-type {
-  -moz-border-end-width: 0;
+  -moz-margin-start: -3px;
+}
+
+.devtools-sidebar-tabs > tabs > tab {
+  background-size: 100% 100%, 1px 100%, 1px 100%, 1px 100%;
+  background-repeat: no-repeat;
+  background-position: 2px, 0, 1px, 2px;
+}
+
+.devtools-sidebar-tabs:-moz-locale-dir(rtl) > tabs > tab {
+  background-position: calc(100% - 3px), 100%, calc(100% - 1px), calc(100% - 2px);
+}
+
+%filter substitution
+%define smallSeparator linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)), linear-gradient(hsla(206,37%,4%,0), hsla(206,37%,4%,.6), hsla(206,37%,4%,0)), linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0))
+%define solidSeparator linear-gradient(transparent, transparent), linear-gradient(hsla(206,37%,4%,.6), hsla(206,37%,4%,.7)), linear-gradient(hsla(204,45%,98%,.1), hsla(204,45%,98%,.1))
+
+.devtools-sidebar-tabs > tabs > tab {
+  background-image: linear-gradient(transparent, transparent), @smallSeparator@;
+}
+
+.devtools-sidebar-tabs > tabs > tab:hover {
+  background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @smallSeparator@;
+}
+
+.devtools-sidebar-tabs > tabs > tab:hover:active {
+  background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @smallSeparator@;
+}
+
+.devtools-sidebar-tabs > tabs > tab[selected=true] + tab {
+  background-image: linear-gradient(transparent, transparent), @solidSeparator@;
+}
+
+.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover {
+  background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @solidSeparator@;
+}
+
+.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover:active {
+  background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @solidSeparator@;
 }
 
 .devtools-sidebar-tabs > tabs > tab[selected=true] {
-  background-image: linear-gradient(to bottom, hsl(201,45%,34%), hsl(205,44%,22%));
+  color: #f5f7fa;
-  color: white !important;
+  background-image: linear-gradient(#2f607b, #294d68), @solidSeparator@;
+  box-shadow: 0 1px 0 hsla(0,0%,100%,.1) inset, 0 -2px 0 hsla(206,37%,4%,.05) inset, 0 -1px 1px hsla(206,37%,4%,.1) inset;
+}
+
+.devtools-sidebar-tabs > tabs > tab[selected=true]:hover {
+  background-image: linear-gradient(#274f64, #224056), @solidSeparator@;
+  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, 0 -2px 0 hsla(206,37%,4%,.05) inset, 0 -1px 1px hsla(206,37%,4%,.1) inset;
+}
+
+.devtools-sidebar-tabs > tabs > tab[selected=true]:hover:active {
+  background-image: linear-gradient(#1f3e4f, #1b3243), @solidSeparator@;
+  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, 0 -2px 0 hsla(206,37%,4%,.05) inset, 0 -1px 1px hsla(206,37%,4%,.1) inset;
 }
 
 /* Theme */

browser/themes/gnomestripe/devtools/layoutview.css

@@ -5,7 +5,6 @@
 body {
   background: url(layout-background-grid.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
   color: hsl(210,100%,85%);
-  border-top: 1px solid black;
   -moz-box-sizing: border-box;
 }
 

browser/themes/gnomestripe/devtools/splitview.css

@@ -72,7 +72,6 @@
   height: 26px;
   background-origin: border-box;
   background-clip: border-box;
-  border-top: 1px solid hsla(210,8%,5%,.5);
   border-bottom: 1px solid hsla(210,8%,5%,.65);
   padding: 3px;
 }

browser/themes/gnomestripe/devtools/toolbox.css

@@ -121,7 +121,9 @@
   -moz-appearance: none;
   background-image: url("background-noise-toolbar.png"),
                     linear-gradient(#303840, #2d3640);
-  border-top: 1px solid #060a0d;
+  border-color: #060a0d;
+  border-style: solid;
+  border-width: 1px 0;
   box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset,
               0 -1px 0 hsla(206,37%,4%,.1) inset;
   min-height: 32px;

browser/themes/gnomestripe/jar.mn

@@ -108,7 +108,7 @@ browser.jar:
   skin/classic/browser/tabview/stack-expander.png     (tabview/stack-expander.png)
   skin/classic/browser/tabview/tabview.png            (tabview/tabview.png)
   skin/classic/browser/tabview/tabview.css            (tabview/tabview.css)
-  skin/classic/browser/devtools/common.css            (devtools/common.css)
+* skin/classic/browser/devtools/common.css            (devtools/common.css)
   skin/classic/browser/devtools/arrows.png            (devtools/arrows.png)
   skin/classic/browser/devtools/commandline.png       (devtools/commandline.png)
   skin/classic/browser/devtools/command-responsivemode.png (devtools/command-responsivemode.png)
@@ -160,6 +160,7 @@ browser.jar:
   skin/classic/browser/devtools/itemToggle.png        (devtools/itemToggle.png)
   skin/classic/browser/devtools/itemArrow-rtl.png     (devtools/itemArrow-rtl.png)
   skin/classic/browser/devtools/itemArrow-ltr.png     (devtools/itemArrow-ltr.png)
+  skin/classic/browser/devtools/background-noise-toolbar.png (devtools/background-noise-toolbar.png)
   skin/classic/browser/devtools/inspect-button.png    (devtools/inspect-button.png)
   skin/classic/browser/devtools/dropmarker.png        (devtools/dropmarker.png)
   skin/classic/browser/devtools/layout-background-grid.png (devtools/layout-background-grid.png)

browser/themes/pinstripe/devtools/common.css

@@ -17,9 +17,10 @@
 .devtools-toolbar {
   -moz-appearance: none;
   padding: 4px 3px;
-  box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
-  background-image: url(background-noise-toolbar.png), -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
   color: hsl(210,30%,85%);
+  background-image: url(background-noise-toolbar.png), linear-gradient(#3e4750, #3e4750);
+  border-bottom: 1px solid #060a0d;
+  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, -1px 0 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(204,45%,98%,.05) inset;
 }
 
 .devtools-menulist,
@@ -233,12 +234,17 @@
 
 .devtools-sidebar-tabs > tabs {
   -moz-appearance: none;
+  font: inherit;
   position: static;
-  box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
-  background-image: url(background-noise-toolbar.png), linear-gradient(to bottom, hsl(210,11%,36%), hsl(210,11%,18%));
   color: hsl(210,30%,85%);
   margin-bottom: 0;
   padding: 0;
+  background-image: url(background-noise-toolbar.png), linear-gradient(#3e4750, #3e4750);
+  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, -1px 0 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(204,45%,98%,.05) inset;
+  border-width: 0 0 1px 0;
+  border-color: hsla(210,8%,5%,.6);
+  border-style: solid;
+  overflow: hidden;
 }
 
 .devtools-sidebar-tabs > tabs > .tabs-right,
@@ -248,30 +254,90 @@
 
 .devtools-sidebar-tabs > tabs > tab {
   -moz-appearance: none;
+  /* We want to match the height of a toolbar with a toolbarbutton 
+   * First, we need to replicated the padding of toolbar (4px),
+   * then, the padding of the button itself from toolbarbutton.css (3px),
+   * Also, we need to take the border of the buttons into accout (1px).
+   * Minus the tab-text margin (2px).
+   * Padding-bottom is one pixel shorter because we need to include the
+   * black border.
+   */
+  padding: 6px 3px 5px !important;
+  -moz-padding-start: 6px;
   padding: 0;
   min-width: 78px;
-  min-height: 22px;
   text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
   text-align: center;
   color: inherit;
   -moz-box-flex: 1;
   border-width: 0;
-  -moz-border-end-width: 1px;
+  position: static;
-  border-color: hsla(210,8%,5%,.6);
+  -moz-margin-start: -1px;
-  border-style: solid;
 }
 
 .devtools-sidebar-tabs > tabs > tab:-moz-focusring {
   position: static;
 }
 
+.devtools-sidebar-tabs > tabs > tab:first-of-type {
+  -moz-margin-start: -3px;
+}
+
+.devtools-sidebar-tabs > tabs > tab {
+  background-size: 100% 100%, 1px 100%, 1px 100%, 1px 100%;
+  background-repeat: no-repeat;
+  background-position: 2px, 0, 1px, 2px;
+}
+
+.devtools-sidebar-tabs:-moz-locale-dir(rtl) > tabs > tab {
+  background-position: calc(100% - 3px), 100%, calc(100% - 1px), calc(100% - 2px);
+}
+
 .devtools-sidebar-tabs > tabs > tab:last-of-type {
   -moz-border-end-width: 0;
 }
 
+%define smallSeparator linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)), linear-gradient(hsla(206,37%,4%,0), hsla(206,37%,4%,.6), hsla(206,37%,4%,0)), linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0))
+%define solidSeparator linear-gradient(transparent, transparent), linear-gradient(hsla(206,37%,4%,.6), hsla(206,37%,4%,.7)), linear-gradient(hsla(204,45%,98%,.1), hsla(204,45%,98%,.1))
+
+.devtools-sidebar-tabs > tabs > tab {
+  background-image: linear-gradient(transparent, transparent), @smallSeparator@;
+}
+
+.devtools-sidebar-tabs > tabs > tab:hover {
+  background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @smallSeparator@;
+}
+
+.devtools-sidebar-tabs > tabs > tab:hover:active {
+  background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @smallSeparator@;
+}
+
+.devtools-sidebar-tabs > tabs > tab[selected=true] + tab {
+  background-image: linear-gradient(transparent, transparent), @solidSeparator@;
+}
+
+.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover {
+  background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @solidSeparator@;
+}
+
+.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover:active {
+  background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @solidSeparator@;
+}
+
 .devtools-sidebar-tabs > tabs > tab[selected=true] {
-  background-image: url(background-noise-toolbar.png), linear-gradient(to bottom, hsl(201,45%,34%), hsl(205,44%,22%));
+  color: #f5f7fa;
-  color: white !important;
+  background-image: linear-gradient(#2f607b, #294d68), @solidSeparator@;
+  box-shadow: 0 1px 0 hsla(0,0%,100%,.1) inset, 0 -2px 0 hsla(206,37%,4%,.05) inset, 0 -1px 1px hsla(206,37%,4%,.1) inset;
+}
+
+.devtools-sidebar-tabs > tabs > tab[selected=true]:hover {
+  background-image: linear-gradient(#274f64, #224056), @solidSeparator@;
+  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, 0 -2px 0 hsla(206,37%,4%,.05) inset, 0 -1px 1px hsla(206,37%,4%,.1) inset;
+}
+
+.devtools-sidebar-tabs > tabs > tab[selected=true]:hover:active {
+  background-image: linear-gradient(#1f3e4f, #1b3243), @solidSeparator@;
+  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, 0 -2px 0 hsla(206,37%,4%,.05) inset, 0 -1px 1px hsla(206,37%,4%,.1) inset;
 }
 
 /* Theme */

browser/themes/pinstripe/devtools/layoutview.css

@@ -5,7 +5,6 @@
 body {
   background: url(layout-background-grid.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
   color: hsl(210,100%,85%);
-  border-top: 1px solid black;
   -moz-box-sizing: border-box;
 }
 

browser/themes/pinstripe/devtools/splitview.css

@@ -72,7 +72,6 @@
   height: 26px;
   background-origin: border-box;
   background-clip: border-box;
-  border-top: 1px solid hsla(210,8%,5%,.5);
   border-bottom: 1px solid hsla(210,8%,5%,.65);
   padding: 3px;
 }

browser/themes/pinstripe/devtools/toolbox.css

@@ -109,7 +109,9 @@
   -moz-appearance: none;
   background-image: url("background-noise-toolbar.png"),
                     linear-gradient(#303840, #2d3640);
-  border-top: 1px solid #060a0d;
+  border-color: #060a0d;
+  border-style: solid;
+  border-width: 1px 0;
   box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset,
               0 -1px 0 hsla(206,37%,4%,.1) inset;
   min-height: 32px;

browser/themes/winstripe/devtools/common.css

@@ -15,9 +15,10 @@
 .devtools-toolbar {
   -moz-appearance: none;
   padding: 4px 3px;
-  box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
-  background-image: -moz-linear-gradient(top, hsl(209,18%,34%), hsl(210,24%,16%));
   color: hsl(210,30%,85%);
+  background-image: url(background-noise-toolbar.png), linear-gradient(#3e4750, #3e4750);
+  border-bottom: 1px solid #060a0d;
+  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, -1px 0 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(204,45%,98%,.05) inset;
 }
 
 .devtools-menulist,
@@ -242,11 +243,15 @@
 .devtools-sidebar-tabs > tabs {
   -moz-appearance: none;
   position: static;
-  box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
-  background-image: linear-gradient(to bottom, hsl(210,11%,36%), hsl(210,11%,18%));
   color: hsl(210,30%,85%);
   margin-bottom: 0;
   padding: 0;
+  background-image: url(background-noise-toolbar.png), linear-gradient(#3e4750, #3e4750);
+  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, -1px 0 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(204,45%,98%,.05) inset;
+  border-width: 0 0 1px 0;
+  border-color: hsla(210,8%,5%,.6);
+  border-style: solid;
+  overflow: hidden;
 }
 
 .devtools-sidebar-tabs > tabs > .tabs-right,
@@ -256,20 +261,26 @@
 
 .devtools-sidebar-tabs > tabs > tab {
   -moz-appearance: none;
-  padding: 0;
+  /* We want to match the height of a toolbar with a toolbarbutton 
+   * First, we need to replicated the padding of toolbar (4px),
+   * then, the padding of the button itself from toolbarbutton.css (3px),
+   * Also, we need to take the border of the buttons into accout (1px).
+   * Padding-bottom is one pixel shorter because we need to include the
+   * black border.
+   */
+  padding: 8px 3px 7px;
+  -moz-padding-start: 6px;
   margin: 0;
   min-width: 78px;
-  min-height: 22px;
   text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
   text-align: center;
   color: inherit;
   -moz-box-flex: 1;
   border-width: 0;
-  -moz-border-end-width: 1px;
-  border-color: hsla(210,8%,5%,.6);
-  border-style: solid;
   background: transparent;
   border-radius: 0;
+  position: static;
+  -moz-margin-start: -1px;
 }
 
 .devtools-sidebar-tabs > tabs > tab:-moz-focusring {
@@ -280,9 +291,62 @@
   -moz-border-end-width: 0;
 }
 
+.devtools-sidebar-tabs > tabs > tab:first-of-type {
+  -moz-margin-start: -3px;
+}
+
+.devtools-sidebar-tabs > tabs > tab {
+  background-size: 100% 100%, 1px 100%, 1px 100%, 1px 100%;
+  background-repeat: no-repeat;
+  background-position: 2px, 0, 1px, 2px;
+}
+
+.devtools-sidebar-tabs:-moz-locale-dir(rtl) > tabs > tab {
+  background-position: calc(100% - 3px), 100%, calc(100% - 1px), calc(100% - 2px);
+}
+
+%filter substitution
+%define smallSeparator linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)), linear-gradient(hsla(206,37%,4%,0), hsla(206,37%,4%,.6), hsla(206,37%,4%,0)), linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0))
+%define solidSeparator linear-gradient(transparent, transparent), linear-gradient(hsla(206,37%,4%,.6), hsla(206,37%,4%,.7)), linear-gradient(hsla(204,45%,98%,.1), hsla(204,45%,98%,.1))
+
+.devtools-sidebar-tabs > tabs > tab {
+  background-image: linear-gradient(transparent, transparent), @smallSeparator@;
+}
+
+.devtools-sidebar-tabs > tabs > tab:hover {
+  background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @smallSeparator@;
+}
+
+.devtools-sidebar-tabs > tabs > tab:hover:active {
+  background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @smallSeparator@;
+}
+
+.devtools-sidebar-tabs > tabs > tab[selected=true] + tab {
+  background-image: linear-gradient(transparent, transparent), @solidSeparator@;
+}
+
+.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover {
+  background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @solidSeparator@;
+}
+
+.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover:active {
+  background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @solidSeparator@;
+}
+
 .devtools-sidebar-tabs > tabs > tab[selected=true] {
-  background-image: linear-gradient(to bottom, hsl(201,45%,34%), hsl(205,44%,22%));
+  color: #f5f7fa;
-  color: white !important;
+  background-image: linear-gradient(#2f607b, #294d68), @solidSeparator@;
+  box-shadow: 0 1px 0 hsla(0,0%,100%,.1) inset, 0 -2px 0 hsla(206,37%,4%,.05) inset, 0 -1px 1px hsla(206,37%,4%,.1) inset;
+}
+
+.devtools-sidebar-tabs > tabs > tab[selected=true]:hover {
+  background-image: linear-gradient(#274f64, #224056), @solidSeparator@;
+  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, 0 -2px 0 hsla(206,37%,4%,.05) inset, 0 -1px 1px hsla(206,37%,4%,.1) inset;
+}
+
+.devtools-sidebar-tabs > tabs > tab[selected=true]:hover:active {
+  background-image: linear-gradient(#1f3e4f, #1b3243), @solidSeparator@;
+  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, 0 -2px 0 hsla(206,37%,4%,.05) inset, 0 -1px 1px hsla(206,37%,4%,.1) inset;
 }
 
 /* Theme */

browser/themes/winstripe/devtools/layoutview.css

@@ -5,7 +5,6 @@
 body {
   background: url(layout-background-grid.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
   color: hsl(210,100%,85%);
-  border-top: 1px solid black;
   -moz-box-sizing: border-box;
 }
 

browser/themes/winstripe/devtools/toolbox.css

@@ -124,7 +124,7 @@
   -moz-appearance: none;
   background-image: url("background-noise-toolbar.png"),
                     linear-gradient(#303840, #2d3640);
-  border: none;
+  border-bottom: 1px solid #060a0d;
   box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset,
               0 -1px 0 hsla(206,37%,4%,.1) inset;
   min-height: 32px;

browser/themes/winstripe/jar.mn

@@ -134,7 +134,7 @@ browser.jar:
         skin/classic/browser/tabview/tabview.png                    (tabview/tabview.png)
         skin/classic/browser/tabview/tabview-inverted.png           (tabview/tabview-inverted.png)
         skin/classic/browser/tabview/tabview.css                    (tabview/tabview.css)
-        skin/classic/browser/devtools/common.css                    (devtools/common.css)
+*       skin/classic/browser/devtools/common.css                    (devtools/common.css)
         skin/classic/browser/devtools/arrows.png                    (devtools/arrows.png)
         skin/classic/browser/devtools/commandline.png               (devtools/commandline.png)
         skin/classic/browser/devtools/alerticon-warning.png         (devtools/alerticon-warning.png)
@@ -187,6 +187,7 @@ browser.jar:
         skin/classic/browser/devtools/itemToggle.png                (devtools/itemToggle.png)
         skin/classic/browser/devtools/itemArrow-rtl.png             (devtools/itemArrow-rtl.png)
         skin/classic/browser/devtools/itemArrow-ltr.png             (devtools/itemArrow-ltr.png)
+        skin/classic/browser/devtools/background-noise-toolbar.png  (devtools/background-noise-toolbar.png)
         skin/classic/browser/devtools/inspect-button.png            (devtools/inspect-button.png)
         skin/classic/browser/devtools/dropmarker.png                (devtools/dropmarker.png)
         skin/classic/browser/devtools/layout-background-grid.png    (devtools/layout-background-grid.png)
@@ -359,7 +360,7 @@ browser.jar:
         skin/classic/aero/browser/tabview/tabview.png                (tabview/tabview.png)
         skin/classic/aero/browser/tabview/tabview-inverted.png       (tabview/tabview-inverted.png)
         skin/classic/aero/browser/tabview/tabview.css                (tabview/tabview.css)
-        skin/classic/aero/browser/devtools/common.css                (devtools/common.css)
+*       skin/classic/aero/browser/devtools/common.css                (devtools/common.css)
         skin/classic/aero/browser/devtools/arrows.png                (devtools/arrows.png)
         skin/classic/aero/browser/devtools/commandline.png           (devtools/commandline.png)
         skin/classic/aero/browser/devtools/command-responsivemode.png (devtools/command-responsivemode.png)
@@ -411,6 +412,7 @@ browser.jar:
         skin/classic/aero/browser/devtools/option-icon.png           (devtools/option-icon.png)
         skin/classic/aero/browser/devtools/itemToggle.png            (devtools/itemToggle.png)
         skin/classic/aero/browser/devtools/itemArrow-rtl.png         (devtools/itemArrow-rtl.png)
+        skin/classic/aero/browser/devtools/background-noise-toolbar.png (devtools/background-noise-toolbar.png)
         skin/classic/aero/browser/devtools/itemArrow-ltr.png         (devtools/itemArrow-ltr.png)
         skin/classic/aero/browser/devtools/inspect-button.png        (devtools/inspect-button.png)
         skin/classic/aero/browser/devtools/dropmarker.png            (devtools/dropmarker.png)

dom/base/ConsoleAPI.js

@@ -255,45 +255,55 @@ ConsoleAPI.prototype = {
   {
     let [method, args, meta] = aCall;
 
-    let notifyMeta = {
+    let frame = meta.stack[0];
-      isPrivate: meta.isPrivate,
+    let consoleEvent = {
+      ID: this._outerID,
+      innerID: this._innerID,
+      level: method,
+      filename: frame.filename,
+      lineNumber: frame.lineNumber,
+      functionName: frame.functionName,
       timeStamp: meta.timeStamp,
-      frame: meta.stack[0],
+      arguments: args,
     };
 
-    let notifyArguments = null;
-
     switch (method) {
       case "log":
       case "info":
       case "warn":
       case "error":
       case "debug":
-        notifyArguments = this.processArguments(args);
+        consoleEvent.arguments = this.processArguments(args);
         break;
       case "trace":
-        notifyArguments = meta.stack;
+        consoleEvent.stacktrace = meta.stack;
         break;
       case "group":
       case "groupCollapsed":
-        notifyArguments = this.beginGroup(args);
-        break;
       case "groupEnd":
+        try {
+          consoleEvent.groupName = Array.prototype.join.call(args, " ");
+        }
+        catch (ex) {
+          Cu.reportError(ex);
+          Cu.reportError(ex.stack);
+          return;
+        }
+        break;
       case "dir":
-        notifyArguments = args;
         break;
       case "time":
-        notifyArguments = this.startTimer(args[0], meta.timeStamp);
+        consoleEvent.timer = this.startTimer(args[0], meta.timeStamp);
         break;
       case "timeEnd":
-        notifyArguments = this.stopTimer(args[0], meta.timeStamp);
+        consoleEvent.timer = this.stopTimer(args[0], meta.timeStamp);
         break;
       default:
         // unknown console API method!
         return;
     }
 
-    this.notifyObservers(method, notifyArguments, notifyMeta);
+    this.notifyObservers(method, consoleEvent, meta.isPrivate);
   },
 
   /**
@@ -301,34 +311,22 @@ ConsoleAPI.prototype = {
    *
    * @param string aLevel
    *        The message level.
-   * @param mixed aArguments
+   * @param object aConsoleEvent
-   *        The arguments given to the console API call.
+   *        The console event object to send to observers for the given console
-   * @param object aMeta
+   *        API call.
-   *        Object that holds metadata about the console API call:
+   * @param boolean aPrivate
-   *        - isPrivate - Whether the window is in private browsing mode.
+   *        Tells whether the window is in private browsing mode.
-   *        - frame - the youngest content frame in the call stack.
-   *        - timeStamp - when the console API call occurred.
    */
-  notifyObservers: function CA_notifyObservers(aLevel, aArguments, aMeta) {
+  notifyObservers: function CA_notifyObservers(aLevel, aConsoleEvent, aPrivate)
-    let consoleEvent = {
+  {
-      ID: this._outerID,
+    aConsoleEvent.wrappedJSObject = aConsoleEvent;
-      innerID: this._innerID,
-      level: aLevel,
-      filename: aMeta.frame.filename,
-      lineNumber: aMeta.frame.lineNumber,
-      functionName: aMeta.frame.functionName,
-      arguments: aArguments,
-      timeStamp: aMeta.timeStamp,
-    };
-
-    consoleEvent.wrappedJSObject = consoleEvent;
 
     // Store non-private messages for which the inner window was not destroyed.
-    if (!aMeta.isPrivate) {
+    if (!aPrivate) {
-      ConsoleAPIStorage.recordEvent(this._innerID, consoleEvent);
+      ConsoleAPIStorage.recordEvent(this._innerID, aConsoleEvent);
     }
 
-    Services.obs.notifyObservers(consoleEvent, "console-api-log-event",
+    Services.obs.notifyObservers(aConsoleEvent, "console-api-log-event",
                                  this._outerID);
   },
 
@@ -418,13 +416,6 @@ ConsoleAPI.prototype = {
     return stack;
   },
 
-  /**
-   * Begin a new group for logging output together.
-   **/
-  beginGroup: function CA_beginGroup() {
-    return Array.prototype.join.call(arguments[0], " ");
-  },
-
   /*
    * A registry of started timers. Timer maps are key-value pairs of timer
    * names to timer start times, for all timers defined in the page. Timer

dom/tests/browser/browser_ConsoleAPITests.js

@@ -39,13 +39,14 @@ function testConsoleData(aMessageObject) {
 
   is(aMessageObject.level, gLevel, "expected level received");
   ok(aMessageObject.arguments, "we have arguments");
-  is(aMessageObject.arguments.length, gArgs.length, "arguments.length matches");
 
   if (gLevel == "trace") {
-    is(aMessageObject.arguments.toSource(), gArgs.toSource(),
+    is(aMessageObject.arguments.length, 0, "arguments.length matches");
+    is(aMessageObject.stacktrace.toSource(), gArgs.toSource(),
        "stack trace is correct");
   }
   else {
+    is(aMessageObject.arguments.length, gArgs.length, "arguments.length matches");
     gArgs.forEach(function (a, i) {
       is(aMessageObject.arguments[i], a, "correct arg " + i);
     });
@@ -101,13 +102,19 @@ function testConsoleGroup(aMessageObject) {
   ok(aMessageObject.lineNumber >= 45 && aMessageObject.lineNumber <= 47,
      "lineNumber matches");
   if (aMessageObject.level == "groupCollapsed") {
-    ok(aMessageObject.arguments == "a group", "groupCollapsed arguments matches");
+    is(aMessageObject.groupName, "a group", "groupCollapsed groupName matches");
+    is(aMessageObject.arguments[0], "a", "groupCollapsed arguments[0] matches");
+    is(aMessageObject.arguments[1], "group", "groupCollapsed arguments[0] matches");
   }
   else if (aMessageObject.level == "group") {
-    ok(aMessageObject.arguments == "b group", "group arguments matches");
+    is(aMessageObject.groupName, "b group", "group groupName matches");
+    is(aMessageObject.arguments[0], "b", "group arguments[0] matches");
+    is(aMessageObject.arguments[1], "group", "group arguments[1] matches");
   }
   else if (aMessageObject.level == "groupEnd") {
-    ok(Array.prototype.join.call(aMessageObject.arguments, " ") == "b group", "groupEnd arguments matches");
+    let groupName = Array.prototype.join.call(aMessageObject.arguments, " ");
+    is(groupName,"b group", "groupEnd arguments matches");
+    is(aMessageObject.groupName, "b group", "groupEnd groupName matches");
   }
 
   if (aMessageObject.level == "groupEnd") {
@@ -252,7 +259,10 @@ function startTimeTest() {
   };
   gLevel = "time";
   gArgs = [
-    {filename: TEST_URI, lineNumber: 23, functionName: "startTimer"},
+    {filename: TEST_URI, lineNumber: 23, functionName: "startTimer",
+     arguments: ["foo"],
+     timer: { name: "foo" },
+    }
   ];
 
   let button = gWindow.document.getElementById("test-time");
@@ -269,6 +279,12 @@ function testConsoleTime(aMessageObject) {
   is(aMessageObject.filename, gArgs[0].filename, "filename matches");
   is(aMessageObject.lineNumber, gArgs[0].lineNumber, "lineNumber matches");
   is(aMessageObject.functionName, gArgs[0].functionName, "functionName matches");
+  is(aMessageObject.timer.name, gArgs[0].timer.name, "timer.name matches");
+  ok(aMessageObject.timer.started, "timer.started exists");
+
+  gArgs[0].arguments.forEach(function (a, i) {
+    is(aMessageObject.arguments[i], a, "correct arg " + i);
+  });
 
   startTimeEndTest();
 }
@@ -286,7 +302,10 @@ function startTimeEndTest() {
   };
   gLevel = "timeEnd";
   gArgs = [
-    {filename: TEST_URI, lineNumber: 27, functionName: "stopTimer", arguments: { name: "foo" }},
+    {filename: TEST_URI, lineNumber: 27, functionName: "stopTimer",
+     arguments: ["foo"],
+     timer: { name: "foo" },
+    },
   ];
 
   let button = gWindow.document.getElementById("test-timeEnd");
@@ -305,9 +324,13 @@ function testConsoleTimeEnd(aMessageObject) {
   is(aMessageObject.lineNumber, gArgs[0].lineNumber, "lineNumber matches");
   is(aMessageObject.functionName, gArgs[0].functionName, "functionName matches");
   is(aMessageObject.arguments.length, gArgs[0].arguments.length, "arguments.length matches");
-  is(aMessageObject.arguments.name, gArgs[0].arguments.name, "timer name matches");
+  is(aMessageObject.timer.name, gArgs[0].timer.name, "timer name matches");
-  ok(typeof aMessageObject.arguments.duration == "number", "timer duration is a number");
+  is(typeof aMessageObject.timer.duration, "number", "timer duration is a number");
-  ok(aMessageObject.arguments.duration > 0, "timer duration is positive");
+  ok(aMessageObject.timer.duration > 0, "timer duration is positive");
+
+  gArgs[0].arguments.forEach(function (a, i) {
+    is(aMessageObject.arguments[i], a, "correct arg " + i);
+  });
 
   startEmptyTimerTest();
 }
@@ -335,7 +358,8 @@ function testEmptyTimer(aMessageObject) {
 
   ok(aMessageObject.level == "time" || aMessageObject.level == "timeEnd",
      "expected level received");
-  ok(!aMessageObject.arguments, "we don't have arguments");
+  is(aMessageObject.arguments.length, 0, "we don't have arguments");
+  ok(!aMessageObject.timer, "we don't have a timer");
 
   is(aMessageObject.functionName, "namelessTimer", "functionName matches");
   ok(aMessageObject.lineNumber == 31 || aMessageObject.lineNumber == 32,

toolkit/devtools/debugger/dbg-transport.js

@@ -123,7 +123,11 @@ DebuggerTransport.prototype = {
                                                         aStream.available());
       while (this._processIncoming()) {};
     } catch(e) {
-      dumpn("Unexpected error reading from debugging connection: " + e + " - " + e.stack);
+      let msg = "Unexpected error reading from debugging connection: " + e + " - " + e.stack;
+      if (Cu.reportError) {
+        Cu.reportError(msg);
+      }
+      dump(msg + "\n");
       this.close();
       return;
     }
@@ -158,7 +162,11 @@ DebuggerTransport.prototype = {
       packet = this._converter.ConvertToUnicode(packet);
       var parsed = JSON.parse(packet);
     } catch(e) {
-      dumpn("Error parsing incoming packet: " + packet + " (" + e + " - " + e.stack + ")");
+      let msg = "Error parsing incoming packet: " + packet + " (" + e + " - " + e.stack + ")";
+      if (Cu.reportError) {
+        Cu.reportError(msg);
+      }
+      dump(msg + "\n");
       return true;
     }
 
@@ -169,7 +177,11 @@ DebuggerTransport.prototype = {
         self.hooks.onPacket(parsed);
       }}, 0);
     } catch(e) {
-      dumpn("Error handling incoming packet: " + e + " - " + e.stack);
+      let msg = "Error handling incoming packet: " + e + " - " + e.stack;
+      if (Cu.reportError) {
+        Cu.reportError(msg);
+      }
+      dump(msg + "\n");
       dumpn("Packet was: " + packet);
     }
 
@@ -212,8 +224,12 @@ LocalDebuggerTransport.prototype = {
         self.other.hooks.onPacket(aPacket);
       }}, 0);
     } catch(e) {
-      dumpn("Error handling incoming packet: " + e + " - " + e.stack);
+      let msg = "Error handling incoming packet: " + e + " - " + e.stack;
-      dumpn("Packet was: " + aPacket);
+      if (Cu.reportError) {
+        Cu.reportError(msg);
+      }
+      dump(msg + "\n");
+      dumpn("Packet was: " + aPacket + "\n");
     }
   },
 

toolkit/devtools/sourcemap/SourceMap.jsm

@@ -15,7 +15,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 
-this.EXPORTED_SYMBOLS = [ "SourceMapConsumer", "SourceMapGenerator", "SourceNode" ];
+var EXPORTED_SYMBOLS = [ "SourceMapConsumer", "SourceMapGenerator", "SourceNode" ];
 
 Components.utils.import('resource://gre/modules/devtools/Require.jsm');
 /* -*- Mode: js; js-indent-level: 2; -*- */
@@ -79,6 +79,8 @@ define('source-map/source-map-consumer', ['require', 'exports', 'module' , 'sour
 
     this._names = ArraySet.fromArray(names);
     this._sources = ArraySet.fromArray(sources);
+    this._sourceRoot = sourceRoot;
+    this.file = file;
 
     // `this._generatedMappings` and `this._originalMappings` hold the parsed
     // mapping coordinates from the source map's "mappings" attribute. Each
@@ -113,6 +115,17 @@ define('source-map/source-map-consumer', ['require', 'exports', 'module' , 'sour
    */
   SourceMapConsumer.prototype._version = 3;
 
+  /**
+   * The list of original sources.
+   */
+  Object.defineProperty(SourceMapConsumer.prototype, 'sources', {
+    get: function () {
+      return this._sources.toArray().map(function (s) {
+        return this._sourceRoot ? util.join(this._sourceRoot, s) : s;
+      }, this);
+    }
+  });
+
   /**
    * Parse the mappings in a string in to a data structure which we can easily
    * query (an ordered list in this._generatedMappings).
@@ -338,6 +351,46 @@ define('source-map/source-map-consumer', ['require', 'exports', 'module' , 'sour
       };
     };
 
+  SourceMapConsumer.GENERATED_ORDER = 1;
+  SourceMapConsumer.ORIGINAL_ORDER = 2;
+
+  /**
+   * Iterate over each mapping between an original source/line/column and a
+   * generated line/column in this source map.
+   *
+   * @param Function aCallback
+   *        The function that is called with each mapping. This function should
+   *        not mutate the mapping.
+   * @param Object aContext
+   *        Optional. If specified, this object will be the value of `this` every
+   *        time that `aCallback` is called.
+   * @param aOrder
+   *        Either `SourceMapConsumer.GENERATED_ORDER` or
+   *        `SourceMapConsumer.ORIGINAL_ORDER`. Specifies whether you want to
+   *        iterate over the mappings sorted by the generated file's line/column
+   *        order or the original's source/line/column order, respectively. Defaults to
+   *        `SourceMapConsumer.GENERATED_ORDER`.
+   */
+  SourceMapConsumer.prototype.eachMapping =
+    function SourceMapConsumer_eachMapping(aCallback, aContext, aOrder) {
+      var context = aContext || null;
+      var order = aOrder || SourceMapConsumer.GENERATED_ORDER;
+
+      var mappings;
+      switch (order) {
+      case SourceMapConsumer.GENERATED_ORDER:
+        mappings = this._generatedMappings;
+        break;
+      case SourceMapConsumer.ORIGINAL_ORDER:
+        mappings = this._originalMappings;
+        break;
+      default:
+        throw new Error("Unknown order of iteration.");
+      }
+
+      mappings.forEach(aCallback, context);
+    };
+
   exports.SourceMapConsumer = SourceMapConsumer;
 
 });
@@ -347,7 +400,7 @@ define('source-map/source-map-consumer', ['require', 'exports', 'module' , 'sour
  * Licensed under the New BSD license. See LICENSE or:
  * http://opensource.org/licenses/BSD-3-Clause
  */
-define('source-map/util', ['require', 'exports', 'module' ], function(require, exports, module) {
+define('source-map/util', ['require', 'exports', 'module' , ], function(require, exports, module) {
 
   /**
    * This is a helper function for getting values from parameter/options
@@ -384,7 +437,7 @@ define('source-map/util', ['require', 'exports', 'module' ], function(require, e
  * Licensed under the New BSD license. See LICENSE or:
  * http://opensource.org/licenses/BSD-3-Clause
  */
-define('source-map/binary-search', ['require', 'exports', 'module' ], function(require, exports, module) {
+define('source-map/binary-search', ['require', 'exports', 'module' , ], function(require, exports, module) {
 
   /**
    * Recursive implementation of binary search.
@@ -462,7 +515,7 @@ define('source-map/binary-search', ['require', 'exports', 'module' ], function(r
  * Licensed under the New BSD license. See LICENSE or:
  * http://opensource.org/licenses/BSD-3-Clause
  */
-define('source-map/array-set', ['require', 'exports', 'module' ], function(require, exports, module) {
+define('source-map/array-set', ['require', 'exports', 'module' , ], function(require, exports, module) {
 
   /**
    * A data structure which is a combination of an array and a set. Adding a new
@@ -486,10 +539,23 @@ define('source-map/array-set', ['require', 'exports', 'module' ], function(requi
     return set;
   };
 
+  /**
+   * Because behavior goes wacky when you set `__proto__` on `this._set`, we
+   * have to prefix all the strings in our set with an arbitrary character.
+   *
+   * See https://github.com/mozilla/source-map/pull/31 and
+   * https://github.com/mozilla/source-map/issues/30
+   *
+   * @param String aStr
+   */
+  ArraySet.prototype._toSetString = function ArraySet__toSetString (aStr) {
+    return "$" + aStr;
+  };
+
   /**
    * Add the given string to this set.
    *
-   * @param String str
+   * @param String aStr
    */
   ArraySet.prototype.add = function ArraySet_add(aStr) {
     if (this.has(aStr)) {
@@ -498,26 +564,27 @@ define('source-map/array-set', ['require', 'exports', 'module' ], function(requi
     }
     var idx = this._array.length;
     this._array.push(aStr);
-    this._set[aStr] = idx;
+    this._set[this._toSetString(aStr)] = idx;
   };
 
   /**
    * Is the given string a member of this set?
    *
-   * @param String str
+   * @param String aStr
    */
   ArraySet.prototype.has = function ArraySet_has(aStr) {
-    return Object.prototype.hasOwnProperty.call(this._set, aStr);
+    return Object.prototype.hasOwnProperty.call(this._set,
+                                                this._toSetString(aStr));
   };
 
   /**
    * What is the index of the given string in the array?
    *
-   * @param String str
+   * @param String aStr
    */
   ArraySet.prototype.indexOf = function ArraySet_indexOf(aStr) {
     if (this.has(aStr)) {
-      return this._set[aStr];
+      return this._set[this._toSetString(aStr)];
     }
     throw new Error('"' + aStr + '" is not in the set.');
   };
@@ -525,7 +592,7 @@ define('source-map/array-set', ['require', 'exports', 'module' ], function(requi
   /**
    * What is the element at the given index?
    *
-   * @param Number idx
+   * @param Number aIdx
    */
   ArraySet.prototype.at = function ArraySet_at(aIdx) {
     if (aIdx >= 0 && aIdx < this._array.length) {
@@ -693,7 +760,7 @@ define('source-map/base64-vlq', ['require', 'exports', 'module' , 'source-map/ba
  * Licensed under the New BSD license. See LICENSE or:
  * http://opensource.org/licenses/BSD-3-Clause
  */
-define('source-map/base64', ['require', 'exports', 'module' ], function(require, exports, module) {
+define('source-map/base64', ['require', 'exports', 'module' , ], function(require, exports, module) {
 
   var charToIntMap = {};
   var intToCharMap = {};
@@ -897,10 +964,10 @@ define('source-map/source-map-generator', ['require', 'exports', 'module' , 'sou
     };
 
   /**
-   * Render the source map being generated to a string.
+   * Externalize the source map.
    */
-  SourceMapGenerator.prototype.toString =
+  SourceMapGenerator.prototype.toJSON =
-    function SourceMapGenerator_toString() {
+    function SourceMapGenerator_toJSON() {
       var map = {
         version: this._version,
         file: this._file,
@@ -911,7 +978,15 @@ define('source-map/source-map-generator', ['require', 'exports', 'module' , 'sou
       if (this._sourceRoot) {
         map.sourceRoot = this._sourceRoot;
       }
-      return JSON.stringify(map);
+      return map;
+    };
+
+  /**
+   * Render the source map being generated to a string.
+   */
+  SourceMapGenerator.prototype.toString =
+    function SourceMapGenerator_toString() {
+      return JSON.stringify(this);
     };
 
   exports.SourceMapGenerator = SourceMapGenerator;

toolkit/devtools/sourcemap/tests/unit/Utils.jsm

@@ -15,7 +15,7 @@
 Components.utils.import('resource://gre/modules/devtools/Require.jsm');
 Components.utils.import('resource://gre/modules/devtools/SourceMap.jsm');
 
-this.EXPORTED_SYMBOLS = [ "define", "runSourceMapTests" ];
+let EXPORTED_SYMBOLS = [ "define", "runSourceMapTests" ];
 /* -*- Mode: js; js-indent-level: 2; -*- */
 /*
  * Copyright 2011 Mozilla Foundation and contributors
@@ -78,7 +78,7 @@ define('test/source-map/assert', ['exports'], function (exports) {
  * Licensed under the New BSD license. See LICENSE or:
  * http://opensource.org/licenses/BSD-3-Clause
  */
-define('test/source-map/util', ['require', 'exports', 'module' ], function(require, exports, module) {
+define('test/source-map/util', ['require', 'exports', 'module' , ], function(require, exports, module) {
 
   // This is a test mapping which maps functions from two different files
   // (one.js and two.js) to a minified generated source.

toolkit/devtools/sourcemap/tests/unit/test_api.js

@@ -0,0 +1,34 @@
+/*
+ * WARNING!
+ *
+ * Do not edit this file directly, it is built from the sources at
+ * https://github.com/mozilla/source-map/
+ */
+
+Components.utils.import('resource://test/Utils.jsm');
+/* -*- Mode: js; js-indent-level: 2; -*- */
+/*
+ * Copyright 2012 Mozilla Foundation and contributors
+ * Licensed under the New BSD license. See LICENSE or:
+ * http://opensource.org/licenses/BSD-3-Clause
+ */
+define("test/source-map/test-api", ["require", "exports", "module"], function (require, exports, module) {
+
+  var sourceMap;
+  try {
+    sourceMap = require('source-map');
+  } catch (e) {
+    sourceMap = {};
+    Components.utils.import('resource:///modules/devtools/SourceMap.jsm', sourceMap);
+  }
+
+  exports['test that the api is properly exposed in the top level'] = function (assert, util) {
+    assert.equal(typeof sourceMap.SourceMapGenerator, "function");
+    assert.equal(typeof sourceMap.SourceMapConsumer, "function");
+    assert.equal(typeof sourceMap.SourceNode, "function");
+  };
+
+});
+function run_test() {
+  runSourceMapTests('test/source-map/test-api', do_throw);
+}

toolkit/devtools/sourcemap/tests/unit/test_array_set.js

@@ -65,6 +65,14 @@ define("test/source-map/test-array-set", ["require", "exports", "module"], funct
     assert.strictEqual(set.at(3), 'quux');
   };
 
+  exports['test that you can add __proto__; see github issue #30'] = function (assert, util) {
+    var set = new ArraySet();
+    set.add('__proto__');
+    assert.ok(set.has('__proto__'));
+    assert.strictEqual(set.at(0), '__proto__');
+    assert.strictEqual(set.indexOf('__proto__'), 0);
+  };
+
 });
 function run_test() {
   runSourceMapTests('test/source-map/test-array-set', do_throw);

toolkit/devtools/sourcemap/tests/unit/test_source_map_consumer.js

@@ -25,6 +25,15 @@ define("test/source-map/test-source-map-consumer", ["require", "exports", "modul
     });
   };
 
+  exports['test that the `sources` field has the original sources'] = function (assert, util) {
+    var map = new SourceMapConsumer(util.testMap);
+    var sources = map.sources;
+
+    assert.equal(sources[0], '/the/root/one.js');
+    assert.equal(sources[1], '/the/root/two.js');
+    assert.equal(sources.length, 2);
+  };
+
   exports['test that the source root is reflected in a mapping\'s source field'] = function (assert, util) {
     var map = new SourceMapConsumer(util.testMap);
     var mapping;
@@ -81,6 +90,60 @@ define("test/source-map/test-source-map-consumer", ["require", "exports", "modul
     });
   };
 
+  exports['test eachMapping'] = function (assert, util) {
+    var map = new SourceMapConsumer(util.testMap);
+    var previousLine = -Infinity;
+    var previousColumn = -Infinity;
+    map.eachMapping(function (mapping) {
+      assert.ok(mapping.generatedLine >= previousLine);
+
+      if (mapping.generatedLine === previousLine) {
+        assert.ok(mapping.generatedColumn >= previousColumn);
+        previousColumn = mapping.generatedColumn;
+      }
+      else {
+        previousLine = mapping.generatedLine;
+        previousColumn = -Infinity;
+      }
+    });
+  };
+
+  exports['test iterating over mappings in a different order'] = function (assert, util) {
+    var map = new SourceMapConsumer(util.testMap);
+    var previousLine = -Infinity;
+    var previousColumn = -Infinity;
+    var previousSource = "";
+    map.eachMapping(function (mapping) {
+      assert.ok(mapping.source >= previousSource);
+
+      if (mapping.source === previousSource) {
+        assert.ok(mapping.originalLine >= previousLine);
+
+        if (mapping.originalLine === previousLine) {
+          assert.ok(mapping.originalColumn >= previousColumn);
+          previousColumn = mapping.originalColumn;
+        }
+        else {
+          previousLine = mapping.originalLine;
+          previousColumn = -Infinity;
+        }
+      }
+      else {
+        previousSource = mapping.source;
+        previousLine = -Infinity;
+        previousColumn = -Infinity;
+      }
+    }, null, SourceMapConsumer.ORIGINAL_ORDER);
+  };
+
+  exports['test that we can set the context for `this` in eachMapping'] = function (assert, util) {
+    var map = new SourceMapConsumer(util.testMap);
+    var context = {};
+    map.eachMapping(function () {
+      assert.equal(this, context);
+    }, context);
+  };
+
 });
 function run_test() {
   runSourceMapTests('test/source-map/test-source-map-consumer', do_throw);

toolkit/devtools/sourcemap/tests/unit/test_source_map_generator.js

@@ -24,6 +24,14 @@ define("test/source-map/test-source-map-generator", ["require", "exports", "modu
     assert.ok(true);
   };
 
+  exports['test JSON serialization'] = function (assert, util) {
+    var map = new SourceMapGenerator({
+      file: 'foo.js',
+      sourceRoot: '.'
+    });
+    assert.equal(map.toString(), JSON.stringify(map));
+  };
+
   exports['test adding mappings (case 1)'] = function (assert, util) {
     var map = new SourceMapGenerator({
       file: 'generated-foo.js',

toolkit/devtools/sourcemap/tests/unit/xpcshell.ini

@@ -10,3 +10,4 @@ tail =
 [test_base64_vlq.js]
 [test_base64.js]
 [test_array_set.js]
+[test_api.js]

toolkit/devtools/webconsole/dbg-webconsole-actors.js

@@ -721,23 +721,9 @@ WebConsoleActor.prototype =
   prepareConsoleMessageForRemote:
   function WCA_prepareConsoleMessageForRemote(aMessage)
   {
-    let result = {
+    let result = WebConsoleUtils.cloneObject(aMessage);
-      level: aMessage.level,
+    delete result.wrappedJSObject;
-      filename: aMessage.filename,
-      lineNumber: aMessage.lineNumber,
-      functionName: aMessage.functionName,
-      timeStamp: aMessage.timeStamp,
-    };
 
-    switch (result.level) {
-      case "trace":
-      case "group":
-      case "groupCollapsed":
-      case "time":
-      case "timeEnd":
-        result.arguments = aMessage.arguments;
-        break;
-      default:
     result.arguments = Array.map(aMessage.arguments || [],
       function(aObj) {
         return this.createValueGrip(aObj);
@@ -751,8 +737,6 @@ WebConsoleActor.prototype =
         result.objectProperties = actor.onInspectProperties().properties;
       }
     }
-        break;
-    }
 
     return result;
   },

toolkit/devtools/webconsole/test/test_consoleapi.html

@@ -62,7 +62,7 @@ function doConsoleCalls(aState)
       filename: /test_consoleapi/,
       functionName: "doConsoleCalls",
       timeStamp: /^\d+$/,
-      arguments: [
+      stacktrace: [
         {
           filename: /test_consoleapi/,
           functionName: "doConsoleCalls",