DevTools: align console %o optimal formatting specifier with spec

The console spec says that the %o specifier should produce
"optimally useful formatting" as opposed to the %O
"generic JavaScript object formatting". To make this distinction clearer
and align log() to %o and dir() to %O, this CL will format
arrays/objects with previews when using %o.

Please see crbug for screenshot.

Bug: 751850
Change-Id: I927e1c34667f1d11bc13e98a86d38419b7012940
Reviewed-on: https://chromium-review.googlesource.com/607576
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#505333}

third_party/WebKit/LayoutTests/http/tests/devtools/console/console-message-format-expected.txt

 Tests that console logging uses proper message formatting.
 
-console-message-format.js:14 Message format number 1, 2 and 3.5
-console-message-format.js:15 Message format for string
-console-message-format.js:16 Object Object
+console-message-format.js:11 Message format number 1, 2 and 3.5
+console-message-format.js:12 Message format for string
+console-message-format.js:13 Object {foo: "bar"}
+console-message-format.js:14 Array (2) ["foo", "bar"]
+console-message-format.js:15 Object as object: Object
+console-message-format.js:16 Array as object: Array(2)
 console-message-format.js:17 Floating as integers: 42 42
 console-message-format.js:18 Floating as is: 42.5
 console-message-format.js:19 Non-numbers as numbers: NaN NaN NaN

third_party/WebKit/LayoutTests/http/tests/devtools/console/console-message-format.js

@@ -7,13 +7,13 @@
 
   await TestRunner.loadModule('console_test_runner');
   await TestRunner.showPanel('console');
-  await TestRunner.loadHTML(`
-    <p id="p"></p>
-  `);
   await TestRunner.evaluateInPagePromise(`
     console.log('Message format number %i, %d and %f', 1, 2, 3.5);
     console.log('Message %s for %s', 'format', 'string');
     console.log('Object %o', {'foo' : 'bar' });
+    console.log('Array %o', ['foo', 'bar']);
+    console.log('Object as object: %O', {'foo' : 'bar' });
+    console.log('Array as object: %O', ['foo', 'bar']);
     console.log("Floating as integers: %d %i", 42.5, 42.5);
     console.log("Floating as is: %f", 42.5);
     console.log("Non-numbers as numbers: %d %i %f", document, null, "document");

third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js

@@ -762,12 +762,13 @@ Console.ConsoleViewMessage = class {
 
     /**
      * @param {boolean} force
+     * @param {boolean} includePreview
      * @param {!SDK.RemoteObject} obj
      * @return {!Element}
      * @this {Console.ConsoleViewMessage}
      */
-    function parameterFormatter(force, obj) {
-      return this._formatParameter(obj, force, false);
+    function parameterFormatter(force, includePreview, obj) {
+      return this._formatParameter(obj, force, includePreview);
     }
 
     function stringFormatter(obj) {
@@ -815,7 +816,7 @@ Console.ConsoleViewMessage = class {
     }
 
     // Firebug uses %o for formatting objects.
-    formatters.o = parameterFormatter.bind(this, false);
+    formatters.o = parameterFormatter.bind(this, false /* force */, true /* includePreview */);
     formatters.s = stringFormatter;
     formatters.f = floatFormatter;
     // Firebug allows both %i and %d for formatting integers.
@@ -826,7 +827,7 @@ Console.ConsoleViewMessage = class {
     formatters.c = styleFormatter;
 
     // Support %O to force object formatting, instead of the type-based %o formatting.
-    formatters.O = parameterFormatter.bind(this, true);
+    formatters.O = parameterFormatter.bind(this, true /* force */, false /* includePreview */);
 
     formatters._ = bypassFormatter;