From fa851ee8576d2ea12449f1dfb5ce7695d85dcb13 Mon Sep 17 00:00:00 2001 From: Alex Gibson Date: Wed, 25 Jul 2018 02:13:46 +0100 Subject: [PATCH] Update @mozilla-protocol/core to v2.0.1 (#5927) --- bedrock/base/templates/base-protocol.html | 8 ++ .../includes/protocol/lang-switcher.html | 17 +++++ .../includes/protocol/site-footer.html | 75 +++++++++++++++++++ .../mozorg/templates/mozorg/home/home-en.html | 12 +-- media/css/mozorg/home/home-2018.scss | 40 ++++------ media/css/protocol/components/_footer.scss | 14 ++-- .../css/protocol/components/_global-nav.scss | 24 +++--- media/css/protocol/components/_masthead.scss | 34 ++++----- media/css/protocol/protocol.scss | 1 - media/js/base/protocol/init-lang-switcher.js | 20 +++++ media/js/mozorg/home/home.js | 1 + media/static-bundles.json | 8 ++ package.json | 2 +- tests/functional/test_l10n.py | 4 +- yarn.lock | 6 +- 15 files changed, 193 insertions(+), 73 deletions(-) create mode 100644 bedrock/base/templates/includes/protocol/lang-switcher.html create mode 100644 bedrock/base/templates/includes/protocol/site-footer.html create mode 100644 media/js/base/protocol/init-lang-switcher.js diff --git a/bedrock/base/templates/base-protocol.html b/bedrock/base/templates/base-protocol.html index 05cb72d0c1..4da2fee054 100644 --- a/bedrock/base/templates/base-protocol.html +++ b/bedrock/base/templates/base-protocol.html @@ -4,6 +4,10 @@ {{ css_bundle('protocol-core') }} {% endblock %} +{% block old_ie_styles %} + {{ css_bundle('protocol-oldIE') }} +{% endblock %} + {% block tabzilla_tab %}{% endblock %} {% block site_header %} @@ -15,6 +19,10 @@ {% endif %} {% endblock %} +{% block site_footer %} + {% include 'includes/protocol/site-footer.html' %} +{% endblock %} + {% block site_js %} {{ js_bundle('common-protocol') }} diff --git a/bedrock/base/templates/includes/protocol/lang-switcher.html b/bedrock/base/templates/includes/protocol/lang-switcher.html new file mode 100644 index 0000000000..db6f195024 --- /dev/null +++ b/bedrock/base/templates/includes/protocol/lang-switcher.html @@ -0,0 +1,17 @@ +{# 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 http://mozilla.org/MPL/2.0/. -#} + + {% if translations|length > 1 %} +
+ + + +
+ {% endif %} diff --git a/bedrock/base/templates/includes/protocol/site-footer.html b/bedrock/base/templates/includes/protocol/site-footer.html new file mode 100644 index 0000000000..2041117c10 --- /dev/null +++ b/bedrock/base/templates/includes/protocol/site-footer.html @@ -0,0 +1,75 @@ +{# 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 http://mozilla.org/MPL/2.0/. -#} + + diff --git a/bedrock/mozorg/templates/mozorg/home/home-en.html b/bedrock/mozorg/templates/mozorg/home/home-en.html index f97719822a..dbb8d1b253 100644 --- a/bedrock/mozorg/templates/mozorg/home/home-en.html +++ b/bedrock/mozorg/templates/mozorg/home/home-en.html @@ -170,9 +170,9 @@
- +
{{ high_res_img('home/2018/billboard-more-power.png', {'alt': '', 'class': 'mzp-c-billboard-image', 'width': '346', 'height': '346'}) }} - +

{{ _('More power to you.') }}

@@ -293,9 +293,9 @@
- +
{{ high_res_img('home/2018/billboard-healthy-internet.png', {'alt': '', 'class': 'mzp-c-billboard-image', 'width': '346', 'height': '346'}) }} - +

{{ _('Support a healthy internet.') }}

@@ -374,9 +374,9 @@
- +
{{ high_res_img('home/2018/billboard-open-minds.png', {'alt': '', 'class': 'mzp-c-billboard-image', 'width': '346', 'height': '346'}) }} - +

{{ _('Open source.
Open minds.') }}

diff --git a/media/css/mozorg/home/home-2018.scss b/media/css/mozorg/home/home-2018.scss index 4d07a92f20..c54b8dd781 100644 --- a/media/css/mozorg/home/home-2018.scss +++ b/media/css/mozorg/home/home-2018.scss @@ -6,11 +6,12 @@ $font-path: '/media/fonts'; $image-path: '/media/protocol/img'; @import "../../../../node_modules/@mozilla-protocol/core/protocol/css/includes/lib"; -@import "../../../../node_modules/@mozilla-protocol/core/protocol/css/components/card"; @import "../../../../node_modules/@mozilla-protocol/core/protocol/css/components/billboard"; @import "../../../../node_modules/@mozilla-protocol/core/protocol/css/components/button"; -@import "../../../../node_modules/@mozilla-protocol/core/protocol/css/components/newsletter-form"; +@import "../../../../node_modules/@mozilla-protocol/core/protocol/css/components/card"; +@import "../../../../node_modules/@mozilla-protocol/core/protocol/css/components/footer"; @import "../../../../node_modules/@mozilla-protocol/core/protocol/css/components/modal"; +@import "../../../../node_modules/@mozilla-protocol/core/protocol/css/components/newsletter-form"; @import "../../../../node_modules/@mozilla-protocol/core/protocol/css/templates/card-layout"; @import '../../hubs/nav-download-button-remove'; @@ -50,7 +51,7 @@ $callout-blue: #0060df; font-weight: normal; line-height: 40px; margin-bottom: $margin-sm; - padding-top: $padding-xxl; + padding-top: $padding-2xl; } .primary-title-sub { @@ -58,15 +59,15 @@ $callout-blue: #0060df; margin-bottom: $margin-sm; } -@media #{$media-md} { +@media #{$mq-md} { .primary-wrapper { padding-bottom: 40px; } .primary-title { background-position: top left; - margin-bottom: $margin-xxl; - padding-left: $padding-xxl; + margin-bottom: $margin-2xl; + padding-left: $padding-2xl; padding-top: 0; text-align: left; line-height: 40px; @@ -89,7 +90,7 @@ $callout-blue: #0060df; @include light-links; } -@media #{$media-md} { +@media #{$mq-md} { #download-primary { margin-top: 0; position: absolute; @@ -103,8 +104,7 @@ $callout-blue: #0060df; } } - -@media #{$media-lg} { +@media #{$mq-lg} { .download-firefox-primary-cta { border-top: 100px solid #fff; position: relative; @@ -169,7 +169,7 @@ $callout-blue: #0060df; bottom: 0; cursor: pointer; overflow: hidden; - padding: 0 0 0 $padding-xxl; + padding: 0 0 0 $padding-2xl; position: absolute; right: 0; top: 0; @@ -189,7 +189,7 @@ $callout-blue: #0060df; } } -@media #{$media-md} { +@media #{$mq-md} { .download-firefox-sticky-cta { .primary-title { float: left; @@ -230,7 +230,7 @@ $callout-blue: #0060df; } } -@media #{$media-lg} { +@media #{$mq-lg} { .download-firefox-sticky-cta { .primary-desc-sub { display: block; @@ -286,7 +286,7 @@ $callout-blue: #0060df; } } - @media #{$media-md} { + @media #{$mq-md} { margin: $margin-xl 0 0; padding-top: $padding-lg; } @@ -295,7 +295,6 @@ $callout-blue: #0060df; /* -------------------------------------------------------------------------- */ // Secondary Firefox CTA section. - .download-firefox-secondary-cta { background-color: $callout-blue; color: #fff; @@ -326,7 +325,7 @@ $callout-blue: #0060df; margin-top: $margin-lg; } -@media #{$media-md} { +@media #{$mq-md} { .secondary-content { text-align: left; width: 410px; @@ -354,24 +353,17 @@ $callout-blue: #0060df; top: 55px; left: 495px; - @media #{$media-high-res} { + @media #{$mq-high-res} { background-image: url('/media/img/home/2018/browser-high-res.png'); } } } } -@media #{$media-xl} { +@media #{$mq-xl} { .download-firefox-secondary-cta { &:before { left: calc(50% - 208px); } } } - -/* -------------------------------------------------------------------------- */ -// Custom modal styles - -.mzp-c-modal video { - width: 100%; // fixed in next Protocol release https://github.com/mozilla/protocol/pull/135 -} diff --git a/media/css/protocol/components/_footer.scss b/media/css/protocol/components/_footer.scss index 916b5d44cb..06dd7301c3 100644 --- a/media/css/protocol/components/_footer.scss +++ b/media/css/protocol/components/_footer.scss @@ -48,7 +48,7 @@ @include border-box; @include clearfix; margin: 0 auto; - min-width: $width-content-xs; + min-width: $content-xs; } section { @@ -59,16 +59,16 @@ @include border-box; @include clearfix; margin: 0 auto; - max-width: $width-content-max; - min-width: $width-content-xs; + max-width: $content-max; + min-width: $content-xs; padding: $layout-xs; position: relative; - @media #{$media-md} { + @media #{$mq-md} { padding: $layout-xs $layout-lg; } - @media #{$media-lg} { + @media #{$mq-lg} { padding: $layout-xs $layout-xl; } } @@ -172,7 +172,7 @@ } } - @media #{$media-md} { + @media #{$mq-md} { .primary { .logo, section { @@ -206,7 +206,7 @@ } [dir='rtl'] #colophon { - @media #{$media-md} { + @media #{$mq-md} { .logo, section, .small-links, diff --git a/media/css/protocol/components/_global-nav.scss b/media/css/protocol/components/_global-nav.scss index 352b511796..22ffd188de 100644 --- a/media/css/protocol/components/_global-nav.scss +++ b/media/css/protocol/components/_global-nav.scss @@ -113,7 +113,7 @@ $color-button-green: #16da00; height: 25px; } - @media #{$media-lg} { + @media #{$mq-lg} { margin-left: 17px; a { @@ -132,11 +132,11 @@ $color-button-green: #16da00; padding: 10px 0; position: relative; - @media #{$media-md} { + @media #{$mq-md} { padding-top: 25px; } - @media #{$media-lg} { + @media #{$mq-lg} { margin-left: 28px; } } @@ -170,18 +170,18 @@ $color-button-green: #16da00; } } - @media #{$media-md} { + @media #{$mq-md} { @include border-box; display: block; margin-left: 20px; width: calc(100% - 370px); } - @media #{$media-lg} { + @media #{$mq-lg} { width: calc(100% - 480px); } - @media #{$media-xl} { + @media #{$mq-xl} { margin-left: 40px; &> li { @@ -201,8 +201,8 @@ $color-button-green: #16da00; } } - @media #{$media-lg} { - max-width: $width-content-max; + @media #{$mq-lg} { + max-width: $content-max; margin: 0 auto; } } @@ -296,7 +296,7 @@ $color-button-green: #16da00; transform: translate(7px, 7px) rotate(45deg); } - @media #{$media-lg} { + @media #{$mq-lg} { .rect { transition: transform .12s ease-in-out; @@ -571,7 +571,7 @@ html.moz-nav-open .moz-global-nav-page-mask { } } - @media #{$media-md} { + @media #{$mq-md} { margin-top: 5px; margin-right: 64px; width: 200px; @@ -581,7 +581,7 @@ html.moz-nav-open .moz-global-nav-page-mask { } } - @media #{$media-lg} { + @media #{$mq-lg} { margin-right: 95px; } @@ -672,7 +672,7 @@ html.moz-nav-open { visibility: hidden; } - @media #{$media-lg} { + @media #{$mq-lg} { html.moz-nav-open { height: 100%; diff --git a/media/css/protocol/components/_masthead.scss b/media/css/protocol/components/_masthead.scss index d1644dc835..da04df2e9f 100644 --- a/media/css/protocol/components/_masthead.scss +++ b/media/css/protocol/components/_masthead.scss @@ -18,16 +18,16 @@ $color-button-green: #16da00; @include border-box; @include clearfix; margin: 0 auto; - max-width: $width-content-max; - min-width: $width-content-xs; + max-width: $content-max; + min-width: $content-xs; padding: $layout-xs; position: relative; - @media #{$media-md} { + @media #{$mq-md} { padding: $layout-xs $layout-lg; } - @media #{$media-lg} { + @media #{$mq-lg} { padding: $layout-xs $layout-xl; } } @@ -47,7 +47,7 @@ $color-button-green: #16da00; height: 30px; } - @media #{$media-md} { + @media #{$mq-md} { float: left; position: relative; width: 94px; @@ -112,7 +112,7 @@ $color-button-green: #16da00; a { background: #fff; - color: $color-primary; + color: $color-black; display: block; padding: 10px 20px; text-decoration: none; @@ -139,7 +139,7 @@ $color-button-green: #16da00; display: none; } -@media #{$media-md} { +@media #{$mq-md} { .masthead-nav-main { float: left; @@ -194,7 +194,7 @@ $color-button-green: #16da00; } } -@media #{$media-lg} { +@media #{$mq-lg} { .masthead-nav-main { width: 60%; @@ -204,7 +204,7 @@ $color-button-green: #16da00; } } -@media #{$media-xl} { +@media #{$mq-xl} { .masthead-nav-main { margin: 0 0 0 40px; width: 70%; @@ -217,7 +217,7 @@ $color-button-green: #16da00; // flexbox layout for savvy browsers to push nav items to the right @supports (display: flex) { - @media #{$media-md} { + @media #{$mq-md} { .nav-main-menu, .js .nav-main-menu { @include flexbox; @@ -240,7 +240,7 @@ $color-button-green: #16da00; border-right: none; border-left: 6px solid #000; - @media #{$media-md} { + @media #{$mq-md} { border: 0; } } @@ -251,24 +251,24 @@ $color-button-green: #16da00; padding-left: 0; padding-right: 5px; - @media #{$media-md} { + @media #{$mq-md} { padding-right: 10px; } - @media #{$media-xl} { + @media #{$mq-xl} { padding-right: 20px; } } } - @media #{$media-md} { + @media #{$mq-md} { .masthead-logo, .masthead-nav-main { float: right; } } - @media #{$media-xl} { + @media #{$mq-xl} { .masthead-nav-main { margin: 0 40px 0 0; @@ -321,7 +321,7 @@ $color-button-green: #16da00; } } - @media #{$media-lg} { + @media #{$mq-lg} { display: block; width: 200px; @@ -341,7 +341,7 @@ html[dir="rtl"] { #nav-download-firefox { float: left; - @media #{$media-md} { + @media #{$mq-md} { .download-link { float: left; diff --git a/media/css/protocol/protocol.scss b/media/css/protocol/protocol.scss index 24e7da5070..3ff033bf72 100644 --- a/media/css/protocol/protocol.scss +++ b/media/css/protocol/protocol.scss @@ -10,5 +10,4 @@ $image-path: '/media/protocol/img'; // TODO port these components to Protocol. @import "components/global-nav"; @import "components/masthead"; -@import "components/footer"; @import "components/download-button"; diff --git a/media/js/base/protocol/init-lang-switcher.js b/media/js/base/protocol/init-lang-switcher.js new file mode 100644 index 0000000000..9852e3a0b7 --- /dev/null +++ b/media/js/base/protocol/init-lang-switcher.js @@ -0,0 +1,20 @@ +/* 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 http://mozilla.org/MPL/2.0/. */ + +/** + * Initialize Protocol language switcher. + */ +(function() { + if (typeof Mozilla === 'undefined' || typeof Mozilla.LangSwitcher === 'undefined') { + return; + } + + Mozilla.LangSwitcher.init(function(previousLanguage, newLanguage) { + window.dataLayer.push({ + 'event': 'change-language', + 'languageSelected': newLanguage, + 'previousLanguage': previousLanguage + }); + }); +})(); diff --git a/media/js/mozorg/home/home.js b/media/js/mozorg/home/home.js index 1e65200656..fd9f5a4d29 100644 --- a/media/js/mozorg/home/home.js +++ b/media/js/mozorg/home/home.js @@ -62,6 +62,7 @@ Mozilla.Modal.createModal(this, content, { title: title, + className: 'mzp-has-media', onCreate: function() { try { video.load(); diff --git a/media/static-bundles.json b/media/static-bundles.json index 01569a1977..4892cf6c54 100644 --- a/media/static-bundles.json +++ b/media/static-bundles.json @@ -335,6 +335,12 @@ ], "name": "oldIE-pebbles" }, + { + "files": [ + "css/protocol/oldIE.scss" + ], + "name": "protocol-oldIE" + }, { "files": [ "css/legal/legal.less", @@ -1402,6 +1408,8 @@ { "files": [ "js/libs/jquery-3.2.1.min.js", + "protocol/js/protocol-lang-switcher.js", + "js/base/protocol/init-lang-switcher.js", "js/base/mozilla-utils.js", "js/base/mozilla-client.js", "js/base/mozilla-image-helper.js", diff --git a/package.json b/package.json index adb25f2640..153d222757 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "Making mozilla.org awesome, one pebble at a time", "private": true, "dependencies": { - "@mozilla-protocol/core": "1.0.1", + "@mozilla-protocol/core": "2.0.1", "ansi-colors": "^1.1.0", "clean-css-cli": "4.0.5", "del": "^3.0.0", diff --git a/tests/functional/test_l10n.py b/tests/functional/test_l10n.py index 48b7b35c86..2c3f040a3c 100644 --- a/tests/functional/test_l10n.py +++ b/tests/functional/test_l10n.py @@ -6,12 +6,12 @@ import random import pytest -from pages.home import HomePage +from pages.firefox.new.download import DownloadPage @pytest.mark.nondestructive def test_change_language(base_url, selenium): - page = HomePage(selenium, base_url).open() + page = DownloadPage(selenium, base_url).open() initial = page.footer.language # avoid selecting the same language or locales that have homepage redirects excluded = [initial, 'ja', 'ja-JP-mac', 'zh-CN'] diff --git a/yarn.lock b/yarn.lock index 333e0b6060..854a47cfc4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -19,9 +19,9 @@ normalize-path "^2.0.1" through2 "^2.0.3" -"@mozilla-protocol/core@1.0.1": - version "1.0.1" - resolved "https://registry.yarnpkg.com/@mozilla-protocol/core/-/core-1.0.1.tgz#b3c261d2bdef5bfff614d6a6caca2cb4c806310c" +"@mozilla-protocol/core@2.0.1": + version "2.0.1" + resolved "https://registry.yarnpkg.com/@mozilla-protocol/core/-/core-2.0.1.tgz#5ccc15c6212066aba8a7ccfe68fd9e0ade11c84f" JSONStream@^0.8.4: version "0.8.4"