From e4383b6bc092cbbb254dd830f4ee06e8b71abc5f Mon Sep 17 00:00:00 2001 From: Alexandre Poirot Date: Wed, 19 Mar 2014 08:38:59 -0400 Subject: [PATCH] Bug 944443 - Uplift rotation feature from simulator to b2g desktop. r=vingtetun --- b2g/chrome/content/desktop.css | 23 ++++ b2g/chrome/content/desktop.js | 14 ++- b2g/chrome/content/images/desktop/rotate.png | Bin 0 -> 657 bytes b2g/chrome/content/screen.js | 118 +++++++++++++------ b2g/chrome/content/shell.html | 1 + b2g/chrome/jar.mn | 1 + b2g/components/B2GComponents.manifest | 6 + b2g/components/GlobalSimulatorScreen.jsm | 90 ++++++++++++++ b2g/components/SimulatorScreen.js | 112 ++++++++++++++++++ b2g/components/moz.build | 10 ++ 10 files changed, 339 insertions(+), 36 deletions(-) create mode 100644 b2g/chrome/content/images/desktop/rotate.png create mode 100644 b2g/components/GlobalSimulatorScreen.jsm create mode 100644 b2g/components/SimulatorScreen.js diff --git a/b2g/chrome/content/desktop.css b/b2g/chrome/content/desktop.css index f265b9b0f477..9612d732c354 100644 --- a/b2g/chrome/content/desktop.css +++ b/b2g/chrome/content/desktop.css @@ -34,3 +34,26 @@ background-color: #888; border-color: black; } + +#rotate-button { + position: absolute; + top: 3px; + bottom: 3px; + right: 3px; + width: 24px; + height: 24px; + background: #eee url("images/desktop/rotate.png") center no-repeat; + border: 1px solid #888; + border-radius: 12px; + display: block; +} + +#rotate-button:hover { + background-color: #ccc; + border-color: #555; +} + +#rotate-button.active { + background-color: #888; + border-color: black; +} diff --git a/b2g/chrome/content/desktop.js b/b2g/chrome/content/desktop.js index 6a20042ad9a2..5634e6a2191a 100644 --- a/b2g/chrome/content/desktop.js +++ b/b2g/chrome/content/desktop.js @@ -16,7 +16,7 @@ function enableTouch() { touchEventHandler.start(); } -function setupHomeButton() { +function setupButtons() { let homeButton = document.getElementById('home-button'); if (!homeButton) { // The toolbar only exists in b2g desktop build with @@ -34,9 +34,19 @@ function setupHomeButton() { shell.sendChromeEvent({type: 'home-button-release'}); homeButton.classList.remove('active'); }); + + Cu.import("resource://gre/modules/GlobalSimulatorScreen.jsm"); + let rotateButton = document.getElementById('rotate-button'); + rotateButton.addEventListener('touchstart', function () { + rotateButton.classList.add('active'); + }); + rotateButton.addEventListener('touchend', function() { + GlobalSimulatorScreen.flipScreen(); + rotateButton.classList.remove('active'); + }); } window.addEventListener('ContentStart', function() { enableTouch(); - setupHomeButton(); + setupButtons(); }); diff --git a/b2g/chrome/content/images/desktop/rotate.png b/b2g/chrome/content/images/desktop/rotate.png new file mode 100644 index 0000000000000000000000000000000000000000..9da1b5674dbbf78ed3446dac86f43e81f8e687be GIT binary patch literal 657 zcmV;C0&e|@P)7dy^U?GkpmX(o7i(2W%Hf@EVHf^GX zAyOh{R+>X&LQom@F&aULQ6?BnTH4H=FSQx(+!ozHN+s!qhqHKjp7T8KIj_)lo&PCe zw&!h{l$Z%v01L1z|7b|S2DktRUuU>AOtE;IR z10sOq+33r1Z+&A{BpMTIS&~4`*qgT&DP^knR{K;%x%-ZQDIGL)iXQle4o0G}-!oZL zAme)|oc2~9S*j>=4+$7g>uA89=GKc1*V{Yo##6GMz)E&j=8rOWNeGw*;y`BYiKe>2 zhmW#><#m4{M5O@rK=FRnWK!mV#f 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 element to that scaled target size. - let scale = rescale ? hostDPI / dpi : 1; - // Set the window width and height to desired size plus chrome - // 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; - window.resizeTo(Math.round(width * scale) + chromewidth, - Math.round(height * scale) + chromeheight); + Cu.import("resource://gre/modules/GlobalSimulatorScreen.jsm"); + function resize(width, height, dpi, shouldFlip) { + GlobalSimulatorScreen.width = width; + GlobalSimulatorScreen.height = height; - // Set the browser element to the full unscaled size of the screen - browser.style.width = browser.style.minWidth = browser.style.maxWidth = - width + 'px'; - browser.style.height = browser.style.minHeight = browser.style.maxHeight = - height + 'px'; - browser.setAttribute('flex', '0'); // Don't let it stretch + // In order to do rescaling, we set the 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 element to that scaled target size. + let scale = rescale ? hostDPI / dpi : 1; - // Now scale the browser element as needed - if (scale !== 1) { - browser.style.transformOrigin = 'top left'; - browser.style.transform = 'scale(' + scale + ',' + scale + ')'; + // 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; + window.resizeTo(Math.round(width * scale) + chromewidth, + Math.round(height * scale) + chromeheight); + + let frameWidth = width, frameHeight = height; + if (shouldFlip) { + frameWidth = height; + frameHeight = width; + } + + // Set the browser element to the full unscaled size of the screen + let style = browser.style; + style.width = style.minWidth = style.maxWidth = + frameWidth + 'px'; + style.height = style.minHeight = style.maxHeight = + frameHeight + 'px'; + browser.setAttribute('flex', '0'); // Don't let it stretch + + style.transformOrigin = ''; + style.transform = ''; + + // Now scale the browser element as needed + if (scale !== 1) { + style.transformOrigin = 'top left'; + style.transform += ' scale(' + scale + ',' + scale + ')'; + } + + if (shouldFlip) { + // Display the system app with a 90° clockwise rotation + let shift = Math.floor(Math.abs(frameWidth-frameHeight) / 2); + style.transform += + ' rotate(0.25turn) translate(-' + shift + 'px, -' + shift + 'px)'; + } + + // Set the pixel density that we want to simulate. + // This doesn't change the on-screen size, but makes + // CSS media queries and mozmm units work right. + Services.prefs.setIntPref('layout.css.dpi', dpi); } - // Set the pixel density that we want to simulate. - // This doesn't change the on-screen size, but makes - // CSS media queries and mozmm units work right. - Services.prefs.setIntPref('layout.css.dpi', dpi); + // Resize on startup + resize(width, height, dpi, false); + + let defaultOrientation = width < height ? 'portrait' : 'landscape'; + + // Then resize on each rotation button click, + // or when the system app lock/unlock the orientation + Services.obs.addObserver(function orientationChangeListener(subject) { + let screen = subject.wrappedJSObject; + let { mozOrientation, screenOrientation } = screen; + + let newWidth = width; + let newHeight = height; + // If we have an orientation different than the startup one, + // we switch the sizes + if (screenOrientation != defaultOrientation) { + newWidth = height; + newHeight = width; + } + + // 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, dpi, shouldFlip); + }, 'simulator-adjust-window-size', false); // A utility function like console.log() for printing to the terminal window // Uses dump(), but enables it first, if necessary @@ -164,7 +214,7 @@ window.addEventListener('ContentStart', function() { let dump_enabled = Services.prefs.getBoolPref('browser.dom.window.dump.enabled'); - if (!dump_enabled) + if (!dump_enabled) Services.prefs.setBoolPref('browser.dom.window.dump.enabled', true); dump(Array.prototype.join.call(arguments, ' ') + '\n'); diff --git a/b2g/chrome/content/shell.html b/b2g/chrome/content/shell.html index 8f5f1e7a1de7..3be6000ace0f 100644 --- a/b2g/chrome/content/shell.html +++ b/b2g/chrome/content/shell.html @@ -41,6 +41,7 @@ -->
+
#elifdef MOZ_WIDGET_COCOA