Firefox privacy notice for ToS (Fixes mozilla#15872)

bedrock/privacy/templates/privacy/base-protocol.html

@@ -71,10 +71,12 @@ <h1 itemprop="name">{% block title %}{% endblock %}</h1>
     {% endif %}
     {% endblock %}
   </main>
-  <aside class="mzp-l-sidebar">
-    {{ sidemenu_lists([navigation_bar], body_id) }}
-    {% block side_extra %}{% endblock %}
-  </aside>
+  {% block sidemenu %}
+    <aside class="mzp-l-sidebar">
+      {{ sidemenu_lists([navigation_bar], body_id) }}
+      {% block side_extra %}{% endblock %}
+    </aside>
+  {% endblock %}
 </div>
 {% endblock %}
 

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 %}

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

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;
+        }
+    }
+}

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"