Web Inspector: Breakpoint in gutter has clipped / broken border image.

[Joseph Pecoraro]

Created attachment 229061 [details]
[IMAGE] Issue

* SUMMARY
See attached screenshot. Broken breakpoint tip in gutter.

* STEPS TO REPRODUCE
1. Load <http://bogojoker.com/shell/> in Safari
2. Set a breakpoint on easySlider.min.js:56:21
  => broken breakpoint icon in gutter

[Joseph Pecoraro]

CSS for this is:

  border-image-source: -webkit-image-set(url(../Images/Breakpoint.png) 1x, url(../Images/[e-mail]) 2x);

[Joseph Pecoraro]

Looks like this was caused by:
<http://trac.webkit.org/changeset/166925>

NOTE: This is a non-retina (1x) machine.

[zalan]

I can repro it on 2x display. It looks terrible.

[Joseph Pecoraro]

More accurately the CSS is:

    .text-editor > .CodeMirror .has-breakpoint .CodeMirror-linenumber::before {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: -7px;
        content: "";
        z-index: -2;
        border-image-source: -webkit-image-set(url(../Images/BreakpointInactive.png) 1x, url(../Images/[e-mail]) 2x);
        border-image-slice: 3 7 3 3 fill;
        border-width: 3px 7px 3px 3px;
    }

[zalan]

Created attachment 229069 [details]
Test reduction

[zalan]

Created attachment 229076 [details]
Patch

[Joseph Pecoraro]

Comment on attachment 229076 [details]
Patch

r=me, Thanks!

[WebKit Commit Bot]

Comment on attachment 229076 [details]
Patch

Clearing flags on attachment: 229076

Committed r167090: <http://trac.webkit.org/changeset/167090>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Radar WebKit Bug Importer]

<rdar://problem/16585860>

[Radar WebKit Bug Importer]

<rdar://problem/16585859>