Bug 1678157 - collapse informational sections on about:ion on enrollm…

…ent r=Dexter Differential Revision: https://phabricator.services.mozilla.com/D97499
dothq · Nov 19, 2020 · 0feacd7 · 0feacd7
1 parent baf3102
commit 0feacd7
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 9 deletions.
diff --git a/browser/components/ion/content/ion.css b/browser/components/ion/content/ion.css
@@ -65,6 +65,8 @@ details > summary {
   width: 18em;
   cursor: pointer;
   outline: none;
+  font-size: 17px;
+  font-weight: 600;
 }
 
 #report-title, #title {

diff --git a/browser/components/ion/content/ion.html b/browser/components/ion/content/ion.html
@@ -26,24 +26,24 @@ <h1 id="title" data-l10n-id="ion-document-title"></h1>
         <button id="enrollment-button" class="primary"></button>
       </header>
       <div id="summary" data-l10n-id="ion-summary"></div>
-      <div id="details">
-        <h2 data-l10n-id="ion-works-title"></h2>
+      <details id="details" open>
+        <summary data-l10n-id="ion-works-title"></summary>
         <p><strong data-l10n-id="ion-works-bullet-get-started-title" ></strong> <span data-l10n-id="ion-works-bullet-get-started-content"></span></p>
         <p><strong data-l10n-id="ion-works-bullet-enroll-title" ></strong> <span data-l10n-id="ion-works-bullet-enroll-content"></span></p>
         <p><strong data-l10n-id="ion-works-bullet-control-title" ></strong> <span data-l10n-id="ion-works-bullet-control-content"></span></p>
-      </div>
-      <div id="data">
-        <h2 data-l10n-id="ion-your-data-title"></h2>
+      </details>
+      <details id="data" open>
+        <summary data-l10n-id="ion-your-data-title"></summary>
         <p data-l10n-id="ion-your-data-summary"></p>
         <ul>
           <li data-l10n-id="ion-your-data-bullet-know"></li>
           <li data-l10n-id="ion-your-data-bullet-lengths"></li>
           <li data-l10n-id="ion-your-data-bullet-leave"></li>
         </ul>
-        <p data-l10n-id="ion-your-data-learn-more">
-          <a data-l10n-name="privacy-policy" class="privacy-policy" href="https://support.mozilla.org/1/firefox/%VERSION%/%OS%/%LOCALE%/pioneer-managing-account-data" target="_blank"></a>
-        </p>
-      </div>
+      </details>
+       <p data-l10n-id="ion-your-data-learn-more">
+        <a data-l10n-name="privacy-policy" class="privacy-policy" href="https://support.mozilla.org/1/firefox/%VERSION%/%OS%/%LOCALE%/pioneer-managing-account-data" target="_blank"></a>
+      </p>
       <h2 id="header-available-studies"></h2>
       <div id="available-studies"></div>
       <dialog id="join-ion-consent-dialog" class="modal" is="trapped-dialog">

diff --git a/browser/components/ion/content/ion.js b/browser/components/ion/content/ion.js
@@ -82,6 +82,16 @@ function showEnrollmentStatus() {
     `ion-${ionId ? "un" : ""}enrollment-button`
   );
   enrollmentButton.classList.toggle("primary", !ionId);
+
+  // collapse content above the fold if enrolled, otherwise open it.
+  for (const section of ["details", "data"]) {
+    const details = document.getElementById(section);
+    if (ionId) {
+      details.removeAttribute("open");
+    } else {
+      details.setAttribute("open", true);
+    }
+  }
 }
 
 function toggleContentBasedOnLocale() {

diff --git a/browser/components/ion/test/browser/browser_ion_ui.js b/browser/components/ion/test/browser/browser_ion_ui.js
@@ -437,6 +437,14 @@ add_task(async function testAboutPage() {
       const enrollmentButton = content.document.getElementById(
         "enrollment-button"
       );
+
+      for (const section of ["details", "data"]) {
+        ok(
+          content.document.getElementById(section).open === true,
+          "before enrollment, dialog sections are open."
+        );
+      }
+
       enrollmentButton.click();
 
       const dialog = content.document.getElementById("join-ion-consent-dialog");
@@ -499,6 +507,13 @@ add_task(async function testAboutPage() {
         "after enrollment, Ion toolbar button is not hidden."
       );
 
+      for (const section of ["details", "data"]) {
+        ok(
+          content.document.getElementById(section).open === false,
+          "after enrollment, dialog sections are closed."
+        );
+      }
+
       for (const cachedAddon of CACHED_ADDONS) {
         const addonId = cachedAddon.addon_id;
         const joinButton = content.document.getElementById(
@@ -753,6 +768,13 @@ add_task(async function testAboutPage() {
             "After unenrollment, join button is disabled."
           );
         }
+
+        for (const section of ["details", "data"]) {
+          ok(
+            content.document.getElementById(section).open === true,
+            "after unenrollment, dialog sections are open."
+          );
+        }
       }
     }
   );