How to customize the Mini-Profiler UI

Question

I have installed Mini-Profiler on my MVC 4 application and it is working like a charm. The only problem I have with it is that the UI covers up a critical part of my UI. I can move it around the page using the css but ideally I would like to make it so it defaults to a hidden state with a drawer button to make it pop out. I tried writing a javascript function that would manipulate the results display but when I placed the following code at the bottom of my _Layout.cshtml file the mini-profiler would place all of it's code at the very bottom of the page after my customize function so the customize function would run before the profiler.

@MiniProfiler.RenderIncludes() 
<script type="text/javascript">
    $(function() {
        CustomizeMiniProfiler();
    });
</script>

Any ideas? Ideally I don't want to modify the source code of Mini-profiler as I would like to make it easy to upgrade going forward with NuGet.

Answer 1

Much of the Mini Profiler initialisation is deferred till way after jQuery.ready, this is so Mini Profiler has minimal impact on page load behaviour. See: https://github.com/SamSaffron/MiniProfiler/blob/master/StackExchange.Profiling/UI/includes.js#L597

I would recommend a pull request that hooks into the Mini Profiler initialization process perhaps:

MiniProfiler.afterInit(
   function(){
      /* if called after init happens right away, else happens after init */
   });