Fix Bug 527907 - Expose x86_64 Linux builds on the download pages

bedrock/firefox/firefox_details.py

@@ -22,6 +22,10 @@ class FirefoxDetails(ProductDetails):
             'title': 'Linux',
             'id': 'linux',
         },
+        'Linux 64': {
+            'title': 'Linux 64-bit',
+            'id': 'linux64',
+        },
     }
     channel_map = {
         'aurora': 'FIREFOX_AURORA',
@@ -86,6 +90,13 @@ class FirefoxDetails(ProductDetails):
                                                           version),
                 }
 
+            # Append a Linux 64-bit build
+            if 'Linux' in platforms:
+                build_info['platforms']['Linux 64'] = {
+                    'download_url': self.get_download_url('Linux 64', locale,
+                                                          version),
+                }
+
             f_builds.append(build_info)
 
         return sorted(f_builds, key=itemgetter('name_en'))

bedrock/firefox/templates/firefox/all.html

@@ -113,6 +113,7 @@
             <th scope="col">{{ _('Windows') }}</th>
             <th scope="col">{{ _('Mac OS X') }}</th>
             <th scope="col">{{ _('Linux') }}</th>
+            <th scope="col">{{ _('Linux 64-bit') }}</th>
           </tr>
         </thead>
         <tbody>
@@ -133,6 +134,7 @@
     {{ build_link(build, 'Windows', _('Download for Windows')) }}
     {{ build_link(build, 'OS X', _('Download for Mac OS X')) }}
     {{ build_link(build, 'Linux', _('Download for Linux')) }}
+    {{ build_link(build, 'Linux 64', _('Download for 64-bit Linux')) }}
   </tr>
 {% endmacro %}
 
@@ -143,7 +145,7 @@
 -->
 {% macro build_link(build, platform, tooltip) %}
   {% if build.platforms[platform] %}
-    <td class="download {% if platform == 'Windows' %}win{% elif platform == 'OS X' %}mac{% elif platform == 'Linux' %}linux{% endif %}"><a href="{{ build.platforms[platform].download_url }}" title="{{ tooltip }}">{{ _('Download') }}</a></td>
+    <td class="download {% if platform == 'Windows' %}win{% elif platform == 'OS X' %}mac{% elif platform == 'Linux' %}linux{% elif platform == 'Linux 64' %}linux64{% endif %}"><a href="{{ build.platforms[platform].download_url }}" title="{{ tooltip }}">{{ _('Download') }}</a></td>
   {% else %}
     <td class="unavailable">{{ _('Not Yet Available') }}</td>
   {% endif %}

bedrock/firefox/tests.py

@@ -113,6 +113,12 @@ class TestFirefoxDetails(TestCase):
                              [('product', 'firefox-17.0'),
                               ('os', 'osx'),
                               ('lang', 'pt-BR')])
+        # Linux 64-bit
+        url = firefox_details.get_download_url('Linux 64', 'en-US', '26.0')
+        self.assertListEqual(parse_qsl(urlparse(url).query),
+                             [('product', 'firefox-26.0'),
+                              ('os', 'linux64'),
+                              ('lang', 'en-US')])
 
     def test_filter_builds_by_locale_name(self):
         # search english
@@ -147,6 +153,13 @@ class TestFirefoxDetails(TestCase):
         eq_(len(builds), 1)
         eq_(builds[0]['name_en'], 'French')
 
+    def test_linux64_build(self):
+        builds = firefox_details.get_filtered_full_builds(
+            firefox_details.latest_version('release')
+        )
+        url = builds[0]['platforms']['Linux 64']['download_url']
+        eq_(parse_qsl(urlparse(url).query)[1], ('os', 'linux64'))
+
     @patch.dict(firefox_details.firefox_versions,
                 LATEST_FIREFOX_VERSION='25.0.2')
     def test_esr_major_versions(self):

media/css/firefox/all.less

@@ -14,7 +14,7 @@
     h2 {
         font-size: 24px;
         letter-spacing: -0.25px;
-        line-height: 1.1;
+        line-height: 1.4;
         .span-all();
     }
     p {
@@ -27,16 +27,6 @@
     }
 }
 
-.firefox-all-release #main-feature {
-    h1 {
-        font-size: 64px;
-    }
-    h2 {
-        .span(10);
-        float: none;
-    }
-}
-
 #language-search {
     .billboard();
     padding-top: @baseLine;
@@ -77,11 +67,21 @@
     table {
         .table;
         width: 100%;
-        thead th:first-child {
-            width: 100%;
+        thead {
+            th {
+                white-space: nowrap;
+                &:not([colspan]) {
+                    width: 15%;
+                }
+            }
+            th, td {
+                padding: 10px 0;
+            }
         }
-        tbody th {
-            font-weight: normal;
+        tbody {
+            th, td {
+                padding: 10px 10px 10px 0;
+            }
         }
         .unavailable {
             padding-right: @baseLine * 2;
@@ -91,24 +91,56 @@
             text-shadow: 0 -1px #fff;
         }
         .download {
-            padding-right: @baseLine * 2;
+            padding: 10px 0;
             a {
                 display: block;
-                padding: 10px 10px 10px 50px;
+                padding: 10px 10px 10px 45px;
                 background-position: 0 50%;
                 background-repeat: no-repeat;
-                background-image: url(/media/img/firefox/all/download-icons.png);
+                background-image: url(/media/img/firefox/all/download-icons.png?2014-01);
             }
-            &.mac a {
+            &.win64 a {
                 background-position: -300px 50%
             }
             &.linux a {
                 background-position: -600px 50%
             }
+            &.linux64 a {
+                background-position: -900px 50%
+            }
+            &.mac a {
+                background-position: -1200px 50%
+            }
         }
     }
 }
 
+/* Aurora Download Page */
+.space #main-content table tbody {
+    tr, th, td {
+        border-color: rgba(255,255,255,0.2);
+    }
+}
+
+/* Desktop */
+@media only screen and (min-width: @breakDesktop) {
+    .firefox-all-release #main-feature h1 {
+        font-size: 64px;
+    }
+}
+
+/* Tablet and Mobile */
+@media only screen and (max-width: @breakDesktop) {
+    #main-content table .download a {
+        overflow: hidden;
+        margin: 0 auto;
+        padding: 0;
+        width: 40px;
+        height: 40px;
+        text-indent: 200%;
+    }
+}
+
 /* Tablet Layout: 760px */
 @media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {
 
@@ -143,12 +175,27 @@
         }
     }
 
-    #main-content table .download {
-        padding-right: @baseLine;
+    #main-content table thead th:not([colspan]) {
+        text-align: center;
     }
 
 }
 
+/* Wide mobile layout: 480px; */
+@media only screen and (min-width: @breakMobileLandscape) and (max-width: @breakTablet) {
+    #main-content table tbody {
+        th {
+            width: 50%;
+        }
+        td[lang] {
+            float: left;
+            width: 50%;
+        }
+        td.download {
+            margin-top: -18px;
+        }
+    }
+}
 
 /* Mobile layout: 320px */
 @media only screen and (max-width: @breakTablet) {
@@ -204,19 +251,24 @@
                 display: none;
             }
             .download {
-                padding-right: @baseLine;
-                a {
-                    max-width: 200px;
-                }
-            }
-            td,
-            th {
-                border: 0;
-                padding: 5px;
+                float: left;
+                padding: 0;
             }
             tr {
+                overflow: hidden;
                 border-top: 1px solid rgba(0, 0, 0, 0.2);
             }
+            tbody {
+                th, td {
+                    border: 0;
+                }
+                th {
+                    padding: 5px 0 0;
+                }
+                td {
+                    padding: 0 0 5px;
+                }
+            }
         }
     }
 }