[VSCode Revealer]: Fix revealer workflow for style properties sections

[mliao95]

This PR changes revealing workflow for clicking style properties and style sheet links.

Issues:

• VSCode reveals style sheet whenever a style property is clicked
• Clicking on a style sheet in the styles properties section does not reveal anything

Changes:

• VSCode only reveals the style sheet when the user CTRL + Click on the style property
• Clicking on a style sheet link in the styles properties section will reveal the style sheet in VSCode.

GIF:

[vidorteg]

LGTM

[billie-spektor]

Hi mliao95, I just noticed that clicking on the property (without ctrl) does bring me to the CSS file. Is this intentional behaviour or regression? I'm on version 1.4.5.

[mliao95]

Hey @billie-spektor , thanks for bringing this up. This is an intentional feature. Is this interrupting your workflow? If so, we'd love to hear about it and see what we can do from our side to provide a better experience.

[billie-spektor]

Hi @mliao95,

We previously talked about the reasons in #259; it mainly has to do with avoiding unintended context switching. When I'm working on a CSS component in file 1, I might want to quickly tweak or toggle a property for a different component in file 2 to see how these components interact.

Let's say component A is an animated button that moves in to the page from the bottom. This component is finished and now I'm working on component B, which is a picture that is on the page and in part behind the animated button. I would like to be able to easily alter the position of the button, maybe by temporarily turning off the animation, so that it doesn't interfere with the styling of component B, the picture. When I toggle the animation property, I'm (unintentionally) taken to the file for component A, even though that component is already finished. The only reason to turn the animation off was to avoid noise when styling component B.

I do like the ability to directly go to the file, but for me it works best if it's an explicit choice and not default behavior that is always triggered when experimenting and tweaking properties. Requiring control click (instead of just clicking) to jump to a file location also would be consistent with the implementation in the Edge developer tools in the browser.

If you prefer the current behavior, please consider a configuration option to alter this behavior.