Changeset 55407 in webkit


Ignore:
Timestamp:
Mar 2, 2010 6:37:33 AM (14 years ago)
Author:
pfeldman@chromium.org
Message:

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:
Location:
trunk/WebCore
Files:
5 added
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/WebCore/ChangeLog

    r55406 r55407  
     12010-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
    1222010-01-28  Holger Hans Peter Freyther  <zecke@selfish.org>
    223

  • trunk/WebCore/inspector/front-end/SourceFrame.js

    r55364 r55407  
    289289            return;
    290290
    291         this._drawProgramCounterImageIfNeeded();
    292 
    293291        if (this._executionLine < this._textModel.linesCount)
    294292            this._textViewer.addDecoration(this._executionLine - 1, "webkit-execution-line");
    … …  
    370368        this._textModel.setAttribute(lineNumber, "breakpoint", breakpoint);
    371369        breakpoint.sourceText = this._textModel.line(breakpoint.line - 1);
    372         this._drawBreakpointImagesIfNeeded();
    373370
    374371        this._textViewer.beginUpdates();
    … …  
    394391    _contextMenu: function(event)
    395392    {
    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;
    399397
    400398        var lineNumber = row.lineNumber;
    … …  
    438436        if (event.button != 0 || event.altKey || event.ctrlKey || event.metaKey)
    439437            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;
    443442
    444443        var lineNumber = row.lineNumber;
    … …  
    696695        if (this._textViewer)
    697696            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;
    826697    }
    827698}

  • trunk/WebCore/inspector/front-end/TextViewer.js

    r55347 r55407  
    610610        lines.push(this._textModel.line(i));
    611611    }
    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");
    613624    this._lineContentElement.textContent = lines.join("\n");
    614625}

  • trunk/WebCore/inspector/front-end/textViewer.css

    r55364 r55407  
    6161.webkit-line-number {
    6262    color: rgb(128, 128, 128);
     63    background-color: rgb(240, 240, 240);
     64    border-right: 1px solid rgb(187, 187, 187);
    6365    text-align: right;
    6466    word-break: normal;
    6567    -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;
    7278    vertical-align: top;
    7379}
    7480
     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
    7589.webkit-line-content {
     90    width: 100%;
    7691    padding-left: 2px;
    7792    vertical-align: top;
    7893}
    7994
    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;
    8399}
    84100
    85 .webkit-breakpoint .webkit-line-number {
     101.webkit-breakpoint-conditional .webkit-line-number-outer {
    86102    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;
    88105}
    89106
    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;
    93111}
    94112
    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;
    98116}
    99117
    100 .webkit-breakpoint-disabled.webkit-execution-line .webkit-line-number {
     118.webkit-breakpoint.webkit-execution-line .webkit-line-number-outer {
    101119    color: transparent;
    102     background-image: -webkit-canvas(breakpoint-disabled-program-counter);
     120    -webkit-border-image: url(Images/breakpointCounterBorder.png) 0 14 0 2;
    103121}
    104122
    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;
    108126}
    109127
    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 {
    126129    opacity: 0.5;
    127130}
    128131
    129 .breakpoints-deactivated .webkit-breakpoint-disabled .webkit-line-number {
     132.breakpoints-deactivated .webkit-breakpoint .webkit-line-number-outer {
    130133    opacity: 0.5;
     134}
     135
     136.breakpoints-deactivated .webkit-breakpoint-disabled .webkit-line-number-outer {
     137    opacity: 0.3;
    131138}
    132139
Note: See TracChangeset for help on using the changeset viewer.