export to html layout enhancements

[Meteor0id]

Here is a list with things I noticed which you might want to change to try to match the layout of Signal Desktop.

1. images without text do not need to be in a bubble.
2. apply the background to .conversation-wrapper instead of .conversation-box so it can take 100% width rather than be constrained to a max width.
3. no need to print the date under each status message
4. on index.html sort conversations from most recent update to oldest update
5. Show note to self conversation as "note to self" with a note to self profile image.
6. show pinned conversations at the top of index.html with the "pinned" header
7. Show archived conversations at the bottom of index.html with an "archived" header. Add a button to the top of index.html with jumps down to archived chats. Unlike the real signal desktop all conversations are listed on the same page.
8. outgoing and missed calls should list the time at which they happened. You might want to print the time in UTC and actually add the letters (UTC +1 or such)
9. only print time on messages, not datetime
10. add icons to profile changed and safety number changed status messages
11. add some css / js to show the date of current scrolling position at the top of the screen while scrolling, only to fade to transparency when not scrolling for 3 seconds.
12. use phone number as name when no profile name is available (instead of using some ID) (both on index.html and at the top of the conversation)
13. print a version number of the Signal backup tool and if possible also the version number of Signal Android and or signal desktop and the date of export at the very bottom of each html file (including index.html). This is useful for archiving, knowing which version of Signal and which version of the backup tool were used can tell future reviewers something about the quality of the exported conversations.

[bepaald]

Note, that it is not the goal of this function to mimic Signal Desktop's layout. Since this program is one that deals with Android backups, if anything, it aims to look like Signal Android. However, even that is not a goal of the function, simply because of the difficulty in implementing and — more importantly — keeping up with the changes (I've tried that once before).

Still there are some good ideas in here. I'll certainly improve the index page at some point to deal with pinned and archived conversations.

4. on index.html sort conversations from most recent update to oldest update

It should be. Maybe something to do with the Desktop import, I'll look into it.

5. Show note to self conversation as "note to self" with a note to self profile image.

I'd like to, and I will look into it, but i don't think there is anything in the backup to actually indicate which thread is the "note to self" one. There are some ways to deduce it (and they are implemented already, but not used for this purpose), but nothing that's 100% guaranteed to correctly determine which recipient is 'self'.

8. outgoing and missed calls should list the time at which they happened

Don't they?

11. add some css / js to show the date of current scrolling position at the top of the screen while scrolling, only to fade to transparency when not scrolling for 3 seconds.

Unless it's for some incredibly important feature, I'd really like to keep the page free of JS. And I'm not sure I can do this in pure CSS. This is also partly the reason why the full date is in the message footer instead of just the time (9).

12

Good idea.

13

Yeah, I might. Though maybe I'll just put this in a HTML comment, to try to keep the page a bit clean. All I can do is add signalbackup-tools version and database version (which is not Signal Android version, that is not in the backup file). Signal Desktop has nothing to do with anything.

[Meteor0id]

maybe I'll just put this in a HTML comment, to try to keep the page a bit clean.

The point is that even if someone prints the html export to paper, this information will be included. Or in any other way where the export gets shown to others. I would recommend keeping it as a visual line of text just somewhere at the bottom of the conversation.

[Meteor0id]

addition enhancement requests 1) I wonder if we can improve loading time on large conversations while keeping them a single printable document. I don't know how to diagnose why loading can take so long, just noticed it does sometimes. 2) Optimize for printing, one way to do this is by leveraging @media print { } in CSS 3) Better title for index.html: 4) Also render the background which the user had configured for their chat (obviously this is a low priority but nice to have some day)

[bepaald]

1. I'm open to suggestions (as long as they are not too difficult to implement). Honestly I think it is just in direct relation with the number of messages (or the number of attachments), not sure if this can be fixed without splitting.
2. Yes, good idea. But for the future.
3. Done (as soon as I push).
4. Yes, I'll do that one day. I do remember looking at it early when I started this function but it was too hard and I just wanted to get something working, but I will get back to it.

[Meteor0id]

index.html does not currently include the date of the most recent message for each of the chats, would be nice to add that. Signal does this too. In Signal these are relative to the current datetime:

49 min 8 h Mo We April 12 December 14, 2022

But in an html export lets do a full datetime (24 hour notation?) with year on every chat

April 12, 2023, 14:55

Or something similar

---

I think status messages such as changed safety number should not bump the conversation to the top of the conversation list. In the current html export I see a chat near the top which in Signal Desktop is listed near the bottom. The last message was February 2020 but the export tool takes status messages from 2023 as last message and thus the order of the chat list does not match Signal Desktop.

---

Print phone numbers in pretty format when used as name or when mentioned at the top of the conversation to match Signal Desktop

+1 234-567-8901

---

In some cases the export tool uses a profile picture or name which it found in the Android backup file, while a more recent profile picture or name is available in Signal Desktop. If -importfromdekstop is specified it is reasonable to take the most recent profile data (we're also taking the most recent messages after all)

[bepaald]

index.html does not currently include the date of the most recent message for each of the chats, would be nice to add that.

Yes, added to the to-do-list.

I think status messages such as changed safety number should not bump the conversation to the top of the conversation list.

I agree, also on the list. There was, by the way, also a bug that caused imported threads to almost always (erroneously) have (status message) on the index page if the thread was imported from Desktop. That should be fixed.

Print phone numbers in pretty format when used as name or when mentioned at the top of the conversation to match Signal Desktop

I have now idea how. Is there some consistency to this? Is there a standard for it?

In some cases the export tool uses a profile picture or name which it found in the Android backup file, while a more recent profile picture or name is available in Signal Desktop. If -importfromdekstop is specified it is reasonable to take the most recent profile data (we're also taking the most recent messages after all)

Agreed. Also on the ever-growing to-do-list. :smiley: I don't think the profile pictures actually have an associated date in either database, but I guess I should take the picture from whichever thread had the most recent activity (like with archive-status). Though for profile pictures this is not as straightforward, since they are used across threads (different groups a contact is a member of), which may or may not have seen recent activity. But I'll try to work something out eventually.

[Meteor0id]

I have no idea how. Is there some consistency to this? Is there a standard for it? If I read this correctly Signal seems to partially do this themselves and partially leave it up to a google library https://github.com/signalapp/Signal-Desktop/blob/468ca256e6ed997c0ccd4f35db486ae4fca10113/ts/types/PhoneNumber.ts https://github.com/signalapp/Signal-Desktop/blob/468ca256e6ed997c0ccd4f35db486ae4fca10113/ts/util/libphonenumberInstance.ts

I think formatting phone numbers should be very low on your to do list, but would recommend keeping it on the to do list because it just looks better if exports look more identical to what you expect to find in Signal itself. It also helps when copy paste searching phone numbers.

[bepaald]

index.html does not currently include the date of the most recent message for each of the chats, would be nice to add that.

I have a work in progress looking like this:

This is just a design at the moment, I still need to actually code it. Any comments before I hook this up?

[Meteor0id]

That would work, but maybe it would actually be prettier to:

• omit seconds, they only might matter on message details certainly not on the conversation list
• write month as 3 letter name of month in English
• turn the data around placing the day up front
• Date on the upper line, time underneath (because that's the order in which you would pronounce it if you read it out loud)

All this just to make it look more user friendly, and it matches better with what we see in Signal Desktop.

23 Apr 2023 13:13

Edit:

or better yet

Apr 23, 2023 13:13

because that matches how we currently show the date underneath messages.

[bepaald]

Ok, done.

I'm now thinking, maybe it would look good with the dates right-aligned? What do you think, you could try by changing text-align: center; to text-align: right; in the .index-date section of the index.html (should be about 20 lines above the actual message content). I think I like it a little better.

[Meteor0id]

The time is missing on all chats <span></span>

---

Aligning to the right indeed looks much better

---

This is what attachments look like. And it downloads as a .bin rather than the proper filetype.

---

for conversations which were sms conversations (no longer supported by Signal but still exist in backups) the chat has the contact name twice but does not show a phone number. It would be better if the second line shows the phone number.

[bepaald]

The time is missing on all chats

I've noticed this in some of your screenshots and looked at it multiple times, but I don't understand how this could happen (#L340 and #L1085). I don't believe there was ever a version where I didn't include the time in the message footer. Has the time never showed up in your exports or has it come and gone?

Maybe I should fire up my Windows VM to see if it's something Windows specific somehow.

---

Aligning to the right indeed looks much better

done

---

This is what attachments look like. And it downloads as a .bin rather than the proper filetype.

I had just been redesigning that earlier today, so just pushed it. It should look better, but I'll probably tweak it some more in the future (maybe add some file icon).

Not sure if I'm going to try and put proper extensions (note that is not the same as the filetype) on there. 99% of the attachments in the backup do not have a filename set, so I'd have to include a list of all known possible filetypes and their corresponding extensions. But I could set the original filename (if available) in the download attribute of the link (just found that out now, it's new in HTML5), I'll put it on the to-do-list, it should be easy.

---

for conversations which were sms conversations (no longer supported by Signal but still exist in backups) the chat has the contact name twice but does not show a phone number. It would be better if the second line shows the phone number.

Well, Just a guess, but I think that, in a way, is the phone number? Like certain service numbers show up like this. Another good example is the Signal registration sms, which shows up like this in my message app:

While every other sender that's not in my contact list would show up as a phone number. No amount of long-pressing or anything will reveal an actual number for such a sender. Does this happen with any normal contacts? I should probably simply skip the second line if it's equal to the first.

[Meteor0id]

I don't believe there was ever a version where I didn't include the time in the message footer. Has the time never showed up in your exports or has it come and gone?

I don't think I have ever seen time being printed in index.html Edit: Also not on any message bubble in the conversations themselves.

Does this happen with any normal contacts?

Have not seen that happen on normal contacts yet but I have a few hundred chats to open and close if I want to be sure. If I happen to run into it later I'll say something.

---

I just noticed: Generated on by signalbackup-tools (20230425.180838). Input database version: 179. The date time is missing here also. BTW do you really intent to keep this just a comment in html? If you make it a display: none; element we can display it when printing.

[Meteor0id]

Hope you don't mind but I've written the CSS necessary to make a Signal conversation printable. Have not yet done this for the index. Please include this at the very bottom of the existing css (if you agree) I have tested it on a bunch of conversations and it looks perfect so far.

[deleted see my next message for updated version]

[bepaald]

I just noticed: Generated on by signalbackup-tools (20230425.180838). Input database version: 179. The date time is missing here also.

Well, this is intriguing. I think it probably has something to do with the mingw cross-compiler. I'll investigate.

BTW do you really intent to keep this just a comment in html? If you make it a display: none; element we can display it when printing.

Yes, I suppose I could do that, But.. about printing:

Hope you don't mind but I've written the CSS necessary to make a Signal conversation printable. Have not yet done this for the index. Please include this at the very bottom of the existing css (if you agree) I have tested it on a bunch of conversations and it looks perfect so far.

Thanks for your work on this, it looks good to me. I was just about to put it in, when I realized. I know for a fact people use this function to save as pdf (I would guess more than people printing real paper copies), and it seems this addition makes that makes that nearly impossible without also getting the restyled version (maybe with the help of custom add-ons).

So I'm not sure what to do yet. I've only thought about it for a minute now, but all I can think of right now is actually generating separate 'name (_id)_printable.html' pages (but I don't really like that as a solution).

[Meteor0id]

I know for a fact people use this function to save as pdf (I would guess more than people printing real paper copies), and it seems this addition makes that makes that nearly impossible without also getting the restyled version (maybe with the help of custom add-ons).

Without this print css, printing to pdf does not look good; bubbles are hardly recognizable and get cut in half, images overlap, etc. This print css fixes printing to paper and also fixes printing to pdf.

If you want to print with the background colors, that's just a checkbox you have to thick in print preview settings. Only things which break are the icons on most status messages and the checkmarks, their color will not switch between black and white when you toggle print with background colors. In my current css they are hardcoded black so they are visible on white paper. Maybe we can fix that in the future but for now I think that is an acceptable bug. Everything else seems to looks much better also on pdf.

I've updated the css to fix a few more things:

@media print {
     #menu {
         display: none;
    }
     .msg {
         break-inside: avoid;
        /* both fit-content and max-content seem fine here, so just including both as fall back */
         width: -webkit-fit-content;
         width: -moz-fit-content;
         width: fit-content;
         width: -webkit-max-content;
         width: -moz-max-content;
         width: max-content;
        /*background-color: transparent;
         leave it up to print settings */
    }
     .msg-incoming, .msg-outgoing {
         border: 1px solid black;
         display: block;
    }
     .no-bg-bubble {
         border: 0;
    }
     .incoming-group-msg {
         display: block;
    }
     .incoming-group-msg > .msg-incoming {
         display: inline-block;
    }
     .msg.msg-incoming, .incoming-group-msg {
         margin-right: auto;
    }
     .msg.msg-outgoing {
         margin-left: auto;
    }
     .msg-status, .msg-date-change, .msg-group-update-v1 {
         margin: 0 auto;
    }
     .conversation-wrapper {
         width: 100%;
    }
     body, .controls-wrapper, .conversation-wrapper, .conversation-box {
         display: block;
        /*background-color: transparent;
         leave it up to print settings */
    }
     .conversation-box {
         padding: 0 3px;
         margin: 0;
         box-sizing: border-box;
         width: 100%;
         border-radius: 0;
        /*color: black;
         leave it up to print settings */
    }
     .msg-reaction {
         border: none;
    }
     #message-header {
         padding-top: 0;
         padding-bottom: 10px;
        /*color: black;
         leave it up to print settings */
    }
     .msg-quote {
         border: 1px solid grey;
         border-left: 5px solid grey;
    }
     .status-text > div, .checkmarks {
         -webkit-print-color-adjust: exact;
         color-adjust: exact;
         print-color-adjust: exact;
         filter: brightness(0);
    }
     .status-text > div.msg-call-missed {
         filter: none;
    }
    /* If you want you could give color to incoming and outgoing call icons like this */
    /*
    .status-text > div.msg-call-incoming {
         filter: brightness(0) saturate(100%) invert(68%) sepia(43%) saturate(6063%) hue-rotate(80deg) brightness(120%) contrast(125%);
    }
     .status-text > div.msg-call-outgoing {
         filter: brightness(0) saturate(100%) invert(8%) sepia(100%) saturate(5186%) hue-rotate(246deg) brightness(116%) contrast(151%) 
    }
     */
     .avatar {
         -webkit-print-color-adjust: exact;
         color-adjust: exact;
         print-color-adjust: exact;
         display: inline-block;
    }
     .convo-avatar, .incoming-group-msg, .msg {
         break-inside: avoid;
    }
    /* todo: audio, video and attachment previews */
    /* In rare cases in Firefox on certain Windows machines the borders become 0.8px. There is no easy fix other than making the borders 2px */
    /* https://stackoverflow.com/questions/54832394/a-border-of-1px-in-chrome-and-0-8px-in-firefox */
}

And this is for index.html

@media print {
body {
margin: 0;
}
.conversation-list-header {
padding: 0;
}
.conversation-list {
margin: 0 auto;
display: block;
border-radius: 0;
}
.avatar {
-webkit-print-color-adjust: exact;
color-adjust: exact;
print-color-adjust: exact;
}
}

[bepaald]

You're right, apologies, I did not test properly before posting. I will add this in the next push. And I came to ask if the same CSS would work for the index page, but you beat me to it. Thanks!

btw. I also fixed the missing date/time, it's some sort of issue in MinGW's cross-compiler toolchain. It will be in the next push.

[Meteor0id]

View once media (expired or viewed in the past) are wrongfully displayed as "This message was deleted." in the export. (well they are deleted but there should be a distinct tomb stone for those)

[bepaald]

I should indeed fix the "this message was deleted" message, as that is not correct.

But I will probably just exclude the messages all-together. The import function aims to create a valid backup file, in normal backup files (as exported by Signal Android), all view-once media (whether viewed or not) are excluded from the backup.

-edit btw, I said the new CSS would be included in the next push, but I haven't had time. I only pushed right now because of major breakage in the new database version (185, in beta I think), but only the timestamp fix was included. Hopefully I'll have more time next week.

[Meteor0id]

In html exports, which are sometimes used to provide transparency of comminication to outsiders, including deleted message mentions is most essential. Please do not remove them from html exports (or any other export)

[bepaald]

I'll see what I can do. The problem is that these messages do not actually exist in the backup, so I'd have to guess what they would look like. If I can confidently do so or I can test restoring these messages from a backup on a phone, I will add them. Otherwise, at best, they will end up behind the --addincompletedataforhtmlexport flag.

Note, the database changes in the upcoming database version 185+ are likely to break things (it already broke htmlexport, see #110), and all my available coding time will be spent investigating what breaks and trying to fix it. Feature development will only continue after that's been handled.

[julianfairfax]

Perhaps most people prefer the dark theme, but, would you consider adding a light theme to the viewer?

[Meteor0id]

I've started work on rewriting some of the htnl and css to add a simple toggle between light theme and dark theme. Still have some things to think about: could I preserve state during navigation without leaving a cookie with filename or such? Where to position the toggle? How to work around some css limitations?

I'll slowly work on that light theme, considering it low priority though.

[bepaald]

Perhaps most people prefer the dark theme, but, would you consider adding a light theme to the viewer?

Yes, this is planned. I actually have a light theme mostly done, it'll be coming soon. I'd also love a toggle switch, but since I could not figure out how to make it persistent without cookies, the current plan was just to add a --light option when calling the program.

Anyway, I've been somewhat short on time and some other issues are higher priority now, but I might get this done sometime later this week.

[Meteor0id]

I've already completed the light theme html and css rewrite and tested it. Here are the required changes, they include the required changes to make everything printable which I shared earlier, with a few small fixes.

This adds a non-persistant toggle to the top right corner. Bepaald could also add --defaut-theme-light or something like that to render each conversation and the index with the default theme set to light. We could later reconsider if a cookie would be a bad thing too add but for now it at least offers the light theme and make it all printable.

There is one bug, Firefox does not yet support the :has() pseudo element which is needed to switch the theme color of the background, but Firefox is about to add that feature. This means that only if you switch to the light theme on firefox the outer background won't switch yet, but that's a detail. We could mitigate it by moving the input outside of but that's illegal.

Rewrite the top of conversation html to read:

</style>
  </head>
  <body>
  <input id="toggle-theme-check" type="checkbox" checked autocomplete="off" />
    <div class="controls-wrapper">
      <div class="conversation-wrapper">

And near the bottom rewrite the navigation menu:

<nav id="menu">
<a href="../index.html">
<div class="menu-item">
<div class="menu-icon nav-up">
</div>
<span>
index
</span>
</div>
</a>
<label for="toggle-theme-check" class="toggle-theme">Dark theme
<span class="switch">
 <span class="slider"></span>
</span>
</label>
</nav>
</body>
</html>

Add this to the bottom of conversation style:

 .switch {
     position: relative;
     display: inline-block;
     width: 60px;
     height: 34px;
     top: 13px;
     margin-left: 5px;
     margin-right: 5px;
}
 #toggle-theme-check {
     opacity: 0;
     width: 0;
     height: 0;
     position: absolute;
     display: none;
}
 .slider {
     position: absolute;
     cursor: pointer;
     top: -13px;
     left: 0;
     right: 0;
     bottom: 13px;
     background-color: #ccc;
     -webkit-transition: .4s;
     transition: .4s;
     border-radius: 34px;
}
 .slider:before {
     position: absolute;
     content: "";
     height: 26px;
     width: 26px;
     left: 4px;
     bottom: 4px;
     background-color: white;
     -webkit-transition: .4s;
     transition: .4s;
     border-radius: 50%;
}
 #toggle-theme-check:checked ~ * label .switch .slider {
     background-color: #5e5e5e;
}
 #toggle-theme-check:focus ~ * label .switch .slider {
     box-shadow: 0 0 1px #5e5e5e;
}
 #toggle-theme-check:checked ~ * label .switch .slider:before {
     -webkit-transform: translateX(26px);
     -ms-transform: translateX(26px);
     transform: translateX(26px);
     background-color: black;
}
 .conversation-box, body {
     transition: background-color .4s linear;
}
 .conversation-box {
     background-color: #2e2e2e;
}
 .toggle-theme {
     color: white;
     display: flex;
     align-items: center;
     margin-left: auto;
     margin-right: 28px;
     cursor: pointer;
}
 #menu {
     flex-direction: row;
     width: 100%;
     top: 0;
     left: 0;
     margin: 15px 15px 0 15px;
}
 .menu-item {
     padding: 0;
}
 body {
     margin: 0;
}
 .message-header {
     display: inline-block;
}
 body:has(> #toggle-theme-check:not(:checked)) {
     background-color: white;
}
 #toggle-theme-check:not(:checked) ~ * .conversation-box {
     background-color: white;
}
 .conversation-box, .message-header * {
     color: #e9e9e9;
}
 #toggle-theme-check:not(:checked) ~ header *, #toggle-theme-check:not(:checked) ~ #menu *, #toggle-theme-check:not(:checked) ~ .controls-wrapper .conversation-wrapper #message-header {
     color: #1b1b1b;
}
 #toggle-theme-check:not(:checked) ~ .controls-wrapper .conversation-wrapper .conversation-box .msg-data, #toggle-theme-check:not(:checked) ~ .controls-wrapper .conversation-wrapper .conversation-box .msg-status, #toggle-theme-check:not(:checked) ~ .controls-wrapper .conversation-wrapper .conversation-box .deleted-msg, #toggle-theme-check:not(:checked) ~ .controls-wrapper .conversation-wrapper .conversation-box .msg-date-change {
     color: #5e5e5e;
}
 #toggle-theme-check:not(:checked) ~ .controls-wrapper .conversation-wrapper .conversation-box .deleted-msg, #toggle-theme-check:not(:checked) ~ .controls-wrapper .conversation-wrapper .conversation-box .msg-incoming .msg-data, #toggle-theme-check:not(:checked) ~ .controls-wrapper .conversation-wrapper .conversation-box .incoming-group-msg .msg-incoming .msg-data {
     border-color: #5e5e5e;
}
 #toggle-theme-check:not(:checked) ~ .controls-wrapper .conversation-wrapper .conversation-box .msg-incoming, #toggle-theme-check:not(:checked) ~ .controls-wrapper .conversation-wrapper .conversation-box .incoming-group-msg .msg-incoming {
     color: #1b1b1b;
     background-color: #e9e9e9;
}
 #toggle-theme-check:not(:checked) ~ #menu .nav-up {
     filter: brightness(0) saturate(100%) invert(11%) sepia(6%) saturate(0%) hue-rotate(151deg) brightness(90%) contrast(98%);
}
 .conversation-box .snippet, .conversation-box .msg-data {
     color: #b9b9b9;
}
 #toggle-theme-check:not(:checked) ~ .controls-wrapper .conversation-wrapper .conversation-box .msg-status .status-text > div, #toggle-theme-check:not(:checked) ~ .controls-wrapper .conversation-wrapper .conversation-box .msg .footer .checkmarks {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
     print-color-adjust: exact;
     filter: brightness(0);
}
 @media print {
     #menu {
         display: none;
    }
     .msg {
         break-inside: avoid;
        /* both fit-content and max-content seem fine here, just including both in case I don't know something */
         width: -webkit-fit-content;
         width: -moz-fit-content;
         width: fit-content;
         width: -webkit-max-content;
         width: -moz-max-content;
         width: max-content;
        /*background-color: transparent;
         leave it up to print settings */
    }
     .msg-incoming, .msg-outgoing {
         border: 1px solid black;
         display: block;
    }
     .no-bg-bubble {
         border: 0;
    }
     .incoming-group-msg {
         display: block;
    }
     .incoming-group-msg > .msg-incoming {
         display: inline-block;
    }
     .msg.msg-incoming, .incoming-group-msg {
         margin-right: auto;
    }
     .msg.msg-outgoing {
         margin-left: auto;
    }
     .msg-status, .msg-date-change, .msg-group-update-v1 {
         margin: 0 auto;
    }
     .conversation-wrapper {
         width: 100%;
    }
     body, .controls-wrapper, .conversation-wrapper, .conversation-box {
         display: block;
        /*background-color: transparent;
         leave it up to print settings */
    }
     .conversation-box {
         padding: 0 3px;
         margin: 0;
         box-sizing: border-box;
         width: 100%;
         border-radius: 0;
        /*color: black;
         leave it up to print settings */
    }
     .msg-reaction {
         border: none;
    }
     #message-header {
         padding-top: 0;
         padding-bottom: 10px;
        /*color: black;
         leave it up to print settings */
    }
     .msg-quote {
         border: 1px solid grey;
         border-left: 5px solid grey;
    }
     .status-text > div, .checkmarks {
         -webkit-print-color-adjust: exact;
         color-adjust: exact;
         print-color-adjust: exact;
         filter: brightness(0);
    }
     .status-text > div.msg-call-missed {
         filter: none;
    }
    /* If you want you could give color to incoming and outgoing call icons like this */
    /* .status-text > div.msg-call-incoming {
         filter: brightness(0) saturate(100%) invert(68%) sepia(43%) saturate(6063%) hue-rotate(80deg) brightness(120%) contrast(125%);
    }
     .status-text > div.msg-call-outgoing {
         filter: brightness(0) saturate(100%) invert(8%) sepia(100%) saturate(5186%) hue-rotate(246deg) brightness(116%) contrast(151%) 
    }
     */
     .avatar {
         -webkit-print-color-adjust: exact;
         color-adjust: exact;
         print-color-adjust: exact;
         display: inline-block;
    }
     .convo-avatar, .incoming-group-msg, .msg {
         break-inside: avoid;
    }
     .convo-avatar {
         vertical-align: bottom;
    }
    /* todo: print style for audio, video and attachment previews */
    /* When printing in dark theme with the background styles enabled, icons on status messages will remain dark. This is because we assume most people will be printing with background style disabled, and I have not yet found a way to accommodate for toggling the icon color filter as if it were background color */
}

---

We do the same for index.html

rewrite this html near the top of index.html:

</head>
<body>
<input id="toggle-theme-check" type="checkbox" checked autocomplete="off" />
<nav id="menu">
<label for="toggle-theme-check" class="toggle-theme">Dark theme
<span class="switch">
<span class="slider"></span>
</span>
</label>
</nav>
<header>
 <h1 class="conversation-list-header">
 Signal conversation list
 </h1>
</header>
 <div class="conversation-list">

(Not that previously the <body> element was missing)

Add this to the bottom of the style:

#menu {
     display: flex;
     flex-direction: row;
     position: fixed;
     width: 100%;
     margin: 15px 15px 0 15px;
}
 #menu a:link, #menu a:visited, #menu a:hover, #menu a:active {
     color: white;
     text-decoration: none;
}
 body {
     margin: 0;
}
 .switch {
     position: relative;
     display: inline-block;
     width: 60px;
     height: 34px;
     top: 13px;
     margin-left: 5px;
     margin-right: 5px;
}
 #toggle-theme-check {
     opacity: 0;
     width: 0;
     height: 0;
     position: absolute;
     display: none;
}
 .slider {
     position: absolute;
     cursor: pointer;
     top: -13px;
     left: 0;
     right: 0;
     bottom: 13px;
     background-color: #ccc;
     -webkit-transition: .4s;
     transition: .4s;
     border-radius: 34px;
}
 .slider:before {
     position: absolute;
     content: "";
     height: 26px;
     width: 26px;
     left: 4px;
     bottom: 4px;
     background-color: white;
     -webkit-transition: .4s;
     transition: .4s;
     border-radius: 50%;
}
 #toggle-theme-check:checked ~ * label .switch .slider {
     background-color: #5e5e5e;
}
 #toggle-theme-check:focus ~ * label .switch .slider {
     box-shadow: 0 0 1px #5e5e5e;
}
 #toggle-theme-check:checked ~ * label .switch .slider:before {
     -webkit-transform: translateX(26px);
     -ms-transform: translateX(26px);
     transform: translateX(26px);
     background-color: black;
}
 .conversation-list, body {
     transition: background-color .4s linear;
}
 header {
     display: block;
     margin: 0 auto;
     padding: 10px 0;
     width: fit-content;
     max-width: 618px;
}
 header h1 {
     margin: 0;
}
 .toggle-theme {
     color: white;
     display: flex;
     align-items: center;
     margin-left: auto;
     margin-right: 28px;
     cursor: pointer;
}
 .conversation-list-header, header .switch {
     display: inline-block;
}
 body:has(> #toggle-theme-check:not(:checked)) {
     background-color: white;
}
 #toggle-theme-check:not(:checked) ~ .conversation-list {
     background-color: #dedede;
     color: #1b1b1b;
}
 .conversation-list, header * {
     color: #e9e9e9;
}
 .conversation-list .snippet, .conversation-list .index-date {
     color: #b9b9b9;
}
#toggle-theme-check:not(:checked) ~ header *, #toggle-theme-check:not(:checked) ~ #menu .toggle-theme {
    color: #1b1b1b;
}
 #toggle-theme-check:not(:checked) ~ .conversation-list .snippet, #toggle-theme-check:not(:checked) ~ .conversation-list .index-date {
     color: #5e5e5e;
}
 @media print {
     .conversation-list-header {
         padding: 0;
    }
     .conversation-list {
         margin: 0 auto;
         display: block;
         border-radius: 0;
    }
     .avatar {
         -webkit-print-color-adjust: exact;
         color-adjust: exact;
         print-color-adjust: exact;
    }
     #menu {
         display: none;
    }
}

[julianfairfax]

I've already completed the light theme html and css rewrite and tested it. Here are the required changes, they include the required changes to make everything printable which I shared earlier, with a few small fixes.

Rewrite the top of conversation html to read:

And near the bottom rewrite the navigation menu:

We do the same for index.html

rewrite this html near the top of index.html:

(Not that previously the element was missing)

Add this to the bottom of the style:

Could you be more specific as to the file paths of these files that need to be modified?

[Meteor0id]

These are changes to the css and html which need to be made on every html file which the tool outputs. Those files do not exist in the tool itself, they are created by the tool. When Bepaald cones back he will understand what to do and can easily merge it to the next version of the tool.

[Meteor0id]

There was a tiny typo in the html I suggested, I updated that just now.

(no block type elements are allowed within a label, so I changed <div> to <span> and there was a typo where I did </span>index</span> rather than <span>index</span> and on index.html I forgot to also switch the color of the switch label itself)

Just letting you know in case someone was already applying this.

I noticed bepaald already made a start for the introduction for the light theme by adding the command line option. The only thing that needs to do to work alongside this manual switch is either include or exclude the word checked or exclude the word checked on the input element.

edit: I also had to turn <input id="toggle-theme-check" type="checkbox" checked="checked" /> into <input id="toggle-theme-check" type="checkbox" checked autocomplete="off" /> to prevent the browser from remembering the previous choice to prevent an unexpected state.

[bepaald]

Hopefully everything's working on the current database version now (though time will tell). I also just added the print-css to HTML export. Thanks again for that.

Not sure if I'm going to use the switching light/dark css. I think people who actually have a preference for one style will not like that every click will reset it. I'm guessing they rather just select their preference when exporting and have it set correctly. Not made up my mind yet though.

I'll get back to some feature development the next few days.

[Meteor0id]

If you add this script to the bottom of each file we store the toggle state for the dark mode switch in the sessionStorage. This will allow the setting to carry over to pages opened in the same tab. Session storage is similar to cookies, but the data is only stored for the current session. This means that the data will be deleted when the user closes the browser or tab (the value only exists in the current tab and does not exist for other tabs).

<script>
let darkmode = document.getElementById('toggle-theme-check');
if (sessionStorage.getItem('autosave')) {
  darkmode.checked = JSON.parse(sessionStorage.getItem('autosave'));
}
darkmode.addEventListener('change', () => {
  sessionStorage.setItem('autosave', JSON.stringify(darkmode.checked));
});
    </script>
    </body>
    </html>

Carrying over the state of the dark mode toggle without any javascript at all is not possible. So why bother with a toggle? Because it allows you to still change your mind about the color setting while you are reading, rather than deciding ahead of time. And as explained before you could still decide which color to set as default using --light

---

Note that he last css / html I suggested contains additional fixes such as correcting the color of the statuses and time indications.

---

Currently if you open the note to self conversation the profile picture is your own profile rather than the expected note to self icon.

---

your new show members features a div element within a label element which raises validator warnings, might wanna use a span instead.

---

The expanding animation may look super pretty but I already noticed a few group for which the max-height is not enough to show all the members. Maybe there is another way to expand with an animation (flex? position absolute?) I have not yet tried things out, but the current solution is buggy. edit: You're actually hitting one of the most classic examples of the limitations which come with reflow rendering (such as we're doing with DOM elements and css transitions). The browser does not know ahead of time how high this element will be based on its content (the content could change, or the browser window might get resized causing the width to change). There is no ideal solution for this type of animation. It looks pretty cool (and can be enhanced a bit by the way by playing with margins and padding) but animating this is not worth the risk of hiding content in my opinion. Unfortunately.

---

Obviously I have not yet accounted for printing the member list. I would suggest to include the member list when printing. Switching between dark and light mode will work right away without additional css changes (because the text color is applied to the parent #message-header )

---

Other group data to show would be:

• Is this group muted (this should actually also be shown for one-on-one conversations!)
• current disappearing message timer on or off and if on how long (this should actually also be shown for one-on-one conversations!)
• group link on or off and if on what is the link
• Are there any pending join requests? if so who.
• Are there any pending invites? if so who.
• Who may add new members
• who may edit the group info
• who may send messages and start calls in this group
• the group description!

[bepaald]

I know setting cookies (of any type) is not possible without javascript, and I really want to avoid javascript. For me, being able to switch themes is not worth adding scripting to the page. So, at least for now, I'm going with a static light theme. I tried your light theme css this morning, but found it quite incomplete (this was before you made your additional changes, you may have fixed everything by now). So I went with my own. I think it looks ok, but it might need some tweaking.

---

Currently if you open the note to self conversation the profile picture is your own profile rather than the expected note to self icon.

Should be fixed

---

your new show members features a div element within a label element which raises validator warnings, might wanna use a span instead.

Done, thanks!

---

The expanding animation may look super pretty but I already noticed a few group for which the max-height is not enough to show all the members. Maybe there is another way to expand with an animation (flex? position absolute?) I have not yet tried things out, but the current solution is buggy.

Yeah, I forgot the max-height was set to 100px, that was supposed to be temporary. It now animates to max-height: auto;, which hopefully always fits everything. I would personally not like all that info always visible, and even less so when it is a longer list, so I'm keeping the hiding. The animation might need tweaking, it doesn't look too smooth when I test it.

---

Obviously I have not yet accounted for printing the member list. I would suggest to include the member list when printing.

Agreed (but I haven't done this yet).

---

Other group data to show would be:

I've set up a framework for getting all that info (those that are available at least). For now I've just quickly put in the description and member roles, but this should be considered just a quick placeholder at the moment. I think most of the backend work is done, but I have no idea what this info-area should look like yet.

---

@julianfairfax

Perhaps most people prefer the dark theme, but, would you consider adding a light theme to the viewer?

You can now generate a light-themed HTML by adding --light to the command line.

[Meteor0id]

I tried your light theme css this morning, but found it quite incomplete (this was before you made your additional changes, you may have fixed everything by now).

Ok, so what made it appear incomplete? I took the colors from Signal Desktop so I thought I covered everything.

I think most of the backend work is done, but I have no idea what this info-area should look like yet.

I say throw it all in there and we'll style it some more when we see it.

[Meteor0id]

I really want to avoid javascript. For me, being able to switch themes is not worth adding scripting to the page.

I too prefer staying away from any scripting languages since it quickly throws you down the rabbit hole of privacy compromises such as getting fingerprinted. In this case however this is a locally executed script and the stored data is only a true or false boolean which is only accessible locally and only in that browser tab. You could consider adding --light-switch to allow others to enable this switch, while keeping it off by default.

The reason I bring it up is because I consider the use case of a dark theme and a light theme: I switch between them at different times of the say or based on the room I am in, and so rendering the export in a certain theme for me at least defeats most of the purpose of having multiple themes. Kinda like having theme night at your local club but it's the same theme every night; the theme was decided on when the club was opened. Still adds something to the atmosphere but pineapple does get old.

[bepaald]

Ok, so what made it appear incomplete? I took the colors from Signal Desktop so I thought I covered everything.

Well there was tons of stuff, but all very small. And again, you may have already had it fixed before I mentioned it and maybe I didn't copy-paste it correctly. Some colors were very incorrect, mostly inverted (footer dates, checkmarks, the initial in the avatar, the chatpartners name, the menu buttons, emoji reactions). Others were less problematic, but still didn't look right, like deleted messages having a background color, and hardly any contrast in quoted messages and link preview descriptions. But it doesn't matter, I already had my light theme ready to go (took most of the colors from Signal Android), I just wanted to check if I missed anything.

I too prefer staying away from any scripting languages since it quickly throws you down the rabbit hole of privacy compromises such as getting fingerprinted. In this case however this is a locally executed script and the stored data is only a true or false boolean which is only accessible locally and only in that browser tab.

Yeah, it is local. I know that. And you know that (for now). But no one else will, and even just one update from now you won't either unless you're going to read the source every time before you open the page. To me, it's not worth it.

But I do understand your use-case, and am not opposed to adding a command line switch for a script-enabled export, if I can implement it cleanly. But it will not be the top of my list.

[Meteor0id]

you may have pasted the css above some of the existing css causing the overwrites to not work as expected, but anyway it doesn't matter. I see your css is missing a few things which I did have in mine I will just write suggestions for that later.

---

understandable point you make about having to verify the javascript each time (although the same point could be made for verifying the source code of every part of the tool each time you update something).

---

I found messages where the export tool only shows one not filled checkmark (sent) while I see two checkmarks in Signal Desktop (send received and seen by other person).

---

Stickers should not have bubble around them 6 or more emojis should have a bubble around them, 5 or less should not. see images tool: Signal Desktop: I have not looked in Android yet. gifs should not have a bubble around them

---

A group which has been left by everyone including me myself now prints "(column not found)" on html export as group member list. It also shows "1 members" which should not be plural, and is wrong because there are 0 members

---

that same group I looked at which has 0 members also should not have shown up in the export, because in Signal Desktop it is a group chat with no history at all not even a status message, in Signal Android this chat had been deleted, but in the export it gets included and shows one single status mesage " You have left the group. Jun 09, 2022 04:25:11 "

I guess the tool does not yet exclude chats which have only a group left status message in them from index.html. This is at most a very minor inconvenience of course. (note for myself, this was the group "testing all stickers")

---

I see your css is missing out on a few things (like the color of status messages on index.html) I will compare my css with yours later and upload some suggestions (first gonna have dinner among other things)

---

Hope you still enjoy working on this tool, I am throwing every piece of feedback at you which I can think of hoping it is helpful, but if I am being too much of a perfectionist let me know.

[Meteor0id]

Thread titles contain a lot of empty characters and at least in Firefox this throws the title off center. If you edit the html you find it looks like:

            BSfS Admins

---

Oof, I don't even want to think about how this could be handled

[Meteor0id]

Oof, that was a lot to test. Here are my notes on the current css. I know it's a though read but I had to test this all in both light and dark theme and also printing and also printing with background. Hope you can find your way through that but do ask if I can help in any way.

// index style

// dark theme

// text should not be white but off white
.conversation-list {
color: #e9e9e9;
}
.conversation-list-header {
color: #e9e9e9;
}
.thread-subtitle {
color: #e9e9e9;
}

// light theme
// text should not be black but off black
.conversation-list {
color: #1b1b1b;
}
.conversation-list-header {
color: #1b1b1b;
}
.thread-subtitle {
color: #1b1b1b;
}
conversation-box {
color: #1b1b1b;
}

// either theme
.conversation-list .snippet, .conversation-list .index-date {
  color: #b9b9b9;
}

// lower the margin of the <- index button from 30 to 10 px (this is a preference thing but I think that button is less distracting if it is more in the corner)
#menu {
top: 10px;
left: 10px;
}

// remove from either theme

// avatars should not have any padding-bottom, because such padding is deforming the circle. consider removing it, or using box-sizing or using margin.
.avatar-xxxxx {
padding-bottom: 2px;
}

//
// conversation style
//

// dark theme

// light theme

.conversation-box {
color: #e9e9e9;
}
.msg-data {
color: #5e5e5e;
}
.msg-date-change {
color: #5e5e5e;
}

// edit the brightness filter from 0 brightness to .8 brightness, to ensure the checkmarks are visible and light colored for both with and without background printing
@media print {
.status-text > div, .checkmarks {
filter: brightness (.8);
}
}

// either theme

// remove from either theme
// On large descriptions and / or memberlists the width of the entire document becomes much more than the screen with, which breaks the style of the whole conversation.
.memberslist span {
  white-space: nowrap;
}
// And also remove that from the @media print section (what is it even doing there?)
@media print {
.memberslist span {
  white-space: nowrap;
}
}

// remove the following because it messes up the light theme and I think it serves no purpose on the dark theme
.msg-incoming .pending-attachment {
background-color: #5E5E5E;
}

// add print style to unhide memberslist (by the way, I think it should be named memberlist without s, adding an s for compound words is something we do in Dutch but in English that is not a thing.
@media print {
.memberslist {
max-height: none;
}
}

// todo either remove or edit these:

// I have not yet discovered why you are applying align-self center to these things but I can tell that they are vertically centering the icons on multi-line statuses while those are supposed to stay at the top of their parent container
// either delete the following two:
.msg-status div, .msg-group-update-v1 div {
align-self: center;
}
.msg-status div.status-text {
align-self: center;
}
// Or edit them so that .msg-profile-icon {} does not get align-self: center; applied to it.

// why are we doing this
.msg pre {
white-space: pre-wrap;
}
// that makes it difficult to position the icon in front of multi line statuses correctly, it is causing a sort of padding to the left and right of this element which causes the space between the status text and the status icon to become wider than expected.
// Let's try to style that element differently. I wont attempt it now because i do not yet understand why we are doing this in the first place.

That last part has to do with statuses like these. The two red X s mark space which should not be there.

[Meteor0id]

About the emoji reply badges, In Desktop emojis get stacked if they are similar. There might also be other cases where emojis overflow because they are all completely different. So that's two separate problems there.

[Meteor0id]

I forgot this one for conversation dark theme to make the check-marks a little less harsh for both with and without background printing. If you want to be a perfectionists about it the light theme should be .75

@media print {
.status-text > div, .checkmarks {
filter: brightness (.25);
}
}

[bepaald]

Just very quickly, because I'm out of time:

I'll look at all the color stuff sometime when I have nothing else, I'm not really feeling the urgency on that as they mostly look fine to me (but some can indeed be improved).

I did fix message bubbles on all-emoji-messages (the cut-off is at 5 emoji). I think I fixed the status message icons (spacing and positioning). And I collapse multiple identical emoji-reactions (but only real identical ones for now, not sure how to handle the variants).

---

Thread titles contain a lot of empty characters and at least in Firefox this throws the title off center. If you edit the html you find it looks like:

I don't think I'm following this, maybe I'm dense, could you explain again?

Never mind, I understand. But, HTML eats white-space, I don't think that has anything to do with it (I'm not seeing any titles off center). If you edit the HTML to say just <div id="thread-title">TITLE</div> for a problematic case, does it actually change the rendering?

[Meteor0id]

But, HTML eats white-space, I don't think that has anything to do with it (I'm not seeing any titles off center).

Leaves a single trailing whitespace in Firefox which does throw the title of center, at least on my device. yes it changes the render if I edit it. I only noticed because it was off center in the first place.

not sure how to handle the variants

Understandable, let's see how Signal does it for inspiration.

I'll look at all the color stuff sometime when I have nothing else, I'm not really feeling the urgency on that as they mostly look fine to me (but some can indeed be improved).

It just doesn't look like Signal, and with these color changes it will. And it does improve readability, to change it. The print changes matter because on light theme the check-marks are completely gone on white paper. The avatar change on index.html matter because the circle isn't round and the letter seems off-center. The member(s)list wrapping breaks the layout a lot unless fixed because Fiefox will refuse to wrap the text and will instead make the page much wider than the screen, throwing everything off.

maybe I'm dense

Nah, you're good

Just very quickly, because I'm out of time

No worries, you're doing a lot and it's obviously ok to take time for yourself or for other things

.msg-reaction {
// no top padding?
padding-bottom: 1.5px;
// half a pixel? XD I mean I guess it  might make a difference if the screen is scaled.
}

[Meteor0id]

On conversations: Adding

.msg pre {
marigin-left: auto;
margin-right: auto;
}

will center statuses when they are so short that the date underneath them is wider.

[Meteor0id]

Don't mean to pressure you but just checking if you're still intending to do these changes:

The following prevents breaking names and allows breaking unbreakable text strings to make sure the columns look good when there is less width (such as when printing, or when looking on a small screen like mobile)

Conversations style either theme

.columnview {
word-break: break-word;
}

Index style

either delete

.avatar-xx {
padding-bottom: 2px;
}

or add

.avatar-xx {
box-sizing: border-box;
}

To keep avatars round.

The following enhances checkmarks when printing, it's a compromise between black and white so that they are visiblewhen printing both for dark theme and light theme. The reason we need a compromise here is that I can change the color of an existing svg when it is used as background-image: url(); in only one way, using filter: brightness();. However filter does not get toggled on or off when switching printing with background on or off. Maybe you could include the svg checkmarks in a different way so that we can apply a background-color: to them in css. the background-color: property would get toggled when printing with or without background is toggled. Anyway, for now this will fix the missing checkmarks when printing and make them look alright:

Conversation style dark theme

@media print {
.status-text > div, .checkmarks {
filter: brightness (.25);
}
}

Conversation style light theme

@media print {
.status-text > div, .checkmarks {
filter: brightness (.75);
}
}

I did also suggest color changes earlier but those are a lower priority to consider at a different time. The changes suggested in this post actually fix issues.

[Meteor0id]

The same white space issue which affects some conversation titles appears to also be affecting some message texts:

Looks like opening and trailing white spaces need to get sanitized / trimmed.

[bepaald]

The following prevents breaking names and allows breaking unbreakable text strings to make sure the columns look good when there is less width (such as when printing, or when looking on a small screen like mobile)

word-break is deprecated. I tried to get this fixed with overflow-wrap, let me know if this works.

Index style

Sorry I thought I fixed that a few days ago, but apparently not on the index page, just the conversation page. Done now.

The following enhances checkmarks when printing, it's a compromise between black and white so that they are visiblewhen printing both for dark theme and light theme.

Sure, I must admit I'm not that involved with the media print part when I'm fiddling with the CSS. I'll do this when I get home this afternoon.

I did also suggest color changes earlier but those are a lower priority to consider at a different time. The changes suggested in this post actually fix issues.

I've actually been preparing for this. But it's taking some time (also trying to implement theme switching at the same time). And the local changes in the css have prevented me from changing to much in the existing css otherwise I can't merge the differences when I finally get it working.

The same white space issue which affects some conversation titles appears to also be affecting some message texts:

That is not the same issue. That one actually makes sense, as the extra whitespace (a bug introduced recently) is inside a pre-tag that has 'not eating whitespace' as its main purpose. That should be fixed now.

As for the title, that is still a bit of a mystery to me. But I'm investigating.

[bepaald]

I just pushed the theme switching option (--themeswitching). I sense a bunch of new issues coming up.... :-)

I suspect I may have solved your title issue, though I still don't know why that was happening. I could not reproduce it, I even created a group with the same title and tested on a Windows machine... But, to enable multiple spaces in the middle of a group title (like test group. Signal itself does not allow leading or trailing spaces), I had to wrap the titles in a pre tag anyway. So, hopefully that made that issue go away, but it might show itself in other places as well, there's white-space all over the HTML for readability.

The following enhances checkmarks when printing, it's a compromise between black and white so that they are visiblewhen printing both for dark theme and light theme.

I've attempted to add this, though the changes to the CSS (especially around the theme-specific stuff) forced it to be a bit different. I think it's ok, but I'll leave testing it to you.

Not sure when I'll have time (for big things) the next few days.

[Meteor0id]

By doing it your way you give me a lot of stuff to test again, but your way looks nicer.

1. I would recommend using sessionStorage or localStorage instead of cookies. Don't need cookies for this. Cookies are more complicated and more invasive. session Storage is sufficient unless you want theme to persist across different tabs in which case localStorage would be better. EDIT: You already wrote on the commit that you experienced a bug and are investigating this option later. :)
2. You need this on both index and conversation style to prevent the theme button from getting printed:

   @media print {
   #theme {
   display: none;
   }
   }

3. add on index:

   .avatar {
   flex-shrink: 0;
   }

   to prevent avatars from becoming egg shaped on small screens or printing

4. add on index:

   .conversation-list-item {
   break-inside: avoid;
   }

   to prevent avatars (or anything really) from getting cut between pages

5. On conversations you could replace the text (details) by (show details) and toggle it to (hide details) when the details are being shown.
6. hide the toggle button for group details on printing:

   @media print {
   #thread-subtitle > label > small {
   display: none;
   }
   }

7. To do: The whole top section (members / group details) does not resize well to small screens / printing. At a certain width the columns no longer look too good and it would be best to start showing content underneath each other at full with. Try printing a group conversation with many members and a signal group link referenced in the description and you'll see the issues. I guess something like setting a minimum with for the columns and making sure the items wrap underneath each other. I haven't made an attempt yet.
8. I see

   @media print {
   .msg {
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
   }
   }

   max-content breaks the page when resized, it should just be fit-content

   @media print {
   .msg {
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
   }
   }

9. Quoted messages with both text and image do not scale well, especially if the image is long but narrow. replace

   .msg-quote-attach img {
   max-height: 5em;
   }

   by

   .msg-quote-attach img {
   min-height: 5em;
   min-width: 150px;
   }

   and delete

   .msg-quote-attach {
   max-width: 30%;
   }

   (for myself to test this in the future, check the conversation with my sister, message of Apr 26, 2023)

10. gifs currently have a bubble / background, but shouldn't have those (just like stickers don't have those)
11. status icons are not printing right, this addition is needed:

    .msg-status .msg-video-call-incoming, .msg-status .msg-video-call-outgoing, .msg-status .msg-group-call, .msg-status .msg-call-incoming, .msg-status .msg-call-missed, .msg-status .msg-call-outgoing, .msg-status .msg-info-icon, .msg-status .msg-security-icon, .msg-status .msg-profile-icon, .msg-status .msg-checkmark, .msg-status .msg-expiration-timer-disabled, .msg-status .msg-expiration-timer-set {
    print-color-adjust: exact;
    }

[Meteor0id]

Certain (webp ?) images / stickers are rendered as squares even though they are wider than than they are high. I have not attempted to figure out why but here is an example. Note that this is a Dutch political meme but sharing this screenshot does not mean I endorse the sticker or anything like that.

[Meteor0id]

I see you adopted the idea of applying filter: to certain things, however these

.no-bg-bubble .checkmarks-sent, .no-bg-bubble .checkmarks-read, .no-bg-bubble .checkmarks-received {
filter: var(--nobgbubble-checkmarks-f);
}
.status-text > div, .checkmarks {
filter: var(--media-status-checkmarks-f);
}

are now overwriting this:

:root[data-theme="dark"] {
--media-status-checkmarks-f: brightness(.75);
}

and they should not. It causes some check marks to be white on white paper when printing. You could solve it by addin !important but there are other ways too.

(I guess this is also happening on the light theme but I have not checked)

[Meteor0id]

On Note to Self you are not including <input type="checkbox" id="zoomCheck-avatar"> on purpose, because you don't intent for the note to self icon to be zoomable. However you are by accident still including

.header-avatar:hover {
        cursor: zoom-in;
      }

      #message-header input[type=checkbox] {
      display: none;
      }

      #message-header input[type=checkbox]:checked ~ label > .avatar {
        transform: translateY(240px) scale(5);
        border-radius: 0;
        position: relative;
        z-index: 1;
        cursor: zoom-out;
      }

which causes the pointer to show as a zoom in pointer. Nobody cares of course, but since I noticed I might as well report it.

---

edit:

when zooming images and zooming out again, you can see the image warping behind other elements. To prevent this, all zoomable images (avatar, attached images, stcikers, anything zoomable) should be give the following properties:

position: relative;
z-index: 1;

also apologies for posting multiple times hope I have not e-mail spammed you at night. Will use edit more often.

---

beware, Signal is about to release text formatting which means we'll need to do a bit extra work on styling text messages. https://community.signalusers.org/t/beta-feedback-for-the-upcoming-android-6-21-release/53386/8?u=meteor0id