@dcloudio/uni-debugger
Version:
uni-app debugger
1,430 lines (1,295 loc) • 54 kB
JavaScript
/*
* Copyright (C) 2011 Google Inc. All rights reserved.
* Copyright (C) 2007, 2008 Apple Inc. All rights reserved.
* Copyright (C) 2009 Joseph Pecoraro
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met:
*
* 1. Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* 2. Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
* 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of
* its contributors may be used to endorse or promote products derived
* from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
* DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
* DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
* LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
* ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
* THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
/**
* @implements {Console.ConsoleViewportElement}
* @unrestricted
*/
Console.ConsoleViewMessage = class {
/**
* @param {!SDK.ConsoleMessage} consoleMessage
* @param {!Components.Linkifier} linkifier
* @param {!ProductRegistry.BadgePool} badgePool
* @param {number} nestingLevel
*/
constructor(consoleMessage, linkifier, badgePool, nestingLevel) {
this._message = consoleMessage;
this._linkifier = linkifier;
this._badgePool = badgePool;
this._repeatCount = 1;
this._closeGroupDecorationCount = 0;
this._nestingLevel = nestingLevel;
/** @type {?DataGrid.DataGrid} */
this._dataGrid = null;
this._previewFormatter = new ObjectUI.RemoteObjectPreviewFormatter();
this._searchRegex = null;
/** @type {?UI.Icon} */
this._messageLevelIcon = null;
}
/**
* @override
* @return {!Element}
*/
element() {
return this.toMessageElement();
}
/**
* @return {!Promise<!Element>}
*/
async completeElementForTest() {
const element = this.toMessageElement();
if (this._completeElementForTestPromise)
await this._completeElementForTestPromise;
return element;
}
/**
* @override
*/
wasShown() {
if (this._dataGrid)
this._dataGrid.updateWidths();
this._isVisible = true;
}
onResize() {
if (!this._isVisible)
return;
if (this._dataGrid)
this._dataGrid.onResize();
}
/**
* @override
*/
willHide() {
this._isVisible = false;
this._cachedHeight = this.contentElement().offsetHeight;
}
/**
* @return {number}
*/
fastHeight() {
if (this._cachedHeight)
return this._cachedHeight;
// This value reflects the 18px min-height of .console-message, plus the
// 1px border of .console-message-wrapper. Keep in sync with consoleView.css.
const defaultConsoleRowHeight = 19;
if (this._message.type === SDK.ConsoleMessage.MessageType.Table) {
const table = this._message.parameters[0];
if (table && table.preview)
return defaultConsoleRowHeight * table.preview.properties.length;
}
return defaultConsoleRowHeight;
}
/**
* @return {!SDK.ConsoleMessage}
*/
consoleMessage() {
return this._message;
}
/**
* @return {!Element}
*/
_buildTableMessage() {
const formattedMessage = createElementWithClass('span', 'source-code');
const anchorElement = this._buildMessageAnchor();
if (anchorElement)
formattedMessage.appendChild(anchorElement);
const badgeElement = this._buildMessageBadge();
if (badgeElement)
formattedMessage.appendChild(badgeElement);
let table = this._message.parameters && this._message.parameters.length ? this._message.parameters[0] : null;
if (table)
table = this._parameterToRemoteObject(table);
if (!table || !table.preview)
return formattedMessage;
const rawValueColumnSymbol = Symbol('rawValueColumn');
const columnNames = [];
const preview = table.preview;
const rows = [];
for (let i = 0; i < preview.properties.length; ++i) {
const rowProperty = preview.properties[i];
let rowSubProperties;
if (rowProperty.valuePreview)
rowSubProperties = rowProperty.valuePreview.properties;
else if (rowProperty.value)
rowSubProperties = [{name: rawValueColumnSymbol, type: rowProperty.type, value: rowProperty.value}];
else
continue;
const rowValue = {};
const maxColumnsToRender = 20;
for (let j = 0; j < rowSubProperties.length; ++j) {
const cellProperty = rowSubProperties[j];
let columnRendered = columnNames.indexOf(cellProperty.name) !== -1;
if (!columnRendered) {
if (columnNames.length === maxColumnsToRender)
continue;
columnRendered = true;
columnNames.push(cellProperty.name);
}
if (columnRendered) {
const cellElement = this._renderPropertyPreviewOrAccessor(table, [rowProperty, cellProperty]);
cellElement.classList.add('console-message-nowrap-below');
rowValue[cellProperty.name] = cellElement;
}
}
rows.push([rowProperty.name, rowValue]);
}
const flatValues = [];
for (let i = 0; i < rows.length; ++i) {
const rowName = rows[i][0];
const rowValue = rows[i][1];
flatValues.push(rowName);
for (let j = 0; j < columnNames.length; ++j)
flatValues.push(rowValue[columnNames[j]]);
}
columnNames.unshift(Common.UIString('(index)'));
const columnDisplayNames = columnNames.map(name => name === rawValueColumnSymbol ? Common.UIString('Value') : name);
if (flatValues.length) {
this._dataGrid = DataGrid.SortableDataGrid.create(columnDisplayNames, flatValues);
this._dataGrid.setStriped(true);
const formattedResult = createElementWithClass('span', 'console-message-text');
const tableElement = formattedResult.createChild('div', 'console-message-formatted-table');
const dataGridContainer = tableElement.createChild('span');
tableElement.appendChild(this._formatParameter(table, true, false));
dataGridContainer.appendChild(this._dataGrid.element);
formattedMessage.appendChild(formattedResult);
this._dataGrid.renderInline();
}
return formattedMessage;
}
/**
* @return {!Element}
*/
_buildMessage() {
let messageElement;
let messageText = this._message.messageText;
//fixed by xxxxxx 移除 at App.vue:39
if(Array.isArray(this._message.parameters)){
const lastParameter = this._message.parameters[this._message.parameters.length-1]
if(
lastParameter &&
lastParameter.type === 'string' &&
lastParameter.value &&
lastParameter.value.indexOf(' at ') === 0 &&
lastParameter.value.indexOf(':') !== -1
){
this._message.parameters.pop()
}
}
if (this._message.source === SDK.ConsoleMessage.MessageSource.ConsoleAPI) {
switch (this._message.type) {
case SDK.ConsoleMessage.MessageType.Trace:
messageElement = this._format(this._message.parameters || ['console.trace']);
break;
case SDK.ConsoleMessage.MessageType.Clear:
messageElement = createElementWithClass('span', 'console-info');
if (Common.moduleSetting('preserveConsoleLog').get())
messageElement.textContent = Common.UIString('console.clear() was prevented due to \'Preserve log\'');
else
messageElement.textContent = Common.UIString('Console was cleared');
messageElement.title =
Common.UIString('Clear all messages with ' + UI.shortcutRegistry.shortcutTitleForAction('console.clear'));
break;
case SDK.ConsoleMessage.MessageType.Assert: {
let args = [Common.UIString('Assertion failed:')];
if (this._message.parameters)
args = args.concat(this._message.parameters);
messageElement = this._format(args);
break;
}
case SDK.ConsoleMessage.MessageType.Dir: {
const obj = this._message.parameters ? this._message.parameters[0] : undefined;
const args = ['%O', obj];
messageElement = this._format(args);
break;
}
case SDK.ConsoleMessage.MessageType.Profile:
case SDK.ConsoleMessage.MessageType.ProfileEnd:
messageElement = this._format([messageText]);
break;
default: {
if (this._message.parameters && this._message.parameters.length === 1 &&
this._message.parameters[0].type === 'string')
messageElement = this._tryFormatAsError(/** @type {string} */ (this._message.parameters[0].value));
const args = this._message.parameters || [messageText];
messageElement = messageElement || this._format(args);
}
}
} else {
let rendered = false;
this._completeElementForTestPromise = null;
for (const extension of self.runtime.extensions(Common.Renderer, this._message)) {
if (extension.descriptor()['source'] === this._message.source) {
messageElement = createElement('span');
let callback;
this._completeElementForTestPromise = new Promise(fulfill => callback = fulfill);
extension.instance().then(renderer => {
renderer.render(this._message)
.then(element => messageElement.appendChild(element || this._format([messageText])))
.then(callback);
});
rendered = true;
break;
}
}
if (!rendered) {
const messageInParameters =
this._message.parameters && messageText === /** @type {string} */ (this._message.parameters[0]);
if (this._message.source === SDK.ConsoleMessage.MessageSource.Violation)
messageText = Common.UIString('[Violation] %s', messageText);
else if (this._message.source === SDK.ConsoleMessage.MessageSource.Intervention)
messageText = Common.UIString('[Intervention] %s', messageText);
else if (this._message.source === SDK.ConsoleMessage.MessageSource.Deprecation)
messageText = Common.UIString('[Deprecation] %s', messageText);
const args = this._message.parameters || [messageText];
if (messageInParameters)
args[0] = messageText;
messageElement = this._format(args);
}
}
messageElement.classList.add('console-message-text');
const formattedMessage = createElementWithClass('span', 'source-code');
const anchorElement = this._buildMessageAnchor();
if (anchorElement)
formattedMessage.appendChild(anchorElement);
const badgeElement = this._buildMessageBadge();
if (badgeElement)
formattedMessage.appendChild(badgeElement);
formattedMessage.appendChild(messageElement);
return formattedMessage;
}
/**
* @return {?Element}
*/
_buildMessageAnchor() {
let anchorElement = null;
if (this._message.scriptId) {
anchorElement = this._linkifyScriptId(
this._message.scriptId, this._message.url || '', this._message.line, this._message.column);
} else if (this._message.stackTrace && this._message.stackTrace.callFrames.length) {
anchorElement = this._linkifyStackTraceTopFrame(this._message.stackTrace);
} else if (this._message.url && this._message.url !== 'undefined') {
anchorElement = this._linkifyLocation(this._message.url, this._message.line, this._message.column);
}
// Append a space to prevent the anchor text from being glued to the console message when the user selects and copies the console messages.
if (anchorElement) {
const anchorWrapperElement = createElementWithClass('span', 'console-message-anchor');
anchorWrapperElement.appendChild(anchorElement);
anchorWrapperElement.createTextChild(' ');
return anchorWrapperElement;
}
return null;
}
/**
* @return {?Element}
*/
_buildMessageBadge() {
const badgeElement = this._badgeElement();
if (!badgeElement)
return null;
badgeElement.classList.add('console-message-badge');
return badgeElement;
}
/**
* @return {?Element}
*/
_badgeElement() {
if (this._message._url)
return this._badgePool.badgeForURL(new Common.ParsedURL(this._message._url));
if (this._message.stackTrace) {
let stackTrace = this._message.stackTrace;
while (stackTrace) {
for (const callFrame of this._message.stackTrace.callFrames) {
if (callFrame.url)
return this._badgePool.badgeForURL(new Common.ParsedURL(callFrame.url));
}
stackTrace = stackTrace.parent;
}
}
if (!this._message.executionContextId)
return null;
const runtimeModel = this._message.runtimeModel();
if (!runtimeModel)
return null;
const executionContext = runtimeModel.executionContext(this._message.executionContextId);
if (!executionContext || !executionContext.frameId)
return null;
const resourceTreeModel = executionContext.target().model(SDK.ResourceTreeModel);
if (!resourceTreeModel)
return null;
const frame = resourceTreeModel.frameForId(executionContext.frameId);
if (!frame || !frame.parentFrame)
return null;
return this._badgePool.badgeForFrame(frame);
}
/**
* @return {!Element}
*/
_buildMessageWithStackTrace() {
const toggleElement = createElementWithClass('div', 'console-message-stack-trace-toggle');
const contentElement = toggleElement.createChild('div', 'console-message-stack-trace-wrapper');
const messageElement = this._buildMessage();
const icon = UI.Icon.create('smallicon-triangle-right', 'console-message-expand-icon');
const clickableElement = contentElement.createChild('div');
clickableElement.appendChild(icon);
clickableElement.appendChild(messageElement);
const stackTraceElement = contentElement.createChild('div');
const stackTracePreview = Components.JSPresentationUtils.buildStackTracePreviewContents(
this._message.runtimeModel().target(), this._linkifier, this._message.stackTrace);
stackTraceElement.appendChild(stackTracePreview);
stackTraceElement.classList.add('hidden');
/**
* @param {boolean} expand
*/
function expandStackTrace(expand) {
icon.setIconType(expand ? 'smallicon-triangle-down' : 'smallicon-triangle-right');
stackTraceElement.classList.toggle('hidden', !expand);
}
/**
* @param {?Event} event
*/
function toggleStackTrace(event) {
if (event.target.hasSelection())
return;
expandStackTrace(stackTraceElement.classList.contains('hidden'));
event.consume();
}
clickableElement.addEventListener('click', toggleStackTrace, false);
if (this._message.type === SDK.ConsoleMessage.MessageType.Trace)
expandStackTrace(true);
toggleElement._expandStackTraceForTest = expandStackTrace.bind(null, true);
return toggleElement;
}
/**
* @param {string} url
* @param {number} lineNumber
* @param {number} columnNumber
* @return {?Element}
*/
_linkifyLocation(url, lineNumber, columnNumber) {
if (!this._message.runtimeModel())
return null;
return this._linkifier.linkifyScriptLocation(
this._message.runtimeModel().target(), null, url, lineNumber, columnNumber);
}
/**
* @param {!Protocol.Runtime.StackTrace} stackTrace
* @return {?Element}
*/
_linkifyStackTraceTopFrame(stackTrace) {
if (!this._message.runtimeModel())
return null;
return this._linkifier.linkifyStackTraceTopFrame(this._message.runtimeModel().target(), stackTrace);
}
/**
* @param {string} scriptId
* @param {string} url
* @param {number} lineNumber
* @param {number} columnNumber
* @return {?Element}
*/
_linkifyScriptId(scriptId, url, lineNumber, columnNumber) {
if (!this._message.runtimeModel())
return null;
return this._linkifier.linkifyScriptLocation(
this._message.runtimeModel().target(), scriptId, url, lineNumber, columnNumber);
}
/**
* @param {!SDK.RemoteObject|!Protocol.Runtime.RemoteObject|string} parameter
* @return {!SDK.RemoteObject}
*/
_parameterToRemoteObject(parameter) {
if (parameter instanceof SDK.RemoteObject)
return parameter;
const runtimeModel = this._message.runtimeModel();
if (!runtimeModel)
return SDK.RemoteObject.fromLocalObject(parameter);
if (typeof parameter === 'object')
return runtimeModel.createRemoteObject(parameter);
return runtimeModel.createRemoteObjectFromPrimitiveValue(parameter);
}
/**
* @param {!Array.<!SDK.RemoteObject|string>} rawParameters
* @return {!Element}
*/
_format(rawParameters) {
// This node is used like a Builder. Values are continually appended onto it.
const formattedResult = createElement('span');
if (!rawParameters.length)
return formattedResult;
// Formatting code below assumes that parameters are all wrappers whereas frontend console
// API allows passing arbitrary values as messages (strings, numbers, etc.). Wrap them here.
// FIXME: Only pass runtime wrappers here.
let parameters = [];
for (let i = 0; i < rawParameters.length; ++i)
parameters[i] = this._parameterToRemoteObject(rawParameters[i]);
// There can be string log and string eval result. We distinguish between them based on message type.
const shouldFormatMessage =
SDK.RemoteObject.type((/** @type {!Array.<!SDK.RemoteObject>} **/ (parameters))[0]) === 'string' &&
(this._message.type !== SDK.ConsoleMessage.MessageType.Result ||
this._message.level === SDK.ConsoleMessage.MessageLevel.Error);
// Multiple parameters with the first being a format string. Save unused substitutions.
if (shouldFormatMessage) {
const result = this._formatWithSubstitutionString(
/** @type {string} **/ (parameters[0].description), parameters.slice(1), formattedResult);
parameters = result.unusedSubstitutions;
if (parameters.length)
formattedResult.createTextChild(' ');
}
// Single parameter, or unused substitutions from above.
for (let i = 0; i < parameters.length; ++i) {
// Inline strings when formatting.
if (shouldFormatMessage && parameters[i].type === 'string')
formattedResult.appendChild(Console.ConsoleViewMessage._linkifyStringAsFragment(parameters[i].description));
else
formattedResult.appendChild(this._formatParameter(parameters[i], false, true));
if (i < parameters.length - 1)
formattedResult.createTextChild(' ');
}
return formattedResult;
}
/**
* @param {!SDK.RemoteObject} output
* @param {boolean=} forceObjectFormat
* @param {boolean=} includePreview
* @return {!Element}
*/
_formatParameter(output, forceObjectFormat, includePreview) {
if (output.customPreview())
return (new ObjectUI.CustomPreviewComponent(output)).element;
const type = forceObjectFormat ? 'object' : (output.subtype || output.type);
let element;
switch (type) {
case 'error':
element = this._formatParameterAsError(output);
break;
case 'function':
element = this._formatParameterAsFunction(output, includePreview);
break;
case 'array':
case 'arraybuffer':
case 'blob':
case 'dataview':
case 'generator':
case 'iterator':
case 'map':
case 'object':
case 'promise':
case 'proxy':
case 'set':
case 'typedarray':
case 'weakmap':
case 'weakset':
element = this._formatParameterAsObject(output, includePreview);
break;
case 'node':
element = output.isNode() ? this._formatParameterAsNode(output) : this._formatParameterAsObject(output, false);
break;
case 'string':
element = this._formatParameterAsString(output);
break;
case 'boolean':
case 'date':
case 'null':
case 'number':
case 'regexp':
case 'symbol':
case 'undefined':
case 'bigint':
element = this._formatParameterAsValue(output);
break;
default:
element = this._formatParameterAsValue(output);
console.error('Tried to format remote object of unknown type.');
}
element.classList.add('object-value-' + type);
element.classList.add('source-code');
return element;
}
/**
* @param {!SDK.RemoteObject} obj
* @return {!Element}
*/
_formatParameterAsValue(obj) {
const result = createElement('span');
const description = obj.description || '';
if (description.length > Console.ConsoleViewMessage._MaxTokenizableStringLength)
result.appendChild(UI.createExpandableText(description, Console.ConsoleViewMessage._LongStringVisibleLength));
else
result.createTextChild(description);
if (obj.objectId)
result.addEventListener('contextmenu', this._contextMenuEventFired.bind(this, obj), false);
return result;
}
/**
* @param {!SDK.RemoteObject} obj
* @param {boolean=} includePreview
* @return {!Element}
*/
_formatParameterAsObject(obj, includePreview) {
const titleElement = createElementWithClass('span', 'console-object');
if (includePreview && obj.preview) {
titleElement.classList.add('console-object-preview');
this._previewFormatter.appendObjectPreview(titleElement, obj.preview, false /* isEntry */);
} else if (obj.type === 'function') {
const functionElement = titleElement.createChild('span');
ObjectUI.ObjectPropertiesSection.formatObjectAsFunction(obj, functionElement, false);
titleElement.classList.add('object-value-function');
} else {
titleElement.createTextChild(obj.description || '');
}
if (!obj.hasChildren || obj.customPreview())
return titleElement;
const note = titleElement.createChild('span', 'object-state-note info-note');
if (this._message.type === SDK.ConsoleMessage.MessageType.QueryObjectResult)
note.title = ls`This value will not be collected until console is cleared.`;
else
note.title = ls`Value below was evaluated just now.`;
const section = new ObjectUI.ObjectPropertiesSection(obj, titleElement, this._linkifier);
section.element.classList.add('console-view-object-properties-section');
section.enableContextMenu();
return section.element;
}
/**
* @param {!SDK.RemoteObject} func
* @param {boolean=} includePreview
* @return {!Element}
*/
_formatParameterAsFunction(func, includePreview) {
const result = createElement('span');
SDK.RemoteFunction.objectAsFunction(func).targetFunction().then(formatTargetFunction.bind(this));
return result;
/**
* @param {!SDK.RemoteObject} targetFunction
* @this {Console.ConsoleViewMessage}
*/
function formatTargetFunction(targetFunction) {
const functionElement = createElement('span');
ObjectUI.ObjectPropertiesSection.formatObjectAsFunction(targetFunction, functionElement, true, includePreview);
result.appendChild(functionElement);
if (targetFunction !== func) {
const note = result.createChild('span', 'object-info-state-note');
note.title = Common.UIString('Function was resolved from bound function.');
}
result.addEventListener('contextmenu', this._contextMenuEventFired.bind(this, targetFunction), false);
}
}
/**
* @param {!SDK.RemoteObject} obj
* @param {!Event} event
*/
_contextMenuEventFired(obj, event) {
const contextMenu = new UI.ContextMenu(event);
contextMenu.appendApplicableItems(obj);
contextMenu.show();
}
/**
* @param {?SDK.RemoteObject} object
* @param {!Array.<!Protocol.Runtime.PropertyPreview>} propertyPath
* @return {!Element}
*/
_renderPropertyPreviewOrAccessor(object, propertyPath) {
const property = propertyPath.peekLast();
if (property.type === 'accessor')
return this._formatAsAccessorProperty(object, propertyPath.map(property => property.name), false);
return this._previewFormatter.renderPropertyPreview(
property.type, /** @type {string} */ (property.subtype), property.value);
}
/**
* @param {!SDK.RemoteObject} remoteObject
* @return {!Element}
*/
_formatParameterAsNode(remoteObject) {
const result = createElement('span');
const domModel = remoteObject.runtimeModel().target().model(SDK.DOMModel);
if (!domModel)
return result;
domModel.pushObjectAsNodeToFrontend(remoteObject).then(node => {
if (!node) {
result.appendChild(this._formatParameterAsObject(remoteObject, false));
return;
}
Common.Renderer.render(node).then(rendererNode => {
if (rendererNode)
result.appendChild(rendererNode);
else
result.appendChild(this._formatParameterAsObject(remoteObject, false));
this._formattedParameterAsNodeForTest();
});
});
return result;
}
_formattedParameterAsNodeForTest() {
}
/**
* @param {!SDK.RemoteObject} output
* @return {!Element}
*/
_formatParameterAsString(output) {
const span = createElement('span');
span.appendChild(Console.ConsoleViewMessage._linkifyStringAsFragment(output.description || ''));
const result = createElement('span');
result.createChild('span', 'object-value-string-quote').textContent = '"';
result.appendChild(span);
result.createChild('span', 'object-value-string-quote').textContent = '"';
return result;
}
/**
* @param {!SDK.RemoteObject} output
* @return {!Element}
*/
_formatParameterAsError(output) {
const result = createElement('span');
const errorSpan = this._tryFormatAsError(output.description || '');
result.appendChild(
errorSpan ? errorSpan : Console.ConsoleViewMessage._linkifyStringAsFragment(output.description || ''));
return result;
}
/**
* @param {!SDK.RemoteObject} output
* @return {!Element}
*/
_formatAsArrayEntry(output) {
return this._previewFormatter.renderPropertyPreview(output.type, output.subtype, output.description);
}
/**
* @param {?SDK.RemoteObject} object
* @param {!Array.<string>} propertyPath
* @param {boolean} isArrayEntry
* @return {!Element}
*/
_formatAsAccessorProperty(object, propertyPath, isArrayEntry) {
const rootElement = ObjectUI.ObjectPropertyTreeElement.createRemoteObjectAccessorPropertySpan(
object, propertyPath, onInvokeGetterClick.bind(this));
/**
* @param {?SDK.RemoteObject} result
* @param {boolean=} wasThrown
* @this {Console.ConsoleViewMessage}
*/
function onInvokeGetterClick(result, wasThrown) {
if (!result)
return;
rootElement.removeChildren();
if (wasThrown) {
const element = rootElement.createChild('span');
element.textContent = Common.UIString('<exception>');
element.title = /** @type {string} */ (result.description);
} else if (isArrayEntry) {
rootElement.appendChild(this._formatAsArrayEntry(result));
} else {
// Make a PropertyPreview from the RemoteObject similar to the backend logic.
const maxLength = 100;
const type = result.type;
const subtype = result.subtype;
let description = '';
if (type !== 'function' && result.description) {
if (type === 'string' || subtype === 'regexp')
description = result.description.trimMiddle(maxLength);
else
description = result.description.trimEnd(maxLength);
}
rootElement.appendChild(this._previewFormatter.renderPropertyPreview(type, subtype, description));
}
}
return rootElement;
}
/**
* @param {string} format
* @param {!Array.<!SDK.RemoteObject>} parameters
* @param {!Element} formattedResult
*/
_formatWithSubstitutionString(format, parameters, formattedResult) {
const formatters = {};
/**
* @param {boolean} force
* @param {boolean} includePreview
* @param {!SDK.RemoteObject} obj
* @return {!Element}
* @this {Console.ConsoleViewMessage}
*/
function parameterFormatter(force, includePreview, obj) {
return this._formatParameter(obj, force, includePreview);
}
function stringFormatter(obj) {
return obj.description;
}
function floatFormatter(obj) {
if (typeof obj.value !== 'number')
return 'NaN';
return obj.value;
}
function integerFormatter(obj) {
if (typeof obj.value !== 'number')
return 'NaN';
return Math.floor(obj.value);
}
function bypassFormatter(obj) {
return (obj instanceof Node) ? obj : '';
}
let currentStyle = null;
function styleFormatter(obj) {
currentStyle = {};
const buffer = createElement('span');
buffer.setAttribute('style', obj.description);
for (let i = 0; i < buffer.style.length; i++) {
const property = buffer.style[i];
if (isWhitelistedProperty(property))
currentStyle[property] = buffer.style[property];
}
}
function isWhitelistedProperty(property) {
// Make sure that allowed properties do not interfere with link visibility.
const prefixes = [
'background', 'border', 'color', 'font', 'line', 'margin', 'padding', 'text', '-webkit-background',
'-webkit-border', '-webkit-font', '-webkit-margin', '-webkit-padding', '-webkit-text'
];
for (let i = 0; i < prefixes.length; i++) {
if (property.startsWith(prefixes[i]))
return true;
}
return false;
}
// Firebug uses %o for formatting objects.
formatters.o = parameterFormatter.bind(this, false /* force */, true /* includePreview */);
formatters.s = stringFormatter;
formatters.f = floatFormatter;
// Firebug allows both %i and %d for formatting integers.
formatters.i = integerFormatter;
formatters.d = integerFormatter;
// Firebug uses %c for styling the message.
formatters.c = styleFormatter;
// Support %O to force object formatting, instead of the type-based %o formatting.
formatters.O = parameterFormatter.bind(this, true /* force */, false /* includePreview */);
formatters._ = bypassFormatter;
/**
* @param {!Element} a
* @param {*} b
* @this {!Console.ConsoleViewMessage}
* @return {!Element}
*/
function append(a, b) {
if (b instanceof Node) {
a.appendChild(b);
return a;
}
if (typeof b === 'undefined')
return a;
if (!currentStyle) {
a.appendChild(Console.ConsoleViewMessage._linkifyStringAsFragment(String(b)));
return a;
}
const lines = String(b).split('\n');
for (let i = 0; i < lines.length; i++) {
const line = lines[i];
const lineFragment = Console.ConsoleViewMessage._linkifyStringAsFragment(line);
const wrapper = createElement('span');
wrapper.style.setProperty('contain', 'paint');
wrapper.style.setProperty('display', 'inline-block');
wrapper.style.setProperty('max-width', '100%');
wrapper.appendChild(lineFragment);
applyCurrentStyle(wrapper);
for (const child of wrapper.children) {
if (child.classList.contains('devtools-link'))
this._applyForcedVisibleStyle(child);
}
a.appendChild(wrapper);
if (i < lines.length - 1)
a.appendChild(createElement('br'));
}
return a;
}
/**
* @param {!Element} element
*/
function applyCurrentStyle(element) {
for (const key in currentStyle)
element.style[key] = currentStyle[key];
}
// String.format does treat formattedResult like a Builder, result is an object.
return String.format(format, parameters, formatters, formattedResult, append.bind(this));
}
/**
* @param {!Element} element
*/
_applyForcedVisibleStyle(element) {
element.style.setProperty('-webkit-text-stroke', '0', 'important');
element.style.setProperty('text-decoration', 'underline', 'important');
const themedColor = UI.themeSupport.patchColorText('rgb(33%, 33%, 33%)', UI.ThemeSupport.ColorUsage.Foreground);
element.style.setProperty('color', themedColor, 'important');
let backgroundColor = 'hsl(0, 0%, 100%)';
if (this._message.level === SDK.ConsoleMessage.MessageLevel.Error)
backgroundColor = 'hsl(0, 100%, 97%)';
else if (this._message.level === SDK.ConsoleMessage.MessageLevel.Warning || this._shouldRenderAsWarning())
backgroundColor = 'hsl(50, 100%, 95%)';
const themedBackgroundColor =
UI.themeSupport.patchColorText(backgroundColor, UI.ThemeSupport.ColorUsage.Background);
element.style.setProperty('background-color', themedBackgroundColor, 'important');
}
/**
* @return {boolean}
*/
matchesFilterRegex(regexObject) {
regexObject.lastIndex = 0;
const text = this.contentElement().deepTextContent();
return regexObject.test(text);
}
/**
* @param {string} filter
* @return {boolean}
*/
matchesFilterText(filter) {
const text = this.contentElement().deepTextContent();
return text.toLowerCase().includes(filter.toLowerCase());
}
updateTimestamp() {
if (!this._contentElement)
return;
if (Common.moduleSetting('consoleTimestampsEnabled').get()) {
if (!this._timestampElement)
this._timestampElement = createElementWithClass('span', 'console-timestamp');
this._timestampElement.textContent = formatTimestamp(this._message.timestamp, false) + ' ';
this._timestampElement.title = formatTimestamp(this._message.timestamp, true);
this._contentElement.insertBefore(this._timestampElement, this._contentElement.firstChild);
} else if (this._timestampElement) {
this._timestampElement.remove();
delete this._timestampElement;
}
/**
* @param {number} timestamp
* @param {boolean} full
* @return {string}
*/
function formatTimestamp(timestamp, full) {
const date = new Date(timestamp);
const yymmdd = date.getFullYear() + '-' + leadZero(date.getMonth() + 1, 2) + '-' + leadZero(date.getDate(), 2);
const hhmmssfff = leadZero(date.getHours(), 2) + ':' + leadZero(date.getMinutes(), 2) + ':' +
leadZero(date.getSeconds(), 2) + '.' + leadZero(date.getMilliseconds(), 3);
return full ? (yymmdd + ' ' + hhmmssfff) : hhmmssfff;
/**
* @param {number} value
* @param {number} length
* @return {string}
*/
function leadZero(value, length) {
const valueString = value.toString();
const padding = length - valueString.length;
return padding <= 0 ? valueString : '0'.repeat(padding) + valueString;
}
}
}
/**
* @return {number}
*/
nestingLevel() {
return this._nestingLevel;
}
/**
* @param {boolean} inSimilarGroup
* @param {boolean=} isLast
*/
setInSimilarGroup(inSimilarGroup, isLast) {
this._inSimilarGroup = inSimilarGroup;
this._lastInSimilarGroup = inSimilarGroup && !!isLast;
if (this._similarGroupMarker && !inSimilarGroup) {
this._similarGroupMarker.remove();
this._similarGroupMarker = null;
} else if (this._element && !this._similarGroupMarker && inSimilarGroup) {
this._similarGroupMarker = createElementWithClass('div', 'nesting-level-marker');
this._element.insertBefore(this._similarGroupMarker, this._element.firstChild);
this._similarGroupMarker.classList.toggle('group-closed', this._lastInSimilarGroup);
}
}
/**
* @return {boolean}
*/
isLastInSimilarGroup() {
return this._inSimilarGroup && this._lastInSimilarGroup;
}
resetCloseGroupDecorationCount() {
if (!this._closeGroupDecorationCount)
return;
this._closeGroupDecorationCount = 0;
this._updateCloseGroupDecorations();
}
incrementCloseGroupDecorationCount() {
++this._closeGroupDecorationCount;
this._updateCloseGroupDecorations();
}
_updateCloseGroupDecorations() {
if (!this._nestingLevelMarkers)
return;
for (let i = 0, n = this._nestingLevelMarkers.length; i < n; ++i) {
const marker = this._nestingLevelMarkers[i];
marker.classList.toggle('group-closed', n - i <= this._closeGroupDecorationCount);
}
}
/**
* @return {!Element}
*/
contentElement() {
if (this._contentElement)
return this._contentElement;
const contentElement = createElementWithClass('div', 'console-message');
if (this._messageLevelIcon)
contentElement.appendChild(this._messageLevelIcon);
this._contentElement = contentElement;
let formattedMessage;
const shouldIncludeTrace = !!this._message.stackTrace &&
(this._message.source === SDK.ConsoleMessage.MessageSource.Network ||
this._message.source === SDK.ConsoleMessage.MessageSource.Violation ||
this._message.level === SDK.ConsoleMessage.MessageLevel.Error ||
this._message.level === SDK.ConsoleMessage.MessageLevel.Warning ||
this._message.type === SDK.ConsoleMessage.MessageType.Trace);
if (this._message.runtimeModel() && shouldIncludeTrace)
formattedMessage = this._buildMessageWithStackTrace();
else if (this._message.type === SDK.ConsoleMessage.MessageType.Table)
formattedMessage = this._buildTableMessage();
else
formattedMessage = this._buildMessage();
contentElement.appendChild(formattedMessage);
this.updateTimestamp();
return this._contentElement;
}
/**
* @return {!Element}
*/
toMessageElement() {
if (this._element)
return this._element;
this._element = createElement('div');
this.updateMessageElement();
return this._element;
}
updateMessageElement() {
if (!this._element)
return;
this._element.className = 'console-message-wrapper';
this._element.removeChildren();
if (this._message.isGroupStartMessage())
this._element.classList.add('console-group-title');
if (this._message.source === SDK.ConsoleMessage.MessageSource.ConsoleAPI)
this._element.classList.add('console-from-api');
if (this._inSimilarGroup) {
this._similarGroupMarker = this._element.createChild('div', 'nesting-level-marker');
this._similarGroupMarker.classList.toggle('group-closed', this._lastInSimilarGroup);
}
this._nestingLevelMarkers = [];
for (let i = 0; i < this._nestingLevel; ++i)
this._nestingLevelMarkers.push(this._element.createChild('div', 'nesting-level-marker'));
this._updateCloseGroupDecorations();
this._element.message = this;
switch (this._message.level) {
case SDK.ConsoleMessage.MessageLevel.Verbose:
this._element.classList.add('console-verbose-level');
this._updateMessageLevelIcon('');
break;
case SDK.ConsoleMessage.MessageLevel.Info:
this._element.classList.add('console-info-level');
if (this._message.type === SDK.ConsoleMessage.MessageType.System)
this._element.classList.add('console-system-type');
break;
case SDK.ConsoleMessage.MessageLevel.Warning:
this._element.classList.add('console-warning-level');
this._updateMessageLevelIcon('smallicon-warning');
break;
case SDK.ConsoleMessage.MessageLevel.Error:
this._element.classList.add('console-error-level');
this._updateMessageLevelIcon('smallicon-error');
break;
}
if (this._shouldRenderAsWarning())
this._element.classList.add('console-warning-level');
this._element.appendChild(this.contentElement());
if (this._repeatCount > 1)
this._showRepeatCountElement();
}
/**
* @return {boolean}
*/
_shouldRenderAsWarning() {
return (this._message.level === SDK.ConsoleMessage.MessageLevel.Verbose ||
this._message.level === SDK.ConsoleMessage.MessageLevel.Info) &&
(this._message.source === SDK.ConsoleMessage.MessageSource.Violation ||
this._message.source === SDK.ConsoleMessage.MessageSource.Deprecation ||
this._message.source === SDK.ConsoleMessage.MessageSource.Intervention ||
this._message.source === SDK.ConsoleMessage.MessageSource.Recommendation);
}
/**
* @param {string} iconType
*/
_updateMessageLevelIcon(iconType) {
if (!iconType && !this._messageLevelIcon)
return;
if (iconType && !this._messageLevelIcon) {
this._messageLevelIcon = UI.Icon.create('', 'message-level-icon');
if (this._contentElement)
this._contentElement.insertBefore(this._messageLevelIcon, this._contentElement.firstChild);
}
this._messageLevelIcon.setIconType(iconType);
}
/**
* @return {number}
*/
repeatCount() {
return this._repeatCount || 1;
}
resetIncrementRepeatCount() {
this._repeatCount = 1;
if (!this._repeatCountElement)
return;
this._repeatCountElement.remove();
if (this._contentElement)
this._contentElement.classList.remove('repeated-message');
delete this._repeatCountElement;
}
incrementRepeatCount() {
this._repeatCount++;
this._showRepeatCountElement();
}
/**
* @param {number} repeatCount
*/
setRepeatCount(repeatCount) {
this._repeatCount = repeatCount;
this._showRepeatCountElement();
}
_showRepeatCountElement() {
if (!this._element)
return;
if (!this._repeatCountElement) {
this._repeatCountElement = createElementWithClass('label', 'console-message-repeat-count', 'dt-small-bubble');
switch (this._message.level) {
case SDK.ConsoleMessage.MessageLevel.Warning:
this._repeatCountElement.type = 'warning';
break;
case SDK.ConsoleMessage.MessageLevel.Error:
this._repeatCountElement.type = 'error';
break;
case SDK.ConsoleMessage.MessageLevel.Verbose:
this._repeatCountElement.type = 'verbose';
break;
default:
this._repeatCountElement.type = 'info';
}
if (this._shouldRenderAsWarning())
this._repeatCountElement.type = 'warning';
this._element.insertBefore(this._repeatCountElement, this._contentElement);
this._contentElement.classList.add('repeated-message');
}
this._repeatCountElement.textContent = this._repeatCount;
}
get text() {
return this._message.messageText;
}
/**
* @return {string}
*/
toExportString() {
const lines = [];
const nodes = this.contentElement().childTextNodes();
const messageContent = nodes.map(Components.Linkifier.untruncatedNodeText).join('');
for (let i = 0; i < this.repeatCount(); ++i)
lines.push(messageContent);
return lines.join('\n');
}
/**
* @param {?RegExp} regex
*/
setSearchRegex(regex) {
if (this._searchHiglightNodeChanges && this._searchHiglightNodeChanges.length)
UI.revertDomChanges(this._searchHiglightNodeChanges);
this._searchRegex = regex;
this._searchHighlightNodes = [];
this._searchHiglightNodeChanges = [];
if (!this._searchRegex)
return;
const text = this.contentElement().deepTextContent();
let match;
this._searchRegex.lastIndex = 0;
const sourceRanges = [];
while ((match = this._searchRegex.exec(text)) && match[0])
sourceRanges.push(new TextUtils.SourceRange(match.index, match[0].length));
if (sourceRanges.length) {
this._searchHighlightNodes =
UI.highlightSearchResults(this.contentElement(), sourceRanges, this._searchHiglightNodeChanges);
}
}
/**
* @return {?RegExp}
*/
searchRegex() {
return this._searchRegex;
}
/**
* @return {number}
*/
searchCount() {
return this._searchHighlightNodes.length;
}
/**
* @return {!Element}
*/
searchHighlightNode(index) {
return this._searchHighlightNodes[index];
}
/**
* @param {string} string
* @return {?Element}
*/
_tryFormatAsError(string) {
/**
* @param {string} prefix
*/
function startsWith(prefix) {
return string.startsWith(prefix);
}
const errorPrefixes =
['EvalError', 'ReferenceError', 'SyntaxError', 'TypeError', 'RangeError', 'Error', 'URIError'];
if (!this._message.runtimeModel() || !errorPrefixes.some(startsWith))
return null;
const debuggerModel = this._message.runtimeModel().debuggerModel();
const baseURL = this._message.runtimeModel().target().inspectedURL();
const lines = string.split('\n');
const links = [];
let position = 0;
for (let i = 0; i < lines.length; ++i) {
position += i > 0 ? lines[i - 1].length + 1 : 0;
const isCallFrameLine = /^\s*at\s/.test(lines[i]);
if (!isCallFrameLine && links.length)
return null;
if (!isCallFrameLine)
continue;
let openBracketIndex = -1;
let closeBracketIndex = -1;
const match = /\([^\)\(]+\)/.exec(lines[i]);
if (match) {
openBracketIndex = match.index;
closeBracketIndex = match.index + match[0].length - 1;
}
const hasOpenBracket = openBracketIndex !== -1;
const left = hasOpenBracket ? openBracketIndex + 1 : lines[i].indexOf('at') + 3;
const right = hasOpenBracket ? closeBracketIndex : lines[i].length;
const linkCandidate = lines[i].substring(left, right);
const splitResult = Common.ParsedURL.splitLineAndColumn(linkCandidate);
if (!splitResult)
return null;
if (splitResult.url === '<anonymous>')
continue;
let url = parseOrScriptMatch(splitResult.url);
if (!url && Common.ParsedURL.isRelativeURL(splitResult.url))
url = parseOrScriptMatch(Common.ParsedURL.completeURL(baseURL, splitResult.url));
if (!url)
return null;
links.push({
url: url,
positionLeft: position + left,
positionRight: position + right,
lineNumber: splitResult.lineNumber,
columnNumber: splitResult.columnNumber
});
}
if (!links.length)
return null;
const formattedResult = createElement('span');
let start = 0;
for (let i = 0; i < links.length; ++i) {
formattedResult.appendChild(
Console.ConsoleViewMessage._linkifyStringAsFragment(string.substring(start, links[i].positionLeft)));
formattedResult.appendChild(this._linkifier.linkifyScriptLocation(
debuggerModel.target(), null, links[i].url, links[i].lineNumber, links[i].columnNumber));
start = links[i].positionRight;
}
if (start !== string.length)
formattedResult.appendChild(Console.ConsoleViewMessage._linkifyStringAsFragment(string.substring(start)));
return formattedResult;
/**
* @param {?string} url
* @return {?string}
*/
function parseOrScriptMatch(url) {
if (!url)
return null;
const parsedURL = url.asParsedURL();
if (parsedURL)
return parsedURL.url;
if (debuggerModel.scriptsForSourceURL(url).length)
return url;
return null;
}
}
/**
* @param {string} string
* @param {function(string,string,number=,number=):!Node} linkifier
* @return {!DocumentFragment}
*/
static linkifyWithCustomLinkifier(string, linkifier) {
if (string.length > Console.ConsoleViewMessage._MaxTokenizableStringLength)
return UI.createExpandableText(string, Console.ConsoleViewMessage._LongStringVisibleLength);
const container = createDocumentFragment();
const tokens = this._tokenizeMessageText(string);
for (const token of tokens) {
switch (token.type) {
case 'url': {
const realURL = (token.text.startsWith('www.') ? 'http://' + token.text : token.text);
const splitResult = Common.ParsedURL.splitLineAndColumn(realURL);
let linkNode;
if (splitResult)
linkNode = linkifier(token.text, splitResult.url, splitResult.lineNumber, splitResult.columnNumber);
else
linkNode = linkifier(token.text, token.value);
container.appendChild(linkNode);
break;
}
default:
container.appendChild(createTextNode(token.text));
break;
}
}
return container;
}
/**
* @param {string} string
* @return {!DocumentFragment}
*/
static _linkifyStringAsFragment(string) {
return Console.ConsoleViewMessage.linkifyWithCustomLinkifier(string, (text, url, lineNumber, columnNumber) => {
return Components.Linkifier.linkifyURL(url, {text, lineNumber, columnNumber});
});
}
/**
* @param {string} string
* @return {!Array<{type: string, text: (string|undefined)}>}
*/
static _tokenizeMessageText(string) {
if (!Console.ConsoleViewMessage._tokenizerRegexes) {
const controlCodes = '\\u0000-\\u0020\\u007f-\\u009f';
const linkStringRegex = new RegExp(
'(?:[a-zA-Z][a-zA-Z0-9+.-]{2,}:\\/\\/|data:|www\\.)[^\\s' + controlCodes + '"]{2,}[^\\s' + controlCodes +
'"\')}\\],:;.!?]',
'u');
co