Group multiple elm-debugger Msg into a single one (and a number) - if they are exactly the same.

[AionDev]

I'm implementing some advanced drag and drop in project i have. And because of the way HTML5 DnD works, i must have a DragOver event.
Problem is: I get like 600-1000 msg for a 4-5 moves ( things must be created first - using dnd - and then other stuff gets droped inside them - so for me to test the 5'th level move - i need to do 1,2,3,4 - and because of this - all previous DragOver Msg are stacking up - making a mess - as you can see :

So to solve this, i propose we get inspired by the functionality of console.log in Chrome Developer Console.
When exactly the same message is logged in console consecutively - you get a single message and a number in front.

We need each Msg individually - so the group must be expandable if you want - but not by default..

Notice i'm not talking about grouping the Msg by type - ex:
Track_HolderEvents will be rendered as a group - and ReconstructNavigatorTree - is not part of that.
NO - that will stop you for seeing the patterns.
The other Elm-TimeTravel Debugger does this and it doesn't work with nested Msg - which is my case.
for ex: I need to see when Track_HolderEvents Drop_Holder event happens.
But it's filtered out - if i do a filtering on Track_HolderEvents
It doesn't let me to filter out only: Track_HolderEvents DragOver_Holder

But just by comparing pure strings - as they already are in the list that generates this UI - will solve this problem. Simple logic. If 2 consecutive msg are the same as strings - group them.

So in the increment / decrement app - if you have :

Increment 
Increment 
Increment 
Decrement 

it will be displayed as:

► 3 Increment 
Decrement 

And if you have:

Add 1
Add 2
Add 2
Subtract 1

it will be displayed as:

Add 1 
► 2 Add 2
Subtract1

And by expanding the (► group) you can still click on each one, and see the model changing as usual..

Another great addition i can think of is: - by dragging and droping a msg inside a special box - call it hide - it will hide that particular string = Msg form showing in the Elm-Debugger panel..
This gets tricky when using values - like the Add 2 from above. But using Regex to hide only the strings that start with, contain - or even more advanced:
By putting a rule on something like GenerateCar Black CarId "1" as in: GenerateCar _ CarId _
Will let you also hide: GenerateCar Red CarId "2" from the Debugger-Panel. Using string parsing we can get any level of customization we need.
And by reverting the filter action - you can show only the Msg you are interested in. Not all of them.
We just need a nice - ui for building this filters.
I already have something in mind. I'll follow up on this idea in another issue if i can make something that looks nice.
So this is why i think going with string parsing, and working on the already created list of Msg, can be beneficial.
What do you folks think of this?
Can this problem be solved better in some other way?

[process-bot]

Thanks for the issue! Make sure it satisfies this checklist. My human colleagues will appreciate it!

Here is what to expect next, and if anyone wants to comment, keep these things in mind.

[evancz]

We have discussed some ideas like this. There is actually a draft implementation for grouping related messages in #77.

I added this particular request to #98, so we can continue tracking there. Thanks for the report!