Inside F#

Brian's thoughts on F# and .NET

F# source code structural colorizer available

Posted by Brian on November 18, 2010

Last week I mentioned the editor extension I am working on, and now it’s available for you to try out!  You can obtain the F# Depth Colorizer from the Visual Studio Gallery.  It’s a one-click install; once installed you’ll see it listed when you bring up the “Tools\Extension Manager” menu in Visual Studio:

FSDCEM

Once installed, the structure of your code will be highlighted in the editor, like this

FSDCGreyScaleScreenshot

or like this

FSDCRedBlueScreenshot

rather than plain old code like this

FSDCDisabledScreenshot

Get the idea?  As suggested by the first two screenshots, the colors are configurable.  A good UI for configuring the colors was beyond me, so the colors are configurable via a registry setting.  (EDIT: see also here) If you don’t have the registry entry, you get the “greyscale” colors from the first screenshot by default.  Those greyscale colors could be represented via the following registry entry:

Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Microsoft\VisualStudio\10.0\Text Editor\FSharpDepthColorizer]
"Depth0"="190,190,190,230,230,230"
"Depth1"="170,170,170,210,210,210"
"Depth2"="184,184,184,224,224,224"
"Depth3"="164,164,164,204,204,204"
"Depth4"="178,178,178,218,218,218"
"Depth5"="158,158,158,198,198,198"
"Depth6"="172,172,172,212,212,212"
"Depth7"="152,152,152,192,192,192"
"Depth8"="166,166,166,206,206,206"
"Depth9"="146,146,146,186,186,186"

Alternatively, the red-blue colors from the second screenshot are:

Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Microsoft\VisualStudio\10.0\Text Editor\FSharpDepthColorizer]
"Depth0"="240,180,180,240,220,220"
"Depth1"="180,180,240,220,220,240"
"Depth2"="240,172,172,240,216,212"
"Depth3"="172,172,240,212,216,240"
"Depth4"="240,164,164,240,212,204"
"Depth5"="164,164,240,204,212,240"
"Depth6"="240,156,156,240,208,196"
"Depth7"="156,156,240,196,208,240"
"Depth8"="240,148,148,240,204,188"
"Depth9"="148,148,240,188,204,240"

and more generally, the extension will look for the those registry keys.  (You can save these registry examples to a file “foo.reg” and then run the “foo.reg” file to install those keys, or use the “regedit” tool to inspect/change the values.  Be careful when modifying your registry!)

The DepthN values are strings of six numbers, representing two sets of RGB values, e.g.

DepthN = R1, G1, B1, R2, G2, B2

where N is the depth of the nesting of the source code structure, the RGB1 values are the color of the left edge of the highlight (intention is to provide more visual contrast at the edge), and the RGB2 values are the main color for highlighting that nesting depth.  There must be 10 depths, if you go deeper, the tool cycles around:

FSDCDeepNestingScreenshot

where the colors are getting darker until it’s gone 10 deep and cycles back around to using the lightest pink color from that color set.

I’ll publish the source code for this VSIX extension soon. (EDIT: It’s posted, see here.)   For now, I’d encourage you to try it out; you can leave feedback on my blog or on the gallery.  Enjoy!

(Much thanks to Noah who helped me write the editor portion of the extension.  Thanks to many people who did beta testing and offered useful feedback.)

About these ads

14 Responses to “F# source code structural colorizer available”

  1. nyi nyi said

    I love it.

  2. […] F# source code structural colorizer available […]

  3. Joel Mueller said

    This is an excellent enhancement for reading F# source code. I really like it so far. One issue – it seems to have a small problem with the end of this multi-line string literal…

  4. […] F# source code structural colorizer available – Brian McNamara releases his F# Depth Colorizer plugin which brings highlighting of the nesting depth of F# code to the Visual Studio IDE […]

  5. Ian Voyce said

    Thanks for this Brian, good to see the new VS editor getting some F#-specific enhancements.

    I’m interested to see how much impact this on the understandability of F# code – I have to say there’s some scepticism here, but I’m giving it a try. I’ve set my colour scheme to be much subtler than the ones you’ve specified; essentially just alternating between white and very, very light gray, so it’s a bit more of a background thing.

    One thing I did notice that I don’t think you mentioned is that if you add your own registry entries you have to add *all* of the DepthN values (0-9), if you only add a couple they’ll be ignored.

    I bet it won’t be long before someone asks for expand/collapse buttons on the levels…!

  6. This extension looks great, would love to see how it works together with a dark color theme. But color editing via the registry? Yikes.

  7. Sebastian Ullrich said

    Nice, this will provide a great starting point for other fsc-backed extensions!
    Btw, you should really consider releasing the code on github or the like. Maybe someone will be nice enough to implement a settings dialog :) .

  8. […] Comments (RSS) « F# source code structural colorizer available […]

  9. […] by Brian on November 21, 2010 I’ve published the source code for the F# Depth Colorizer.  You can get the code from github.  The code is available under the Apache 2.0 […]

  10. Richard said

    // When I have a function takes tuples
    let sum (a:int, b:int) (c:int, d:int) =
    a + b + c + d

    // colorizer works
    if true then
    ()
    else
    ()

    // colorizer did not work
    if (sum (1, 2) (3, 4)) > 10 then
    true
    else
    false

  11. […] F# source code structural colorizer available « Inside F# http://lorgonblog.wordpress.com/2010/11/18/f-source-code-structural-colorizer-available/ […]

  12. nCdy said

    got bug …

    for example

    member X.deltaCompareArchive l1 l2 typenumber =
    inconnection
    match typenumber with
    | 0 ->
    Seq.filter(fun x -> x.ID_Line = l1 || x.ID_Line = l2) @>
    | _ ->
    Seq.filter(fun x -> (x.ID_Line = l1 || x.ID_Line = l2 ) && x.DataType = typenumber ) @>
    |> fun pquery ->

    |> query |> Seq.choose id
    |> Seq.collect(fun a -> [fst a; snd a])
    |> Seq.distinct
    |> List.ofSeq
    |> fun p ->
    if p.Length = 0 then null
    else
    let STRackondeltas =

    so my |> fun p -> breaks colorizer

  13. Matej Mihelič said

    Hello.

    I’ve had quite a problem tracking down the reason for frequent crashes of my VS2010SP1. I finally found this in the Activity.Log:

    801
    2011/09/24 16:55:13.943
    Error
    Editor or Editor Extension
    System.ArgumentOutOfRangeException: Specified argument was out of the range of valid values. Parameter name: bufferPosition at Microsoft.VisualStudio.Text.Editor.Implementation.TextViewLineCollection.GetCharacterBounds(SnapshotPoint bufferPosition) at FSharpDepthColorizer.FullLineAdornmentManager.RefreshLine(ITextViewLine line) at <StartupCode$VSIXColorizer>.$MyAdornmentManager.-ctor@133-23.Invoke(TextViewLayoutChangedEventArgs e) at Microsoft.FSharp.Control.CommonExtensions.SubscribeToObservable@1777.OnNext(T value) at Microsoft.FSharp.Core.CompilerServices.RuntimeHelpers.h@744.Invoke(Object _arg1, TArgs args) at <StartupCode$VSIXColorizer>.$MyAdornmentManager.-ctor@133-22.Invoke(Object sender, TextViewLayoutChangedEventArgs e) at Microsoft.VisualStudio.Text.Utilities.GuardedOperations.RaiseEvent[TArgs](Object sender, EventHandler`1 eventHandlers, TArgs args)

    Perhaps you can track it down? I hope it is not a freak colision with some other extension that I am using.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

Join 30 other followers

%d bloggers like this: