Bug 1936656 - Add ability to show multiple content tiles on a single aboutwelcome screen with option to toggle visibility r=emcminn,omc-reviewers,jprickett

**Primary Updates**
- Add ability to show multiple content tiles on a single AboutWelcome screen by supporting an array of tile objects and/or sub-arrays of tile objects to be groups together as a value for "tiles" in screen content
- Keep compatibility with messages that use a single tile object as the value of "tiles" in screen content
- Add updates to `setMultiSelectActions` to ensure we can handle actions across multiple MultiSelect tiles.
- Add optional tile headers which can be displayed in place of the tile until clicked, closing any other tile with a header that's currently open
- Send click event telemetry when a user clicks a tile header to open the tile
- Update aboutwelcome source docs related to content tiles to include this new capability

**Additional Updates to Support UX Designs**
[[ https://www.figma.com/design/F63Ac1akw2q1fN5D59rgS5/Privacy?node-id=4110-16458&t=kSzPUp4XFLq0dKg8-4 |
See Figma designs ]]
- Add ability to configure `display`, `padding`, and `width` for aboutwelcome screens (this allows us to support the proposed Spotlight modal designs, which include anchoring the modal towards the top of the screen and expanding it downward when a tile is opened, rather than centering vertically)
- Add ability to configure action buttons to show above screen content

{F11717546}

Differential Revision: https://phabricator.services.mozilla.com/D231856

browser/components/asrouter/docs/about-welcome.md

@@ -35,7 +35,9 @@ You can see JSON for all current default screens in about:welcome [here](https:/
 ![About Welcome Responsive 1](./aboutwelcome-res-1.png)
 
 ### Content Tiles
-Screens in about:welcome support a variety of content tiles. One tile can be displayed per screen.
+Screens in about:welcome support a variety of content tiles. Typically, only one tile is displayed per screen. When necessary, multiple tiles can be included on one screen. Each tile can be configured with a header that describes the tile and reveals it when clicked (see example below).
+
+![Content Tiles](./content-tiles.png)
 
 #### Addons Picker
 Displays a curated list of recommended add-ons that users can choose to install directly from the tile.

browser/components/asrouter/modules/PanelTestProvider.sys.mjs

@@ -20,32 +20,112 @@ const isMSIX =
 
 const MESSAGES = () => [
   {
-    id: "EMBEDDED_BROWSER_SPOTLIGHT",
-    groups: ["panel-test-provider"],
+    id: "CONTENT_TILES_TEST",
+    targeting: 'providerCohorts.panel_local_testing == "SHOW_TEST"',
     template: "spotlight",
-    targeting: true,
     content: {
       template: "multistage",
       screens: [
         {
-          id: "EMBEDDED_BROWSER_SCREEN",
+          id: "SCREEN_1",
           content: {
+            spotlight_style: {
+              display: "block",
+              padding: "20px 0 0 0",
+              width: "616px",
+            },
             logo: {},
             title: {
-              raw: "Embedded browser test",
+              raw: "Content tiles test",
             },
-            tiles: {
-              type: "embedded_browser",
-              data: {
-                style: {
-                  width: "100%",
-                  height: "200px",
+            subtitle: {
+              raw: "Review the content below before continuing.",
+            },
+            tiles: [
+              {
+                type: "embedded_browser",
+                header: {
+                  title: "Test title 1",
+                  subtitle: "Read more",
+                },
+                data: {
+                  style: {
+                    width: "100%",
+                    height: "200px",
+                  },
+                  url: "https://example.com",
                 },
-                url: "https://example.com",
               },
-            },
-            dismiss_button: {
+              {
+                type: "embedded_browser",
+                header: {
+                  title: "Test Title 2",
+                  subtitle: "Read more",
+                },
+                data: {
+                  style: {
+                    width: "100%",
+                    height: "200px",
+                  },
+                  url: "https://example.com",
+                },
+              },
+              {
+                type: "multiselect",
+                header: {
+                  title: "Test Title 3",
+                  subtitle: "Manage options",
+                },
+                data: [
+                  {
+                    id: "checkbox-test-1",
+                    type: "checkbox",
+                    defaultValue: false,
+                    label: {
+                      raw: "Test option 1",
+                    },
+                    action: {
+                      type: "SET_PREF",
+                      data: {
+                        pref: {
+                          name: "test-pref-1",
+                          value: true,
+                        },
+                      },
+                    },
+                  },
+                  {
+                    id: "checkbox-test-2",
+                    type: "checkbox",
+                    defaultValue: false,
+                    label: {
+                      raw: "Test option 2",
+                    },
+                    action: {
+                      type: "SET_PREF",
+                      data: {
+                        pref: {
+                          name: "test-pref-2",
+                          value: true,
+                        },
+                      },
+                    },
+                  },
+                ],
+              },
+            ],
+            action_buttons_above_content: true,
+            primary_button: {
+              label: {
+                raw: "Continue",
+                marginBlock: "28px 0",
+              },
               action: {
+                type: "MULTI_ACTION",
+                collectSelect: true,
+                data: {
+                  actions: [],
+                },
                 dismiss: true,
               },
             },
@@ -53,6 +133,7 @@ const MESSAGES = () => [
         },
       ],
     },
+    provider: "panel_local_testing",
   },
   {
     id: "TAB_GROUP_TEST_CALLOUT_HORIZONTAL",