Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simplify new nav for old IE styling #15874

Draft
wants to merge 11 commits into
base: main
Choose a base branch
from
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 4 additions & 29 deletions bedrock/firefox/templates/firefox/new/basic/base.html
Original file line number Diff line number Diff line change
@@ -13,40 +13,15 @@
{# Bug 1438302 Avoid duplicate content for en-CA and en-GB pages. #}
{%- block page_title_suffix -%}
{% if LANG == 'en-CA' %}
from Mozilla (CA)
from Mozilla (CA)
{% elif LANG == 'en-GB' %}
from Mozilla (UK)
from Mozilla (UK)
{% else %}
- {{ ftl('firefox-new-from-mozilla', fallback='firefox-new-mozilla') }}
{{ ftl('firefox-new-from-mozilla', fallback='firefox-new-mozilla') }}
{% endif %}
{%- endblock -%}

{% block page_desc %}{{ ftl('firefox-new-desc', fallback='firefox-new-faster-page-loading-less-memory') }}{% endblock %}

{#- This will appear as <meta property="og:title"> which can be used for social share -#}
{#- This sets <meta property="og:title"> for social sharing to differ from page_title -#}
{% block page_og_title %}{{ ftl('firefox-new-download-firefox') }}{% endblock %}

{#- This will appear as <meta property="og:description"> which can be used for social share -#}
{% block page_og_desc %}{{ ftl('firefox-new-desc', fallback='firefox-new-faster-page-loading-less-memory') }}{% endblock %}

{# All stylesheets are loaded in extrahead to serve legacy IE basic styles #}
{% block extrahead %}
{% if switch('m24-website-refresh') %}
{{ css_bundle('protocol-mozilla-2024') }}
{% if ftl_file_is_active('navigation_refresh') and ftl_file_is_active('footer-refresh') %}
{{ css_bundle('m24-navigation-and-footer') }}
{% else %}
{{ css_bundle('legacy-navigation-and-footer') }}
{% endif %}
{% else %}
{{ css_bundle('protocol-firefox') }}
{% endif %}

<!--[if IE]>
{{ css_bundle('firefox_new_ie') }}
<![endif]-->
{% endblock %}

{% block old_ie_styles %}{% endblock %}
{% block site_css %}{% endblock %}
{% block page_css %}{% endblock %}
18 changes: 0 additions & 18 deletions bedrock/firefox/templates/firefox/new/desktop/base.html
Original file line number Diff line number Diff line change
@@ -25,22 +25,4 @@
{#- This will appear as <meta property="og:description"> which can be used for social share -#}
{% block page_og_desc %}{{ ftl('firefox-desktop-download-og-desc') }}{% endblock %}

{% block old_ie_styles %}{% endblock %}
{% block site_css %}{% endblock %}
{% block page_css %}{% endblock %}

{# All stylesheets are loaded in extrahead to serve legacy IE basic styles #}
{% block extrahead %}
{% if switch('m24-website-refresh') %}
{{ css_bundle('protocol-mozilla-2024') }}
{% if ftl_file_is_active('navigation_refresh') and ftl_file_is_active('footer-refresh') %}
{{ css_bundle('m24-navigation-and-footer') }}
{% else %}
{{ css_bundle('legacy-navigation-and-footer') }}
{% endif %}
{% else %}
{{ css_bundle('protocol-firefox') }}
{% endif %}
{% endblock %}

{% block body_class %}mzp-t-firefox{% endblock %}
Original file line number Diff line number Diff line change
@@ -36,7 +36,6 @@
<!--[if lt IE 9]>
{{ css_bundle('firefox_desktop_download_ie8') }}
<![endif]-->

{% endblock %}

{% macro download_picture(src, width, height, alt='', class_name='') -%}
4 changes: 0 additions & 4 deletions bedrock/firefox/templates/firefox/new/desktop/thanks.html
Original file line number Diff line number Diff line change
@@ -16,10 +16,6 @@
{{ super() }}
{{ css_bundle('protocol-emphasis-box') }}
{{ css_bundle('firefox_desktop_download_thanks') }}

<!--[if IE]>
{{ css_bundle('firefox_desktop_download_thanks_ie') }}
<![endif]-->
{% endblock %}

{% block site_header %}
12 changes: 6 additions & 6 deletions docs/browser-support.rst
Original file line number Diff line number Diff line change
@@ -29,7 +29,7 @@ particular locale for a short while* -- but those will be exceptions and rare.
Browser Support Matrix
----------------------

*Last updated: Updated July 19, 2023*
*Last updated: January 20, 2025*

Firefox
~~~~~~~
@@ -55,7 +55,7 @@ user agents in our browser support matrix below.

macOS 10.15 and above
- All evergreen browsers
- Safari
- Safari 15.6

Linux
- All evergreen browsers
@@ -70,13 +70,13 @@ CSS layout or JS features.
- Internet Explorer 11

Windows 8.1 and below
- Firefox 115
- Firefox 115 ESR
- Chrome 109
- Internet Explorer 10

macOS 10.14 and below
- Firefox 115
- Chrome 114
- Firefox 115 ESR
- Chrome 116
- Safari 12.1

.. Note::
@@ -131,7 +131,7 @@ consists of no page-specific CSS or JS. Instead, we deliver well formed semantic
and a universal CSS stylesheet that gets applied to all pages. We do not serve these
older browsers any JS, with the exception of the following scripts:

* Google Analytics / :abbr:`GTM (Google Tag Manager)` snippet.
* Google Analytics / :abbr:`GTM (Google Tag Manager)` snippet (IE9).
* HTML5shiv for parsing modern HTML semantic elements.
* Stub Attribution script (IE8 / IE9).

16 changes: 0 additions & 16 deletions media/css/firefox/new/basic/ie.scss

This file was deleted.

13 changes: 0 additions & 13 deletions media/css/firefox/new/desktop/ie8.scss
Original file line number Diff line number Diff line change
@@ -2,12 +2,7 @@
// 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/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '../../../protocol/components/navigation-ie';
@import '../../../protocol/components/fx-unsupported-ie';

$h-grid-lg: 80px;

@@ -31,10 +26,6 @@ $h-grid-lg: 80px;
background-image: none;
}

.c-compare-table caption {
display: none;
}

// block

.c-block-body {
@@ -66,7 +57,3 @@ $h-grid-lg: 80px;
@include bidi(((float, left, right),));
}
}

.hide-from-legacy-ie {
display: none !important; /* stylelint-disable-line declaration-no-important */
}
16 changes: 0 additions & 16 deletions media/css/firefox/new/desktop/ie9.scss
Original file line number Diff line number Diff line change
@@ -2,15 +2,7 @@
// 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/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '../../../protocol/components/fx-unsupported-ie';

.c-menu-item .c-menu-item-desc {
display: none;
}

.c-noodles {
@include at2x('/media/img/firefox/new/desktop/ie9/browser-mr1.jpg', contain);
@@ -20,11 +12,3 @@ $image-path: '/media/protocol/img';
.c-screenshot {
position: static !important; /* stylelint-disable-line declaration-no-important */
}

.c-compare-table caption {
display: none;
}

.hide-from-legacy-ie {
display: none !important; /* stylelint-disable-line declaration-no-important */
}
9 changes: 0 additions & 9 deletions media/css/firefox/new/desktop/thanks-ie.scss

This file was deleted.

8 changes: 6 additions & 2 deletions media/css/protocol/common-old-ie.scss
Original file line number Diff line number Diff line change
@@ -2,8 +2,8 @@
// 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/.

// This style sheet is served exclusively to Internet Explorer 8 and older.
// Old versions get this minimal style while IE9 and up recieve more advanced styling.
// This stylesheet is only served to Internet Explorer 9 and older for basic appearance.
// It's used as the only style for IE9-, while IE10+ link the bundles like any other UA.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';
@@ -39,6 +39,10 @@ label {
display: block;
}

hr {
margin: $layout-xs 0;
}

.visually-hidden {
@include visually-hidden;
}
17 changes: 14 additions & 3 deletions media/css/protocol/components/_fx-unsupported-ie.scss
Original file line number Diff line number Diff line change
@@ -48,10 +48,21 @@
display: block !important;
}

// Hide Firefox download button in the navigation as there's
// too little space to display messaging.
// Simplify Firefox download button in main nav as there's
// too little space to display all the ESR messaging.
.c-navigation .c-navigation-shoulder .c-button-download-thanks {
display: none !important;
p {
margin: 0 0 0.25em !important;
font-size: 80%;

.mzp-c-button {
font-size: 125%;
}
}

small {
display: none !important;
}
}

// Hide Firefox Win64 ESR download button by default.
110 changes: 104 additions & 6 deletions media/css/protocol/components/_navigation-ie.scss
Original file line number Diff line number Diff line change
@@ -2,9 +2,6 @@
// 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/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';

// * -------------------------------------------------------------------------- */
@@ -41,7 +38,7 @@ $image-path: '/media/protocol/img';
*display: inline;
margin: 0;
position: absolute;
right: 0;
@include bidi(((right, 0, left, auto),));
text-align: center;
top: $spacing-md;
top: 0\0;
@@ -80,9 +77,9 @@ $image-path: '/media/protocol/img';
zoom: 1;
}

// only display primary navigation links to IE visitors.
// only display primary navigation links to IE visitors
.c-menu-panel {
display: none !important; /* stylelint-disable-line declaration-no-important */
display: none;
}

.c-menu-title {
@@ -106,3 +103,104 @@ $image-path: '/media/protocol/img';
}
}
}

.c-sub-navigation {
.c-sub-navigation-icon {
display: none;

// only show in IE9 which supports SVG
:root & {
display: inline-block;
float: none;
}
}
}

.c-product-info {
.c-steps img.c-step-icon {
display: none;

// only show in IE9 which supports SVG
:root & {
display: inline;
}
}

.c-steps a.c-step-icon {
img {
display: none;
}

&:after { /* stylelint-disable-line selector-pseudo-element-colon-notation */
content: ' (×)';
}

// revert for IE9 which supports SVG
:root & {
img {
display: inline;
}

&:after { /* stylelint-disable-line selector-pseudo-element-colon-notation */
content: '';
}
}
}
}

// * -------------------------------------------------------------------------- */
// Redesigned header

.m24-c-navigation-logo-link {
@include image-replaced;
background: transparent url('/media/img/logos/m24/lockup-black-on-white.png') center center no-repeat;
display: block;
height: 48px;
width: 160px;

.m24-c-navigation-logo-image {
display: none;
}
}

// only show top-level menu items
.m24-c-menu {
.m24-c-menu-panel {
display: none;
}

.m24-c-menu-title,
ul,
li {
@include bidi(((margin-right, $spacing-md, margin-left, 0),));
display: inline-block;
*display: inline;
font-weight: bold;
margin-top: $spacing-sm;
zoom: 1;
}

.m24-c-menu-title-icon {
display: none;

// only show in IE9 which supports SVG
:root & {
display: inline-block;
}
}
}

// hide SVG or JS-dependent interaction from IE visitors
.m24-c-navigation-menu-button,
.m24-c-flag,
.moz24-footer-logo-image-bottom {
display: none;
}

.m24-pencil-banner {
@include bidi(((float, right, left),));

button {
display: none;
}
}
12 changes: 0 additions & 12 deletions media/static-bundles.json
Original file line number Diff line number Diff line change
@@ -133,25 +133,13 @@
],
"name": "firefox_desktop_download_thanks"
},
{
"files": [
"css/firefox/new/desktop/thanks-ie.scss"
],
"name": "firefox_desktop_download_thanks_ie"
},
{
"files": [
"css/firefox/new/common/thanks-messaging.scss",
"css/firefox/new/basic/thanks.scss"
],
"name": "firefox_new_thanks"
},
{
"files": [
"css/firefox/new/basic/ie.scss"
],
"name": "firefox_new_ie"
},
{
"files": [
"css/security/security.scss"