Skip to content

GitLab

T
tangled
Commit 30b50697 authored by luoe's avatar luoe Committed by Commit bot
Browse files
Options

DevTools: clean up ObjectPropertiesSection.createValueElement 

BUG=405845

Review-Url: https://codereview.chromium.org/2606733003
Cr-Commit-Position: refs/heads/master@{#443155}
parent 80fccc61
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 118 additions and 90 deletions
third_party/WebKit/LayoutTests/inspector/console/console-log-object-with-getter-expected.txt
View file @ 30b50697
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
View file @ 30b50697
......@@ -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
View file @ 30b50697
......@@ -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
View file @ 30b50697
......@@ -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
View file @ 30b50697
......@@ -27,7 +27,9 @@ Progress: 75%
42
b
:
"foo"
"
foo
"
__proto__
:
Object
......
third_party/WebKit/Source/devtools/front_end/components/ObjectPropertiesSection.js
View file @ 30b50697
......@@ -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;
}
}
/**
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment