Skip to content
Permalink
Browse files
2010-03-02 Pavel Feldman <pfeldman@chromium.org>
        Reviewed by Timothy Hatcher.

        Web Inspector: render breakpoints as border images instead of canvas.

        https://bugs.webkit.org/show_bug.cgi?id=35535

        * inspector/front-end/Images/breakpointBorder.png: Added.
        * inspector/front-end/Images/breakpointConditionalBorder.png: Added.
        * inspector/front-end/Images/breakpointConditionalCounterBorder.png: Added.
        * inspector/front-end/Images/breakpointCounterBorder.png: Added.
        * inspector/front-end/Images/programCounterBorder.png: Added.
        * inspector/front-end/SourceFrame.js:
        (WebInspector.SourceFrame.prototype._updateExecutionLine):
        (WebInspector.SourceFrame.prototype._addBreakpointToSource):
        (WebInspector.SourceFrame.prototype.resize):
        * inspector/front-end/TextViewer.js:
        (WebInspector.TextChunk):
        * inspector/front-end/textViewer.css:


Canonical link: https://commits.webkit.org/46708@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@55407 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
pavelfeldman committed Mar 2, 2010
1 parent bb35f04 commit ff779dfe21115644e096e0da5bd5e92ad7746780
Showing 9 changed files with 81 additions and 171 deletions.
@@ -1,3 +1,24 @@
2010-03-02 Pavel Feldman <pfeldman@chromium.org>

Reviewed by Timothy Hatcher.

Web Inspector: render breakpoints as border images instead of canvas.

https://bugs.webkit.org/show_bug.cgi?id=35535

* inspector/front-end/Images/breakpointBorder.png: Added.
* inspector/front-end/Images/breakpointConditionalBorder.png: Added.
* inspector/front-end/Images/breakpointConditionalCounterBorder.png: Added.
* inspector/front-end/Images/breakpointCounterBorder.png: Added.
* inspector/front-end/Images/programCounterBorder.png: Added.
* inspector/front-end/SourceFrame.js:
(WebInspector.SourceFrame.prototype._updateExecutionLine):
(WebInspector.SourceFrame.prototype._addBreakpointToSource):
(WebInspector.SourceFrame.prototype.resize):
* inspector/front-end/TextViewer.js:
(WebInspector.TextChunk):
* inspector/front-end/textViewer.css:

2010-01-28 Holger Hans Peter Freyther <zecke@selfish.org>

Reviewed by Ariya Hidayat.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -288,8 +288,6 @@ WebInspector.SourceFrame.prototype = {
if (!this._executionLine)
return;

this._drawProgramCounterImageIfNeeded();

if (this._executionLine < this._textModel.linesCount)
this._textViewer.addDecoration(this._executionLine - 1, "webkit-execution-line");
},
@@ -369,7 +367,6 @@ WebInspector.SourceFrame.prototype = {

this._textModel.setAttribute(lineNumber, "breakpoint", breakpoint);
breakpoint.sourceText = this._textModel.line(breakpoint.line - 1);
this._drawBreakpointImagesIfNeeded();

this._textViewer.beginUpdates();
this._textViewer.addDecoration(lineNumber, "webkit-breakpoint");
@@ -393,9 +390,10 @@ WebInspector.SourceFrame.prototype = {

_contextMenu: function(event)
{
if (event.target.className !== "webkit-line-number")
var target = event.target.enclosingNodeOrSelfWithClass("webkit-line-number");
if (!target)
return;
var row = event.target.parentElement;
var row = target.parentElement;

var lineNumber = row.lineNumber;
var contextMenu = new WebInspector.ContextMenu();
@@ -437,9 +435,10 @@ WebInspector.SourceFrame.prototype = {
this._hidePopup();
if (event.button != 0 || event.altKey || event.ctrlKey || event.metaKey)
return;
if (event.target.className !== "webkit-line-number")
var target = event.target.enclosingNodeOrSelfWithClass("webkit-line-number");
if (!target)
return;
var row = event.target.parentElement;
var row = target.parentElement;

var lineNumber = row.lineNumber;

@@ -695,134 +694,6 @@ WebInspector.SourceFrame.prototype = {
{
if (this._textViewer)
this._textViewer.resize();
},

_drawProgramCounterInContext: function(ctx, glow)
{
if (glow)
ctx.save();

ctx.beginPath();
ctx.moveTo(17, 2);
ctx.lineTo(19, 2);
ctx.lineTo(19, 0);
ctx.lineTo(21, 0);
ctx.lineTo(26, 5.5);
ctx.lineTo(21, 11);
ctx.lineTo(19, 11);
ctx.lineTo(19, 9);
ctx.lineTo(17, 9);
ctx.closePath();
ctx.fillStyle = "rgb(142, 5, 4)";

if (glow) {
ctx.shadowBlur = 4;
ctx.shadowColor = "rgb(255, 255, 255)";
ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = 0;
}

ctx.fill();
ctx.fill(); // Fill twice to get a good shadow and darker anti-aliased pixels.

if (glow)
ctx.restore();
},

_drawProgramCounterImageIfNeeded: function()
{
if (!this._needsProgramCounterImage)
return;

var ctx = document.getCSSCanvasContext("2d", "program-counter", 26, 11);
ctx.clearRect(0, 0, 26, 11);
this._drawProgramCounterInContext(ctx, true);

delete this._needsProgramCounterImage;
},

_drawBreakpointImagesIfNeeded: function(conditional)
{
if (!this._needsBreakpointImages)
return;

function drawBreakpoint(ctx, disabled, conditional)
{
ctx.beginPath();
ctx.moveTo(0, 2);
ctx.lineTo(2, 0);
ctx.lineTo(21, 0);
ctx.lineTo(26, 5.5);
ctx.lineTo(21, 11);
ctx.lineTo(2, 11);
ctx.lineTo(0, 9);
ctx.closePath();
ctx.fillStyle = conditional ? "rgb(217, 142, 1)" : "rgb(1, 142, 217)";
ctx.strokeStyle = conditional ? "rgb(205, 103, 0)" : "rgb(0, 103, 205)";
ctx.lineWidth = 3;
ctx.fill();
ctx.save();
ctx.clip();
ctx.stroke();
ctx.restore();

if (!disabled)
return;

ctx.save();
ctx.globalCompositeOperation = "destination-out";
ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
ctx.fillRect(0, 0, 26, 11);
ctx.restore();
}


// Unconditional breakpoints.

var ctx = document.getCSSCanvasContext("2d", "breakpoint", 26, 11);
ctx.clearRect(0, 0, 26, 11);
drawBreakpoint(ctx);

var ctx = document.getCSSCanvasContext("2d", "breakpoint-program-counter", 26, 11);
ctx.clearRect(0, 0, 26, 11);
drawBreakpoint(ctx);
ctx.clearRect(20, 0, 6, 11);
this._drawProgramCounterInContext(ctx, true);

var ctx = document.getCSSCanvasContext("2d", "breakpoint-disabled", 26, 11);
ctx.clearRect(0, 0, 26, 11);
drawBreakpoint(ctx, true);

var ctx = document.getCSSCanvasContext("2d", "breakpoint-disabled-program-counter", 26, 11);
ctx.clearRect(0, 0, 26, 11);
drawBreakpoint(ctx, true);
ctx.clearRect(20, 0, 6, 11);
this._drawProgramCounterInContext(ctx, true);


// Conditional breakpoints.

var ctx = document.getCSSCanvasContext("2d", "breakpoint-conditional", 26, 11);
ctx.clearRect(0, 0, 26, 11);
drawBreakpoint(ctx, false, true);

var ctx = document.getCSSCanvasContext("2d", "breakpoint-conditional-program-counter", 26, 11);
ctx.clearRect(0, 0, 26, 11);
drawBreakpoint(ctx, false, true);
ctx.clearRect(20, 0, 6, 11);
this._drawProgramCounterInContext(ctx, true);

var ctx = document.getCSSCanvasContext("2d", "breakpoint-disabled-conditional", 26, 11);
ctx.clearRect(0, 0, 26, 11);
drawBreakpoint(ctx, true, true);

var ctx = document.getCSSCanvasContext("2d", "breakpoint-disabled-conditional-program-counter", 26, 11);
ctx.clearRect(0, 0, 26, 11);
drawBreakpoint(ctx, true, true);
ctx.clearRect(20, 0, 6, 11);
this._drawProgramCounterInContext(ctx, true);

delete this._needsBreakpointImages;
}
}

@@ -609,7 +609,18 @@ WebInspector.TextChunk = function(textViewer, startLine, endLine)
lineNumbers.push(i + 1);
lines.push(this._textModel.line(i));
}
this._lineNumberElement.textContent = lineNumbers.join("\n");
if (this.linesCount === 1) {
// Single line chunks are typically created for decorations. Host line number in
// the sub-element in order to allow flexible border / margin management.
var innerSpan = document.createElement("span");
innerSpan.className = "webkit-line-number-inner";
innerSpan.textContent = startLine + 1;
var outerSpan = document.createElement("div");
outerSpan.className = "webkit-line-number-outer";
outerSpan.appendChild(innerSpan);
this._lineNumberElement.appendChild(outerSpan);
} else
this._lineNumberElement.textContent = lineNumbers.join("\n");
this._lineContentElement.textContent = lines.join("\n");
}

@@ -60,76 +60,83 @@

.webkit-line-number {
color: rgb(128, 128, 128);
background-color: rgb(240, 240, 240);
border-right: 1px solid rgb(187, 187, 187);
text-align: right;
word-break: normal;
-webkit-user-select: none;
background-color: rgb(240, 240, 240);
border-right: 1px solid rgb(187, 187, 187) !important;
padding-left: 2px;
padding-right: 2px;
background-repeat: no-repeat;
background-position: right 1px;
vertical-align: top;
padding-right: 4px;
padding-left: 6px;
}

.webkit-line-content {
padding-left: 2px;
.webkit-line-number-outer {
margin-right: -4px;
margin-left: -4px;
border-color: transparent;
border-style: solid;
border-width: 0 0 0px 2px;
vertical-align: top;
}

.webkit-execution-line .webkit-line-number {
color: transparent;
background-image: -webkit-canvas(program-counter);
.webkit-line-number-inner {
margin-right: 4px;
}

.webkit-breakpoint .webkit-line-number {
color: white;
background-image: -webkit-canvas(breakpoint);
.webkit-breakpoint .webkit-line-number-inner, .webkit-breakpoint-conditional .webkit-line-number-inner, .webkit-execution-line .webkit-line-number-inner {
margin-right: -10px;
}

.webkit-breakpoint-disabled .webkit-line-number {
color: white;
background-image: -webkit-canvas(breakpoint-disabled);
.webkit-line-content {
width: 100%;
padding-left: 2px;
vertical-align: top;
}

.webkit-breakpoint.webkit-execution-line .webkit-line-number {
color: transparent;
background-image: -webkit-canvas(breakpoint-program-counter);
.webkit-breakpoint .webkit-line-number-outer {
color: white;
border-width: 0 14px 0px 2px;
-webkit-border-image: url(Images/breakpointBorder.png) 0 14 0 2;
}

.webkit-breakpoint-disabled.webkit-execution-line .webkit-line-number {
color: transparent;
background-image: -webkit-canvas(breakpoint-disabled-program-counter);
.webkit-breakpoint-conditional .webkit-line-number-outer {
color: white;
border-width: 0 14px 0px 2px;
-webkit-border-image: url(Images/breakpointConditionalBorder.png) 0 14 0 2;
}

.webkit-breakpoint.webkit-breakpoint-conditional .webkit-line-number {
color: white;
background-image: -webkit-canvas(breakpoint-conditional);
.webkit-execution-line .webkit-line-number-outer {
color: transparent;
border-width: 0 14px 0px 2px;
-webkit-border-image: url(Images/programCounterBorder.png) 0 14 0 2;
}

.webkit-breakpoint-disabled.webkit-breakpoint-conditional .webkit-line-number {
.webkit-breakpoint.webkit-execution-line .webkit-line-number-outer {
color: white;
background-image: -webkit-canvas(breakpoint-disabled-conditional);
-webkit-border-image: url(Images/breakpointCounterBorder.png) 0 14 0 2;
}

.webkit-breakpoint.webkit-breakpoint-conditional.webkit-execution-line .webkit-line-number {
.webkit-breakpoint.webkit-execution-line .webkit-line-number-outer {
color: transparent;
background-image: -webkit-canvas(breakpoint-conditional-program-counter);
-webkit-border-image: url(Images/breakpointCounterBorder.png) 0 14 0 2;
}

.webkit-breakpoint-disabled.webkit-breakpoint-conditional.webkit-execution-line .webkit-line-number {
.webkit-breakpoint-conditional.webkit-execution-line .webkit-line-number-outer {
color: transparent;
background-image: -webkit-canvas(breakpoint-disabled-conditional-program-counter);
-webkit-border-image: url(Images/breakpointConditionalCounterBorder.png) 0 14 0 2;
}

.breakpoints-deactivated .webkit-breakpoint .webkit-line-number {
.webkit-breakpoint-disabled .webkit-line-number-outer {
opacity: 0.5;
}

.breakpoints-deactivated .webkit-breakpoint-disabled .webkit-line-number {
.breakpoints-deactivated .webkit-breakpoint .webkit-line-number-outer {
opacity: 0.5;
}

.breakpoints-deactivated .webkit-breakpoint-disabled .webkit-line-number-outer {
opacity: 0.3;
}

.webkit-execution-line .webkit-line-content {
background-color: rgb(171, 191, 254);
outline: 1px solid rgb(64, 115, 244);

0 comments on commit ff779df

Please sign in to comment.