Skip to content
This repository has been archived by the owner on Jan 19, 2022. It is now read-only.

Update out of date messaging. Bug 1088887. #12

Merged
merged 1 commit into from Nov 21, 2014
Merged

Update out of date messaging. Bug 1088887. #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
75 changes: 32 additions & 43 deletions css/common.css
View file
Open in desktop
Expand Up @@ -36,11 +36,13 @@ body,td,a,p,.h{font-family:arial,sans-serif}body{color:#333;margin:3px 8px 2em}i
}

#shade.passive {
background: -moz-radial-gradient(center, ellipse cover, rgba(66,100,169,0.6) 0%, rgba(66,100,169,0.6) 70%, rgba(32,58,134,0.6) 100%);
background: -moz-radial-gradient(center, ellipse cover, rgba(66,100,169,0.6) 0%, rgba(66,100,169,0.6) 70%, rgba(32,58,134,0.6) 100%);
background: radial-gradient(ellipse at center, rgba(66,100,169,0.6) 0%, rgba(66,100,169,0.6) 70%, rgba(32,58,134,0.6) 100%);
}

#shade.urgent {
background: -moz-radial-gradient(center, ellipse cover, rgba(139,0,0,0.8) 0%, rgba(139,0,0,0.8) 70%, rgba(76,0,0,0.8) 100%);
background: -moz-radial-gradient(center, ellipse cover, rgba(139,0,0,0.8) 0%, rgba(139,0,0,0.8) 70%, rgba(76,0,0,0.8) 100%);
background: radial-gradient(ellipse at center, rgba(139,0,0,0.8) 0%, rgba(139,0,0,0.8) 70%, rgba(76,0,0,0.8) 100%);
}

#modal {
Expand All @@ -53,8 +55,10 @@ body,td,a,p,.h{font-family:arial,sans-serif}body{color:#333;margin:3px 8px 2em}i
background-repeat: repeat;
background-size: auto auto;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomleft: 4px;
border-radius: 0 0 4px 4px;
-moz-box-shadow: 0 4px 4px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0 4px 4px 2px rgba(0, 0, 0, 0.3);
display: none;
left: 50%;
margin-left: -282px;
Expand All @@ -72,7 +76,8 @@ body,td,a,p,.h{font-family:arial,sans-serif}body{color:#333;margin:3px 8px 2em}i
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: -moz-linear-gradient(center top , #6F6F6F 0%, rgba(228, 228, 228, 0.66) 10%, rgba(251, 251, 251, 0) 29%, rgba(255, 255, 255, 0) 32%);
background-image: -moz-linear-gradient(center top, #6F6F6F 0%, rgba(228, 228, 228, 0.66) 10%, rgba(251, 251, 251, 0) 29%, rgba(255, 255, 255, 0) 32%);
background-image: linear-gradient(to bottom, #6F6F6F 0%, rgba(228, 228, 228, 0.66) 10%, rgba(251, 251, 251, 0) 29%, rgba(255, 255, 255, 0) 32%);
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
Expand Down Expand Up @@ -121,7 +126,7 @@ html[dir="rtl"] #modal-content {

#modal-content h1 {
font-family: 'OpenSansLight',sans-serif;
margin: 0;
margin: 0 0 15px 0;
}

#modal-content p {
Expand All @@ -142,8 +147,10 @@ html[dir="rtl"] #modal-content {
-moz-text-decoration-style: solid;
background-color: #659324;
background-image: -moz-linear-gradient(#81BC2E, #659324);
background-image: linear-gradient(to bottom, #81BC2E 0%, #659324 100%);
background-repeat: repeat-x;
-moz-border-radius: 8px;
-moz-border-radius: 6px;
border-radius: 6px;
border-bottom-color: -moz-use-text-color;
border-bottom-style: none;
border-bottom-width: 0;
Expand All @@ -168,66 +175,48 @@ html[dir="rtl"] #modal-content {
border-top-color: -moz-use-text-color;
border-top-style: none;
border-top-width: 0;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1), 0 -2px 0 0 rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 0 rgba(0,0,0,0.2), inset 0 -1px 0 0 rgba(0,0,0,0.3);
box-shadow: 0 1px 0 0 rgba(0,0,0,0.2), inset 0 -1px 0 0 rgba(0,0,0,0.3);
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-size: 14px;
height: 54px;
line-height: 48px;
margin: 25px 0 4px 0;
margin: 25px 0 6px 0;
padding: 0;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
text-decoration: none;
width: auto;
width: 240px;
-moz-transition: all 0.25s linear 0s;
transition: all 0.25s linear 0s;
}

#modal-content a.download:hover {
-moz-transition: all 0.25s linear 0s;
-moz-box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1), 0 -2px 0 0 rgba(0, 0, 0, 0.2) inset, 0 12px 24px 2px #83C822 inset;
-moz-box-shadow: 0 1px 0 0 rgba(0,0,0,0.2), inset 0 -1px 0 0 rgba(0,0,0,0.3),inset 0 8px 18px 2px #83c822;
box-shadow: 0 1px 0 0 rgba(0,0,0,0.2), inset 0 -1px 0 0 rgba(0,0,0,0.3),inset 0 8px 18px 2px #83c822;
color: #FFFFFF;
text-decoration: none;
}

#modal-content a.download span {
display: block;
float: left;
margin: 14px 0 0 0;
padding-right: 6px;
padding: 20px 30px;
width: auto;
height: 40px;
max-width: 180px;
color: #ddffaf;
font-size: 12px;
line-height: 12px;
opacity: .7;
}

#modal-content a.download .arrow {
float: right;
width: 34px;
margin: 12px 18px 0 0;
}

#modal-content a.download .logo {
float: left;
width: 93px;
margin: 12px 10px 0 27px;
}

/* for long 'free download' translations, hide the arrow */
#modal-content a.download.no-arrow img { display: none; }
#modal-content a.download.no-arrow span { width: 105px; }

html[dir="rtl"] #modal-content a.download span {

color: #fff;
font-size: 18px;
line-height: 18px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

#modal-content a.small {
font-size: 13px;
color: #108dd0;
text-decoration: underline;
display: block;
}

.clear { clear: both; }
.browser-msg {
display: none;
}

.clear { clear: both; }
36 changes: 16 additions & 20 deletions js/ffx36.js
View file
Open in desktop
Expand Up @@ -13,8 +13,6 @@ FFX36.Common = (function() {

$('.upgradable').show();

_break_button_text();

$shade.fadeIn('fast', function() {
$modal.slideDown('fast');
});
Expand Down Expand Up @@ -55,34 +53,32 @@ FFX36.Common = (function() {
});
}

function _break_button_text() {
var text = $('a.download span:first').text();
var pieces = text.split(' ');

// if we have a space in the text, insert a <br> close to the middle
if (pieces.length > 0) {
var br_pos = Math.floor((pieces.length/2)) - 1;
var new_html = '';
for (var i = 0; i < pieces.length; i++) {
new_html += pieces[i] + ((br_pos === i) ? '<br />' : ' ');
}

$('a.download span:first').html(new_html);
}
}

function _is_upgradable() {
var matches = /Firefox\/(\d+)/.exec(navigator.userAgent);

// if using Fx
if (matches !== null && matches.length > 1) {
var version = parseInt(matches[1], 10);

if ( (/(PPC|Mac OS X 10.[0-4])/.test(navigator.userAgent) === false) && (version < 4) ) {
// make sure platform is upgradeable (not on PPC or OS X 10.0 - 10.4)
if ( (/(PPC|Mac OS X 10.[0-4])/.test(navigator.userAgent) === false) && (version < 29) ) {
// display appropriate message
if (version === 3) {
$('#fx3').show();
} else if (version === 4) {
$('#fx4').show();
} else {
$('#fxother').show();
}

return true;
}
// if not using Fx, redirect
} else {
document.location.href = 'https://www.mozilla.org/firefox/desktop/';
}

// not upgradable if above conditions fail to match
// not upgradeable if above conditions fail to match
return false;
}

Expand Down
25 changes: 17 additions & 8 deletions templates/index.html
View file
Open in desktop
Expand Up @@ -198,18 +198,27 @@ <h1>{{ _('Your Firefox is out of date!') }}</h1>

<p>{{ _('Please download the latest version to continue.') }}</p>
{% else %}
<h1>{{ _('Your browser is out of date.') }}</h1>
<h1>{{ _('A message about your browser') }}</h1>

<p>{{ _('Upgrade today for the latest in speed and security.') }}</p>
<p class="browser-msg" id="fx3">
{{ _("You're using Firefox 3, which was amazing in 2010, but why not try a brand new version of Firefox instead?") }}
{{ _("It's better, more secure and only takes a minute to update.") }}
</p>

<p class="browser-msg" id="fx4">
{{ _("You're using Firefox 4, which was amazing in 2011, but why not try a brand new version of Firefox instead?") }}
{{ _("It's better, more secure and only takes a minute to update.") }}
</p>

<p class="browser-msg" id="fxother">
{{ _('Looks like you’re using an older version of Firefox. Update to stay fast and safe.') }}
</p>
{% endif %}

<a href="https://www.mozilla.org/firefox/?utm_source=fx36start&amp;utm_medium=banner&amp;utm_campaign=3.6EOL{% if VERSION == 'urgent' %}Red{% else %}Blue{% endif %}" class="download" title="{{ _('Free Download') }}" id="download-cta">
<img class="logo" src="img/firefox-logo.png" width="93" height="27" />
<span>{{ _('Free Download') }}</span>
<img class="arrow" src="img/down-arrow.png" width="34" height="27" />
<div class="clear"></div>
<a href="https://www.mozilla.org/firefox/new/?utm_source=fx36start&amp;utm_medium=banner&amp;utm_campaign=3.6EOLBlue{% if VERSION == 'urgent' %}Red{% else %}Blue{% endif %}" class="download" title="{{ _('Free Download') }}" id="download-cta">
<span>{{ _('Update Firefox Now') }}</span>
</a>

<br />
<a href="#close" title="{{ _("No thanks, I'll risk it.") }}" class="small dismiss">{{ _("No thanks, I'll risk it.") }}</a>
</div>
<div class="clear"></div>
Expand Down