[CLOSED] Turn on CodeMirror gutter filler

[core-ai-bot]

Issue by redmunds
Wednesday May 08, 2013 at 21:45 GMT
Originally opened as adobe/brackets#3756

---

This prevents line numbers from being displayed to the left of the horizontal scrollbar (in the gutter).

Screenshot: https://f.cloud.github.com/assets/1197144/444872/e0f41e82-b1ad-11e2-89c6-7b1fbb4e0388.png

Currently, the fill color is white, which is the same as the filler on the right side of the horizontal scrollbar (below vertical scrollbar). Should this be changed to something else?

cc:@njx@larz0

---

redmunds included the following code: https://github.com/adobe/brackets/pull/3756/commits

[core-ai-bot]

Comment by peterflynn
Thursday May 09, 2013 at 18:36 GMT

---

We should make sure this doesn't interfere with Jason's gutter-related perf fix (or cause some other perf issue).

[core-ai-bot]

Comment by jasonsanjose
Thursday May 09, 2013 at 18:57 GMT

---

Assigned to me

[core-ai-bot]

Comment by jasonsanjose
Friday May 10, 2013 at 23:09 GMT

---

Confirmed that this commit doesn't impact the performance optimizations that just landed in master.

However, it doesn't look all that great. Even if we do match the background color correctly as #F8F8F8, the line numbers will appear to truncate prematurely. I don't think this is an improvement over the current behavior.

It would be nice if the horizontal scrollbar extended all the way to the left...but that's probably a bigger fix?

@redmunds unless you feel strongly, I think we should just close this pull request.

[core-ai-bot]

Comment by redmunds
Saturday May 11, 2013 at 15:20 GMT

---

I changed the background color to #F8F8F8 (@background-color-3) and that looks slightly better.

Line numbers next to the horizontal scroll bar has bothered me since we upgraded to cmv3. I also don't like the idea of the horizontal scrollbar underneath the gutter since the gutter doesn't get scrolled with the page.

I looked at a few other editors:

Visual Studio: Has a space between the gutter and horz scrollbar. They use that space for a zoom control.

Dreamweaver: Horz scrollbar extends under the gutter.

Xcode: Gutter is displayed next to horz scrollbar.

So, I'd like to hear what@njx and@larz0 think about it.

[core-ai-bot]

Comment by redmunds
Saturday Jun 01, 2013 at 04:34 GMT

---

After showing this in@njx, I realize that, by default, this does not impact Mac (only if Preference to Always Show Scrollbars is turned on), so please review on Windows. What's your opinion@larz0?

[core-ai-bot]

Comment by larz0
Saturday Jun 01, 2013 at 16:23 GMT

---

@redmunds I'm wondering if we should try using the webkit scrollbar for windows because it looks a lot cleaner and extremely customizable (see http://css-tricks.com/examples/WebKitScrollbars/). Another reason is that we'll probably have theme support eventually and won't be able to control the gutter fill for all the other themes.

The downside is that if we use this the Mac users will lose their native OS scrolling, which is slightly better than the custom webkit scrollbars, unless we're able to load Windows-specific CSS.

[core-ai-bot]

Comment by larz0
Saturday Jun 01, 2013 at 16:35 GMT

---

The scrollbars are slightly better on Windows 8 http://img35.imageshack.us/img35/2927/screenshot2ynv.png

[core-ai-bot]

Comment by jasonsanjose
Monday Jun 03, 2013 at 16:58 GMT

---

@larz0 we can definitely do windows-specific CSS.

[core-ai-bot]

Comment by larz0
Monday Jun 03, 2013 at 17:23 GMT

---

@jasonsanjose cool I'll use custom webkit scrollbars on a separate branch and see if that will improve the scrollbar for Windows users.

[core-ai-bot]

Comment by peterflynn
Tuesday Jun 04, 2013 at 02:29 GMT

---

I'd be concerned about having Mac-style hidden-unless-moving scrollbars on Windows -- it's very different from the usual platform expectation, and as a Windows user I like seeing the current scroll position & viewport height at a glance. I'd vote for either (a) lightweight style (a la Mac) but always visible, or (b) at a minimum, always visible while focused (which is how Quick Docs behaves).

[core-ai-bot]

Comment by larz0
Tuesday Jun 04, 2013 at 02:52 GMT

---

@peterflynn yep sounds good. The goal is to try and stick close to Windows visual language.

[core-ai-bot]

Comment by peterflynn
Tuesday Jun 04, 2013 at 02:56 GMT

---

Cool. Following the Win8 scrollbar style seems like another good option then -- definitely Windows-ey, but still quieter than the current scrollbars seen on Vista/7, and also IMHO a better fit with Brackets' visual style than the Vista/7 native scrollbars. (Although the always-on Mac-style scrollbars mentioned above have the advantage of matching the existing project panel & Quick Docs scrollbars, OTOH it seems reasonable to have two different styles for "compact" panels vs. a "main" scrolling area).

[core-ai-bot]

Comment by redmunds
Tuesday Jun 04, 2013 at 19:57 GMT

---

I definitely like the idea of less-ugly scrollbars on Windows. My concern is that we only update the scrollbars in some, but not all, cases -- which, as a whole, may be worse.

This still doesn't answer the question of do we want to fill in the gap in the gutter next to the horizontal scrollbar in the case where is does show (i.e. user has "always show scrollbars" setting on). To help everyone visualize what the final solution might look like (which I should have done from the beginning), I updated this branch with platform-specific fillers.

On Mac, the gutter filler (bg image) now matches the scrollbar background gradient, so it now looks like scrollbar continues all the way to the left (although scroller thumb never goes any further to the left than it did before). I also added a bg image in the lower right corner filler that provides a "miter cut" look (which I stole from Xcode). (Note that this still needs bg images for retina).

On Windows, I made the solid filler color darker to try to blend in better with the scrollbars.

[core-ai-bot]

Comment by redmunds
Friday Aug 16, 2013 at 15:38 GMT

---

@larz0 I forgot to show you the updated Mac version when I showed you the Windows version. Can you review it again to make sure you're ok with the filler images I added for Mac. The images are an attempt to match the subtle gradient of the Mac scrollbar background. Also, there are only non-retina versions. Let me know if they are OK, should be updated, or if this should be for Windows-only.

[core-ai-bot]

Comment by larz0
Friday Aug 16, 2013 at 17:27 GMT

---

@redmunds looks good! Tested on Mac with scrollbars turned on and off.