Tone down live highlight decorations

[njx]

The more I use live highlight, the more I think the original design for the overlay decoration is too heavy. It just usually feels like it's too visually strong, too complex and in the way of what I'm trying to look at - the transparent gradient obscures the edges of the selected item and just feels like it's messing with the design. I often end up just turning it off.

I think we should consider changing to a simpler/thinner outline, and either no overlay or a very light overlay. I know it's tricky because it has to take into account different possible background colors.

[njx]

I'm calling this low priority, but nominating it for Brackets 1.0 because I think it really affects the feel of the product. Assigning to @larz0.

[njx]

(The problem is more noticeable against a non-white background. I think my problem with it is really the wide whitish gradient.)

[redmunds]

I think this is relative to the design of your page. Sometimes I have to unselect/reselect in Citrus Cafe page because I can't find the highlight.

What about adding some preferences where user can tweak the color (which also includes how light/dark), the transition time, and maybe some other factors? And also turn off :)

[njx]

That's funny, because it's often in Citrus that I find it too strong :) But maybe it's just me.

I actually wonder if we could do a really subtle continuous animation of some kind (a slight pulse, maybe) in lieu of a strong visual. But that way may lay madness.

[larz0]

I'd like the "highlight" to:

1. not affect the color of the selected object i.e. no glowing blue tint.
2. allow me to see small border radii
3. allow me to see the border style
4. be noticeable.

Something like this would be cool but I'm not sure if it's doable:

[larz0]

The border is not a part of the selection. Only the dots are.

[njx]

Those principles make a lot of sense to me in the abstract, though I worry that a solution that tries to satisfy all of them will end up being unsatisfying :) The dots are an interesting solution, but they definitely don't give you as clear a visual sense of the bounding box.

What about a decoration that's 1px outside of the border? I guess that might still make it hard to see the border. It might also be misleading if the box doesn't have a border (because then it would look like the border, but actually be too large).

In my original pre-Brackets prototype, I didn't have a continuous highlight - I had a keyboard shortcut that whenever you hit it would briefly show a highlight that then faded away. If you wanted to see it again, you just hit the shortcut again. Unfortunately I think that only works well if you use a simple shortcut (one-handed, no modifiers besides Cmd), and those shortcuts are precious and mostly taken.

[larz0]

Sounds good. We can also make the outline flash just a little bit by using subtle color transitions.

[peterflynn]

Early on, we talked about hiding the highlight when you start typing/editing, and bringing it back when you stop for a moment. That helps mitigate the issue of the highlight making it hard to see what's going on while you're e.g. adjusting bg color or corner radius.

Realistically, I think any highlight design is either going to obscure the bg color, or the border, or it's not going to indicate the bounding box very well. Hiding the decoration while editing seems like a solid way to escape that trap...

[larz0]

Yeah that could work, right now I have to hide it manually. Where can I find the stylesheet that styles the selection? I'd like to experiment.

[redmunds]

The styles are done in code in src/LiveDevelopment/Agents/RemoteFunctions.js in the _makeHighlightDiv function.

[njx]

I think combining Peter's suggestion with just toning down the existing highlight, and possibly adding some sort of subtle animation when it appears, would be a good compromise.

[larz0]

Ok cool. Thanks @redmunds!

[larz0]

Would be nice if we could scroll to the element if it's not in the viewport.

[njx]

@larz0 That should be possible, but I think it might be annoying if I'm just doing work in my CSS file and don't necessarily want the preview to automatically scroll around. It might make a good option/preference.

[larz0]

Good point. We could do it to HTML files first and see what that feels like.

[larz0]

@njx PR is up. I've added a very subtle white glow around the blue border for edge cases. I liked @peterflynn's idea of turning the selection border off on edit but I'm not sure how to do that.

[njx]

Just merged the new approach to live highlight, which uses a simpler decoration combined with a slower fadeout. I'm going to leave this open to play with the "hide border on edit" idea.

[njx]

Reassigning to me

[njx]

Closing and opening a new issue on the "hide border on edit" idea