enhance(ad-free): hide top-banner completely (#11412)

When paying MDN Plus subscribers enable the "Ad-free experience", we now
hide the top banner completely, rather than showing it with a fallback message.

The top banner is hidden immediately, avoiding a layout shift.

client/public/index.html

@@ -102,7 +102,7 @@
     <script>
       /**
        * If we modify this script, we must update the CSP hash as follows:
-       * 1. Run `npx jest testing/tests/csp.test.ts --watch`
+       * 1. Run `yarn run jest testing/tests/csp.test.ts --watch`
        * 2. Open `libs/constants/index.js` and find the current hash in CSP_SCRIPT_SRC_VALUES.
        * 3. Remove the old "previous" hash and replace it with the old "current" hash.
        * 4. Replace the old "current" hash with the new hash from the failing test (step 1).
@@ -124,6 +124,8 @@
           o &&
             ((document.documentElement.className = o),
             (document.documentElement.style.backgroundColor = c[o]));
+          const n = window.localStorage.getItem("nop");
+          n && (document.documentElement.dataset["nop"] = n);
         } catch (e) {
           console.warn("Unable to read theme from localStorage", e);
         }

client/src/ui/organisms/placement/index.scss

@@ -322,6 +322,10 @@ section.place.hp-main {
       }
     }
   }
+
+  html[data-nop] & {
+    display: none;
+  }
 }
 
 div.empty-place {

client/src/user-context.tsx

@@ -167,6 +167,20 @@ function setSessionStorageData(data: User) {
   }
 }
 
+function setNoPlacementFlag(noAds: boolean) {
+  try {
+    if (noAds) {
+      localStorage.setItem("nop", "yes");
+      document.documentElement.dataset["nop"] = "yes";
+    } else {
+      localStorage.removeItem("nop");
+      delete document.documentElement.dataset["nop"];
+    }
+  } catch (e) {
+    console.warn("Unable to write nop to localStorage", e);
+  }
+}
+
 export function UserDataProvider(props: { children: React.ReactNode }) {
   const { data, error, isLoading, mutate } = useSWR<User | null, Error | null>(
     DISABLE_AUTH ? null : "/api/v1/whoami",
@@ -230,6 +244,7 @@ export function UserDataProvider(props: { children: React.ReactNode }) {
       // The user is definitely signed in or not signed in.
       data.offlineSettings = OfflineSettingsData.read();
       setSessionStorageData(data);
+      setNoPlacementFlag(data?.settings?.noAds ?? false);
 
       // Let's initialize the MDN Worker if applicable.
       if (!window.mdnWorker && data?.offlineSettings?.offline) {

libs/constants/index.js

@@ -84,9 +84,9 @@ export const CSP_SCRIPT_SRC_VALUES = [
 
   // 1. Theme switching.
   // - Previous hash (to avoid cache invalidation issues):
-  "'sha256-uogddBLIKmJa413dyT0iPejBg3VFcO+4x6B+vw3jng0='",
-  // - Current hash:
   "'sha256-EehWlTYp7Bqy57gDeQttaWKp0ukTTEUKGP44h8GVeik='",
+  // - Current hash:
+  "'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M='",
 ];
 export const CSP_DIRECTIVES = {
   "default-src": ["'self'"],