Bugzilla

One small limitation of the current implementation: with the current DOM structure, we can't detect if two messages are on the same indentation level.

In this screenshot, you can see that the `console.groupEnd()` "command" at a second level is followed by an unrelated first-level "result", so we lose the border between the two.

I think that might be a very rare scenario though, so I could live with it.

One solution would be to change the DOM structure so that we have the indent level information on the message container itself:

```
<!-- before: -->
<div class="command">
  <span class="indent" data-indent="1" />
</div>
<div class="result">
  <span class="indent" data-indent="0" />
</div>

<!-- now: -->
<div class="command" data-indent="1">
  <span class="indent" />
</div>
<div class="result" data-indent="0">
  <span class="indent" />
</div>
```

One small limitation of the current implementation: with the current DOM structure, we can't detect if two messages are on the same indentation level.

In this screenshot, you can see that the `console.groupEnd()` "command" at a second level is followed by an unrelated first-level "result", so we lose the border between the two.

I think that might be a very rare scenario though, so I could live with it.

One solution would be to change the DOM structure so that we have the indent level information on the message container itself:

```html
<!-- before: -->
<div class="command">
  <span class="indent" data-indent="1" />
</div>
<div class="result">
  <span class="indent" data-indent="0" />
</div>

<!-- after: -->
<div class="command" data-indent="1">
  <span class="indent" />
</div>
<div class="result" data-indent="0">
  <span class="indent" />
</div>
```

Updated screenshot: attachment 9064500 [details]


One small limitation of the current implementation: with the current DOM structure, we can't detect if two messages are on the same indentation level.

In this screenshot, you can see that the `console.groupEnd()` "command" at a second level is followed by an unrelated first-level "result", so we lose the border between the two.

I think that might be a very rare scenario though, so I could live with it.

One solution would be to change the DOM structure so that we have the indent level information on the message container itself:

```html
<!-- before: -->
<div class="command">
  <span class="indent" data-indent="1" />
</div>
<div class="result">
  <span class="indent" data-indent="0" />
</div>

<!-- after: -->
<div class="command" data-indent="1">
  <span class="indent" />
</div>
<div class="result" data-indent="0">
  <span class="indent" />
</div>
```