1 files changed, 311 insertions, 0 deletions
diff --git a/browser/components/urlbar/content/quicksuggestOnboarding.css b/browser/components/urlbar/content/quicksuggestOnboarding.css
new file mode 100644
index 0000000000..6ed8454398
--- /dev/null
+++ b/browser/components/urlbar/content/quicksuggestOnboarding.css
@@ -0,0 +1,311 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/**
+ * When making changes, follow the example of the AboutWelcome messaging surface for font sizes, line heights,
+ * etc. See: https://searchfox.org/mozilla-central/source/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss
+ */
+
+:root {
+  --introduction-magglass-logo-height: 128px;
+  --introduction-firefox-logo-height: 72px;
+  --introduction-image-height: 224px;
+  --main-magglass-logo-height: 64px;
+  --main-firefox-logo-height: 50px;
+  --x-large-margin: 40px;
+  --large-margin: 24px;
+  --large-margin-const: 24px;
+  --small-margin: 16px;
+  --small-margin-const: 16px;
+  --x-small-margin-const: 8px;
+  --section-vertical-padding: 32px;
+  --section-horizontal-padding: 64px;
+}
+
+body.compact {
+  --introduction-image-height: 183px;
+  --main-magglass-logo-height: 48px;
+  --main-firefox-logo-height: 32px;
+  --x-large-margin: 20px;
+  --large-margin: 12px;
+  --small-margin: 8px;
+  --section-vertical-padding: 16px;
+  --section-horizontal-padding: 32px;
+
+  /* 15px is the non-compact font-size. */
+  font-size: 13px;
+}
+
+body,
+section {
+  width: 536px;
+}
+
+section {
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+  padding: var(--section-vertical-padding) var(--section-horizontal-padding);
+  /* This is the largest approximate natural height of the main section across
+     platforms and dialog variations, erring on the side of being slightly
+     larger than necessary. If you change this, also update COMPACT_MODE_HEIGHT
+     in the JS. */
+  min-height: 650px;
+}
+
+body.compact section {
+  /* This is the largest approximate natural height of the main section across
+     platforms and dialog variations in compact mode, erring on the side of
+     being slightly larger than necessary. */
+  min-height: 510px;
+}
+
+a {
+  cursor: pointer;
+  font-weight: normal;
+}
+
+.title {
+  font-size: 1.6em;
+  font-weight: 600;
+  line-height: 1.5;
+  white-space: pre-line;
+}
+
+.logo {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  border: none;
+}
+
+.description-section {
+  /* The effective visual margin between the description and first option should
+     be --large-margin-const. Each child in the description has a bottom margin
+     of --small-margin, so subtract it from --large-margin-const. */
+  margin-block: 0 calc(var(--large-margin-const) - var(--small-margin));
+}
+
+.description {
+  font-size: 1.1em;
+  font-weight: 400;
+  line-height: 1.6;
+  margin-block: 0 var(--small-margin);
+  white-space: pre-line;
+}
+
+.privacy-first {
+  font-size: 1.1em;
+  font-weight: 700;
+  margin-block: 0 var(--small-margin);
+}
+
+.pager > span {
+  display: inline-block;
+  border-radius: 3px;
+  width: 6px;
+  height: 6px;
+  background-color: var(--in-content-border-color);
+  margin-inline: 4px;
+}
+
+.pager > .current {
+  background-color: var(--in-content-primary-button-background);
+}
+
+#introduction-section .logo {
+  background-image: url("quicksuggestOnboarding_magglass.svg");
+  height: var(--introduction-magglass-logo-height);
+  margin-block-end: var(--large-margin);
+}
+
+#introduction-section .logo.firefox {
+  background-image: url("chrome://branding/content/about-logo.svg");
+  height: var(--introduction-firefox-logo-height);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  #introduction-section .logo {
+    background-image: url("quicksuggestOnboarding_magglass_animation.svg");
+  }
+}
+
+#introduction-section .title {
+  margin-block-end: var(--x-large-margin);
+}
+
+#introduction-image {
+  height: var(--introduction-image-height);
+  background-image: url("suggest-example.svg");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  margin-block: var(--large-margin);
+}
+
+/* fx100 layout */
+#introduction-section.layout-100 .logo {
+  height: var(--main-firefox-logo-height);
+}
+
+#introduction-section.layout-100 .title {
+  margin-block: 0 var(--small-margin);
+}
+
+#introduction-section:not(.layout-100) .description-section {
+  display: none;
+}
+
+#onboardingClose {
+  position: absolute;
+  top: 0;
+  inset-inline-end: 0;
+  margin: 16px;
+  padding: 0;
+  line-height: 0;
+  min-width: 20px;
+  min-height: 20px;
+}
+
+#onboardingClose img {
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#main-section:not(.active) {
+  display: none;
+}
+
+#main-section .logo {
+  background-image: url("quicksuggestOnboarding_magglass.svg");
+  height: var(--main-magglass-logo-height);
+  margin-block-end: var(--large-margin);
+}
+
+#main-section .logo.firefox {
+  background-image: url("chrome://branding/content/about-logo.svg");
+  height: var(--main-firefox-logo-height);
+}
+
+#main-section .title {
+  margin-block: 0 var(--small-margin);
+}
+
+#main-section .privacy-first:not(.active) {
+  display: none;
+}
+
+#main-section .option {
+  border-radius: 4px;
+  border: 2px solid var(--in-content-box-info-background);
+  display: flex;
+  text-align: start;
+  /* Use --small-margin-const for the horizontal padding to make the option's
+     horizontal padding larger than the vertical padding in compact mode. The
+     radio button and text are too close to the left and right edges of the
+     option's border otherwise. */
+  padding: var(--small-margin) var(--small-margin-const);
+  flex-direction: row;
+}
+
+#main-section .option.selected {
+  border-color: var(--in-content-primary-button-background);
+}
+
+#main-section .option.accept {
+  margin-block-end: var(--small-margin);
+}
+
+#main-section .option.reject {
+  margin-block-end: var(--large-margin-const);
+}
+
+#main-section .option > label {
+  /* Make the whole option area selectable for the radio button. 22px is the
+     width of the radio button and its inline margin. */
+  padding-block: var(--small-margin);
+  padding-inline-start: calc(22px + var(--small-margin-const));
+  padding-inline-end: var(--small-margin-const);
+  margin-block: calc(-1 * var(--small-margin));
+  margin-inline-start: calc(-1 * (22px + var(--small-margin-const)));
+  margin-inline-end: calc(-1 * var(--small-margin-const));
+}
+
+body:not(.compact) #main-section .option > input {
+  /* Vertically align the radio button with the .option-label. */
+  margin-block-start: 0.25em;
+}
+
+#main-section .option-label {
+  font-size: 1.1em;
+  font-weight: 600;
+  margin-block-end: 2px;
+}
+
+#main-section .option-description {
+  font-size: 1em;
+}
+
+.buttonBox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+button {
+  margin-block-end: var(--large-margin);
+}
+
+#onboardingSkipLink {
+  margin-block-end: var(--x-small-margin-const);
+}
+
+/* transition from introduction to main */
+#introduction-section.inactive {
+  /* Avoid including this section size */
+  position: fixed;
+  pointer-events: none;
+  animation: fadeout 0.3s forwards;
+}
+
+#main-section.active {
+  animation: fadein 0.3s forwards;
+}
+
+@keyframes fadeout {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    visibility: hidden;
+    opacity: 0;
+  }
+}
+
+@keyframes fadein {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    pointer-events: initial;
+    opacity: 1;
+  }
+}
+
+/* Show main only without transition */
+body.skip-introduction #introduction-section.inactive {
+  animation: none;
+  display: none;
+}
+
+body.skip-introduction #main-section.active {
+  animation: none;
+  pointer-events: initial;
+}
+
+body.skip-introduction .pager {
+  display: none;
+}