Changeset 55407 in webkit
- Timestamp:
- Mar 2, 2010 6:37:33 AM (14 years ago)
- Location:
- trunk/WebCore
- Files:
-
- 5 added
- 4 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/WebCore/ChangeLog
r55406 r55407 1 2010-03-02 Pavel Feldman <pfeldman@chromium.org> 2 3 Reviewed by Timothy Hatcher. 4 5 Web Inspector: render breakpoints as border images instead of canvas. 6 7 https://bugs.webkit.org/show_bug.cgi?id=35535 8 9 * inspector/front-end/Images/breakpointBorder.png: Added. 10 * inspector/front-end/Images/breakpointConditionalBorder.png: Added. 11 * inspector/front-end/Images/breakpointConditionalCounterBorder.png: Added. 12 * inspector/front-end/Images/breakpointCounterBorder.png: Added. 13 * inspector/front-end/Images/programCounterBorder.png: Added. 14 * inspector/front-end/SourceFrame.js: 15 (WebInspector.SourceFrame.prototype._updateExecutionLine): 16 (WebInspector.SourceFrame.prototype._addBreakpointToSource): 17 (WebInspector.SourceFrame.prototype.resize): 18 * inspector/front-end/TextViewer.js: 19 (WebInspector.TextChunk): 20 * inspector/front-end/textViewer.css: 21 1 22 2010-01-28 Holger Hans Peter Freyther <zecke@selfish.org> 2 23 -
trunk/WebCore/inspector/front-end/SourceFrame.js
r55364 r55407 289 289 return; 290 290 291 this._drawProgramCounterImageIfNeeded();292 293 291 if (this._executionLine < this._textModel.linesCount) 294 292 this._textViewer.addDecoration(this._executionLine - 1, "webkit-execution-line"); … … 370 368 this._textModel.setAttribute(lineNumber, "breakpoint", breakpoint); 371 369 breakpoint.sourceText = this._textModel.line(breakpoint.line - 1); 372 this._drawBreakpointImagesIfNeeded();373 370 374 371 this._textViewer.beginUpdates(); … … 394 391 _contextMenu: function(event) 395 392 { 396 if (event.target.className !== "webkit-line-number") 397 return; 398 var row = event.target.parentElement; 393 var target = event.target.enclosingNodeOrSelfWithClass("webkit-line-number"); 394 if (!target) 395 return; 396 var row = target.parentElement; 399 397 400 398 var lineNumber = row.lineNumber; … … 438 436 if (event.button != 0 || event.altKey || event.ctrlKey || event.metaKey) 439 437 return; 440 if (event.target.className !== "webkit-line-number") 441 return; 442 var row = event.target.parentElement; 438 var target = event.target.enclosingNodeOrSelfWithClass("webkit-line-number"); 439 if (!target) 440 return; 441 var row = target.parentElement; 443 442 444 443 var lineNumber = row.lineNumber; … … 696 695 if (this._textViewer) 697 696 this._textViewer.resize(); 698 },699 700 _drawProgramCounterInContext: function(ctx, glow)701 {702 if (glow)703 ctx.save();704 705 ctx.beginPath();706 ctx.moveTo(17, 2);707 ctx.lineTo(19, 2);708 ctx.lineTo(19, 0);709 ctx.lineTo(21, 0);710 ctx.lineTo(26, 5.5);711 ctx.lineTo(21, 11);712 ctx.lineTo(19, 11);713 ctx.lineTo(19, 9);714 ctx.lineTo(17, 9);715 ctx.closePath();716 ctx.fillStyle = "rgb(142, 5, 4)";717 718 if (glow) {719 ctx.shadowBlur = 4;720 ctx.shadowColor = "rgb(255, 255, 255)";721 ctx.shadowOffsetX = -1;722 ctx.shadowOffsetY = 0;723 }724 725 ctx.fill();726 ctx.fill(); // Fill twice to get a good shadow and darker anti-aliased pixels.727 728 if (glow)729 ctx.restore();730 },731 732 _drawProgramCounterImageIfNeeded: function()733 {734 if (!this._needsProgramCounterImage)735 return;736 737 var ctx = document.getCSSCanvasContext("2d", "program-counter", 26, 11);738 ctx.clearRect(0, 0, 26, 11);739 this._drawProgramCounterInContext(ctx, true);740 741 delete this._needsProgramCounterImage;742 },743 744 _drawBreakpointImagesIfNeeded: function(conditional)745 {746 if (!this._needsBreakpointImages)747 return;748 749 function drawBreakpoint(ctx, disabled, conditional)750 {751 ctx.beginPath();752 ctx.moveTo(0, 2);753 ctx.lineTo(2, 0);754 ctx.lineTo(21, 0);755 ctx.lineTo(26, 5.5);756 ctx.lineTo(21, 11);757 ctx.lineTo(2, 11);758 ctx.lineTo(0, 9);759 ctx.closePath();760 ctx.fillStyle = conditional ? "rgb(217, 142, 1)" : "rgb(1, 142, 217)";761 ctx.strokeStyle = conditional ? "rgb(205, 103, 0)" : "rgb(0, 103, 205)";762 ctx.lineWidth = 3;763 ctx.fill();764 ctx.save();765 ctx.clip();766 ctx.stroke();767 ctx.restore();768 769 if (!disabled)770 return;771 772 ctx.save();773 ctx.globalCompositeOperation = "destination-out";774 ctx.fillStyle = "rgba(0, 0, 0, 0.5)";775 ctx.fillRect(0, 0, 26, 11);776 ctx.restore();777 }778 779 780 // Unconditional breakpoints.781 782 var ctx = document.getCSSCanvasContext("2d", "breakpoint", 26, 11);783 ctx.clearRect(0, 0, 26, 11);784 drawBreakpoint(ctx);785 786 var ctx = document.getCSSCanvasContext("2d", "breakpoint-program-counter", 26, 11);787 ctx.clearRect(0, 0, 26, 11);788 drawBreakpoint(ctx);789 ctx.clearRect(20, 0, 6, 11);790 this._drawProgramCounterInContext(ctx, true);791 792 var ctx = document.getCSSCanvasContext("2d", "breakpoint-disabled", 26, 11);793 ctx.clearRect(0, 0, 26, 11);794 drawBreakpoint(ctx, true);795 796 var ctx = document.getCSSCanvasContext("2d", "breakpoint-disabled-program-counter", 26, 11);797 ctx.clearRect(0, 0, 26, 11);798 drawBreakpoint(ctx, true);799 ctx.clearRect(20, 0, 6, 11);800 this._drawProgramCounterInContext(ctx, true);801 802 803 // Conditional breakpoints.804 805 var ctx = document.getCSSCanvasContext("2d", "breakpoint-conditional", 26, 11);806 ctx.clearRect(0, 0, 26, 11);807 drawBreakpoint(ctx, false, true);808 809 var ctx = document.getCSSCanvasContext("2d", "breakpoint-conditional-program-counter", 26, 11);810 ctx.clearRect(0, 0, 26, 11);811 drawBreakpoint(ctx, false, true);812 ctx.clearRect(20, 0, 6, 11);813 this._drawProgramCounterInContext(ctx, true);814 815 var ctx = document.getCSSCanvasContext("2d", "breakpoint-disabled-conditional", 26, 11);816 ctx.clearRect(0, 0, 26, 11);817 drawBreakpoint(ctx, true, true);818 819 var ctx = document.getCSSCanvasContext("2d", "breakpoint-disabled-conditional-program-counter", 26, 11);820 ctx.clearRect(0, 0, 26, 11);821 drawBreakpoint(ctx, true, true);822 ctx.clearRect(20, 0, 6, 11);823 this._drawProgramCounterInContext(ctx, true);824 825 delete this._needsBreakpointImages;826 697 } 827 698 } -
trunk/WebCore/inspector/front-end/TextViewer.js
r55347 r55407 610 610 lines.push(this._textModel.line(i)); 611 611 } 612 this._lineNumberElement.textContent = lineNumbers.join("\n"); 612 if (this.linesCount === 1) { 613 // Single line chunks are typically created for decorations. Host line number in 614 // the sub-element in order to allow flexible border / margin management. 615 var innerSpan = document.createElement("span"); 616 innerSpan.className = "webkit-line-number-inner"; 617 innerSpan.textContent = startLine + 1; 618 var outerSpan = document.createElement("div"); 619 outerSpan.className = "webkit-line-number-outer"; 620 outerSpan.appendChild(innerSpan); 621 this._lineNumberElement.appendChild(outerSpan); 622 } else 623 this._lineNumberElement.textContent = lineNumbers.join("\n"); 613 624 this._lineContentElement.textContent = lines.join("\n"); 614 625 } -
trunk/WebCore/inspector/front-end/textViewer.css
r55364 r55407 61 61 .webkit-line-number { 62 62 color: rgb(128, 128, 128); 63 background-color: rgb(240, 240, 240); 64 border-right: 1px solid rgb(187, 187, 187); 63 65 text-align: right; 64 66 word-break: normal; 65 67 -webkit-user-select: none; 66 background-color: rgb(240, 240, 240); 67 border-right: 1px solid rgb(187, 187, 187) !important; 68 padding-left: 2px; 69 padding-right: 2px; 70 background-repeat: no-repeat; 71 background-position: right 1px; 68 padding-right: 4px; 69 padding-left: 6px; 70 } 71 72 .webkit-line-number-outer { 73 margin-right: -4px; 74 margin-left: -4px; 75 border-color: transparent; 76 border-style: solid; 77 border-width: 0 0 0px 2px; 72 78 vertical-align: top; 73 79 } 74 80 81 .webkit-line-number-inner { 82 margin-right: 4px; 83 } 84 85 .webkit-breakpoint .webkit-line-number-inner, .webkit-breakpoint-conditional .webkit-line-number-inner, .webkit-execution-line .webkit-line-number-inner { 86 margin-right: -10px; 87 } 88 75 89 .webkit-line-content { 90 width: 100%; 76 91 padding-left: 2px; 77 92 vertical-align: top; 78 93 } 79 94 80 .webkit-execution-line .webkit-line-number { 81 color: transparent; 82 background-image: -webkit-canvas(program-counter); 95 .webkit-breakpoint .webkit-line-number-outer { 96 color: white; 97 border-width: 0 14px 0px 2px; 98 -webkit-border-image: url(Images/breakpointBorder.png) 0 14 0 2; 83 99 } 84 100 85 .webkit-breakpoint .webkit-line-number {101 .webkit-breakpoint-conditional .webkit-line-number-outer { 86 102 color: white; 87 background-image: -webkit-canvas(breakpoint); 103 border-width: 0 14px 0px 2px; 104 -webkit-border-image: url(Images/breakpointConditionalBorder.png) 0 14 0 2; 88 105 } 89 106 90 .webkit-breakpoint-disabled .webkit-line-number { 91 color: white; 92 background-image: -webkit-canvas(breakpoint-disabled); 107 .webkit-execution-line .webkit-line-number-outer { 108 color: transparent; 109 border-width: 0 14px 0px 2px; 110 -webkit-border-image: url(Images/programCounterBorder.png) 0 14 0 2; 93 111 } 94 112 95 .webkit-breakpoint.webkit-execution-line .webkit-line-number {96 color: transparent;97 background-image: -webkit-canvas(breakpoint-program-counter);113 .webkit-breakpoint.webkit-execution-line .webkit-line-number-outer { 114 color: white; 115 -webkit-border-image: url(Images/breakpointCounterBorder.png) 0 14 0 2; 98 116 } 99 117 100 .webkit-breakpoint -disabled.webkit-execution-line .webkit-line-number {118 .webkit-breakpoint.webkit-execution-line .webkit-line-number-outer { 101 119 color: transparent; 102 background-image: -webkit-canvas(breakpoint-disabled-program-counter);120 -webkit-border-image: url(Images/breakpointCounterBorder.png) 0 14 0 2; 103 121 } 104 122 105 .webkit-breakpoint .webkit-breakpoint-conditional .webkit-line-number {106 color: white;107 background-image: -webkit-canvas(breakpoint-conditional);123 .webkit-breakpoint-conditional.webkit-execution-line .webkit-line-number-outer { 124 color: transparent; 125 -webkit-border-image: url(Images/breakpointConditionalCounterBorder.png) 0 14 0 2; 108 126 } 109 127 110 .webkit-breakpoint-disabled.webkit-breakpoint-conditional .webkit-line-number { 111 color: white; 112 background-image: -webkit-canvas(breakpoint-disabled-conditional); 113 } 114 115 .webkit-breakpoint.webkit-breakpoint-conditional.webkit-execution-line .webkit-line-number { 116 color: transparent; 117 background-image: -webkit-canvas(breakpoint-conditional-program-counter); 118 } 119 120 .webkit-breakpoint-disabled.webkit-breakpoint-conditional.webkit-execution-line .webkit-line-number { 121 color: transparent; 122 background-image: -webkit-canvas(breakpoint-disabled-conditional-program-counter); 123 } 124 125 .breakpoints-deactivated .webkit-breakpoint .webkit-line-number { 128 .webkit-breakpoint-disabled .webkit-line-number-outer { 126 129 opacity: 0.5; 127 130 } 128 131 129 .breakpoints-deactivated .webkit-breakpoint -disabled .webkit-line-number {132 .breakpoints-deactivated .webkit-breakpoint .webkit-line-number-outer { 130 133 opacity: 0.5; 134 } 135 136 .breakpoints-deactivated .webkit-breakpoint-disabled .webkit-line-number-outer { 137 opacity: 0.3; 131 138 } 132 139
Note: See TracChangeset
for help on using the changeset viewer.