Parameter usage highlighting (part 2)


Ok.  As promised, here’s a picture of the feature in action:



            




So here’s a bit of code of mine.  It’s specific purpose is to
convert a Generalized Nondeterministic Finite Automata into a Regular
Expression.  Now, this code is basically a port of an algorithm in
the book Introduction to the Theory of Computation
by Sipser.  As such i’ve tried to keep the names and structure
very similar to his so that it’s easy to refer back to the text and
understand what’s going on.  Unfortuantely, in the algorithm dummy
mathematical throw-away variables (like Qi and Qj)
are used, and when you translate that to code you tend to find it
difficult to distinguish individual variables in the density of the
surrounding code.  



However, with this feature it suddendly becomes a lot easier.  You
simply place your identifier on the variable in question and very
quickly afterwords two things happen.  The first is that the
variable you are on gets surrounded by a small dotted rectangle. 
This allows you to distinguish what the declaration is and what the
references are very easily and it also helps a user understand what’s
going on the first time this appears (in case they just moved their
cursor to a location while navigating around and are suddenly alarmed
by the highlights that pop up).  The second is that all references
to that variable show up highlighted in your source.  Now i can
very simply scan the code and ensure that i’m using this variable
properly.  Without this feature i would most likely get confused
between qi and qj as i flipped back and forth from the code to the
algorithm.



Now that you’ve seen it, is there anything you would like changed about
it?  Or do you think the feature as is would be a useful thing?


Comments (15)

  1. AT says:

    I wish more then one argument to be highlighted.

    Or better – use Microsoft Word (or simply RTF) for source code instead of plain-text. Allow to color anything and insert pictures, tables, charts, comments, make parts of code italics or in another font.

    Potentialy this info can be kepts in addition to plain-text code version.

  2. kevinowen says:

    Even in its current state, having this feature would be great.

    It would be even better if it also had the capability to work in "reverse," doing the same highlighting when the cursor was on a usage of the variable (as opposed to the declaration of the variable).

    This functionality would probably also be useful outside the scope of a method.

    Any chance of at least the basics of this feature (the part that you already have implemented) still making it in to Whidbey? Or, if not, could it potentially be released as an add-in or PowerToy?

  3. This looks great.

    1. I would like to see as kevinowen pointed out, the reverse lookup. That is select a variable somewhere in code that isn’t a declaration and have it lookup all instances used.

    2. Color color. Would like to see different colors.

    3. I don’t know if you mentioned this before but multi-highlight would be useful.

    4. Can this be expanded for a code segment instead of just variables and methods. example. I have 3 lines I repeat, and i wanna know where they are repeated.

    5. Is this a bug? The first qi does not have a yellow tag on the side line while the rest of them do. The middle ones have the yellow tags over 2 lines when it should be one.

    Keep up the good work.

  4. Ariel says:

    Great idea. Much needed. It’s the beginning of the revolution of making code less 2D and more 3D.

    Cyrus, how about you post a suggestion on LadyBug and send us the link to vote on it?

    Keep up the (unbelievably) good work.

  5. Very cool. The only problem might be if you scrolled so far down that the param list is no longer visible. However, I don’t think that that is much of a problem, since your method is probably too long then in any case.

    I say go for it as is.

  6. I think the concept is good but I’d rather this show up on the context menu like Go To Definition. Point at a name and select Highlight Usage. If multiple names are highlighted, then a different color would automatically be selected. If the name is already highlighted, then the menu would contain Unhighlight Usage.

  7. CyrusN says:

    KevinOwen: "Even in its current state, having this feature would be great.

    It would be even better if it also had the capability to work in "reverse," doing the same highlighting when the cursor was on a usage of the variable (as opposed to the declaration of the variable)."

    Sounds like a very good idea. I can try coding that up as well. I worry about things getting too *noisy*. But… maybe it’ll all be fine.

    "This functionality would probably also be useful outside the scope of a method."

    Agreed. However, outside of a method you often have things that are accessible from many different files. I.e. a field can be accessed from many different parts in many different files, etc. Whereas locals/params are always local to a file. In the former case i think a took like "find all references" makes a lot of sense so you get a persistant list that you can use to navigate around with, whereas in the latter case the color suffices since it’s always contained within one source file.

    "Any chance of at least the basics of this feature (the part that you already have implemented) still making it in to Whidbey?"

    Practically 0. Sorry. 🙁

    "Or, if not, could it potentially be released as an add-in or PowerToy?"

    That’s an interesting idea, and we’ll be looking into that heavily!

  8. CyrusN says:

    Sushant: " This looks great.

    1. I would like to see as kevinowen pointed out, the reverse lookup. That is select a variable somewhere in code that isn’t a declaration and have it lookup all instances used."

    I’ll defintely try that out and post a pic of that in action if i have time.

    "2. Color color. Would like to see different colors."

    I’m using a standard VS highlighter. So i believe that going to: Tools | Options | Fonts and Colors | …

    will let you change this color.

    "3. I don’t know if you mentioned this before but multi-highlight would be useful."

    I talked about that in the previous post on this subject. However, the model is kind of interesting. Does highlighting stay active in teh presense of editing?

    "4. Can this be expanded for a code segment instead of just variables and methods. example. I have 3 lines I repeat, and i wanna know where they are repeated."

    hrmmm… potentially yes. But with far more work. This took an extremely small amount of code, whereas searching for code segments is going to be far more difficult.

    "5. Is this a bug? The first qi does not have a yellow tag on the side line while the rest of them do. The middle ones have the yellow tags over 2 lines when it should be one."

    No. The yellow tags on the left side actually represent edits to the buffer. (another new feature to whidbey). Unfortunately, i can see how they look related. I’ll take another screen shot that doesn’t have that problem!

    "Keep up the good work."

    Thanks!

  9. CyrusN says:

    Ariel: " Great idea. Much needed. It’s the beginning of the revolution of making code less 2D and more 3D.

    Cyrus, how about you post a suggestion on LadyBug and send us the link to vote on it?

    Keep up the (unbelievably) good work."

    The Ladybug bug is linked in part 1 of this topic. Just scroll to the previous blog entry and follow that!

  10. CyrusN says:

    Sean: "Very cool. The only problem might be if you scrolled so far down that the param list is no longer visible. However, I don’t think that that is much of a problem, since your method is probably too long then in any case. "

    Perhaps. Although, it should be ok since you can scroll down without moving the cursor. But i can see that being an issue.

    The idea of persistant highlighting (which other people are recommending) would be helpful in those cases.

  11. CyrusN says:

    David: "I think the concept is good but I’d rather this show up on the context menu like Go To Definition. Point at a name and select Highlight Usage. If multiple names are highlighted, then a different color would automatically be selected. If the name is already highlighted, then the menu would contain Unhighlight Usage."

    That sounds like a great idea! I’ll also try to code up something like that.

    BTW, would you mind if these highlights weren’t persisted if you shut down and started VS back up again?

  12. DrPizza says:

    I’ve not read most of what you’ve written on this. But it needs to work for arbitrary selections (parameters, locals, class members, types, functions, etc.). And it needs to be operated simply by putting the mouse inside a token (which I think you’ve done, but I don’t know for sure).

  13. Duane Roelands says:

    Looks great!

    I may be repeating suggestions made by others, but here are my thoughts.

    1. Make this feature a selection from the context menu (right-click, "Highlight references to this").

    2. Allow the activation of highlighting from either the method definition or froma reference to the variable in code.

    3. Retain the highlight until the user explicitly turns it off, i.e. right-clicks and chooses "Remove highlights from references to this". Useful for methods longer than one screen.

    Great idea, great feature, cool implementation.

  14. Humphreys says:

    Pretty cool! Can you change the variable and have it changed throughout the method?

  15. CyrusN says:

    Humphreys: Yup! That’s what the rename refactoring does!