diff --git a/bedrock/privacy/templates/privacy/base-protocol.html b/bedrock/privacy/templates/privacy/base-protocol.html
index 2b9d10df04b..8e5559e35a5 100644
--- a/bedrock/privacy/templates/privacy/base-protocol.html
+++ b/bedrock/privacy/templates/privacy/base-protocol.html
@@ -71,10 +71,12 @@
{% block title %}{% endblock %}
{% endif %}
{% endblock %}
-
+ {% block sidemenu %}
+
+ {% endblock %}
{% endblock %}
diff --git a/bedrock/privacy/templates/privacy/notices/firefox-tos.html b/bedrock/privacy/templates/privacy/notices/firefox-tos.html
new file mode 100644
index 00000000000..14177243e05
--- /dev/null
+++ b/bedrock/privacy/templates/privacy/notices/firefox-tos.html
@@ -0,0 +1,39 @@
+{#
+ 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/.
+#}
+
+{% extends "privacy/notices/base-notice-headings.html" %}
+
+{% block site_css %}
+ {% if switch('m24-website-refresh') %}
+ {{ css_bundle('m24-root') }}
+ {% endif %}
+ {{ css_bundle('protocol-firefox') }}
+{% endblock %}
+
+{% block page_css %}
+ {{ css_bundle('privacy_firefox_tos') }}
+{% endblock %}
+
+{% set body_id = "privacy_tos" %}
+
+{% block site_header %}{% endblock %}
+
+{% block sidemenu %}{% endblock %}
+
+{% block article_header_logo %}{% endblock %}
+
+{% block js %}
+ {{ super() }}
+ {{ js_bundle('privacy_firefox') }}
+{% endblock %}
+
+{# disable GA on Fx Privacy Notice. Bug 1576673 #}
+{% block google_analytics %}{% endblock %}
+
+{# Exclude stub attribution for in-product pages: issus 9620 #}
+{% block stub_attribution %}{% endblock %}
+
+{% block site_footer %}{% endblock %}
diff --git a/bedrock/privacy/views.py b/bedrock/privacy/views.py
index 6c2c97d0949..9c2b6b0c170 100644
--- a/bedrock/privacy/views.py
+++ b/bedrock/privacy/views.py
@@ -40,8 +40,13 @@ def get_legal_doc(self):
class FirefoxPrivacyDocView(PrivacyDocView):
def get_legal_doc(self):
doc = super().get_legal_doc()
+ variant = self.request.GET.get("v", None)
+
if len(doc["content"].select(".privacy-header-firefox")) > 0:
- self.template_name = "privacy/notices/firefox.html"
+ if variant == "product":
+ self.template_name = "privacy/notices/firefox-tos.html"
+ else:
+ self.template_name = "privacy/notices/firefox.html"
else:
self.template_name = "privacy/notices/firefox-old-style-notice.html"
return doc
diff --git a/media/css/privacy/privacy-firefox-tos.scss b/media/css/privacy/privacy-firefox-tos.scss
new file mode 100644
index 00000000000..4fbcb1bfbd0
--- /dev/null
+++ b/media/css/privacy/privacy-firefox-tos.scss
@@ -0,0 +1,186 @@
+// 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/.
+
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
+@use '~@mozilla-protocol/core/protocol/css/includes/mixins/details';
+
+$border: 2px solid $color-marketing-gray-20;
+
+// narrow top / bottom padding for modal display
+#outer-wrapper > .mzp-l-content {
+ padding-bottom: $spacing-xl;
+ padding-top: $spacing-xl;
+}
+
+// narrow max-width for readability
+@media #{$mq-lg} {
+ .mzp-l-main {
+ max-width: 640px;
+ margin: 0 auto;
+ }
+}
+
+// * -------------------------------------------------------------------------- */
+// Policy header
+
+.privacy-title {
+ margin-bottom: $spacing-lg;
+
+ h1 {
+ @include text-title-xs;
+ font-weight: bold;
+ }
+
+ a {
+ color: inherit;
+ text-decoration: none;
+ }
+}
+
+// * -------------------------------------------------------------------------- */
+// Policy header intro
+
+.privacy-lead-in {
+ border-bottom: $border;
+ clear: both;
+ margin-bottom: $layout-sm;
+ padding-bottom: $layout-xs;
+
+ h2 {
+ @include text-title-xs;
+ margin-top: $spacing-2xl;
+ }
+}
+
+// * -------------------------------------------------------------------------- */
+// Main policy content
+
+.privacy-body {
+ > div > section > section {
+ border-bottom: $border;
+ }
+
+ h2 {
+ @include text-title-xs;
+ margin-bottom: $layout-sm;
+ }
+
+ h3 {
+ @include text-body-lg;
+ margin: $layout-sm 0;
+ }
+
+ h4 {
+ @include text-body-md;
+ margin: $layout-sm 0;
+ }
+
+ hr {
+ display: none;
+ }
+}
+
+// * -------------------------------------------------------------------------- */
+// Privacy choices widget
+
+.data-choices {
+ @include clearfix;
+ background-color: $color-marketing-gray-20;
+ border-radius: $border-radius-md;
+ margin-top: $spacing-xl;
+ padding: $spacing-sm;
+ position: relative;
+ text-align: center;
+
+ p {
+ @include text-body-md;
+ display: inline-block;
+ margin: 0;
+ padding: $spacing-sm 0;
+ }
+
+ .mzp-c-button {
+ display: block;
+ margin: $spacing-md auto 0;
+ }
+
+ @media #{$mq-md} {
+ @include grid-column-gap($spacing-lg);
+ display: grid;
+ grid-template-columns: 4fr 1fr;
+
+ @include bidi(((text-align, left, right),));
+
+ .mzp-c-button {
+ margin: 0;
+ }
+ }
+}
+
+// * -------------------------------------------------------------------------- */
+// Policy footer
+
+.privacy-footnote {
+ @include text-body-md;
+ border-top: $border;
+ margin-top: $spacing-2xl;
+ padding: $spacing-2xl 0;
+
+ h2 {
+ @include text-title-xs;
+ }
+
+ h3 {
+ @include visually-hidden;
+ }
+}
+
+// * -------------------------------------------------------------------------- */
+// Summary and details widget
+
+.format-headings .privacy-body {
+ @include details;
+
+ .is-summary {
+ button {
+ @include summary;
+ @include bidi(((padding-left, 0, padding-right, 0),));
+ }
+
+ button[aria-expanded='true']::before {
+ @include summary-open;
+ }
+
+ + div {
+ margin-top: $spacing-sm * -1;
+ margin-bottom: $spacing-xl;
+ }
+ }
+}
+
+.format-paragraphs .privacy-body {
+ @include details;
+
+ .is-summary {
+ button {
+ padding: 0;
+
+ &::after {
+ color: $color-link;
+ content: attr(data-open);
+ margin-left: 0.5ex;
+ text-decoration: underline;
+ }
+ }
+
+ button[aria-expanded='true']::after {
+ content: attr(data-close);
+ }
+
+ + div {
+ margin-top: $spacing-sm * -1;
+ margin-bottom: $spacing-xl;
+ }
+ }
+}
diff --git a/media/static-bundles.json b/media/static-bundles.json
index 863e8488944..55d5479c595 100644
--- a/media/static-bundles.json
+++ b/media/static-bundles.json
@@ -675,6 +675,12 @@
],
"name": "privacy_protocol"
},
+ {
+ "files": [
+ "css/privacy/privacy-firefox-tos.scss"
+ ],
+ "name": "privacy_firefox_tos"
+ },
{
"files": [
"css/firefox/facebook-container.scss"