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"