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

UltraBlame original commit: f7524feb52aa820a5e877b14b4a0a02815cf3ae8

browser/components/aboutwelcome/content-src/components/EmbeddedBrowser.jsx

@@ -67,6 +67,24 @@ from
 react
 "
 ;
+import
+{
+AboutWelcomeUtils
+}
+from
+"
+.
+.
+/
+lib
+/
+aboutwelcome
+-
+utils
+.
+mjs
+"
+;
 const
 BROWSER_STYLES
 =
@@ -81,9 +99,7 @@ width
 border
 "
 "
-border
--
-radius
+borderRadius
 "
 "
 flex
@@ -96,55 +112,6 @@ padding
 "
 ]
 ;
-function
-applyValidStyles
-(
-element
-style
-validStyles
-)
-{
-Object
-.
-keys
-(
-style
-)
-.
-forEach
-(
-key
-=
->
-{
-if
-(
-validStyles
-.
-includes
-(
-key
-)
-)
-{
-element
-.
-style
-.
-setProperty
-(
-key
-style
-[
-key
-]
-)
-;
-}
-}
-)
-;
-}
 export
 const
 EmbeddedBrowser
@@ -471,13 +438,46 @@ current
 style
 )
 {
-applyValidStyles
+const
+validStyles
+=
+AboutWelcomeUtils
+.
+getValidStyle
 (
+style
+BROWSER_STYLES
+)
+;
+Object
+.
+keys
+(
+validStyles
+)
+.
+forEach
+(
+key
+=
+>
+{
 browserRef
 .
 current
+.
 style
-BROWSER_STYLES
+.
+setProperty
+(
+key
+style
+[
+key
+]
+)
+;
+}
 )
 ;
 }

browser/components/aboutwelcome/content-src/components/MultiSelect.jsx

@@ -81,6 +81,24 @@ from
 MSLocalized
 "
 ;
+import
+{
+AboutWelcomeUtils
+}
+from
+"
+.
+.
+/
+lib
+/
+aboutwelcome
+-
+utils
+.
+mjs
+"
+;
 const
 MULTI_SELECT_STYLES
 =
@@ -179,89 +197,6 @@ boxShadow
 "
 ]
 ;
-function
-getValidStyle
-(
-style
-validStyles
-allowVars
-)
-{
-if
-(
-!
-style
-)
-{
-return
-null
-;
-}
-return
-Object
-.
-keys
-(
-style
-)
-.
-filter
-(
-key
-=
->
-validStyles
-.
-includes
-(
-key
-)
-|
-|
-(
-allowVars
-&
-&
-key
-.
-startsWith
-(
-"
--
--
-"
-)
-)
-)
-.
-reduce
-(
-(
-obj
-key
-)
-=
->
-{
-obj
-[
-key
-]
-=
-style
-[
-key
-]
-;
-return
-obj
-;
-}
-{
-}
-)
-;
-}
 export
 const
 MultiSelect
@@ -513,6 +448,8 @@ useMemo
 )
 =
 >
+AboutWelcomeUtils
+.
 getValidStyle
 (
 content
@@ -788,6 +725,8 @@ item
 style
 =
 {
+AboutWelcomeUtils
+.
 getValidStyle
 (
 style
@@ -836,6 +775,8 @@ id
 style
 =
 {
+AboutWelcomeUtils
+.
 getValidStyle
 (
 icon