Bug 204184 - Difficult to match { } when the block is longer than a screen
Summary: Difficult to match { } when the block is longer than a screen
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2019-11-13 17:51 PST by Myles C. Maxfield
Modified: 2019-11-14 11:16 PST (History)
2 users (show)

See Also:

Attachments
[Image] Mockup (53.29 KB, image/png)
2019-11-14 11:16 PST, Devin Rousso 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Myles C. Maxfield 2019-11-13 17:51:15 PST 
It's pretty common that functions or blocks are longer than a screenful of text, especially when the web inspector is docked horizontally, there isn't a lot of vertical space in a single screen. It can be difficult to match { and } characters when you can't seem them both at the same time.

One idea: Xcode solves this problem by, if you double click on a { or a }, it highlights the block.
Comment 1 Myles C. Maxfield 2019-11-13 17:54:55 PST 
Looks like web inspector already does this if you put the caret directly before/after the {
Comment 2 Devin Rousso 2019-11-14 09:59:19 PST 
We could do something _really_ simple, like add a small vertical line next to the gutter for the lines that have matching braces.  It's a single CSS rule too!

```
    .CodeMirror .CodeMirror-lines .CodeMirror-matchingbracket::before {
        position: absolute;
        left: 0;
        width: 2px;
        height: 100%;
        content: "";
        background-color: hsla(226, 77%, 65%);
    }
```
Comment 3 Devin Rousso 2019-11-14 11:16:23 PST 
Created attachment 383562 [details]
[Image] Mockup