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

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

Issue 2373113003: DevTools: ConsoleViewMessage isolate _formatMessageAsTable() and single dataGrid (Closed)
Patch Set: rebase with set 10 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 25 matching lines...) Expand all
36 * @param {number} nestingLevel 36 * @param {number} nestingLevel
37 */ 37 */
38 WebInspector.ConsoleViewMessage = function(consoleMessage, linkifier, nestingLev el) 38 WebInspector.ConsoleViewMessage = function(consoleMessage, linkifier, nestingLev el)
39 { 39 {
40 this._message = consoleMessage; 40 this._message = consoleMessage;
41 this._linkifier = linkifier; 41 this._linkifier = linkifier;
42 this._repeatCount = 1; 42 this._repeatCount = 1;
43 this._closeGroupDecorationCount = 0; 43 this._closeGroupDecorationCount = 0;
44 this._nestingLevel = nestingLevel; 44 this._nestingLevel = nestingLevel;
45 45
46 /** @type {!Array.<!WebInspector.DataGrid>} */ 46 /** @type {?WebInspector.DataGrid} */
47 this._dataGrids = []; 47 this._dataGrid = null;
48 48
49 /** @type {!Object.<string, function(!WebInspector.RemoteObject, !Element, b oolean=)>} */ 49 /** @type {!Object.<string, function(!WebInspector.RemoteObject, !Element, b oolean=)>} */
50 this._customFormatters = { 50 this._customFormatters = {
51 "array": this._formatParameterAsArray, 51 "array": this._formatParameterAsArray,
52 "typedarray": this._formatParameterAsArray, 52 "typedarray": this._formatParameterAsArray,
53 "error": this._formatParameterAsError, 53 "error": this._formatParameterAsError,
54 "function": this._formatParameterAsFunction, 54 "function": this._formatParameterAsFunction,
55 "generator": this._formatParameterAsObject, 55 "generator": this._formatParameterAsObject,
56 "iterator": this._formatParameterAsObject, 56 "iterator": this._formatParameterAsObject,
57 "map": this._formatParameterAsObject, 57 "map": this._formatParameterAsObject,
(...skipping 24 matching lines...) Expand all
82 element: function() 82 element: function()
83 { 83 {
84 return this.toMessageElement(); 84 return this.toMessageElement();
85 }, 85 },
86 86
87 /** 87 /**
88 * @override 88 * @override
89 */ 89 */
90 wasShown: function() 90 wasShown: function()
91 { 91 {
92 for (var i = 0; this._dataGrids && i < this._dataGrids.length; ++i) 92 if (this._dataGrid)
93 this._dataGrids[i].updateWidths(); 93 this._dataGrid.updateWidths();
94 this._isVisible = true; 94 this._isVisible = true;
95 }, 95 },
96 96
97 onResize: function() 97 onResize: function()
98 { 98 {
99 if (!this._isVisible) 99 if (!this._isVisible)
100 return; 100 return;
101 for (var i = 0; this._dataGrids && i < this._dataGrids.length; ++i) 101 if (this._dataGrid)
102 this._dataGrids[i].onResize(); 102 this._dataGrid.onResize();
103 }, 103 },
104 104
105 /** 105 /**
106 * @override 106 * @override
107 */ 107 */
108 willHide: function() 108 willHide: function()
109 { 109 {
110 this._isVisible = false; 110 this._isVisible = false;
111 this._cachedHeight = this.contentElement().offsetHeight; 111 this._cachedHeight = this.contentElement().offsetHeight;
112 }, 112 },
(...skipping 21 matching lines...) Expand all
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 * @param {!WebInspector.ConsoleMessage} consoleMessage
142 * @return {!Element} 142 * @return {!Element}
143 */ 143 */
144 _buildTableMessage: function(consoleMessage)
145 {
146 var formattedMessage = createElement("span");
147 WebInspector.appendStyle(formattedMessage, "components/objectValue.css") ;
148 formattedMessage.className = "console-message-text source-code";
149 var anchorElement = this._buildMessageAnchor(consoleMessage);
150 if (anchorElement)
151 formattedMessage.appendChild(anchorElement);
152
153 var table = consoleMessage.parameters && consoleMessage.parameters.lengt h ? consoleMessage.parameters[0] : null;
154 if (table)
155 table = this._parameterToRemoteObject(table, this._target());
156 if (!table || !table.preview)
157 return formattedMessage;
158
159 var columnNames = [];
160 var preview = table.preview;
161 var rows = [];
162 for (var i = 0; i < preview.properties.length; ++i) {
163 var rowProperty = preview.properties[i];
164 var rowPreview = rowProperty.valuePreview;
165 if (!rowPreview)
166 continue;
167
168 var rowValue = {};
169 const maxColumnsToRender = 20;
170 for (var j = 0; j < rowPreview.properties.length; ++j) {
171 var cellProperty = rowPreview.properties[j];
172 var columnRendered = columnNames.indexOf(cellProperty.name) !== -1;
173 if (!columnRendered) {
174 if (columnNames.length === maxColumnsToRender)
175 continue;
176 columnRendered = true;
177 columnNames.push(cellProperty.name);
178 }
179
180 if (columnRendered) {
181 var cellElement = this._renderPropertyPreviewOrAccessor(tabl e, [rowProperty, cellProperty]);
182 cellElement.classList.add("console-message-nowrap-below");
183 rowValue[cellProperty.name] = cellElement;
184 }
185 }
186 rows.push([rowProperty.name, rowValue]);
187 }
188
189 var flatValues = [];
190 for (var i = 0; i < rows.length; ++i) {
191 var rowName = rows[i][0];
192 var rowValue = rows[i][1];
193 flatValues.push(rowName);
194 for (var j = 0; j < columnNames.length; ++j)
195 flatValues.push(rowValue[columnNames[j]]);
196 }
197 columnNames.unshift(WebInspector.UIString("(index)"));
198
199 if (flatValues.length) {
200 this._dataGrid = WebInspector.SortableDataGrid.create(columnNames, f latValues);
201
202 var formattedResult = createElement("span");
203 var tableElement = formattedResult.createChild("div", "console-messa ge-formatted-table");
204 var dataGridContainer = tableElement.createChild("span");
205 tableElement.appendChild(this._formatParameter(table, true, false));
206 dataGridContainer.appendChild(this._dataGrid.element);
207 formattedMessage.appendChild(formattedResult);
208 this._dataGrid.renderInline();
209 }
210 return formattedMessage;
211 },
212
213 /**
214 * @param {!WebInspector.ConsoleMessage} consoleMessage
215 * @return {!Element}
216 */
144 _buildMessage: function(consoleMessage) 217 _buildMessage: function(consoleMessage)
145 { 218 {
146 var messageElement; 219 var messageElement;
147 if (consoleMessage.source === WebInspector.ConsoleMessage.MessageSource. ConsoleAPI) { 220 if (consoleMessage.source === WebInspector.ConsoleMessage.MessageSource. ConsoleAPI) {
148 switch (consoleMessage.type) { 221 switch (consoleMessage.type) {
149 case WebInspector.ConsoleMessage.MessageType.Trace: 222 case WebInspector.ConsoleMessage.MessageType.Trace:
150 messageElement = this._format(consoleMessage.parameters || ["con sole.trace"]); 223 messageElement = this._format(consoleMessage.parameters || ["con sole.trace"]);
151 break; 224 break;
152 case WebInspector.ConsoleMessage.MessageType.Clear: 225 case WebInspector.ConsoleMessage.MessageType.Clear:
153 messageElement = createElementWithClass("span", "console-info"); 226 messageElement = createElementWithClass("span", "console-info");
(...skipping 218 matching lines...) Expand 10 before | Expand all | Expand 10 after
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); 445 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);
373 446
374 // Multiple parameters with the first being a format string. Save unused substitutions. 447 // Multiple parameters with the first being a format string. Save unused substitutions.
375 if (shouldFormatMessage) { 448 if (shouldFormatMessage) {
376 var result = this._formatWithSubstitutionString(/** @type {string} * */ (parameters[0].description), parameters.slice(1), formattedResult); 449 var result = this._formatWithSubstitutionString(/** @type {string} * */ (parameters[0].description), parameters.slice(1), formattedResult);
377 parameters = result.unusedSubstitutions; 450 parameters = result.unusedSubstitutions;
378 if (parameters.length) 451 if (parameters.length)
379 formattedResult.createTextChild(" "); 452 formattedResult.createTextChild(" ");
380 } 453 }
381 454
382 if (this._message.type === WebInspector.ConsoleMessage.MessageType.Table ) {
383 formattedResult.appendChild(this._formatParameterAsTable(parameters) );
384 return formattedResult;
385 }
386
387 // Single parameter, or unused substitutions from above. 455 // Single parameter, or unused substitutions from above.
388 for (var i = 0; i < parameters.length; ++i) { 456 for (var i = 0; i < parameters.length; ++i) {
389 // Inline strings when formatting. 457 // Inline strings when formatting.
390 if (shouldFormatMessage && parameters[i].type === "string") 458 if (shouldFormatMessage && parameters[i].type === "string")
391 formattedResult.appendChild(WebInspector.linkifyStringAsFragment (parameters[i].description)); 459 formattedResult.appendChild(WebInspector.linkifyStringAsFragment (parameters[i].description));
392 else 460 else
393 formattedResult.appendChild(this._formatParameter(parameters[i], false, true)); 461 formattedResult.appendChild(this._formatParameter(parameters[i], false, true));
394 if (i < parameters.length - 1) 462 if (i < parameters.length - 1)
395 formattedResult.createTextChild(" "); 463 formattedResult.createTextChild(" ");
396 } 464 }
(...skipping 163 matching lines...) Expand 10 before | Expand all | Expand 10 after
560 _formatParameterAsArray: function(array, elem) 628 _formatParameterAsArray: function(array, elem)
561 { 629 {
562 var maxFlatArrayLength = 100; 630 var maxFlatArrayLength = 100;
563 if (this.useArrayPreviewInFormatter(array) || array.arrayLength() > maxF latArrayLength) 631 if (this.useArrayPreviewInFormatter(array) || array.arrayLength() > maxF latArrayLength)
564 this._formatParameterAsArrayOrObject(array, elem, this.useArrayPrevi ewInFormatter(array) || array.arrayLength() <= maxFlatArrayLength); 632 this._formatParameterAsArrayOrObject(array, elem, this.useArrayPrevi ewInFormatter(array) || array.arrayLength() <= maxFlatArrayLength);
565 else 633 else
566 array.getAllProperties(false, this._printArrayResult.bind(this, arra y, elem)); 634 array.getAllProperties(false, this._printArrayResult.bind(this, arra y, elem));
567 }, 635 },
568 636
569 /** 637 /**
570 * @param {!Array.<!WebInspector.RemoteObject>} parameters
571 * @return {!Element}
572 */
573 _formatParameterAsTable: function(parameters)
574 {
575 var element = createElementWithClass("div", "console-message-formatted-t able");
576 var table = parameters[0];
577 if (!table || !table.preview)
578 return element;
579
580 var columnNames = [];
581 var preview = table.preview;
582 var rows = [];
583 for (var i = 0; i < preview.properties.length; ++i) {
584 var rowProperty = preview.properties[i];
585 var rowPreview = rowProperty.valuePreview;
586 if (!rowPreview)
587 continue;
588
589 var rowValue = {};
590 const maxColumnsToRender = 20;
591 for (var j = 0; j < rowPreview.properties.length; ++j) {
592 var cellProperty = rowPreview.properties[j];
593 var columnRendered = columnNames.indexOf(cellProperty.name) !== -1;
594 if (!columnRendered) {
595 if (columnNames.length === maxColumnsToRender)
596 continue;
597 columnRendered = true;
598 columnNames.push(cellProperty.name);
599 }
600
601 if (columnRendered) {
602 var cellElement = this._renderPropertyPreviewOrAccessor(tabl e, [rowProperty, cellProperty]);
603 cellElement.classList.add("console-message-nowrap-below");
604 rowValue[cellProperty.name] = cellElement;
605 }
606 }
607 rows.push([rowProperty.name, rowValue]);
608 }
609
610 var flatValues = [];
611 for (var i = 0; i < rows.length; ++i) {
612 var rowName = rows[i][0];
613 var rowValue = rows[i][1];
614 flatValues.push(rowName);
615 for (var j = 0; j < columnNames.length; ++j)
616 flatValues.push(rowValue[columnNames[j]]);
617 }
618
619 var dataGridContainer = element.createChild("span");
620 element.appendChild(this._formatParameter(table, true, false));
621 if (!flatValues.length)
622 return element;
623
624 columnNames.unshift(WebInspector.UIString("(index)"));
625 var dataGrid = WebInspector.SortableDataGrid.create(columnNames, flatVal ues);
626 dataGrid.renderInline();
627 dataGridContainer.appendChild(dataGrid.element);
628 this._dataGrids.push(dataGrid);
629 return element;
630 },
631
632 /**
633 * @param {!WebInspector.RemoteObject} output 638 * @param {!WebInspector.RemoteObject} output
634 * @param {!Element} elem 639 * @param {!Element} elem
635 */ 640 */
636 _formatParameterAsString: function(output, elem) 641 _formatParameterAsString: function(output, elem)
637 { 642 {
638 var span = createElement("span"); 643 var span = createElement("span");
639 span.className = "object-value-string source-code"; 644 span.className = "object-value-string source-code";
640 span.appendChild(WebInspector.linkifyStringAsFragment(output.description || "")); 645 span.appendChild(WebInspector.linkifyStringAsFragment(output.description || ""));
641 646
642 // Make black quotes. 647 // Make black quotes.
(...skipping 320 matching lines...) Expand 10 before | Expand all | Expand 10 after
963 this._contentElement = contentElement; 968 this._contentElement = contentElement;
964 if (this._message.type === WebInspector.ConsoleMessage.MessageType.Start Group || this._message.type === WebInspector.ConsoleMessage.MessageType.StartGro upCollapsed) 969 if (this._message.type === WebInspector.ConsoleMessage.MessageType.Start Group || this._message.type === WebInspector.ConsoleMessage.MessageType.StartGro upCollapsed)
965 contentElement.classList.add("console-group-title"); 970 contentElement.classList.add("console-group-title");
966 971
967 var formattedMessage; 972 var formattedMessage;
968 var consoleMessage = this._message; 973 var consoleMessage = this._message;
969 var target = consoleMessage.target(); 974 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); 975 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) 976 if (target && shouldIncludeTrace)
972 formattedMessage = this._buildMessageWithStackTrace(consoleMessage, target, this._linkifier); 977 formattedMessage = this._buildMessageWithStackTrace(consoleMessage, target, this._linkifier);
978 else if (this._message.type === WebInspector.ConsoleMessage.MessageType. Table)
979 formattedMessage = this._buildTableMessage(this._message);
973 else 980 else
974 formattedMessage = this._buildMessage(consoleMessage); 981 formattedMessage = this._buildMessage(consoleMessage);
975 contentElement.appendChild(formattedMessage); 982 contentElement.appendChild(formattedMessage);
976 983
977 this.updateTimestamp(WebInspector.moduleSetting("consoleTimestampsEnable d").get()); 984 this.updateTimestamp(WebInspector.moduleSetting("consoleTimestampsEnable d").get());
978 return this._contentElement; 985 return this._contentElement;
979 }, 986 },
980 987
981 /** 988 /**
982 * @return {!Element} 989 * @return {!Element}
(...skipping 273 matching lines...) Expand 10 before | Expand all | Expand 10 after
1256 { 1263 {
1257 if (!this._element) { 1264 if (!this._element) {
1258 WebInspector.ConsoleViewMessage.prototype.toMessageElement.call(this ); 1265 WebInspector.ConsoleViewMessage.prototype.toMessageElement.call(this );
1259 this._element.classList.toggle("collapsed", this._collapsed); 1266 this._element.classList.toggle("collapsed", this._collapsed);
1260 } 1267 }
1261 return this._element; 1268 return this._element;
1262 }, 1269 },
1263 1270
1264 __proto__: WebInspector.ConsoleViewMessage.prototype 1271 __proto__: WebInspector.ConsoleViewMessage.prototype
1265 } 1272 }
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