Update Device Art Generator for Nexus 4, 7, and 10.

This CL also adds an 'older devices' section containing Nexus S, Galaxy Nexus,
and the Motorola XOOM.

Change-Id: Icca64ae5debe79325fbea38f79d33cd4ea85afb7

22 files changed, 111 insertions, 41 deletions

diff --git a/docs/html/distribute/promote/device-art-resources/nexus_10/land_back.png b/docs/html/distribute/promote/device-art-resources/nexus_10/land_back.png
new file mode 100644
index 0000000..71bb52d
--- /dev/null
+++ b/docs/html/distribute/promote/device-art-resources/nexus_10/land_back.png
diff --git a/docs/html/distribute/promote/device-art-resources/nexus_10/land_fore.png b/docs/html/distribute/promote/device-art-resources/nexus_10/land_fore.png
new file mode 100644
index 0000000..d29f818
--- /dev/null
+++ b/docs/html/distribute/promote/device-art-resources/nexus_10/land_fore.png
diff --git a/docs/html/distribute/promote/device-art-resources/nexus_10/land_shadow.png b/docs/html/distribute/promote/device-art-resources/nexus_10/land_shadow.png
new file mode 100644
index 0000000..af1a249
--- /dev/null
+++ b/docs/html/distribute/promote/device-art-resources/nexus_10/land_shadow.png
diff --git a/docs/html/distribute/promote/device-art-resources/nexus_10/port_back.png b/docs/html/distribute/promote/device-art-resources/nexus_10/port_back.png
new file mode 100644
index 0000000..501690b
--- /dev/null
+++ b/docs/html/distribute/promote/device-art-resources/nexus_10/port_back.png
diff --git a/docs/html/distribute/promote/device-art-resources/nexus_10/port_fore.png b/docs/html/distribute/promote/device-art-resources/nexus_10/port_fore.png
new file mode 100644
index 0000000..689a72a
--- /dev/null
+++ b/docs/html/distribute/promote/device-art-resources/nexus_10/port_fore.png
diff --git a/docs/html/distribute/promote/device-art-resources/nexus_10/port_shadow.png b/docs/html/distribute/promote/device-art-resources/nexus_10/port_shadow.png
new file mode 100644
index 0000000..b2265ef
--- /dev/null
+++ b/docs/html/distribute/promote/device-art-resources/nexus_10/port_shadow.png
diff --git a/docs/html/distribute/promote/device-art-resources/nexus_10/thumb.png b/docs/html/distribute/promote/device-art-resources/nexus_10/thumb.png
new file mode 100644
index 0000000..8d8dee9
--- /dev/null
+++ b/docs/html/distribute/promote/device-art-resources/nexus_10/thumb.png
diff --git a/docs/html/distribute/promote/device-art-resources/nexus_4/land_back.png b/docs/html/distribute/promote/device-art-resources/nexus_4/land_back.png
new file mode 100644
index 0000000..57a011a
--- /dev/null
+++ b/docs/html/distribute/promote/device-art-resources/nexus_4/land_back.png
diff --git a/docs/html/distribute/promote/device-art-resources/nexus_4/land_fore.png b/docs/html/distribute/promote/device-art-resources/nexus_4/land_fore.png
new file mode 100644
index 0000000..72c9654
--- /dev/null
+++ b/docs/html/distribute/promote/device-art-resources/nexus_4/land_fore.png
diff --git a/docs/html/distribute/promote/device-art-resources/nexus_4/land_shadow.png b/docs/html/distribute/promote/device-art-resources/nexus_4/land_shadow.png
new file mode 100644
index 0000000..d80a5fd
--- /dev/null
+++ b/docs/html/distribute/promote/device-art-resources/nexus_4/land_shadow.png
diff --git a/docs/html/distribute/promote/device-art-resources/nexus_4/port_back.png b/docs/html/distribute/promote/device-art-resources/nexus_4/port_back.png
new file mode 100644
index 0000000..e64fae4
--- /dev/null
+++ b/docs/html/distribute/promote/device-art-resources/nexus_4/port_back.png
diff --git a/docs/html/distribute/promote/device-art-resources/nexus_4/port_fore.png b/docs/html/distribute/promote/device-art-resources/nexus_4/port_fore.png
new file mode 100644
index 0000000..c9fb062
--- /dev/null
+++ b/docs/html/distribute/promote/device-art-resources/nexus_4/port_fore.png
diff --git a/docs/html/distribute/promote/device-art-resources/nexus_4/port_shadow.png b/docs/html/distribute/promote/device-art-resources/nexus_4/port_shadow.png
new file mode 100644
index 0000000..b2064a3
--- /dev/null
+++ b/docs/html/distribute/promote/device-art-resources/nexus_4/port_shadow.png
diff --git a/docs/html/distribute/promote/device-art-resources/nexus_4/thumb.png b/docs/html/distribute/promote/device-art-resources/nexus_4/thumb.png
new file mode 100644
index 0000000..2988dc9
--- /dev/null
+++ b/docs/html/distribute/promote/device-art-resources/nexus_4/thumb.png
diff --git a/docs/html/distribute/promote/device-art-resources/nexus_7/land_back.png b/docs/html/distribute/promote/device-art-resources/nexus_7/land_back.png
index 2999f35..697fb7d 100644
--- a/docs/html/distribute/promote/device-art-resources/nexus_7/land_back.png
+++ b/docs/html/distribute/promote/device-art-resources/nexus_7/land_back.png
diff --git a/docs/html/distribute/promote/device-art-resources/nexus_7/land_fore.png b/docs/html/distribute/promote/device-art-resources/nexus_7/land_fore.png
index cefdd35..735262f 100644
--- a/docs/html/distribute/promote/device-art-resources/nexus_7/land_fore.png
+++ b/docs/html/distribute/promote/device-art-resources/nexus_7/land_fore.png
diff --git a/docs/html/distribute/promote/device-art-resources/nexus_7/land_shadow.png b/docs/html/distribute/promote/device-art-resources/nexus_7/land_shadow.png
index 8f7aec7..cfb7952 100644
--- a/docs/html/distribute/promote/device-art-resources/nexus_7/land_shadow.png
+++ b/docs/html/distribute/promote/device-art-resources/nexus_7/land_shadow.png
diff --git a/docs/html/distribute/promote/device-art-resources/nexus_7/port_back.png b/docs/html/distribute/promote/device-art-resources/nexus_7/port_back.png
index b2908a8..5bb815a 100644
--- a/docs/html/distribute/promote/device-art-resources/nexus_7/port_back.png
+++ b/docs/html/distribute/promote/device-art-resources/nexus_7/port_back.png
diff --git a/docs/html/distribute/promote/device-art-resources/nexus_7/port_fore.png b/docs/html/distribute/promote/device-art-resources/nexus_7/port_fore.png
index 7f4b0b4..1be3b21 100644
--- a/docs/html/distribute/promote/device-art-resources/nexus_7/port_fore.png
+++ b/docs/html/distribute/promote/device-art-resources/nexus_7/port_fore.png
diff --git a/docs/html/distribute/promote/device-art-resources/nexus_7/port_shadow.png b/docs/html/distribute/promote/device-art-resources/nexus_7/port_shadow.png
index c10bd53..7e8aff2 100644
--- a/docs/html/distribute/promote/device-art-resources/nexus_7/port_shadow.png
+++ b/docs/html/distribute/promote/device-art-resources/nexus_7/port_shadow.png
diff --git a/docs/html/distribute/promote/device-art-resources/nexus_7/thumb.png b/docs/html/distribute/promote/device-art-resources/nexus_7/thumb.png
index 8b5cc5a..b5db82e 100644
--- a/docs/html/distribute/promote/device-art-resources/nexus_7/thumb.png
+++ b/docs/html/distribute/promote/device-art-resources/nexus_7/thumb.png
diff --git a/docs/html/distribute/promote/device-art.jd b/docs/html/distribute/promote/device-art.jd
index 93f772a..55b846e 100644
--- a/docs/html/distribute/promote/device-art.jd
+++ b/docs/html/distribute/promote/device-art.jd
@@ -18,7 +18,9 @@ feature image or screenshots for your Google Play app listing.</p>
     <p>Drag a screenshot from your desktop onto a device to the right.</p>
   </div>
   <div class="layout-content-col span-10">
-    <ul id="device-list"></ul>
+    <ul class="device-list primary"></ul>
+    <a href="#" id="archive-expando">Older devices</a>
+    <ul class="device-list archive"></ul>
   </div>
 </div>
 
@@ -57,12 +59,12 @@ feature image or screenshots for your Google Play app listing.</p>
     text-transform: uppercase;
   }
 
-  #device-list {
+  .device-list {
     padding: 0;
     margin: 0;
   }
 
-  #device-list li {
+  .device-list li {
     display: inline-block;
     vertical-align: bottom;
     margin: 0;
@@ -70,11 +72,11 @@ feature image or screenshots for your Google Play app listing.</p>
     text-align: center;
   }
 
-  #device-list li .thumb-container {
+  .device-list li .thumb-container {
     display: inline-block;
   }
 
-  #device-list li .thumb-container img {
+  .device-list li .thumb-container img {
     margin-bottom: 8px;
     opacity: 0.6;
 
@@ -83,7 +85,7 @@ feature image or screenshots for your Google Play app listing.</p>
             transition:         transform 0.2s, opacity 0.2s;
   }
 
-  #device-list li.drag-hover .thumb-container img {
+  .device-list li.drag-hover .thumb-container img {
     opacity: 1;
 
     -webkit-transform: scale(1.1);
@@ -91,16 +93,35 @@ feature image or screenshots for your Google Play app listing.</p>
             transform: scale(1.1);
   }
 
-  #device-list li .device-details {
+  .device-list li .device-details {
     font-size: 13px;
     line-height: 16px;
     color: #888;
   }
 
-  #device-list li .device-url {
+  .device-list li .device-url {
     font-weight: bold;
   }
 
+  #archive-expando {
+    display: block;
+    font-size: 13px;
+    font-weight: bold;
+    color: #333;
+    text-transform: uppercase;
+    margin-top: 16px;
+    padding-top: 16px;
+    padding-left: 28px;
+    border-top: 1px solid transparent;
+    background: transparent url({@docRoot}assets/images/styles/disclosure_down.png)
+                no-repeat scroll 0 8px;
+  }
+
+  #archive-expando.expanded {
+    background-image: url({@docRoot}assets/images/styles/disclosure_up.png);
+    border-top: 1px solid #ccc;
+  }
+
   #output {
     color: #f44;
     font-style: italic;
@@ -117,7 +138,7 @@ feature image or screenshots for your Google Play app listing.</p>
 
   // Global constants
   var MSG_INVALID_INPUT_IMAGE = 'Invalid screenshot provided. Screenshots must be PNG files '
-      + 'matching the target device\'s screen resolution in either portrait or landscape.';
+      + 'matching the target device\'s screen aspect ratio in either portrait or landscape.';
   var MSG_NO_INPUT_IMAGE = 'Drag a screenshot (in PNG format) from your desktop onto a '
       + 'target device above.'
   var MSG_GENERATING_IMAGE = 'Generating device art&hellip;';
@@ -127,17 +148,44 @@ feature image or screenshots for your Google Play app listing.</p>
   // Device manifest.
   var DEVICES = [
     {
+      id: 'nexus_4',
+      title: 'Nexus 4',
+      url: 'http://www.google.com/nexus/4/',
+      physicalSize: 4.7,
+      physicalHeight: 5.23,
+      density: 'XHDPI',
+      landRes: ['shadow', 'back', 'fore'],
+      landOffset: [349,214],
+      portRes: ['shadow', 'back', 'fore'],
+      portOffset: [213,350],
+      portSize: [768,1280]
+    },
+    {
       id: 'nexus_7',
       title: 'Nexus 7',
-      url: 'http://www.android.com/devices/detail/nexus-7',
+      url: 'http://www.google.com/nexus/7/',
       physicalSize: 7,
       physicalHeight: 7.81,
-      density: 213,
+      density: '213dpi',
       landRes: ['shadow', 'back', 'fore'],
-      landOffset: [363,260],
+      landOffset: [315,270],
       portRes: ['shadow', 'back', 'fore'],
-      portOffset: [265,341],
-      portSize: [800,1280],
+      portOffset: [264,311],
+      portSize: [800,1280]
+    },
+    {
+      id: 'nexus_10',
+      title: 'Nexus 10',
+      url: 'http://www.google.com/nexus/10/',
+      physicalSize: 10,
+      physicalHeight: 7,
+      actualResolution: [1600,2560],
+      density: 'XHDPI',
+      landRes: ['shadow', 'back', 'fore'],
+      landOffset: [227,217],
+      portRes: ['shadow', 'back', 'fore'],
+      portOffset: [217,223],
+      portSize: [800,1280]
     },
     {
       id: 'xoom',
@@ -145,12 +193,13 @@ feature image or screenshots for your Google Play app listing.</p>
       url: 'http://www.google.com/phone/detail/motorola-xoom',
       physicalSize: 10,
       physicalHeight: 6.61,
-      density: 160,
+      density: 'MDPI',
       landRes: ['shadow', 'back', 'fore'],
       landOffset: [218,191],
       portRes: ['shadow', 'back', 'fore'],
       portOffset: [199,200],
       portSize: [800,1280],
+      archived: true
     },
     {
       id: 'galaxy_nexus',
@@ -158,12 +207,13 @@ feature image or screenshots for your Google Play app listing.</p>
       url: 'http://www.android.com/devices/detail/galaxy-nexus',
       physicalSize: 4.65,
       physicalHeight: 5.33,
-      density: 320,
+      density: 'XHDPI',
       landRes: ['shadow', 'back', 'fore'],
       landOffset: [371,199],
       portRes: ['shadow', 'back', 'fore'],
       portOffset: [216,353],
       portSize: [720,1280],
+      archived: true
     },
     {
       id: 'nexus_s',
@@ -171,12 +221,13 @@ feature image or screenshots for your Google Play app listing.</p>
       url: 'http://www.google.com/phone/detail/nexus-s',
       physicalSize: 4.0,
       physicalHeight: 4.88,
-      density: 240,
+      density: 'HDPI',
       landRes: ['shadow', 'back', 'fore'],
       landOffset: [247,135],
       portRes: ['shadow', 'back', 'fore'],
       portOffset: [134,247],
       portSize: [480,800],
+      archived: true
     }
   ];
 
@@ -250,13 +301,23 @@ feature image or screenshots for your Google Play app listing.</p>
     $('#output').html(MSG_NO_INPUT_IMAGE);
 
     $('#frame-customizations').hide();
+    $('.device-list.archive').hide();
 
     $('#output-shadow, #output-glare').click(function() {
-      createFrame(g_currentDevice, g_currentImage);
+      createFrame();
     });
 
     // Build device list.
     $.each(DEVICES, function() {
+      var resolution = this.actualResolution || this.portSize;
+      var scaleFactorText = '';
+      if (resolution[0] != this.portSize[0]) {
+        scaleFactorText = '<br>' + (100 * (this.portSize[0] / resolution[0])).toFixed(0) +
+            '% size output';
+      } else {
+        scaleFactorText = '<br>&nbsp;';
+      }
+
       $('<li>')
           .append($('<div>')
               .addClass('thumb-container')
@@ -269,14 +330,26 @@ feature image or screenshots for your Google Play app listing.</p>
               .html((this.url
                   ? ('<a class="device-url" href="' + this.url + '">' + this.title + '</a>')
                   : this.title) +
-                '<br>' +  this.physicalSize + '" @ ' + this.density + 'dpi' +
-                '<br>' + this.portSize[0] + 'x' + this.portSize[1]))
+                  '<br>' +  this.physicalSize + '" @ ' + this.density +
+                  '<br>' + (resolution[0] + 'x' + resolution[1]) + scaleFactorText))
           .data('deviceId', this.id)
-          .appendTo('#device-list');
+          .appendTo(this.archived ? '.device-list.archive' : '.device-list.primary');
+    });
+
+    // Set up "older devices" expando.
+    $('#archive-expando').click(function() {
+      if ($(this).hasClass('expanded')) {
+        $(this).removeClass('expanded');
+        $('.device-list.archive').hide();
+      } else {
+        $(this).addClass('expanded');
+        $('.device-list.archive').show();
+      }
+      return false;
     });
 
     // Set up drag and drop.
-    $('#device-list li')
+    $('.device-list li')
         .live('dragover', function(evt) {
           $(this).addClass('drag-hover');
           evt.dataTransfer.dropEffect = 'link';
@@ -335,27 +408,19 @@ feature image or screenshots for your Google Play app listing.</p>
    */
   function createFrame() {
     var port;
-    if (g_currentImage.naturalWidth  == g_currentDevice.portSize[0] &&
-        g_currentImage.naturalHeight == g_currentDevice.portSize[1]) {
-      if (!g_currentDevice.portRes) {
-        alert('No portrait frame is currently available for this device.');
-        $('#output').html(MSG_NO_INPUT_IMAGE);
-        return;
-      }
+
+    var aspect1 = g_currentImage.naturalWidth / g_currentImage.naturalHeight;
+    var aspect2 = g_currentDevice.portSize[0] / g_currentDevice.portSize[1];
+
+    if (aspect1 == aspect2) {
       port = true;
-    } else if (g_currentImage.naturalWidth  == g_currentDevice.portSize[1] &&
-               g_currentImage.naturalHeight == g_currentDevice.portSize[0]) {
-      if (!g_currentDevice.landRes) {
-        alert('No landscape frame is currently available for this device.');
-        $('#output').html(MSG_NO_INPUT_IMAGE);
-        return;
-      }
+    } else if (aspect1 == 1 / aspect2) {
       port = false;
     } else {
-      alert('Screenshots for ' + g_currentDevice.title + ' must be ' +
-          g_currentDevice.portSize[0] + 'x' + g_currentDevice.portSize[1] +
-          ' or ' +
-          g_currentDevice.portSize[1] + 'x' + g_currentDevice.portSize[0] + '.');
+      alert('The screenshot must have an aspect ratio of ' +
+          aspect2.toFixed(3) + ' or ' + (1 / aspect2).toFixed(3) +
+          ' (ideally ' + g_currentDevice.portSize[0] + 'x' + g_currentDevice.portSize[1] +
+          ' or ' + g_currentDevice.portSize[1] + 'x' + g_currentDevice.portSize[0] + ').');
       $('#output').html(MSG_INVALID_INPUT_IMAGE);
       return;
     }
@@ -378,6 +443,9 @@ feature image or screenshots for your Google Play app listing.</p>
       var width = resourceImages['back'].naturalWidth;
       var height = resourceImages['back'].naturalHeight;
       var offset = port ? g_currentDevice.portOffset : g_currentDevice.landOffset;
+      var size = port
+          ? g_currentDevice.portSize
+          : [g_currentDevice.portSize[1], g_currentDevice.portSize[0]];
 
       var canvas = document.createElement('canvas');
       canvas.width = width;
@@ -388,7 +456,9 @@ feature image or screenshots for your Google Play app listing.</p>
         ctx.drawImage(resourceImages['shadow'], 0, 0);
       }
       ctx.drawImage(resourceImages['back'], 0, 0);
-      ctx.drawImage(g_currentImage, offset[0], offset[1]);
+      ctx.fillStyle = '#000';
+      ctx.fillRect(offset[0], offset[1], size[0], size[1]);
+      ctx.drawImage(g_currentImage, offset[0], offset[1], size[0], size[1]);
       if (resourceImages['fore'] && $('#output-glare').is(':checked')) {
         ctx.drawImage(resourceImages['fore'], 0, 0);
       }