Changeset 58242 in webkit


Ignore:
Timestamp:
Apr 26, 2010 2:35:00 AM (14 years ago)
Author:
loislo@chromium.org
Message:

2010-04-23 Ilya Tikhonovsky <​loislo@chromium.org>

Reviewed by Pavel Feldman.

WebInspector: Aggregated stats of time spent in children records should be visible
in the popup panel of parent record. Crash in pushGCEventRecord also was fixed.
​https://bugs.webkit.org/show_bug.cgi?id=37820

  • English.lproj/localizedStrings.js:
  • inspector/InspectorTimelineAgent.cpp: (WebCore::InspectorTimelineAgent::pushGCEventRecords):
  • inspector/front-end/TimelinePanel.js: (WebInspector.TimelinePanel.prototype._innerAddRecordToTimeline): (WebInspector.TimelinePanel.prototype._createRootRecord): (WebInspector.TimelinePanel.prototype._showPopover): (WebInspector.TimelineCalculator.prototype.computeBarGraphPercentages): (WebInspector.TimelineCalculator.prototype.computeBarGraphWindowPosition): (WebInspector.TimelineRecordGraphRow): (WebInspector.TimelineRecordGraphRow.prototype.update): (WebInspector.TimelinePanel.FormattedRecord): (WebInspector.TimelinePanel.FormattedRecord.prototype._generateAggregatedInfo): (WebInspector.TimelinePanel.FormattedRecord.prototype._generatePopupContent): (WebInspector.TimelinePanel.FormattedRecord.prototype._getRecordDetails): (WebInspector.TimelinePanel.FormattedRecord.prototype._calculateAggregatedStats):
  • inspector/front-end/inspector.css: (.timeline-graph-bar.with-children): (.timeline-graph-bar.cpu): (.timeline-aggregated-category): (.timeline-loading): (.timeline-scripting): (.timeline-rendering): (.popover .timeline-aggregated-category.timeline-loading): (.timeline-details-title):
Location:
trunk/WebCore
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/WebCore/ChangeLog

    r58236 r58242  
     12010-04-23  Ilya Tikhonovsky  <loislo@chromium.org>
     2
     3        Reviewed by Pavel Feldman.
     4
     5        WebInspector: Aggregated stats of time spent in children records should be visible
     6        in the popup panel of parent record. Crash in pushGCEventRecord also was fixed.
     7        https://bugs.webkit.org/show_bug.cgi?id=37820
     8
     9        * English.lproj/localizedStrings.js:
     10        * inspector/InspectorTimelineAgent.cpp:
     11        (WebCore::InspectorTimelineAgent::pushGCEventRecords):
     12        * inspector/front-end/TimelinePanel.js:
     13        (WebInspector.TimelinePanel.prototype._innerAddRecordToTimeline):
     14        (WebInspector.TimelinePanel.prototype._createRootRecord):
     15        (WebInspector.TimelinePanel.prototype._showPopover):
     16        (WebInspector.TimelineCalculator.prototype.computeBarGraphPercentages):
     17        (WebInspector.TimelineCalculator.prototype.computeBarGraphWindowPosition):
     18        (WebInspector.TimelineRecordGraphRow):
     19        (WebInspector.TimelineRecordGraphRow.prototype.update):
     20        (WebInspector.TimelinePanel.FormattedRecord):
     21        (WebInspector.TimelinePanel.FormattedRecord.prototype._generateAggregatedInfo):
     22        (WebInspector.TimelinePanel.FormattedRecord.prototype._generatePopupContent):
     23        (WebInspector.TimelinePanel.FormattedRecord.prototype._getRecordDetails):
     24        (WebInspector.TimelinePanel.FormattedRecord.prototype._calculateAggregatedStats):
     25        * inspector/front-end/inspector.css:
     26        (.timeline-graph-bar.with-children):
     27        (.timeline-graph-bar.cpu):
     28        (.timeline-aggregated-category):
     29        (.timeline-loading):
     30        (.timeline-scripting):
     31        (.timeline-rendering):
     32        (.popover .timeline-aggregated-category.timeline-loading):
     33        (.timeline-details-title):
     34
    1352010-04-25  Kent Tamura  <tkent@chromium.org>
    236

  • trunk/WebCore/inspector/InspectorTimelineAgent.cpp

    r57387 r58242  
    5757void InspectorTimelineAgent::pushGCEventRecords()
    5858{
    59     for (GCEvents::iterator i = m_gcEvents.begin(); i != m_gcEvents.end(); ++i) {
     59    if (!m_gcEvents.size())
     60        return;
     61
     62    GCEvents events = m_gcEvents;
     63    m_gcEvents.clear();
     64    for (GCEvents::iterator i = events.begin(); i != events.end(); ++i) {
    6065        ScriptObject record = TimelineRecordFactory::createGenericRecord(m_frontend, i->startTime);
    6166        record.set("data", TimelineRecordFactory::createGCEventData(m_frontend, i->collectedBytes));
    … …  
    6368        addRecordToTimeline(record, GCEventTimelineRecordType);
    6469    }
    65     m_gcEvents.clear();
    6670}
    6771

  • trunk/WebCore/inspector/front-end/TimelinePanel.js

    r58087 r58242  
    282282    {
    283283        var connectedToOldRecord = false;
    284         if (parentRecord === this._rootRecord) {
     284        var recordTypes = WebInspector.TimelineAgent.RecordType;
     285        if (record.type === recordTypes.MarkDOMContentEventType || record.type === recordTypes.MarkLoadEventType)
     286            parentRecord = null; // No bar entry for load events.
     287        else if (parentRecord === this._rootRecord) {
    285288            var newParentRecord = this._findParentRecord(record);
    286289            if (newParentRecord) {
    … …  
    289292            }
    290293        }
    291         var recordTypes = WebInspector.TimelineAgent.RecordType;
    292294
    293295        var formattedRecord = new WebInspector.TimelinePanel.FormattedRecord(record, parentRecord, this._recordStyles, this._sendRequestRecords, this._timerRecords);
    294296
    295297        if (record.type === recordTypes.MarkDOMContentEventType || record.type === recordTypes.MarkLoadEventType) {
    296             // No bar entry for load events.
    297298            this._markTimelineRecords.push(formattedRecord);
    298299            return;
    … …  
    300301
    301302        ++this._rootRecord._allRecordsCount;
    302 
    303         if (parentRecord === this._rootRecord)
    304             formattedRecord.collapsed = true;
     303        formattedRecord.collapsed = (parentRecord === this._rootRecord);
    305304
    306305        for (var i = 0; record.children && i < record.children.length; ++i)
    307306            this._innerAddRecordToTimeline(record.children[i], formattedRecord);
    308307
     308        formattedRecord._calculateAggregatedStats(this.categories);
     309
    309310        if (connectedToOldRecord) {
    310311            var record = formattedRecord;
    311             while (record.parent && record.parent._lastChildEndTime < record._lastChildEndTime) {
    312                 record.parent._lastChildEndTime = record._lastChildEndTime;
    313                 record = record.parent;
    314             }
    315         }
     312            do {
     313                var parent = record.parent;
     314                parent._cpuTime += formattedRecord._cpuTime;
     315                if (parent._lastChildEndTime < record._lastChildEndTime)
     316                    parent._lastChildEndTime = record._lastChildEndTime;
     317                for (var category in formattedRecord._aggregatedStats)
     318                    parent._aggregatedStats[category] += formattedRecord._aggregatedStats[category];
     319                record = parent;
     320            } while (record.parent);
     321        } else
     322            if (parentRecord !== this._rootRecord)
     323                parentRecord._selfTime -= formattedRecord.endTime - formattedRecord.startTime;
    316324
    317325        // Keep bar entry for mark timeline since nesting might be interesting to the user.
    … …  
    346354        rootRecord._visibleRecordsCount = 0;
    347355        rootRecord._allRecordsCount = 0;
     356        rootRecord._aggregatedStats = {};
    348357        return rootRecord;
    349358    },
    … …  
    553562    {
    554563        var record = anchor.row._record;
    555         var popover = new WebInspector.Popover(record._generatePopupContent(this._calculator));
     564        var popover = new WebInspector.Popover(record._generatePopupContent(this._calculator, this.categories));
    556565        popover.show(anchor);
    557566        return popover;
    … …  
    585594    {
    586595        var start = (record.startTime - this.minimumBoundary) / this.boundarySpan * 100;
    587         var end = (record.endTime - this.minimumBoundary) / this.boundarySpan * 100;
     596        var end = (record.startTime + record._selfTime - this.minimumBoundary) / this.boundarySpan * 100;
    588597        var endWithChildren = (record._lastChildEndTime - this.minimumBoundary) / this.boundarySpan * 100;
    589         return {start: start, end: end, endWithChildren: endWithChildren};
     598        var cpuWidth = record._cpuTime / this.boundarySpan * 100;
     599        return {start: start, end: end, endWithChildren: endWithChildren, cpuWidth: cpuWidth};
    590600    },
    591601
    … …  
    599609        var width = (percentages.end - percentages.start) / 100 * workingArea + minWidth;
    600610        var widthWithChildren =  (percentages.endWithChildren - percentages.start) / 100 * workingArea;
     611        var cpuWidth = percentages.cpuWidth / 100 * workingArea + minWidth;
    601612        if (percentages.endWithChildren > percentages.end)
    602613            widthWithChildren += borderWidth + minWidth;
    603         return {left: left, width: width, widthWithChildren: widthWithChildren};
     614        return {left: left, width: width, widthWithChildren: widthWithChildren, cpuWidth: cpuWidth};
    604615    },
    605616
    … …  
    706717    this._barAreaElement.appendChild(this._barWithChildrenElement);
    707718
     719    this._barCpuElement = document.createElement("div");
     720    this._barCpuElement.className = "timeline-graph-bar cpu"
     721    this._barCpuElement.row = this;
     722    this._barAreaElement.appendChild(this._barCpuElement);
     723
    708724    this._barElement = document.createElement("div");
    709725    this._barElement.className = "timeline-graph-bar";
    … …  
    735751        this._barElement.style.left = barPosition.left + expandOffset + "px";
    736752        this._barElement.style.width =  barPosition.width + "px";
     753        this._barCpuElement.style.left = barPosition.left + expandOffset + "px";
     754        this._barCpuElement.style.width = barPosition.cpuWidth + "px";
    737755
    738756        if (record._visibleChildrenCount || record._invisibleChildrenCount) {
    … …  
    774792
    775793    this.parent = parentRecord;
    776     parentRecord.children.push(this);
     794    if (parentRecord)
     795        parentRecord.children.push(this);
    777796    this.category = style.category;
    778797    this.title = style.title;
    … …  
    782801    this.type = record.type;
    783802    this.endTime = (typeof record.endTime !== "undefined") ? record.endTime / 1000 : this.startTime;
     803    this._selfTime = this.endTime - this.startTime;
    784804    this._lastChildEndTime = this.endTime;
    785805    this.originalRecordForTests = record;
    … …  
    866886    },
    867887
    868     _generatePopupContent: function(calculator)
     888    _generateAggregatedInfo: function()
     889    {
     890        var cell = document.createElement("span");
     891        cell.className = "timeline-aggregated-info";
     892        for (var index in this._aggregatedStats) {
     893            var label = document.createElement("div");
     894            label.className = "timeline-aggregated-category timeline-" + index;
     895            cell.appendChild(label);
     896            var text = document.createElement("span");
     897            text.textContent = Number.secondsToString(this._aggregatedStats[index] + 0.0001);
     898            cell.appendChild(text);
     899        }
     900        return cell;
     901    },
     902
     903    _generatePopupContent: function(calculator, categories)
    869904    {
    870905        var recordContentTable = document.createElement("table");
    … …  
    874909        titleRow.appendChild(titleCell);
    875910        recordContentTable.appendChild(titleRow);
    876         var text = Number.secondsToString(this.endTime - this.startTime) + " (@" +
     911
     912        if (this._children && this._children.length) {
     913            recordContentTable.appendChild(this._createRow(WebInspector.UIString("Self Time"), Number.secondsToString(this._selfTime + 0.0001)));
     914            recordContentTable.appendChild(this._createLinkRow(WebInspector.UIString("Aggregated Time"), this._generateAggregatedInfo()));
     915        }
     916        var text = Number.secondsToString(this._lastChildEndTime - this.startTime) + " (@" +
    877917        calculator.formatValue(this.startTime - calculator.minimumBoundary) + ")";
    878918        recordContentTable.appendChild(this._createRow(WebInspector.UIString("Duration"), text));
    … …  
    925965            recordContentTable.appendChild(this._createLinkRow(WebInspector.UIString("Caller"), link));
    926966        }
    927         if (this.usedHeapSize) {
    928             recordContentTable.appendChild(this._createRow(WebInspector.UIString("Used Heap Size"), Number.bytesToString(this.usedHeapSize)));
    929             recordContentTable.appendChild(this._createRow(WebInspector.UIString("Total Heap Size"), Number.bytesToString(this.totalHeapSize)));
    930         }
     967        if (this.usedHeapSize)
     968            recordContentTable.appendChild(this._createRow(WebInspector.UIString("Used Heap Size"), WebInspector.UIString("%s of %s", Number.bytesToString(this.usedHeapSize), Number.bytesToString(this.totalHeapSize))));
     969
    931970        return recordContentTable;
    932971    },
    … …  
    960999                return "";
    9611000        }
     1001    },
     1002
     1003    _calculateAggregatedStats: function(categories)
     1004    {
     1005        this._aggregatedStats = {};
     1006        for (var category in categories)
     1007            this._aggregatedStats[category] = 0;
     1008        this._cpuTime = this._selfTime;
     1009
     1010        if (this._children) {
     1011            for (var index = this._children.length; index; --index) {
     1012                var child = this._children[index - 1];
     1013                this._aggregatedStats[child.category.name] += child._selfTime;
     1014                for (var category in categories)
     1015                    this._aggregatedStats[category] += child._aggregatedStats[category];
     1016            }
     1017            for (var category in this._aggregatedStats)
     1018                this._cpuTime += this._aggregatedStats[category];
     1019        }
    9621020    }
    9631021}
    964 

  • trunk/WebCore/inspector/front-end/inspector.css

    r57280 r58242  
    36063606
    36073607.timeline-graph-bar.with-children {
    3608     opacity: 0.3;
     3608    opacity: 0.2;
     3609}
     3610
     3611.timeline-graph-bar.cpu {
     3612    opacity: 0.6;
    36093613}
    36103614
    … …  
    36233627.timeline-category-rendering .timeline-graph-bar {
    36243628    -webkit-border-image: url(Images/timelineBarPurple.png) 4 4 5 4;
     3629}
     3630
     3631.timeline-aggregated-category {
     3632    display: inline-block;
     3633    height: 11px;
     3634    margin-right: 2px;
     3635    margin-left: 6px;
     3636    position: relative;
     3637    top: 2px;
     3638    width: 10px;
     3639}
     3640
     3641.timeline-loading {
     3642    -webkit-border-image: url(Images/timelineBarBlue.png) 4 4 5 4;
     3643}
     3644
     3645.timeline-scripting {
     3646    -webkit-border-image: url(Images/timelineBarOrange.png) 4 4 5 4;
     3647}
     3648
     3649.timeline-rendering {
     3650    -webkit-border-image: url(Images/timelineBarPurple.png) 4 4 5 4;
     3651}
     3652
     3653.popover .timeline-aggregated-category.timeline-loading {
     3654    margin-left: 0px;
    36253655}
    36263656
    … …  
    36523682
    36533683.timeline-details-title {
     3684    border-bottom: 1px solid #B8B8B8;
     3685    font-size: 11px;
    36543686    font-weight: bold;
     3687    padding-bottom: 5px;
     3688    padding-top: 0px;
    36553689    white-space: nowrap;
    36563690}
Note: See TracChangeset for help on using the changeset viewer.