Publish Vulpes Preview 15 sources for desktop, Android and Tundra

Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.

gaia/apps/sms/views/conversation/style/attachment.css

@@ -0,0 +1,214 @@
+/**
+ * Attachment containers are either:
+ *  - <div> elements, in the message thread;
+ *  - <iframe> elements, in the Compose area (draft attachments).
+ * Both containers have an `attachment-container' class, but only <iframe>
+ * containers have an `attachment-draft' class.
+ */
+.attachment-container {
+  position: relative;
+  margin-bottom: 0.5rem;
+
+  display: block;
+  border: none;
+  height: 10rem;
+  width: 10rem;
+
+  -moz-user-select: none;
+}
+
+.attachment-draft {
+  margin: 0;
+  padding: 0;
+
+  font-family: sans-serif;
+}
+
+/* make sure all pointer events are sent to the main container */
+.attachment-draft *,
+.attachment-container * {
+  pointer-events: none;
+}
+
+.attachment-container.nopreview { /* 100x100 px placeholder + filename below */
+  height: 12.7rem; /* font-size = 1.7rem + 1rem margin */
+}
+
+/* Internal height of the iframe that contains the attachment draft */
+.attachment-container.nopreview[data-attachment-type="vcard"] {
+  /* 40x40 px placeholder + filename below */
+  height: 6.7rem; /* font-size = 1.7rem + 1rem margin */
+}
+
+/* The internal height of the attachment itself */
+.attachment[data-attachment-type="vcard"] {
+  height: 100%;
+}
+
+/* Allow to display the filename properly */
+#messages-input > [data-attachment-type="vcard"] {
+  width: 20rem;
+}
+
+.article-list[data-type="list"] .message .attachment-container {
+  margin: 1rem 0;
+}
+
+/**
+ * Attachments that occur at the bounds of an MMS message do not need
+ * additional spacing.
+ */
+#messages-container[data-type="list"] .message .attachment-container:first-child {
+  margin-top: 0;
+}
+#messages-container[data-type="list"] .message .attachment-container:last-child {
+  margin-bottom: 0;
+}
+
+.attachment {
+  position: absolute;
+  top: 0;
+  offset-inline-start: 0;
+
+  width: 10rem;
+  height: 10rem;
+}
+
+.outgoing .attachment {
+  offset-inline-start: auto;
+  offset-inline-end: 0;
+}
+
+.preview .attachment {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+
+  background-color: #ececec;
+  border: 2px solid #fff;
+}
+
+.preview .attachment:active,
+.preview .attachment:hover {
+  background-color: #b2f2ff;
+}
+
+.size-indicator {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+
+  padding: 0 0.4rem;
+  display: none;
+
+  background: rgba(255, 255, 255, 0.9);
+  color: #333;
+  font-size: 1.5rem;
+}
+
+.attachment-draft > :not([data-attachment-type="vcard"]) .size-indicator {
+  display: block;
+}
+
+.file-name {
+  position: absolute;
+  bottom: 0.5rem;
+
+  height: 2rem;
+  display: none;
+
+  line-height: 2rem;
+  font-size: 1.6rem;
+  font-style: italic;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* .file-name has a dir="auto". Moreover, sms.css in not included in attachment
+ * iframe, so we cannot leverage the general alignment rules. */
+html[dir="ltr"] .file-name {
+  text-align: left;
+  left: 1px; /* Avoid issues related to being too much on the left */
+  right: 0;
+}
+html[dir="rtl"] .file-name {
+  text-align: right;
+  left: 0;
+  right: 1px;
+}
+
+.attachment-draft .file-name {
+  color: #4a4a4a;
+}
+
+.nopreview .file-name {
+  display: block;
+
+  unicode-bidi: -moz-plaintext;
+}
+
+.thumbnail {
+  width: 100%;
+  height: 100%;
+
+  background: none no-repeat center center / cover;
+}
+
+.thumbnail-placeholder {
+  width: 100%;
+  height: 100%;
+
+  /* BiDi-proof: CSS sprites */
+  background: url('images/attachments.png') no-repeat left top / 10rem;
+}
+
+.attachment-container .thumbnail,
+.attachment-container .thumbnail-placeholder {
+  position: absolute;
+  top: 0
+}
+
+.attachment-draft:hover .thumbnail-placeholder:not(.vcard-placeholder),
+.attachment-draft:active .thumbnail-placeholder:not(.vcard-placeholder),
+.attachment-container:not([data-attachment-type="vcard"]):hover .thumbnail-placeholder,
+.attachment-container:not([data-attachment-type="vcard"]):active .thumbnail-placeholder {
+  background-color: #33cccc;
+  background-blend-mode: luminosity;
+}
+
+.img-placeholder {
+  background-position: left -10rem; /* BiDi proof: CSS sprites */
+}
+
+.audio-placeholder {
+  background-position: left -20rem; /* BiDi proof: CSS sprites */
+}
+
+.video-placeholder {
+  background-position: left -30rem; /* BiDi proof: CSS sprites */
+}
+
+.vcard-placeholder {
+  background: url('images/attachment-vcard.png') no-repeat;
+  background-size: 4rem;
+}
+html[dir="ltr"] .vcard-placeholder { background-position: left top; }
+html[dir="rtl"] .vcard-placeholder { background-position: right top; }
+
+.incoming.received .vcard-placeholder {
+  background-image: url('images/attachment-vcard-incoming.png');
+}
+
+.attachment.corrupted .thumbnail-placeholder:after {
+  display: block;
+
+  position: absolute;
+  top: 0;
+  offset-inline-start: 0;
+  height: 100%;
+  width: 100%;
+
+  content: '';
+  background: url('icons/corrupted.png') no-repeat center center / 10rem;
+}

gaia/apps/sms/views/conversation/style/attachment_draft.css

@@ -0,0 +1,6 @@
+html, body {
+  height: 100%;
+  width: 100%;
+
+  font-size: 10px;
+}

gaia/apps/sms/views/conversation/style/conversation.css

@@ -0,0 +1,159 @@
+#messages-container {
+  /* We'll set flex-basis with a shrink factor of 0 to do min-height.
+   * formula: flex-basis = a % + b)
+   * a = (gap2 - gap1) / keyboard_height
+   * b = gap2 - (gap2 - gap1) * (buri_height - header) / keyboard_height + subheader + time_header
+   *
+   * with :
+   * gap1 = 4rem
+   *   minimal visible part of a thread when the keyboard is displayed, on buri
+   * gap2 = 8rem
+   *   minimal visible part of a thread when the keyboard is hidden, on a buri
+   * keyboard_height = 26rem
+   *   measured on a buri, standard english keyboard with suggestions
+   * header = 5rem
+   * subheader = 2rem
+   * buri_height = 48rem
+   * time_header = 2rem
+   *
+   * See https://bugzilla.mozilla.org/show_bug.cgi?id=1015867#c12 for more
+   * information
+   */
+  flex: 1 0 calc(15.4% + 5.38rem);
+  overflow: auto;
+}
+
+#messages-new-message-notice {
+  display: flex;
+  flex-direction: row;
+
+  padding: 1rem;
+  padding-inline-start: 2rem;
+  padding-inline-end: 1.5rem;
+  overflow: hidden;
+
+  white-space: nowrap;
+  line-height: 2rem;
+  font-size: 1.8rem;
+}
+
+#messages-new-message-notice a {
+  margin: 0;
+}
+
+#messages-new-message-notice .contact {
+  overflow: hidden;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#messages-new-message-notice > .text-container {
+  flex: auto;
+
+  overflow: hidden;
+}
+
+#messages-new-message-notice > .button-container {
+  flex: none;
+
+  padding: 0.2rem;
+  padding-inline-start: 1.5rem;
+  padding-inline-end: 0;
+}
+
+/* remove margin for notice-button class of button */
+.notice-button {
+  margin: 0;
+}
+
+.group-header-title {
+  display: flex;
+  justify-content: center;
+}
+
+.carrier-wrapper {
+  display: none;
+
+  box-sizing: border-box;
+  height: 2.2rem;
+  padding: 0 1.5rem;
+
+  font-size: 1.4rem;
+  line-height: 2.2rem;
+  text-align: start;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+
+  background: rgba(255, 255, 255, 0.95);
+  color: #333;
+}
+
+.carrier-wrapper .phone-carrier {
+  color: #008787;
+}
+
+.has-carrier .carrier-wrapper {
+  display: block;
+}
+
+#messages-container .messages-date-group-header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+
+  height: 2.2rem;
+  margin: 0;
+  padding: 0.6rem 3rem;
+
+  font-size: 1.4rem;
+  line-height: 2.2rem;
+  text-transform: uppercase;
+
+  background: rgba(225, 240, 236, 0.85);
+  color: #008787;
+}
+
+/* If has carrier change top position */
+.has-carrier #messages-container .messages-date-group-header {
+  top: 2.2rem;
+}
+
+.has-carrier #messages-container > .messages-date-group:first-child > .messages-date-group-header {
+  margin-top: 2.2rem;
+}
+
+/* TODO: check whether we need this rule */
+#messages-container .messages-date-group-header.hidden {
+  display: none;
+}
+
+.article-list[data-type="list"] .message {
+  z-index: 0; /* bug 970422 */
+
+  overflow: hidden;
+  width: 100%;
+  height: auto;
+  padding-bottom: 1rem;
+  border-bottom: none;
+}
+
+.article-list[data-type="list"] .message.hidden {
+  display: none;
+}
+
+#messages-container[data-type="list"] .message.mms .bubble img {
+  height: auto;
+  width: auto;
+}
+
+/* transition in and out edit mode, both for LTR and RTL contexts */
+.message .bubble {
+  transition: transform var(--transition-duration) ease 0s;
+}
+
+/* RTL View */
+#messages-header-text .ellipsis-dir-fix {
+  width: auto;
+}

gaia/apps/sms/views/conversation/style/edit-mode.css

@@ -0,0 +1,33 @@
+/*
+ * This file contains styles for Conversation view edit mode. They complement
+ * styles from views/shared/style/edit-mode.css that are applied as well.
+ * View edit mode is activated via Options -> Select messages.
+ */
+
+
+.edit #messages-container {
+  margin-bottom: 5.5rem;
+}
+
+.edit .article-list[data-type="list"] .message {
+  border-color: #e7e7e7;
+}
+
+.edit [data-type="list"] .message .bubble {
+  pointer-events: none;
+}
+
+.edit .message .bubble {
+  pointer-events: none;
+}
+
+html[dir="ltr"] .edit .message.incoming .bubble {
+  transform: translateX(2.5rem);
+}
+html[dir="rtl"] .edit .message.incoming .bubble {
+  transform: translateX(-2.5rem);
+}
+
+.edit #messages-compose-form {
+  display: none;
+}

gaia/apps/sms/views/conversation/style/message.css

@@ -0,0 +1,238 @@
+.message.incoming {
+  padding-inline-start: 1.5rem;
+  padding-inline-end: 4rem;
+}
+
+.message.outgoing {
+  padding-inline-start: 4rem;
+  padding-inline-end: 1.5rem;
+}
+
+.message .bubble {
+  box-sizing: border-box;
+  height: 100%;
+  max-width: 100%;
+  padding: 1rem 1.5rem;
+  overflow: visible;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+}
+
+.bubble .message-content-body:focus {
+  -moz-user-select: text;
+}
+
+.message.outgoing .bubble {
+  background: #fff;
+}
+html[dir="ltr"] .message.outgoing .bubble {
+  float: right;
+  border-radius: 1.5rem 0 1.5rem 1.5rem;
+}
+html[dir="rtl"] .message.outgoing .bubble {
+  float: left;
+  border-radius: 0 1.5rem 1.5rem 1.5rem;
+}
+
+
+.message.outgoing .bubble,
+.message.outgoing a:active {
+  color: #333;
+}
+
+.message.incoming .bubble {
+  background: #39c3c2;
+}
+html[dir="ltr"] .message.incoming .bubble {
+  float: left;
+  border-radius: 0 1.5rem 1.5rem 1.5rem;
+}
+html[dir="rtl"] .message.incoming .bubble {
+  float: right;
+  border-radius: 1.5rem 0 1.5rem 1.5rem;
+}
+
+.message.incoming .bubble,
+.message.incoming a:active {
+  color: #fff;
+}
+
+.message p.message-content-body {
+  white-space: pre-wrap;
+
+  outline: none;
+}
+
+/* BB overrides */
+.message.outgoing p:first-of-type:last-of-type,
+.message.incoming p:first-of-type:last-of-type {
+  padding-top: 0.5rem;
+
+  line-height: 2rem;
+}
+
+.message.incoming p:first-of-type {
+  color: #fff;
+}
+
+.message.sending p:first-of-type {
+  color: #6e6e6e;
+}
+
+/* End of BB overrides */
+
+.outgoing.error .bubble {
+  background: #fae1df;
+}
+
+.incoming.error .bubble {
+  background: #ff9898;
+}
+
+.message.sending .bubble,
+.message.sending a,
+.message.sending a:active {
+  color: #6e6e6e;
+}
+
+.message.sending .message-subject,
+.message.sending .message-content-body {
+  opacity: 0.5;
+}
+
+/* Message Subject */
+.message .message-subject {
+  display: none;
+
+  margin-bottom: 1rem;
+
+  font-size: 1.4rem;
+  font-style: italic;
+  line-height: 1.7rem;
+
+  unicode-bidi: -moz-plaintext;
+}
+
+.message.has-subject .message-subject {
+  display: block;
+}
+
+/* Message content styles */
+.message-content a {
+  color: #004eff;
+  text-decoration: underline;
+}
+
+.message-content > p {
+  unicode-bidi: -moz-plaintext;
+}
+
+.message-details {
+  display: flex;
+
+  margin-top: 0.5rem;
+
+  font-size: 1.4rem;
+  line-height: 2rem;
+}
+
+.message.sending time,
+.message.sending .message-sim-information {
+  display: none;
+}
+
+.message.outgoing .message-details {
+  color: #858585;
+}
+
+.message.outgoing.error .message-details {
+  color: #e97f79;
+}
+
+.message.incoming .message-details {
+  color: #d1eeee;
+}
+
+.message.incoming .late-arrival-notice {
+  color: #026a69;
+}
+
+.message.incoming .late-arrival-icon {
+  margin-inline-start: 1rem;
+  margin-inline-end: 0.1rem;
+  min-width: 1.5rem;
+  height: 2rem;
+
+  background: no-repeat center center / 1.5rem;
+  background-image: url('images/icons/late_clock.png');
+}
+
+.message.incoming.error .message-details {
+  color: #ffe0dc;
+}
+
+.message-sim-information {
+  margin-inline-end: 0.4rem;
+}
+
+.message-sim-information::after {
+  content: ' ‧ ';
+}
+
+/* Message status aside panel */
+.message .message-status {
+  height: 2rem;
+  min-width: 3rem;
+
+  background: no-repeat center center / 1.6rem;
+  font-size: 1.4rem;
+}
+
+.message.error .message-status {
+  background-image: url('images/icons/exclamation.png');
+}
+
+.message.delivered .message-status {
+  background-image: url('images/icons/deliveredtick.png');
+}
+
+.message.read .message-status {
+  background-image: url('images/icons/message_read.png');
+}
+
+.message.pending .message-status,
+.message.sending .message-status {
+  background: none;
+}
+
+
+/* Message download button */
+.message .download {
+  display: block;
+
+  min-height: initial;
+  width: auto;
+  padding: 0;
+  /* Eliminating container paragraph line-height */
+  margin: -1.5rem 0 0;
+
+  background: none;
+  color: #fff;
+  border: none;
+  /* We're using border-bottom instead of just underline style as line is too
+     close to the text and doesn't look similar to visual spec. */
+  border-bottom: 1px solid #fff;
+}
+
+.message .download:active {
+  opacity: 0.85;
+}
+
+/* hide download button via css on expired messages */
+.message.expired .download {
+  display: none;
+}
+
+.message.pending .download {
+  border-color: transparent;
+  opacity: 0.8;
+}

gaia/apps/sms/views/conversation/style/report_view.css

@@ -0,0 +1,167 @@
+/* Message information page for report details*/
+.report-view {
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+}
+
+.report-view > .description {
+  padding-top: 2rem;
+  padding-inline-end: 1.5rem;
+  padding-bottom: 3rem;
+  padding-inline-start: 3rem;
+}
+
+.report-view p,
+.report-view span {
+  font-size: 1.5rem;
+  line-height: 1rem;
+  color: #858585;
+}
+
+.report-view p {
+  padding-top: 1.5rem;
+}
+
+.report-view .description > .type {
+  padding-top: 0;
+
+  font-size: 1.6rem;
+  color: #ff4e00;
+}
+
+.report-view .description .detail {
+  color: #333;
+}
+
+.report-view .description > .type[data-l10n-id="message-type-sms"] {
+  color: #000;
+}
+
+/* Hiding some elements for some states */
+.report-view[data-delivery="error"] .sent-title,
+.report-view[data-delivery="sending"] .sent-timestamp,
+.outgoing-message .received-block,
+.outgoing-message .lateness-block {
+  display: none;
+}
+
+
+/* Hide sent timestamp label if we don't have valid value to display */
+.report-view.no-valid-sent-timestamp .sent-block {
+  display: none;
+}
+
+.report-view .contact-title {
+  color: #008787;
+  font-size: 1.6rem;
+  padding-inline-start: 3rem;
+}
+
+.report-view > ul.contact-list {
+  /* Showing 4 complete contacts and part of the contact name if list
+     contains more than 4 contacts */
+  position: static;
+
+  margin-top: 0.5rem;
+  flex-grow: 1;
+}
+
+.report-view > .contact-list > li {
+  height: auto;
+  min-height: 9rem;
+  padding-top: 0.7rem;
+  padding-bottom: 1rem;
+  padding-inline-end: 0;
+  padding-inline-start: 1.5rem;
+
+  border-top: solid 0.1rem #e7e7e7;
+  border-bottom: medium none;
+}
+
+.report-view > .contact-list p,
+.report-view > .contact-list span {
+  font-size: 1.4rem;
+  line-height: 1.6rem;
+}
+
+.report-view > .contact-list .name {
+  padding-top: 0;
+
+  font-size: 1.8rem;
+  font-weight: 500;
+  line-height: 2.6rem;
+}
+
+.report-view > .contact-list aside {
+  /* margin-top = (li - padding - aside) / 2 = (9rem - 2rem - 5.5rem) / 2 */
+  margin-top: 0.8rem;
+}
+
+.report-view > .contact-list .number {
+  padding-top: 0.6rem;
+}
+
+.report-view .network-status {
+  padding-top: 0.7rem;
+}
+
+.report-view .name + .network-status {
+  padding-top: 1rem;
+}
+
+.report-view .network-status,
+.report-view .network-status span {
+  line-height: 1.4rem;
+}
+
+.contact-list p.number .phone-carrier {
+  color: #008787;
+}
+
+.report-view > .contact-list .icon {
+  width: 1.6rem;
+  height: 1.6rem;
+  margin: -0.1rem 0 0.1rem;
+  margin-inline-end: 0.7rem;
+
+  background: no-repeat center center / 1.6rem transparent;
+}
+html[dir="ltr"] .report-view > .contact-list .icon { float: left; }
+html[dir="rtl"] .report-view > .contact-list .icon { float: right; }
+
+.contact-list [data-delivery-status="delivered"] .icon {
+  background-image: url('images/icons/deliveredtick.png');
+}
+
+.contact-list [data-delivery-status="read"] .icon {
+  background-image: url('images/icons/message_read.png');
+}
+
+.contact-list [data-delivery-status="error"] .icon {
+  background-image: url('images/icons/exclamation.png');
+}
+
+.contact-list [data-delivery-status="not-applicable"],
+.contact-list [data-delivery-status="pending"] .icon,
+.contact-list [data-delivery-status="pending"] .timestamp,
+.contact-list [data-delivery-status="error"] .timestamp,
+.contact-list [data-delivery-status="rejected"] .icon,
+.contact-list [data-delivery-status="rejected"] .timestamp{
+  display: none;
+}
+
+.report-view .resend-btn {
+  display: none;
+  width: calc(100% - 3rem);
+
+  flex-shrink: 0;
+  margin: 0 1.5rem 2rem;
+
+  background-color: #00caf2;
+  color: #fff;
+}
+
+.report-view[data-delivery="error"] .resend-btn {
+  display: block;
+}