Skip to content
This repository has been archived by the owner on Nov 3, 2021. It is now read-only.

Commit

Permalink
Bug 1029763 - The contact thumbnail scaling is terrible, all jagged
Browse files Browse the repository at this point in the history 
Conflicts:
	apps/sharedtest/test/unit/image_utils_test.js
  • Loading branch information
@jmcanterafonseca @rvandermeulen
jmcanterafonseca authored and rvandermeulen committed Nov 13, 2014
1 parent effbdca commit 0ab53fc
Show file tree
Hide file tree
Showing 10 changed files with 190 additions and 103 deletions.
1 change: 1 addition & 0 deletions apps/communications/contacts/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
<script defer type="text/javascript" src="/shared/js/contacts/import/utilities/import_from_vcard.js"></script>
<script defer type="text/javascript" src="/shared/js/contacts/import/utilities/import_sim_contacts.js"></script>
<script defer type="text/javascript" src="/shared/js/confirm.js"></script>
<script defer type="text/javascript" src="/shared/js/image_utils.js"></script>
<script defer type="text/javascript" src="/shared/js/contacts/utilities/image_thumbnail.js"></script>
<script defer type="text/javascript" src="/shared/js/contacts/contacts_shortcuts.js"></script>
<script defer type="text/javascript" src="/shared/js/contacts/import/utilities/overlay.js"></script>
Expand Down
4 changes: 4 additions & 0 deletions apps/communications/contacts/style/contacts.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -787,6 +787,10 @@ form[role="dialog"][data-type="edit"].contacts-select:not(.insearchmode) gaia-he
display: block;
}

#view-contacts-list [data-type="list"] aside span[data-type=img] {
image-rendering: auto;
}

html[dir="rtl"] #no-contacts .icon {
padding-right: 3.5rem;
padding-left: 0;
Expand Down
1 change: 1 addition & 0 deletions apps/communications/contacts/test/unit/utilities/config_test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ suite('> Config Utilities', function() {
case 'file1.json':
setTimeout(function() {
request.response = configObj;
request.status = 200;
request.onload();
});
break;
Expand Down
102 changes: 63 additions & 39 deletions apps/communications/contacts/test/unit/utilities/image_thumbnail_test.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
'use strict';

/* global utils */
/* global utils, MockLazyLoader */

require('/shared/js/contacts/utilities/image_thumbnail.js');
require('/shared/test/unit/mocks/mock_lazy_loader.js');

suite('Contacts/utilities/thumbnailImage >', function() {
var imageData = {
Expand All @@ -11,7 +12,35 @@ suite('Contacts/utilities/thumbnailImage >', function() {
'sadpanda.png': null
};

var realLazyLoader, realImageUtils, realConfig, mockUtilsConfig;
var spy;

suiteSetup(function(done) {
realLazyLoader = window.LazyLoader;
realImageUtils = window.ImageUtils;

window.LazyLoader = MockLazyLoader;
window.ImageUtils = {
resizeAndCropToCover: function(inputImageBlob,
outputWidth, outputHeight,
outputType, encoderOptions) {
return Promise.resolve(new Blob(['x'], {type: 'image/jpeg'}));
}
};

spy = sinon.spy(window.ImageUtils, 'resizeAndCropToCover');

realConfig = utils.config;
mockUtilsConfig = {
load: function() {
return Promise.resolve({
thumbnail: {
'quality': 0.95
}
});
}
};

var assetsNeeded = 0;

function loadBlob(filename) {
Expand All @@ -36,52 +65,47 @@ suite('Contacts/utilities/thumbnailImage >', function() {
Object.keys(imageData).forEach(loadBlob, imageData);
});

test('should return the image directly if it\'s small enough',
function(done) {
this.timeout(10000);
utils.thumbnailImage(imageData['tiny-gaia.png'], function(thumbnail) {
assert.equal(thumbnail, imageData['tiny-gaia.png']);
done();
});
suiteTeardown(function() {
window.LazyLoader = realLazyLoader;
window.ImageUtils = realImageUtils;

utils.config = realConfig;
});

suite('resizing >', function() {
var drawImageSpy;
setup(function() {
spy.reset();
utils.config = mockUtilsConfig;
});

setup(function() {
var fakeContext = {
drawImage: function() {}
};
drawImageSpy = this.sinon.spy(fakeContext, 'drawImage');
this.sinon.stub(HTMLCanvasElement.prototype,
'getContext').returns(fakeContext);
});

test('should draw the image smaller', function(done) {
this.timeout(20000);
utils.thumbnailImage(imageData['gaia.png'], function(thumbnail) {
assert.isTrue(drawImageSpy.calledOnce);
var call = drawImageSpy.getCall(0);
assert.equal(call.args[1], 0);
assert.equal(call.args[2], 0);
assert.equal(call.args[3], 60);
assert.equal(call.args[4], 60);
done();
test('should draw the image smaller. Default configuration', function(done) {
utils.config = {
load: function() {
return Promise.reject();
}
};

utils.thumbnailImage(imageData['gaia.png'], function(thumbnail) {
done(function() {
assert.isTrue(spy.calledOnce);
var call = spy.getCall(0);
assert.equal(call.args[1], 65);
assert.equal(call.args[2], 65);
assert.equal(call.args[3], 'image/jpeg');
assert.equal(call.args[4], 1.0);
});
});
});

test('should keep the apsect ratio', function(done) {
this.timeout(20000);
utils.thumbnailImage(imageData['sadpanda.png'], function(thumbnail) {
assert.isTrue(drawImageSpy.calledOnce);
var call = drawImageSpy.getCall(0);
assert.equal(call.args[1], 0);
assert.equal(call.args[2], 0);
assert.equal(parseInt(call.args[3]), 60);
assert.equal(call.args[4], 90);
done();
test('should take into account a custom configuration', function(done) {
utils.thumbnailImage(imageData['gaia.png'], function(thumbnail) {
done(function() {
var call = spy.getCall(0);
assert.equal(call.args[1], 65);
assert.equal(call.args[2], 65);
assert.equal(call.args[3], 'image/jpeg');
assert.equal(call.args[4], 0.95);
});
});
});
});

11 changes: 7 additions & 4 deletions apps/sharedtest/test/unit/image_utils_test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -276,12 +276,14 @@ suite('ImageUtils', function() {
});


function runResizeAndCropToCoverTests(imageWidth, imageHeight, imageType) {
function runResizeAndCropToCoverTests(imageWidth, imageHeight, imageType,
encoderOptions) {
var suitename = 'resizeAndCropToCover ' + imageType + ' ' +
imageWidth + 'x' + imageHeight;
suite(suitename, function() {
const W = imageWidth, H = imageHeight; // The size of the test image
const inputImageType = imageType;
const encoderOptions = encoderOptions;

suiteSetup(function(done) {
// We begin by creating a special image where each pixel value
Expand Down Expand Up @@ -438,8 +440,9 @@ suite('ImageUtils', function() {
});
});

test('jpeg output type', function(done) {
ImageUtils.resizeAndCropToCover(this.inputBlob, 10, 10, ImageUtils.JPEG)
test('jpeg output type with encondig options', function(done) {
ImageUtils.resizeAndCropToCover(this.inputBlob, 10, 10, ImageUtils.JPEG,
encoderOptions)
.then(function resolve(outputBlob) {
assert.equal(outputBlob.type, ImageUtils.JPEG);
done();
Expand Down Expand Up @@ -573,7 +576,7 @@ suite('ImageUtils', function() {
[180, 240], // 3x4
[250, 250] // square
]).forEach(function(size) {
runResizeAndCropToCoverTests(size[0], size[1], 'image/jpeg');
runResizeAndCropToCoverTests(size[0], size[1], 'image/jpeg', 0.95);
runResizeAndCropToCoverTests(size[0], size[1], 'image/png');
});
});
16 changes: 15 additions & 1 deletion build/import-config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,22 @@ function generateConfig (app, destination, gaia) {
};
utils.writeContent(configFile,
utils.getDistributionFileContent(app, defaultConfig, gaia.distributionDir));

// Images configuration
var imageConfigFile = utils.getFile(gaia.stageDir.path, '',
'config-images.json');
var defaultImageConfig = {
'thumbnail' : {
'format': 'image/jpeg',
'size': 65,
'quality': 1.0
}
};

utils.writeContent(imageConfigFile,
utils.getDistributionFileContent(app, defaultImageConfig,
gaia.distributionDir));
}

exports.generateManifest = generateManifest;
exports.generateConfig = generateConfig;

42 changes: 29 additions & 13 deletions shared/js/contacts/import/utilities/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,21 @@ if (typeof utils.config === 'undefined') {
initialized = {};
};

function onLoad(xhr, file, resolveCb) {
configs[file] = xhr.response;

delete initializing[file];
initialized[file] = true;

document.dispatchEvent(new CustomEvent(EVENT_INITIALIZED, {
detail: {
file: file,
success: true
}
}));
resolveCb(configs[file]);
}

utils.config.load = function(file) {
return new Promise(function(resolve, reject) {
var isInitialized = initialized[file];
Expand Down Expand Up @@ -55,21 +70,15 @@ if (typeof utils.config === 'undefined') {
xhr.responseType = 'json';

xhr.onload = function() {
configs[file] = xhr.response;
delete initializing[file];
initialized[file] = true;

document.dispatchEvent(new CustomEvent(EVENT_INITIALIZED, {
detail: {
file: file,
success: true
}
}));
resolve(configs[file]);
var resolvedCb = resolve;
if (xhr.status !== 200) {
resolvedCb = reject;
}
onLoad(xhr, file, resolvedCb);
};

xhr.onerror = function() {
document.dispatchEvent(new CustomEvent(EVENT_INITIALIZED, {
document.dispatchEvent(new CustomEvent(EVENT_INITIALIZED, {
detail: {
file: file,
success: false
Expand All @@ -79,7 +88,14 @@ if (typeof utils.config === 'undefined') {
reject(xhr.error);
};

xhr.send(null);
// If there is any exception we consider the file does not exist
try {
xhr.send(null);
}
catch(e) {
console.error('Error while loading config file: ', e.message);
onLoad({ status: 404 }, file, reject);
}
});
};
})();
Expand Down

0 comments on commit 0ab53fc

Please sign in to comment.