12 files changed, 366 insertions, 0 deletions
diff --git a/comm/mail/components/im/messages/papersheets/Bitmaps/information.png b/comm/mail/components/im/messages/papersheets/Bitmaps/information.png
new file mode 100644
index 0000000000..ff62c80758
--- /dev/null
+++ b/comm/mail/components/im/messages/papersheets/Bitmaps/information.png
diff --git a/comm/mail/components/im/messages/papersheets/Bitmaps/minus.png b/comm/mail/components/im/messages/papersheets/Bitmaps/minus.png
new file mode 100644
index 0000000000..f84a080807
--- /dev/null
+++ b/comm/mail/components/im/messages/papersheets/Bitmaps/minus.png
diff --git a/comm/mail/components/im/messages/papersheets/Bitmaps/plus.png b/comm/mail/components/im/messages/papersheets/Bitmaps/plus.png
new file mode 100644
index 0000000000..9f5e414f44
--- /dev/null
+++ b/comm/mail/components/im/messages/papersheets/Bitmaps/plus.png
diff --git a/comm/mail/components/im/messages/papersheets/Incoming/Content.html b/comm/mail/components/im/messages/papersheets/Incoming/Content.html
new file mode 100644
index 0000000000..c395055382
--- /dev/null
+++ b/comm/mail/components/im/messages/papersheets/Incoming/Content.html
@@ -0,0 +1,4 @@
+<div class="messages-group %messageClasses%" data-senderColor="%senderColor%">
+<p class="%messageClasses%"><span class="date">%time%</span> <span class="pseudo" style="%senderColor%">%sender%</span> <span class="message-style">%message%</span></p>
+<div id="insert"/>
+</div>
diff --git a/comm/mail/components/im/messages/papersheets/Incoming/Context.html b/comm/mail/components/im/messages/papersheets/Incoming/Context.html
new file mode 100644
index 0000000000..38c9bc0ee8
--- /dev/null
+++ b/comm/mail/components/im/messages/papersheets/Incoming/Context.html
@@ -0,0 +1,4 @@
+<div class="messages-group context %messageClasses%" data-senderColor="%senderColor%">
+<p class="%messageClasses%"><span class="date">%time%</span> <span class="pseudo" style="%senderColor%">%sender%</span> <span class="message-style">%message%</span></p>
+<div id="insert"/>
+</div>
diff --git a/comm/mail/components/im/messages/papersheets/Incoming/NextContent.html b/comm/mail/components/im/messages/papersheets/Incoming/NextContent.html
new file mode 100644
index 0000000000..8bba392803
--- /dev/null
+++ b/comm/mail/components/im/messages/papersheets/Incoming/NextContent.html
@@ -0,0 +1,3 @@
+<hr/>
+<p class="%messageClasses%"><span class="date date-next">%time%</span> <span class="message-style">%message%</span></p>
+<div id="insert"/>
diff --git a/comm/mail/components/im/messages/papersheets/Info.plist b/comm/mail/components/im/messages/papersheets/Info.plist
new file mode 100644
index 0000000000..420ceb5498
--- /dev/null
+++ b/comm/mail/components/im/messages/papersheets/Info.plist
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+  <key>ActionMessageTemplate</key>
+  <string>%sender% %message%</string>
+  
+  <key>CFBundleDevelopmentRegion</key>
+  <string>English</string>
+  
+  <key>CFBundleGetInfoString</key>
+  <string>Instantbird PaperSheets Message Style</string>
+  
+  <key>CFBundleIdentifier</key>
+  <string>org.instantbird.papersheets.message.style</string>
+  
+  <key>CFBundleInfoDictionaryVersion</key>
+  <string>1.0</string>
+  
+  <key>CFBundleName</key>
+  <string>PaperSheets</string>
+  
+  <key>CFBundlePackageType</key>
+  <string>AdIM</string>
+  
+  <key>DefaultBackgroundColor</key>
+  <string>FFFFFF</string>
+  
+  <key>DisableCustomBackground</key>
+  <false/>
+  
+  <key>MessageViewVersion</key>
+  <integer>4</integer>
+  
+  <key>ShowsUserIcons</key>
+  <true/>
+</dict>
+</plist>
diff --git a/comm/mail/components/im/messages/papersheets/NextStatus.html b/comm/mail/components/im/messages/papersheets/NextStatus.html
new file mode 100644
index 0000000000..b72b0f30ba
--- /dev/null
+++ b/comm/mail/components/im/messages/papersheets/NextStatus.html
@@ -0,0 +1,2 @@
+<p class="%messageClasses%"><span class="date">%time%</span> <span class="message-style">%message%</span></p>
+<div id="insert"/>
diff --git a/comm/mail/components/im/messages/papersheets/Status.html b/comm/mail/components/im/messages/papersheets/Status.html
new file mode 100644
index 0000000000..2f1c524a51
--- /dev/null
+++ b/comm/mail/components/im/messages/papersheets/Status.html
@@ -0,0 +1,4 @@
+<div class="messages-group %messageClasses%">
+<p class="%messageClasses%"><span class="date">%time%</span> <span class="message-style">%message%</span></p>
+<div id="insert"/>
+</div>
diff --git a/comm/mail/components/im/messages/papersheets/Variants/White.css b/comm/mail/components/im/messages/papersheets/Variants/White.css
new file mode 100644
index 0000000000..c0221a94fc
--- /dev/null
+++ b/comm/mail/components/im/messages/papersheets/Variants/White.css
@@ -0,0 +1,22 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+div.outgoing {
+  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 15px, rgba(255, 255, 255, 1) 15px, rgba(255, 255, 255, 1)) !important;
+}
+
+div.incoming {
+  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 15px, rgba(255, 255, 255, 1) 15px, rgba(255, 255, 255, 1)) !important;
+}
+
+
+
+/* used by javascript */
+.outgoing-color {
+  background-color: rgb(255, 255, 255);
+}
+
+.incoming-color {
+  background-color: rgb(255, 255, 255);
+}
diff --git a/comm/mail/components/im/messages/papersheets/inline.js b/comm/mail/components/im/messages/papersheets/inline.js
new file mode 100644
index 0000000000..5c711a34fb
--- /dev/null
+++ b/comm/mail/components/im/messages/papersheets/inline.js
@@ -0,0 +1,81 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const bg_gradient =
+  "background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 15px, hsla(#, 100%, 98%, 1) 15px, hsla(#, 100%, 98%, 1));";
+const bg_context_gradient =
+  "background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05) 15px, hsla(#, 20%, 98%, 1) 15px, hsla(#, 20%, 98%, 1));";
+const bg_color = "background-color: hsl(#, 100%, 98%);";
+
+var body = document.getElementById("ibcontent");
+
+function setColors(target) {
+  var senderColor = target.getAttribute("data-senderColor");
+
+  if (senderColor) {
+    var regexp =
+      /color:\s*hsl\(\s*(\d{1,3})\s*,\s*\d{1,3}\%\s*,\s*\d{1,3}\%\s*\)/;
+    var parsed = regexp.exec(senderColor);
+
+    if (parsed) {
+      var senderHue = parsed[1];
+      if (target.classList.contains("context")) {
+        target.setAttribute(
+          "style",
+          bg_context_gradient.replace(/#/g, senderHue)
+        );
+      } else {
+        target.setAttribute("style", bg_gradient.replace(/#/g, senderHue));
+      }
+    }
+  }
+
+  if (body.scrollHeight <= screen.height) {
+    if (senderHue) {
+      body.setAttribute("style", bg_color.replace("#", senderHue));
+    } else if (target.classList.contains("outgoing")) {
+      body.className = "outgoing-color";
+      body.removeAttribute("style");
+    } else if (target.classList.contains("incoming")) {
+      body.className = "incoming-color";
+      body.removeAttribute("style");
+    } else if (target.classList.contains("event")) {
+      body.className = "event-color";
+      body.removeAttribute("style");
+    }
+  }
+}
+
+function checkNewText(target) {
+  if (target.tagName == "DIV") {
+    setColors(target);
+  } else if (target.tagName == "P" && target.className == "event") {
+    let parent = target.parentNode;
+    // We need to start a group with this element if there are at least 3
+    // system messages and they aren't already grouped.
+    if (!parent?.grouped && parent?.querySelector("p.event:nth-of-type(3)")) {
+      var div = document.createElement("div");
+      div.className = "eventToggle";
+      div.addEventListener("click", event =>
+        event.target.parentNode.classList.toggle("hide-children")
+      );
+      parent.insertBefore(div, parent.querySelector("p.event:first-of-type"));
+      parent.classList.add("hide-children");
+      parent.grouped = true;
+    }
+  }
+}
+
+new MutationObserver(function (aMutations) {
+  for (let mutation of aMutations) {
+    for (let node of mutation.addedNodes) {
+      if (node instanceof HTMLElement) {
+        checkNewText(node);
+      }
+    }
+  }
+}).observe(document.getElementById("ibcontent"), {
+  childList: true,
+  subtree: true,
+});
diff --git a/comm/mail/components/im/messages/papersheets/main.css b/comm/mail/components/im/messages/papersheets/main.css
new file mode 100644
index 0000000000..af70637d4f
--- /dev/null
+++ b/comm/mail/components/im/messages/papersheets/main.css
@@ -0,0 +1,208 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+body {
+  margin: 0;
+  padding: 0;
+  color: #000;
+}
+
+p {
+  font-family: sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+div.messages-group {
+  margin: -15px 0 0 0;
+  padding: 18px 5px 20px 5px;
+}
+
+div.outgoing {
+  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 15px, rgba(245, 245, 255, 1) 15px, rgba(245, 245, 255, 1));
+}
+
+div.incoming {
+  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 15px, rgba(255, 245, 245, 1) 15px, rgba(255, 245, 245, 1));
+}
+
+div.event {
+  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 15px, rgba(255, 255, 240, 1) 15px, rgba(255, 255, 240, 1));
+}
+
+div.context+div.event {
+  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05) 15px, rgba(255, 255, 240, 1) 15px, rgba(255, 255, 240, 1));
+}
+
+div.context:not(:hover) > p {
+  opacity: 0.55;
+}
+
+div.messages-group:last-child {
+  padding-bottom: 10px;
+}
+
+div.messages-group > hr {
+  margin: 3px 50px 0px 20px;
+  background-color: rgba(0, 0, 0, 0.05);
+  height: 1px;
+  border: 0;
+}
+
+span.message-style {
+  margin: 2px 50px 0px 20px;
+  display: block;
+  float: none;
+}
+
+span.date {
+  color: rgba(0, 0, 0, 0.4);
+  font-size: smaller;
+  text-align: right;
+  float: inline-end;
+  display: block;
+}
+
+span.date-next {
+  opacity: 0.4;
+  margin-top: -6px;
+  -moz-transition-property: opacity;
+  -moz-transition-duration: 0.3s;
+}
+
+p:hover > span.date-next {
+  opacity: 1;
+}
+
+span.pseudo {
+  font-weight: bold;
+  float: none;
+  display: block;
+}
+
+p.outgoing > span.pseudo {
+  color: rgb(80,80,200);
+}
+
+p.incoming > span.pseudo {
+  color: rgb(200,80,80);
+}
+
+p.nick > span.message-style {
+  font-weight: bold;
+}
+
+p.action > span.message-style {
+  font-style: italic;
+}
+
+p.action > span.message-style::before {
+  content: "*** ";
+}
+
+p.event {
+  margin-left: 0px;
+  min-height: 16px;
+  background: url('Bitmaps/information.png') no-repeat top left;
+}
+
+p.event > span.message-style {
+  color: rgba(0, 0, 0, 0.4);
+}
+
+#Chat {
+  white-space: normal;
+}
+
+p *:any-link img {
+  margin-bottom: 1px;
+  border-bottom: solid 1px;
+}
+
+.ib-sender.message-encrypted {
+  position: relative;
+}
+
+.ib-sender.message-encrypted::after {
+  position: relative;
+  display: inline-block;
+  content: '';
+  width: 11px;
+  height: 11px;
+  opacity: 0.7;
+  background: url("chrome://messenger/skin/icons/connection-secure.svg") no-repeat center;
+  background-size: contain;
+  margin-inline-start: 4px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+/* used by javascript */
+.outgoing-color {
+  background-color: rgb(245, 245, 255);
+}
+
+.incoming-color {
+  background-color: rgb(255, 245, 245);
+}
+
+.event-color {
+  background-color: rgb(255, 255, 240);
+}
+
+.eventToggle {
+  margin-top: -2px;
+  margin-left: -4px;
+  height: 9px;
+  width: 9px;
+  cursor: pointer;
+  background: url('Bitmaps/minus.png') no-repeat left top;
+}
+
+.hide-children > .eventToggle {
+  background-image: url('Bitmaps/plus.png');
+}
+
+.hide-children > p.event:first-of-type > .message-style::after {
+  content: "[\2026]"; /* &hellip; */
+  margin-left: 1em;
+  color: #5a7ac6;
+  font-size: smaller;
+}
+
+.hide-children > p.event:not(:first-of-type,:last-of-type) {
+  display: none;
+}
+
+/* Adapt styles to narrow windows */
+@media all and (max-width: 400px) {
+  div.messages-group > hr {
+    margin-right: 0;
+  }
+
+  span.message-style {
+    margin-right: 0;
+  }
+
+  span.date-next {
+    display: none;
+  }
+}
+
+@media all and (max-width: 200px) {
+  span.date {
+    display: none;
+  }
+}
+
+/* Adapt styles when the window is very low */
+@media all and (max-height: 200px) {
+  div.messages-group {
+    padding-bottom: 8px;
+  }
+
+  div.messages-group:last-child {
+    padding-bottom: 8px;
+  }
+}