Heading in the right direction – new analysis features

A long while ago in developer years – sometime last year in real time – the Reflector team decided to do a spike to see if we could spice up the Reflector code pane.

JS-highlight-1

The Reflector code pane

At the time we were focussed on making it easier for someone to take decompiled code and understand it, in order to get to the root cause of their debugging problem. When you edit code in Visual Studio there are many tools for helping you understand the flow of data of data through the methods. Since we generate the decompiled code, we know lots of information about the code and its relationship to other decompiled methods, and so we should be able to make this information available to users of Reflector in the form of some kind of head up display.

(If you want to try it out, you can download it here)

It’s no surprise that the code pane is Reflector is written as an embedded HTML browser pane. This is a quick way to display formatted styled text and via the anchor tag there is a well-used mechanism for handling navigation between items. The browser pane has an inbuilt JavaScript engine, and in the spike we added a quick JavaScript console so that you could get it to run simple JavaScript queries. We also checked that it was possible to call back from the JavaScript into the C# host and transfer data between the two worlds.

There’s where we stopped the work, until the recent Down Tools Week where we thought we’d see if we could quickly prototype some of the functionality that we’d hoped to do. Adam, a member of the UX team helped out.

Dividing in order to conquer

The beauty of the HTML/CSS/JavaScript combination is that it is really possible to separate the concerns. A designer can take some basic HTML and use the existing tooling in order to get the effect that they want. This may require pushing back changes to the developer, who needs to change the HTML to add hooks for the CSS – in our case there was a need for extra spans and CSS classes on various elements to make it possible to hook into them from the GUI side of things.

On day one, I simply took an example method, dumped the HTML that Reflector generated for it into a text file, wrapped it with the necessary elements including the Reflector style sheet, and script to load the version of jQuery that we had decided to use. I then checked this into the source control system and Adam could get to work on it. At the same time I could get to work modifying  the Reflector code so that jQuery was loaded into the browser and so that defined sequences of JavaScript would be executed whenever the body of the document was updated (as a result of the user changing the selected method in the navigation pane).

This way we could quickly prototype ideas such as variable highlighting:

JS-highlight-2

Or even some whacky ideas, like the one I had around labels and gotos. This used the jsPlumb library to add the graphics to the page, although the rest of the team weren’t so keen on it.

Linking the gotos

Linking the gotos

Not all browser panes are created equal (but some are more equal than others)

Of course, the browser world has been full of innovation, and browsers such as IE try to maintain backwards compatibility for pages that were written for earlier versions. They do this by offering a DOCTYPE declaration, the form of which determines the level of HTML and CSS that the browser instance is going to support.

Unfortunately it isn’t that easy for us. The embedded pane is customised in a different way, using registry entries that need to be set up by an installer. I had a quick play with this after reading this  blog post and although this method seems to be used by a number of installed applications on my machine:

JS-highlight-4

Despite the added entry being read by the process (according to procmon), the level of CSS support didn’t change to the desired level. Rather than spent more time debugging this, we simply opted to use jQuery to patch around the problem. This also meant that we didn’t need to rely on the user having run an installer to get the right level of support in the browser. The cost of this decision was the need to write more jQuery.

So did you get working?

I was hoping to get to a point where we called back from the JavaScript into C# in order to use the existing Reflector analyser. We didn’t get that far in the time we had available.

We first prototyped a way to customise whether a value is displayed as hex or decimal – sometimes when you are looking at code you find that Reflector’s heuristics have chosen the wrong option, and it is useful to see the bit pattern for a decimal number when it is being used as a mask:

JS-highlight-5

The second feature we added was highlighting a local variable or parameter together with all of its uses, including a sublime style map of the code so that you can see where there are other references which aren’t shown on the screen:

JS-highlight-6

What did we learn?

There are bugs and design questions in the prototype which we have made available, and we’d very much like your feedback, but the work we’ve done was an interesting exercise.

For me, HTML/JavaScript hit the sweet spot in designer/developer collaboration. The way that we could detach examples and turn them into standalone files so that Adam could edit them without requiring Visual Studio and the Reflector source code was very powerful. This would have worked even if we had the JavaScript calling back into the C# world, as we could easily mock out the callback routine. HTML makes it easy to get a live prototype working quickly.

By keeping the document separated into <STYLE> <BODY> and <SCRIPT> sections it was easy to transfer modified sections back into the Reflector code base. Additionally it was easy to use the F12 browser tools and their equivalents to debug the resulting behaviour.

Where can I get it?

It’s available for download as a free beta on the Red Gate labs site

 

One thought on “Heading in the right direction – new analysis features

  1. Eric Lawrence

    If you need help getting FEATURE_BROWSER_EMULATION to work properly, feel free to have the developer shoot me an email. (You did remember to write to the 64bit registry hive, right?)

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *