[CLOSED] Show scroll track tickmarks for Find results

[core-ai-bot]

Issue by peterflynn
Friday Sep 13, 2013 at 10:56 GMT
Originally opened as adobe/brackets#5191

---

One more bonus feature to squeeze in this sprint, if anyone has cycles to review it :-)

This shows yellow tickmarks in the scrollbar track showing the position of each search result (similar to Chrome, WebStorm, etc). On Mac, where there's no scrollbar visible normally, the tickmarks just float on the right hand side (not sure if this is what those other apps do too).

The tickmarks are disabled for inline editors right now. Find is somewhat broken in inline editors anyway, so it's probably not a big loss.

The tickmark API isn't intended for reuse elsewhere yet, but I think eventually we should generalize it so it could also be used for linting errors/warnings, "diff marks", etc.

---

peterflynn included the following code: https://github.com/adobe/brackets/pull/5191/commits

[core-ai-bot]

Comment by njx
Friday Sep 13, 2013 at 16:43 GMT

---

Very cool!

On the Mac, the tickmarks end up beneath the scrollbar when it's visible (and when you mouse over the scrollbar and the track appears, it becomes hard to see the tickmarks since the track is only slightly transparent). Not sure if there's any way to improve this since creating a div for the tickmarks above the scrollbar would block mouse input to it. I don't think it's a huge deal anyway since the tickmarks are more for seeing roughly where results are, not necessarily for clicking directly on, and they're visible while doing ordinary touch-scrolling.

[core-ai-bot]

Comment by gruehle
Friday Sep 13, 2013 at 22:02 GMT

---

The behavior on the mac is different depending on the scroll bar preferences. If you have auto-hide scrollbars, the tick marks end up below the scrollbar, as NJ mentioned. If the "Show scroll bars" setting is "always", the tick marks end up on top of the scrollbar. Again, not a huge deal (and actually kind of cool, since it makes the ticks more visible when scrollbars are persistent).

[core-ai-bot]

Comment by gruehle
Friday Sep 13, 2013 at 22:33 GMT

---

Initial review complete. This is awesome!

[core-ai-bot]

Comment by gruehle
Friday Sep 13, 2013 at 22:38 GMT

---

@larz0 -- can you check the color and size of the tick marks? They are pretty close to Chrome (and look good to me), but should get your blessing.

[core-ai-bot]

Comment by njx
Friday Sep 13, 2013 at 22:38 GMT

---

Ah, if we have pointer-events: none on the tickmarks div, then it would be fine for it to always be on top of the scrollbar. I wonder why they don't show up on top in the auto-scrollbars case.

[core-ai-bot]

Comment by larz0
Friday Sep 13, 2013 at 23:19 GMT

---

@gruehle We should use orange for the the tick marks (#E3B551) so we don't need to add borders to call out the tickmarks as they look slightly hairy. 15px width would be better for OS X because that's the width of the scrollbar track; not sure about Windows.

This is what it looks like with darker tick marks (#E3B551)

[core-ai-bot]

Comment by larz0
Friday Sep 13, 2013 at 23:23 GMT

---

@gruehle looked at it the second time and I think it looks good. Disregard my previous screenshot. But width should be 15px for OS X.

[core-ai-bot]

Comment by peterflynn
Sunday Sep 15, 2013 at 10:57 GMT

---

@gruehle Changes pushed!

[core-ai-bot]

Comment by gruehle
Monday Sep 16, 2013 at 20:25 GMT

---

@peterflynn NJ and I were actually serious about pulling in underscore.js. Since that is a bit out of scope for a bonus feature like this, I went ahead and filed that as #5229.

In the meantime, this looks great! Merging.

[core-ai-bot]

Comment by jasonsanjose
Monday Sep 16, 2013 at 20:34 GMT

---

@gruehle I think you meant underscore/lodash in your most recent comment too right? I was hoping to add debounce to improve typing performance elsewhere.

[core-ai-bot]

Comment by gruehle
Monday Sep 16, 2013 at 20:35 GMT

---

Yes, I meant underscore. 😊

[core-ai-bot]

Comment by njx
Monday Sep 16, 2013 at 21:25 GMT

---

@peterflynn Did you ever look into why the tickmarks don't show up on top of the scrollbar in OS X?