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 94 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
140 * @param {!WebInspector.TimelineModel.Record} record | 143 * @param {!WebInspector.TimelineModel.Record} record |
141 * @return {!WebInspector.TimelineCategory} | 144 * @return {!WebInspector.TimelineCategory} |
142 */ | 145 */ |
143 WebInspector.TimelineUIUtils.categoryForRecord = function(record) | 146 WebInspector.TimelineUIUtils.categoryForRecord = function(record) |
144 { | 147 { |
145 return WebInspector.TimelineUIUtils.recordStyle(record).category; | 148 return WebInspector.TimelineUIUtils.recordStyle(record).category; |
146 } | 149 } |
147 | 150 |
148 /** | 151 /** |
149 * @param {!WebInspector.TimelineModel.Record} record | 152 * @param {!WebInspector.TimelineModel.Record} record |
| 153 * @return {boolean} |
150 */ | 154 */ |
151 WebInspector.TimelineUIUtils.isEventDivider = function(record) | 155 WebInspector.TimelineUIUtils.isEventDivider = function(record) |
152 { | 156 { |
153 var recordTypes = WebInspector.TimelineModel.RecordType; | 157 var recordTypes = WebInspector.TimelineModel.RecordType; |
154 if (record.type() === recordTypes.TimeStamp) | 158 if (record.type() === recordTypes.TimeStamp) |
155 return true; | 159 return true; |
156 if (record.type() === recordTypes.MarkFirstPaint) | 160 if (record.type() === recordTypes.MarkFirstPaint) |
157 return true; | 161 return true; |
158 if (record.type() === recordTypes.MarkDOMContent || record.type() === record
Types.MarkLoad) | 162 if (record.type() === recordTypes.MarkDOMContent || record.type() === record
Types.MarkLoad) |
159 return record.data()["isMainFrame"]; | 163 return record.data()["isMainFrame"]; |
(...skipping 16 matching lines...) Expand all Loading... |
176 case recordTypes.ResourceFinish: | 180 case recordTypes.ResourceFinish: |
177 return true; | 181 return true; |
178 default: | 182 default: |
179 return false; | 183 return false; |
180 } | 184 } |
181 } | 185 } |
182 | 186 |
183 /** | 187 /** |
184 * @param {string} recordType | 188 * @param {string} recordType |
185 * @param {string=} title | 189 * @param {string=} title |
| 190 * @return {!Element} |
186 */ | 191 */ |
187 WebInspector.TimelineUIUtils.createEventDivider = function(recordType, title) | 192 WebInspector.TimelineUIUtils.createEventDivider = function(recordType, title) |
188 { | 193 { |
189 var eventDivider = document.createElement("div"); | 194 var eventDivider = document.createElement("div"); |
190 eventDivider.className = "resources-event-divider"; | 195 eventDivider.className = "resources-event-divider"; |
191 var recordTypes = WebInspector.TimelineModel.RecordType; | 196 var recordTypes = WebInspector.TimelineModel.RecordType; |
192 | 197 |
193 if (recordType === recordTypes.MarkDOMContent) | 198 if (recordType === recordTypes.MarkDOMContent) |
194 eventDivider.className += " resources-blue-divider"; | 199 eventDivider.className += " resources-blue-divider"; |
195 else if (recordType === recordTypes.MarkLoad) | 200 else if (recordType === recordTypes.MarkLoad) |
(...skipping 160 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
356 var rowElement = footerElement.createChild("div"); | 361 var rowElement = footerElement.createChild("div"); |
357 rowElement.createChild("div", "timeline-aggregated-category timeline-"
+ category.name); | 362 rowElement.createChild("div", "timeline-aggregated-category timeline-"
+ category.name); |
358 rowElement.createTextChild(WebInspector.UIString("%s %s", formatter(val
ue), category.title)); | 363 rowElement.createTextChild(WebInspector.UIString("%s %s", formatter(val
ue), category.title)); |
359 } | 364 } |
360 return element; | 365 return element; |
361 } | 366 } |
362 | 367 |
363 /** | 368 /** |
364 * @param {!WebInspector.TimelineFrameModel} frameModel | 369 * @param {!WebInspector.TimelineFrameModel} frameModel |
365 * @param {!WebInspector.TimelineFrame} frame | 370 * @param {!WebInspector.TimelineFrame} frame |
| 371 * @return {!Element} |
366 */ | 372 */ |
367 WebInspector.TimelineUIUtils.generatePopupContentForFrame = function(frameModel,
frame) | 373 WebInspector.TimelineUIUtils.generatePopupContentForFrame = function(frameModel,
frame) |
368 { | 374 { |
369 var contentHelper = new WebInspector.TimelinePopupContentHelper(WebInspector
.UIString("Frame")); | 375 var contentHelper = new WebInspector.TimelinePopupContentHelper(WebInspector
.UIString("Frame")); |
370 var durationInMillis = frame.endTime - frame.startTime; | 376 var durationInMillis = frame.endTime - frame.startTime; |
371 var durationText = WebInspector.UIString("%s (at %s)", Number.millisToString
(frame.endTime - frame.startTime, true), | 377 var durationText = WebInspector.UIString("%s (at %s)", Number.millisToString
(frame.endTime - frame.startTime, true), |
372 Number.millisToString(frame.startTimeOffset, true)); | 378 Number.millisToString(frame.startTimeOffset, true)); |
373 contentHelper.appendTextRow(WebInspector.UIString("Duration"), durationText)
; | 379 contentHelper.appendTextRow(WebInspector.UIString("Duration"), durationText)
; |
374 contentHelper.appendTextRow(WebInspector.UIString("FPS"), Math.floor(1000 /
durationInMillis)); | 380 contentHelper.appendTextRow(WebInspector.UIString("FPS"), Math.floor(1000 /
durationInMillis)); |
375 contentHelper.appendTextRow(WebInspector.UIString("CPU time"), Number.millis
ToString(frame.cpuTime, true)); | 381 contentHelper.appendTextRow(WebInspector.UIString("CPU time"), Number.millis
ToString(frame.cpuTime, true)); |
376 contentHelper.appendElementRow(WebInspector.UIString("Aggregated Time"), | 382 contentHelper.appendElementRow(WebInspector.UIString("Aggregated Time"), |
377 WebInspector.TimelineUIUtils._generateAggregatedInfo(frame.timeByCategor
y)); | 383 WebInspector.TimelineUIUtils._generateAggregatedInfo(frame.timeByCategor
y)); |
378 if (WebInspector.experimentsSettings.layersPanel.isEnabled() && frame.layerT
ree) { | 384 if (WebInspector.experimentsSettings.layersPanel.isEnabled() && frame.layerT
ree) { |
379 contentHelper.appendElementRow(WebInspector.UIString("Layer tree"), | 385 contentHelper.appendElementRow(WebInspector.UIString("Layer tree"), |
380 WebInspector.Linkifier.linkifyUsingReveal
er(frame.layerTree, WebInspector.UIString("show"))); | 386 WebInspector.Linkifier.linkifyUsingReveal
er(frame.layerTree, WebInspector.UIString("show"))); |
381 } | 387 } |
382 return contentHelper.contentTable(); | 388 return contentHelper.contentTable(); |
383 } | 389 } |
384 | 390 |
385 /** | 391 /** |
386 * @param {!WebInspector.FrameStatistics} statistics | 392 * @param {!WebInspector.FrameStatistics} statistics |
| 393 * @return {!Element} |
387 */ | 394 */ |
388 WebInspector.TimelineUIUtils.generatePopupContentForFrameStatistics = function(s
tatistics) | 395 WebInspector.TimelineUIUtils.generatePopupContentForFrameStatistics = function(s
tatistics) |
389 { | 396 { |
390 /** | 397 /** |
391 * @param {number} time | 398 * @param {number} time |
392 */ | 399 */ |
393 function formatTimeAndFPS(time) | 400 function formatTimeAndFPS(time) |
394 { | 401 { |
395 return WebInspector.UIString("%s (%.0f FPS)", Number.millisToString(time
, true), 1 / time); | 402 return WebInspector.UIString("%s (%.0f FPS)", Number.millisToString(time
, true), 1 / time); |
396 } | 403 } |
397 | 404 |
398 var contentHelper = new WebInspector.TimelineDetailsContentHelper(null, null
, false); | 405 var contentHelper = new WebInspector.TimelineDetailsContentHelper(null, null
, false); |
399 contentHelper.appendTextRow(WebInspector.UIString("Minimum Time"), formatTim
eAndFPS(statistics.minDuration)); | 406 contentHelper.appendTextRow(WebInspector.UIString("Minimum Time"), formatTim
eAndFPS(statistics.minDuration)); |
400 contentHelper.appendTextRow(WebInspector.UIString("Average Time"), formatTim
eAndFPS(statistics.average)); | 407 contentHelper.appendTextRow(WebInspector.UIString("Average Time"), formatTim
eAndFPS(statistics.average)); |
401 contentHelper.appendTextRow(WebInspector.UIString("Maximum Time"), formatTim
eAndFPS(statistics.maxDuration)); | 408 contentHelper.appendTextRow(WebInspector.UIString("Maximum Time"), formatTim
eAndFPS(statistics.maxDuration)); |
402 contentHelper.appendTextRow(WebInspector.UIString("Standard Deviation"), Num
ber.millisToString(statistics.stddev, true)); | 409 contentHelper.appendTextRow(WebInspector.UIString("Standard Deviation"), Num
ber.millisToString(statistics.stddev, true)); |
403 | 410 |
404 return contentHelper.element; | 411 return contentHelper.element; |
405 } | 412 } |
406 | 413 |
407 /** | 414 /** |
408 * @param {!CanvasRenderingContext2D} context | 415 * @param {!CanvasRenderingContext2D} context |
409 * @param {number} width | 416 * @param {number} width |
410 * @param {number} height | 417 * @param {number} height |
411 * @param {string} color0 | 418 * @param {string} color0 |
412 * @param {string} color1 | 419 * @param {string} color1 |
413 * @param {string} color2 | 420 * @param {string} color2 |
| 421 * @return {!CanvasGradient} |
414 */ | 422 */ |
415 WebInspector.TimelineUIUtils.createFillStyle = function(context, width, height,
color0, color1, color2) | 423 WebInspector.TimelineUIUtils.createFillStyle = function(context, width, height,
color0, color1, color2) |
416 { | 424 { |
417 var gradient = context.createLinearGradient(0, 0, width, height); | 425 var gradient = context.createLinearGradient(0, 0, width, height); |
418 gradient.addColorStop(0, color0); | 426 gradient.addColorStop(0, color0); |
419 gradient.addColorStop(0.25, color1); | 427 gradient.addColorStop(0.25, color1); |
420 gradient.addColorStop(0.75, color1); | 428 gradient.addColorStop(0.75, color1); |
421 gradient.addColorStop(1, color2); | 429 gradient.addColorStop(1, color2); |
422 return gradient; | 430 return gradient; |
423 } | 431 } |
424 | 432 |
425 /** | 433 /** |
426 * @param {!CanvasRenderingContext2D} context | 434 * @param {!CanvasRenderingContext2D} context |
427 * @param {number} width | 435 * @param {number} width |
428 * @param {number} height | 436 * @param {number} height |
429 * @param {!WebInspector.TimelineCategory} category | 437 * @param {!WebInspector.TimelineCategory} category |
| 438 * @return {!CanvasGradient} |
430 */ | 439 */ |
431 WebInspector.TimelineUIUtils.createFillStyleForCategory = function(context, widt
h, height, category) | 440 WebInspector.TimelineUIUtils.createFillStyleForCategory = function(context, widt
h, height, category) |
432 { | 441 { |
433 return WebInspector.TimelineUIUtils.createFillStyle(context, width, height,
category.fillColorStop0, category.fillColorStop1, category.borderColor); | 442 return WebInspector.TimelineUIUtils.createFillStyle(context, width, height,
category.fillColorStop0, category.fillColorStop1, category.borderColor); |
434 } | 443 } |
435 | 444 |
436 /** | 445 /** |
437 * @param {!WebInspector.TimelineCategory} category | 446 * @param {!WebInspector.TimelineCategory} category |
| 447 * @return {string} |
438 */ | 448 */ |
439 WebInspector.TimelineUIUtils.createStyleRuleForCategory = function(category) | 449 WebInspector.TimelineUIUtils.createStyleRuleForCategory = function(category) |
440 { | 450 { |
441 var selector = ".timeline-category-" + category.name + " .timeline-graph-bar
, " + | 451 var selector = ".timeline-category-" + category.name + " .timeline-graph-bar
, " + |
442 ".panel.timeline .timeline-filters-header .filter-checkbox-filter.filter
-checkbox-filter-" + category.name + " .checkbox-filter-checkbox, " + | 452 ".panel.timeline .timeline-filters-header .filter-checkbox-filter.filter
-checkbox-filter-" + category.name + " .checkbox-filter-checkbox, " + |
443 ".popover .timeline-" + category.name + ", " + | 453 ".popover .timeline-" + category.name + ", " + |
444 ".timeline-details-view .timeline-" + category.name + ", " + | 454 ".timeline-details-view .timeline-" + category.name + ", " + |
445 ".timeline-category-" + category.name + " .timeline-tree-icon" | 455 ".timeline-category-" + category.name + " .timeline-tree-icon" |
446 | 456 |
447 return selector + " { background-image: linear-gradient(" + | 457 return selector + " { background-image: linear-gradient(" + |
(...skipping 546 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
994 for (var i = 0; i < stackTrace.length; ++i) { | 1004 for (var i = 0; i < stackTrace.length; ++i) { |
995 var stackFrame = stackTrace[i]; | 1005 var stackFrame = stackTrace[i]; |
996 var row = stackTraceElement.createChild("div"); | 1006 var row = stackTraceElement.createChild("div"); |
997 row.createTextChild(stackFrame.functionName || WebInspector.UIString
("(anonymous function)")); | 1007 row.createTextChild(stackFrame.functionName || WebInspector.UIString
("(anonymous function)")); |
998 row.createTextChild(" @ "); | 1008 row.createTextChild(" @ "); |
999 var urlElement = this._linkifier.linkifyLocation(this._target, stack
Frame.url, stackFrame.lineNumber - 1); | 1009 var urlElement = this._linkifier.linkifyLocation(this._target, stack
Frame.url, stackFrame.lineNumber - 1); |
1000 row.appendChild(urlElement); | 1010 row.appendChild(urlElement); |
1001 } | 1011 } |
1002 } | 1012 } |
1003 } | 1013 } |
OLD | NEW |