Bug 955820 - console.group doesn't group messages when timestamps are disabled; r=robcee

browser/devtools/webconsole/console-output.js

@@ -65,6 +65,9 @@ const COMPAT = {
 
   // The indent of a console group in pixels.
   GROUP_INDENT: 12,
+
+  // The default indent in pixels, applied even without any groups.
+  GROUP_INDENT_DEFAULT: 6,
 };
 
 // A map from the console API call levels to the Web Console severities.
@@ -776,6 +779,12 @@ Messages.Simple.prototype = Heritage.extend(Messages.BaseMessage.prototype,
     let icon = this.document.createElementNS(XHTML_NS, "span");
     icon.className = "icon";
 
+    // Apply the current group by indenting appropriately.
+    // TODO: remove this once bug 778766 is fixed.
+    let iconMarginLeft = this._groupDepthCompat * COMPAT.GROUP_INDENT +
+                         COMPAT.GROUP_INDENT_DEFAULT;
+    icon.style.marginLeft = iconMarginLeft + "px";
+
     let body = this._renderBody();
     this._repeatID.textContent += "|" + body.textContent;
 
@@ -1319,11 +1328,6 @@ Widgets.MessageTimestamp.prototype = Heritage.extend(Widgets.BaseWidget.prototyp
     this.element.className = "timestamp devtools-monospace";
     this.element.textContent = l10n.timestampString(this.timestamp) + " ";
 
-    // Apply the current group by indenting appropriately.
-    // TODO: remove this once bug 778766 is fixed.
-    this.element.style.marginRight = this.message._groupDepthCompat *
-                                     COMPAT.GROUP_INDENT + "px";
-
     return this;
   },
 }); // Widgets.MessageTimestamp.prototype

browser/devtools/webconsole/test/browser_webconsole_bug_664131_console_group.js

@@ -5,46 +5,31 @@
  */
 
 // Tests that console.group/groupEnd works as intended.
-
-let testDriver, hud;
+const TEST_URI = "data:text/html;charset=utf-8,Web Console test for bug 664131: Expand console object with group methods";
 
 function test() {
-  addTab("data:text/html;charset=utf-8,Web Console test for bug 664131: Expand console " +
-         "object with group methods");
-  browser.addEventListener("load", function onLoad(aEvent) {
-    browser.removeEventListener(aEvent.type, onLoad, true);
-    openConsole(null, function(aHud) {
-      hud = aHud;
-      testDriver = testGen();
-      testNext();
-    });
-  }, true);
-}
+  Task.spawn(runner).then(finishTest);
 
-function testNext() {
-  testDriver.next();
-}
-
-function testGen() {
-  outputNode = hud.outputNode;
+  function* runner() {
+    let {tab} = yield loadTab(TEST_URI);
+    let hud = yield openConsole(tab);
+    let outputNode = hud.outputNode;
 
     hud.jsterm.clearOutput();
 
     content.console.group("bug664131a");
 
-  waitForMessages({
+    yield waitForMessages({
       webconsole: hud,
       messages: [{
         text: "bug664131a",
         consoleGroup: 1,
       }],
-  }).then(testNext);
-
-  yield undefined;
+    });
 
     content.console.log("bug664131a-inside");
 
-  waitForMessages({
+    yield waitForMessages({
       webconsole: hud,
       messages: [{
         text: "bug664131a-inside",
@@ -52,14 +37,12 @@ function testGen() {
         severity: SEVERITY_LOG,
         groupDepth: 1,
       }],
-  }).then(testNext);
-
-  yield undefined;
+    });
 
     content.console.groupEnd("bug664131a");
     content.console.log("bug664131-outside");
 
-  waitForMessages({
+    yield waitForMessages({
       webconsole: hud,
       messages: [{
         text: "bug664131-outside",
@@ -67,27 +50,23 @@ function testGen() {
         severity: SEVERITY_LOG,
         groupDepth: 0,
       }],
-  }).then(testNext);
-
-  yield undefined;
+    });
 
     content.console.groupCollapsed("bug664131b");
 
-  waitForMessages({
+    yield waitForMessages({
       webconsole: hud,
       messages: [{
         text: "bug664131b",
         consoleGroup: 1,
       }],
-  }).then(testNext);
-
-  yield undefined;
+    });
 
     // Test that clearing the console removes the indentation.
     hud.jsterm.clearOutput();
     content.console.log("bug664131-cleared");
 
-  waitForMessages({
+    yield waitForMessages({
       webconsole: hud,
       messages: [{
         text: "bug664131-cleared",
@@ -95,13 +74,6 @@ function testGen() {
         severity: SEVERITY_LOG,
         groupDepth: 0,
       }],
-  }).then(testNext);
-
-  yield undefined;
-
-  testDriver = hud = null;
-  finishTest();
-
-  yield undefined;
+    });
+  }
 }
-

browser/devtools/webconsole/test/head.js

@@ -34,6 +34,9 @@ const SEVERITY_LOG = 3;
 // The indent of a console group in pixels.
 const GROUP_INDENT = 12;
 
+// The default indent in pixels, applied even without any groups.
+const GROUP_INDENT_DEFAULT = 6;
+
 const WEBCONSOLE_STRINGS_URI = "chrome://browser/locale/devtools/webconsole.properties";
 let WCU_l10n = new WebConsoleUtils.l10n(WEBCONSOLE_STRINGS_URI);
 
@@ -1134,10 +1137,10 @@ function waitForMessages(aOptions)
     }
 
     if ("groupDepth" in aRule) {
-      let timestamp = aElement.querySelector(".timestamp");
-      let indent = (GROUP_INDENT * aRule.groupDepth) + "px";
-      if (!timestamp || timestamp.style.marginRight != indent) {
-        is(timestamp.style.marginRight, indent,
+      let icon = aElement.querySelector(".icon");
+      let indent = (GROUP_INDENT * aRule.groupDepth + GROUP_INDENT_DEFAULT) + "px";
+      if (!icon || icon.style.marginLeft != indent) {
+        is(icon.style.marginLeft, indent,
            "group depth check failed for message rule: " + displayRule(aRule));
         return false;
       }

browser/devtools/webconsole/webconsole.js

@@ -145,6 +145,9 @@ const HISTORY_FORWARD = 1;
 // The indent of a console group in pixels.
 const GROUP_INDENT = 12;
 
+// The default indent in pixels, applied even without any groups.
+const GROUP_INDENT_DEFAULT = 6;
+
 // The number of messages to display in a single display update. If we display
 // too many messages at once we slow the Firefox UI too much.
 const MESSAGES_IN_INTERVAL = DEFAULT_LOG_LIMIT;
@@ -2438,6 +2441,10 @@ WebConsoleFrame.prototype = {
     let iconContainer = this.document.createElementNS(XHTML_NS, "span");
     iconContainer.className = "icon";
 
+    // Apply the current group by indenting appropriately.
+    let iconMarginLeft = this.groupDepth * GROUP_INDENT + GROUP_INDENT_DEFAULT;
+    iconContainer.style.marginLeft = iconMarginLeft + "px";
+
     // Create the message body, which contains the actual text of the message.
     let bodyNode = this.document.createElementNS(XHTML_NS, "span");
     bodyNode.className = "body devtools-monospace";
@@ -2495,8 +2502,6 @@ WebConsoleFrame.prototype = {
     // Create the timestamp.
     let timestampNode = this.document.createElementNS(XHTML_NS, "span");
     timestampNode.className = "timestamp devtools-monospace";
-    // Apply the current group by indenting appropriately.
-    timestampNode.style.marginRight = this.groupDepth * GROUP_INDENT + "px";
 
     let timestampString = l10n.timestampString(timestamp);
     timestampNode.textContent = timestampString + " ";