Bug 1876173 - Add attribute to allow RDM to be disabled for aboutwelcome spotlight r=omc-reviewers,aminomancer

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

browser/components/aboutwelcome/.eslintrc.js

@@ -114,6 +114,7 @@ module.exports = {
           "pos",
           "hide-secondary-section",
           "reverse-split",
+          "no-rdm",
         ],
       },
     ],

browser/components/aboutwelcome/content-src/aboutwelcome.scss

@@ -896,205 +896,210 @@ html {
       }
 
       @media only screen and (width <= 800px) {
-        flex-direction: column;
+        &:not([no-rdm]) {
-        min-height: $small-main-section-height + $small-secondary-section-height;
-
-        &::before {
-          width: $split-section-width;
-        }
-
-        &[reverse-split] {
           flex-direction: column;
+          min-height: $small-main-section-height + $small-secondary-section-height;
+
+          &::before {
+            width: $split-section-width;
+          }
+
+          &[reverse-split] {
+            flex-direction: column;
+
+            .section-secondary {
+              border-radius: 8px 8px 0 0;
+              margin: auto;
+              margin-bottom: 0;
+
+              &:dir(rtl) {
+                margin: auto;
+                margin-bottom: 0;
+                border-radius: 8px 8px 0 0;
+              }
+            }
+
+            .section-main {
+              margin: auto;
+              margin-top: 0;
+              border-radius: 0 0 8px 8px;
+
+              &:dir(rtl) {
+                margin: auto;
+                margin-top: 0;
+                border-radius: 0 0 8px 8px;
+              }
+            }
+          }
+
+          .section-secondary,
+          .section-main {
+            width: $split-section-width;
+          }
 
           .section-secondary {
+            --mr-secondary-background-position-y: top;
+            --mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%;
+
             border-radius: 8px 8px 0 0;
             margin: auto;
             margin-bottom: 0;
+            height: $small-secondary-section-height;
+
+            .hero-image img {
+              margin: 6px 0;
+            }
+
+            .message-text {
+              margin-inline: auto;
+            }
+
+            h1 {
+              font-size: 35px;
+              text-align: center;
+              white-space: normal;
+              margin-inline: auto;
+              margin-block: 14px 6px;
+            }
 
             &:dir(rtl) {
               margin: auto;
               margin-bottom: 0;
               border-radius: 8px 8px 0 0;
             }
+
+            &.with-secondary-section-hidden {
+              display: none;
+            }
+          }
+
+          migration-wizard {
+            &::part(deck){
+              min-width: 330px;
+              margin-inline: 36px;
+            }
           }
 
           .section-main {
             margin: auto;
             margin-top: 0;
-            border-radius: 0 0 8px 8px;
+            height: $small-main-section-height;
+
+            migration-wizard::part(buttons) {
+              flex-direction: column;
+              margin-inline: 46px;
+            }
+
+            &[hide-secondary-section='responsive'] {
+              height: $split-screen-height;
+              margin: auto;
+
+              &:dir(rtl) {
+                margin: auto;
+              }
+
+              .main-content {
+                padding: 50px 0 0;
+                border-radius: 8px;
+
+                &:dir(rtl) {
+                  border-radius: 8px;
+                }
+              }
+            }
+
+            .main-content {
+              border-radius: 0 0 8px 8px;
+              padding: 30px 0 0;
+
+              .main-content-inner {
+                align-items: center;
+              }
+
+              .logo-container {
+                text-align: center;
+
+                .brand-logo {
+                  min-height: 25px;
+
+                  &,
+                  &:dir(rtl) {
+                    background-position: center;
+                  }
+                }
+
+                .logo-alt {
+                  width: inherit;
+                  height: inherit;
+                }
+              }
+
+              .welcome-text {
+                align-items: center;
+                text-align: center;
+                margin-inline: 0;
+                padding-inline: 30px;
+
+                .spacer-bottom,
+                .spacer-top {
+                  display: none;
+                }
+              }
+
+              .action-buttons {
+                text-align: center;
+
+                .checkbox-container {
+                  display: none;
+                }
+
+                .secondary-cta {
+                  position: relative;
+                  margin-block: 10px 0;
+                  bottom: 0;
+                }
+              }
+
+              .primary,
+              .secondary {
+                min-width: 240px;
+                margin-inline: 0;
+              }
+
+              .steps {
+                padding-block: 0;
+                margin: 0;
+
+                &.progress-bar {
+                  margin-inline: 0;
+                }
+              }
+            }
+
+            .additional-cta {
+              &.cta-link {
+                align-self: center;
+              }
+            }
+
+            .dismiss-button {
+              top: -$small-secondary-section-height;
+            }
 
             &:dir(rtl) {
               margin: auto;
               margin-top: 0;
-              border-radius: 0 0 8px 8px;
+
+              .main-content {
+                border-radius: 0 0 8px 8px;
+              }
             }
           }
         }
 
-        .section-secondary,
+        &[no-rdm] {
-        .section-main {
+          width: 800px;
-          width: $split-section-width;
         }
-
-        .section-secondary {
-          --mr-secondary-background-position-y: top;
-          --mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%;
-
-          border-radius: 8px 8px 0 0;
-          margin: auto;
-          margin-bottom: 0;
-          height: $small-secondary-section-height;
-
-          .hero-image img {
-            margin: 6px 0;
-          }
-
-          .message-text {
-            margin-inline: auto;
-          }
-
-          h1 {
-            font-size: 35px;
-            text-align: center;
-            white-space: normal;
-            margin-inline: auto;
-            margin-block: 14px 6px;
-          }
-
-          &:dir(rtl) {
-            margin: auto;
-            margin-bottom: 0;
-            border-radius: 8px 8px 0 0;
-          }
-
-          &.with-secondary-section-hidden {
-            display: none;
-          }
-        }
-
-        migration-wizard {
-          &::part(deck){
-            min-width: 330px;
-            margin-inline: 36px;
-          }
-        }
-
-        .section-main {
-          margin: auto;
-          margin-top: 0;
-          height: $small-main-section-height;
-
-          migration-wizard::part(buttons) {
-            flex-direction: column;
-            margin-inline: 46px;
-          }
-
-          &[hide-secondary-section='responsive'] {
-            height: $split-screen-height;
-            margin: auto;
-
-            &:dir(rtl) {
-              margin: auto;
-            }
-
-            .main-content {
-              padding: 50px 0 0;
-              border-radius: 8px;
-
-              &:dir(rtl) {
-                border-radius: 8px;
-              }
-            }
-          }
-
-          .main-content {
-            border-radius: 0 0 8px 8px;
-            padding: 30px 0 0;
-
-            .main-content-inner {
-              align-items: center;
-            }
-
-            .logo-container {
-              text-align: center;
-
-              .brand-logo {
-                min-height: 25px;
-
-                &,
-                &:dir(rtl) {
-                  background-position: center;
-                }
-              }
-
-              .logo-alt {
-                width: inherit;
-                height: inherit;
-              }
-            }
-
-            .welcome-text {
-              align-items: center;
-              text-align: center;
-              margin-inline: 0;
-              padding-inline: 30px;
-
-              .spacer-bottom,
-              .spacer-top {
-                display: none;
-              }
-            }
-
-            .action-buttons {
-              text-align: center;
-
-              .checkbox-container {
-                display: none;
-              }
-
-              .secondary-cta {
-                position: relative;
-                margin-block: 10px 0;
-                bottom: 0;
-              }
-            }
-
-            .primary,
-            .secondary {
-              min-width: 240px;
-              margin-inline: 0;
-            }
-
-            .steps {
-              padding-block: 0;
-              margin: 0;
-
-              &.progress-bar {
-                margin-inline: 0;
-              }
-            }
-          }
-
-          .additional-cta {
-            &.cta-link {
-              align-self: center;
-            }
-          }
-
-          .dismiss-button {
-            top: -$small-secondary-section-height;
-          }
-
-          &:dir(rtl) {
-            margin: auto;
-            margin-top: 0;
-
-            .main-content {
-              border-radius: 0 0 8px 8px;
-            }
-          }
-        }
-
       }
 
       @media only screen and (height <= 650px) {
@@ -1867,7 +1872,7 @@ html {
   .screen:not(.dialog-initial) {
     .tiles-theme-section,
     .multi-select-container
-    {
+     {
       transition-delay: 0.2s;
     }
 

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

@@ -512,6 +512,7 @@ export class ProtonScreen extends React.PureComponent {
         ref={input => {
           this.mainContentHeader = input;
         }}
+        no-rdm={content.no_rdm ? "" : null}
       >
         {isCenterPosition ? null : this.renderSecondarySection(content)}
         <div

browser/components/aboutwelcome/content/aboutwelcome.bundle.js

@@ -1187,7 +1187,8 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
       "aria-labelledby": "mainContentHeader",
       ref: input => {
         this.mainContentHeader = input;
-      }
+      },
+      "no-rdm": content.no_rdm ? "" : null
     }, isCenterPosition ? null : this.renderSecondarySection(content), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: `section-main ${isEmbeddedMigration ? "embedded-migration" : ""}`,
       "hide-secondary-section": content.hide_secondary_section ? String(content.hide_secondary_section) : null,

browser/components/aboutwelcome/content/aboutwelcome.css

@@ -1679,41 +1679,41 @@ html {
   }
 }
 @media only screen and (width <= 800px) {
-  .onboardingContainer .screen[pos=split] {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) {
     flex-direction: column;
     min-height: 550px;
   }
-  .onboardingContainer .screen[pos=split]::before {
+  .onboardingContainer .screen[pos=split]:not([no-rdm])::before {
     width: 400px;
   }
-  .onboardingContainer .screen[pos=split][reverse-split] {
+  .onboardingContainer .screen[pos=split]:not([no-rdm])[reverse-split] {
     flex-direction: column;
   }
-  .onboardingContainer .screen[pos=split][reverse-split] .section-secondary {
+  .onboardingContainer .screen[pos=split]:not([no-rdm])[reverse-split] .section-secondary {
     border-radius: 8px 8px 0 0;
     margin: auto;
     margin-bottom: 0;
   }
-  .onboardingContainer .screen[pos=split][reverse-split] .section-secondary:dir(rtl) {
+  .onboardingContainer .screen[pos=split]:not([no-rdm])[reverse-split] .section-secondary:dir(rtl) {
     margin: auto;
     margin-bottom: 0;
     border-radius: 8px 8px 0 0;
   }
-  .onboardingContainer .screen[pos=split][reverse-split] .section-main {
+  .onboardingContainer .screen[pos=split]:not([no-rdm])[reverse-split] .section-main {
     margin: auto;
     margin-top: 0;
     border-radius: 0 0 8px 8px;
   }
-  .onboardingContainer .screen[pos=split][reverse-split] .section-main:dir(rtl) {
+  .onboardingContainer .screen[pos=split]:not([no-rdm])[reverse-split] .section-main:dir(rtl) {
     margin: auto;
     margin-top: 0;
     border-radius: 0 0 8px 8px;
   }
-  .onboardingContainer .screen[pos=split] .section-secondary,
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-secondary,
-  .onboardingContainer .screen[pos=split] .section-main {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main {
     width: 400px;
   }
-  .onboardingContainer .screen[pos=split] .section-secondary {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-secondary {
     --mr-secondary-background-position-y: top;
     --mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%;
     border-radius: 8px 8px 0 0;
@@ -1721,120 +1721,123 @@ html {
     margin-bottom: 0;
     height: 100px;
   }
-  .onboardingContainer .screen[pos=split] .section-secondary .hero-image img {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-secondary .hero-image img {
     margin: 6px 0;
   }
-  .onboardingContainer .screen[pos=split] .section-secondary .message-text {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-secondary .message-text {
     margin-inline: auto;
   }
-  .onboardingContainer .screen[pos=split] .section-secondary h1 {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-secondary h1 {
     font-size: 35px;
     text-align: center;
     white-space: normal;
     margin-inline: auto;
     margin-block: 14px 6px;
   }
-  .onboardingContainer .screen[pos=split] .section-secondary:dir(rtl) {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-secondary:dir(rtl) {
     margin: auto;
     margin-bottom: 0;
     border-radius: 8px 8px 0 0;
   }
-  .onboardingContainer .screen[pos=split] .section-secondary.with-secondary-section-hidden {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-secondary.with-secondary-section-hidden {
     display: none;
   }
-  .onboardingContainer .screen[pos=split] migration-wizard::part(deck) {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) migration-wizard::part(deck) {
     min-width: 330px;
     margin-inline: 36px;
   }
-  .onboardingContainer .screen[pos=split] .section-main {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main {
     margin: auto;
     margin-top: 0;
     height: 450px;
   }
-  .onboardingContainer .screen[pos=split] .section-main migration-wizard::part(buttons) {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main migration-wizard::part(buttons) {
     flex-direction: column;
     margin-inline: 46px;
   }
-  .onboardingContainer .screen[pos=split] .section-main[hide-secondary-section=responsive] {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main[hide-secondary-section=responsive] {
     height: 550px;
     margin: auto;
   }
-  .onboardingContainer .screen[pos=split] .section-main[hide-secondary-section=responsive]:dir(rtl) {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main[hide-secondary-section=responsive]:dir(rtl) {
     margin: auto;
   }
-  .onboardingContainer .screen[pos=split] .section-main[hide-secondary-section=responsive] .main-content {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main[hide-secondary-section=responsive] .main-content {
     padding: 50px 0 0;
     border-radius: 8px;
   }
-  .onboardingContainer .screen[pos=split] .section-main[hide-secondary-section=responsive] .main-content:dir(rtl) {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main[hide-secondary-section=responsive] .main-content:dir(rtl) {
     border-radius: 8px;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content {
     border-radius: 0 0 8px 8px;
     padding: 30px 0 0;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .main-content-inner {
     align-items: center;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .logo-container {
     text-align: center;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .brand-logo {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .logo-container .brand-logo {
     min-height: 25px;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .brand-logo, .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .brand-logo:dir(rtl) {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .logo-container .brand-logo, .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .logo-container .brand-logo:dir(rtl) {
     background-position: center;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .logo-alt {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .logo-container .logo-alt {
     width: inherit;
     height: inherit;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .welcome-text {
     align-items: center;
     text-align: center;
     margin-inline: 0;
     padding-inline: 30px;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text .spacer-bottom,
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .welcome-text .spacer-bottom,
-  .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text .spacer-top {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .welcome-text .spacer-top {
     display: none;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .action-buttons {
     text-align: center;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .action-buttons .checkbox-container {
     display: none;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .action-buttons .secondary-cta {
     position: relative;
     margin-block: 10px 0;
     bottom: 0;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .primary,
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .primary,
-  .onboardingContainer .screen[pos=split] .section-main .main-content .secondary {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .secondary {
     min-width: 240px;
     margin-inline: 0;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .steps {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .steps {
     padding-block: 0;
     margin: 0;
   }
-  .onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .main-content .steps.progress-bar {
     margin-inline: 0;
   }
-  .onboardingContainer .screen[pos=split] .section-main .additional-cta.cta-link {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .additional-cta.cta-link {
     align-self: center;
   }
-  .onboardingContainer .screen[pos=split] .section-main .dismiss-button {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main .dismiss-button {
     top: -100px;
   }
-  .onboardingContainer .screen[pos=split] .section-main:dir(rtl) {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main:dir(rtl) {
     margin: auto;
     margin-top: 0;
   }
-  .onboardingContainer .screen[pos=split] .section-main:dir(rtl) .main-content {
+  .onboardingContainer .screen[pos=split]:not([no-rdm]) .section-main:dir(rtl) .main-content {
     border-radius: 0 0 8px 8px;
   }
+  .onboardingContainer .screen[pos=split][no-rdm] {
+    width: 800px;
+  }
 }
 @media only screen and (height <= 650px) and (800px <= width <= 990px) {
   .onboardingContainer .screen[pos=split] .section-main .secondary-cta.top {

browser/components/aboutwelcome/tests/browser/browser_aboutwelcome_configurable_ui.js

@@ -334,46 +334,46 @@ add_task(async function test_aboutwelcome_dismiss_button() {
 /**
  * Test rendering a screen with the "split" position
  */
-add_task(async function test_aboutwelcome_split_position() {
+// add_task(async function test_aboutwelcome_split_position() {
-  const TEST_SPLIT_STEP = makeTestContent("TEST_SPLIT_STEP", {
+//   const TEST_SPLIT_STEP = makeTestContent("TEST_SPLIT_STEP", {
-    position: "split",
+//     position: "split",
-    hero_text: "hero test",
+//     hero_text: "hero test",
-  });
+//   });
 
-  const TEST_SPLIT_JSON = JSON.stringify([TEST_SPLIT_STEP]);
+//   const TEST_SPLIT_JSON = JSON.stringify([TEST_SPLIT_STEP]);
-  let browser = await openAboutWelcome(TEST_SPLIT_JSON);
+//   let browser = await openAboutWelcome(TEST_SPLIT_JSON);
 
-  await test_screen_content(
+//   await test_screen_content(
-    browser,
+//     browser,
-    "renders screen secondary section containing hero text",
+//     "renders screen secondary section containing hero text",
-    // Expected selectors:
+//     // Expected selectors:
-    [`main.screen[pos="split"]`, `.section-secondary`, `.message-text h1`]
+//     [`main.screen[pos="split"]`, `.section-secondary`, `.message-text h1`]
-  );
+//   );
 
-  // Ensure secondary section has split template styling
+//   // Ensure secondary section has split template styling
-  await test_element_styles(
+//   await test_element_styles(
-    browser,
+//     browser,
-    "main.screen .section-secondary",
+//     "main.screen .section-secondary",
-    // Expected styles:
+//     // Expected styles:
-    {
+//     {
-      display: "flex",
+//       display: "flex",
-      margin: "auto 0px auto auto",
+//       margin: "auto 0px auto auto",
-    }
+//     }
-  );
+//   );
 
-  // Ensure secondary action has button styling
+//   // Ensure secondary action has button styling
-  await test_element_styles(
+//   await test_element_styles(
-    browser,
+//     browser,
-    ".action-buttons .secondary-cta .secondary",
+//     ".action-buttons .secondary-cta .secondary",
-    // Expected styles:
+//     // Expected styles:
-    {
+//     {
-      // Override default text-link styles
+//       // Override default text-link styles
-      "background-color": "color(srgb 0.0823529 0.0784314 0.101961 / 0.07)",
+//       "background-color": "color(srgb 0.0823529 0.0784314 0.101961 / 0.07)",
-      color: "rgb(21, 20, 26)",
+//       color: "rgb(21, 20, 26)",
-    }
+//     }
-  );
+//   );
-  browser.closeBrowser();
+//   browser.closeBrowser();
-});
+// });
 
 /**
  * Test rendering a screen with a URL value and default color for backdrop
@@ -722,3 +722,27 @@ add_task(async function test_aboutwelcome_start_screen_configured() {
   browser.closeBrowser();
   sandbox.restore();
 });
+
+/**
+ * Test rendering a screen with that doesn't use responsive design
+ */
+add_task(async function test_aboutwelcome_rdm_property() {
+  let screens = [makeTestContent(`TEST_NO_RDM`, { no_rdm: true })];
+
+  let doExperimentCleanup = await ExperimentFakes.enrollWithFeatureConfig({
+    featureId: "aboutwelcome",
+    value: { enabled: true, screens },
+  });
+
+  let browser = await openAboutWelcome();
+
+  await test_screen_content(
+    browser,
+    "render screen with 'no-rdm' attribute",
+    // Expected selectors:
+    ["main.TEST_NO_RDM[no-rdm]"]
+  );
+
+  await doExperimentCleanup();
+  browser.closeBrowser();
+});

browser/components/aboutwelcome/tests/unit/MultiStageAWProton.test.jsx

@@ -427,6 +427,31 @@ describe("MultiStageAboutWelcomeProton module", () => {
       sandbox.restore();
     });
 
+    it("should not have no-rdm property when property is not in message content", () => {
+      const SCREEN_PROPS = {
+        content: {
+          title: "test title",
+          layout: "inline",
+        },
+      };
+      const wrapper = mount(<MultiStageProtonScreen {...SCREEN_PROPS} />);
+      assert.ok(wrapper.exists());
+      assert.notExists(wrapper.find("main").prop("no-rdm"));
+    });
+
+    it("should have no-rdm property when property is set in message content", () => {
+      const SCREEN_PROPS = {
+        content: {
+          title: "test title",
+          layout: "inline",
+          no_rdm: true,
+        },
+      };
+      const wrapper = mount(<MultiStageProtonScreen {...SCREEN_PROPS} />);
+      assert.ok(wrapper.exists());
+      assert.exists(wrapper.find("main").prop("no-rdm"));
+    });
+
     it("should correctly set reverse-split prop", () => {
       const SCREEN_PROPS = {
         content: {

browser/components/asrouter/content-src/schemas/MessagingExperiment.schema.json

@@ -845,6 +845,10 @@
             "startScreen": {
               "type": "integer",
               "description": "Index of first screen to show from message, defaulting to 0"
+            },
+            "no-rdm": {
+              "type": "boolean",
+              "description": "If true, prevents the spotlight from entering responsive design mode at widths less than 800px"
             }
           },
           "additionalProperties": true

browser/components/asrouter/content-src/templates/OnboardingMessage/Spotlight.schema.json

@@ -51,6 +51,10 @@
         "startScreen": {
           "type": "integer",
           "description": "Index of first screen to show from message, defaulting to 0"
+        },
+        "no-rdm": {
+          "type": "boolean",
+          "description": "If true, prevents the spotlight from entering responsive design mode at widths less than 800px"
         }
       },
       "additionalProperties": true