зеркало из https://github.com/mozilla/gecko-dev.git
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:
Родитель
87318ccac7
Коммит
de2fdb2fd2
|
@ -551,9 +551,8 @@ TabItem.prototype = Utils.extend(new Item(), new Subscribable(), {
|
||||||
|
|
||||||
if (childHitResult.shouldZoom) {
|
if (childHitResult.shouldZoom) {
|
||||||
// Zoom in!
|
// Zoom in!
|
||||||
var orig = $tabEl.bounds();
|
|
||||||
var scale = window.innerWidth/orig.width;
|
|
||||||
var tab = this.tab;
|
var tab = this.tab;
|
||||||
|
var orig = $tabEl.bounds();
|
||||||
|
|
||||||
function onZoomDone() {
|
function onZoomDone() {
|
||||||
UI.goToTab(tab);
|
UI.goToTab(tab);
|
||||||
|
@ -570,24 +569,11 @@ TabItem.prototype = Utils.extend(new Item(), new Subscribable(), {
|
||||||
childHitResult.callback();
|
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");
|
let animateZoom = gPrefBranch.getBoolPref("animate_zoom");
|
||||||
if (animateZoom) {
|
if (animateZoom) {
|
||||||
TabItems.pausePainting();
|
TabItems.pausePainting();
|
||||||
$tabEl.addClass("front")
|
$tabEl.addClass("front")
|
||||||
.animate({
|
.animate(this.getZoomRect(), {
|
||||||
top: orig.top * (1 - 1/scaleCheat),
|
|
||||||
left: orig.left * (1 - 1/scaleCheat),
|
|
||||||
width: orig.width * scale/scaleCheat,
|
|
||||||
height: orig.height * scale/scaleCheat
|
|
||||||
}, {
|
|
||||||
duration: 230,
|
duration: 230,
|
||||||
easing: 'fast',
|
easing: 'fast',
|
||||||
complete: function() {
|
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
|
// Function: setZoomPrep
|
||||||
// Either go into or return from (depending on <value>) "zoom prep" mode,
|
// 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) {
|
if (value && animateZoom) {
|
||||||
this._zoomPrep = true;
|
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
|
// 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
|
// 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
|
// 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
|
// 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
|
// frame #3 (the first frame of real animation). Choosing an animation that starts
|
||||||
// fast is key.
|
// fast is key.
|
||||||
var scaleCheat = 2;
|
|
||||||
$div
|
$div
|
||||||
.addClass('front')
|
.addClass('front')
|
||||||
.css({
|
.css(this.getZoomRect(2));
|
||||||
left: box.left * (1-1/scaleCheat),
|
|
||||||
top: box.top * (1-1/scaleCheat),
|
|
||||||
width: window.innerWidth/scaleCheat,
|
|
||||||
height: box.height * (window.innerWidth / box.width)/scaleCheat
|
|
||||||
});
|
|
||||||
} else {
|
} else {
|
||||||
this._zoomPrep = false;
|
this._zoomPrep = false;
|
||||||
$div.removeClass('front');
|
$div.removeClass('front');
|
||||||
|
|
Загрузка…
Ссылка в новой задаче