Bug 604866 - Zoom-in not working above a certain preview size [r=ian, a=blocking2.0=final+]

--HG--
extra : rebase_source : c1b67e0987cb1473e113df00502ed20ef22c8259
This commit is contained in:
Michael Yoshitaka Erlewine 2010-11-27 17:28:18 -05:00
parent f92bd7856e
commit a31b41f826

View File

@ -551,9 +551,8 @@ TabItem.prototype = Utils.extend(new Item(), new Subscribable(), {
if (childHitResult.shouldZoom) {
// Zoom in!
var orig = $tabEl.bounds();
var scale = window.innerWidth/orig.width;
var tab = this.tab;
var orig = $tabEl.bounds();
function onZoomDone() {
UI.goToTab(tab);
@ -570,24 +569,11 @@ TabItem.prototype = Utils.extend(new Item(), new Subscribable(), {
childHitResult.callback();
}
// The scaleCheat is a clever way to speed up the zoom-in code.
// Because image scaling is slowest on big images, we cheat and stop the image
// at scaled-down size and placed accordingly. Because the animation is fast, you can't
// see the difference but it feels a lot zippier. The only trick is choosing the
// right animation function so that you don't see a change in percieved
// animation speed.
var scaleCheat = 1.7;
let animateZoom = gPrefBranch.getBoolPref("animate_zoom");
if (animateZoom) {
TabItems.pausePainting();
$tabEl.addClass("front")
.animate({
top: orig.top * (1 - 1/scaleCheat),
left: orig.left * (1 - 1/scaleCheat),
width: orig.width * scale/scaleCheat,
height: orig.height * scale/scaleCheat
}, {
.animate(this.getZoomRect(), {
duration: 230,
easing: 'fast',
complete: function() {
@ -652,6 +638,33 @@ TabItem.prototype = Utils.extend(new Item(), new Subscribable(), {
}
},
// ----------
// Function: getZoomRect
// Returns a faux rect (just an object with top, left, width, height)
// which represents the maximum bounds of the tab thumbnail in the zoom
// animation. Note that this is not just the rect of the window itself,
// due to scaleCheat.
getZoomRect: function TabItem_getZoomRect(scaleCheat) {
let $tabEl = iQ(this.container);
let orig = $tabEl.bounds();
// The scaleCheat is a clever way to speed up the zoom-in code.
// Because image scaling is slowest on big images, we cheat and stop
// the image at scaled-down size and placed accordingly. Because the
// animation is fast, you can't see the difference but it feels a lot
// zippier. The only trick is choosing the right animation function so
// that you don't see a change in percieved animation speed.
if (!scaleCheat)
scaleCheat = 1.7;
let zoomWidth = orig.width + (window.innerWidth - orig.width) / scaleCheat;
return {
top: orig.top * (1 - 1/scaleCheat),
left: orig.left * (1 - 1/scaleCheat),
width: zoomWidth,
height: orig.height * zoomWidth / orig.width
};
},
// ----------
// Function: setZoomPrep
// Either go into or return from (depending on <value>) "zoom prep" mode,
@ -667,7 +680,7 @@ TabItem.prototype = Utils.extend(new Item(), new Subscribable(), {
if (value && animateZoom) {
this._zoomPrep = true;
// The divide by two part here is a clever way to speed up the zoom-out code.
// The scaleCheat of 2 here is a clever way to speed up the zoom-out code.
// Because image scaling is slowest on big images, we cheat and start the image
// at half-size and placed accordingly. Because the animation is fast, you can't
// see the difference but it feels a lot zippier. The only trick is choosing the
@ -675,15 +688,10 @@ TabItem.prototype = Utils.extend(new Item(), new Subscribable(), {
// animation speed from frame #1 (the tab) to frame #2 (the half-size image) to
// frame #3 (the first frame of real animation). Choosing an animation that starts
// fast is key.
var scaleCheat = 2;
$div
.addClass('front')
.css({
left: box.left * (1-1/scaleCheat),
top: box.top * (1-1/scaleCheat),
width: window.innerWidth/scaleCheat,
height: box.height * (window.innerWidth / box.width)/scaleCheat
});
.css(this.getZoomRect(2));
} else {
this._zoomPrep = false;
$div.removeClass('front');