OLD | NEW |
1 /* | 1 /* |
2 * Copyright (C) 2013 Google Inc. All rights reserved. | 2 * Copyright (C) 2013 Google Inc. All rights reserved. |
3 * Copyright (C) 2012 Intel Inc. All rights reserved. | 3 * Copyright (C) 2012 Intel Inc. All rights reserved. |
4 * | 4 * |
5 * Redistribution and use in source and binary forms, with or without | 5 * Redistribution and use in source and binary forms, with or without |
6 * modification, are permitted provided that the following conditions are | 6 * modification, are permitted provided that the following conditions are |
7 * met: | 7 * met: |
8 * | 8 * |
9 * * Redistributions of source code must retain the above copyright | 9 * * Redistributions of source code must retain the above copyright |
10 * notice, this list of conditions and the following disclaimer. | 10 * notice, this list of conditions and the following disclaimer. |
(...skipping 15 matching lines...) Expand all Loading... |
26 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY | 26 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY |
27 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT | 27 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
28 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE | 28 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
29 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. | 29 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
30 */ | 30 */ |
31 | 31 |
32 /** | 32 /** |
33 */ | 33 */ |
34 WebInspector.TimelineUIUtils = function() { } | 34 WebInspector.TimelineUIUtils = function() { } |
35 | 35 |
| 36 /** |
| 37 * @return {!Object.<string, !WebInspector.TimelineCategory>} |
| 38 */ |
36 WebInspector.TimelineUIUtils.categories = function() | 39 WebInspector.TimelineUIUtils.categories = function() |
37 { | 40 { |
38 if (WebInspector.TimelineUIUtils._categories) | 41 if (WebInspector.TimelineUIUtils._categories) |
39 return WebInspector.TimelineUIUtils._categories; | 42 return WebInspector.TimelineUIUtils._categories; |
40 WebInspector.TimelineUIUtils._categories = { | 43 WebInspector.TimelineUIUtils._categories = { |
41 loading: new WebInspector.TimelineCategory("loading", WebInspector.UIStr
ing("Loading"), 0, "hsl(214, 53%, 58%)", "hsl(214, 67%, 90%)", "hsl(214, 67%, 74
%)", "hsl(214, 67%, 66%)"), | 44 loading: new WebInspector.TimelineCategory("loading", WebInspector.UIStr
ing("Loading"), 0, "hsl(214, 53%, 58%)", "hsl(214, 67%, 90%)", "hsl(214, 67%, 74
%)", "hsl(214, 67%, 66%)"), |
42 scripting: new WebInspector.TimelineCategory("scripting", WebInspector.U
IString("Scripting"), 1, "hsl(43, 90%, 45%)", "hsl(43, 83%, 90%)", "hsl(43, 83%,
72%)", "hsl(43, 83%, 64%) "), | 45 scripting: new WebInspector.TimelineCategory("scripting", WebInspector.U
IString("Scripting"), 1, "hsl(43, 90%, 45%)", "hsl(43, 83%, 90%)", "hsl(43, 83%,
72%)", "hsl(43, 83%, 64%) "), |
43 rendering: new WebInspector.TimelineCategory("rendering", WebInspector.U
IString("Rendering"), 2, "hsl(256, 50%, 60%)", "hsl(256, 67%, 90%)", "hsl(256, 6
7%, 76%)", "hsl(256, 67%, 70%)"), | 46 rendering: new WebInspector.TimelineCategory("rendering", WebInspector.U
IString("Rendering"), 2, "hsl(256, 50%, 60%)", "hsl(256, 67%, 90%)", "hsl(256, 6
7%, 76%)", "hsl(256, 67%, 70%)"), |
44 painting: new WebInspector.TimelineCategory("painting", WebInspector.UIS
tring("Painting"), 2, "hsl(109, 33%, 47%)", "hsl(109, 33%, 90%)", "hsl(109, 33%,
64%)", "hsl(109, 33%, 55%)"), | 47 painting: new WebInspector.TimelineCategory("painting", WebInspector.UIS
tring("Painting"), 2, "hsl(109, 33%, 47%)", "hsl(109, 33%, 90%)", "hsl(109, 33%,
64%)", "hsl(109, 33%, 55%)"), |
45 other: new WebInspector.TimelineCategory("other", WebInspector.UIString(
"Other"), -1, "hsl(0, 0%, 73%)", "hsl(0, 0%, 90%)", "hsl(0, 0%, 87%)", "hsl(0, 0
%, 79%)"), | 48 other: new WebInspector.TimelineCategory("other", WebInspector.UIString(
"Other"), -1, "hsl(0, 0%, 73%)", "hsl(0, 0%, 90%)", "hsl(0, 0%, 87%)", "hsl(0, 0
%, 79%)"), |
(...skipping 101 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
147 * @param {!WebInspector.TimelineModel.Record} record | 150 * @param {!WebInspector.TimelineModel.Record} record |
148 * @return {!WebInspector.TimelineCategory} | 151 * @return {!WebInspector.TimelineCategory} |
149 */ | 152 */ |
150 WebInspector.TimelineUIUtils.categoryForRecord = function(record) | 153 WebInspector.TimelineUIUtils.categoryForRecord = function(record) |
151 { | 154 { |
152 return WebInspector.TimelineUIUtils.recordStyle(record).category; | 155 return WebInspector.TimelineUIUtils.recordStyle(record).category; |
153 } | 156 } |
154 | 157 |
155 /** | 158 /** |
156 * @param {!WebInspector.TimelineModel.Record} record | 159 * @param {!WebInspector.TimelineModel.Record} record |
| 160 * @return {boolean} |
157 */ | 161 */ |
158 WebInspector.TimelineUIUtils.isEventDivider = function(record) | 162 WebInspector.TimelineUIUtils.isEventDivider = function(record) |
159 { | 163 { |
160 var recordTypes = WebInspector.TimelineModel.RecordType; | 164 var recordTypes = WebInspector.TimelineModel.RecordType; |
161 if (record.type() === recordTypes.TimeStamp) | 165 if (record.type() === recordTypes.TimeStamp) |
162 return true; | 166 return true; |
163 if (record.type() === recordTypes.MarkFirstPaint) | 167 if (record.type() === recordTypes.MarkFirstPaint) |
164 return true; | 168 return true; |
165 if (record.type() === recordTypes.MarkDOMContent || record.type() === record
Types.MarkLoad) | 169 if (record.type() === recordTypes.MarkDOMContent || record.type() === record
Types.MarkLoad) |
166 return record.data()["isMainFrame"]; | 170 return record.data()["isMainFrame"]; |
(...skipping 16 matching lines...) Expand all Loading... |
183 case recordTypes.ResourceFinish: | 187 case recordTypes.ResourceFinish: |
184 return true; | 188 return true; |
185 default: | 189 default: |
186 return false; | 190 return false; |
187 } | 191 } |
188 } | 192 } |
189 | 193 |
190 /** | 194 /** |
191 * @param {string} recordType | 195 * @param {string} recordType |
192 * @param {string=} title | 196 * @param {string=} title |
| 197 * @return {!Element} |
193 */ | 198 */ |
194 WebInspector.TimelineUIUtils.createEventDivider = function(recordType, title) | 199 WebInspector.TimelineUIUtils.createEventDivider = function(recordType, title) |
195 { | 200 { |
196 var eventDivider = document.createElement("div"); | 201 var eventDivider = document.createElement("div"); |
197 eventDivider.className = "resources-event-divider"; | 202 eventDivider.className = "resources-event-divider"; |
198 var recordTypes = WebInspector.TimelineModel.RecordType; | 203 var recordTypes = WebInspector.TimelineModel.RecordType; |
199 | 204 |
200 if (recordType === recordTypes.MarkDOMContent) | 205 if (recordType === recordTypes.MarkDOMContent) |
201 eventDivider.className += " resources-blue-divider"; | 206 eventDivider.className += " resources-blue-divider"; |
202 else if (recordType === recordTypes.MarkLoad) | 207 else if (recordType === recordTypes.MarkLoad) |
(...skipping 160 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
363 var rowElement = footerElement.createChild("div"); | 368 var rowElement = footerElement.createChild("div"); |
364 rowElement.createChild("div", "timeline-aggregated-category timeline-"
+ category.name); | 369 rowElement.createChild("div", "timeline-aggregated-category timeline-"
+ category.name); |
365 rowElement.createTextChild(WebInspector.UIString("%s %s", formatter(val
ue), category.title)); | 370 rowElement.createTextChild(WebInspector.UIString("%s %s", formatter(val
ue), category.title)); |
366 } | 371 } |
367 return element; | 372 return element; |
368 } | 373 } |
369 | 374 |
370 /** | 375 /** |
371 * @param {!WebInspector.TimelineFrameModel} frameModel | 376 * @param {!WebInspector.TimelineFrameModel} frameModel |
372 * @param {!WebInspector.TimelineFrame} frame | 377 * @param {!WebInspector.TimelineFrame} frame |
| 378 * @return {!Element} |
373 */ | 379 */ |
374 WebInspector.TimelineUIUtils.generatePopupContentForFrame = function(frameModel,
frame) | 380 WebInspector.TimelineUIUtils.generatePopupContentForFrame = function(frameModel,
frame) |
375 { | 381 { |
376 var contentHelper = new WebInspector.TimelinePopupContentHelper(WebInspector
.UIString("Frame")); | 382 var contentHelper = new WebInspector.TimelinePopupContentHelper(WebInspector
.UIString("Frame")); |
377 var durationInMillis = frame.endTime - frame.startTime; | 383 var durationInMillis = frame.endTime - frame.startTime; |
378 var durationText = WebInspector.UIString("%s (at %s)", Number.millisToString
(frame.endTime - frame.startTime, true), | 384 var durationText = WebInspector.UIString("%s (at %s)", Number.millisToString
(frame.endTime - frame.startTime, true), |
379 Number.millisToString(frame.startTimeOffset, true)); | 385 Number.millisToString(frame.startTimeOffset, true)); |
380 contentHelper.appendTextRow(WebInspector.UIString("Duration"), durationText)
; | 386 contentHelper.appendTextRow(WebInspector.UIString("Duration"), durationText)
; |
381 contentHelper.appendTextRow(WebInspector.UIString("FPS"), Math.floor(1000 /
durationInMillis)); | 387 contentHelper.appendTextRow(WebInspector.UIString("FPS"), Math.floor(1000 /
durationInMillis)); |
382 contentHelper.appendTextRow(WebInspector.UIString("CPU time"), Number.millis
ToString(frame.cpuTime, true)); | 388 contentHelper.appendTextRow(WebInspector.UIString("CPU time"), Number.millis
ToString(frame.cpuTime, true)); |
383 contentHelper.appendElementRow(WebInspector.UIString("Aggregated Time"), | 389 contentHelper.appendElementRow(WebInspector.UIString("Aggregated Time"), |
384 WebInspector.TimelineUIUtils._generateAggregatedInfo(frame.timeByCategor
y)); | 390 WebInspector.TimelineUIUtils._generateAggregatedInfo(frame.timeByCategor
y)); |
385 if (WebInspector.experimentsSettings.layersPanel.isEnabled() && frame.layerT
ree) { | 391 if (WebInspector.experimentsSettings.layersPanel.isEnabled() && frame.layerT
ree) { |
386 contentHelper.appendElementRow(WebInspector.UIString("Layer tree"), | 392 contentHelper.appendElementRow(WebInspector.UIString("Layer tree"), |
387 WebInspector.Linkifier.linkifyUsingReveal
er(frame.layerTree, WebInspector.UIString("show"))); | 393 WebInspector.Linkifier.linkifyUsingReveal
er(frame.layerTree, WebInspector.UIString("show"))); |
388 } | 394 } |
389 return contentHelper.contentTable(); | 395 return contentHelper.contentTable(); |
390 } | 396 } |
391 | 397 |
392 /** | 398 /** |
393 * @param {!WebInspector.FrameStatistics} statistics | 399 * @param {!WebInspector.FrameStatistics} statistics |
| 400 * @return {!Element} |
394 */ | 401 */ |
395 WebInspector.TimelineUIUtils.generatePopupContentForFrameStatistics = function(s
tatistics) | 402 WebInspector.TimelineUIUtils.generatePopupContentForFrameStatistics = function(s
tatistics) |
396 { | 403 { |
397 /** | 404 /** |
398 * @param {number} time | 405 * @param {number} time |
399 */ | 406 */ |
400 function formatTimeAndFPS(time) | 407 function formatTimeAndFPS(time) |
401 { | 408 { |
402 return WebInspector.UIString("%s (%.0f FPS)", Number.millisToString(time
, true), 1 / time); | 409 return WebInspector.UIString("%s (%.0f FPS)", Number.millisToString(time
, true), 1 / time); |
403 } | 410 } |
404 | 411 |
405 var contentHelper = new WebInspector.TimelineDetailsContentHelper(null, null
, false); | 412 var contentHelper = new WebInspector.TimelineDetailsContentHelper(null, null
, false); |
406 contentHelper.appendTextRow(WebInspector.UIString("Minimum Time"), formatTim
eAndFPS(statistics.minDuration)); | 413 contentHelper.appendTextRow(WebInspector.UIString("Minimum Time"), formatTim
eAndFPS(statistics.minDuration)); |
407 contentHelper.appendTextRow(WebInspector.UIString("Average Time"), formatTim
eAndFPS(statistics.average)); | 414 contentHelper.appendTextRow(WebInspector.UIString("Average Time"), formatTim
eAndFPS(statistics.average)); |
408 contentHelper.appendTextRow(WebInspector.UIString("Maximum Time"), formatTim
eAndFPS(statistics.maxDuration)); | 415 contentHelper.appendTextRow(WebInspector.UIString("Maximum Time"), formatTim
eAndFPS(statistics.maxDuration)); |
409 contentHelper.appendTextRow(WebInspector.UIString("Standard Deviation"), Num
ber.millisToString(statistics.stddev, true)); | 416 contentHelper.appendTextRow(WebInspector.UIString("Standard Deviation"), Num
ber.millisToString(statistics.stddev, true)); |
410 | 417 |
411 return contentHelper.element; | 418 return contentHelper.element; |
412 } | 419 } |
413 | 420 |
414 /** | 421 /** |
415 * @param {!CanvasRenderingContext2D} context | 422 * @param {!CanvasRenderingContext2D} context |
416 * @param {number} width | 423 * @param {number} width |
417 * @param {number} height | 424 * @param {number} height |
418 * @param {string} color0 | 425 * @param {string} color0 |
419 * @param {string} color1 | 426 * @param {string} color1 |
420 * @param {string} color2 | 427 * @param {string} color2 |
| 428 * @return {!CanvasGradient} |
421 */ | 429 */ |
422 WebInspector.TimelineUIUtils.createFillStyle = function(context, width, height,
color0, color1, color2) | 430 WebInspector.TimelineUIUtils.createFillStyle = function(context, width, height,
color0, color1, color2) |
423 { | 431 { |
424 var gradient = context.createLinearGradient(0, 0, width, height); | 432 var gradient = context.createLinearGradient(0, 0, width, height); |
425 gradient.addColorStop(0, color0); | 433 gradient.addColorStop(0, color0); |
426 gradient.addColorStop(0.25, color1); | 434 gradient.addColorStop(0.25, color1); |
427 gradient.addColorStop(0.75, color1); | 435 gradient.addColorStop(0.75, color1); |
428 gradient.addColorStop(1, color2); | 436 gradient.addColorStop(1, color2); |
429 return gradient; | 437 return gradient; |
430 } | 438 } |
431 | 439 |
432 /** | 440 /** |
433 * @param {!CanvasRenderingContext2D} context | 441 * @param {!CanvasRenderingContext2D} context |
434 * @param {number} width | 442 * @param {number} width |
435 * @param {number} height | 443 * @param {number} height |
436 * @param {!WebInspector.TimelineCategory} category | 444 * @param {!WebInspector.TimelineCategory} category |
| 445 * @return {!CanvasGradient} |
437 */ | 446 */ |
438 WebInspector.TimelineUIUtils.createFillStyleForCategory = function(context, widt
h, height, category) | 447 WebInspector.TimelineUIUtils.createFillStyleForCategory = function(context, widt
h, height, category) |
439 { | 448 { |
440 return WebInspector.TimelineUIUtils.createFillStyle(context, width, height,
category.fillColorStop0, category.fillColorStop1, category.borderColor); | 449 return WebInspector.TimelineUIUtils.createFillStyle(context, width, height,
category.fillColorStop0, category.fillColorStop1, category.borderColor); |
441 } | 450 } |
442 | 451 |
443 /** | 452 /** |
444 * @param {!WebInspector.TimelineCategory} category | 453 * @param {!WebInspector.TimelineCategory} category |
| 454 * @return {string} |
445 */ | 455 */ |
446 WebInspector.TimelineUIUtils.createStyleRuleForCategory = function(category) | 456 WebInspector.TimelineUIUtils.createStyleRuleForCategory = function(category) |
447 { | 457 { |
448 var selector = ".timeline-category-" + category.name + " .timeline-graph-bar
, " + | 458 var selector = ".timeline-category-" + category.name + " .timeline-graph-bar
, " + |
449 ".panel.timeline .timeline-filters-header .filter-checkbox-filter.filter
-checkbox-filter-" + category.name + " .checkbox-filter-checkbox, " + | 459 ".panel.timeline .timeline-filters-header .filter-checkbox-filter.filter
-checkbox-filter-" + category.name + " .checkbox-filter-checkbox, " + |
450 ".popover .timeline-" + category.name + ", " + | 460 ".popover .timeline-" + category.name + ", " + |
451 ".timeline-details-view .timeline-" + category.name + ", " + | 461 ".timeline-details-view .timeline-" + category.name + ", " + |
452 ".timeline-category-" + category.name + " .timeline-tree-icon" | 462 ".timeline-category-" + category.name + " .timeline-tree-icon" |
453 | 463 |
454 return selector + " { background-image: linear-gradient(" + | 464 return selector + " { background-image: linear-gradient(" + |
(...skipping 546 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1001 for (var i = 0; i < stackTrace.length; ++i) { | 1011 for (var i = 0; i < stackTrace.length; ++i) { |
1002 var stackFrame = stackTrace[i]; | 1012 var stackFrame = stackTrace[i]; |
1003 var row = stackTraceElement.createChild("div"); | 1013 var row = stackTraceElement.createChild("div"); |
1004 row.createTextChild(stackFrame.functionName || WebInspector.UIString
("(anonymous function)")); | 1014 row.createTextChild(stackFrame.functionName || WebInspector.UIString
("(anonymous function)")); |
1005 row.createTextChild(" @ "); | 1015 row.createTextChild(" @ "); |
1006 var urlElement = this._linkifier.linkifyLocation(this._target, stack
Frame.url, stackFrame.lineNumber - 1); | 1016 var urlElement = this._linkifier.linkifyLocation(this._target, stack
Frame.url, stackFrame.lineNumber - 1); |
1007 row.appendChild(urlElement); | 1017 row.appendChild(urlElement); |
1008 } | 1018 } |
1009 } | 1019 } |
1010 } | 1020 } |
OLD | NEW |