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

Bug 1142080 - Fix app orientation support on desktop. r=fabrice

Browse Source
This commit is contained in:
Alexandre Poirot 2015-03-12 02:12:00 -04:00
parent 2b61716ce9
commit 840d1ba525
1 changed files with 51 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
b2g/chrome/content/screen.js
View File

@ -128,39 +128,39 @@ window.addEventListener('ContentStart', function() {
}
}
function resize(width, height, ratio, shouldFlip) {
Services.prefs.setCharPref('layout.css.devPixelsPerPx',
ratio == 1 ? -1 : ratio);
let defaultOrientation = width < height ? 'portrait' : 'landscape';
GlobalSimulatorScreen.mozOrientation = GlobalSimulatorScreen.screenOrientation = defaultOrientation;
function resize() {
GlobalSimulatorScreen.width = width;
GlobalSimulatorScreen.height = height;
Services.prefs.setCharPref('layout.css.devPixelsPerPx',
ratio == 1 ? -1 : ratio);
// In order to do rescaling, we set the <browser> tag to the specified
// width and height, and then use a CSS transform to scale it so that
// it appears at the correct size on the host display. We also set
// the size of the <window> element to that scaled target size.
let scale = 1.0;
// Set the window width and height to desired size plus chrome
// Include the size of the toolbox displayed under the system app
let controls = document.getElementById('controls');
let controlsHeight = 0;
if (controls) {
controlsHeight = controls.getBoundingClientRect().height;
}
let chromewidth = window.outerWidth - window.innerWidth;
let chromeheight = window.outerHeight - window.innerHeight + controlsHeight;
let controlsHeight = controls ? controls.getBoundingClientRect().height : 0;
if (isMulet) {
let tab = browserWindow.gBrowser.selectedTab;
let responsive = ResponsiveUIManager.getResponsiveUIForTab(tab);
responsive.setSize((Math.round(width * scale) + 16*2),
(Math.round(height * scale) + controlsHeight + 61));
responsive.setSize(width + 16*2,
height + controlsHeight + 61);
} else {
window.resizeTo(Math.round(width * scale) + chromewidth,
Math.round(height * scale) + chromeheight);
let chromewidth = window.outerWidth - window.innerWidth;
let chromeheight = window.outerHeight - window.innerHeight + controlsHeight;
window.resizeTo(width + chromewidth,
height + chromeheight);
}
let frameWidth = width, frameHeight = height;
// If the current app doesn't supports the current screen orientation
// still resize the window, but rotate its frame so that
// it is displayed rotated on the side
let shouldFlip = GlobalSimulatorScreen.mozOrientation != GlobalSimulatorScreen.screenOrientation;
if (shouldFlip) {
frameWidth = height;
frameHeight = width;
@ -172,30 +172,29 @@ window.addEventListener('ContentStart', function() {
style.height = 'calc(100% - ' + controlsHeight + 'px)';
style.bottom = controlsHeight;
style.width = frameWidth + "px";
style.height = frameHeight + "px";
if (shouldFlip) {
// Display the system app with a 90° clockwise rotation
let shift = Math.floor(Math.abs(frameWidth-frameHeight) / 2);
let shift = Math.floor(Math.abs(frameWidth - frameHeight) / 2);
style.transform +=
' rotate(0.25turn) translate(-' + shift + 'px, -' + shift + 'px)';
}
}
// Resize on startup
resize(width, height, ratio, false);
let defaultOrientation = width < height ? 'portrait' : 'landscape';
GlobalSimulatorScreen.mozOrientation = GlobalSimulatorScreen.screenOrientation = defaultOrientation;
resize();
// Catch manual resizes to update the internal device size.
window.onresize = function() {
width = browser.clientWidth;
height = browser.clientHeight;
if ((defaultOrientation == 'portrait' && width > height) ||
(defaultOrientation == 'landscape' && width < height)) {
let w = width;
width = height;
height = w;
}
let controls = document.getElementById('controls');
let controlsHeight = controls ? controls.getBoundingClientRect().height : 0;
width = window.innerWidth;
height = window.innerHeight - controlsHeight;
queueResize();
};
// Then resize on each rotation button click,
@ -204,23 +203,31 @@ window.addEventListener('ContentStart', function() {
let screen = subject.wrappedJSObject;
let { mozOrientation, screenOrientation } = screen;
let newWidth = width;
let newHeight = height;
// If we have an orientation different than the startup one,
// If we have an orientation different than the current one,
// we switch the sizes
if (screenOrientation != defaultOrientation) {
newWidth = height;
newHeight = width;
let w = width;
width = height;
height = w;
}
defaultOrientation = screenOrientation;
// If the current app doesn't supports the current screen orientation
// still resize the window, but rotate its frame so that
// it is displayed rotated on the side
let shouldFlip = mozOrientation != screenOrientation;
resize(newWidth, newHeight, ratio, shouldFlip);
queueResize();
}, 'simulator-adjust-window-size', false);
// Queue resize request in order to prevent race and slowdowns
// by requesting resize multiple times per loop
let resizeTimeout;
function queueResize() {
if (resizeTimeout) {
clearTimeout(resizeTimeout);
}
resizeTimeout = setTimeout(function () {
resizeTimeout = null;
resize();
}, 0);
}
// A utility function like console.log() for printing to the terminal window
// Uses dump(), but enables it first, if necessary
function print() {