Bug 1009078 - Console: Represent empty slots of arrays with a placeholder label instead of commas and whitespace. r=dcamp

browser/devtools/webconsole/console-output.js

@@ -11,6 +11,7 @@ loader.lazyImporter(this, "VariablesView", "resource:///modules/devtools/Variabl
 loader.lazyImporter(this, "escapeHTML", "resource:///modules/devtools/VariablesView.jsm");
 loader.lazyImporter(this, "gDevTools", "resource:///modules/devtools/gDevTools.jsm");
 loader.lazyImporter(this, "Task","resource://gre/modules/Task.jsm");
+loader.lazyImporter(this, "PluralForm", "resource://gre/modules/PluralForm.jsm");
 
 const Heritage = require("sdk/core/heritage");
 const URI = Cc["@mozilla.org/network/io-service;1"].getService(Ci.nsIIOService);
@@ -2178,22 +2179,34 @@ Widgets.ObjectRenderers.add({
 
     this._text(" [ ");
 
-    let shown = 0;
-    for (let item of items) {
-      if (shown > 0) {
-        this._text(", ");
-      }
+    let isFirst = true;
+    let emptySlots = 0;
+    // A helper that renders a comma between items if isFirst == false.
+    let renderSeparator = () => !isFirst && this._text(", ");
 
-      if (item !== null) {
+    for (let item of items) {
+      if (item === null) {
+        emptySlots++;
+      }
+      else {
+        renderSeparator();
+        isFirst = false;
+
+        if (emptySlots) {
+          this._renderEmptySlots(emptySlots);
+          emptySlots = 0;
+        }
         let elem = this.message._renderValueGrip(item, { concise: true });
         this.element.appendChild(elem);
-      } else if (shown == (items.length - 1)) {
-        this._text(", ");
       }
-
-      shown++;
     }
 
+    if (emptySlots) {
+      renderSeparator();
+      this._renderEmptySlots(emptySlots, false);
+    }
+
+    let shown = items.length;
     if (shown < preview.length) {
       this._text(", ");
 
@@ -2204,6 +2217,16 @@ Widgets.ObjectRenderers.add({
 
     this._text(" ]");
   },
+
+  _renderEmptySlots: function(aNumSlots, aAppendComma=true) {
+    let slotLabel = l10n.getStr("emptySlotLabel");
+    let slotText = PluralForm.get(aNumSlots, slotLabel);
+    this._text("<" + slotText.replace("#1", aNumSlots) + ">");
+    if (aAppendComma) {
+      this._text(", ");
+    }
+  },
+
 }); // Widgets.ObjectRenderers.byKind.ArrayLike
 
 /**

browser/devtools/webconsole/test/browser.ini

@@ -279,6 +279,7 @@ run-if = os == "mac"
 [browser_webconsole_output_03.js]
 [browser_webconsole_output_04.js]
 [browser_webconsole_output_05.js]
+[browser_webconsole_output_06.js]
 [browser_webconsole_output_dom_elements_01.js]
 [browser_webconsole_output_dom_elements_02.js]
 [browser_webconsole_output_dom_elements_03.js]

browser/devtools/webconsole/test/browser_webconsole_output_02.js

@@ -86,7 +86,7 @@ let inputTests = [
   // 8 - array with holes and a cyclic reference
   {
     input: "window.array4",
-    output: 'Array [ , , , , , "test", Array[7] ]',
+    output: 'Array [ <5 empty slots>, "test", Array[7] ]',
     printOutput: '",,,,,test,"',
     inspectable: true,
     variablesViewLabel: "Array[7]",

browser/devtools/webconsole/test/browser_webconsole_output_06.js

@@ -0,0 +1,114 @@
+ /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+ /* Any copyright is dedicated to the Public Domain.
+  http://creativecommons.org/publicdomain/zero/1.0/ */
+ "use strict";
+
+// Test the webconsole output for various arrays.
+
+const TEST_URI = "data:text/html;charset=utf8,test for console output - 06";
+
+let inputTests = [
+  // 1 - array with empty slots only
+  {
+    input: 'Array(5)',
+    output: 'Array [ <5 empty slots> ]',
+    printOutput: ',,,,',
+    inspectable: true,
+    variablesViewLabel: "Array[5]",
+  },
+  // 2 - array with one empty slot at the beginning
+  {
+    input: '[,1,2,3]',
+    output: 'Array [ <1 empty slot>, 1, 2, 3 ]',
+    printOutput: ",1,2,3",
+    inspectable: true,
+    variablesViewLabel: "Array[4]",
+  },
+  // 3 - array with multiple consecutive empty slots at the beginning
+  {
+    input: '[,,,3,4,5]',
+    output: 'Array [ <3 empty slots>, 3, 4, 5 ]',
+    printOutput: ",,,3,4,5",
+    inspectable: true,
+    variablesViewLabel: "Array[6]",
+  },
+  // 4 - array with one empty slot at the middle
+  {
+    input: '[0,1,,3,4,5]',
+    output: 'Array [ 0, 1, <1 empty slot>, 3, 4, 5 ]',
+    printOutput: "0,1,,3,4,5",
+    inspectable: true,
+    variablesViewLabel: "Array[6]",
+  },
+  // 5 - array with multiple successive empty slots at the middle
+  {
+    input: '[0,1,,,,5]',
+    output: 'Array [ 0, 1, <3 empty slots>, 5 ]',
+    printOutput: "0,1,,,,5",
+    inspectable: true,
+    variablesViewLabel: "Array[6]",
+  },
+  // 6 - array with multiple non successive single empty slots
+  {
+    input: '[0,,2,,4,5]',
+    output: 'Array [ 0, <1 empty slot>, 2, <1 empty slot>, 4, 5 ]',
+    printOutput: "0,,2,,4,5",
+    inspectable: true,
+    variablesViewLabel: "Array[6]",
+  },
+  // 7 - array with multiple multi-slot holes
+  {
+    input: '[0,,,3,,,,7,8]',
+    output: 'Array [ 0, <2 empty slots>, 3, <3 empty slots>, 7, 8 ]',
+    printOutput: "0,,,3,,,,7,8",
+    inspectable: true,
+    variablesViewLabel: "Array[9]",
+  },
+  // 8 - array with a single slot hole at the end
+  {
+    input: '[0,1,2,3,4,,]',
+    output: 'Array [ 0, 1, 2, 3, 4, <1 empty slot> ]',
+    printOutput: "0,1,2,3,4,",
+    inspectable: true,
+    variablesViewLabel: "Array[6]",
+  },
+  // 9 - array with multiple consecutive empty slots at the end
+  {
+    input: '[0,1,2,,,,]',
+    output: 'Array [ 0, 1, 2, <3 empty slots> ]',
+    printOutput: "0,1,2,,,",
+    inspectable: true,
+    variablesViewLabel: "Array[6]",
+  },
+
+  // 10 - array with members explicitly set to null
+  {
+    input: '[0,null,null,3,4,5]',
+    output: 'Array [ 0, null, null, 3, 4, 5 ]',
+    printOutput: "0,,,3,4,5",
+    inspectable: true,
+    variablesViewLabel: "Array[6]"
+  },
+
+  // 11 - array with members explicitly set to undefined
+  {
+    input: '[0,undefined,undefined,3,4,5]',
+    output: 'Array [ 0, undefined, undefined, 3, 4, 5 ]',
+    printOutput: "0,,,3,4,5",
+    inspectable: true,
+    variablesViewLabel: "Array[6]"
+  }
+];
+
+function test() {
+  Task.spawn(function*() {
+    let {tab} = yield loadTab(TEST_URI);
+    let hud = yield openConsole(tab);
+    return checkOutputForInputs(hud, inputTests);
+  }).then(finishUp);
+}
+
+function finishUp() {
+  inputTests = null;
+  finishTest();
+}

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

@@ -241,3 +241,12 @@ selfxss.okstring=allow pasting
 # you hover the arrow for expanding/collapsing the message details. For
 # console.error() and other messages we show the stacktrace.
 messageToggleDetails=Show/hide message details.
+
+# LOCALIZATION NOTE (emptySlotLabel): the text is displayed when an Array
+# with empty slots is printed to the console.
+# This is a semi-colon list of plural forms.
+# See: http://developer.mozilla.org/en/docs/Localization_and_Plurals
+# #1 number of empty slots
+# example: 1 empty slot
+# example: 5 empty slots
+emptySlotLabel=#1 empty slot;#1 empty slots