One open question is whether we want to use a special layout for the "timestamps + narrow width" combined state, or a more generic "narrow width" layout that works with or without timestamps. The second one (narrow width layout) would be best IMO, because it's more realistic to maintain. If we do something very specific to timestamps+narrow, chances are we will break it in future updates and the bug reports will be slow to come up. (It's also a lot of effort for a rare use case.)
I can think of two possible layouts that may help:
### 1. Timestamp and source on first line
No timestamp:
```
----------------------------------------
manifest.json
⚠️ The extension "React Developer Tools"
is not allowed to access about:newtab
----------------------------------------
```
With timestamp:
```
----------------------------------------
09:40:49.881 manifest.json
⚠️ The extension "React Developer Tools"
is not allowed to access about:newtab
----------------------------------------
```
Inside groups, it might end up looking like like:
```
----------------------------------------
| 09:40:49.881 manifest.json
| ⚠️ The extension "React Developer
| Tools" is not allowed to access
| about:newtab
----------------------------------------
```
(Keeping the timestamp in the left gutter would require using a different HTML structure for this case than the one used for the non-indented case, which is impractical. So we have to end up with unaligned timestamps. We could also hide the timestamps altogether inside groups; in my experience groups tend to be short-lived and created by code that uses groups as a kind of custom "see more info" mechanism, logged in one burst.)
Implementation: this would require changing the DOM structure on narrow widths (or when docked to the side maybe). And I think the changes would be substantial unless we decide to use CSS Grid to fit everything in different grid cells (but having each row be a grid could create perf issues I believe?).
### 2. Push source to a new line to reclaim some space
No timestamp:
```
----------------------------------------
⚠️ The extension "React Developer Tools"
is not allowed to access about:newtab
manifest.json
----------------------------------------
```
With timestamp:
```
----------------------------------------
09:40:49.881 ⚠️ The extension "React
Developer Tools" is not
allowed to access
about:newtab
manifest.json
----------------------------------------
Inside a group:
```
----------------------------------------
09:40:49.881 | ⚠️ The extension "React
| Developer Tools" is not
| allowed to access
| about:newtab
| manifest.json
----------------------------------------
```
Implementation: this second layout tweak seems much easier to implement, at least in the general log case we can probably do it just by changing the message+source container's `flex-direction` to `column` and tweak some Flexbox styles. Network requests might need a bit more work but that looks doable.
Bug 1502294 Comment 13 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
One open question is whether we want to use a special layout for the "timestamps + narrow width" combined state, or a more generic "narrow width" layout that works with or without timestamps. The second one (narrow width layout) would be best IMO, because it's more realistic to maintain. If we do something very specific to timestamps+narrow, chances are we will break it in future updates and the bug reports will be slow to come up. (It's also a lot of effort for a rare use case.)
I can think of two possible layouts that may help:
### 1. Timestamp and source on first line
No timestamp:
```
----------------------------------------
manifest.json
⚠️ The extension "React Developer Tools"
is not allowed to access about:newtab
----------------------------------------
```
With timestamp:
```
----------------------------------------
09:40:49.881 manifest.json
⚠️ The extension "React Developer Tools"
is not allowed to access about:newtab
----------------------------------------
```
Inside groups, it might end up looking like like:
```
----------------------------------------
| 09:40:49.881 manifest.json
| ⚠️ The extension "React Developer
| Tools" is not allowed to access
| about:newtab
----------------------------------------
```
(Keeping the timestamp in the left gutter would require using a different HTML structure for this case than the one used for the non-indented case, which is impractical. So we have to end up with unaligned timestamps. We could also hide the timestamps altogether inside groups; in my experience groups tend to be short-lived and created by code that uses groups as a kind of custom "see more info" mechanism, logged in one burst.)
Implementation: this would require changing the DOM structure on narrow widths (or when docked to the side maybe). And I think the changes would be substantial unless we decide to use CSS Grid to fit everything in different grid cells (but having each row be a grid could create perf issues I believe?).
### 2. Push source to a new line to reclaim some space
No timestamp:
```
----------------------------------------
⚠️ The extension "React Developer Tools"
is not allowed to access about:newtab
manifest.json
----------------------------------------
```
With timestamp:
```
----------------------------------------
09:40:49.881 ⚠️ The extension "React
Developer Tools" is not
allowed to access
about:newtab
manifest.json
----------------------------------------
```
Inside a group:
```
----------------------------------------
09:40:49.881 | ⚠️ The extension "React
| Developer Tools" is not
| allowed to access
| about:newtab
| manifest.json
----------------------------------------
```
Implementation: this second layout tweak seems much easier to implement, at least in the general log case we can probably do it just by changing the message+source container's `flex-direction` to `column` and tweak some Flexbox styles. Network requests might need a bit more work but that looks doable.
One open question is whether we want to use a special layout for the "timestamps + narrow width" combined state, or a more generic "narrow width" layout that works with or without timestamps. The second one (narrow width layout) would be best IMO, because it's more realistic to maintain. If we do something very specific to timestamps+narrow, chances are we will break it in future updates and the bug reports will be slow to come up. (It's also a lot of effort for a rare use case.)
I can think of two possible layouts that may help:
### 1. Timestamp and source on first line
No timestamp:
```
----------------------------------------
manifest.json
⚠️ The extension "React Developer Tools"
is not allowed to access about:newtab
----------------------------------------
```
With timestamp:
```
----------------------------------------
09:40:49.881 manifest.json
⚠️ The extension "React Developer Tools"
is not allowed to access about:newtab
----------------------------------------
```
Inside groups, it might end up looking like like:
```
----------------------------------------
| 09:40:49.881 manifest.json
| ⚠️ The extension "React Developer
| Tools" is not allowed to access
| about:newtab
----------------------------------------
```
(Keeping the timestamp in the left gutter would require using a different HTML structure for this case than the one used for the non-indented case, which is impractical. So we have to end up with unaligned timestamps. We could also hide the timestamps altogether inside groups; in my experience groups tend to be short-lived and created by code that uses groups as a kind of custom "see more info" mechanism, logged in one burst.)
Implementation: this would require changing the DOM structure on narrow widths (or when docked to the side maybe). And I think the changes would be substantial unless we decide to use CSS Grid to fit everything in different grid cells (but having each row be a grid could create perf issues I believe?).
### 2. Push source to a new line to reclaim some space
No timestamp:
```
----------------------------------------
⚠️ The extension "React Developer Tools"
is not allowed to access about:newtab
manifest.json
----------------------------------------
```
With timestamp:
```
----------------------------------------
09:40:49.881 ⚠️ The extension "React
Developer Tools" is not
allowed to access
about:newtab
manifest.json
----------------------------------------
```
Inside a group:
```
----------------------------------------
09:40:49.881 | ⚠️ The extension "React
| Developer Tools" is not
| allowed to access
| about:newtab
| manifest.json
----------------------------------------
```
Implementation: this second layout tweak seems much easier to implement, at least in the general log case we can probably do it just by changing the message+source container's `flex-direction` to `column` and tweak some Flexbox styles. Network requests might need a bit more work but that looks doable.
PS: both styles require borders between messages so that it's clear which message the timestamp and/or source is related to.