From d08bd22c02035bde6328648218b2f9484fb6708d Mon Sep 17 00:00:00 2001 From: Stephanie Hobson Date: Tue, 19 Mar 2024 17:32:16 -0700 Subject: [PATCH] Simplify dev edition product, firstrun, and whatsnew pages (Fix #14243 Fix #14244 ) (#14314) * Simplify dev edition product, firstrun, and whatsnew pages We are simplifying these pages to be closer to base protocol in preparation for upcoming -design system changes - Remove references to features being "new" - Remove custom styles sheets for all dev edition page includes - Change icon colours to match dev edition pallet - Convert highlights to card component - Convert features to use picto component - Convert newsletter to use split component - Generic whats new page: - Add link to release notes - Remove feature list and replace with link to the docs - Darker theme - Add MDN component --- .../templates/firefox/developer/firstrun.html | 25 +- .../developer/includes/alt-newsletter.html | 40 ++- .../developer/includes/arrow-right.svg | 3 + .../firefox/developer/includes/features.html | 339 +++++++++++------- .../developer/includes/for-developers.html | 6 +- .../developer/includes/highlights.html | 134 +++---- .../developer/includes/intro-features.html | 61 +++- .../developer/includes/mdn-features.html | 30 ++ .../firefox/developer/includes/nightly.html | 1 + .../templates/firefox/developer/index.html | 83 +++-- .../templates/firefox/developer/whatsnew.html | 45 +-- l10n/en/firefox/developer.ftl | 28 +- l10n/en/firefox/installer-help.ftl | 4 +- .../whatsnew/whatsnew-developer-mdnplus.ftl | 2 +- media/css/firefox/developer/developer.scss | 109 +++--- .../firefox/developer/includes/engage.scss | 57 --- .../firefox/developer/includes/features.scss | 36 -- .../developer/includes/gallery-grid.scss | 117 ------ .../developer/includes/highlights.scss | 12 - .../css/firefox/developer/includes/intro.scss | 74 ---- .../developer/includes/newsletter.scss | 111 ------ .../developer/includes/performance.scss | 11 - .../img/firefox/developer/feature-console.svg | 15 +- .../firefox/developer/feature-debugger.svg | 12 +- .../firefox/developer/feature-inspector.svg | 16 +- .../img/firefox/developer/feature-memory.svg | 23 +- .../img/firefox/developer/feature-network.svg | 12 +- .../firefox/developer/feature-performance.svg | 20 +- .../developer/feature-responsive-mode.svg | 22 +- .../img/firefox/developer/feature-storage.svg | 16 +- .../developer/feature-style-editor.svg | 10 +- .../developer/feature-visual-editing.svg | 20 +- media/img/firefox/developer/mail.svg | 10 +- media/img/logos/mdn/mdn-wordmark-white.svg | 19 + 34 files changed, 701 insertions(+), 822 deletions(-) create mode 100644 bedrock/firefox/templates/firefox/developer/includes/arrow-right.svg create mode 100644 bedrock/firefox/templates/firefox/developer/includes/mdn-features.html delete mode 100644 media/css/firefox/developer/includes/engage.scss delete mode 100644 media/css/firefox/developer/includes/features.scss delete mode 100644 media/css/firefox/developer/includes/gallery-grid.scss delete mode 100644 media/css/firefox/developer/includes/highlights.scss delete mode 100644 media/css/firefox/developer/includes/intro.scss delete mode 100644 media/css/firefox/developer/includes/newsletter.scss delete mode 100644 media/css/firefox/developer/includes/performance.scss create mode 100644 media/img/logos/mdn/mdn-wordmark-white.svg diff --git a/bedrock/firefox/templates/firefox/developer/firstrun.html b/bedrock/firefox/templates/firefox/developer/firstrun.html index 3b7cc766fb..dbbd4953b8 100644 --- a/bedrock/firefox/templates/firefox/developer/firstrun.html +++ b/bedrock/firefox/templates/firefox/developer/firstrun.html @@ -26,27 +26,22 @@ {% block content %}
-
-
-
-

- {{ ftl('firefox-developer-welcome-to-firefox-browser', fallback='firefox-developer-welcome-to-the-all-new') }} -

-

{{ ftl('firefox-developer-firefox-has-been-rebuilt') }}

- - {% include '/firefox/developer/includes/intro-features.html' %} -
+
+ +

+ {{ ftl('firefox-developer-welcome-to-firefox-browser', fallback='firefox-developer-welcome-to-the-all-new') }} +

- {% include '/firefox/developer/includes/alt-newsletter.html' %} + {% with hide_heading=True %} + {% include '/firefox/developer/includes/features.html' %} + {% endwith %} {% include '/firefox/developer/includes/highlights.html' %} - {% include '/firefox/developer/includes/for-developers.html' %} + {% include '/firefox/developer/includes/alt-newsletter.html' %} - {% include '/firefox/developer/includes/features.html' %} - -
+
{% include '/firefox/developer/includes/engage.html' %}
diff --git a/bedrock/firefox/templates/firefox/developer/includes/alt-newsletter.html b/bedrock/firefox/templates/firefox/developer/includes/alt-newsletter.html index f5eb64c02b..92cf869eb5 100644 --- a/bedrock/firefox/templates/firefox/developer/includes/alt-newsletter.html +++ b/bedrock/firefox/templates/firefox/developer/includes/alt-newsletter.html @@ -4,19 +4,27 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/. #} -
-
- {% if LANG.startswith('en-') %} - {{ email_newsletter_form( - 'app-dev', - title='Mozilla Developer Newsletter', - desc='Get developer news, tricks and resources
sent straight to your inbox.'|safe, - button_class='mzp-t-product mzp-t-lg', - include_language=False) }} - {% else %} - {{ email_newsletter_form( - spinner_color='#fff', - button_class='mzp-c-button mzp-t-product mzp-t-lg') }} - {% endif %} -
-
+{% from "macros-protocol.html" import split with context %} + +{% call split( + block_id='newsletter', + image=resp_img('img/firefox/developer/mail.svg', optional_attributes={ + 'width': '200', + 'loading': 'lazy' + }), + block_class='mzp-l-split-reversed mzp-l-split-body-wide mzp-t-content-lg mzp-l-split-center-on-sm-md', + media_class='mzp-l-split-h-center' +) %} + {% if LANG.startswith('en-') %} + {{ email_newsletter_form( + 'app-dev', + title='Mozilla Developer Newsletter', + desc='Get developer news, tricks and resources sent straight to your inbox.'|safe, + button_class='mzp-t-product mzp-t-lg', + include_language=False) }} + {% else %} + {{ email_newsletter_form( + spinner_color='#0c99d5', + button_class='mzp-c-button mzp-t-product mzp-t-lg') }} + {% endif %} +{% endcall %} diff --git a/bedrock/firefox/templates/firefox/developer/includes/arrow-right.svg b/bedrock/firefox/templates/firefox/developer/includes/arrow-right.svg new file mode 100644 index 0000000000..97bcac1d2f --- /dev/null +++ b/bedrock/firefox/templates/firefox/developer/includes/arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/bedrock/firefox/templates/firefox/developer/includes/features.html b/bedrock/firefox/templates/firefox/developer/includes/features.html index dc72db1563..bb080ead73 100644 --- a/bedrock/firefox/templates/firefox/developer/includes/features.html +++ b/bedrock/firefox/templates/firefox/developer/includes/features.html @@ -5,159 +5,226 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/. #} -
-

{{ ftl('firefox-developer-design-code-test') }}

-

{{ ftl('firefox-developer-build-and-perfect') }}

+{% from "macros-protocol.html" import picto with context %} - + {% endcall %} + + {% call picto( + title=ftl('firefox-developer-style-editor'), + body=True, + image=resp_img( + url='img/firefox/developer/feature-style-editor.svg', + optional_attributes={ + 'class': 'mzp-c-picto-image', + 'width': '116', + 'height': '124', + 'loading': 'lazy' + } + ), + ) %} +

{{ ftl('firefox-developer-edit-and-manage') }}

+

+ + {{ ftl('firefox-developer-learn-more-about-style') }} + +

+ {% endcall %} + +
diff --git a/bedrock/firefox/templates/firefox/developer/includes/for-developers.html b/bedrock/firefox/templates/firefox/developer/includes/for-developers.html index 1ca34da4ac..6f034a8c9d 100644 --- a/bedrock/firefox/templates/firefox/developer/includes/for-developers.html +++ b/bedrock/firefox/templates/firefox/developer/includes/for-developers.html @@ -9,10 +9,10 @@ {% call split( block_id='fordevs', image=resp_img('img/firefox/developer/stylo-engine.svg', optional_attributes={ 'class': 'mzp-c-split-media-asset'}), - block_class='t-performance' + block_class='mzp-t-split-nospace' ) %} -

{{ ftl('firefox-developer-firefox-browser') }}

-

{{ ftl('firefox-developer-made-for-developers') }}

+

{{ ftl('firefox-developer-firefox-browser') }}

+

{{ ftl('firefox-developer-made-for-developers') }}

{{ ftl('firefox-developer-all-the-latest-v2', fallback='firefox-developer-all-the-latest') }}

{{ ftl('firefox-developer-a-separate-profile') }}

{{ ftl('firefox-developer-preferences-tailored') }}

diff --git a/bedrock/firefox/templates/firefox/developer/includes/highlights.html b/bedrock/firefox/templates/firefox/developer/includes/highlights.html index da7c7b2fb1..6f80a0715c 100644 --- a/bedrock/firefox/templates/firefox/developer/includes/highlights.html +++ b/bedrock/firefox/templates/firefox/developer/includes/highlights.html @@ -4,86 +4,62 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/. #} -
-
- {% if ftl_has_messages('firefox-developer-new-tools', 'firefox-developer-firefox-devtools-now-grays-out') %} - - {% endif %} - +{% from "macros-protocol.html" import card with context %} - +
+ {{ card( + attributes='id="inactive"', + class='mzp-c-card-medium', + tag_label=ftl('firefox-developer-new-tools'), + ga_title='Pioneers of The Open Web', + title=ftl('firefox-developer-inactive-css'), + desc=ftl('firefox-developer-firefox-devtools-now-grays-out'), + image=resp_img('img/firefox/developer/hero-inactive-css.png', srcset={'img/firefox/developer/hero-inactive-css-high-res.png': '2x'}, optional_attributes={'alt': ftl('firefox-developer-inactive-css'), "loading": "lazy", "class": "mzp-c-card-image", "height": "280", "width": "560"}), + aspect_ratio='mzp-has-aspect-16-9', + link_url='https://hacks.mozilla.org/2019/10/firefox-70-a-bountiful-release-for-all/#developertools', + link_rel='external', + cta=ftl('ui-learn-more') + )}} - {% if ftl_has_messages('firefox-developer-faster-innovation', 'firefox-developer-the-new-fonts-panel') %} - {% if not ftl_has_messages('firefox-developer-new-tools', 'firefox-developer-firefox-devtools-now-grays-out') %} -
- - {{ ftl('firefox-developer-shapes-editor') }} - -

{{ ftl('firefox-developer-convenient-features') }}

-

{{ ftl('firefox-developer-shapes-editor') }}

-

- {{ ftl('firefox-developer-firefox-devtools-has-a-brand-new-v2', fallbacl='firefox-developer-firefox-devtools-has-a-brand-new') }} -

-

{{ ftl('ui-learn-more') }}

-
- {% endif %} + {{ card( + attributes='id="devtools"', + class='mzp-c-card-medium', + tag_label=ftl('firefox-developer-new-tools'), + ga_title='Pioneers of The Open Web', + title=ftl('firefox-developer-firefox-devtools'), + desc=ftl('firefox-developer-the-new-firefox-devtools'), + image=resp_img('img/firefox/developer/hero-debugger-ani.gif', optional_attributes={'alt': ftl('firefox-developer-firefox-devtools'), "loading": "lazy", "class": "mzp-c-card-image", "height": "280", "width": "560"}), + aspect_ratio='mzp-has-aspect-16-9', + link_url='https://mozilladevelopers.github.io/playground/debugger/', + link_rel='external', + cta=ftl('ui-learn-more') + )}} -
- - {{ ftl('firefox-developer-fonts-panel') }} - -

{{ ftl('firefox-developer-faster-innovation') }}

-

{{ ftl('firefox-developer-fonts-panel') }}

-

- {{ ftl('firefox-developer-the-new-fonts-panel') }} -

-

{{ ftl('ui-learn-more') }}

-
- {% endif %} -
+ {{ card( + attributes='id="cssgrid"', + class='mzp-c-card-medium', + tag_label=ftl('firefox-developer-master-innovative-features'), + ga_title='Pioneers of The Open Web', + title=ftl('firefox-developer-master-css-grid'), + desc=ftl('firefox-developer-firefox-is-the-only-browser'), + image=resp_img('img/firefox/developer/hero-cssgrid-ani.gif', optional_attributes={'alt': ftl('firefox-developer-master-css-grid'), "loading": "lazy", "class": "mzp-c-card-image", "height": "280", "width": "560"}), + aspect_ratio='mzp-has-aspect-16-9', + link_url='https://mozilladevelopers.github.io/playground/css-grid/', + link_rel='external', + cta=ftl('ui-learn-more') + )}} + + {{ card( + attributes='id="fonts"', + class='mzp-c-card-medium', + tag_label=ftl('firefox-developer-faster-innovation'), + ga_title='Pioneers of The Open Web', + title=ftl('firefox-developer-fonts-panel'), + desc=ftl('firefox-developer-the-new-fonts-panel'), + image=resp_img('img/firefox/developer/hero-fonts.gif', optional_attributes={'alt': ftl('firefox-developer-fonts-panel'), "loading": "lazy", "class": "mzp-c-card-image", "height": "280", "width": "560"}), + aspect_ratio='mzp-has-aspect-16-9', + link_url='https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_fonts/', + link_rel='external', + cta=ftl('ui-learn-more') + )}}
diff --git a/bedrock/firefox/templates/firefox/developer/includes/intro-features.html b/bedrock/firefox/templates/firefox/developer/includes/intro-features.html index 4782b2041a..caa565b466 100644 --- a/bedrock/firefox/templates/firefox/developer/includes/intro-features.html +++ b/bedrock/firefox/templates/firefox/developer/includes/intro-features.html @@ -4,20 +4,53 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/. #} - + {% endcall %} + + diff --git a/bedrock/firefox/templates/firefox/developer/includes/mdn-features.html b/bedrock/firefox/templates/firefox/developer/includes/mdn-features.html new file mode 100644 index 0000000000..ff53b7555d --- /dev/null +++ b/bedrock/firefox/templates/firefox/developer/includes/mdn-features.html @@ -0,0 +1,30 @@ +{# + 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/. +#} + +{% from "macros-protocol.html" import picto with context %} + +
+
+
+

{{ ftl('firefox-developer-mdn-web-docs') }}

+

{{ ftl('firefox-developer-resources-for-developers') }}

+
+
+
+

{{ ftl('firefox-developer-mdn-references') }}

+

{{ ftl('firefox-developer-mdn-is-a') }}

+
+
+

{{ ftl('firefox-developer-mdn-curriculum') }}

+

{{ ftl('firefox-developer-a-structured-guide') }}

+
+
+

{{ ftl('firefox-developer-mdn-plus') }}

+

{{ ftl('firefox-developer-support-mdn-and') }}

+
+
+
+
diff --git a/bedrock/firefox/templates/firefox/developer/includes/nightly.html b/bedrock/firefox/templates/firefox/developer/includes/nightly.html index b0cf74bfa3..cee0995e77 100644 --- a/bedrock/firefox/templates/firefox/developer/includes/nightly.html +++ b/bedrock/firefox/templates/firefox/developer/includes/nightly.html @@ -12,6 +12,7 @@ optional_attributes={ 'class': 'mzp-c-split-media-asset'} ), block_class='mzp-l-split-reversed mzp-l-split-center-on-sm-md', + media_class='mzp-l-split-h-center', media_after=True ) %}

{{ ftl('firefox-developer-want-to-be-on-the-cutting-edge') }}

diff --git a/bedrock/firefox/templates/firefox/developer/index.html b/bedrock/firefox/templates/firefox/developer/index.html index f8a6027bf9..01c8b24364 100644 --- a/bedrock/firefox/templates/firefox/developer/index.html +++ b/bedrock/firefox/templates/firefox/developer/index.html @@ -23,7 +23,7 @@ {% endblock %} {% block body_id %}firefox-developer{% endblock %} -{% block body_class %}firefox-developer mzp-t-firefox t-home{% endblock %} +{% block body_class %}firefox-developer firefox-developer-home mzp-t-firefox{% endblock %} {% block site_header %} {% with hide_nav_download_button=True %} @@ -53,34 +53,20 @@ {% block content %}
-
-
-
-

{{ ftl('firefox-developer-firefox-browser') }}

-

{{ ftl('firefox-developer-welcome-to-your-new-favorite') }}

+
+ +

{{ ftl('firefox-developer-firefox-browser') }}

+

{{ ftl('firefox-developer-welcome-to-your-new-favorite') }}

- {{ download_firefox('alpha', platform='desktop', dom_id='intro-download', download_location='primary cta') }} + {{ download_firefox('alpha', platform='desktop', dom_id='intro-download', download_location='primary cta') }} -

{{ ftl('download-button-using-debian', attrs='href="https://support.mozilla.org/products/firefox/install-and-update-firefox#w_install-firefox-deb-package-for-debian-based-distributions" rel="external noopener" - data-cta-type="link" data-cta-text="Get help with your installation"')}}

-

- {{ ftl('firefox-developer-firefox-developer-edition-sends') }} - {{ ftl('ui-learn-more') }} -

-
-
- {{ resp_img( - url='img/firefox/developer/hero-screenshot.png', - srcset={ - 'img/firefox/developer/hero-screenshot-high-res.png': '2x' - }, - optional_attributes={ - 'width': '1200', - 'height': '337' - } - ) }} -
-
+

{{ ftl('download-button-using-debian', attrs='href="https://support.mozilla.org/products/firefox/install-and-update-firefox#w_install-firefox-deb-package-for-debian-based-distributions" rel="external noopener" + data-cta-type="link" data-cta-text="Get help with your installation"')}}

+

+ {{ ftl('firefox-developer-firefox-developer-edition-sends') }} + {{ ftl('ui-learn-more') }} +

+ {% include '/firefox/developer/includes/for-developers.html' %} @@ -88,23 +74,16 @@ {% include '/firefox/developer/includes/features.html' %} -
- {% include '/firefox/developer/includes/engage.html' %} - +
-
-
{% if LANG.startswith('en-') %} {{ email_newsletter_form( 'app-dev', @@ -117,7 +96,25 @@ spinner_color='#fff', button_class='mzp-c-button mzp-t-product mzp-t-lg') }} {% endif %} -
+ {% endcall %} + + + +
+ {% include '/firefox/developer/includes/engage.html' %} + + {% call split( + image=resp_img('img/firefox/developer/browser.png', + srcset={ 'img/firefox/developer/browser-high-res.png': '2x' }, + optional_attributes={ 'class': 'mzp-c-split-media-asset' } + ), + block_class='mzp-l-split-reversed mzp-l-split-center-on-sm-md', + media_class='mzp-l-split-h-center', + media_after=True + ) %} +

{{ ftl('firefox-developer-download-the-firefox-browser') }}

+ {{ download_firefox('alpha', platform='desktop', dom_id='footer-download', download_location='footer cta') }} + {% endcall %}
{% endblock %} diff --git a/bedrock/firefox/templates/firefox/developer/whatsnew.html b/bedrock/firefox/templates/firefox/developer/whatsnew.html index a55da8d283..618352f216 100644 --- a/bedrock/firefox/templates/firefox/developer/whatsnew.html +++ b/bedrock/firefox/templates/firefox/developer/whatsnew.html @@ -22,35 +22,38 @@ {% block body_class %}firefox-developer firefox-developer-whatsnew{% endblock %} {% block content %} -
-
-
-
+
+
+ +

{{ ftl('firefox-developer-congrats-you-now-have-latest-v2', fallback='firefox-developer-congrats-you-now-have-latest') }}

+ {% set attrs = 'href="' ~ url('firefox.notes', channel='aurora') ~ '"' %} + {% if LANG.startswith('en-') %} +

View the release notes to see what’s new.

+ {% else %} +

{{ ftl('firefox-developer-view-the-release', attrs=attrs) }}

+ {% endif %} +
- {% if ftl_has_messages('firefox-developer-congrats-you-now-have', 'firefox-developer-welcome-to-your-new-favorite') %} -

{{ ftl('firefox-developer-congrats-you-now-have-latest', fallback='firefox-developer-congrats-you-now-have') }}

-

{{ ftl('firefox-developer-welcome-to-your-new-favorite') }}

- {% else %} -

{{ ftl('firefox-developer-congrats-you-now-have-firefox') }}

-

{{ ftl('firefox-developer-this-isnt-just-an-update') }}

- {% endif %} + {% if ftl_has_messages('firefox-developer-developer-tools-user') %} +
+

+ {{ ftl('firefox-developer-developer-tools-user') }} + {% include '/firefox/developer/includes/arrow-right.svg' %} +

+
+ {% endif %} - {% include '/firefox/developer/includes/intro-features.html' %} -
-
+ {% if ftl_has_messages('firefox-developer-resources-for-developers', 'firefox-developer-mdn-is-a') %} + {% include '/firefox/developer/includes/mdn-features.html' %} + {% endif %} {% include '/firefox/developer/includes/alt-newsletter.html' %} - {% include '/firefox/developer/includes/highlights.html' %} - - {% include '/firefox/developer/includes/for-developers.html' %} - - {% include '/firefox/developer/includes/features.html' %} - -
+
{% include '/firefox/developer/includes/engage.html' %} {% include '/firefox/developer/includes/nightly.html' %}
+
{% endblock %} diff --git a/l10n/en/firefox/developer.ftl b/l10n/en/firefox/developer.ftl index a9269125a9..1209d01b63 100644 --- a/l10n/en/firefox/developer.ftl +++ b/l10n/en/firefox/developer.ftl @@ -8,7 +8,7 @@ firefox-developer-page-title = { -brand-name-firefox-developer-edition } firefox-developer-firefox-developer-edition-desc = { -brand-name-firefox-developer-edition } is the blazing fast browser that offers cutting edge developer tools and latest features like CSS Grid support and framework debugging -firefox-developer-firefox-browser = { -brand-name-firefox-browser } { -brand-name-developer-edition } +firefox-developer-firefox-browser = { -brand-name-firefox } { -brand-name-developer-edition } firefox-developer-welcome-to-your-new-favorite = Welcome to your new favorite browser. Get the latest features, fast performance, and the development tools you need to build for the open web. firefox-developer-speak-up = Speak up firefox-developer-feedback-makes-us = Feedback makes us better. Tell us how we can improve the browser and Developer tools. @@ -73,16 +73,26 @@ firefox-developer-firefox-developer-edition-sends = { -brand-name-firefox-develo firefox-developer-download-the-firefox-browser = Download the { -brand-name-firefox } browser made for developers firefox-developer-welcome-to-the-all-new = Welcome to the all-new { -brand-name-firefox-quantum }: { -brand-name-developer-edition } firefox-developer-firefox-has-been-rebuilt = { -brand-name-firefox } has been rebuilt from the ground-up to be faster, sleeker, and more powerful than ever. -firefox-developer-congrats-you-now-have-firefox = Congrats. You now have { -brand-name-firefox-quantum }: { -brand-name-developer-edition }. -firefox-developer-this-isnt-just-an-update = This isn’t just an update. This is { -brand-name-firefox-quantum }: A brand new { -brand-name-firefox } that has been rebuilt from the ground-up to be faster, sleeker, and more powerful than ever. -firefox-developer-welcome-to-firefox-browser = Welcome to { -brand-name-firefox-browser } { -brand-name-developer-edition } +firefox-developer-welcome-to-firefox-browser = Welcome to { -brand-name-firefox } { -brand-name-developer-edition } firefox-developer-made-for-developers = The browser made for developers firefox-developer-all-the-latest-v2 = All the latest developer tools in beta in addition to features like the Multi-line Console Editor and WebSocket Inspector. - -# Obsolete string -firefox-developer-all-the-latest = All the latest developer tools in beta, plus experimental features like the Multi-line Console Editor and WebSocket Inspector. - firefox-developer-a-separate-profile = A separate profile and path so you can easily run it alongside Release or { -brand-name-beta } { -brand-name-firefox }. firefox-developer-preferences-tailored = Preferences tailored for web developers: Browser and remote debugging are enabled by default, as are the dark theme and developer toolbar button. -firefox-developer-congrats-you-now-have = Congrats. You now have { -brand-name-firefox-browser } { -brand-name-developer-edition }. +firefox-developer-congrats-you-now-have-latest-v2 = You now have the latest version of { -brand-name-firefox } { -brand-name-developer-edition }. +# Obsolete string (expires: 2024-05-14) firefox-developer-congrats-you-now-have-latest = Congrats. You now have the latest version of { -brand-name-firefox-browser } { -brand-name-developer-edition }. + + +# Variables: +# $attrs (string) - link to the most recent Firefox Developer Edition release notes +firefox-developer-view-the-release = View the release notes (English only) to see what’s new. +# this is a link to https://firefox-source-docs.mozilla.org/devtools-user/ +firefox-developer-developer-tools-user = Developer Tools User Docs +firefox-developer-mdn-web-docs = { -brand-name-mdn-web-docs } +firefox-developer-resources-for-developers = Resources for Developers, by Developers +firefox-developer-mdn-references = { -brand-name-mdn } References +firefox-developer-mdn-is-a = { -brand-name-mdn } is an open-source, collaborative project documenting Web platform technologies, including CSS, HTML, JavaScript and Web APIs. +firefox-developer-mdn-curriculum = { -brand-name-mdn } Curriculum +firefox-developer-a-structured-guide = A structured guide to the essential skills and practices for being a successful front-end developer, along with recommended learning resources. +firefox-developer-mdn-plus = { -brand-name-mdn-plus } +firefox-developer-support-mdn-and = Support { -brand-name-mdn } and make it your own with collections, notifications, and playgrounds. diff --git a/l10n/en/firefox/installer-help.ftl b/l10n/en/firefox/installer-help.ftl index 65c3fc357f..bc19d096b8 100644 --- a/l10n/en/firefox/installer-help.ftl +++ b/l10n/en/firefox/installer-help.ftl @@ -19,9 +19,9 @@ installer-help-firefox-release-title = { -brand-name-firefox-browser } # $trackers (number) - number of trackers blocked by Firefox (currently in the thousands) installer-help-firefox-release-desc = Get the latest. Automatic privacy is here. Download { -brand-name-firefox-browser } to block over { $trackers } trackers. -installer-help-firefox-beta-title = { -brand-name-firefox-browser } { -brand-name-beta } +installer-help-firefox-beta-title = { -brand-name-firefox } { -brand-name-beta } installer-help-firefox-beta-desc = Test about-to-be released features in the most stable pre-release build. -installer-help-firefox-developer-title = { -brand-name-firefox-browser } { -brand-name-developer-edition } +installer-help-firefox-developer-title = { -brand-name-firefox } { -brand-name-developer-edition } installer-help-firefox-developer-desc = Build, test, scale and more with the only browser built just for developers. installer-help-firefox-nightly-title = { -brand-name-firefox-browser } { -brand-name-nightly } installer-help-firefox-nightly-desc = Peek at our next generation web browser, and help us make it the best browser it can be. diff --git a/l10n/en/firefox/whatsnew/whatsnew-developer-mdnplus.ftl b/l10n/en/firefox/whatsnew/whatsnew-developer-mdnplus.ftl index a1d6534bdd..2c36cc7659 100644 --- a/l10n/en/firefox/whatsnew/whatsnew-developer-mdnplus.ftl +++ b/l10n/en/firefox/whatsnew/whatsnew-developer-mdnplus.ftl @@ -6,7 +6,7 @@ # HTML page title developer-mdnplus-page-title = { -brand-name-firefox-developer-edition } -developer-mdnplus-congrats-you-now-have-latest = Congrats. You now have the latest version of { -brand-name-firefox-browser } { -brand-name-developer-edition }. +developer-mdnplus-congrats-you-now-have-latest = Congrats. You now have the latest version of { -brand-name-firefox } { -brand-name-developer-edition }. # Main title developer-mdnplus-more-mdn-your-mdn = More { -brand-name-mdn }. Your { -brand-name-mdn }. diff --git a/media/css/firefox/developer/developer.scss b/media/css/firefox/developer/developer.scss index 5b234b636e..3f1fe78099 100644 --- a/media/css/firefox/developer/developer.scss +++ b/media/css/firefox/developer/developer.scss @@ -5,70 +5,44 @@ $image-path: '/media/protocol/img'; @import '~@mozilla-protocol/core/protocol/css/includes/lib'; -@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark'; -@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-developer'; -@import 'includes/engage'; -@import 'includes/features'; -@import 'includes/gallery-grid'; -@import 'includes/highlights'; -@import 'includes/intro'; -@import 'includes/newsletter'; -@import 'includes/performance'; +@import '~@mozilla-protocol/core/protocol/css/components/card'; +@import '~@mozilla-protocol/core/protocol/css/components/emphasis-box'; +@import '~@mozilla-protocol/core/protocol/css/components/logos/logo'; +@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-developer'; +@import '~@mozilla-protocol/core/protocol/css/components/newsletter-form'; +@import '~@mozilla-protocol/core/protocol/css/components/picto'; +@import '~@mozilla-protocol/core/protocol/css/components/section-heading'; +@import '~@mozilla-protocol/core/protocol/css/components/split'; +@import "~@mozilla-protocol/core/protocol/css/templates/multi-column"; +@import '~@mozilla-protocol/core/protocol/css/templates/card-layout'; -// *------------------------------------------------------------------*/ -// Title and subtitles for entire page -.c-title { - @include text-body-md; +.t-center { + text-align: center; } -.c-subtitle { - @include text-title-sm; - line-height: $text-title-line-height; - font-weight: bold; - margin-bottom: $spacing-md; +.t-features .mzp-c-section-heading, +.t-features h3 { + padding-bottom: 0; + margin-bottom: 0; +} - .t-highlights & { - @include text-title-xs; - } +// highlights images are non-standard aspect ratio +.t-highlights .mzp-c-card.mzp-has-aspect-16-9 .mzp-c-card-media-wrapper { + padding-bottom: 50.3%; +} - .t-features & { - margin: 0 auto $layout-md; - max-width: $content-lg; +.t-engage .mzp-c-split { + padding-top: 0; +} - br { - display: none; - } +@supports (display:grid){ + .mzp-l-columns::after { + display: none; } } -@media #{$mq-md} { - .c-subtitle { - .t-features & { - margin-bottom: $layout-xl; - - br { - display: block; - } - } - } -} - -// *------------------------------------------------------------------*/ -// Padding for page content sections - -.t-highlights, -.t-features { - &.mzp-l-content { - padding-top: $layout-md; - padding-bottom: $layout-sm; - - @media #{$mq-lg} { - padding-top: $layout-xl; - padding-bottom: $layout-xl; - } - } -} +// index .show-linux { display: none; @@ -87,3 +61,30 @@ $image-path: '/media/protocol/img'; .linux .show-linux { display: block; } + +.intro-feedback-note { + @include text-body-xs; + margin: $spacing-sm auto 0; + max-width: $content-xs; +} + + +// whats new + +.c-docs svg { + vertical-align: middle; + height: 18px; + + [dir='rtl'] & { + transform: rotate(180deg); + } +} + + +// first run + +.firefox-developer-firstrun .t-features { + .mzp-l-content { + padding-top: 0; + } +} diff --git a/media/css/firefox/developer/includes/engage.scss b/media/css/firefox/developer/includes/engage.scss deleted file mode 100644 index 2d2eb69515..0000000000 --- a/media/css/firefox/developer/includes/engage.scss +++ /dev/null @@ -1,57 +0,0 @@ -// 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/. - -@import '~@mozilla-protocol/core/protocol/css/includes/lib'; - -$brand-theme: 'firefox'; - -// *------------------------------------------------------------------*/ -// Engagement - -.t-engage { - background: #010817; - background: linear-gradient(#09204d, #010817); - color: #fff; - padding-top: $layout-sm; - padding-bottom: $layout-sm; - - .mzp-l-content, - .mzp-c-split-container { - max-width: $content-xl; - } - - .mzp-c-split { - padding-top: 0; - } - - .mzp-l-columns { - row-gap: 0; // uses margin bottom instead of row gap for spacing - .mzp-c-picto { - margin-bottom: $layout-md; - } - } - - .mzp-c-picto-heading { - @include text-title-md; - } - - @media #{$mq-md} { - padding-top: $layout-lg; - padding-bottom: $layout-lg; - - .mzp-l-columns .mzp-c-picto { - margin-bottom: 0; - } - - .mzp-c-split-container { - box-sizing: content-box; - } - - .mzp-l-split-reversed { - .mzp-c-split-media { - justify-self: start; - } - } - } -} diff --git a/media/css/firefox/developer/includes/features.scss b/media/css/firefox/developer/includes/features.scss deleted file mode 100644 index 964cffd0b8..0000000000 --- a/media/css/firefox/developer/includes/features.scss +++ /dev/null @@ -1,36 +0,0 @@ -// 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/. - -@import '~@mozilla-protocol/core/protocol/css/includes/lib'; - -.t-features { - @include text-body-sm; - text-align: center; -} - -.c-feature-name { - @include text-title-2xs; -} - -.c-feature-img { - margin-bottom: $layout-sm; -} - -.c-feature-desc { - margin-bottom: $layout-xs; -} - -@media #{$mq-md} { - .t-features { - @include text-body-md; - } - - .c-feature-img { - margin-bottom: $layout-sm; - } - - .c-feature-desc { - margin-bottom: $layout-xs; - } -} diff --git a/media/css/firefox/developer/includes/gallery-grid.scss b/media/css/firefox/developer/includes/gallery-grid.scss deleted file mode 100644 index 2df123029b..0000000000 --- a/media/css/firefox/developer/includes/gallery-grid.scss +++ /dev/null @@ -1,117 +0,0 @@ -// 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/. - -@import '~@mozilla-protocol/core/protocol/css/includes/lib'; - -// *------------------------------------------------------------------*/ -// Gallery grid - -.c-gallery-grid { - text-align: center; -} - -.c-gallery-item { - display: inline-block; - margin-bottom: $layout-lg; - min-width: 200px; - max-width: 320px; - vertical-align: top; - - &:last-child { - margin-bottom: 0; - } - - .t-highlights & { - max-width: $content-sm; - } -} - -@media #{$mq-sm} { - .c-gallery-grid { - margin-left: $layout-xs * -1; - margin-right: $layout-xs * -1; - } - - .c-gallery-item { - margin: 0 $layout-xs $layout-md; - text-align: left; - - .t-intro & { - text-align: center; - } - } -} - -@media #{$mq-md} { - .c-gallery-grid { - margin-left: $layout-md * -1; - margin-right: $layout-md * -1; - } - - .c-gallery-item { - margin: 0 $layout-md $layout-lg; - } -} - -@media #{$mq-sm} { - @supports (display: grid) { - .c-gallery-grid { - display: grid; - grid-column-gap: $layout-md; - grid-row-gap: $layout-md; - grid-template-columns: repeat(2, 1fr); - justify-content: center; - justify-items: center; - margin-left: 0; - margin-right: 0; - - .t-highlights & { - grid-template-columns: repeat(1, $content-sm); - } - } - - .c-gallery-item { - margin: 0; - width: auto; - - .t-highlights & { - max-width: 100%; - } - } - } -} - -@media #{$mq-md} { - @supports (display: grid) { - .c-gallery-grid { - grid-row-gap: $layout-xl; - grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); - - .t-highlights & { - grid-template-columns: repeat(2, 1fr); - } - } - } -} - -@media #{$mq-lg} { - @supports (display: grid) { - .c-gallery-grid { - grid-column-gap: $layout-lg; - } - - .t-highlights .c-gallery-grid { - grid-column-gap: $layout-xl; - } - } -} - -@media #{$mq-xl} { - @supports (display: grid) { - .c-gallery-grid { - grid-column-gap: $layout-xl; - justify-content: space-between; - } - } -} diff --git a/media/css/firefox/developer/includes/highlights.scss b/media/css/firefox/developer/includes/highlights.scss deleted file mode 100644 index 77172cbe0d..0000000000 --- a/media/css/firefox/developer/includes/highlights.scss +++ /dev/null @@ -1,12 +0,0 @@ -// 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/. - -@import '~@mozilla-protocol/core/protocol/css/includes/lib'; - -// *------------------------------------------------------------------*/ -// Engagement - -.highlight-image { - margin-bottom: $layout-sm; -} diff --git a/media/css/firefox/developer/includes/intro.scss b/media/css/firefox/developer/includes/intro.scss deleted file mode 100644 index b72c90f592..0000000000 --- a/media/css/firefox/developer/includes/intro.scss +++ /dev/null @@ -1,74 +0,0 @@ -// 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/. - -@import '~@mozilla-protocol/core/protocol/css/includes/lib'; - -// *------------------------------------------------------------------*/ -// Intro - -.t-intro { - text-align: center; - margin-bottom: $layout-sm; - - .mzp-l-content { - padding-top: $layout-lg; - } - - .mzp-c-wordmark { - margin-left: auto; - margin-right: auto; - } -} - -.intro-title { - @include text-title-md; - background-position: top center; - background-repeat: no-repeat; - margin: $layout-sm auto; - max-width: $content-md; -} - -.intro-tagline { - @include text-body-lg; - margin: 0 auto $layout-md; - max-width: $content-sm; - - .t-home & { - max-width: $content-md; - } -} - -.intro-feedback-note { - @include text-body-xs; - margin: $spacing-sm auto 0; - max-width: $content-xs; -} - -.intro-image { - background-image: url('/media/img/firefox/developer/hero-background.svg'); - background-position: 80% 100%; - background-repeat: no-repeat; - background-size: auto 420px; - height: 420px; - position: relative; - overflow: hidden; - - img { - bottom: 0; - height: 337px; - max-width: none; - position: absolute; - right: 0; - } -} - -@media #{$mq-lg} { - .intro-image { - img { - left: 50%; - margin-left: -600px; - right: auto; - } - } -} diff --git a/media/css/firefox/developer/includes/newsletter.scss b/media/css/firefox/developer/includes/newsletter.scss deleted file mode 100644 index fc2c880d7a..0000000000 --- a/media/css/firefox/developer/includes/newsletter.scss +++ /dev/null @@ -1,111 +0,0 @@ -// 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/. - -@import '~@mozilla-protocol/core/protocol/css/includes/lib'; -@import '../../../protocol/components/newsletter-form'; - -// *------------------------------------------------------------------*/ -// Newsletter -.t-newsletter { - background: #08204e url('/media/img/firefox/developer/newsletter-bg.svg') center bottom no-repeat; - background-size: cover; - padding: $layout-md $layout-xs; - - .mzp-l-content { - background: #fff; - border-radius: $border-radius-md; - box-shadow: $box-shadow-md; - padding-top: $layout-md; - padding-bottom: $layout-md; - min-width: 0; - max-width: $content-sm; - } - - .mzp-c-newsletter-content { - margin-bottom: 0; - } - - .mzp-c-newsletter-form { - padding-top: 0; - @include font-size(14px); - - input[type='email'], - select { - min-width: 0; // https://github.com/mozilla/protocol/issues/607 - } - - legend { - @include font-size(14px); - } - } - - .mzp-c-newsletter-title { - @include font-size(24px); - margin-bottom: $layout-2xs; - } - - .mzp-c-newsletter-tagline { - margin-bottom: $layout-sm; - - br { - display: none; - } - } - - .mzp-c-newsletter-details { - text-align: left; - } - - .mzp-c-form-submit { - margin-bottom: 0; - } - - .mzp-c-fieldnote { - display: none; - } - - .mzp-c-newsletter-thanks { - padding-top: 0; - - h3 { - @include font-size(24px); - } - - p { - margin-bottom: 0; - } - } - - @media #{$mq-md} { - padding: $layout-md $layout-md; - - .mzp-l-content { - max-width: $content-xl; - } - - .mzp-c-newsletter-form { - display: grid; - grid-column-gap: $layout-md; - grid-template-columns: auto 285px; - } - - .mzp-c-newsletter-tagline, - .mzp-c-button { - margin-bottom: 0; - } - } - - @media #{$mq-lg} { - .mzp-l-content { - padding-right: $layout-md; - padding-left: $layout-md; - } - - .mzp-c-newsletter-form { - grid-column-gap: $layout-lg; - padding-left: 84px + $layout-md; // width of icon - background: url('/media/img/firefox/developer/mail.svg') top left no-repeat; - } - } -} diff --git a/media/css/firefox/developer/includes/performance.scss b/media/css/firefox/developer/includes/performance.scss deleted file mode 100644 index 9c3dd3a9b9..0000000000 --- a/media/css/firefox/developer/includes/performance.scss +++ /dev/null @@ -1,11 +0,0 @@ -// 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/. - -.t-performance .mzp-c-split-container { - box-sizing: content-box; // add default split padding to max-width - max-width: $content-sm; - @media #{$mq-lg} { - max-width: $content-max; - } -} diff --git a/media/img/firefox/developer/feature-console.svg b/media/img/firefox/developer/feature-console.svg index b0caf32f94..93a93b4d65 100644 --- a/media/img/firefox/developer/feature-console.svg +++ b/media/img/firefox/developer/feature-console.svg @@ -1 +1,14 @@ - + + + + + + + + + + + + + + diff --git a/media/img/firefox/developer/feature-debugger.svg b/media/img/firefox/developer/feature-debugger.svg index 09e3cafae9..f8a15bd65e 100644 --- a/media/img/firefox/developer/feature-debugger.svg +++ b/media/img/firefox/developer/feature-debugger.svg @@ -1 +1,11 @@ - + + + + + + + + + + + diff --git a/media/img/firefox/developer/feature-inspector.svg b/media/img/firefox/developer/feature-inspector.svg index 5fa6f969fe..7f5f039278 100644 --- a/media/img/firefox/developer/feature-inspector.svg +++ b/media/img/firefox/developer/feature-inspector.svg @@ -1 +1,15 @@ - + + + + + + + + + + + + + + + diff --git a/media/img/firefox/developer/feature-memory.svg b/media/img/firefox/developer/feature-memory.svg index 0a87f7bca5..e4b0f5623d 100644 --- a/media/img/firefox/developer/feature-memory.svg +++ b/media/img/firefox/developer/feature-memory.svg @@ -1 +1,22 @@ - + + + + + + + + + + + + + + + + + + + + + + diff --git a/media/img/firefox/developer/feature-network.svg b/media/img/firefox/developer/feature-network.svg index 61773f8189..e2ec3632c1 100644 --- a/media/img/firefox/developer/feature-network.svg +++ b/media/img/firefox/developer/feature-network.svg @@ -1 +1,11 @@ - + + + + + + + + + + + diff --git a/media/img/firefox/developer/feature-performance.svg b/media/img/firefox/developer/feature-performance.svg index e002f421a4..426ed0c0d2 100644 --- a/media/img/firefox/developer/feature-performance.svg +++ b/media/img/firefox/developer/feature-performance.svg @@ -1 +1,19 @@ - + + + + + + + + + + + + + + + + + + + diff --git a/media/img/firefox/developer/feature-responsive-mode.svg b/media/img/firefox/developer/feature-responsive-mode.svg index 142ad3ee1b..4ae656483e 100644 --- a/media/img/firefox/developer/feature-responsive-mode.svg +++ b/media/img/firefox/developer/feature-responsive-mode.svg @@ -1 +1,21 @@ - + + + + + + + + + + + + + + + + + + + + + diff --git a/media/img/firefox/developer/feature-storage.svg b/media/img/firefox/developer/feature-storage.svg index 2e2c2398f2..d39635dd89 100644 --- a/media/img/firefox/developer/feature-storage.svg +++ b/media/img/firefox/developer/feature-storage.svg @@ -1 +1,15 @@ - + + + + + + + + + + + + + + + diff --git a/media/img/firefox/developer/feature-style-editor.svg b/media/img/firefox/developer/feature-style-editor.svg index 132597ac95..b8db4c4f37 100644 --- a/media/img/firefox/developer/feature-style-editor.svg +++ b/media/img/firefox/developer/feature-style-editor.svg @@ -1 +1,9 @@ - + + + + + + + + + diff --git a/media/img/firefox/developer/feature-visual-editing.svg b/media/img/firefox/developer/feature-visual-editing.svg index 1024e7cb49..cd84aefde8 100644 --- a/media/img/firefox/developer/feature-visual-editing.svg +++ b/media/img/firefox/developer/feature-visual-editing.svg @@ -1 +1,19 @@ - + + + + + + + + + + + + + + + + + + + diff --git a/media/img/firefox/developer/mail.svg b/media/img/firefox/developer/mail.svg index 165baacd37..02fce14d0b 100644 --- a/media/img/firefox/developer/mail.svg +++ b/media/img/firefox/developer/mail.svg @@ -1 +1,9 @@ - + + + + + + + + + diff --git a/media/img/logos/mdn/mdn-wordmark-white.svg b/media/img/logos/mdn/mdn-wordmark-white.svg new file mode 100644 index 0000000000..5887f85d6f --- /dev/null +++ b/media/img/logos/mdn/mdn-wordmark-white.svg @@ -0,0 +1,19 @@ + +