Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(17)

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js

Issue 2378493002: DevTools: ConsoleViewMessage breakup _formatMessage() (Closed)
Patch Set: ac-4 Created 4 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /* 1 /*
2 * Copyright (C) 2011 Google Inc. All rights reserved. 2 * Copyright (C) 2011 Google Inc. All rights reserved.
3 * Copyright (C) 2007, 2008 Apple Inc. All rights reserved. 3 * Copyright (C) 2007, 2008 Apple Inc. All rights reserved.
4 * Copyright (C) 2009 Joseph Pecoraro 4 * Copyright (C) 2009 Joseph Pecoraro
5 * 5 *
6 * Redistribution and use in source and binary forms, with or without 6 * Redistribution and use in source and binary forms, with or without
7 * modification, are permitted provided that the following conditions 7 * modification, are permitted provided that the following conditions
8 * are met: 8 * are met:
9 * 9 *
10 * 1. Redistributions of source code must retain the above copyright 10 * 1. Redistributions of source code must retain the above copyright
(...skipping 120 matching lines...) Expand 10 before | Expand all | Expand 10 after
131 131
132 /** 132 /**
133 * @return {!WebInspector.ConsoleMessage} 133 * @return {!WebInspector.ConsoleMessage}
134 */ 134 */
135 consoleMessage: function() 135 consoleMessage: function()
136 { 136 {
137 return this._message; 137 return this._message;
138 }, 138 },
139 139
140 /** 140 /**
141 * @param {!WebInspector.ConsoleMessage} consoleMessage
141 * @return {!Element} 142 * @return {!Element}
142 */ 143 */
143 _formatMessage: function() 144 _buildMessage: function(consoleMessage)
144 { 145 {
145 var formattedMessage = createElement("span");
146 WebInspector.appendStyle(formattedMessage, "components/objectValue.css") ;
147 formattedMessage.className = "console-message-text source-code";
148
149 /**
150 * @param {string} title
151 * @return {!Element}
152 * @this {WebInspector.ConsoleMessage}
153 */
154 function linkifyRequest(title)
155 {
156 return WebInspector.Linkifier.linkifyUsingRevealer(/** @type {!WebIn spector.NetworkRequest} */ (this.request), title, this.request.url);
157 }
158
159 var consoleMessage = this._message;
160 var anchorElement;
161 var messageElement; 146 var messageElement;
162 if (consoleMessage.source === WebInspector.ConsoleMessage.MessageSource. ConsoleAPI) { 147 if (consoleMessage.source === WebInspector.ConsoleMessage.MessageSource. ConsoleAPI) {
163 switch (consoleMessage.type) { 148 switch (consoleMessage.type) {
164 case WebInspector.ConsoleMessage.MessageType.Trace: 149 case WebInspector.ConsoleMessage.MessageType.Trace:
165 messageElement = this._format(consoleMessage.parameters || ["con sole.trace"]); 150 messageElement = this._format(consoleMessage.parameters || ["con sole.trace"]);
166 break; 151 break;
167 case WebInspector.ConsoleMessage.MessageType.Clear: 152 case WebInspector.ConsoleMessage.MessageType.Clear:
168 messageElement = createTextNode(WebInspector.UIString("Console w as cleared")); 153 messageElement = createElementWithClass("span", "console-info");
169 formattedMessage.classList.add("console-info"); 154 messageElement.textContent = WebInspector.UIString("Console was cleared");
170 break; 155 break;
171 case WebInspector.ConsoleMessage.MessageType.Assert: 156 case WebInspector.ConsoleMessage.MessageType.Assert:
172 var args = [WebInspector.UIString("Assertion failed:")]; 157 var args = [WebInspector.UIString("Assertion failed:")];
173 if (consoleMessage.parameters) 158 if (consoleMessage.parameters)
174 args = args.concat(consoleMessage.parameters); 159 args = args.concat(consoleMessage.parameters);
175 messageElement = this._format(args); 160 messageElement = this._format(args);
176 break; 161 break;
177 case WebInspector.ConsoleMessage.MessageType.Dir: 162 case WebInspector.ConsoleMessage.MessageType.Dir:
178 var obj = consoleMessage.parameters ? consoleMessage.parameters[ 0] : undefined; 163 var obj = consoleMessage.parameters ? consoleMessage.parameters[ 0] : undefined;
179 var args = ["%O", obj]; 164 var args = ["%O", obj];
(...skipping 17 matching lines...) Expand all
197 messageElement.appendChild(WebInspector.Linkifier.linkifyUsi ngRevealer(consoleMessage.request, consoleMessage.request.url, consoleMessage.re quest.url)); 182 messageElement.appendChild(WebInspector.Linkifier.linkifyUsi ngRevealer(consoleMessage.request, consoleMessage.request.url, consoleMessage.re quest.url));
198 if (consoleMessage.request.failed) 183 if (consoleMessage.request.failed)
199 messageElement.createTextChildren(" ", consoleMessage.re quest.localizedFailDescription); 184 messageElement.createTextChildren(" ", consoleMessage.re quest.localizedFailDescription);
200 else 185 else
201 messageElement.createTextChildren(" ", String(consoleMes sage.request.statusCode), " (", consoleMessage.request.statusText, ")"); 186 messageElement.createTextChildren(" ", String(consoleMes sage.request.statusCode), " (", consoleMessage.request.statusText, ")");
202 } else { 187 } else {
203 var fragment = WebInspector.linkifyStringAsFragmentWithCusto mLinkifier(consoleMessage.messageText, linkifyRequest.bind(consoleMessage)); 188 var fragment = WebInspector.linkifyStringAsFragmentWithCusto mLinkifier(consoleMessage.messageText, linkifyRequest.bind(consoleMessage));
204 messageElement.appendChild(fragment); 189 messageElement.appendChild(fragment);
205 } 190 }
206 } else { 191 } else {
207 var url = consoleMessage.url;
208 if (url) {
209 var isExternal = !WebInspector.resourceForURL(url) && !WebIn spector.networkMapping.uiSourceCodeForURLForAnyTarget(url);
210 anchorElement = WebInspector.linkifyURLAsNode(url, url, "con sole-message-url", isExternal);
211 }
212 messageElement = this._format([consoleMessage.messageText]); 192 messageElement = this._format([consoleMessage.messageText]);
213 } 193 }
214 } else { 194 } else {
215 var args = consoleMessage.parameters || [consoleMessage.messageText] ; 195 var args = consoleMessage.parameters || [consoleMessage.messageText] ;
216 messageElement = this._format(args); 196 messageElement = this._format(args);
217 } 197 }
218 198
199 var formattedMessage = createElement("span");
200 WebInspector.appendStyle(formattedMessage, "components/objectValue.css") ;
201 formattedMessage.className = "console-message-text source-code";
202
203 var anchorElement = this._buildMessageAnchor(consoleMessage);
204 if (anchorElement)
205 formattedMessage.appendChild(anchorElement);
206 formattedMessage.appendChild(messageElement);
207 return formattedMessage;
208
209 /**
210 * @param {string} title
211 * @return {!Element}
212 * @this {WebInspector.ConsoleMessage}
213 */
214 function linkifyRequest(title)
215 {
216 return WebInspector.Linkifier.linkifyUsingRevealer(/** @type {!WebIn spector.NetworkRequest} */ (this.request), title, this.request.url);
217 }
218 },
219
220 /**
221 * @param {!WebInspector.ConsoleMessage} consoleMessage
222 * @return {?Element}
223 */
224 _buildMessageAnchor: function(consoleMessage)
225 {
226 var anchorElement = null;
219 if (consoleMessage.source !== WebInspector.ConsoleMessage.MessageSource. Network || consoleMessage.request) { 227 if (consoleMessage.source !== WebInspector.ConsoleMessage.MessageSource. Network || consoleMessage.request) {
220 if (consoleMessage.scriptId) { 228 if (consoleMessage.scriptId) {
221 anchorElement = this._linkifyScriptId(consoleMessage.scriptId, c onsoleMessage.url || "", consoleMessage.line, consoleMessage.column); 229 anchorElement = this._linkifyScriptId(consoleMessage.scriptId, c onsoleMessage.url || "", consoleMessage.line, consoleMessage.column);
222 } else { 230 } else {
223 if (consoleMessage.stackTrace && consoleMessage.stackTrace.callF rames.length) 231 if (consoleMessage.stackTrace && consoleMessage.stackTrace.callF rames.length)
224 anchorElement = this._linkifyStackTraceTopFrame(consoleMessa ge.stackTrace); 232 anchorElement = this._linkifyStackTraceTopFrame(consoleMessa ge.stackTrace);
225 else if (consoleMessage.url && consoleMessage.url !== "undefined ") 233 else if (consoleMessage.url && consoleMessage.url !== "undefined ")
226 anchorElement = this._linkifyLocation(consoleMessage.url, co nsoleMessage.line, consoleMessage.column); 234 anchorElement = this._linkifyLocation(consoleMessage.url, co nsoleMessage.line, consoleMessage.column);
227 } 235 }
236 } else if (consoleMessage.url) {
237 var url = consoleMessage.url;
238 var isExternal = !WebInspector.resourceForURL(url) && !WebInspector. networkMapping.uiSourceCodeForURLForAnyTarget(url);
239 anchorElement = WebInspector.linkifyURLAsNode(url, url, "console-mes sage-url", isExternal);
228 } 240 }
229 241
230 formattedMessage.appendChild(messageElement); 242 // Append a space to prevent the anchor text from being glued to the con sole message when the user selects and copies the console messages.
231 if (anchorElement) { 243 if (anchorElement)
232 // Append a space to prevent the anchor text from being glued to the console message when the user selects and copies the console messages.
233 anchorElement.appendChild(createTextNode(" ")); 244 anchorElement.appendChild(createTextNode(" "));
234 formattedMessage.insertBefore(anchorElement, formattedMessage.firstC hild); 245 return anchorElement;
235 }
236
237 var dumpStackTrace = !!consoleMessage.stackTrace && (consoleMessage.sour ce === WebInspector.ConsoleMessage.MessageSource.Network || consoleMessage.level === WebInspector.ConsoleMessage.MessageLevel.Error || consoleMessage.level === WebInspector.ConsoleMessage.MessageLevel.RevokedError || consoleMessage.type === WebInspector.ConsoleMessage.MessageType.Trace || consoleMessage.level === WebIn spector.ConsoleMessage.MessageLevel.Warning);
238 var target = this._target();
239 if (dumpStackTrace && target) {
240 var toggleElement = createElementWithClass("div", "console-message-s tack-trace-toggle");
241 var triangleElement = toggleElement.createChild("div", "console-mess age-stack-trace-triangle");
242 var contentElement = toggleElement.createChild("div", "console-messa ge-stack-trace-wrapper");
243
244 var clickableElement = contentElement.createChild("div");
245 clickableElement.appendChild(formattedMessage);
246 var stackTraceElement = contentElement.createChild("div");
247 stackTraceElement.appendChild(WebInspector.DOMPresentationUtils.buil dStackTracePreviewContents(target, this._linkifier, this._message.stackTrace));
248 stackTraceElement.classList.add("hidden");
249
250 /**
251 * @param {boolean} expand
252 */
253 function expandStackTrace(expand)
254 {
255 stackTraceElement.classList.toggle("hidden", !expand);
256 toggleElement.classList.toggle("expanded", expand);
257 }
258
259 /**
260 * @param {?Event} event
261 */
262 function toggleStackTrace(event)
263 {
264 if (event.target.hasSelection())
265 return;
266 expandStackTrace(stackTraceElement.classList.contains("hidden")) ;
267 event.consume();
268 }
269
270 clickableElement.addEventListener("click", toggleStackTrace, false);
271 triangleElement.addEventListener("click", toggleStackTrace, false);
272 if (consoleMessage.type === WebInspector.ConsoleMessage.MessageType. Trace)
273 expandStackTrace(true);
274
275 toggleElement._expandStackTraceForTest = expandStackTrace.bind(null, true);
276 formattedMessage = toggleElement;
277 }
278
279 return formattedMessage;
280 }, 246 },
281 247
282 /** 248 /**
249 * @param {!WebInspector.ConsoleMessage} consoleMessage
250 * @param {!WebInspector.Target} target
251 * @param {!WebInspector.Linkifier} linkifier
252 * @return {!Element}
253 */
254 _buildMessageWithStackTrace: function(consoleMessage, target, linkifier)
255 {
256 var toggleElement = createElementWithClass("div", "console-message-stack -trace-toggle");
257 var triangleElement = toggleElement.createChild("div", "console-message- stack-trace-triangle");
258 var contentElement = toggleElement.createChild("div", "console-message-s tack-trace-wrapper");
259
260 var messageElement = this._buildMessage(consoleMessage);
261 var clickableElement = contentElement.createChild("div");
262 clickableElement.appendChild(messageElement);
263 var stackTraceElement = contentElement.createChild("div");
264 var stackTracePreview = WebInspector.DOMPresentationUtils.buildStackTrac ePreviewContents(target, linkifier, consoleMessage.stackTrace);
265 stackTraceElement.appendChild(stackTracePreview);
266 stackTraceElement.classList.add("hidden");
267
268 /**
269 * @param {boolean} expand
270 */
271 function expandStackTrace(expand)
272 {
273 stackTraceElement.classList.toggle("hidden", !expand);
274 toggleElement.classList.toggle("expanded", expand);
275 }
276
277 /**
278 * @param {?Event} event
279 */
280 function toggleStackTrace(event)
281 {
282 if (event.target.hasSelection())
283 return;
284 expandStackTrace(stackTraceElement.classList.contains("hidden"));
285 event.consume();
286 }
287
288 clickableElement.addEventListener("click", toggleStackTrace, false);
289 triangleElement.addEventListener("click", toggleStackTrace, false);
290 if (consoleMessage.type === WebInspector.ConsoleMessage.MessageType.Trac e)
291 expandStackTrace(true);
292
293 toggleElement._expandStackTraceForTest = expandStackTrace.bind(null, tru e);
294 return toggleElement;
295 },
296
297 /**
283 * @param {string} url 298 * @param {string} url
284 * @param {number} lineNumber 299 * @param {number} lineNumber
285 * @param {number} columnNumber 300 * @param {number} columnNumber
286 * @return {?Element} 301 * @return {?Element}
287 */ 302 */
288 _linkifyLocation: function(url, lineNumber, columnNumber) 303 _linkifyLocation: function(url, lineNumber, columnNumber)
289 { 304 {
290 var target = this._target(); 305 var target = this._target();
291 if (!target) 306 if (!target)
292 return null; 307 return null;
(...skipping 20 matching lines...) Expand all
313 * @return {?Element} 328 * @return {?Element}
314 */ 329 */
315 _linkifyScriptId: function(scriptId, url, lineNumber, columnNumber) 330 _linkifyScriptId: function(scriptId, url, lineNumber, columnNumber)
316 { 331 {
317 var target = this._target(); 332 var target = this._target();
318 if (!target) 333 if (!target)
319 return null; 334 return null;
320 return this._linkifier.linkifyScriptLocation(target, scriptId, url, line Number, columnNumber, "console-message-url"); 335 return this._linkifier.linkifyScriptLocation(target, scriptId, url, line Number, columnNumber, "console-message-url");
321 }, 336 },
322 337
338 /**
339 * @param {!WebInspector.RemoteObject|!Object|string} parameter
340 * @param {?WebInspector.Target} target
341 * @return {!WebInspector.RemoteObject}
342 */
343 _parameterToRemoteObject: function(parameter, target)
344 {
345 if (parameter instanceof WebInspector.RemoteObject)
346 return parameter;
347 if (!target)
348 return WebInspector.RemoteObject.fromLocalObject(parameter);
349 if (typeof parameter === "object")
350 return target.runtimeModel.createRemoteObject(parameter);
351 return target.runtimeModel.createRemoteObjectFromPrimitiveValue(paramete r);
352 },
353
354 /**
355 * @param {!Array.<!WebInspector.RemoteObject|string>} parameters
356 * @return {!Element}
357 */
323 _format: function(parameters) 358 _format: function(parameters)
324 { 359 {
325 // This node is used like a Builder. Values are continually appended ont o it. 360 // This node is used like a Builder. Values are continually appended ont o it.
326 var formattedResult = createElement("span"); 361 var formattedResult = createElement("span");
327 if (!parameters.length) 362 if (!parameters.length)
328 return formattedResult; 363 return formattedResult;
329 364
330 var target = this._target();
331
332 // Formatting code below assumes that parameters are all wrappers wherea s frontend console 365 // Formatting code below assumes that parameters are all wrappers wherea s frontend console
333 // API allows passing arbitrary values as messages (strings, numbers, et c.). Wrap them here. 366 // API allows passing arbitrary values as messages (strings, numbers, et c.). Wrap them here.
334 for (var i = 0; i < parameters.length; ++i) { 367 // FIXME: Only pass runtime wrappers here.
335 // FIXME: Only pass runtime wrappers here. 368 for (var i = 0; i < parameters.length; ++i)
336 if (parameters[i] instanceof WebInspector.RemoteObject) 369 parameters[i] = this._parameterToRemoteObject(parameters[i], this._t arget());
337 continue;
338
339 if (!target) {
340 parameters[i] = WebInspector.RemoteObject.fromLocalObject(parame ters[i]);
341 continue;
342 }
343
344 if (typeof parameters[i] === "object")
345 parameters[i] = target.runtimeModel.createRemoteObject(parameter s[i]);
346 else
347 parameters[i] = target.runtimeModel.createRemoteObjectFromPrimit iveValue(parameters[i]);
348 }
349 370
350 // There can be string log and string eval result. We distinguish betwee n them based on message type. 371 // There can be string log and string eval result. We distinguish betwee n them based on message type.
351 var shouldFormatMessage = WebInspector.RemoteObject.type(parameters[0]) === "string" && (this._message.type !== WebInspector.ConsoleMessage.MessageType. Result || this._message.level === WebInspector.ConsoleMessage.MessageLevel.Error || this._message.level === WebInspector.ConsoleMessage.MessageLevel.RevokedErro r); 372 var shouldFormatMessage = WebInspector.RemoteObject.type((/** @type {!Ar ray.<!WebInspector.RemoteObject>} **/ (parameters))[0]) === "string" && (this._m essage.type !== WebInspector.ConsoleMessage.MessageType.Result || this._message. level === WebInspector.ConsoleMessage.MessageLevel.Error || this._message.level === WebInspector.ConsoleMessage.MessageLevel.RevokedError);
352 373
353 // Multiple parameters with the first being a format string. Save unused substitutions. 374 // Multiple parameters with the first being a format string. Save unused substitutions.
354 if (shouldFormatMessage) { 375 if (shouldFormatMessage) {
355 // Multiple parameters with the first being a format string. Save un used substitutions. 376 var result = this._formatWithSubstitutionString(/** @type {string} * */ (parameters[0].description), parameters.slice(1), formattedResult);
356 var result = this._formatWithSubstitutionString(parameters[0].descri ption, parameters.slice(1), formattedResult);
357 parameters = result.unusedSubstitutions; 377 parameters = result.unusedSubstitutions;
358 if (parameters.length) 378 if (parameters.length)
359 formattedResult.createTextChild(" "); 379 formattedResult.createTextChild(" ");
360 } 380 }
361 381
362 if (this._message.type === WebInspector.ConsoleMessage.MessageType.Table ) { 382 if (this._message.type === WebInspector.ConsoleMessage.MessageType.Table ) {
363 formattedResult.appendChild(this._formatParameterAsTable(parameters) ); 383 formattedResult.appendChild(this._formatParameterAsTable(parameters) );
364 return formattedResult; 384 return formattedResult;
365 } 385 }
366 386
(...skipping 381 matching lines...) Expand 10 before | Expand all | Expand 10 after
748 } 768 }
749 rootElement.appendChild(this._previewFormatter.renderPropertyPre view(type, subtype, description)); 769 rootElement.appendChild(this._previewFormatter.renderPropertyPre view(type, subtype, description));
750 } 770 }
751 } 771 }
752 772
753 return rootElement; 773 return rootElement;
754 }, 774 },
755 775
756 /** 776 /**
757 * @param {string} format 777 * @param {string} format
758 * @param {!Array.<string>} parameters 778 * @param {!Array.<!WebInspector.RemoteObject>} parameters
759 * @param {!Element} formattedResult 779 * @param {!Element} formattedResult
760 */ 780 */
761 _formatWithSubstitutionString: function(format, parameters, formattedResult) 781 _formatWithSubstitutionString: function(format, parameters, formattedResult)
762 { 782 {
763 var formatters = {}; 783 var formatters = {};
764 784
765 /** 785 /**
766 * @param {boolean} force 786 * @param {boolean} force
767 * @param {!WebInspector.RemoteObject} obj 787 * @param {!WebInspector.RemoteObject} obj
768 * @return {!Element} 788 * @return {!Element}
(...skipping 165 matching lines...) Expand 10 before | Expand all | Expand 10 after
934 /** 954 /**
935 * @return {!Element} 955 * @return {!Element}
936 */ 956 */
937 contentElement: function() 957 contentElement: function()
938 { 958 {
939 if (this._contentElement) 959 if (this._contentElement)
940 return this._contentElement; 960 return this._contentElement;
941 961
942 var contentElement = createElementWithClass("div", "console-message"); 962 var contentElement = createElementWithClass("div", "console-message");
943 this._contentElement = contentElement; 963 this._contentElement = contentElement;
944
945 if (this._message.type === WebInspector.ConsoleMessage.MessageType.Start Group || this._message.type === WebInspector.ConsoleMessage.MessageType.StartGro upCollapsed) 964 if (this._message.type === WebInspector.ConsoleMessage.MessageType.Start Group || this._message.type === WebInspector.ConsoleMessage.MessageType.StartGro upCollapsed)
946 contentElement.classList.add("console-group-title"); 965 contentElement.classList.add("console-group-title");
947 966
948 contentElement.appendChild(this._formatMessage()); 967 var formattedMessage;
968 var consoleMessage = this._message;
969 var target = consoleMessage.target();
970 var shouldIncludeTrace = !!consoleMessage.stackTrace && (consoleMessage. source === WebInspector.ConsoleMessage.MessageSource.Network || consoleMessage.l evel === WebInspector.ConsoleMessage.MessageLevel.Error || consoleMessage.level === WebInspector.ConsoleMessage.MessageLevel.RevokedError || consoleMessage.type === WebInspector.ConsoleMessage.MessageType.Trace || consoleMessage.level === W ebInspector.ConsoleMessage.MessageLevel.Warning);
971 if (target && shouldIncludeTrace)
972 formattedMessage = this._buildMessageWithStackTrace(consoleMessage, target, this._linkifier);
973 else
974 formattedMessage = this._buildMessage(consoleMessage);
975 contentElement.appendChild(formattedMessage);
949 976
950 this.updateTimestamp(WebInspector.moduleSetting("consoleTimestampsEnable d").get()); 977 this.updateTimestamp(WebInspector.moduleSetting("consoleTimestampsEnable d").get());
951
952 return this._contentElement; 978 return this._contentElement;
953 }, 979 },
954 980
955 /** 981 /**
956 * @return {!Element} 982 * @return {!Element}
957 */ 983 */
958 toMessageElement: function() 984 toMessageElement: function()
959 { 985 {
960 if (this._element) 986 if (this._element)
961 return this._element; 987 return this._element;
(...skipping 268 matching lines...) Expand 10 before | Expand all | Expand 10 after
1230 { 1256 {
1231 if (!this._element) { 1257 if (!this._element) {
1232 WebInspector.ConsoleViewMessage.prototype.toMessageElement.call(this ); 1258 WebInspector.ConsoleViewMessage.prototype.toMessageElement.call(this );
1233 this._element.classList.toggle("collapsed", this._collapsed); 1259 this._element.classList.toggle("collapsed", this._collapsed);
1234 } 1260 }
1235 return this._element; 1261 return this._element;
1236 }, 1262 },
1237 1263
1238 __proto__: WebInspector.ConsoleViewMessage.prototype 1264 __proto__: WebInspector.ConsoleViewMessage.prototype
1239 } 1265 }
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698