Permalink
Browse files

Bug 809782 - remove background-image for offscreen thumbnails

  • Loading branch information...
1 parent 8302686 commit 5ce9028f79361863ee344b03a73e052b360cd0ba David Flanagan committed Dec 7, 2012
Showing with 528 additions and 10 deletions.
  1. +2 −3 apps/gallery/index.html
  2. +25 −3 apps/gallery/js/gallery.js
  3. +22 −4 apps/gallery/style/gallery.css
  4. +479 −0 shared/js/visibility_monitor.js
View
@@ -18,6 +18,7 @@
<script type="text/javascript" defer src="shared/js/media/get_video_rotation.js"></script>
<script type="text/javascript" defer src="shared/js/media/video_player.js"></script>
<script type="text/javascript" defer src="shared/js/media/media_frame.js"></script>
+ <script type="text/javascript" defer src="shared/js/visibility_monitor.js"></script>
<!-- Specific code -->
<script type="text/javascript" defer src="js/MetadataParser.js"></script>
<script type="text/javascript" defer src="js/ImageEditor.js"></script>
@@ -27,9 +28,7 @@
<body class="hidden" role="application">
<!-- This element gets inserted into the different view elements -->
<!-- It gets styled differently depending on what its parent is -->
- <ul id="thumbnails">
- <!-- Thumbnails inserted here -->
- </ul>
+ <ul id="thumbnails"></ul> <!-- Thumbnails inserted here -->
<section role="region" id="thumbnail-list-view" class="hidden">
<footer id="thumbnails-bottom">
View
@@ -131,6 +131,12 @@ function init() {
}
function initUI() {
+ // Keep track of when thumbnails are onscreen and offscreen
+ monitorChildVisibility(thumbnails,
+ 360, // extra space top and bottom
+ thumbnailOnscreen, // set background image
+ thumbnailOffscreen); // remove background image
+
// Clicks on the thumbnails do different things depending on what
// view we're in.
thumbnails.onclick = thumbnailClickHandler;
@@ -346,7 +352,7 @@ function fileDeleted(filename) {
// Remove the corresponding thumbnail
var thumbnailElts = thumbnails.querySelectorAll('.thumbnail');
- URL.revokeObjectURL(thumbnailElts[n].style.backgroundImage.slice(5, -2));
+ URL.revokeObjectURL(thumbnailElts[n].dataset.backgroundImage.slice(5, -2));
thumbnails.removeChild(thumbnailElts[n]);
// Change the index associated with all the thumbnails after the deleted one
@@ -627,7 +633,7 @@ function createThumbnailList() {
}
//
-// Create a thumbnail <img> element
+// Create a thumbnail element
//
function createThumbnail(imagenum) {
var li = document.createElement('li');
@@ -637,11 +643,27 @@ function createThumbnail(imagenum) {
var fileinfo = files[imagenum];
// We revoke this url in imageDeleted
var url = URL.createObjectURL(fileinfo.metadata.thumbnail);
- li.style.backgroundImage = 'url("' + url + '")';
+ // We set the url on a data attribute and let the onscreen
+ // and offscreen callbacks below set and unset the actual
+ // background image style. This means that we don't keep
+ // images decoded if we don't need them.
+ li.dataset.backgroundImage = 'url("' + url + '")';
return li;
}
+// monitorChildVisibility() calls this when a thumbnail comes onscreen
+function thumbnailOnscreen(thumbnail) {
+ if (thumbnail.dataset.backgroundImage)
+ thumbnail.style.backgroundImage = thumbnail.dataset.backgroundImage;
+}
+
+// monitorChildVisibility() calls this when a thumbnail goes offscreen
+function thumbnailOffscreen(thumbnail) {
+ if (thumbnail.dataset.backgroundImage)
+ thumbnail.style.backgroundImage = null;
+}
+
//
// Web Activities
//
@@ -29,6 +29,21 @@ section {
font-size: 10px;
}
+.hidden {
+ display: none;
+}
+
+/*
+ * When we hide the thumbnail list, to go into single-photo fullscreen mode,
+ * we need to retain thumbnail layout information so monitorChildVisibility()
+ * doesn't get confused if we delete a photo while in fullscreen mode.
+ * So hide them this way instead of display:none
+ */
+#thumbnail-list-view.hidden {
+ display: block;
+ visibility: hidden;
+}
+
/* All of the main views fill the screen */
#thumbnail-list-view, #thumbnail-select-view, #fullscreen-view, #pick-view, #edit-view, #crop-view {
position: absolute;
@@ -122,6 +137,13 @@ section {
background-size: cover; /* allow some cropping */
background-position: center; /* keep the cropping at the edges */
background-repeat: no-repeat;
+ /*
+ * When we have a background image it will cover the whole thumbnail
+ * but when we're swapping that image in it might be visible before
+ * the image. So we want a color that contrasts with the border so we
+ * at least get the effect of a grid rather than a black screen
+ */
+ background-color: #444;
}
.thumbnail.selected {
@@ -233,10 +255,6 @@ section {
transform-origin: 0px 0px;
}
-.hidden {
- display: none;
-}
-
/* localization */
body.hidden *[data-l10n-id] {
visibility: hidden;
Oops, something went wrong.

0 comments on commit 5ce9028

Please sign in to comment.