From 947382a8dc6187483483f0fa39a51d7a6e454595 Mon Sep 17 00:00:00 2001 From: Alessandro Castellani Date: Sat, 18 Apr 2020 13:47:26 +0300 Subject: [PATCH] Bug 1519799 - Improve the default message style UI and show the OTR encryption status of individual messages. r=clokep --- chat/components/public/prplIMessage.idl | 2 + chat/components/src/imConversations.jsm | 3 + chat/components/src/logger.jsm | 1 + chat/locales/en-US/conversations.properties | 5 + chat/modules/imThemes.jsm | 10 + chat/modules/jsProtoHelper.jsm | 1 + chat/themes/conv.css | 2 +- mail/components/im/jar.mn | 4 - .../im/messages/mail/Bitmaps/minus-hover.png | Bin 620 -> 0 bytes .../im/messages/mail/Bitmaps/minus.png | Bin 619 -> 0 bytes .../im/messages/mail/Bitmaps/plus-hover.png | Bin 615 -> 0 bytes .../im/messages/mail/Bitmaps/plus.png | Bin 614 -> 0 bytes mail/components/im/messages/mail/Footer.html | 49 +++-- .../im/messages/mail/Incoming/Content.html | 2 +- .../im/messages/mail/Incoming/Context.html | 2 +- .../messages/mail/Incoming/NextContent.html | 2 +- .../im/messages/mail/NextStatus.html | 3 +- mail/components/im/messages/mail/Status.html | 5 +- mail/components/im/messages/mail/main.css | 185 +++++++++--------- mail/installer/allowed-dupes.mn | 8 - 20 files changed, 145 insertions(+), 139 deletions(-) delete mode 100644 mail/components/im/messages/mail/Bitmaps/minus-hover.png delete mode 100644 mail/components/im/messages/mail/Bitmaps/minus.png delete mode 100644 mail/components/im/messages/mail/Bitmaps/plus-hover.png delete mode 100644 mail/components/im/messages/mail/Bitmaps/plus.png diff --git a/chat/components/public/prplIMessage.idl b/chat/components/public/prplIMessage.idl index f4d5b19c46..225d322c58 100644 --- a/chat/components/public/prplIMessage.idl +++ b/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. diff --git a/chat/components/src/imConversations.jsm b/chat/components/src/imConversations.jsm index f53b64ea80..ba4906a884 100644 --- a/chat/components/src/imConversations.jsm +++ b/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; }, diff --git a/chat/components/src/logger.jsm b/chat/components/src/logger.jsm index 9863d83dc7..f529b76d20 100644 --- a/chat/components/src/logger.jsm +++ b/chat/components/src/logger.jsm @@ -330,6 +330,7 @@ LogWriter.prototype = { "containsImages", "notification", "noLinkification", + "isEncrypted", ].filter(f => aMessage[f]), }; let alias = aMessage.alias; diff --git a/chat/locales/en-US/conversations.properties b/chat/locales/en-US/conversations.properties index 1a5564a6ec..3b20573782 100644 --- a/chat/locales/en-US/conversations.properties +++ b/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 diff --git a/chat/modules/imThemes.jsm b/chat/modules/imThemes.jsm index f063e4ccea..512fe7dc4b 100644 --- a/chat/modules/imThemes.jsm +++ b/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) { diff --git a/chat/modules/jsProtoHelper.jsm b/chat/modules/jsProtoHelper.jsm index 32d8f3bb6d..2186274304 100644 --- a/chat/modules/jsProtoHelper.jsm +++ b/chat/modules/jsProtoHelper.jsm @@ -594,6 +594,7 @@ var GenericMessagePrototype = { notification: false, noLinkification: false, noCollapse: false, + isEncrypted: false, getActions() { return []; diff --git a/chat/themes/conv.css b/chat/themes/conv.css index dc8e0cdbc0..f460db7e89 100644 --- a/chat/themes/conv.css +++ b/chat/themes/conv.css @@ -8,7 +8,7 @@ } .ib-img-smile { - vertical-align: text-bottom; + vertical-align: middle; } *:any-link .ib-img-smile { diff --git a/mail/components/im/jar.mn b/mail/components/im/jar.mn index 443f2f06d0..8c402b0b0f 100644 --- a/mail/components/im/jar.mn +++ b/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) diff --git a/mail/components/im/messages/mail/Bitmaps/minus-hover.png b/mail/components/im/messages/mail/Bitmaps/minus-hover.png deleted file mode 100644 index 93a69cc789aeeba65a66e31418160bbbc9bef692..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 620 zcmV-y0+aoTP)*Yy^F>$=#sO`%W#AdX|gFeC_q4EPmzDWzNqrPTU4 zlgXrGn&zot7}RPtEX&$yCyF9`-zP~DfR2>%eFoA-qtQ{hT>b{+>-G9x$R=zyn`O^z zYN;FHIL>Pz@4D_m2!Lf-xULIe0&Okb7n-Iu0BqYn2+6b&+stJkUDuxi>%>l{(>o!a z=dELbh6adqJV==%mdoXL!!Vx5ag5_Qc%FCgavaCm^g;s^ppqn+0)%0BZxk3%@3+N9M9LSaNI{$+J0000R zd4*DnT?rusfZBI>Kw>vGfoPM-3kgHa!)^Ip{>$+}N2=RZP7SMqlP#6pbC#_bi&HgrWE~UK6lK*NW3CsWt zrPQy3iQ18oT_~lL5aNd0lDK&&1a9+kM@f6#0P(+o{s4i7%Y)2RiiiLJ002ovPDHLk FV1l8B4mAJ( diff --git a/mail/components/im/messages/mail/Bitmaps/plus-hover.png b/mail/components/im/messages/mail/Bitmaps/plus-hover.png deleted file mode 100644 index 4509b17c0e9d2bf70c6dff3f17386d721eabb493..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 615 zcmV-t0+{`YP)p+ixw)qE@TnIL=->aU3(B&si>)0BtGdI}I|1!{JG}T>c8=>-G8$WICM!5Cp*v zY&M(eHk(H3MtGk00?7Nmf6z%*j^p6_K7b9pG<42}VKe|-*S!;>m8os!G{`i~$G|pN z-A-27vmgkzwLrrFMEV^i?TFQC_06)Zvm{CIJZ~r1ePP3998z5wfCAKVxtsz-QFLz? znc7PowpuI}AAw(C7!t?vosc+=^8;F4kq`T{9pVICpL zQ-pwBV5=YmJKrEI1iOG~(uswTVpj-+6c$z%wv!oVGd^m1$>ZF{x}K}LWoYMWA=KzHz17(nYzyDd+^)`U(x;T!5Wmy2kaZDJ71VNAizW~prlpCRx+O;#A z&AOIly)z7hN~MBr+XwALQN(JsB1sZ}u9Wh92GYjk@p-jc{R$N7_4*!UKA!{N`~Dtm zxm;##wzSlZI6FIg2^3t{J?bPc+qQ9C7oZ5d(z2X&U2g(7j&m<0Q?9mUbhY%p(t%Pb!aC`_l*Zn<2(IB6gOqtR$Q8jVJuipAnn zIN^x^X02AUhr{7(&-1!Mi2r-EfDV{IaWEL1x7+Owhu6rZl=6F?{KpzeVFq9*rGEY` z@Vt!tk5WnrA#T}@#O*^Nu+3#p>3ZD&$-jVp1N9Wn>y(Db;s5{u07*qoM6N<$g7y#w AbN~PV diff --git a/mail/components/im/messages/mail/Footer.html b/mail/components/im/messages/mail/Footer.html index 97f2c6df16..2533d876f9 100644 --- a/mail/components/im/messages/mail/Footer.html +++ b/mail/components/im/messages/mail/Footer.html @@ -3,33 +3,32 @@ - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> diff --git a/mail/components/im/messages/mail/Incoming/Content.html b/mail/components/im/messages/mail/Incoming/Content.html index 06e73261f9..2b0a4f2e9d 100644 --- a/mail/components/im/messages/mail/Incoming/Content.html +++ b/mail/components/im/messages/mail/Incoming/Content.html @@ -1 +1 @@ -
%time%
%sender%
%message%
+
%time{%H:%M}%
%sender%
%message%
diff --git a/mail/components/im/messages/mail/Incoming/Context.html b/mail/components/im/messages/mail/Incoming/Context.html index 5758431050..615de19423 100644 --- a/mail/components/im/messages/mail/Incoming/Context.html +++ b/mail/components/im/messages/mail/Incoming/Context.html @@ -1 +1 @@ -
%time%
%sender%
%message%
+
%time{%H:%M}%
%sender%
%message%
diff --git a/mail/components/im/messages/mail/Incoming/NextContent.html b/mail/components/im/messages/mail/Incoming/NextContent.html index 7824f2323b..cb99c1c668 100644 --- a/mail/components/im/messages/mail/Incoming/NextContent.html +++ b/mail/components/im/messages/mail/Incoming/NextContent.html @@ -1 +1 @@ -
%time%
%message%
+
%time{%H:%M}%
%message%
diff --git a/mail/components/im/messages/mail/NextStatus.html b/mail/components/im/messages/mail/NextStatus.html index 6c231ed59b..26dd6fac41 100644 --- a/mail/components/im/messages/mail/NextStatus.html +++ b/mail/components/im/messages/mail/NextStatus.html @@ -1,2 +1 @@ -

%time%%message%

-
+
%time{%H:%M}%

%message%

diff --git a/mail/components/im/messages/mail/Status.html b/mail/components/im/messages/mail/Status.html index 06b513ffb4..a59a34e211 100644 --- a/mail/components/im/messages/mail/Status.html +++ b/mail/components/im/messages/mail/Status.html @@ -1,4 +1 @@ -
-

%time%%message%

-
-
+
%time{%H:%M}%

%message%

diff --git a/mail/components/im/messages/mail/main.css b/mail/components/im/messages/mail/main.css index 35131f2aab..ba0637f96d 100644 --- a/mail/components/im/messages/mail/main.css +++ b/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; } diff --git a/mail/installer/allowed-dupes.mn b/mail/installer/allowed-dupes.mn index 819eafd45f..510de43573 100644 --- a/mail/installer/allowed-dupes.mn +++ b/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