Use a real button for lazy variables

[weinand]

Testing #143572

Currently the string (...) is used to indicate that a variables is "lazy" and that an additional click is required to retrieve the variable's value:

To make more obvious that the (...) is not a value but an interaction element, I propose to use a button:

@misolori what do you think?

[miguelsolorio]

+1 to using a more obvious button, though we do use the ... for expanding selection in folded regions and folded notebook cells

[roblourens]

I could easily use that type of button, but I'm worried that it wouldn't be more obvious as a button since it doesn't have a background color except on hover, and in this view we already use ... when text overflows

[weinand]

I'm fine with this kind of button as long as the background color is always shown.

Without the background color it just looks like the ellipsis we use in text overflows.

[roblourens]

If the background color is always shown, then there isn't any change when you hover it.

[weinand]

yes, that's the reason why I proposed the button: to increase discoverability
if the three dots look like a text overflow ellipsis '...' or the random string (...), users won't hover over it because they are not expecting an action.

But I'm not insisting on the button...
@misolori could you please decide what to do here?

[miguelsolorio]

If we decide to go with a button, I'd say we use our common icon buttons that have the hover feedback so that it's consistent:

CleanShot.2022-02-24.at.09.25.11.mp4

[weinand]

@misolori yep, makes sense: if the button neither looks like an ellipsis nor like some random text, then it will work because users will be curious to hover over it or click on it.

[roblourens]

I'm not crazy about that icon. We just replaced it in notebooks with the .... At a quick glance I think it looks more like a star

[weinand]

I'm not a fan of that icon too, but I like the fact that it is an icon and not some random text.

What's about this:

[miguelsolorio]

@weinand that icon can work too, I'm fine with whatever icon we decide to go with as long as it uses the same stylings as our icon in the toolbars (with the hover feedback)

[roblourens]

I'm also not sure about that icon which looks like "refresh"/"reload". @connor4312 suggested an eye, which I don't hate

Although with no context, I wonder whether the codicon looks enough like an eye

[roblourens]

There is also the "expand"

[weinand]

I like the concept of an "eye" but not the octicon suggested above.

This eye would work for me:

from https://primer.style/octicons/eye-24

---

Another candidate:

"unfold":

from https://primer.style/octicons/unfold-24

It is similar to the icon suggested by @misolori above:

but doesn't look like a "star"

[roblourens]

@misolori do you think it's worth taking another look at the shape of the eye codicon?

[miguelsolorio]

I can adjust the eyes to be a bit wider, the Fluent icon library (which is what ours are based on) also has updated versions that we can try:

[weinand]

The new icon actually looks more like an eye because the distance between the pupil and the eyebrow is smaller.
Let's go for it.

[miguelsolorio]

Eye has been updated:

[roblourens]

I strongly prefer the new version, thanks @misolori!

[capegreg]

illuminati symbol? This was a terrible and unnecessary change. The ellipse was a better lazy variable indicator, it made scrolling through a list of nodes or elements easier than this weird-looking eye. At least allow a setting to choose preference.

[capegreg]

If we decide to go with a button, I'd say we use our common icon buttons that have the hover feedback so that it's consistent:

CleanShot.2022-02-24.at.09.25.11.mp4

Why did you think VSCode needed this. Such a mistake!