Update out of date modal messaging. Bug 1088887.

mozilla · Nov 17, 2014 · 92cc0ee · 92cc0ee
1 parent 5cccb2e
commit 92cc0ee
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 67 deletions.
diff --git a/css/common.css b/css/common.css
@@ -121,7 +121,7 @@ html[dir="rtl"] #modal-content {
 
 #modal-content h1 {
     font-family: 'OpenSansLight',sans-serif;
-    margin: 0;
+    margin: 0 0 15px 0;
 }
 
 #modal-content p {
@@ -143,7 +143,7 @@ html[dir="rtl"] #modal-content {
     background-color: #659324;
     background-image: -moz-linear-gradient(#81BC2E, #659324);
     background-repeat: repeat-x;
-    -moz-border-radius: 8px;
+    -moz-border-radius: 6px;
     border-bottom-color: -moz-use-text-color;
     border-bottom-style: none;
     border-bottom-width: 0;
@@ -168,66 +168,45 @@ 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);
     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;
 }
 
 #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;
     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; }
diff --git a/js/ffx36.js b/js/ffx36.js
@@ -13,8 +13,6 @@ FFX36.Common = (function() {
 
 			$('.upgradable').show();
 
-			_break_button_text();
-
 			$shade.fadeIn('fast', function() {
 				$modal.slideDown('fast');
 			});
@@ -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 if (version < 29) {
+					$('#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;
 	}
 

diff --git a/templates/index.html b/templates/index.html
@@ -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>