HTMLElementification in console/
This is prework for TypeScriptification with the aim of reducing noise
in the follow-up CLs.
Bug: chromium:1011811, chromium:1135143
Change-Id: I9e5a6589940f432438fb73415542d2d0d341dc71
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2461771
Commit-Queue: Sigurd Schneider <[email protected]>
Reviewed-by: Tim van der Lippe <[email protected]>
diff --git a/front_end/console/ConsoleViewMessage.js b/front_end/console/ConsoleViewMessage.js
index 922a157..651fa35 100644
--- a/front_end/console/ConsoleViewMessage.js
+++ b/front_end/console/ConsoleViewMessage.js
@@ -73,13 +73,13 @@
this._traceExpanded = false;
/** @type {?function(boolean)} */
this._expandTrace = null;
- /** @type {?Element} */
+ /** @type {?HTMLElement} */
this._anchorElement = null;
}
/**
* @override
- * @return {!Element}
+ * @return {!HTMLElement}
*/
element() {
return this.toMessageElement();
@@ -139,10 +139,10 @@
}
/**
- * @return {!Element}
+ * @return {!HTMLElement}
*/
_buildTableMessage() {
- const formattedMessage = document.createElement('span');
+ const formattedMessage = /** @type {!HTMLElement} */ (document.createElement('span'));
formattedMessage.classList.add('source-code');
this._anchorElement = this._buildMessageAnchor();
if (this._anchorElement) {
@@ -226,7 +226,7 @@
}
/**
- * @return {!Element}
+ * @return {!HTMLElement}
*/
_buildMessage() {
let messageElement;
@@ -292,7 +292,7 @@
}
messageElement.classList.add('console-message-text');
- const formattedMessage = document.createElement('span');
+ const formattedMessage = /** @type {!HTMLElement} */ (document.createElement('span'));
formattedMessage.classList.add('source-code');
this._anchorElement = this._buildMessageAnchor();
if (this._anchorElement) {
@@ -303,14 +303,14 @@
}
/**
- * @return {?Element}
+ * @return {?HTMLElement}
*/
_formatAsNetworkRequest() {
const request = SDK.NetworkLog.NetworkLog.requestForConsoleMessage(this._message);
if (!request) {
return null;
}
- const messageElement = createElement('span');
+ const messageElement = /** @type {!HTMLElement} */ (document.createElement('span'));
if (this._message.level === SDK.ConsoleModel.MessageLevel.Error) {
messageElement.createTextChild(request.requestMethod + ' ');
const linkElement = Components.Linkifier.Linkifier.linkifyRevealable(request, request.url(), request.url());
@@ -347,7 +347,7 @@
}
/**
- * @return {?Element}
+ * @return {?HTMLElement}
*/
_buildMessageAnchor() {
let anchorElement = null;
@@ -367,7 +367,7 @@
element: anchorElement,
forceSelect: () => anchorElement.focus(),
});
- const anchorWrapperElement = document.createElement('span');
+ const anchorWrapperElement = /** @type {!HTMLElement} */ (document.createElement('span'));
anchorWrapperElement.classList.add('console-message-anchor');
anchorWrapperElement.appendChild(anchorElement);
anchorWrapperElement.createTextChild(' ');
@@ -377,10 +377,10 @@
}
/**
- * @return {!Element}
+ * @return {!HTMLElement}
*/
_buildMessageWithStackTrace() {
- const toggleElement = document.createElement('div');
+ const toggleElement = /** @type {!HTMLElement} */ (document.createElement('div'));
toggleElement.classList.add('console-message-stack-trace-toggle');
const contentElement = toggleElement.createChild('div', 'console-message-stack-trace-wrapper');
@@ -434,7 +434,7 @@
* @param {string} url
* @param {number} lineNumber
* @param {number} columnNumber
- * @return {?Element}
+ * @return {?HTMLElement}
*/
_linkifyLocation(url, lineNumber, columnNumber) {
if (!this._message.runtimeModel()) {
@@ -446,7 +446,7 @@
/**
* @param {!Protocol.Runtime.StackTrace} stackTrace
- * @return {?Element}
+ * @return {?HTMLElement}
*/
_linkifyStackTraceTopFrame(stackTrace) {
if (!this._message.runtimeModel()) {
@@ -460,7 +460,7 @@
* @param {string} url
* @param {number} lineNumber
* @param {number} columnNumber
- * @return {?Element}
+ * @return {?HTMLElement}
*/
_linkifyScriptId(scriptId, url, lineNumber, columnNumber) {
if (!this._message.runtimeModel()) {
@@ -490,11 +490,11 @@
/**
* @param {!Array.<!SDK.RemoteObject.RemoteObject|string>} rawParameters
- * @return {!Element}
+ * @return {!HTMLElement}
*/
_format(rawParameters) {
// This node is used like a Builder. Values are continually appended onto it.
- const formattedResult = createElement('span');
+ const formattedResult = /** @type {!HTMLElement} */ (document.createElement('span'));
if (this._messagePrefix) {
formattedResult.createChild('span').textContent = this._messagePrefix;
}
@@ -546,11 +546,11 @@
* @param {!SDK.RemoteObject.RemoteObject} output
* @param {boolean=} forceObjectFormat
* @param {boolean=} includePreview
- * @return {!Element}
+ * @return {!HTMLElement}
*/
_formatParameter(output, forceObjectFormat, includePreview) {
if (output.customPreview()) {
- return (new ObjectUI.CustomPreviewComponent.CustomPreviewComponent(output)).element;
+ return /** @type {!HTMLElement} */ ((new ObjectUI.CustomPreviewComponent.CustomPreviewComponent(output)).element);
}
const type = forceObjectFormat ? 'object' : (output.subtype || output.type);
@@ -605,15 +605,15 @@
/**
* @param {!SDK.RemoteObject.RemoteObject} obj
- * @return {!Element}
+ * @return {!HTMLElement}
* @suppress {accessControls}
*/
_formatParameterAsValue(obj) {
- const result = createElement('span');
+ const result = /** @type {!HTMLElement} */ (document.createElement('span'));
const description = obj.description || '';
if (description.length > Console.ConsoleViewMessage._MaxTokenizableStringLength) {
const propertyValue = new ObjectUI.ObjectPropertiesSection.ExpandableTextPropertyValue(
- createElement('span'), description, Console.ConsoleViewMessage._LongStringVisibleLength);
+ document.createElement('span'), description, Console.ConsoleViewMessage._LongStringVisibleLength);
result.appendChild(propertyValue.element);
} else {
result.createTextChild(description);
@@ -627,10 +627,10 @@
/**
* @param {!SDK.RemoteObject.RemoteObject} obj
* @param {boolean=} includePreview
- * @return {!Element}
+ * @return {!HTMLElement}
*/
_formatParameterAsObject(obj, includePreview) {
- const titleElement = document.createElement('span');
+ const titleElement = /** @type {!HTMLElement} */ (document.createElement('span'));
titleElement.classList.add('console-object');
if (includePreview && obj.preview) {
titleElement.classList.add('console-object-preview');
@@ -668,10 +668,10 @@
/**
* @param {!SDK.RemoteObject.RemoteObject} func
* @param {boolean=} includePreview
- * @return {!Element}
+ * @return {!HTMLElement}
*/
_formatParameterAsFunction(func, includePreview) {
- const result = createElement('span');
+ const result = /** @type {!HTMLElement} */ (document.createElement('span'));
SDK.RemoteObject.RemoteFunction.objectAsFunction(func).targetFunction().then(formatTargetFunction.bind(this));
return result;
@@ -680,7 +680,7 @@
* @this {ConsoleViewMessage}
*/
function formatTargetFunction(targetFunction) {
- const functionElement = createElement('span');
+ const functionElement = document.createElement('span');
const promise = ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.formatObjectAsFunction(
targetFunction, functionElement, true, includePreview);
result.appendChild(functionElement);
@@ -709,7 +709,7 @@
/**
* @param {?SDK.RemoteObject.RemoteObject} object
* @param {!Array.<!Protocol.Runtime.PropertyPreview>} propertyPath
- * @return {!Element}
+ * @return {!HTMLElement}
*/
_renderPropertyPreviewOrAccessor(object, propertyPath) {
const property = propertyPath.peekLast();
@@ -722,10 +722,10 @@
/**
* @param {!SDK.RemoteObject.RemoteObject} remoteObject
- * @return {!Element}
+ * @return {!HTMLElement}
*/
_formatParameterAsNode(remoteObject) {
- const result = createElement('span');
+ const result = /** @type {!HTMLElement} */ (document.createElement('span'));
const domModel = remoteObject.runtimeModel().target().model(SDK.DOMModel.DOMModel);
if (!domModel) {
@@ -759,13 +759,13 @@
/**
* @param {!SDK.RemoteObject.RemoteObject} output
- * @return {!Element}
+ * @return {!HTMLElement}
*/
_formatParameterAsString(output) {
- const span = createElement('span');
+ const span = /** @type {!HTMLElement} */ (document.createElement('span'));
span.appendChild(this._linkifyStringAsFragment(output.description || ''));
- const result = createElement('span');
+ const result = /** @type {!HTMLElement} */ (document.createElement('span'));
result.createChild('span', 'object-value-string-quote').textContent = '"';
result.appendChild(span);
result.createChild('span', 'object-value-string-quote').textContent = '"';
@@ -774,10 +774,10 @@
/**
* @param {!SDK.RemoteObject.RemoteObject} output
- * @return {!Element}
+ * @return {!HTMLElement}
*/
_formatParameterAsError(output) {
- const result = createElement('span');
+ const result = /** @type {!HTMLElement} */ (document.createElement('span'));
const errorSpan = this._tryFormatAsError(output.description || '');
result.appendChild(errorSpan ? errorSpan : this._linkifyStringAsFragment(output.description || ''));
return result;
@@ -785,7 +785,7 @@
/**
* @param {!SDK.RemoteObject.RemoteObject} output
- * @return {!Element}
+ * @return {!HTMLElement}
*/
_formatAsArrayEntry(output) {
return this._previewFormatter.renderPropertyPreview(output.type, output.subtype, output.description);
@@ -795,7 +795,7 @@
* @param {?SDK.RemoteObject.RemoteObject} object
* @param {!Array.<string>} propertyPath
* @param {boolean} isArrayEntry
- * @return {!Element}
+ * @return {!HTMLElement}
*/
_formatAsAccessorProperty(object, propertyPath, isArrayEntry) {
const rootElement =
@@ -842,7 +842,7 @@
/**
* @param {string} format
* @param {!Array.<!SDK.RemoteObject.RemoteObject>} parameters
- * @param {!Element} formattedResult
+ * @param {!HTMLElement} formattedResult
*/
_formatWithSubstitutionString(format, parameters, formattedResult) {
const formatters = {};
@@ -851,7 +851,7 @@
* @param {boolean} force
* @param {boolean} includePreview
* @param {!SDK.RemoteObject.RemoteObject} obj
- * @return {!Element}
+ * @return {!HTMLElement}
* @this {ConsoleViewMessage}
*/
function parameterFormatter(force, includePreview, obj) {
@@ -886,7 +886,7 @@
let currentStyle = null;
function styleFormatter(obj) {
currentStyle = {};
- const buffer = createElement('span');
+ const buffer = document.createElement('span');
buffer.setAttribute('style', obj.description);
for (let i = 0; i < buffer.style.length; i++) {
const property = buffer.style[i];
@@ -927,10 +927,10 @@
formatters._ = bypassFormatter;
/**
- * @param {!Element} a
+ * @param {!HTMLElement} a
* @param {*} b
* @this {!ConsoleViewMessage}
- * @return {!Element}
+ * @return {!HTMLElement}
*/
function append(a, b) {
if (b instanceof Node) {
@@ -948,27 +948,27 @@
for (let i = 0; i < lines.length; i++) {
const line = lines[i];
const lineFragment = this._linkifyStringAsFragment(line);
- const wrapper = createElement('span');
+ const wrapper = /** @type {!HTMLElement} */ (document.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')) {
+ if (child.classList.contains('devtools-link') && child instanceof HTMLElement) {
this._applyForcedVisibleStyle(child);
}
}
a.appendChild(wrapper);
if (i < lines.length - 1) {
- a.appendChild(createElement('br'));
+ a.appendChild(document.createElement('br'));
}
}
return a;
}
/**
- * @param {!Element} element
+ * @param {!HTMLElement} element
*/
function applyCurrentStyle(element) {
for (const key in currentStyle) {
@@ -981,7 +981,7 @@
}
/**
- * @param {!Element} element
+ * @param {!HTMLElement} element
*/
_applyForcedVisibleStyle(element) {
element.style.setProperty('-webkit-text-stroke', '0', 'important');
@@ -1202,6 +1202,9 @@
return this._selectableChildren[index];
}
+ /**
+ * @override
+ */
focusLastChildOrSelf() {
if (this._element && !this._selectNearestVisibleChild(this._selectableChildren.length - 1, true /* backwards */)) {
this._element.focus();
@@ -1209,14 +1212,14 @@
}
/**
- * @return {!Element}
+ * @return {!HTMLElement}
*/
contentElement() {
if (this._contentElement) {
return this._contentElement;
}
- const contentElement = document.createElement('div');
+ const contentElement = /** @type {!HTMLElement} */ (document.createElement('div'));
contentElement.classList.add('console-message');
if (this._messageLevelIcon) {
contentElement.appendChild(this._messageLevelIcon);
@@ -1244,14 +1247,14 @@
}
/**
- * @return {!Element}
+ * @return {!HTMLElement}
*/
toMessageElement() {
if (this._element) {
return this._element;
}
- this._element = createElement('div');
+ this._element = /** @type {!HTMLElement} */ (document.createElement('div'));
this._element.tabIndex = -1;
this._element.addEventListener('keydown', this._onKeyDown.bind(this));
this.updateMessageElement();
@@ -1480,7 +1483,7 @@
}
/**
- * @return {!Element}
+ * @return {!HTMLElement}
*/
searchHighlightNode(index) {
return this._searchHighlightNodes[index];
@@ -1488,7 +1491,7 @@
/**
* @param {string} string
- * @return {?Element}
+ * @return {?HTMLElement}
*/
_tryFormatAsError(string) {
/**
@@ -1571,7 +1574,7 @@
return null;
}
- const formattedResult = createElement('span');
+ const formattedResult = /** @type {!HTMLElement} */ (document.createElement('span'));
let start = 0;
for (let i = 0; i < links.length; ++i) {
formattedResult.appendChild(this._linkifyStringAsFragment(string.substring(start, links[i].positionLeft)));
@@ -1617,7 +1620,7 @@
_linkifyWithCustomLinkifier(string, linkifier) {
if (string.length > Console.ConsoleViewMessage._MaxTokenizableStringLength) {
const propertyValue = new ObjectUI.ObjectPropertiesSection.ExpandableTextPropertyValue(
- createElement('span'), string, Console.ConsoleViewMessage._LongStringVisibleLength);
+ document.createElement('span'), string, Console.ConsoleViewMessage._LongStringVisibleLength);
const fragment = createDocumentFragment();
fragment.appendChild(propertyValue.element);
return fragment;
@@ -1786,7 +1789,7 @@
/**
* @override
- * @return {!Element}
+ * @return {!HTMLElement}
*/
toMessageElement() {
if (!this._element) {
