Bug 1519799 - Improve the default message style UI and show the OTR encryption status of individual messages. r=clokep

chat/components/public/prplIMessage.idl

@@ -67,6 +67,8 @@ interface prplIMessage: nsISupports {
   readonly attribute boolean noLinkification;
   /* Do not collapse the message. */
   readonly attribute boolean noCollapse;
+  /* Message is encrypted */
+  readonly attribute boolean isEncrypted;
 
   /**
    * Get an array of actions the user may perform on this message.

chat/components/src/imConversations.jsm

@@ -117,6 +117,9 @@ imMessage.prototype = {
   get noCollapse() {
     return this.prplMessage.noCollapse;
   },
+  get isEncrypted() {
+    return this.prplMessage.isEncrypted;
+  },
   get originalMessage() {
     return this.prplMessage.originalMessage;
   },

chat/components/src/logger.jsm

@@ -330,6 +330,7 @@ LogWriter.prototype = {
           "containsImages",
           "notification",
           "noLinkification",
+          "isEncrypted",
         ].filter(f => aMessage[f]),
       };
       let alias = aMessage.alias;

chat/locales/en-US/conversations.properties

@@ -78,3 +78,8 @@ messenger.conversations.selections.ellipsis=[…]
 messenger.conversations.selections.systemMessagesTemplate=%time% - %message%
 messenger.conversations.selections.contentMessagesTemplate=%time% - %sender%: %message%
 messenger.conversations.selections.actionMessagesTemplate=%time% * %sender% %message%
+
+# LOCALIZATION NOTE (message.status):
+#  This is used as title attribute for the visible lock icon in case a message
+#  was sent encrypted through the OTR protocol.
+message.status=Message encrypted

chat/modules/imThemes.jsm

@@ -51,6 +51,10 @@ XPCOMUtils.defineLazyGetter(this, "gTimeFormatter", () => {
   });
 });
 
+XPCOMUtils.defineLazyGetter(this, "bundle", () =>
+  Services.strings.createBundle("chrome://chat/locale/conversations.properties")
+);
+
 ChromeUtils.defineModuleGetter(
   this,
   "ToLocaleFormat",
@@ -480,6 +484,12 @@ var statusMessageReplacements = {
 
     return msgClass.join(" ");
   },
+  encryptedClass(aMsg) {
+    return aMsg.encrypted ? "show" : "";
+  },
+  encryptedMessage(aMsg) {
+    return bundle.GetStringFromName("message.status");
+  },
 };
 
 function formatSender(aName) {

chat/modules/jsProtoHelper.jsm

@@ -594,6 +594,7 @@ var GenericMessagePrototype = {
   notification: false,
   noLinkification: false,
   noCollapse: false,
+  isEncrypted: false,
 
   getActions() {
     return [];

chat/themes/conv.css

@@ -8,7 +8,7 @@
 }
 
 .ib-img-smile {
-  vertical-align: text-bottom;
+  vertical-align: middle;
 }
 
 *:any-link .ib-img-smile {

mail/components/im/jar.mn

@@ -25,10 +25,6 @@ messenger.jar:
     content/messenger/chat/chat-conversation-info.js     (content/chat-conversation-info.js)
     content/messenger/chat/toolbarbutton-badge-button.js (content/toolbarbutton-badge-button.js)
 % skin messenger-messagestyles classic/1.0 %skin/classic/messenger/messages/
-	skin/classic/messenger/messages/mail/Bitmaps/minus-hover.png          (messages/mail/Bitmaps/minus-hover.png)
-	skin/classic/messenger/messages/mail/Bitmaps/minus.png                (messages/mail/Bitmaps/minus.png)
-	skin/classic/messenger/messages/mail/Bitmaps/plus-hover.png           (messages/mail/Bitmaps/plus-hover.png)
-	skin/classic/messenger/messages/mail/Bitmaps/plus.png                 (messages/mail/Bitmaps/plus.png)
 	skin/classic/messenger/messages/mail/Footer.html                      (messages/mail/Footer.html)
 	skin/classic/messenger/messages/mail/Incoming/buddy_icon.png          (messages/mail/Incoming/buddy_icon.png)
 	skin/classic/messenger/messages/mail/Outgoing/buddy_icon.png          (messages/mail/Incoming/buddy_icon.png)

mail/components/im/messages/mail/Footer.html

@@ -3,18 +3,18 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <script>
-
   function checkNewText(target) {
-  if (target.tagName == "P" && target.className == "event") {
-    let parent = target.parentNode;
+    if (target.className == "event-row") {
+      let parent = target.closest(".event");
       // We need to start a group with this element if there are at least 4
       // system messages and they aren't already grouped.
-    if (!parent.grouped && parent.querySelector("p.event:nth-of-type(4)")) {
-      var p = document.createElement("p");
-      p.className = "eventToggle";
-      p.addEventListener("click", event =>
-        event.target.parentNode.classList.toggle("hide-children"));
-      parent.insertBefore(p, parent.querySelector("p.event:nth-of-type(2)"));
+      if (!parent.grouped && parent.querySelector(".event-row:nth-of-type(4)")) {
+        let toggle = document.createElement("div");
+        toggle.className = "eventToggle";
+        toggle.addEventListener("click", event => {
+          toggle.closest(".event").classList.toggle("hide-children");
+        });
+        parent.insertBefore(toggle, parent.querySelector(".event-row:nth-of-type(2)"));
         parent.classList.add("hide-children");
         parent.grouped = true;
       }
@@ -31,5 +31,4 @@ new MutationObserver(function(aMutations) {
     }
   }).observe(document.getElementById("ibcontent"),
             {childList: true, subtree: true});
-
 </script>

mail/components/im/messages/mail/Incoming/Content.html

@@ -1 +1 @@
-<div class="%messageClasses%" data-prpl="%service%"><img src="%userIconPath%" class="usericon"/><div class="date">%time%</div><div class="pseudo" style="%senderColor%">%sender%</div>%message%</div>
+<div class="%messageClasses%" data-prpl="%service%"><div class="sidebar"><img src="%userIconPath%" class="usericon"/><label title="%encryptedMessage%" class="encrypted %encryptedClass%"></label><div class="date">%time{%H:%M}%</div></div><div class="body"><div class="pseudo" style="%senderColor%">%sender%</div>%message%</div></div>

mail/components/im/messages/mail/Incoming/Context.html

@@ -1 +1 @@
-<div class="context %messageClasses%" data-prpl="%service%"><img src="%userIconPath%" class="usericon"/><div class="date">%time%</div><div class="pseudo" style="%senderColor%">%sender%</div>%message%</div>
+<div class="context %messageClasses%" data-prpl="%service%"><div class="sidebar"><img src="%userIconPath%" class="usericon"/><div class="date">%time{%H:%M}%</div></div><div class="body"><div class="pseudo" style="%senderColor%">%sender%</div>%message%</div></div>

mail/components/im/messages/mail/Incoming/NextContent.html

@@ -1 +1 @@
-<div class="%messageClasses%" data-prpl="%service%"><img src="%userIconPath%" class="usericon"/><div class="date">%time%</div><div class="pseudo next" style="%senderColor%">%sender%</div>%message%</div>
+<div class="%messageClasses%" data-prpl="%service%"><div class="sidebar"><label title="%encryptedMessage%" class="encrypted %encryptedClass%"></label><div class="date">%time{%H:%M}%</div></div><div class="body">%message%</div></div>

mail/components/im/messages/mail/NextStatus.html

@@ -1,2 +1 @@
-<p class="%messageClasses%"><span class="date">%time%</span>%message%</p>
-<div id="insert"/>
+<div class="event-row"><div class="sidebar"><div class="date">%time{%H:%M}%</div></div><div class="body"><p class="event-paragraph">%message%</p></div></div><span id="insert"/>

mail/components/im/messages/mail/Status.html

@@ -1,4 +1 @@
-<div class="%messageClasses%">
-<p aria-live="polite" class="%messageClasses%"><span class="date">%time%</span>%message%</p>
-<div id="insert"/>
-</div>
+<div aria-live="polite" class="%messageClasses%"><div class="event-row"><div class="sidebar"><div class="date">%time{%H:%M}%</div></div><div class="body"><p class="event-paragraph">%message%</p></div></div><span id="insert"/></div>

mail/components/im/messages/mail/main.css

@@ -7,31 +7,73 @@
 }
 
 /* The "#chat " is required to override "#Chat *" from conv.css */
-#Chat .pseudo {
-  overflow-x: hidden !important;
-}
 
 .message {
-  clear: both;
+  display: flex;
+  align-items: flex-start;
+  margin-block: 5px;
+  padding: 5px 6px;
+  border-radius: 4px;
+}
+
+#Chat .event {
+  display: flex;
+  flex-direction: column;
+  margin-left: 0;
+  clear: none;
+  padding-inline: 6px;
+}
+
+.event-row {
+  display: flex;
+  align-items: start;
+}
+
+#Chat .event p {
+  margin: 0;
+  margin-block-end: 5px;
+  color: GrayText;
+}
+
+#Chat #unread-ruler {
+  margin: 4px;
+  border-top: 1px solid #30e60b;
+}
+
+.message:hover,
+.message:focus {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+.sidebar {
+  display: flex;
+  justify-content: end;
+  margin-inline-end: 10px;
+  margin-block-start: 2px;
+  width: 4.5em;
+  flex-wrap: wrap;
+  text-align: right;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }
 
 .pseudo {
+  font-size: 0.9em;
   font-weight: bold;
-  float: inline-start;
-  width: calc(15% - 3px);
-  text-align: right;
-  padding-bottom: 5px;
-  display: block;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  letter-spacing: 0.01em;
+  margin-block-end: 0;
 }
 
-.outgoing > .pseudo {
-  color: rgb(80, 80, 200);
+.outgoing .pseudo {
+  color: #0060DF;
 }
 
-.incoming > .pseudo {
-  color: rgb(200, 80, 80);
+.incoming .pseudo {
+  color: #B5007F;
 }
 
 .message:not(.action) > .next {
@@ -39,32 +81,37 @@
 }
 
 .date {
+  font-size: 0.75em;
+  text-transform: uppercase;
   font-style: normal;
   font-weight: normal;
-  float: inline-end;
   color: GrayText;
+  white-space: nowrap;
 }
 
-.message > .ib-msg-txt,
-.event {
-  display: block;
-  margin-left: 15%;
-  padding-bottom: 5px;
+.encrypted {
+  display: none;
+  width: 11px;
+  height: 11px;
+  opacity: 0.35;
+  background: url("chrome://messenger/skin/icons/connection-secure.svg") no-repeat center;
+  background-size: contain;
+  margin-top: 1px;
+  margin-inline-end: 2px;
 }
 
-p.event {
-  margin-left: 0;
+.encrypted:hover {
+  opacity: 0.75;
+}
+
+.encrypted.show {
+  display: inline-block;
 }
 
 .usericon {
   display: none;
 }
 
-.event {
-  color: GrayText;
-  clear: both;
-}
-
 .nick {
   font-weight: bold;
 }
@@ -85,10 +132,6 @@ p.event {
   opacity: 0.7;
 }
 
-p {
-  margin: 0px auto;
-}
-
 p *:any-link img {
   margin-bottom: 1px;
   border-bottom: solid 1px;
@@ -98,86 +141,44 @@ p *:any-link img {
   margin: 8px 0 12px;
   width: 100%;
   border: none;
-  border-top: 1px dashed GrayText;
+  border-top: 1px solid ThreeDDarkShadow;
 }
 
-
 /* used by javascript */
 .eventToggle {
-  cursor: pointer;
-  min-height: 22px;
-  margin-inline-start: -20px;
-  padding-inline-start: 20px;
-  background: url('Bitmaps/minus.png') no-repeat left center;
+  background: url("chrome://global/skin/icons/twisty-expanded.svg") no-repeat left center;
   margin-bottom: -22px;
-  width: 0px;
+  cursor: pointer;
+  height: 22px;
+  width: 20px;
+  z-index: 1;
+  opacity: 0.5;
 }
 
 .eventToggle:hover {
-  background: url('Bitmaps/minus-hover.png') no-repeat left center;
+  opacity: 1;
 }
 
-.hide-children > .eventToggle {
-  width: 100%;
-  margin-bottom: -5px;
-  background-image: url('Bitmaps/plus.png');
-}
-
-.hide-children > .eventToggle:hover {
-  background-image: url('Bitmaps/plus-hover.png');
-}
-
-.hide-children > .eventToggle:after {
-  content: "\2026"; /* … */
-  color: GrayText;
-}
-
-.hide-children > :-moz-any(p.event, hr):not(:first-of-type):not(:last-of-type):not(.no-collapse) {
+.hide-children > :-moz-any(p.event.row, hr):not(:first-of-type):not(:last-of-type):not(.no-collapse) {
   display: none;
 }
 
 /* We style Twitter differently from other types of chat */
 
 .message:-moz-any([data-prpl="Twitter"], [data-prpl="twitter"]) {
-  background-color: hsl(0, 0%, 99%);
-  border-radius: 5px;
-  border: 1px solid hsl(0, 0%, 85%);
-  min-height: 48px;
-  padding: 6px;
-  margin-left: 0px;
-  margin-bottom: 6px;
+  background-color: rgba(69, 161, 255, 0.1);
+  border: 1px solid #45a1ff;
+  margin-bottom: 10px;
 }
 
-.message:-moz-any([data-prpl="Twitter"], [data-prpl="twitter"]) > .pseudo {
-  float: none;
-  text-align: left;
-  display: block;
-  width: auto;
-  padding-left: 64px;
-}
-
-.message:-moz-any([data-prpl="Twitter"], [data-prpl="twitter"]) > .next {
+.message:-moz-any([data-prpl="Twitter"], [data-prpl="twitter"]) .next {
   visibility: visible;
 }
 
-.message:-moz-any([data-prpl="Twitter"], [data-prpl="twitter"]) > .ib-msg-txt {
-  margin-left: 0px;
-  padding-left: 64px;
-}
-
-.message:-moz-any([data-prpl="Twitter"], [data-prpl="twitter"]) > .usericon {
-  position: absolute;
+.message:-moz-any([data-prpl="Twitter"], [data-prpl="twitter"]) .usericon {
   display: block;
-  max-width: 48px;
-  max-height: 48px;
-  margin-right: 6px;
-  border-radius: 5px;
-}
-
-.message:-moz-any([data-prpl="Twitter"], [data-prpl="twitter"]) ~ .event {
-  margin-left: 71px;
-}
-
-.message:-moz-any([data-prpl="Twitter"], [data-prpl="twitter"]) ~ .event > .date {
-  margin-right: 7px;
+  max-width: 42px;
+  max-height: 42px;
+  border-radius: 9999px;
+  margin-block-end: 8px;
 }

mail/installer/allowed-dupes.mn

@@ -22,14 +22,6 @@ chrome/messenger/content/messenger/extension.svg
 chrome/messenger/skin/classic/messenger/messages/simple/Variants/Normal.css
 chrome/messenger/skin/classic/messenger/messages/simple/Incoming/Context.html
 chrome/messenger/skin/classic/messenger/messages/simple/Incoming/NextContext.html
-chrome/messenger/skin/classic/messenger/messages/bubbles/Bitmaps/plus.png
-chrome/messenger/skin/classic/messenger/messages/mail/Bitmaps/plus.png
-chrome/messenger/skin/classic/messenger/messages/bubbles/Bitmaps/plus-hover.png
-chrome/messenger/skin/classic/messenger/messages/mail/Bitmaps/plus-hover.png
-chrome/messenger/skin/classic/messenger/messages/bubbles/Bitmaps/minus.png
-chrome/messenger/skin/classic/messenger/messages/mail/Bitmaps/minus.png
-chrome/messenger/skin/classic/messenger/messages/bubbles/Bitmaps/minus-hover.png
-chrome/messenger/skin/classic/messenger/messages/mail/Bitmaps/minus-hover.png
 chrome/messenger/skin/classic/messenger/messages/mail/Incoming/buddy_icon.png
 chrome/messenger/skin/classic/messenger/messages/mail/Outgoing/buddy_icon.png
 chrome/devtools/modules/devtools/client/themes/splitters.css