console: replace object abbreviation with line breaking (#4425)

2 files changed, 111 insertions, 30 deletions

diff --git a/cli/js/tests/console_test.ts b/cli/js/tests/console_test.ts
index b64016078..e571b02fb 100644
--- a/cli/js/tests/console_test.ts
+++ b/cli/js/tests/console_test.ts
@@ -109,7 +109,32 @@ unitTest(function consoleTestStringifyCircular(): void {
   };
 
   nestedObj.o = circularObj;
-  const nestedObjExpected = `{ num, bool, str, method, asyncMethod, generatorMethod, un, nu, arrowFunc, extendedClass, nFunc, extendedCstr, o }`;
+  const nestedObjExpected = `{
+ num: 1,
+ bool: true,
+ str: "a",
+ method: [Function: method],
+ asyncMethod: [AsyncFunction: asyncMethod],
+ generatorMethod: [GeneratorFunction: generatorMethod],
+ un: undefined,
+ nu: null,
+ arrowFunc: [Function: arrowFunc],
+ extendedClass: Extended { a: 1, b: 2 },
+ nFunc: [Function],
+ extendedCstr: [Function: Extended],
+ o: {
+  num: 2,
+  bool: false,
+  str: "b",
+  method: [Function: method],
+  un: undefined,
+  nu: null,
+  nested: [Circular],
+  emptyObj: {},
+  arr: [ 1, "s", false, null, [Circular] ],
+  baseClass: Base { a: 1 }
+ }
+}`;
 
   assertEquals(stringify(1), "1");
   assertEquals(stringify(-0), "-0");
@@ -166,7 +191,30 @@ unitTest(function consoleTestStringifyCircular(): void {
   assertEquals(stringify(JSON), 'JSON { Symbol(Symbol.toStringTag): "JSON" }');
   assertEquals(
     stringify(console),
-    "{ printFunc, log, debug, info, dir, dirxml, warn, error, assert, count, countReset, table, time, timeLog, timeEnd, group, groupCollapsed, groupEnd, clear, trace, indentLevel, Symbol(isConsoleInstance) }"
+    `{
+ printFunc: [Function],
+ log: [Function],
+ debug: [Function],
+ info: [Function],
+ dir: [Function],
+ dirxml: [Function],
+ warn: [Function],
+ error: [Function],
+ assert: [Function],
+ count: [Function],
+ countReset: [Function],
+ table: [Function],
+ time: [Function],
+ timeLog: [Function],
+ timeEnd: [Function],
+ group: [Function],
+ groupCollapsed: [Function],
+ groupEnd: [Function],
+ clear: [Function],
+ trace: [Function],
+ indentLevel: 0,
+ Symbol(isConsoleInstance): true
+}`
   );
   assertEquals(
     stringify({ str: 1, [Symbol.for("sym")]: 2, [Symbol.toStringTag]: "TAG" }),
@@ -200,6 +248,42 @@ unitTest(function consoleTestStringifyWithDepth(): void {
   );
 });
 
+unitTest(function consoleTestStringifyLargeObject(): void {
+  const obj = {
+    a: 2,
+    o: {
+      a: "1",
+      b: "2",
+      c: "3",
+      d: "4",
+      e: "5",
+      f: "6",
+      g: 10,
+      asd: 2,
+      asda: 3,
+      x: { a: "asd", x: 3 }
+    }
+  };
+  assertEquals(
+    stringify(obj),
+    `{
+ a: 2,
+ o: {
+  a: "1",
+  b: "2",
+  c: "3",
+  d: "4",
+  e: "5",
+  f: "6",
+  g: 10,
+  asd: 2,
+  asda: 3,
+  x: { a: "asd", x: 3 }
+ }
+}`
+  );
+});
+
 unitTest(function consoleTestWithCustomInspector(): void {
   class A {
     [customInspect](): string {
diff --git a/cli/js/web/console.ts b/cli/js/web/console.ts
index 0812a4e21..69f1a0631 100644
--- a/cli/js/web/console.ts
+++ b/cli/js/web/console.ts
@@ -16,9 +16,7 @@ type ConsoleOptions = Partial<{
 // Default depth of logging nested objects
 const DEFAULT_MAX_DEPTH = 4;
 
-// Number of elements an object must have before it's displayed in appreviated
-// form.
-const OBJ_ABBREVIATE_SIZE = 5;
+const LINE_BREAKING_LENGTH = 80;
 
 const STR_ABBREVIATE_SIZE = 100;
 
@@ -299,37 +297,36 @@ function createRawObjectString(
   const entries: string[] = [];
   const stringKeys = Object.keys(value);
   const symbolKeys = Object.getOwnPropertySymbols(value);
-  const numKeys = stringKeys.length + symbolKeys.length;
-  if (numKeys > OBJ_ABBREVIATE_SIZE) {
-    for (const key of stringKeys) {
-      entries.push(key);
-    }
-    for (const key of symbolKeys) {
-      entries.push(key.toString());
-    }
-  } else {
-    for (const key of stringKeys) {
-      entries.push(
-        `${key}: ${stringifyWithQuotes(value[key], ctx, level + 1, maxLevel)}`
-      );
-    }
-    for (const key of symbolKeys) {
-      entries.push(
-        `${key.toString()}: ${stringifyWithQuotes(
-          // @ts-ignore
-          value[key],
-          ctx,
-          level + 1,
-          maxLevel
-        )}`
-      );
-    }
+
+  for (const key of stringKeys) {
+    entries.push(
+      `${key}: ${stringifyWithQuotes(value[key], ctx, level + 1, maxLevel)}`
+    );
   }
+  for (const key of symbolKeys) {
+    entries.push(
+      `${key.toString()}: ${stringifyWithQuotes(
+        // @ts-ignore
+        value[key],
+        ctx,
+        level + 1,
+        maxLevel
+      )}`
+    );
+  }
+
+  const totalLength = entries.length + level + entries.join("").length;
 
   ctx.delete(value);
 
   if (entries.length === 0) {
     baseString = "{}";
+  } else if (totalLength > LINE_BREAKING_LENGTH) {
+    const entryIndent = " ".repeat(level + 1);
+    const closingIndent = " ".repeat(level);
+    baseString = `{\n${entryIndent}${entries.join(
+      `,\n${entryIndent}`
+    )}\n${closingIndent}}`;
   } else {
     baseString = `{ ${entries.join(", ")} }`;
   }