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/system/style/notifications/downloads.css

@@ -0,0 +1,7 @@
+#screen.utility-tray .notification[data-type="download-notification-downloading"] > img {
+  animation: 0.9s fn-rotate infinite steps(30);
+}
+
+#screen.utility-tray .notification[data-type="download-notification-downloading"] .timestamp {
+  display: none;
+}

gaia/apps/system/style/notifications/images/system_update_error.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><circle cx="15" cy="15" r="11.25" fill="#fff"/><path d="M15 0C6.716 0 0 6.715 0 15s6.716 15 15 15c8.285 0 15-6.715 15-15S23.285 0 15 0zM9.05 8.633l.7.7c.01.01.01.024.022.04l5.166 5.162c.162.162.424.162.587 0l5.162-5.162c.013-.013.013-.032.025-.047l.7-.7c.955.138 1.87.3 2.755.475-.1.327-.262.64-.516.89l-6.8 6.825c-.885.887-2.31.887-3.185 0L6.84 9.99c-.25-.25-.414-.55-.514-.876.888-.188 1.8-.35 2.75-.475zM21.97 21.89H8.45c-1.083 0-2.004-.785-2.375-1.893h18.27c-.37 1.108-1.295 1.893-2.375 1.893z" fill="#b90000"/></svg>

gaia/apps/system/style/notifications/notifications.css

@@ -0,0 +1,312 @@
+@keyframes toaster {
+  0% {
+    opacity: 0.15;
+    width: 8.6rem;
+    background-color: transparent;
+    border-inline-start: 0.2rem solid transparent;
+    border-inline-end: 0.2rem solid transparent;
+    border-top: 0.2rem solid white;
+  }
+  50% {
+    opacity: 1;
+    width: 8.6rem;
+    background-color: transparent;
+    border-inline-start: 0.2rem solid transparent;
+    border-inline-end: 0.2rem solid transparent;
+    border-top: 0.2rem solid #B3F3FF;
+  }
+  100% {
+    background-color: #00BCE2;
+    width: 100%;
+  }
+}
+
+#notification-toaster {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+  top: -.2rem;
+  width: 100%;
+  height: 5.2rem;
+  background-color: transparent;
+  visibility: hidden;
+  transform: translateY(-5rem);
+
+  /* This transition is used when hiding the toaster. */
+  transition: transform ease .3s, background-color 0s ease .3s, visibility 0s ease .3s;
+}
+
+/*
+ * For attention window.
+ */
+.fake-notification-toaster {
+  height: 5rem;
+  width: 100%;
+  position: relative;
+}
+
+#toaster-icon {
+  position: absolute;
+  width: 2.4rem;
+  height: 2.4rem;
+  top: 0;
+  bottom: 0;
+  offset-inline-start: 1.5rem;
+  margin: auto;
+  pointer-events: none;
+}
+
+#notification-container > div {
+  width: calc(100% - 7.1rem);
+  padding: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 400;
+}
+html[dir="ltr"] #notification-container > div {
+  left: 5.6rem;
+  text-align: left;
+}
+html[dir="rtl"] #notification-container > div {
+  right: 5.6rem;
+  text-align: right;
+}
+
+.toaster-title {
+  pointer-events: none;
+  position: absolute;
+  bottom: 2.3rem;
+  color: white;
+  font-size: 1.8rem;
+}
+
+.toaster-detail {
+  pointer-events: none;
+  position: absolute;
+  top: 2.8rem;
+  color: white;
+  font-size: 1.4rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#notification-toaster.displayed {
+  transform: translateY(0);
+  /* We keep the visibility transition to make Marionette tests easier to write. */
+  transition: transform .2s ease .4s, visibility 0s ease .4s;
+  background-color: #00BCE2;
+  visibility: visible;
+}
+
+#notification-toaster.displayed:after {
+  position: absolute;
+  right: 0;
+  left: 0;
+  margin: auto;
+  border-left: 0.2rem solid transparent;
+  border-right: 0.2rem solid transparent;
+  border-top: 0.2rem solid #00d3ff;
+  bottom: 0;
+  content: '';
+}
+
+#notification-toaster:after {
+  border-color: white;
+  visibility: visible;
+}
+
+#notification-toaster.displayed:after {
+  animation-name: toaster;
+  animation-duration: .4s;
+  border-color: #00BCE2;
+  transform: translateY(.2rem);
+  transition: border-color 0s ease .4s;
+}
+
+#notification-bar {
+  height: 4.5rem;
+  padding: 0;
+  padding-inline-start: 1.5rem;
+}
+
+#notification-bar [data-icon] {
+  margin: 1.1rem 0;
+}
+
+#notification-bar .title-container {
+  display: flex;
+  width: calc(100% - 4rem);
+  font: italic 300 1.8rem/4.2rem auto;
+  margin-inline-start: 1rem;
+}
+html[dir="ltr"] #notification-bar .title-container {
+  float: left;
+}
+html[dir="rtl"] #notification-bar .title-container {
+  float: right;
+}
+
+#notification-bar .title {
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-inline-start: .5rem;
+}
+
+#notification-bar button {
+  flex: initial;
+  width: auto;
+  height: 4.5rem;
+  padding: 0 1.5rem;
+  border: 0;
+  border-radius: 0;
+  color: #008eab;
+  background: none;
+  font: italic normal 1.3rem/1.3rem auto;
+}
+
+#notification-bar button:active {
+  background-color: #00caf2;
+  color: #000000;
+}
+#notification-bar button[disabled] {
+  color: rgba(255, 255, 255, 0.2);
+}
+
+/* remove ugly dotted outline when focus */
+#notification-bar button::-moz-focus-inner {
+  border: 0;
+}
+
+#notifications-container {
+  width: 100%;
+  flex: 1;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+html[dir="ltr"] #notifications-container { text-align: left; }
+html[dir="rtl"] #notifications-container { text-align: right; }
+
+#notifications-container .notification {
+  height: 6rem;
+  padding: 0 1.5rem;
+  font: 1.53rem/1.8rem auto;
+  color: #e7e7e7;
+  overflow: hidden;
+
+  border-bottom: .1rem solid rgba(255, 255, 255, .05);
+}
+
+#notifications-container .notification:active {
+  background-color: rgba(52, 140, 158, .6);
+}
+
+#notifications-container .notification:first-child {
+  border-top-color: black;
+}
+
+#notifications-container .notification div {
+  pointer-events: none;
+}
+
+#notifications-container .notification > img {
+  display: block;
+  width: 2.4rem;
+  height: 2.4rem;
+  margin: 1.8rem 0 0;
+  pointer-events: none;
+}
+html[dir="ltr"] #notifications-container .notification > img { float: left; }
+html[dir="rtl"] #notifications-container .notification > img { float: right; }
+
+#notifications-container .notification > div {
+  width: calc(100% - 3.7rem);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-inline-start: 3.7rem;
+}
+
+#notifications-container .notification > div.title-container {
+  padding-top: 1.4rem;
+  font-size: 1.53rem;
+  display: flex;
+}
+
+#notifications-container .notification > div.title-container .title {
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+html[dir="ltr"] #notifications-container .notification > div.title-container .title {
+  margin-right: .5rem;
+}
+html[dir="rtl"] #notifications-container .notification > div.title-container .title {
+  margin-left: .5rem;
+}
+
+
+#notifications-container .notification > div.title-container .timestamp {
+  flex: initial;
+  padding: 0;
+  max-width: 7.5rem;
+  font-size: 1.4rem;
+  font-style: italic;
+  color: #858585;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#notifications-container .notification > div.detail {
+  font-size: 1.4rem;
+  color: #858585;
+}
+
+#notifications-container .notification > div.detail .detail-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#notifications-container .notification.snapback,
+.notification-toaster.snapback {
+  transition: transform var(--transition-duration) ease-out;
+  transform: translateX(0);
+}
+
+#notifications-container .notification.disappearing,
+#notifications-container .notification.disappearing-via-clear-all,
+.notification-toaster.disappearing {
+  transition: transform var(--transition-duration) linear, opacity var(--transition-duration);
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+#notifications-container .notification.disappearing.left,
+#notifications-container .notification.disappearing-via-clear-all-left,
+.notification-toaster.disappearing.left {
+  transition: transform var(--transition-duration) linear, opacity var(--transition-duration);
+  transform: translateX(-100%);
+  opacity: 0;
+}
+
+#notifications-container .notification.disappearing ~ .notification {
+  transition: transform var(--transition-duration) linear;
+  transform: translateY(-6.2rem);
+}
+
+@keyframes fn-rotate {
+  from {
+    transform: rotate(1deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}