Bug 83786 – Web Inspector: Line number is not displayed while debugging javascript

• Component: Web Inspector (Deprecated)
• Status: RESOLVED INVALID

[Vivek Galatage]

Scenario Steps:
1. Visit to URL: http://people.w3.org/mike/localstorage.html( or any URL/Page having javascript in it)
2. Open inspector and in the scripts panel put a breakpoint in function doShowAll() (line. 87)
3. Reload the page so the execution stops at the above breakpoint
4. Use F10 key to move to next line

Expected Behavior: 
While debugging the line number should be visible

Actual Behavior:
The line number is not visible as seen in the attached image

[Vivek Galatage]

Created attachment 136916 [details]
Line Number Missing while Debugging

Line Number Missing while Debugging

[Vivek Galatage]

Have made changes in the textViewer.css for enhanced visibility of the line number with minor changes in the Image resources.

The enhanced view will be as shown in the attached image.

[Vivek Galatage]

Created attachment 136917 [details]
Line Number Visible With Enhanced Outlining

[Vivek Galatage]

Created attachment 136920 [details]
Patch

[Pavel Feldman]

Comment on attachment 136920 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=136920&action=review

> Source/WebCore/ChangeLog:13
> +        * inspector/front-end/Images/breakpointConditionalCounterBorder.png:

Double-checking that you've preserved the image dimensions. You should also make sure your changes play nicely with present border image offsets.

> Source/WebCore/inspector/front-end/textViewer.css:141
> +    color: #8E0504;

we typically use rgb() notation for color definitions. Could you please fix it before landing?

[Vivek Galatage]

Created attachment 137048 [details]
Patch

[Vivek Galatage]

Thank you Pavel for the review comments. I have incorporated your comments and uploaded the new patch.

[Pavel Feldman]

Comment on attachment 137048 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=137048&action=review

> Source/WebCore/inspector/front-end/textViewer.css:156
> +    outline: 1px solid #4073F4;

Looks like these are still in hex.

> Source/WebCore/inspector/front-end/textViewer.css:163
> +    outline: 1px solid #4073F4;

Looks like these are still in hex.

[Vivek Galatage]

Sorry missed these ones. Will upload a new patch with the changes.

[Vivek Galatage]

Created attachment 137058 [details]
Patch

[Pavel Feldman]

Comment on attachment 137058 [details]
Patch

Thanks!

[WebKit Review Bot]

Comment on attachment 137058 [details]
Patch

Clearing flags on attachment: 137058

Committed r114103: <http://trac.webkit.org/changeset/114103>

[WebKit Review Bot]

All reviewed patches have been landed.  Closing bug.

[Vivek Galatage]

Reopening since this was rolled out due to not so pleasing appearance.

[Roland Takacs]

Created attachment 204162 [details]
proposal

The attached image shows different implementations of solution:

1. the original look of debugger in inspector.
2.a the previous patch where line number and selection arrow fit the gray line number bar.
2.b same patch; arrow and line number did not fit the number bar (therefore the patch has been rolled out).

proposals:
3. selection arrow eliminated in order to make line number and selection fit the line number bar. This solution is kind of simple, can be implemented quickly.
4. gray line number bar extended horizontally and red dots used for marking breakpoints. Selection arrow would fit with any number in this case. This implementation is much closer to common IDEs (like Code::Blocks or Visual Studio) and seems more demanding, however it needs much more work.

[Roland Takacs]

What do you think?

[Csaba Osztrogonác]

It is a bug for the old inspector UI.