Changeset 147308 in webkit


Ignore:
Timestamp:
Apr 1, 2013 1:13:15 AM (11 years ago)
Author:
loislo@chromium.org
Message:

Web Inspector: Flame Chart. Extract item to coordinates conversion into a separate function.
​https://bugs.webkit.org/show_bug.cgi?id=113682

Reviewed by Yury Semikhatsky.

The calculation was extracted into entryToAnchorBox.

Drive by fixes: unnecessary members were removed.

  • inspector/front-end/FlameChart.js:

(WebInspector.FlameChart):
(WebInspector.FlameChart.Entry):
(WebInspector.FlameChart.prototype._calculateTimelineData):
(WebInspector.FlameChart.prototype._calculateTimelineDataForSamples):
(WebInspector.FlameChart.prototype._getPopoverAnchor):
(WebInspector.FlameChart.prototype._entryToAnchorBox):
(WebInspector.FlameChart.prototype.draw):

Location:
trunk/Source/WebCore
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r147303 r147308  
     12013-04-01  Ilya Tikhonovsky  <loislo@chromium.org>
     2
     3        Web Inspector: Flame Chart. Extract item to coordinates conversion into a separate function.
     4        https://bugs.webkit.org/show_bug.cgi?id=113682
     5
     6        Reviewed by Yury Semikhatsky.
     7
     8        The calculation was extracted into entryToAnchorBox.
     9
     10        Drive by fixes: unnecessary members were removed.
     11
     12        * inspector/front-end/FlameChart.js:
     13        (WebInspector.FlameChart):
     14        (WebInspector.FlameChart.Entry):
     15        (WebInspector.FlameChart.prototype._calculateTimelineData):
     16        (WebInspector.FlameChart.prototype._calculateTimelineDataForSamples):
     17        (WebInspector.FlameChart.prototype._getPopoverAnchor):
     18        (WebInspector.FlameChart.prototype._entryToAnchorBox):
     19        (WebInspector.FlameChart.prototype.draw):
     20
    1212013-03-31  Zalan Bujtas  <zalan@apple.com>
    222

  • trunk/Source/WebCore/inspector/front-end/FlameChart.js

    r147224 r147308  
    6666    this._popoverHelper = new WebInspector.PopoverHelper(this._chartContainer, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
    6767    this._popoverHelper.setTimeout(250);
    68     this._anchorBox = new AnchorBox(0, 0, 0, 0);
    6968    this._linkifier = new WebInspector.Linkifier();
    7069    this._highlightedNodeIndex = -1;
    … …  
    7574
    7675/**
    77  * @constructor
     76 * @constructor            entries.push(new WebInspector.FlameChart.Entry(colorPair, level, node.totalTime, offset, node));
     77/
    7878 * @implements {WebInspector.TimelineGrid.Calculator}
    7979 */
    … …  
    212212}
    213213
     214/**
     215 * @constructor
     216 * @param {!Object} colorPair
     217 * @param {!number} depth
     218 * @param {!number} duration
     219 * @param {!number} startTime
     220 * @param {Object} node
     221 */
     222WebInspector.FlameChart.Entry = function(colorPair, depth, duration, startTime, node)
     223{
     224    this.colorPair = colorPair;
     225    this.depth = depth;
     226    this.duration = duration;
     227    this.startTime = startTime;
     228    this.node = node;
     229}
    214230
    215231WebInspector.FlameChart.prototype = {
    … …  
    265281            return null;
    266282
    267         var functionColorPairs = { };
    268         var currentColorIndex = 0;
    269 
    270283        var index = 0;
    271284        var entries = [];
    … …  
    291304            var colorPair = colorGenerator._colorPairForID(node.functionName + ":" + node.url + ":" + node.lineNumber);
    292305
    293             entries.push({
    294                 colorPair: colorPair,
    295                 depth: level,
    296                 duration: node.totalTime,
    297                 startTime: offset,
    298                 node: node
    299             });
     306            entries.push(new WebInspector.FlameChart.Entry(colorPair, level, node.totalTime, offset, node));
    300307
    301308            ++index;
    … …  
    333340        var idToNode = this._cpuProfileView._idToNode;
    334341        var samplesCount = samples.length;
    335         var functionColorPairs = { };
    336         var currentColorIndex = 0;
    337342
    338343        var index = 0;
    339         var entries = [];
     344        var entries = /** @type {Array.<!WebInspector.FlameChart.Entry>} */ ([]);
    340345
    341346        var openIntervals = [];
    … …  
    367372                var colorPair = colorGenerator._colorPairForID(node.functionName + ":" + node.url + ":" + node.lineNumber);
    368373
    369                 entries.push({
    370                     colorPair: colorPair,
    371                     depth: depth,
    372                     duration: 1,
    373                     startTime: sampleIndex,
    374                     node: node
    375                 });
    376 
     374                entries.push(new WebInspector.FlameChart.Entry(colorPair, depth, 1, sampleIndex, node));
    377375                openIntervals.push({node: node, index: index});
    378 
    379376                ++index;
    380377
    … …  
    405402            return null;
    406403
    407         var timelineEntries = this._timelineData.entries;
    408 
    409         var anchorLeft = Math.floor(timelineEntries[nodeIndex].startTime * this._timeToPixel - this._pixelWindowLeft + this._paddingLeft);
    410         var anchorTop = Math.floor(this._canvas.height - (timelineEntries[nodeIndex].depth + 1) * this._barHeight);
    411 
    412         var anchorWidth = Math.floor(timelineEntries[nodeIndex].duration * this._timeToPixel);
    413         if (anchorLeft < 0) {
    414             anchorWidth += anchorLeft;
    415             anchorLeft = 0;
    416         }
    417 
    418         anchorLeft = Number.constrain(anchorLeft, 0, this._canvas.width);
    419         anchorWidth = Number.constrain(anchorWidth, 0, this._canvas.width - anchorLeft);
    420 
    421         var canvasOffsetLeft = event.pageX - event.offsetX;
    422         var canvasOffsetTop = event.pageY - event.offsetY;
    423         return new AnchorBox(anchorLeft + canvasOffsetLeft, anchorTop + canvasOffsetTop, anchorWidth, this._barHeight);
     404        var anchorBox = new AnchorBox();
     405        this._entryToAnchorBox(this._timelineData.entries[nodeIndex], anchorBox);
     406        anchorBox.x += event.pageX - event.offsetX;
     407        anchorBox.y += event.pageY - event.offsetY;
     408
     409        return anchorBox;
    424410    },
    425411
    … …  
    534520
    535521    /**
     522     * @param {WebInspector.FlameChart.Entry} entry
     523     * @param {AnchorBox} anchorBox
     524     */
     525    _entryToAnchorBox: function(entry, anchorBox)
     526    {
     527        anchorBox.x = Math.floor(entry.startTime * this._timeToPixel) - this._pixelWindowLeft + this._paddingLeft;
     528        anchorBox.y = this._canvas.height - (entry.depth + 1) * this._barHeight;
     529        anchorBox.width = Math.floor(entry.duration * this._timeToPixel);
     530        anchorBox.height = this._barHeight;
     531        if (anchorBox.x < 0) {
     532            anchorBox.width += anchorBox.x;
     533            anchorBox.x = 0;
     534        }
     535        anchorBox.width = Number.constrain(anchorBox.width, 0, this._canvas.width - anchorBox.x);
     536    },
     537
     538    /**
    536539     * @param {!number} height
    537540     * @param {!number} width
    … …  
    554557        this._dotsWidth = context.measureText("\u2026").width;
    555558
     559        var anchorBox = new AnchorBox();
    556560        for (var i = 0; i < timelineEntries.length; ++i) {
    557             var startTime = timelineEntries[i].startTime;
     561            var entry = timelineEntries[i];
     562            var startTime = entry.startTime;
    558563            if (startTime > this._timeWindowRight)
    559564                break;
    560             if ((startTime + timelineEntries[i].duration) < this._timeWindowLeft)
     565            if ((startTime + entry.duration) < this._timeWindowLeft)
    561566                continue;
    562             var x = Math.floor(startTime * this._timeToPixel) - this._pixelWindowLeft;
    563             var y = height - (timelineEntries[i].depth + 1) * barHeight;
    564             var barWidth = Math.floor(timelineEntries[i].duration * this._timeToPixel);
    565             if (barWidth < this._minWidth)
     567            this._entryToAnchorBox(entry, anchorBox);
     568            if (anchorBox.width < this._minWidth)
    566569                continue;
    567570
    568             var colorPair = timelineEntries[i].colorPair;
     571            var colorPair = entry.colorPair;
    569572            var color;
    570573            if (this._highlightedNodeIndex === i)
    … …  
    574577
    575578            context.beginPath();
    576             context.rect(x + paddingLeft, y, barWidth - 1, barHeight - 1);
     579            context.rect(anchorBox.x, anchorBox.y, anchorBox.width - 1, anchorBox.height - 1);
    577580            context.fillStyle = color;
    578581            context.fill();
    579582
    580             var xText = Math.max(0, x + paddingLeft);
    581             var widthText = barWidth - textPaddingLeft + x - xText;
    582             var title = this._prepareTitle(context, timelineData.entries[i].node.functionName, widthText);
     583            var xText = Math.max(0, anchorBox.x);
     584            var widthText = anchorBox.width - textPaddingLeft + anchorBox.x - xText;
     585            var title = this._prepareTitle(context, entry.node.functionName, widthText);
    583586            if (title) {
    584587                context.fillStyle = "#333";
    585                 context.fillText(title, xText + textPaddingLeft, y - 1);
     588                context.fillText(title, xText + textPaddingLeft, anchorBox.y - 1);
    586589            }
    587590        }
Note: See TracChangeset for help on using the changeset viewer.