DevTools: clean up ObjectPropertiesSection.createValueElement

BUG=405845

Review-Url: https://codereview.chromium.org/2606733003
Cr-Commit-Position: refs/heads/master@{#443155}

third_party/WebKit/LayoutTests/inspector/console/console-log-object-with-getter-expected.txt

-CONSOLE MESSAGE: line 15: [object Object]
-CONSOLE MESSAGE: line 16: 1,
+CONSOLE MESSAGE: line 25: [object Object]
+CONSOLE MESSAGE: line 26: 1,
+CONSOLE MESSAGE: line 27: [object Object]
 Tests that console logging dumps object values defined by getters and allows to expand it.
 
-console-log-object-with-getter.html:15 Object {}
-console-log-object-with-getter.html:16 [(...), undefined × 1]
-console-log-object-with-getter.html:15 Objectfoo: Objecta: 1b: 2__proto__: Objectget foo: function ()set bar: function (x)__proto__: Object
-console-log-object-with-getter.html:16 Array(2)0: 1length: 2get 0: function ()set 1: function (x)__proto__: Array(0)
+console-log-object-with-getter.html:25 Object {}
+console-log-object-with-getter.html:26 [(...), undefined × 1]
+console-log-object-with-getter.html:27 Object {}
+console-log-object-with-getter.html:25 Objectfoo: Objecta: 1b: 2__proto__: Objectget foo: function ()set bar: function (x)__proto__: Object console-message > source-code > console-message-url devtools-link > console-message-text > console-view-object-properties-section object-value-object source-code expanded > tree-outline-disclosure tree-outline-disclosure-hide-overflow > tree-outline source-code object-properties-section > parent object-properties-section-root-element expanded > selection fill > object-state-note info-note > children expanded > parent expanded > name > object-properties-section-separator > object-value-object value > children expanded > selection fill > name > object-properties-section-separator > object-value-number value > children > selection fill > name > object-properties-section-separator > object-value-number value > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-object value > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-function value > object-value-function-prefix > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-function value > object-value-function-prefix > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-object value > children
+console-log-object-with-getter.html:26 Array(2)0: 1length: 2get 0: function ()set 1: function (x)__proto__: Array(0) console-message > source-code > console-message-url devtools-link > console-message-text > console-view-object-properties-section object-value-array source-code expanded > tree-outline-disclosure tree-outline-disclosure-hide-overflow > tree-outline source-code object-properties-section > parent object-properties-section-root-element expanded > selection fill > object-state-note info-note > children expanded > name > object-properties-section-separator > object-value-number value > children > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-number value > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-function value > object-value-function-prefix > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-function value > object-value-function-prefix > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-array value > children
+console-log-object-with-getter.html:27 Objecterror: [Exception: Error: myError]function: [Exception: function ()]number: [Exception: 123]string: [Exception: "myString"]get error: function error()get function: function function()get number: function number()get string: function string()__proto__: Object console-message > source-code > console-message-url devtools-link > console-message-text > console-view-object-properties-section object-value-object source-code expanded > tree-outline-disclosure tree-outline-disclosure-hide-overflow > tree-outline source-code object-properties-section > parent object-properties-section-root-element expanded > selection fill > object-state-note info-note > children expanded > name > object-properties-section-separator > error value > object-value-error > children > name > object-properties-section-separator > error value > object-value-function > object-value-function-prefix > children > name > object-properties-section-separator > error value > object-value-number > children > name > object-properties-section-separator > error value > object-value-string > object-value-string-quote > object-value-string-quote > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-function value > object-value-function-prefix > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-function value > object-value-function-prefix > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-function value > object-value-function-prefix > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-function value > object-value-function-prefix > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-object value > children
 

third_party/WebKit/LayoutTests/inspector/console/console-log-object-with-getter.html

@@ -4,16 +4,27 @@
 <script src="../../http/tests/inspector/console-test.js"></script>
 <script>
 var obj = {}
-Object.defineProperty(obj, 'foo', {enumerable: true, get: function() { return {a:1,b:2}; }});
-Object.defineProperty(obj, 'bar', {enumerable: false, set: function(x) { this.baz = x; }});
+Object.defineProperty(obj, "foo", {enumerable: true, get: function() { return {a:1,b:2}; }});
+Object.defineProperty(obj, "bar", {enumerable: false, set: function(x) { this.baz = x; }});
 
 var arr = [];
 Object.defineProperty(arr, 0, {enumerable: true, get: function() { return 1; }});
 Object.defineProperty(arr, 1, {enumerable: false, set: function(x) { this.baz = x; }});
+
+var myError = new Error("myError");
+myError.stack = "custom stack";
+var objWithGetterExceptions = {
+    get error() { throw myError },
+    get string() { throw "myString" },
+    get number() { throw 123 },
+    get function() { throw function() {} },
+};
+
 function logObject()
 {
     console.log(obj);
     console.log(arr);
+    console.log(objWithGetterExceptions);
 }
 
 function test()
@@ -34,7 +45,7 @@ function test()
     }
     function step5()
     {
-        InspectorTest.dumpConsoleMessages();
+        InspectorTest.dumpConsoleMessages(false, true);
         InspectorTest.completeTest();
     }
 }

third_party/WebKit/LayoutTests/inspector/console/console-proxy-expected.txt

@@ -6,7 +6,7 @@ console-proxy.html:21 Proxy {boo: 42, foo: 43} console-message > source-code > c
 console-proxy.html:23 Proxy {boo: 42, foo: 43} console-message > source-code > console-message-url devtools-link > console-message-text > console-view-object-properties-section object-value-proxy source-code > tree-outline-disclosure tree-outline-disclosure-hide-overflow > tree-outline source-code object-properties-section > parent object-properties-section-root-element > selection fill > console-object-preview > name > object-value-number > name > object-value-number > children
 window.accessedGet = false
 info-note display: inline-block
-console-proxy.html:21 Proxy[[Handler]]: Object[[Target]]: Object[[IsRevoked]]: false console-message > source-code > console-message-url devtools-link > console-message-text > console-view-object-properties-section object-value-proxy source-code expanded > tree-outline-disclosure tree-outline-disclosure-hide-overflow > tree-outline source-code object-properties-section > parent object-properties-section-root-element expanded > selection fill > object-state-note info-note > children expanded > parent > selection fill > name > object-properties-section-separator > value object-value-object > children > parent > selection fill > name > object-properties-section-separator > value object-value-object > children > selection fill > name > object-properties-section-separator > value object-value-boolean > children
-console-proxy.html:23 Proxy[[Handler]]: Object[[Target]]: Proxy[[IsRevoked]]: false console-message > source-code > console-message-url devtools-link > console-message-text > console-view-object-properties-section object-value-proxy source-code expanded > tree-outline-disclosure tree-outline-disclosure-hide-overflow > tree-outline source-code object-properties-section > parent object-properties-section-root-element expanded > selection fill > object-state-note info-note > children expanded > parent > selection fill > name > object-properties-section-separator > value object-value-object > children > parent > selection fill > name > object-properties-section-separator > value object-value-proxy > children > selection fill > name > object-properties-section-separator > value object-value-boolean > children
+console-proxy.html:21 Proxy[[Handler]]: Object[[Target]]: Object[[IsRevoked]]: false console-message > source-code > console-message-url devtools-link > console-message-text > console-view-object-properties-section object-value-proxy source-code expanded > tree-outline-disclosure tree-outline-disclosure-hide-overflow > tree-outline source-code object-properties-section > parent object-properties-section-root-element expanded > selection fill > object-state-note info-note > children expanded > parent > selection fill > name > object-properties-section-separator > object-value-object value > children > parent > selection fill > name > object-properties-section-separator > object-value-object value > children > selection fill > name > object-properties-section-separator > object-value-boolean value > children
+console-proxy.html:23 Proxy[[Handler]]: Object[[Target]]: Proxy[[IsRevoked]]: false console-message > source-code > console-message-url devtools-link > console-message-text > console-view-object-properties-section object-value-proxy source-code expanded > tree-outline-disclosure tree-outline-disclosure-hide-overflow > tree-outline source-code object-properties-section > parent object-properties-section-root-element expanded > selection fill > object-state-note info-note > children expanded > parent > selection fill > name > object-properties-section-separator > object-value-object value > children > parent > selection fill > name > object-properties-section-separator > object-value-proxy value > children > selection fill > name > object-properties-section-separator > object-value-boolean value > children
 window.accessedGet = false
 

third_party/WebKit/LayoutTests/inspector/extensions/extensions-audits-content-script-expected.txt

@@ -9,7 +9,9 @@ RUNNING TEST: extension_testAudits
                  main world object
                    whereAmI
                    : 
-                   "main world"
+                    "
+                   main world
+                    "
                    __proto__
                    : 
                    Object
@@ -28,7 +30,9 @@ RUNNING TEST: extension_testAudits
                  content script object
                    whereAmI
                    : 
-                   "brave new world"
+                    "
+                   brave new world
+                    "
                    __proto__
                    : 
                    Object

third_party/WebKit/LayoutTests/inspector/extensions/extensions-audits-expected.txt

@@ -27,7 +27,9 @@ Progress: 75%
                     42
                     b
                     : 
-                    "foo"
+                     "
+                    foo
+                     "
                     __proto__
                     : 
                     Object

third_party/WebKit/Source/devtools/front_end/components/ObjectPropertiesSection.js

@@ -137,7 +137,7 @@ Components.ObjectPropertiesSection = class extends UI.TreeOutlineInShadow {
    */
   static valueElementForFunctionDescription(description, includePreview, defaultName) {
     var valueElement = createElementWithClass('span', 'object-value-function');
-    var text = description.replace(/^function [gs]et /, 'function ');
+    var text = description ? description.replace(/^function [gs]et /, 'function ') : '';
     defaultName = defaultName || '';
 
     // This set of best-effort regular expressions captures common function descriptions.
@@ -181,6 +181,7 @@ Components.ObjectPropertiesSection = class extends UI.TreeOutlineInShadow {
     } else {
       addElements('function', text, nameAndArguments(text));
     }
+    valueElement.title = description || '';
     return valueElement;
 
     /**
@@ -238,84 +239,91 @@ Components.ObjectPropertiesSection = class extends UI.TreeOutlineInShadow {
    * @return {!Element}
    */
   static createValueElement(value, wasThrown, parentElement, linkifier) {
-    var valueElement = createElementWithClass('span', 'value');
+    var valueElement;
     var type = value.type;
     var subtype = value.subtype;
     var description = value.description;
-    var prefix;
-    var valueText;
-    var suffix;
-    if (wasThrown) {
-      prefix = '[Exception: ';
-      valueText = description;
-      suffix = ']';
+    if (type === 'object' && subtype === 'internal#location') {
+      var rawLocation = value.debuggerModel().createRawLocationByScriptId(
+          value.value.scriptId, value.value.lineNumber, value.value.columnNumber);
+      if (rawLocation && linkifier)
+        return linkifier.linkifyRawLocation(rawLocation, '');
+      valueElement = createUnknownInternalLocationElement();
     } else if (type === 'string' && typeof description === 'string') {
-      // Render \n as a nice unicode cr symbol.
-      prefix = '"';
-      valueText = description.replace(/\n/g, '\u21B5');
-      suffix = '"';
-    } else if (type !== 'object' || subtype !== 'node') {
-      valueText = description;
-    }
-
-    if (type === 'function') {
+      valueElement = createStringElement();
+    } else if (type === 'function') {
       valueElement = Components.ObjectPropertiesSection.valueElementForFunctionDescription(description);
-    } else if (type !== 'number' || valueText.indexOf('e') === -1) {
-      valueElement.setTextContentTruncatedIfNeeded(valueText || '');
-      if (prefix)
-        valueElement.insertBefore(createTextNode(prefix), valueElement.firstChild);
-      if (suffix)
-        valueElement.createTextChild(suffix);
-    } else {
-      var numberParts = valueText.split('e');
-      var mantissa = valueElement.createChild('span', 'object-value-scientific-notation-mantissa');
-      mantissa.textContent = numberParts[0];
-      var exponent = valueElement.createChild('span', 'object-value-scientific-notation-exponent');
-      exponent.textContent = 'e' + numberParts[1];
-      valueElement.classList.add('object-value-scientific-notation-number');
+    } else if (type === 'object' && subtype === 'node' && description) {
+      valueElement = createNodeElement();
+    } else if (type === 'number' && description && description.indexOf('e') !== -1) {
+      valueElement = createNumberWithExponentElement();
       if (parentElement)  // FIXME: do it in the caller.
         parentElement.classList.add('hbox');
-    }
-
-    if (wasThrown)
-      valueElement.classList.add('error');
-    if (subtype || type)
-      valueElement.classList.add('object-value-' + (subtype || type));
-
-    if (type === 'object' && subtype === 'node' && description) {
-      Components.DOMPresentationUtils.createSpansForNodeTitle(valueElement, description);
-      valueElement.addEventListener('click', mouseClick, false);
-      valueElement.addEventListener('mousemove', mouseMove, false);
-      valueElement.addEventListener('mouseleave', mouseLeave, false);
     } else {
+      valueElement = createElementWithClass('span', 'object-value-' + (subtype || type));
+      valueElement.setTextContentTruncatedIfNeeded(description);
       valueElement.title = description || '';
     }
 
-    if (type === 'object' && subtype === 'internal#location') {
-      var rawLocation = value.debuggerModel().createRawLocationByScriptId(
-          value.value.scriptId, value.value.lineNumber, value.value.columnNumber);
-      if (rawLocation && linkifier)
-        return linkifier.linkifyRawLocation(rawLocation, '');
-      valueElement.textContent = '<unknown>';
+    if (wasThrown) {
+      var wrapperElement = createElementWithClass('span', 'error value');
+      wrapperElement.createTextChild('[' + Common.UIString('Exception') + ': ');
+      wrapperElement.appendChild(valueElement);
+      wrapperElement.createTextChild(']');
+      return wrapperElement;
     }
+    valueElement.classList.add('value');
+    return valueElement;
 
-    function mouseMove() {
-      SDK.DOMModel.highlightObjectAsDOMNode(value);
+    /**
+     * @return {!Element}
+     */
+    function createUnknownInternalLocationElement() {
+      var valueElement = createElementWithClass('span');
+      valueElement.textContent = '<' + Common.UIString('unknown') + '>';
+      valueElement.title = description || '';
+      return valueElement;
     }
 
-    function mouseLeave() {
-      SDK.DOMModel.hideDOMNodeHighlight();
+    /**
+     * @return {!Element}
+     */
+    function createStringElement() {
+      var valueElement = createElementWithClass('span', 'object-value-string');
+      valueElement.createChild('span', 'object-value-string-quote').textContent = '"';
+      valueElement.createTextChild('').setTextContentTruncatedIfNeeded(description.replace(/\n/g, '\u21B5'));
+      valueElement.createChild('span', 'object-value-string-quote').textContent = '"';
+      valueElement.title = description || '';
+      return valueElement;
     }
 
     /**
-     * @param {!Event} event
+     * @return {!Element}
      */
-    function mouseClick(event) {
-      Common.Revealer.reveal(value);
-      event.consume(true);
+    function createNodeElement() {
+      var valueElement = createElementWithClass('span', 'object-value-node');
+      Components.DOMPresentationUtils.createSpansForNodeTitle(valueElement, /** @type {string} */ (description));
+      valueElement.addEventListener('click', event => {
+        Common.Revealer.reveal(value);
+        event.consume(true);
+      }, false);
+      valueElement.addEventListener('mousemove', () => SDK.DOMModel.highlightObjectAsDOMNode(value), false);
+      valueElement.addEventListener('mouseleave', () => SDK.DOMModel.hideDOMNodeHighlight(), false);
+      return valueElement;
     }
 
-    return valueElement;
+    /**
+     * @return {!Element}
+     */
+    function createNumberWithExponentElement() {
+      var valueElement = createElementWithClass('span', 'object-value-number');
+      var numberParts = description.split('e');
+      valueElement.createChild('span', 'object-value-scientific-notation-mantissa').textContent = numberParts[0];
+      valueElement.createChild('span', 'object-value-scientific-notation-exponent').textContent = 'e' + numberParts[1];
+      valueElement.classList.add('object-value-scientific-notation-number');
+      valueElement.title = description || '';
+      return valueElement;
+    }
   }
 
   /**