Changeset 147220 in webkit


Ignore:
Timestamp:
Mar 29, 2013 8:20:38 AM (11 years ago)
Author:
caseq@chromium.org
Message:

Web Inspector: extract common base for 3 timeline overview controls (Events/Frames/Memory)
​https://bugs.webkit.org/show_bug.cgi?id=113572

Reviewed by Yury Semikhatsky.

Refactoring, covered by existing tests.

  • introduce TimelineOverviewBase as a common base for 3 overview controls;
  • make every overview control a view.

This does not yet take advantage of common base (subject of the next patch).

  • inspector/front-end/OverviewGrid.js:

(WebInspector.OverviewGrid.prototype.gridElement):
(WebInspector.OverviewGrid.prototype.itemsGraphsElement):

  • inspector/front-end/TimelineOverviewPane.js:

(WebInspector.TimelineOverviewPane):
(WebInspector.TimelineOverviewPane.prototype.setMode):
(WebInspector.TimelineOverviewPane.prototype._update):
(WebInspector.TimelineOverviewBase):
(WebInspector.TimelineOverviewBase.prototype.update):
(WebInspector.TimelineMemoryOverview):
(WebInspector.TimelineEventOverview):
(WebInspector.TimelineEventOverview.prototype._renderBar):
(WebInspector.TimelineFrameOverview):
(WebInspector.TimelineFrameOverview.prototype.update):
(WebInspector.TimelineFrameOverview.prototype._renderBars):
(WebInspector.TimelineFrameOverview.prototype._drawFPSMarks):
(WebInspector.TimelineFrameOverview.prototype._renderBar):

Location:
trunk/Source/WebCore
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r147218 r147220  
     12013-03-29  Andrey Kosyakov  <caseq@chromium.org>
     2
     3        Web Inspector: extract common base for 3 timeline overview controls (Events/Frames/Memory)
     4        https://bugs.webkit.org/show_bug.cgi?id=113572
     5
     6        Reviewed by Yury Semikhatsky.
     7
     8        Refactoring, covered by existing tests.
     9
     10        - introduce TimelineOverviewBase as a common base for 3 overview controls;
     11        - make every overview control a view.
     12
     13        This does not yet take advantage of common base (subject of the next patch).
     14
     15        * inspector/front-end/OverviewGrid.js:
     16        (WebInspector.OverviewGrid.prototype.gridElement):
     17        (WebInspector.OverviewGrid.prototype.itemsGraphsElement):
     18        * inspector/front-end/TimelineOverviewPane.js:
     19        (WebInspector.TimelineOverviewPane):
     20        (WebInspector.TimelineOverviewPane.prototype.setMode):
     21        (WebInspector.TimelineOverviewPane.prototype._update):
     22        (WebInspector.TimelineOverviewBase):
     23        (WebInspector.TimelineOverviewBase.prototype.update):
     24        (WebInspector.TimelineMemoryOverview):
     25        (WebInspector.TimelineEventOverview):
     26        (WebInspector.TimelineEventOverview.prototype._renderBar):
     27        (WebInspector.TimelineFrameOverview):
     28        (WebInspector.TimelineFrameOverview.prototype.update):
     29        (WebInspector.TimelineFrameOverview.prototype._renderBars):
     30        (WebInspector.TimelineFrameOverview.prototype._drawFPSMarks):
     31        (WebInspector.TimelineFrameOverview.prototype._renderBar):
     32
    1332013-03-29  Peter Rybin  <prybin@chromium.org>
    234

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

    r146893 r147220  
    5050
    5151WebInspector.OverviewGrid.prototype = {
     52    gridElement: function()
     53    {
     54        return this._grid.element;
     55    },
     56
    5257    itemsGraphsElement: function()
    5358    {
    5459        return this._grid.itemsGraphsElement;
    55     },
    56 
    57     /**
    58      * @param {!Node} child
    59      */
    60     insertBeforeItemsGraphsElement: function(child)
    61     {
    62         this._grid.element.insertBefore(child, this._grid.itemsGraphsElement);
    6360    },
    6461

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

    r147109 r147220  
    7979
    8080    this._memoryOverview = new WebInspector.TimelineMemoryOverview(this._model);
    81     this._memoryOverview.element.id = "timeline-overview-memory";
    82     this._overviewGrid.insertBeforeItemsGraphsElement(this._memoryOverview.element);
    8381
    8482    var separatorElement = document.createElement("div");
    … …  
    8785
    8886    this._eventOverview = new WebInspector.TimelineEventOverview(this._model);
    89     this._overviewGrid.itemsGraphsElement().appendChild(this._eventOverview.element);
     87    this._eventOverview.show(this._overviewGrid.itemsGraphsElement());
    9088 
    9189    var categories = WebInspector.TimelinePresentationModel.categories();
    … …  
    132130            case WebInspector.TimelineOverviewPane.Mode.Events:
    133131            case WebInspector.TimelineOverviewPane.Mode.Frames:
    134                 this._memoryOverview.hide();
     132                this._memoryOverview.detach();
    135133                this._overviewGrid.showItemsGraphsElement();
    136134                break;
    137135            case WebInspector.TimelineOverviewPane.Mode.Memory:
    138136                this._overviewGrid.hideItemsGraphsElement();
    139                 this._memoryOverview.show();
     137                this._memoryOverview.show(this._overviewGrid.gridElement(), this._overviewGrid.itemsGraphsElement());
    140138        }
    141139        this._overviewItems[this._currentMode].revealAndSelect(false);
    … …  
    173171        this._overviewCalculator.setDisplayWindow(0, this._overviewGrid.clientWidth());
    174172
    175         if (this._memoryOverview.visible)
     173        if (this._memoryOverview.isShowing())
    176174            this._memoryOverview.update();
    177175        else if (this._frameOverview)
    … …  
    415413/**
    416414 * @constructor
     415 * @extends {WebInspector.View}
     416 * @param {WebInspector.TimelineModel} model
     417 */
     418WebInspector.TimelineOverviewBase = function(model)
     419{
     420    WebInspector.View.call(this);
     421    this._model = model;
     422    this._canvas = this.element.createChild("canvas", "fill");
     423}
     424
     425WebInspector.TimelineOverviewBase.prototype = {
     426    update: function() {},
     427
     428    __proto__: WebInspector.View.prototype
     429}
     430
     431/**
     432 * @constructor
     433 * @extends {WebInspector.TimelineOverviewBase}
    417434 * @param {WebInspector.TimelineModel} model
    418435 */
    419436WebInspector.TimelineMemoryOverview = function(model)
    420437{
    421     this._canvas = document.createElement("canvas");
    422     this._model = model;
    423 
    424     this._maxHeapSizeLabel = document.createElement("div");
    425     this._maxHeapSizeLabel.addStyleClass("max");
    426     this._maxHeapSizeLabel.addStyleClass("memory-graph-label");
    427     this._minHeapSizeLabel = document.createElement("div");
    428     this._minHeapSizeLabel.addStyleClass("min");
    429     this._minHeapSizeLabel.addStyleClass("memory-graph-label");
    430 
    431     this._element = document.createElement("div");
    432     this._element.addStyleClass("hidden");
    433     this._element.appendChild(this._canvas);
    434     this._element.appendChild(this._maxHeapSizeLabel);
    435     this._element.appendChild(this._minHeapSizeLabel);
     438    WebInspector.TimelineOverviewBase.call(this, model);
     439    this.element.id = "timeline-overview-memory";
     440    this.element.classList.add("fill");
     441
     442    this._maxHeapSizeLabel = this.element.createChild("div", "max memory-graph-label");
     443    this._minHeapSizeLabel = this.element.createChild("div", "min memory-graph-label");
    436444}
    437445
    438446WebInspector.TimelineMemoryOverview.prototype = {
    439     /**
    440      * @return {Node}
    441      */
    442     get element()
    443     {
    444         return this._element;
    445     },
    446 
    447     /**
    448      * @return {boolean}
    449      */
    450     get visible()
    451     {
    452         return !this.element.hasStyleClass("hidden");
    453     },
    454 
    455     show: function()
    456     {
    457         this.element.removeStyleClass("hidden");
    458     },
    459 
    460     hide: function()
    461     {
    462         this.element.addStyleClass("hidden");
    463     },
    464 
    465447    update: function()
    466448    {
    … …  
    540522        ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);
    541523    },
     524
     525    __proto__: WebInspector.TimelineOverviewBase.prototype
    542526}
    543527
    544528/**
    545529 * @constructor
     530 * @extends {WebInspector.TimelineOverviewBase}
    546531 * @param {WebInspector.TimelineModel} model
    547532 */
    548533WebInspector.TimelineEventOverview = function(model)
    549534{
    550     this._model = model;
    551     this.element = document.createElement("canvas");
    552     this._context = this.element.getContext("2d");
     535    WebInspector.TimelineOverviewBase.call(this, model);
     536
     537    this._context = this._canvas.getContext("2d");
    553538    this._minimumRecordDuration = 0;
    554539
    … …  
    579564    {
    580565        // Use real world, 1:1 coordinates in canvas. This will also take care of clearing it.
    581         this.element.width = this.element.parentElement.clientWidth;
    582         this.element.height = WebInspector.TimelineEventOverview._canvasHeight;
     566        this._canvas.width = this.element.parentElement.clientWidth;
     567        this._canvas.height = WebInspector.TimelineEventOverview._canvasHeight;
    583568
    584569        var timeOffset = this._model.minimumRecordTime();
    585570        var timeSpan = this._model.maximumRecordTime() - timeOffset;
    586         var scale = this.element.width / timeSpan;
     571        var scale = this._canvas.width / timeSpan;
    587572
    588573        var lastBarByGroup = [];
    … …  
    590575        this._context.fillStyle = "rgba(0, 0, 0, 0.05)";
    591576        for (var i = 1; i < WebInspector.TimelineEventOverview._numberOfStrips; i += 2)
    592             this._context.fillRect(0.5, i * WebInspector.TimelineEventOverview._stripHeight + 0.5, this.element.width, WebInspector.TimelineEventOverview._stripHeight);
     577            this._context.fillRect(0.5, i * WebInspector.TimelineEventOverview._stripHeight + 0.5, this._canvas.width, WebInspector.TimelineEventOverview._stripHeight);
    593578
    594579        function appendRecord(record)
    … …  
    644629        this._context.strokeRect(0, 0, width, WebInspector.TimelineEventOverview._innerStripHeight);
    645630        this._context.restore();
    646     }
     631    },
     632
     633    __proto__: WebInspector.TimelineOverviewBase.prototype
    647634}
    648635
    649636/**
    650637 * @constructor
    651  * @extends {WebInspector.View}
     638 * @extends {WebInspector.TimelineOverviewBase}
    652639 * @param {WebInspector.TimelineModel} model
    653640 */
    654641WebInspector.TimelineFrameOverview = function(model)
    655642{
    656     WebInspector.View.call(this);
    657     this.element = document.createElement("canvas");
    658     this.element.className = "timeline-frame-overview-bars fill";
    659     this._model = model;
     643    WebInspector.TimelineOverviewBase.call(this, model);
     644    this._canvas.classList.add("timeline-frame-overview-bars");
    660645    this.reset();
    661646
    … …  
    667652    this._actualOuterBarWidth = this._maxInnerBarWidth + this._actualPadding;
    668653
    669     this._context = this.element.getContext("2d");
     654    this._context = this._canvas.getContext("2d");
    670655
    671656    this._fillStyles = {};
    … …  
    699684            fullBarLength = Math.min(this._medianFrameLength * 2, this._maxFrameLength);
    700685
    701         var scale = (this.element.clientHeight - paddingTop) / fullBarLength;
     686        var scale = (this._canvas.clientHeight - paddingTop) / fullBarLength;
    702687        this._renderBars(visibleFrames, scale);
    703688    },
    … …  
    763748    {
    764749        // Use real world, 1:1 coordinates in canvas. This will also take care of clearing it.
    765         this.element.width = this.element.clientWidth;
    766         this.element.height = this.element.clientHeight;
     750        this._canvas.width = this._canvas.clientWidth;
     751        this._canvas.height = this._canvas.clientHeight;
    767752
    768753        const maxPadding = 5;
    769         this._actualOuterBarWidth = Math.min((this.element.width - 2 * this._outerPadding) / frames.length, this._maxInnerBarWidth + maxPadding);
     754        this._actualOuterBarWidth = Math.min((this._canvas.width - 2 * this._outerPadding) / frames.length, this._maxInnerBarWidth + maxPadding);
    770755        this._actualPadding = Math.min(Math.floor(this._actualOuterBarWidth / 3), maxPadding);
    771756
    … …  
    805790            var fps = fpsMarks[i];
    806791            // Draw lines one pixel above they need to be, so 60pfs line does not cross most of the frames tops.
    807             var y = this.element.height - Math.floor(1.0 / fps * scale) - 0.5;
     792            var y = this._canvas.height - Math.floor(1.0 / fps * scale) - 0.5;
    808793            var label = fps + " FPS ";
    809794            var labelWidth = this._context.measureText(label).width;
    810             var labelX = this.element.width;
     795            var labelX = this._canvas.width;
    811796            var labelY;
    812797
    813798            if (labelTopMargin < y - lineHeight)
    814799                labelY = y - lineHeight;
    815             else if (y + lineHeight < this.element.height)
     800            else if (y + lineHeight < this._canvas.height)
    816801                labelY = y;
    817802            else
    … …  
    819804
    820805            this._context.moveTo(0, y);
    821             this._context.lineTo(this.element.width, y);
     806            this._context.lineTo(this._canvas.width, y);
    822807
    823808            this._context.fillStyle = "rgba(255, 255, 255, 0.75)";
    … …  
    840825        width = Math.floor(width);
    841826
    842         for (var i = 0, bottomOffset = this.element.height; i < categories.length; ++i) {
     827        for (var i = 0, bottomOffset = this._canvas.height; i < categories.length; ++i) {
    843828            var category = categories[i];
    844829            var duration = frame.timeByCategory[category];
    … …  
    889874    },
    890875
    891     __proto__: WebInspector.View.prototype
     876    __proto__: WebInspector.TimelineOverviewBase.prototype
    892877}
    893878
Note: See TracChangeset for help on using the changeset viewer.