Add https://github.com/peterflynn/everyscrub extension

[humphd]

While discussing the idea of adding more inline editors, I came across this cool everyscrub extension. It basically adds a listener for you holding down Alt + mousedown scrubbing on a number, and then increases or decreases it. Here is what it looks like:

It's fun, and makes it easy to try things. What isn't great about it is that it's yet another UI tool that is impossible to self-discover. @flukeout maybe you have ideas for how we could modify it slightly to have it show up for users in a way that makes it obvious how to use?

Not sure if we want this or not, but I thought I'd do a PR to experiment with it.

[flukeout]

Hey, I'll check it out. Are we able to wrap the 'editable' things in some kind of span / character wrapper that we can then apply CSS to?

Agreed tho, this is super sweet.

[humphd]

On mousedown we can do something here: https://github.com/mozilla/brackets/pull/843/files#diff-c0ef5bd688a422279dd0e1b5c0b4713eR164. Is that useful? You don't have a global, static view of all the editable things, no. It's opportunistic based on where you point your mouse.

[humphd]

NOTE: #844 is doing some custom cursor overlay stuff we might be able to steal for this.

[flukeout]

There is some built in behavior in brackets that shows a little popup when you have your cursor within a color value...

We could look where that is happening and try to add something for scrubbable values too. This all lives in the QuickView feature. So I'll dig into that tomorrow.

[flukeout]

Some thoughts on this

• Would be nice to be able to set the increment unit depending on unit type, there's a big range...
  • 1 for px
  • .01 for opacity
  • ...
• You can scrub color values with this, which we should probably also remove

[humphd]

I'm pretty sure that code lives in https://github.com/mozilla/brackets/blob/master/src/extensions/default/QuickView/main.js. We could borrow from that to show the scrubber arrow and unit stuff.

[hkirat]

This is what I did in #844 : https://github.com/mozilla/brackets/pull/844/files#diff-172c2aa71bb7326386a85125ccd13603R145
Would be good to reuse something if it already exists in brackets though.

[flukeout]

Here are some ideas for adding an affordance to this cool feature: a little pop-up bubble (similar to what we do for the colorpicker. It would appear when the text cursor is on an editable-property.

Here's an option above the code, and beside the line of code it affects (with a highlight on the number it will change)

I like the first option better as it requires a smaller mouse movement to use. In addition, we could delay the appearance of this bubble a little bit so that it's not distracting. We could also clear out the bubble if someone starts editing the value by typing.

cc @humphd