Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-01 06:35:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 628799 - (1/2) Kill browser.scale and make fuzzy zoom API [r=stechz]

Browse Source 
--HG--
extra : rebase_source : 512dafe586ea5bfdf6e336314970868bd05e6fba
This commit is contained in:
Matt Brubeck 2011-02-02 11:03:46 -08:00
parent d890507250
commit aa04dd9946
4 changed files with 81 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
mobile/chrome/content/AnimatedZoom.js
View File

@ -43,6 +43,8 @@
* Responsible for zooming in to a given view rectangle
*/
const AnimatedZoom = {
startScale: null,
/** Starts an animated zoom to zoomRect. */
animateTo: function(aZoomRect) {
if (!aZoomRect)
@ -57,13 +59,10 @@ const AnimatedZoom = {
Browser.hideTitlebar();
Browser.forceChromeReflow();
this.beginTime = mozAnimationStartTime;
this.start();
// Check if zooming animations were occuring before.
if (this.zoomRect) {
this.zoomFrom = this.zoomRect;
} else {
this.zoomFrom = this.getStartRect();
if (!this.zoomRect) {
this.updateTo(this.zoomFrom);
mozRequestAnimationFrame(this);
@ -74,9 +73,16 @@ const AnimatedZoom = {
}
},
start: function start() {
this.browser = getBrowser();
this.zoomFrom = this.zoomRect || this.getStartRect();
this.startScale = this.browser.scale;
this.beginTime = mozAnimationStartTime;
},
/** Get the visible rect, in device pixels relative to the content origin. */
getStartRect: function getStartRect() {
let browser = getBrowser();
let browser = this.browser;
let bcr = browser.getBoundingClientRect();
let scroll = browser.getRootView().getPosition();
return new Rect(scroll.x, scroll.y, bcr.width, bcr.height);
@ -84,27 +90,29 @@ const AnimatedZoom = {
/** Update the visible rect, in device pixels relative to the content origin. */
updateTo: function(nextRect) {
let browser = getBrowser();
let zoomRatio = window.innerWidth / nextRect.width;
let zoomLevel = browser.scale * zoomRatio;
let scale = this.startScale * zoomRatio;
let scrollX = nextRect.left * zoomRatio;
let scrollY = nextRect.top * zoomRatio;
// We use _contentView and setScale because we do *not* want the displayport to update.
// XXX We need a new API, see bug 628799.
let contentView = browser.getRootView();
contentView.setScale(zoomLevel);
if ("_contentView" in contentView)
contentView._contentView.scrollTo(nextRect.left * zoomRatio, nextRect.top * zoomRatio);
this.browser.fuzzyZoom(scale, scrollX, scrollY);
this.zoomRect = nextRect;
},
/** Stop animation, zoom to point, and clean up. */
finish: function() {
Browser.setVisibleRect(this.zoomTo || this.zoomRect);
this.updateTo(this.zoomTo || this.zoomRect);
this.browser.finishFuzzyZoom();
Browser.hideSidebars();
Browser.hideTitlebar();
this.beginTime = null;
this.zoomTo = null;
this.zoomFrom = null;
this.zoomRect = null;
this.startScale = null;
let event = document.createEvent("Events");
event.initEvent("AnimatedZoomEnd", true, true);

103
mobile/chrome/content/bindings/browser.xml
View File

@ -389,11 +389,10 @@
onget="return this._contentDocumentHeight;"
readonly="true"/>
<!-- Zoom level is the ratio of device pixels to CSS pixels -->
<field name="_scale">1</field>
<!-- The ratio of device pixels to CSS pixels -->
<property name="scale"
onget="return this._scale;"
onset="return this._setScale(val);"/>
onget="return 1;"
onset="return 1;"/>
<!-- These counters are used to update the cached viewport after they reach a certain
threshold when scrolling -->
@ -405,16 +404,6 @@
<body/>
</method>
<!-- Sets the scale of CSS pixels to device pixels. Does not affect page layout. -->
<method name="_setScale">
<parameter name="scale"/>
<body>
<![CDATA[
// XXX Not implemented for local browsers.
]]>
</body>
</method>
<!-- Sets size of CSS viewport, which affects how page is layout. -->
<method name="setWindowSize">
<parameter name="width"/>
@ -501,9 +490,6 @@
return true;
},
setScale: function(aXScale, aYScale) {
},
scrollBy: function(x, y) {
let self = this.self;
let position = this.getPosition();
@ -544,8 +530,8 @@
let bcr = this.getBoundingClientRect();
let view = this.getRootView();
let scroll = this.getRootView().getPosition();
return { x: (clientX + scroll.x - bcr.left) / this._scale,
y: (clientY + scroll.y - bcr.top) / this._scale };
return { x: (clientX + scroll.x - bcr.left) / this.scale,
y: (clientY + scroll.y - bcr.top) / this.scale };
]]>
</body>
</method>
@ -765,9 +751,10 @@
return true;
},
_scale: 1,
_setScale: function(scale) {},
scrollBy: function(x, y) {},
scrollTo: function(x, y) {},
setScale: function(aXScale, aYScale) {},
getPosition: function() {
return { x: 0, y: 0 };
}
@ -904,13 +891,13 @@
displayport.translateInside(bounds);
self.messageManager.sendAsyncMessage("Content:SetCacheViewport", {
scrollX: contentView.scrollX / self._scale,
scrollY: contentView.scrollY / self._scale,
x: displayport.x / self._scale,
y: displayport.y / self._scale,
w: displayport.width / self._scale,
h: displayport.height / self._scale,
scale: self._scale,
scrollX: contentView.scrollX / this._scale,
scrollY: contentView.scrollY / this._scale,
x: displayport.x / this._scale,
y: displayport.y / this._scale,
w: displayport.width / this._scale,
h: displayport.height / this._scale,
scale: this._scale,
id: contentView.id
});
@ -994,10 +981,9 @@
this.scrollBy(x - contentView.scrollX, y - contentView.scrollY);
},
setScale: function(scale) {
let contentView = this._contentView;
_setScale: function _setScale(scale) {
this._scale = scale;
contentView.setScale(scale, scale);
this._contentView.setScale(scale, scale);
},
getPosition: function() {
@ -1008,26 +994,45 @@
]]>
</field>
<!-- Sets the scale of CSS pixels to device pixels. Does not affect page layout. -->
<method name="_setScale">
<!-- Transform the viewport without updating the displayport. -->
<method name="fuzzyZoom">
<parameter name="scale"/>
<body>
<![CDATA[
if (scale <= 0 || scale == this._scale)
return;
this._scale = scale;
let rootView = this.getRootView();
rootView.setScale(scale);
rootView._updateCacheViewport();
let event = document.createEvent("Events");
event.initEvent("ZoomChanged", true, false);
this.dispatchEvent(event);
]]>
</body>
<parameter name="x"/>
<parameter name="y"/>
<body><![CDATA[
let rootView = this.getRootView();
rootView._setScale(scale);
rootView._contentView.scrollTo(x, y);
]]></body>
</method>
<!-- After fuzzy zoom, sync the displayport with the new viewport. -->
<method name="finishFuzzyZoom">
<body><![CDATA[
this.getRootView()._updateCacheViewport();
]]></body>
</method>
<!-- The ratio of CSS pixels to device pixels. -->
<property name="scale">
<getter><![CDATA[
return this.getRootView()._scale;
]]></getter>
<setter><![CDATA[
if (val <= 0 || val == this.scale)
return;
let rootView = this.getRootView();
rootView._setScale(val);
rootView._updateCacheViewport();
let event = document.createEvent("Events");
event.initEvent("ZoomChanged", true, false);
this.dispatchEvent(event);
return val;
]]></setter>
</property>
<method name="_getView">
<parameter name="contentView"/>
<body>
@ -1082,8 +1087,8 @@
<![CDATA[
let rootView = this._contentViewManager.rootContentView;
this.messageManager.sendAsyncMessage("Content:ScrollTo", {
x: rootView.scrollX / this._scale,
y: rootView.scrollY / this._scale
x: rootView.scrollX / this.scale,
y: rootView.scrollY / this.scale
});
]]>
</body>

37
mobile/chrome/content/browser.js
View File

@ -980,7 +980,7 @@ var Browser = {
let center = browser.transformClientToBrowser(browserRect.width / 2,
browserRect.height / 2);
let rect = this._getZoomRectForPoint(center.x, center.y, zoomLevel);
this.animatedZoomTo(rect);
AnimatedZoom.animateTo(rect);
},
/** Rect should be in browser coordinates. */
@ -1019,37 +1019,6 @@ var Browser = {
browser.contentDocumentHeight * oldScale));
},
animatedZoomTo: function animatedZoomTo(rect) {
AnimatedZoom.animateTo(rect);
},
setVisibleRect: function setVisibleRect(rect) {
let browser = getBrowser();
let zoomRatio = window.innerWidth / rect.width;
let zoomLevel = browser.scale * zoomRatio;
let scrollX = rect.left * zoomRatio;
let scrollY = rect.top * zoomRatio;
this.hideSidebars();
this.hideTitlebar();
let scale = this.selectedTab.clampZoomLevel(zoomLevel);
// Use _contentView and setScale so that the displayport does not update.
// See bug 628799.
let view = browser.getRootView();
view.setScale(scale);
if ("_contentView" in view)
view._contentView.scrollTo(scrollX, scrollY);
// If the scale level doesn't change ensure the view is well refreshed
// otherwise setting the scale level of the browser will do it
if (scale == browser.scale)
view._updateCacheViewport();
else
browser.scale = scale;
},
zoomToPoint: function zoomToPoint(cX, cY, aRect) {
let tab = this.selectedTab;
if (!tab.allowZoom)
@ -1065,7 +1034,7 @@ var Browser = {
}
if (zoomRect)
this.animatedZoomTo(zoomRect);
AnimatedZoom.animateTo(zoomRect);
return zoomRect;
},
@ -1075,7 +1044,7 @@ var Browser = {
if (tab.allowZoom && !tab.isDefaultZoomLevel()) {
let zoomLevel = tab.getDefaultZoomLevel();
let zoomRect = this._getZoomRectForPoint(cX, cY, zoomLevel);
this.animatedZoomTo(zoomRect);
AnimatedZoom.animateTo(zoomRect);
}
},

1
mobile/chrome/content/input.js
View File

@ -1111,6 +1111,7 @@ GestureModule.prototype = {
return;
// create the AnimatedZoom object for fast arbitrary zooming
AnimatedZoom.start();
this._pinchZoom = AnimatedZoom;
this._pinchStartRect = AnimatedZoom.getStartRect();
this._pinchDelta = 0;