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.

overrides/communications.gaiamobile.org/contacts/js/match_service.js

@@ -0,0 +1,115 @@
+'use strict';
+/*
+ * This code is in charge of launching a diferent window
+ * to handle if one or more contacts have the same info
+ * that the one we are trying to save.
+ */
+ 
+(function(exports) {
+  var matchService = {};
+
+  const CONTACTS_APP_ORIGIN = location.origin;
+  
+  var matcherWindow = null;
+  var matcherFrame = null;
+  var currentURL;
+
+  function openWindow(url) {
+    if (!url || matcherWindow !== null) {
+      return;
+    }
+    if (window.VulpesCompat) {
+      // Keep Gaia's real duplicate-management view inside the Contacts app.
+      // It communicates with this window through the original postMessage API.
+      matcherFrame = document.createElement('iframe');
+      matcherFrame.title = 'Contacts';
+      matcherFrame.style.cssText = 'position:fixed;inset:0;width:100%;height:100%;border:0;z-index:1000;background:white';
+      matcherFrame.src = url;
+      document.body.appendChild(matcherFrame);
+      matcherWindow = matcherFrame.contentWindow;
+    } else {
+      matcherWindow = window.open(url);
+    }
+    currentURL = url;
+    init();
+  }
+
+  function closeWindow(messageId, additionalMessageId) {
+    if (!matcherWindow) return;
+    if (matcherFrame) {
+      matcherFrame.remove(); matcherFrame = null;
+    } else {
+      matcherWindow.close();
+    }
+    unload();
+  }
+
+  matchService.match = function(contactId) {
+    var url =
+      '/contacts/views/matching/matching_contacts.html?contactId=' +
+      contactId;
+    openWindow(url);
+  };
+
+  matchService.showDuplicateContacts = function() {
+    var url =
+      '/contacts/views/matching/matching_contacts.html';
+    openWindow(url);
+  };
+
+  function init(){
+    var target = matcherFrame || matcherWindow;
+    target.addEventListener('load', function fn(){
+      target.removeEventListener('load', fn);
+      if (matcherFrame) matcherWindow = matcherFrame.contentWindow;
+      matcherWindow.postMessage({
+        type: 'sync'
+      }, CONTACTS_APP_ORIGIN);
+      if (!matcherFrame) matcherWindow.onunload = function(){
+        window.postMessage({
+          type: 'window_close'
+        }, CONTACTS_APP_ORIGIN);
+      };
+    }, false);
+  }
+
+  // This function can also be executed when other messages arrive
+  // That's why we cannot call notifySettings outside the switch block
+  function messageHandler(e) {
+    if (!currentURL || e.origin !== CONTACTS_APP_ORIGIN) {
+      return;
+    }
+
+    var data = e.data;
+
+    switch (data.type) {
+      case 'ready':
+        matcherWindow.postMessage({
+          type: 'dom_transition_end',
+          data: ''
+        }, CONTACTS_APP_ORIGIN);
+        window.dispatchEvent(new CustomEvent('image-loader-pause'));
+        break;
+      case 'window_close':
+        closeWindow(data.messageId, data.additionalMessageId);
+        break;
+      case 'show_duplicate_contacts':
+        matcherWindow.postMessage(data, CONTACTS_APP_ORIGIN);
+        break;
+      case 'duplicate_contacts_merged':
+        matcherWindow.postMessage(data, CONTACTS_APP_ORIGIN);
+        break;
+    }
+  }
+
+  function unload() {
+    // Attaching again scrolling handlers on the contact list's image loader
+    matcherWindow = currentURL = null;
+    window.dispatchEvent(new CustomEvent('image-loader-resume'));
+  }
+
+  window.addEventListener('message', messageHandler);
+
+  exports.MatchService = matchService;
+
+}(window));

overrides/communications.gaiamobile.org/contacts/style/app.css

@@ -0,0 +1,627 @@
+/* ROOT */
+
+/* Global */
+html {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-size: 62.5%;
+  overflow: hidden;
+  position: relative;
+  background-color: white;
+  -moz-user-select: none;
+}
+
+body {
+  color: #fff;
+  font-size: 1.6rem;
+  line-height: 2.2rem;
+  text-align: center;
+  vertical-align: middle;
+}
+
+/* Text conventions */
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  padding: 0;
+  font-weight: normal;
+}
+
+ul, ol, dl, dt, dd {
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+}
+
+p, li {
+  word-wrap: break-word;
+  margin: 0;
+  padding: 0;
+}
+
+q {
+  quotes: none;
+  display: block;
+}
+
+pre, blockquote {
+  padding: 0;
+  margin: 0;
+}
+
+em {
+  font-style: italic;
+}
+
+address {
+  font-style: normal;
+  display: inline;
+}
+
+abbr, acronym {
+  cursor: default;
+  border: none;
+}
+
+strong {
+  font-weight: bold;
+}
+
+b {
+  font-weight: 600;
+}
+
+small {
+  font-size: 1.1rem;
+  line-height: 1rem;
+  color: #999;
+}
+
+/* Links */
+a {
+  text-decoration: none;
+  outline: none;
+  color: #333;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+a img {
+  border: none;
+}
+
+a abbr {
+  cursor: pointer;
+}
+
+/* Icons */
+span.icon {
+  font-style: normal;
+}
+
+span.icon + b, span.icon + span {
+  vertical-align: middle;
+}
+
+/* Tables */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+}
+
+td {
+  vertical-align: top;
+}
+
+caption, th {
+  text-align: start;
+}
+
+caption {
+  text-indent: -9999rem;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+
+/* Forms */
+form {
+  margin: 0;
+}
+
+input:focus, textarea:focus {
+  outline: none;
+}
+
+textarea {
+  resize: none;
+  overflow: auto;
+  height: 4.6rem;
+}
+
+[contenteditable] {
+  outline: none;
+  word-wrap: break-word;
+}
+
+/* Media */
+img {
+  display: block;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+}
+
+img:-moz-broken {
+  line-height: 1.1rem;
+  overflow: hidden;
+}
+
+/* HTML 5 */
+article, aside, details, figcaption, figure, footer, header, hgroup,
+menu, nav, section, video, audio, canvas, progress, meter, time {
+  display: block;
+  padding: 0;
+  margin: 0;
+}
+
+/* APP */
+/* view */
+
+.view {
+  position: absolute;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: translate(0, 0);
+}
+
+.view:not(.view-noscroll) {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.view-right {
+  transform: translateX(100%);
+}
+
+.view-bottom {
+  transform: translateY(100%);
+}
+
+/* Rewritting from buttons.css */
+section[role="region"] > gaia-header button,
+section[role="region"] > gaia-header a {
+  white-space: normal;
+}
+
+/* Buttons inside list redefinition */
+li button span {
+  font-size: 0;
+}
+
+li button span[data-l10n-id] {
+  font-size: 1.6rem;
+}
+
+/* Extending components */
+li button.activity > b em {
+  color: #727272;
+  font-style: normal;
+}
+
+[data-type="list"] li p {
+  margin-inline-start: 1.5rem;
+}
+
+/* BB Lists extending */
+
+#view-contacts-list [data-type="list"] {
+  /**
+   * BiDi note:
+   * the non-symmetrical padding accomodates the A-Z scrollbar,
+   * which is always on the right edge of the screen
+   */
+  padding: 2.5rem 3.5rem 0 1.5rem; /* BiDi-proof */
+}
+
+[data-type="list"] gaia-header {
+  padding: 0;
+  padding-inline-start: 1.5rem;
+  position: sticky;
+  top: -1.5rem;
+  background: #FFF;
+  z-index: 2;
+}
+
+[data-type="list"].active li:after {
+  offset-inline-end: 0;
+}
+
+/* JS helper */
+[data-type="list"] li p,
+[data-type="list"] li aside {
+  pointer-events: none;
+}
+
+[data-type="list"] li aside.pack-end {
+  margin: 0;
+  margin-inline-end: 1rem;
+}
+
+/* Selection tag extended from shared/style/buttons.css */
+.view-select-tag .selection-list li button {
+  background-color: #fff;
+}
+
+.view-select-tag .selection-list li button.icon-selected:before {
+  background: transparent image-set(url("gphx/bitmap/default/lists/tick.png") 1x, url("gphx/bitmap/default/lists/tick@1.5x.png") 1.5x, url("gphx/bitmap/default/lists/tick@2x.png") 2x, url("gphx/bitmap/default/lists/tick@2.25x.png") 2.25x) no-repeat center center / 2rem;
+}
+
+#custom-tag {
+  margin-bottom: 2rem;
+}
+
+/* Body */
+.view-body {
+  position: relative;
+  height: calc(100% - 5rem);
+}
+
+#view-screenshot.contact-list > #view-screenshot-body {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  background: -moz-element(#view-contacts-list);
+}
+
+.view-body-inner {
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 5;
+  width: 100%;
+  box-sizing: border-box;
+  background: #fff;
+  color: #333;
+  text-align: start;
+  will-change: scroll-position;
+}
+
+/* Removes scroll from the view body inner */
+.view-noscroll .view-body-inner {
+  width: calc(100% + 1.5rem);
+}
+
+/* STACK: inline block list items; */
+.stack {
+  letter-spacing: -0.4rem;
+  text-align: center;
+}
+
+.stack > li {
+  display: inline-block;
+  vertical-align: middle;
+  letter-spacing: 0;
+}
+
+/* ICONS */
+
+span.icon {
+  font-size: 0;
+  background: transparent no-repeat center center;
+  background-size: 100% auto;
+  display: inline-block;
+}
+
+/* GENERIC BUTTONS */
+span.icon.icon-delete {
+  background-image: image-set(url("/contacts/style/gphx/bitmap/default/forms/delete.png") 1x, url("/contacts/style/gphx/bitmap/default/forms/delete@1.5x.png") 1.5x, url("/contacts/style/gphx/bitmap/default/forms/delete@2x.png") 2x, url("/contacts/style/gphx/bitmap/default/forms/delete@2.25x.png") 2.25x);
+  background-size: 3rem;
+  width: 3rem;
+}
+
+span.icon.icon-addimage {
+  background-image: image-set(url("/contacts/style/gphx/bitmap/default/forms/add.png") 1x, url("/contacts/style/gphx/bitmap/default/forms/add@1.5x.png") 1.5x, url("/contacts/style/gphx/bitmap/default/forms/add@2x.png") 2x, url("/contacts/style/gphx/bitmap/default/forms/add@2.25x.png") 2.25x);
+  background-size: 3rem;
+  width: 7rem;
+  height: 3rem;
+}
+
+span.icon.icon-address {
+  background-image: image-set(url("/contacts/style/gphx/bitmap/default/buttons/location.png") 1x, url("/contacts/style/gphx/bitmap/default/buttons/location@1.5x.png") 1.5x, url("/contacts/style/gphx/bitmap/default/buttons/location@2x.png") 2x, url("/contacts/style/gphx/bitmap/default/buttons/location@2.25x.png") 2.25x);
+}
+
+li button.icon-link:before {
+  background-image: image-set(url("/contacts/style/gphx/bitmap/default/buttons/link.png") 1x, url("/contacts/style/gphx/bitmap/default/buttons/link@1.5x.png") 1.5x, url("/contacts/style/gphx/bitmap/default/buttons/link@2x.png") 2x, url("/contacts/style/gphx/bitmap/default/buttons/link@2.25x.png") 2.25x);
+}
+
+li button.icon-share:before {
+  background-image: image-set(url("/contacts/style/gphx/bitmap/default/buttons/share.png") 1x, url("/contacts/style/gphx/bitmap/default/buttons/share@1.5x.png") 1.5x, url("/contacts/style/gphx/bitmap/default/buttons/share@2x.png") 2x, url("/contacts/style/gphx/bitmap/default/buttons/share@2.25x.png") 2.25x);
+}
+
+/* Extending icons */
+li button.icon-fav:before {
+  background-image: image-set(url("/contacts/style/images/icon-fav-button-off.png") 1x, url("/contacts/style/images/icon-fav-button-off@1.5x.png") 1.5x, url("/contacts/style/images/icon-fav-button-off@2x.png") 2x, url("/contacts/style/images/icon-fav-button-off@2.25x.png") 2.25x);
+  offset-inline-end: 0.5rem;
+}
+
+li button.icon-fav.on:before {
+  background-image: image-set(url("/contacts/style/images/icon-fav-button-on.png") 1x, url("/contacts/style/images/icon-fav-button-on@1.5x.png") 1.5x, url("/contacts/style/images/icon-fav-button-on@2x.png") 2x, url("/contacts/style/images/icon-fav-button-on@2.25x.png") 2.25x);
+}
+
+li button.icon-fb-profile:before {
+  background-image: image-set(url("/contacts/style/gphx/bitmap/default/buttons/fb_profile.png") 1x, url("/contacts/style/gphx/bitmap/default/buttons/fb_profile@1.5x.png") 1.5x, url("/contacts/style/gphx/bitmap/default/buttons/fb_profile@2x.png") 2x, url("/contacts/style/gphx/bitmap/default/buttons/fb_profile@2.25x.png") 2.25x);
+}
+
+li button.icon-add:before {
+  background-image: image-set(url("/contacts/style/images/Add_button.png") 1x, url("/contacts/style/images/Add_button@1.5x.png") 1.5x, url("/contacts/style/images/Add_button@2x.png") 2x, url("/contacts/style/images/Add_button@2.25x.png") 2.25x);
+  offset-inline-start: 0.2rem
+}
+
+li button.icon-find-and-merge:before {
+  background-image: image-set(url("/contacts/style/images/findandmerge.png") 1x, url("/contacts/style/images/findandmerge@1.5x.png") 1.5x, url("/contacts/style/images/findandmerge@2x.png") 2x, url("/contacts/style/images/findandmerge@2.25x.png") 2.25x);
+  background-size: 3rem;
+}
+
+/* Block type (long text) */
+.action-block {
+  height: auto;
+  min-height: 4rem;
+  word-wrap: normal;
+}
+.action-block b {
+  display: block;
+  overflow: hidden;
+  line-height: 1.4em;
+}
+.action-block span {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* FILL FLOW: general components for helping in defining basic flows in forms; */
+.fill-flow {
+  padding-inline-end: 0;
+}
+
+/* ROW: horizontal separation for elements; */
+.fillflow-row {
+  position: relative;
+}
+
+.fillflow-left {
+  margin-inline-end: 0.7rem;
+}
+
+.fillflow-twocols {
+  overflow: hidden;
+}
+
+.fillflow-twocols button {
+  width: calc(50% - 0.5rem);
+}
+html[dir="ltr"] .fillflow-twocols button { float: left; }
+html[dir="rtl"] .fillflow-twocols button { float: right; }
+
+html[dir="ltr"] .fillflow-twocols button:last-child { float: right; }
+html[dir="rtl"] .fillflow-twocols button:last-child { float: left; }
+
+/* ROW ACTION */
+.fillflow-row-action {
+  position: absolute;
+  offset-inline-end: 0;
+  top: 0;
+  width: auto;
+  height: auto;
+  padding-top: 0;
+}
+
+.fillflow-row-action span.icon {
+  border: none;
+  margin: 0;
+  height: 3.8rem;
+}
+
+/* MEDIA: specific ratio used in forms; */
+.fillflow-media {
+  margin: 0;
+  margin-inline-end: 1rem;
+  margin-bottom: 0.5rem;
+  width: 7rem;
+  height: 7rem;
+  position: relative;
+  z-index: 0;
+  border: 1px solid #c7c7c7;
+  background-color: #fff;
+  border-radius: 7rem;
+  box-sizing: border-box;
+}
+
+.fillflow-media:active {
+  color: #fff;
+  background: rgba(105,230,255,0.5);
+}
+
+.fillflow-media.with-photo:active {
+  background: none;
+}
+
+.fillflow-media p {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  offset-inline-start: -1.5rem;
+  top: 2rem;
+  text-align: center;
+  z-index: -1;
+  width: 10rem;
+}
+
+.fillflow-media p em {
+  display: block;
+  color: #858585;
+  font-size: 1.1rem;
+  font-weight: normal;
+  font-style: italic;
+  margin-top: 1.8rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.fillflow-media .edit-photo {
+  z-index: 1;
+  display: none;
+  pointer-events: none;
+  margin-top: 3.6rem;
+}
+
+.with-photo .edit-photo {
+  display: block;
+}
+
+.fillflow-media #photo-button {
+  width: 100%;
+  height: 100%;
+  background: none;
+  line-height: inherit;
+  padding: 0;
+}
+
+.fillflow-media img {
+  width: 100%;
+  height: 100%;
+  background: #fff no-repeat center center;
+  background-size: cover;
+}
+
+/* We don't need a delete button on the first section */
+.fillflow-media .img-delete-button {
+  display: none;
+}
+
+#thumbnail-action {
+  margin: 0 1.5rem 0.5rem 1.5rem;
+}
+
+/* JUMPER */
+
+nav[data-type="scrollbar"] {
+  z-index: 6;
+}
+
+nav[data-type="scrollbar"].selecting {
+  bottom: 4.2rem;
+}
+
+nav[data-type="scrollbar"] ol > li > * {
+  pointer-events: none;
+}
+
+#groups-container.selecting {
+  height: calc(100% - 7rem);
+}
+
+.contact-checkbox {
+  offset-inline-start: 0 !important;
+  display: none !important;
+}
+
+.contact-checkbox-selecting {
+  display: block !important;
+}
+
+/* FB contacts will be disabled when adding .disable-fb-items to contact list */
+.disable-fb-items li[data-fb-uid] {
+  color: #333333;
+  opacity: 0.25;
+  pointer-events: none;
+}
+
+/* This makes the checkbox appear unchecked when using .disable-fb-items */
+.disable-fb-items li[data-fb-uid] label span:after {
+  background-position: center top;
+}
+
+#groups-list.selecting .group-section li,
+#search-list.selecting li {
+  padding-inline-start: 2rem;
+}
+
+form[role="dialog"].no-overlay {
+  background: none;
+  pointer-events: none;
+  position: fixed;
+}
+
+form[role="dialog"].no-overlay button {
+  pointer-events: auto;
+}
+
+#selectable-form {
+  background: none;
+}
+
+#groups-list[data-type="list"].active.selecting li:not(:active):after {
+  display:none !important;
+}
+
+#import-settings button {
+  margin: 1.5rem;
+  width: calc(100% - 3rem);
+}
+
+#contact-list-ice {
+  padding-inline-start: 1rem
+}
+
+#contact-list-ice li {
+  display: flex;
+  align-items: baseline;
+}
+
+#contact-list-ice span {
+  width: 3rem;
+  height: 3rem;
+  background: image-set(url("/contacts/style/images/icon_ice.png") 1x, url("/contacts/style/images/icon_ice@1.5x.png") 1.5x, url("/contacts/style/images/icon_ice@2x.png") 2x, url("/contacts/style/images/icon_ice@2.25x.png") 2.25x) no-repeat 0 0 / 3rem auto transparent;
+}
+
+#groups-list.selecting #contact-list-ice {
+  display:none;
+}
+
+#ice-list {
+  min-height: 100%;
+  background: #FFF;
+  text-align: start;
+}
+
+.ice-contact {
+  font-size: 1.6rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 24rem;
+}
+/* .ice-contact is a <bdi> */
+html[dir="ltr"] .ice-contact { text-align: left; }
+html[dir="rtl"] .ice-contact { text-align: right; }
+
+#contacts-form-notes textarea {
+  height: 9rem;
+}
+
+#search-list li.contact-item {
+  -moz-user-select: none;
+  text-align: start;
+}

overrides/communications.gaiamobile.org/contacts/style/fb_extensions.css

@@ -0,0 +1,84 @@
+#iframe_extensions {
+  position: fixed;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  transition: transform .6s ease;
+  background: #f4f4f4;
+}
+
+#iframe_extensions.opening {
+  transform: translateY(-100%);
+}
+
+#iframe_extensions.hidden {
+  visibility: hidden;
+}
+
+/* FB info (non-editable) */
+.view-edit-contact .facebook fieldset legend,
+.view-edit-contact .facebook fieldset input[type="date"] {
+  border-color: #acbee4;
+  color: #8d9abb;
+  background-image: url(fb/dialog.svg);
+}
+
+.view-edit-contact .facebook input {
+  border-color: #acbee4;
+  color: #8d9abb;
+}
+
+.view-edit-contact .facebook span {
+  color: #8d9abb;
+}
+
+.view-edit-contact .facebook fieldset input[value=""] {
+  display: none;
+}
+
+.with-photo.facebook img {
+  pointer-events: auto;
+  opacity: 0.95;
+}
+
+.with-photo.facebook {
+  padding-inline-end: 0;
+}
+
+/* XXX BiDi warning */
+html[dir="ltr"] .with-photo.facebook .edit-photo  { right: 0; }
+html[dir="rtl"] .with-photo.facebook .edit-photo  { right: -1.5rem; }
+
+#settingsFb li p {
+  margin-inline-start: 0;
+}
+
+#settings-article[data-state="fb-disabled"] #settingsFb,
+#settings-article[data-state="fb-disabled"] #fb-header  {
+  display: none;
+}
+
+#settingsFb[data-state="logged-out"] > #fb-update-option > #import-fb,
+#settingsFb[data-state="logged-out"] > #fb-update-option > #renew-pwd-msg,
+#settingsFb[data-state="logged-in"]  > #fb-update-option > #renew-pwd-msg {
+  display: none;
+}
+
+#settingsFb[data-state="renew-pwd"] > #fb-update-option > #import-fb:before {
+  background-image: image-set(url("/contacts/style/images/error_icon.png") 1x, url("/contacts/style/images/error_icon@1.5x.png") 1.5x, url("/contacts/style/images/error_icon@2x.png") 2x, url("/contacts/style/images/error_icon@2.25x.png") 2.25x);
+}
+
+#settingsFb[data-state="logged-in"] > #fb-update-option > #import-fb:before {
+  background-image: image-set(url("/contacts/style/images/sync_icon.png") 1x, url("/contacts/style/images/sync_icon@1.5x.png") 1.5x, url("/contacts/style/images/sync_icon@2x.png") 2x, url("/contacts/style/images/sync_icon@2.25x.png") 2.25x);
+}
+
+#no-connection {
+  white-space: normal;
+  margin-top: 1rem;
+}
+