From daae263dd2869cb7193a951597a8c2f10ebbf99f Mon Sep 17 00:00:00 2001
From: maureenlholland <maureen.holland11@gmail.com>
Date: Thu, 9 Jan 2025 14:47:17 -0500
Subject: [PATCH 1/2] Update mdn developer whatsnew page

- Fix regression in text color
- Remove mandala animation (cpu-intensive) and accent colors (distracting)
---
 .../firefox/developer/whatsnew-mdnplus.html   |   8 +-
 .../firefox/developer/whatsnew-mdnplus.scss   | 126 ------------------
 .../js/firefox/developer/whatsnew-mdnplus.js  |  40 ------
 media/static-bundles.json                     |   6 -
 4 files changed, 2 insertions(+), 178 deletions(-)
 delete mode 100644 media/js/firefox/developer/whatsnew-mdnplus.js

diff --git a/bedrock/firefox/templates/firefox/developer/whatsnew-mdnplus.html b/bedrock/firefox/templates/firefox/developer/whatsnew-mdnplus.html
index d63bb5b85d6..edc724ae4a7 100644
--- a/bedrock/firefox/templates/firefox/developer/whatsnew-mdnplus.html
+++ b/bedrock/firefox/templates/firefox/developer/whatsnew-mdnplus.html
@@ -35,8 +35,8 @@ <h1 class="c-mdn-header-title">{{ ftl('developer-mdnplus-more-mdn-your-mdn') }}<
     </div>
 
     <div class="mandala-wrapper">
-      <div id="mandala" class="mandala-container animate-colors" aria-hidden="true">
-        <div class="mandala-translate mandala-rotate">
+      <div id="mandala" class="mandala-container" aria-hidden="true">
+        <div>
           <svg width="675" height="675" viewBox="0 0 675 675" fill="none" xmlns="http://www.w3.org/2000/svg" class="mandala">
             <defs>
               <path d="M337.5,337.5 m-320,0 a320,320 0 1,1 640,0 a320,320 0 1,1 -640,0" id="circle1"></path>
@@ -103,7 +103,3 @@ <h4 class="c-mdn-feature-title">{{ ftl('developer-mdnplus-mdns-entire-library-at
 
 {# Exclude stub attribution for in-product pages: issue 9620 #}
 {% block stub_attribution %}{% endblock %}
-
-{% block js %}
-  {{ js_bundle('firefox_developer_whatsnew_mdnplus') }}
-{% endblock %}
diff --git a/media/css/firefox/developer/whatsnew-mdnplus.scss b/media/css/firefox/developer/whatsnew-mdnplus.scss
index adf358d71a5..b9e3428a9e6 100644
--- a/media/css/firefox/developer/whatsnew-mdnplus.scss
+++ b/media/css/firefox/developer/whatsnew-mdnplus.scss
@@ -19,7 +19,6 @@ $image-path: '/media/protocol/img';
         h3,
         h4 {
             @include font-base;
-            color: $color-black;
         }
     }
 }
@@ -79,131 +78,6 @@ $image-path: '/media/protocol/img';
     transform: translate(12rem, -8rem);
 
     --mandala-primary: #{$color-dark-gray-10};
-    --mandala-accent-1: #{$color-violet-30};
-    --mandala-accent-2: #{$color-yellow-30};
-    --mandala-accent-3: #{$color-green-30};
-    --mandala-accent-4: #{$color-red-20};
-    --mandala-accent-5: #{$color-light-gray-30};
-
-    @keyframes rotation {
-        from { transform: rotate(0deg); }
-        to { transform: rotate(360deg); }
-    }
-
-    @keyframes mandala-color-change {
-        0% {
-            fill: var(--mandala-primary);
-        }
-
-        10% {
-            fill: var(--mandala-primary);
-        }
-
-        15% {
-            fill: var(--mandala-accent-1);
-        }
-
-        20% {
-            fill: var(--mandala-primary);
-        }
-
-        25% {
-            fill: var(--mandala-primary);
-        }
-
-        30% {
-            fill: var(--mandala-accent-2);
-        }
-
-        35% {
-            fill: var(--mandala-primary);
-        }
-
-        40% {
-            fill: var(--mandala-primary);
-        }
-
-        50% {
-            fill: var(--mandala-accent-3);
-        }
-
-        55% {
-            fill: var(--mandala-primary);
-        }
-
-        60% {
-            fill: var(--mandala-primary);
-        }
-
-        65% {
-            fill: var(--mandala-accent-4);
-        }
-
-        70% {
-            fill: var(--mandala-primary);
-        }
-
-        100% {
-            fill: var(--mandala-primary);
-        }
-    }
-
-    &.animated {
-        .mandala-rotate > svg {
-            .mandala-accent-1 {
-                animation: rotation 505s linear infinite;
-            }
-
-            .mandala-accent-2 {
-                animation: rotation 480s linear infinite reverse;
-            }
-
-            .mandala-accent-3 {
-                animation: rotation 515s linear infinite;
-            }
-
-            .mandala-accent-4 {
-                animation: rotation 425s linear infinite reverse;
-            }
-
-            .mandala-accent-5 {
-                animation: rotation 415s linear infinite;
-            }
-        }
-
-        &.animate-colors {
-            svg > text > textPath > tspan {
-                animation: mandala-color-change 50s infinite;
-                animation-timing-function: ease-in-out;
-                fill: var(--mandala-primary);
-            }
-
-            .mandala-accent-1 > textPath > tspan {
-                fill: var(--mandala-accent-1);
-                animation-delay: -15s;
-            }
-
-            .mandala-accent-2 > textPath > tspan {
-                fill: var(--mandala-accent-2);
-                animation-delay: -20s;
-            }
-
-            .mandala-accent-3 > textPath > tspan {
-                fill: var(--mandala-accent-3);
-                animation-delay: -30s;
-            }
-
-            .mandala-accent-4 > textPath > tspan {
-                fill: var(--mandala-accent-4);
-                animation-delay: -5s;
-            }
-
-            .mandala-accent-5 > textPath > tspan {
-                fill: var(--mandala-accent-4);
-                animation-delay: -40s;
-            }
-        }
-    }
 
     svg {
         font-size: 1.5rem;
diff --git a/media/js/firefox/developer/whatsnew-mdnplus.js b/media/js/firefox/developer/whatsnew-mdnplus.js
deleted file mode 100644
index f484faf7823..00000000000
--- a/media/js/firefox/developer/whatsnew-mdnplus.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at https://mozilla.org/MPL/2.0/.
- */
-
-(function () {
-    'use strict';
-
-    var stopAnimTimeout;
-    var mandalaElement = document.getElementById('mandala');
-
-    // Check for support of the Page Visbility API
-    if (typeof document.hidden === 'undefined') {
-        return;
-    }
-
-    // If the page is hidden, stop the mandala.
-    // If the page is visible, animate the mandala.
-    function handleVisibilityChange() {
-        if (document.hidden) {
-            mandalaElement.classList.remove('animated');
-            clearTimeout(stopAnimTimeout);
-        } else {
-            mandalaElement.classList.add('animated');
-            // Stop animating after five minutes
-            stopAnimTimeout = setTimeout(function () {
-                mandalaElement.classList.remove('animated');
-            }, 300000);
-        }
-    }
-
-    document.addEventListener(
-        'visibilitychange',
-        handleVisibilityChange,
-        false
-    );
-
-    window.Mozilla.run(handleVisibilityChange);
-})(window.Mozilla);
diff --git a/media/static-bundles.json b/media/static-bundles.json
index fe4490e39c8..af2ec8a2790 100644
--- a/media/static-bundles.json
+++ b/media/static-bundles.json
@@ -1383,12 +1383,6 @@
       ],
       "name": "about-leadership"
     },
-    {
-      "files": [
-        "js/firefox/developer/whatsnew-mdnplus.js"
-      ],
-      "name": "firefox_developer_whatsnew_mdnplus"
-    },
     {
       "files": [
         "js/base/mozilla-fxa.js",

From bb300398ac476d34c63b69193cd5f38e5f9129fd Mon Sep 17 00:00:00 2001
From: maureenlholland <maureen.holland11@gmail.com>
Date: Thu, 9 Jan 2025 15:21:53 -0500
Subject: [PATCH 2/2] Update MDN features

---
 .../firefox/developer/whatsnew-mdnplus.html          | 12 ++++++------
 .../firefox/whatsnew/whatsnew-developer-mdnplus.ftl  | 12 ++++++++++++
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/bedrock/firefox/templates/firefox/developer/whatsnew-mdnplus.html b/bedrock/firefox/templates/firefox/developer/whatsnew-mdnplus.html
index edc724ae4a7..4c437ebbf22 100644
--- a/bedrock/firefox/templates/firefox/developer/whatsnew-mdnplus.html
+++ b/bedrock/firefox/templates/firefox/developer/whatsnew-mdnplus.html
@@ -71,9 +71,9 @@ <h1 class="c-mdn-header-title">{{ ftl('developer-mdnplus-more-mdn-your-mdn') }}<
       <h2 class="c-mdn-body-title">{{ ftl('developer-mdnplus-whats-included') }}</h2>
       <div class="mzp-l-columns mzp-t-columns-three">
         <div class="c-mdn-feature">
-          <h3 class="c-mdn-feature-pretitle">{{ ftl('developer-mdnplus-notifications') }}</h3>
-          <h4 class="c-mdn-feature-title">{{ ftl('developer-mdnplus-development-in-real-time') }}</h4>
-          <p>{{ ftl('developer-mdnplus-the-web-doesnt-have-a') }}</p>
+          <h3 class="c-mdn-feature-pretitle">{{ ftl('developer-mdnplus-playground') }}</h3>
+          <h4 class="c-mdn-feature-title">{{ ftl('developer-mdnplus-write-test-and-share') }}</h4>
+          <p>{{ ftl('developer-mdnplus-your-playground-to-learn') }}</p>
         </div>
 
         <div class="c-mdn-feature">
@@ -83,9 +83,9 @@ <h4 class="c-mdn-feature-title">{{ ftl('developer-mdnplus-build-your-perfect-lib
         </div>
 
         <div class="c-mdn-feature">
-          <h3 class="c-mdn-feature-pretitle">{{ ftl('developer-mdnplus-mdn-offline') }}</h3>
-          <h4 class="c-mdn-feature-title">{{ ftl('developer-mdnplus-mdns-entire-library-at-your') }}</h4>
-          <p>{{ ftl('developer-mdnplus-taking-your-projects-beyond') }}</p>
+          <h3 class="c-mdn-feature-pretitle">{{ ftl('developer-mdnplus-updates', fallback="developer-mdnplus-notifications") }}</h3>
+          <h4 class="c-mdn-feature-title">{{ ftl('developer-mdnplus-compatibility-changes', fallback="developer-mdnplus-development-in-real-time") }}</h4>
+          <p>{{ ftl('developer-mdnplus-the-web-doesnt-have-a-v2', fallback="developer-mdnplus-the-web-doesnt-have") }}</p>
         </div>
       </div>
     </div>
diff --git a/l10n/en/firefox/whatsnew/whatsnew-developer-mdnplus.ftl b/l10n/en/firefox/whatsnew/whatsnew-developer-mdnplus.ftl
index 5cbc3634183..1024f86bcff 100644
--- a/l10n/en/firefox/whatsnew/whatsnew-developer-mdnplus.ftl
+++ b/l10n/en/firefox/whatsnew/whatsnew-developer-mdnplus.ftl
@@ -17,13 +17,25 @@ developer-mdnplus-support-mdn-and-make = Support { -brand-name-mdn } <em>and</em
 developer-mdnplus-get-started = Get Started
 
 developer-mdnplus-whats-included = What’s included
+developer-mdnplus-updates = Updates
+developer-mdnplus-compatibility-changes = Compatibility changes at a glance.
+developer-mdnplus-the-web-doesnt-have-a-v2 = The Web doesn’t have a changelog, but { -brand-name-mdn } can help. You can personalize and filter compatibility changes based on browsers or the tech category you are interested in whether that is JavaScript, CSS, etc.
+# Obsolete string (expires 2025-03-09)
 developer-mdnplus-notifications = Notifications
+# Obsolete string (expires 2025-03-09)
 developer-mdnplus-development-in-real-time = Development in real time: Get custom alerts
+# Obsolete string (expires 2025-03-09)
 developer-mdnplus-the-web-doesnt-have-a = The Web doesn’t have a changelog, but { -brand-name-mdn } can help. Follow pages and get customizable notifications when documentation changes, CSS features launch, and APIs ship.
 developer-mdnplus-collections = Collections
 developer-mdnplus-build-your-perfect-library = Build your perfect library. Or let us build it for you.
 developer-mdnplus-no-more-haphazard-hunting = No more haphazard hunting through the vast virtual library: unleash your inner curator and collect your favorite articles in one place for convenient consultation.
+developer-mdnplus-playground = Playground
+developer-mdnplus-write-test-and-share = Write,Test and Share your code.
+developer-mdnplus-your-playground-to-learn = Your playground to learn and share your amazing work with the world. By simply logging in, you can now spread your creativity far and wide.
+# Obsolete string (expires 2025-03-09)
 developer-mdnplus-mdn-offline = { -brand-name-mdn } offline
+# Obsolete string (expires 2025-03-09)
 developer-mdnplus-mdns-entire-library-at-your = { -brand-name-mdn }’s entire library at your fingertips: offline
+# Obsolete string (expires 2025-03-09)
 developer-mdnplus-taking-your-projects-beyond = Taking your projects beyond the nearest Wi-Fi signal? Say goodbye to inaccessible pages or cluttered tabs. With { -brand-name-mdn-plus }, have the fully navigable resources of { -brand-name-mdn } at your disposal even when offline.
 developer-mdnplus-resources-for-developers = Resources for Developers, by Developers.