Firefox privacy notice and legal terms for ToS (Fixes mozilla#15872)

bedrock/legal/templates/legal/terms/firefox-tos.html

@@ -0,0 +1,33 @@
+{#
+ 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 "legal/docs-base.html" %}
+
+{% block page_title %}{{ ftl('legal-firefox-rights') }}{% endblock %}
+
+{% block site_css %}
+  {% if switch('m24-website-refresh') %}
+    {{ css_bundle('m24-root') }}
+  {% endif %}
+  {{ css_bundle('protocol-firefox') }}
+{% endblock %}
+
+{% block page_css %}
+  {{ css_bundle('legal-terms-firefox-tos') }}
+{% endblock %}
+
+{% block site_header %}{% endblock %}
+
+{% block side_nav %}{% endblock %}
+
+{# disable GA on Fx Privacy Notice. Bug 1576673 #}
+{% block google_analytics %}{% endblock %}
+{% block glean %}{% endblock %}
+
+{# Exclude stub attribution for in-product pages: issus 9620 #}
+{% block stub_attribution %}{% endblock %}
+
+{% block site_footer %}{% endblock %}

bedrock/legal/urls.py

@@ -28,7 +28,7 @@
     page("terms/builders-challenge/", "legal/terms/builders-challenge.html"),
     path(
         "terms/firefox/",
-        LegalDocView.as_view(template_name="legal/terms/firefox.html", legal_doc_name="firefox_about_rights"),
+        views.FirefoxTermsOfServiceDocView.as_view(legal_doc_name="firefox_about_rights"),
         name="legal.terms.firefox",
     ),
     path(

bedrock/legal/views.py

@@ -10,13 +10,25 @@
 
 from bedrock.base.urlresolvers import reverse
 from bedrock.legal.forms import FraudReportForm
+from bedrock.legal_docs.views import LegalDocView
 from lib import l10n_utils
 
 FRAUD_REPORT_EMAIL_FROM = settings.DEFAULT_FROM_EMAIL
 FRAUD_REPORT_EMAIL_SUBJECT = "New trademark infringement report: %s; %s"
 FRAUD_REPORT_EMAIL_TO = ["[email protected]"]
 
 
+class FirefoxTermsOfServiceDocView(LegalDocView):
+    def get_template_names(self):
+        variant = self.request.GET.get("v", None)
+        template_name = "legal/terms/firefox.html"
+
+        if variant == "product":
+            template_name = "legal/terms/firefox-tos.html"
+
+        return [template_name]
+
+
 def submit_form(request, form):
     form_submitted = True
 

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,40 @@
+{#
+ 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 %}
+{% block glean %}{% endblock %}
+
+{# Exclude stub attribution for in-product pages: issus 9620 #}
+{% block stub_attribution %}{% endblock %}
+
+{% block site_footer %}{% endblock %}

bedrock/privacy/templates/privacy/notices/firefox.html

@@ -17,6 +17,7 @@
 
 {# disable GA on Fx Privacy Notice. Bug 1576673 #}
 {% block google_analytics %}{% endblock %}
+{% block glean %}{% endblock %}
 
 {# Exclude stub attribution for in-product pages: issus 9620 #}
 {% block stub_attribution %}{% 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/legal/legal-terms-firefox-tos.scss

@@ -0,0 +1,48 @@
+// 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 *;
+
+// 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;
+    }
+}
+
+// manual styling for markdown content.
+.article-body {
+    h1 {
+        @include text-title-sm;
+    }
+
+    h2,
+    h3,
+    h4 {
+        @include text-title-xs;
+    }
+
+    blockquote {
+        @include text-body-lg;
+    }
+
+    ul {
+        list-style: disc;
+    }
+
+    ol {
+        list-style: decimal;
+    }
+
+    li {
+        margin: $spacing-sm $spacing-lg;
+    }
+}

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