| 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 |