Merge lp:~elachuni/ubuntu-webcatalog/lazy-screenshots into lp:ubuntu-webcatalog

[Anthony Lenton]

Made screenshots load on demand when the details for an app are requested, instead of preloading them all when the import_app_install_data is run.

This branch makes screenshots load on demand when the details for an app are requested, instead of preloading them all when the import_app_install_data is run.

The screenshots carousel widget was improved to fetch screenshots for an app via AJAX. The following cases were checked:

a) 2+ screenshots: The first screenshot is displayed by default, but a carousel widget is added via JS on page load.
b) 1 screenshots: The screenshot is included statically
c) 0 screenshots: A link to screenshots.ubuntu.com is included statically. Screenshots are checked via AJAX. If one or more screenshots are retrieved, revert to cases a) or b).

While I was there I added caching the caching middleware to the dev environment and excepted all of the api calls, so that we can enable caching on staging and prod too.

[Danny Tamez (zematynnad)]

Nice work Anthony.

review: Approve

=== modified file 'django_project/config/main.cfg'
--- django_project/config/main.cfg	2012-03-27 20:43:10 +0000
+++ django_project/config/main.cfg	2012-04-18 22:40:24 +0000
@@ -27,12 +27,14 @@
                  pgtools
 login_url = /openid/login/
 managers = %(admins)s
-middleware_classes = django.middleware.common.CommonMiddleware
+middleware_classes = django.middleware.cache.UpdateCacheMiddleware
+                     django.middleware.common.CommonMiddleware
                      django.contrib.sessions.middleware.SessionMiddleware
                      django.middleware.csrf.CsrfViewMiddleware
                      django.contrib.auth.middleware.AuthenticationMiddleware
                      django.contrib.messages.middleware.MessageMiddleware
                      webcatalog.middleware.exception.LogExceptionMiddleware
+                     django.middleware.cache.FetchFromCacheMiddleware
 fixture_dirs =
 
 secret_key = eepu9Av5ixage9ahhodovahfaiFoorodahf6keip3eichaeW9f
 
=== modified file 'src/webcatalog/admin.py'
--- src/webcatalog/admin.py	2012-03-20 22:23:31 +0000
+++ src/webcatalog/admin.py	2012-04-18 22:40:24 +0000
@@ -24,6 +24,7 @@
 from django.contrib import admin
 from webcatalog.models import (
     Application,
+    ApplicationMedia,
     Department,
     DistroSeries,
     Exhibit,
@@ -57,7 +58,18 @@
 class DepartmentAdmin(admin.ModelAdmin):
     prepopulated_fields = {"slug": ("name",)}
 
+
+class ApplicationMediaAdmin(admin.ModelAdmin):
+    search_fields = ('application__package_name',)
+    list_filter = ('application__distroseries',)
+    list_display = ('__unicode__', 'distroseries', 'url')
+    raw_id_fields = ('application',)
+
+    def distroseries(self, obj):
+        return obj.application.distroseries
+
 admin.site.register(Application, ApplicationAdmin)
+admin.site.register(ApplicationMedia, ApplicationMediaAdmin)
 admin.site.register(Department, DepartmentAdmin)
 admin.site.register(DistroSeries)
 admin.site.register(Exhibit, ExhibitAdmin)
 
=== modified file 'src/webcatalog/api/urls.py'
--- src/webcatalog/api/urls.py	2012-01-06 17:54:47 +0000
+++ src/webcatalog/api/urls.py	2012-04-18 22:40:24 +0000
@@ -15,6 +15,7 @@
 #   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 from django.conf.urls.defaults import url, patterns
+from django.views.decorators.cache import never_cache
 
 from piston.resource import Resource
 from webcatalog.api.handlers import (
@@ -34,13 +35,13 @@
         super(CSRFExemptResource, self).__init__(handler, authentication)
         self.csrf_exempt = True
 
-server_status_resource = Resource(handler=ServerStatusHandler)
-list_machines_resource = Resource(handler=ListMachinesHandler,
-    authentication=auth)
-machine_resource = CSRFExemptResource(handler=MachineHandler,
-    authentication=auth)
-packages_resource = CSRFExemptResource(handler=PackagesHandler,
-    authentication=auth)
+server_status_resource = never_cache(Resource(handler=ServerStatusHandler))
+list_machines_resource = never_cache(Resource(handler=ListMachinesHandler,
+    authentication=auth))
+machine_resource = never_cache(CSRFExemptResource(handler=MachineHandler,
+    authentication=auth))
+packages_resource = never_cache(CSRFExemptResource(handler=PackagesHandler,
+    authentication=auth))
 
 urlpatterns = patterns('',
     # get status of the service (usually just "ok", might be "read-only")
 
=== modified file 'src/webcatalog/management/commands/import_app_install_data.py'
--- src/webcatalog/management/commands/import_app_install_data.py	2012-04-03 17:45:07 +0000
+++ src/webcatalog/management/commands/import_app_install_data.py	2012-04-18 22:40:24 +0000
@@ -22,7 +22,6 @@
     with_statement,
     )
 
-import json
 import os
 import re
 import shutil
@@ -32,7 +31,6 @@
 from glob import iglob
 from optparse import make_option
 from tempfile import NamedTemporaryFile
-from urlparse import urljoin
 
 import apt
 from apt.cache import FetchFailedException
@@ -166,27 +164,6 @@
 
         shutil.rmtree(data_dir)
 
-    def get_screenshot_urls_from_server(self, app):
-        url = urljoin(settings.SCREENSHOTS_BASE_URL,
-                      '/json/package/{0}'.format(app.package_name))
-        try:
-            response = urllib.urlopen(url)
-            if response.getcode() == 200:
-                data = json.loads(response.read())
-                for entry in data['screenshots']:
-                    screenshot_url = entry['large_image_url']
-
-                    self.output("Adding {0} to {1}\n".format(
-                        screenshot_url,
-                        app.package_name), 2)
-                    app.applicationmedia_set.get_or_create(
-                        media_type='screenshot',
-                        url=screenshot_url,
-                    )
-                app.save()
-        except (IOError, TypeError):
-            pass
-
     def get_package_data_for_series(self, package_name, distroseries,
         working_dir):
         install_data_url = self.get_package_uri_for_series(
@@ -216,7 +193,6 @@
             app.distroseries = distroseries
             app.save()
             app.update_departments()
-            self.get_screenshot_urls_from_server(app)
             self.add_icon_to_app(app, icon_dir)
             if self.verbosity > 1:
                 self.output(u"{0} created.\n".format(app.name).encode(
@@ -338,7 +314,6 @@
                     version=version,
                     comment=app_comment,
                     )
-            self.get_screenshot_urls_from_server(app)
             self.fetch_icon_from_extras(app, candidate)
         if self.verbosity == 1:
             self.output("\n", 1)
 
=== modified file 'src/webcatalog/static/css/carousel.css'
--- src/webcatalog/static/css/carousel.css	2012-04-12 09:55:28 +0000
+++ src/webcatalog/static/css/carousel.css	2012-04-18 22:40:24 +0000
@@ -16,7 +16,6 @@
     z-index: 20;
     left: 50%;
     bottom: 5px;
-    margin-left: -35px;
 }
 .carousel .pagination li {
     float: left;
@@ -202,40 +201,24 @@
 }
 
 /* Screenshots carousel */
-.screenshot .carousel-wrapper {
+div.screenshot .carousel-wrapper {
     height: 190px;
     width: 233px;
 }
-.screenshot .carousel .pagination li a.active {
+div.screenshot .carousel-wrapper .slide {
+    margin: 0;
+    width: 233px;
+}
+div.screenshot .carousel-wrapper .slide img {
+    margin: 0 auto;
+    display: block
+}
+div.screenshot .carousel .pagination li a.active {
     background-color: #DD4814;
 }
-#screenshots-controls {
-    width: 70px;
-    height: 32px;
-    margin-left: 94px;
-}
-#screenshots-controls .next, #screenshots-controls .prev {
-    background: url(/assets/images/arrow-sliders.png) no-repeat 0 0;
-    float: left;
-    z-index: 20;
-    width: 32px;
-    height: 29px;
-}
-#screenshots-controls .next span, #screenshots-controls .prev span {
-    position:absolute;
-    left: -9999em;
-    height: 0;
-    width: 0;
-}
-#screenshots-controls .prev {
-    background-position:0 0;
-}
-#screenshots-controls .next {
-    background-position: -32px 0;
-}
-#screenshots-controls .prev:hover, #screenshots-controls .prev:focus,
-#screenshots-controls .next:hover, #screenshots-controls .next:focus {
-    outline: none;
+div.screenshot .carousel .pagination {
+    bottom: 0;
+}
 
 .top-rated-stars {
     position: relative;
 
=== modified file 'src/webcatalog/static/js/carousel.js'
--- src/webcatalog/static/js/carousel.js	2012-03-08 18:00:09 +0000
+++ src/webcatalog/static/js/carousel.js	2012-04-18 22:40:24 +0000
@@ -87,16 +87,21 @@
                     this.gotoSlide(parseInt(targetClass.replace("p-", ""), 10));
                 }
             }, this);
+            // Center pagination
+            olNode.setStyle('left', parseInt((
+                parseInt(olNode.get('parentNode').getComputedStyle('width')) -
+                parseInt(olNode.getComputedStyle('width'))) / 2) + 'px');
         },
         generateControls: function() {
-            var prev = Y.Node.create('<a href="#" class="prev"><span>Previous Slide</span></a>'),
-                next = Y.Node.create('<a href="#" class="next"><span>Next Slide</span></a>'),
-                controlsContainer = this.get("controlsContainer");
-
-            next.on("click", this.next, this);
-            prev.on("click", this.prev, this);
-            controlsContainer.appendChild(prev);
-            controlsContainer.appendChild(next);
+            var controlsContainer = this.get("controlsContainer");
+            if (controlsContainer) {
+                var prev = Y.Node.create('<a href="#" class="prev"><span>Previous Slide</span></a>'),
+                    next = Y.Node.create('<a href="#" class="next"><span>Next Slide</span></a>');
+                next.on("click", this.next, this);
+                prev.on("click", this.prev, this);
+                controlsContainer.appendChild(prev);
+                controlsContainer.appendChild(next);
+            }
         },
         advance: function(e, val){
             if (e) {
@@ -171,11 +176,7 @@
             },
             controlsContainer: {
                 setter: function(sel) {
-                    var n = Y.one(sel);
-                    if (!n) {
-                        Y.log('UWC:Carousel - invalid selector provided: ' + sel);
-                    }
-                    return n;
+                    return Y.one(sel);
                 }
             },
             slideAnimDuration: { value: 1 },
 
=== added file 'src/webcatalog/static/light/images/bullet.png'
 Binary files src/webcatalog/static/light/images/bullet.png	1970-01-01 00:00:00 +0000 and src/webcatalog/static/light/images/bullet.png	2012-04-18 22:40:24 +0000 differ
=== modified file 'src/webcatalog/templates/webcatalog/application_detail.html'
--- src/webcatalog/templates/webcatalog/application_detail.html	2012-04-05 01:09:37 +0000
+++ src/webcatalog/templates/webcatalog/application_detail.html	2012-04-18 22:40:24 +0000
@@ -83,11 +83,7 @@
     </div>
     <div class="description">
       <div class="screenshot">
-        {% if application.screenshots %}
           {% include "webcatalog/screenshot_widget.html" %}
-        {% else %}
-        <img src="http://screenshots.ubuntu.com/thumbnail-with-version/{{ application.package_name }}/ignored" />
-        {% endif %}
       </div>
       <p>{{ application.description|htmlize_package_description }}</p>
       <div class="install-button">{% install_options application %}</div>
 
=== added file 'src/webcatalog/templates/webcatalog/application_screenshots.html'
--- src/webcatalog/templates/webcatalog/application_screenshots.html	1970-01-01 00:00:00 +0000
+++ src/webcatalog/templates/webcatalog/application_screenshots.html	2012-04-18 22:40:24 +0000
@@ -0,0 +1,25 @@
+{% extends "webcatalog/base.html" %}
+{% load i18n %}
+{% load webcatalog %}
+
+{% block title %}Screenshots for {{ application.name }}{% endblock %}
+{% block header %}Screenshots for for {{ application.name }}{% endblock %}
+
+{% block content %}
+    {% include "webcatalog/breadcrumbs_snippet.html" %}
+  <div id="sc-mockup">
+    <div class="header">
+      {% rating_summary application.ratings_average 'large' application.ratings_total %}
+      <img class="icon64" src="{{ application.icon_url_or_default }}"/>
+      <h2>{{ application.name }}</h2>
+      <p>{{ application.comment }}</p>
+    </div>
+    <ul>
+    {% for screenshot in screenshots %}
+      <li class="screenshot">
+        <img src="{{ screenshot }}">
+      </li>
+    {% endfor %}
+    </ul>
+  </div>
+{% endblock %}
 
=== modified file 'src/webcatalog/templates/webcatalog/screenshot_widget.html'
--- src/webcatalog/templates/webcatalog/screenshot_widget.html	2012-03-20 10:04:41 +0000
+++ src/webcatalog/templates/webcatalog/screenshot_widget.html	2012-04-18 22:40:24 +0000
@@ -1,28 +1,72 @@
-{% if application.screenshots|length_is:1 %}
-  <img src="{{ application.screenshots.0 }}" />
+{% load url from future %}
+<div id="screenshots_placeholder">
+{% if application.screenshots|length_is:0 %}
+    <img src="http://screenshots.ubuntu.com/thumbnail-with-version/{{ application.package_name }}/ignored" />
 {% else %}
-  <div class="carousel-wrapper">
-    <div id="screenshots-carousel" class="carousel">
-      <ol class="carouselol">
-        {% for screenshot in application.screenshots %}
-        <li class="slide{% if forloop.counter > 1 %} disabled{% endif %}">
-          <img src="{{ screenshot }}" />
-        </li>
-        {% endfor %}
-      </ol>
+    <div class="carousel-wrapper">
+        <div id="screenshots-carousel" class="carousel">
+            <ol class="carouselol">{% for screenshot in application.screenshots %}
+                <li class="slide"><img src="{{ screenshot }}" /></li>{% endfor %}
+            </ol>
+        </div>
     </div>
-  </div>
-  <div id="screenshots-controls"></div>
+{% endif %}
+</div>
+
+{% comment %}
+If there are multiple screenshots, display a carousel.  If there are none,
+we could retrieve multiple screenshots via AJAX.  So only skip this section
+if the app has exactly 1 screenshot.
+{% endcomment %}
+{% if not application.screenshots|length_is:1 %}
   <script type="text/javascript">
-  YUI({combine: true, comboBase: '{% url wc-combo %}?', root: 'yui/3.4.0/build/'}).use('uwc-carousel', function(Y) {
-      var caro = new Y.uwc.Carousel({
-          nodeContainer: "#screenshots-carousel",
-          controlsContainer: "#screenshots-controls",
-          containerHeight: 170,
-          containerWidth: 225,
-          autoPlay: true
-      });
-      Y.all('.slide').removeClass('disabled');
-  });
+  YUI({combine: true, comboBase: '{% url 'wc-combo' %}?', root: 'yui/3.4.0/build/'}).use('io-base', 'uwc-carousel', function(Y) {
+
+    function setup_carousel() {
+        var caro = new Y.uwc.Carousel({
+            nodeContainer: "#screenshots-carousel",
+            controlsContainer: "#nocontrols",
+            autoPlay: false,
+            slideAnimDuration: 0.6
+        });
+        Y.all('.slide').removeClass('disabled');
+    }
+
+{% if application.screenshots|length_is:0 %}
+    var uri = "{% url 'wc-package-screenshots' application.package_name %}";
+    function complete(id, obj) {
+        var id = id; // Transaction ID.
+        var json = JSON.parse(obj.responseText);
+        if (json.length > 1) {
+            var content_div = document.createElement('div');
+            content_div.className = 'carousel-wrapper';
+            var carousel_div = document.createElement('div');
+            carousel_div.id = 'screenshots-carousel';
+            carousel_div.className = 'carousel';
+            content_div.appendChild(carousel_div)
+            var ol = document.createElement('ol')
+            ol.className = 'carouselol';
+            carousel_div.appendChild(ol);
+            for (var i in json) {
+                var url = json[i];
+                var li = document.createElement('li');
+                li.className = 'slide';
+                ol.appendChild(li);
+                var img = document.createElement('img');
+                img.src = url;
+                li.appendChild(img);
+            }
+            var screenshots_div = Y.one('#screenshots_placeholder');
+            screenshots_div.get('childNodes').remove();
+            screenshots_div.appendChild(content_div);
+            setup_carousel();
+        }
+    };
+    Y.on('io:complete', complete, Y);
+    var request = Y.io(uri);
+{% else %}
+    setup_carousel();
+{% endif %}
+    });
   </script>
 {% endif %}
 
=== modified file 'src/webcatalog/tests/test_commands.py'
--- src/webcatalog/tests/test_commands.py	2012-04-17 17:09:03 +0000
+++ src/webcatalog/tests/test_commands.py	2012-04-18 22:40:24 +0000
@@ -149,11 +149,6 @@
             'DISK_APT_CACHE_LOCATION', self.tmp_apt_cache)
         self.patch_cache_setting.start()
 
-        self.patch_get_screenshot_urls = patch(
-            'webcatalog.management.commands.import_app_install_data.'
-            'Command.get_screenshot_urls_from_server')
-        self.patch_get_screenshot_urls.start()
-
         if self.use_mock_apt_cache:
             # The apt.Cache class is patched to return our own mock which
             # will be subscriptable with a pre-set dict with mock ock apt
@@ -165,8 +160,6 @@
 
     def tearDown(self):
         self.patch_cache_setting.stop()
-        if hasattr(self, 'patch_get_screenshot_urls'):
-            self.patch_get_screenshot_urls.stop()
         shutil.rmtree(self.tmp_apt_cache)
         if self.use_mock_apt_cache:
             self.patch_cache.stop()
@@ -290,29 +283,6 @@
         self.assertTrue(firefox.icon.size > 1)
         self.assertTrue(scribus.icon.size > 1)
 
-    def test_screenshots_added_to_the_model(self):
-        fn = 'webcatalog.management.commands.import_app_install_data.urllib'
-        self.patch_get_screenshot_urls.stop()
-        del self.patch_get_screenshot_urls
-        with patch(fn) as mock_urllib:
-            mock_response = Mock()
-            mock_response.getcode.return_value = 200
-            mock_response.read.return_value = json.dumps(
-                {'screenshots': [
-                    {'large_image_url': 'http://example.com/1.png'}
-                ]}
-            )
-            mock_urllib.urlopen.return_value = mock_response
-
-            call_command('import_app_install_data', 'natty',
-                local_app_install_data=self.deb_location,
-                local_app_install_data_partner=self.deb_location,
-                verbosity=0)
-
-        scribus = Application.objects.get(package_name='scribus')
-
-        self.assertEqual(scribus.screenshots, ["http://example.com/1.png"])
-
     def get_package_uri_for_series(self):
         uri = import_app_install_data.Command().get_package_uri_for_series(
             'app-install-data', 'natty')
 
=== modified file 'src/webcatalog/tests/test_utilities.py'
--- src/webcatalog/tests/test_utilities.py	2012-03-05 08:11:24 +0000
+++ src/webcatalog/tests/test_utilities.py	2012-04-18 22:40:24 +0000
@@ -20,8 +20,10 @@
 __all__ = [
     'CreatePNGFromFileTestCase',
     'IdentityProviderTestCase',
+    'ScreenshotGetterTestCase',
     ]
 
+import json
 import os
 
 from webcatalog.tests.factory import TestCaseWithFactory
@@ -124,3 +126,35 @@
             u'displayname', u'name', u'unverified_emails', u'verified_emails',
             u'consumer_secret', u'token', u'openid_identifier',
             u'consumer_key', u'token_secret']), set(data))
+
+
+class ScreenshotGetterTestCase(TestCase):
+    @patch('webcatalog.utilities.urllib.urlopen')
+    def test_valid_response_returns_list_of_urls(self, mock_urlopen):
+        response = json.dumps({'package': 'digikam', 'screenshots': [
+            {'version': '1.0', 'large_image_url': 'http://example.com/foo'},
+            {'version': '1.1', 'large_image_url': 'http://example.com/bar'},
+        ]})
+        mock_urlopen.return_value.getcode.return_value = 200
+        mock_urlopen.return_value.read.return_value = response
+        expected = ['http://example.com/foo', 'http://example.com/bar']
+        self.assertEqual(expected,
+            WebServices().get_screenshots_for_package('digikam'))
+
+    @patch('webcatalog.utilities.urllib.urlopen')
+    def test_not_found_response_returns_empty_list(self, mock_urlopen):
+        mock_urlopen.return_value.getcode.return_value = 404
+        self.assertEqual([], WebServices().get_screenshots_for_package('foo'))
+
+    @patch('webcatalog.utilities.urllib.urlopen')
+    def test_invalid_response_returns_empty_list(self, mock_urlopen):
+        mock_urlopen.return_value.getcode.return_value = 200
+        mock_urlopen.return_value.read.return_value = 'invalid json'
+        self.assertEqual([], WebServices().get_screenshots_for_package('foo'))
+
+    @patch('webcatalog.utilities.urllib.urlopen')
+    def test_unexpected_response_returns_empty_list(self, mock_urlopen):
+        response = json.dumps({'package': 'The Spanish Inquisition'})
+        mock_urlopen.return_value.getcode.return_value = 200
+        mock_urlopen.return_value.read.return_value = response
+        self.assertEqual([], WebServices().get_screenshots_for_package('foo'))
 
=== modified file 'src/webcatalog/tests/test_views.py'
--- src/webcatalog/tests/test_views.py	2012-04-13 21:06:13 +0000
+++ src/webcatalog/tests/test_views.py	2012-04-18 22:40:24 +0000
@@ -22,12 +22,14 @@
     with_statement,
     )
 
+import json
 import re
 
 from decimal import Decimal
 
 from django.conf import settings
 from django.core import mail
+from django.core.cache import cache
 from django.core.urlresolvers import reverse
 from django.test import TestCase
 
@@ -43,6 +45,7 @@
     'ApplicationDetailNoSeriesTestCase',
     'ApplicationDetailTestCase',
     'ApplicationReviewsTestCase',
+    'ApplicationScreenshotsTestCase',
     'IndexTestCase',
     'TermsOfServiceTestCase',
     'OverviewTestCase',
@@ -59,6 +62,9 @@
 
 
 class ApplicationDetailTestCase(TestCaseWithFactory):
+    def setUp(self):
+        super(ApplicationDetailTestCase, self).setUp()
+        cache.clear()
 
     def get_app_details_url(self, app):
         return reverse('wc-package-detail',
@@ -366,6 +372,10 @@
 
 
 class SearchTestCase(TestCaseWithFactory):
+    def setUp(self):
+        super(SearchTestCase, self).setUp()
+        cache.clear()
+
     def test_no_search_retrieves_no_apps(self):
         # Ensure there's some data in the DB
         distro = self.factory.make_distroseries(code_name='lucid')
@@ -474,9 +484,9 @@
 
     def test_response_shows_number_of_apps_found(self):
         distro = self.factory.make_distroseries(code_name='lucid')
-        app1 = self.factory.make_application(package_name='foo',
+        self.factory.make_application(package_name='foo',
             distroseries=distro)
-        app2 = self.factory.make_application(package_name='foobar',
+        self.factory.make_application(package_name='foobar',
             distroseries=distro)
         url = reverse('wc-search', args=[distro.code_name])
 
@@ -536,6 +546,10 @@
 
 
 class IndexTestCase(TestCaseWithFactory):
+    def setUp(self):
+        super(IndexTestCase, self).setUp()
+        cache.clear()
+
     def test_index_contains_links_to_departments(self):
         dept = self.factory.make_department('foo')
 
@@ -671,6 +685,12 @@
         self.assertContains(response, expected, 2)
         self.assertNotContains(response, app_not_included.package_name)
 
+    def test_includes_cache_headers(self):
+        with patch_settings(CACHE_MIDDLEWARE_SECONDS=600):
+            response = self.client.get(reverse('wc-index'))
+
+        self.assertEqual('max-age=600', response['cache-control'])
+
 
 class TermsOfServiceTestCase(TestCase):
 
@@ -686,6 +706,9 @@
 
 
 class OverviewTestCase(TestCaseWithFactory):
+    def setUp(self):
+        super(OverviewTestCase, self).setUp()
+        cache.clear()
 
     def test_department_contains_links_to_subdepartments(self):
         dept = self.factory.make_department('foo')
@@ -946,6 +969,70 @@
         self.assertContains(response, 'review_summary2')
 
 
+class ApplicationScreenshotsTestCase(TestCaseWithFactory):
+    def setUp(self):
+        super(ApplicationScreenshotsTestCase, self).setUp()
+        self.app = self.factory.make_application()
+        self.expected = ['http://example.com/foo', 'http://example.com/bar']
+
+    def test_only_valid_apps(self):
+        response = self.client.get(reverse('wc-package-screenshots',
+            args=['doesntexist']))
+
+        self.assertEqual(404, response.status_code)
+
+    @patch('webcatalog.utilities.urllib.urlopen')
+    def test_uncached_calls_to_rnr_api(self, mock_urlopen):
+        self.client.get(reverse('wc-package-screenshots',
+            args=[self.app.package_name]))
+
+        self.assertEqual(1, mock_urlopen.call_count)
+
+    @patch('webcatalog.utilities.urllib.urlopen')
+    def test_second_call_cached(self, mock_urlopen):
+        for count in range(2):
+            self.client.get(reverse('wc-package-screenshots',
+                args=[self.app.package_name]))
+
+        self.assertEqual(1, mock_urlopen.call_count)
+
+    @patch('webcatalog.utilities.WebServices.get_screenshots_for_package')
+    def test_renders_screenshots(self, mock_get_screenshots):
+        mock_get_screenshots.return_value = self.expected
+
+        response = self.client.get(reverse('wc-package-screenshots',
+            args=[self.app.package_name]))
+
+        self.assertTemplateUsed(
+            response, 'webcatalog/application_screenshots.html')
+        for url in self.expected:
+            self.assertContains(response, url)
+
+    @patch('webcatalog.utilities.WebServices.get_screenshots_for_package')
+    def test_renders_json_for_json_request(self, mock_get_screenshots):
+        mock_get_screenshots.return_value = self.expected
+
+        response = self.client.get(reverse('wc-package-screenshots',
+            args=[self.app.package_name]),
+            HTTP_X_REQUESTED_WITH='XMLHttpRequest')
+
+        self.assertTemplateNotUsed(
+            response, 'webcatalog/application_review_list.html')
+        self.assertEqual('application/json', response['content-type'])
+        self.assertEqual(json.dumps(self.expected), response.content)
+
+    @patch('webcatalog.utilities.WebServices.get_screenshots_for_package')
+    def test_has_caching_headers(self, mock_get_screenshots):
+        mock_get_screenshots.return_value = self.expected
+
+        with patch_settings(CACHE_MIDDLEWARE_SECONDS=600):
+            response = self.client.get(reverse('wc-package-screenshots',
+                args=[self.app.package_name]),
+                HTTP_X_REQUESTED_WITH='XMLHttpRequest')
+
+        self.assertEqual('max-age=600', response['cache-control'])
+
+
 class ComboViewTestCase(TestCase):
     """Tests for ComboView."""
 
 
=== modified file 'src/webcatalog/urls.py'
--- src/webcatalog/urls.py	2012-03-20 11:12:02 +0000
+++ src/webcatalog/urls.py	2012-04-18 22:40:24 +0000
@@ -36,6 +36,8 @@
         'department_overview', name='wc-department'),
     url(r'^department/(?P<dept_slug_or_id>[\w\d-]+)/$', 'department_overview',
         name='wc-department'),
+    url(r'^applications/screenshots/(?P<package_name>[-.+:\w]+)/$',
+        'application_screenshots', name="wc-package-screenshots"),
     url(r'^applications/(?P<distro>[-.+\w]+)/(?P<package_name>[-.+:\w]+)/$',
         'application_detail', name="wc-package-detail"),
     # The following URL redirects to the series-specific URL above.
 
=== modified file 'src/webcatalog/utilities.py'
--- src/webcatalog/utilities.py	2012-03-19 20:43:17 +0000
+++ src/webcatalog/utilities.py	2012-04-18 22:40:24 +0000
@@ -28,10 +28,12 @@
     'WebServiceError',
     ]
 
+import json
 import logging
 import math
 import re
 import urllib
+from urlparse import urljoin
 
 from django.conf import settings
 from django.core.cache import cache
@@ -77,6 +79,26 @@
         cache.set(key, fresh_reviews, settings.REVIEWS_CACHE_TIMEOUT)
         return fresh_reviews
 
+    def get_screenshots_for_package(self, package_name):
+        key = 'get_screenshots_for_package-{0}'.format(
+            package_name)
+        cached_screenshots = cache.get(key)
+        if cached_screenshots is not None:
+            return cached_screenshots
+        url = urljoin(settings.SCREENSHOTS_BASE_URL,
+                      '/json/package/{0}'.format(package_name))
+        fresh_screenshots = []
+        try:
+            response = urllib.urlopen(url)
+            if response.getcode() == 200:
+                data = json.loads(response.read())
+                fresh_screenshots = [entry['large_image_url']
+                    for entry in data.get('screenshots', [])]
+        except (IOError, ValueError, TypeError):
+            pass
+        cache.set(key, fresh_screenshots, settings.REVIEWS_CACHE_TIMEOUT)
+        return fresh_screenshots
+
     def _fake_validate_token(self, token, openid_identifier, signature):
         """ This is a version of validate_token that gets the
             token_secret, consumer_secret from the plaintext signature.
 
=== modified file 'src/webcatalog/views.py'
--- src/webcatalog/views.py	2012-04-13 21:17:09 +0000
+++ src/webcatalog/views.py	2012-04-18 22:40:24 +0000
@@ -210,6 +210,19 @@
     return render_to_response(template, RequestContext(request, context))
 
 
+def application_screenshots(request, package_name):
+    app = get_object_or_404(Application, package_name=package_name)
+    screenshots = WebServices().get_screenshots_for_package(package_name)
+    if request.is_ajax():
+        return HttpResponse(json.dumps(screenshots),
+            mimetype='application/json')
+    else:
+        context = dict(application=app, screenshots=screenshots,
+            breadcrumbs=app.crumbs())
+        return render_to_response('webcatalog/application_screenshots.html',
+            RequestContext(request, context))
+
+
 def combo_view(request):
     """Handle a request for combining a set of files."""
     fnames = parse_qs(request.META.get("QUERY_STRING", ""))