feat(pair): Display new "Sync your Firefox experience" UI in Backbone

Because:
* We are making a few UX changes to the beginning of the desktop pairing flow

This commit:
* Adjusts the "pair" page when coming from CAD to display a new "Sync your Firefox experience" radio button question
* On selection and submission of this form, conditionally opens FF pair if they already have a mobile device, or displays the mobile QR code if they need to download and then on "continue" opens FF pair
* Adds a back button
* Adds new SVGs, ran through SVGO
* Adds 5x new front-end Glean metrics events

closes FXA-9609
closes FXA-9590
closes FXA-9591

packages/fxa-content-server/app/scripts/lib/glean/cadFirefox.js

@@ -0,0 +1,94 @@
+/* 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/. */
+
+// AUTOGENERATED BY glean_parser v14.0.1. DO NOT EDIT. DO NOT COMMIT.
+
+import EventMetricType from '@mozilla/glean/private/metrics/event';
+
+/**
+ * User engaged on the "Connect another device" screen with choice options,
+ * selecting either of "I already have FF for mobile" or "I don't have FF for
+ * mobile", which is provided in the 'reason' for this event
+ *
+ * Generated from `cad_firefox.choice_engage`.
+ */
+export const choiceEngage = new EventMetricType(
+  {
+    category: 'cad_firefox',
+    name: 'choice_engage',
+    sendInPings: ['events'],
+    lifetime: 'ping',
+    disabled: false,
+  },
+  ['reason']
+);
+
+/**
+ * User submitted on the "Connect another device" screen with choice options,
+ * submitting either of "I already have FF for mobile" or "I don't have FF for
+ * mobile", which is provided in the 'reason' for this event
+ *
+ * Generated from `cad_firefox.choice_submit`.
+ */
+export const choiceSubmit = new EventMetricType(
+  {
+    category: 'cad_firefox',
+    name: 'choice_submit',
+    sendInPings: ['events'],
+    lifetime: 'ping',
+    disabled: false,
+  },
+  ['reason']
+);
+
+/**
+ * User viewed the "Connect another device" screen with choice options to download
+ * FF for mobile or not
+ *
+ * Generated from `cad_firefox.choice_view`.
+ */
+export const choiceView = new EventMetricType(
+  {
+    category: 'cad_firefox',
+    name: 'choice_view',
+    sendInPings: ['events'],
+    lifetime: 'ping',
+    disabled: false,
+  },
+  []
+);
+
+/**
+ * User clicked the "Continue to sync" button on the "Download Firefox for mobile"
+ * screen
+ *
+ * Generated from `cad_firefox.sync_device_submit`.
+ */
+export const syncDeviceSubmit = new EventMetricType(
+  {
+    category: 'cad_firefox',
+    name: 'sync_device_submit',
+    sendInPings: ['events'],
+    lifetime: 'ping',
+    disabled: false,
+  },
+  []
+);
+
+/**
+ * User viewed the "Download Firefox for mobile" screen after choosing and
+ * submitting the "I don't have Firefox for mobile" option
+ *
+ * Generated from `cad_firefox.view`.
+ */
+export const view = new EventMetricType(
+  {
+    category: 'cad_firefox',
+    name: 'view',
+    sendInPings: ['events'],
+    lifetime: 'ping',
+    disabled: false,
+  },
+  []
+);

packages/fxa-content-server/app/scripts/lib/glean/index.ts

@@ -11,6 +11,7 @@ import * as reg from './reg';
 import * as login from './login';
 import * as cachedLogin from './cachedLogin';
 import * as passwordReset from './passwordReset';
+import * as cadFirefox from './cadFirefox';
 import { userIdSha256 } from './account';
 import { oauthClientId, service } from './relyingParty';
 import { deviceType, entrypoint, flowId } from './session';
@@ -218,6 +219,25 @@ const recordEventMetric = (eventName: string, properties: EventProperties) => {
     case 'password_reset_view':
       passwordReset.view.record();
       break;
+    case 'cad_firefox_view':
+      cadFirefox.view.record();
+      break;
+    case 'cad_firefox_choice_view':
+      cadFirefox.view.record();
+      break;
+    case 'cad_firefox_choice_engage':
+      cadFirefox.choiceEngage.record({
+        reason: properties['reason'] || '',
+      });
+      break;
+    case 'cad_firefox_choice_submit':
+      cadFirefox.choiceSubmit.record({
+        reason: properties['reason'] || '',
+      });
+      break;
+    case 'cad_firefox_sync_device_submit':
+      cadFirefox.syncDeviceSubmit.record();
+      break;
   }
 };
 
@@ -314,6 +334,14 @@ export const GleanMetrics = {
     submit: createEventFn('login_totp_code_submit'),
     success: createEventFn('login_totp_code_success_view'),
   },
+
+  cadFirefox: {
+    view: createEventFn('cad_firefox_view'),
+    choiceView: createEventFn('cad_firefox_choice_view'),
+    choiceEngage: createEventFn('cad_firefox_choice_engage'),
+    choiceSubmit: createEventFn('cad_firefox_choice_submit'),
+    syncDeviceSubmit: createEventFn('cad_firefox_sync_device_submit'),
+  },
 };
 
 export default GleanMetrics;

packages/fxa-content-server/app/scripts/models/pairing/form-needs-mobile.js

@@ -0,0 +1,13 @@
+/* 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/. */
+
+import Backbone from 'backbone';
+
+const FormNeedsMobile = Backbone.Model.extend({
+  defaults: {
+    needsMobileConfirmed: false,
+  },
+});
+
+export default FormNeedsMobile;