Changeset 147220 in webkit
- Timestamp:
- Mar 29, 2013 8:20:38 AM (11 years ago)
- Location:
- trunk/Source/WebCore
- Files:
-
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebCore/ChangeLog
r147218 r147220 1 2013-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 1 33 2013-03-29 Peter Rybin <prybin@chromium.org> 2 34 -
trunk/Source/WebCore/inspector/front-end/OverviewGrid.js
r146893 r147220 50 50 51 51 WebInspector.OverviewGrid.prototype = { 52 gridElement: function() 53 { 54 return this._grid.element; 55 }, 56 52 57 itemsGraphsElement: function() 53 58 { 54 59 return this._grid.itemsGraphsElement; 55 },56 57 /**58 * @param {!Node} child59 */60 insertBeforeItemsGraphsElement: function(child)61 {62 this._grid.element.insertBefore(child, this._grid.itemsGraphsElement);63 60 }, 64 61 -
trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js
r147109 r147220 79 79 80 80 this._memoryOverview = new WebInspector.TimelineMemoryOverview(this._model); 81 this._memoryOverview.element.id = "timeline-overview-memory";82 this._overviewGrid.insertBeforeItemsGraphsElement(this._memoryOverview.element);83 81 84 82 var separatorElement = document.createElement("div"); … … 87 85 88 86 this._eventOverview = new WebInspector.TimelineEventOverview(this._model); 89 this._ overviewGrid.itemsGraphsElement().appendChild(this._eventOverview.element);87 this._eventOverview.show(this._overviewGrid.itemsGraphsElement()); 90 88 91 89 var categories = WebInspector.TimelinePresentationModel.categories(); … … 132 130 case WebInspector.TimelineOverviewPane.Mode.Events: 133 131 case WebInspector.TimelineOverviewPane.Mode.Frames: 134 this._memoryOverview. hide();132 this._memoryOverview.detach(); 135 133 this._overviewGrid.showItemsGraphsElement(); 136 134 break; 137 135 case WebInspector.TimelineOverviewPane.Mode.Memory: 138 136 this._overviewGrid.hideItemsGraphsElement(); 139 this._memoryOverview.show( );137 this._memoryOverview.show(this._overviewGrid.gridElement(), this._overviewGrid.itemsGraphsElement()); 140 138 } 141 139 this._overviewItems[this._currentMode].revealAndSelect(false); … … 173 171 this._overviewCalculator.setDisplayWindow(0, this._overviewGrid.clientWidth()); 174 172 175 if (this._memoryOverview. visible)173 if (this._memoryOverview.isShowing()) 176 174 this._memoryOverview.update(); 177 175 else if (this._frameOverview) … … 415 413 /** 416 414 * @constructor 415 * @extends {WebInspector.View} 416 * @param {WebInspector.TimelineModel} model 417 */ 418 WebInspector.TimelineOverviewBase = function(model) 419 { 420 WebInspector.View.call(this); 421 this._model = model; 422 this._canvas = this.element.createChild("canvas", "fill"); 423 } 424 425 WebInspector.TimelineOverviewBase.prototype = { 426 update: function() {}, 427 428 __proto__: WebInspector.View.prototype 429 } 430 431 /** 432 * @constructor 433 * @extends {WebInspector.TimelineOverviewBase} 417 434 * @param {WebInspector.TimelineModel} model 418 435 */ 419 436 WebInspector.TimelineMemoryOverview = function(model) 420 437 { 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"); 436 444 } 437 445 438 446 WebInspector.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 465 447 update: function() 466 448 { … … 540 522 ctx.fillRect(0, 0, this._canvas.width, this._canvas.height); 541 523 }, 524 525 __proto__: WebInspector.TimelineOverviewBase.prototype 542 526 } 543 527 544 528 /** 545 529 * @constructor 530 * @extends {WebInspector.TimelineOverviewBase} 546 531 * @param {WebInspector.TimelineModel} model 547 532 */ 548 533 WebInspector.TimelineEventOverview = function(model) 549 534 { 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"); 553 538 this._minimumRecordDuration = 0; 554 539 … … 579 564 { 580 565 // 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; 583 568 584 569 var timeOffset = this._model.minimumRecordTime(); 585 570 var timeSpan = this._model.maximumRecordTime() - timeOffset; 586 var scale = this. element.width / timeSpan;571 var scale = this._canvas.width / timeSpan; 587 572 588 573 var lastBarByGroup = []; … … 590 575 this._context.fillStyle = "rgba(0, 0, 0, 0.05)"; 591 576 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); 593 578 594 579 function appendRecord(record) … … 644 629 this._context.strokeRect(0, 0, width, WebInspector.TimelineEventOverview._innerStripHeight); 645 630 this._context.restore(); 646 } 631 }, 632 633 __proto__: WebInspector.TimelineOverviewBase.prototype 647 634 } 648 635 649 636 /** 650 637 * @constructor 651 * @extends {WebInspector. View}638 * @extends {WebInspector.TimelineOverviewBase} 652 639 * @param {WebInspector.TimelineModel} model 653 640 */ 654 641 WebInspector.TimelineFrameOverview = function(model) 655 642 { 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"); 660 645 this.reset(); 661 646 … … 667 652 this._actualOuterBarWidth = this._maxInnerBarWidth + this._actualPadding; 668 653 669 this._context = this. element.getContext("2d");654 this._context = this._canvas.getContext("2d"); 670 655 671 656 this._fillStyles = {}; … … 699 684 fullBarLength = Math.min(this._medianFrameLength * 2, this._maxFrameLength); 700 685 701 var scale = (this. element.clientHeight - paddingTop) / fullBarLength;686 var scale = (this._canvas.clientHeight - paddingTop) / fullBarLength; 702 687 this._renderBars(visibleFrames, scale); 703 688 }, … … 763 748 { 764 749 // 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; 767 752 768 753 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); 770 755 this._actualPadding = Math.min(Math.floor(this._actualOuterBarWidth / 3), maxPadding); 771 756 … … 805 790 var fps = fpsMarks[i]; 806 791 // 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; 808 793 var label = fps + " FPS "; 809 794 var labelWidth = this._context.measureText(label).width; 810 var labelX = this. element.width;795 var labelX = this._canvas.width; 811 796 var labelY; 812 797 813 798 if (labelTopMargin < y - lineHeight) 814 799 labelY = y - lineHeight; 815 else if (y + lineHeight < this. element.height)800 else if (y + lineHeight < this._canvas.height) 816 801 labelY = y; 817 802 else … … 819 804 820 805 this._context.moveTo(0, y); 821 this._context.lineTo(this. element.width, y);806 this._context.lineTo(this._canvas.width, y); 822 807 823 808 this._context.fillStyle = "rgba(255, 255, 255, 0.75)"; … … 840 825 width = Math.floor(width); 841 826 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) { 843 828 var category = categories[i]; 844 829 var duration = frame.timeByCategory[category]; … … 889 874 }, 890 875 891 __proto__: WebInspector. View.prototype876 __proto__: WebInspector.TimelineOverviewBase.prototype 892 877 } 893 878
Note: See TracChangeset
for help on using the changeset viewer.