b2g/chrome/content/screen.js

Wed, 31 Dec 2014 06:09:35 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 06:09:35 +0100
changeset 0
6474c204b198
permissions
-rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

michael@0 1 // screen.js:
michael@0 2 // Set the screen size, pixel density and scaling of the b2g client screen
michael@0 3 // based on the --screen command-line option, if there is one.
michael@0 4 //
michael@0 5 // TODO: support multiple device pixels per CSS pixel
michael@0 6 //
michael@0 7
michael@0 8 // We do this on ContentStart because querying the displayDPI fails otherwise.
michael@0 9 window.addEventListener('ContentStart', function() {
michael@0 10 // This is the toplevel <window> element
michael@0 11 let shell = document.getElementById('shell');
michael@0 12
michael@0 13 // The <browser> element inside it
michael@0 14 let browser = document.getElementById('systemapp');
michael@0 15
michael@0 16 // Figure out the native resolution of the screen
michael@0 17 let windowUtils = window.QueryInterface(Ci.nsIInterfaceRequestor)
michael@0 18 .getInterface(Components.interfaces.nsIDOMWindowUtils);
michael@0 19 let hostDPI = windowUtils.displayDPI;
michael@0 20
michael@0 21 let DEFAULT_SCREEN = '320x480';
michael@0 22
michael@0 23 // This is a somewhat random selection of named screens.
michael@0 24 // Add more to this list when we support more hardware.
michael@0 25 // Data from: http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
michael@0 26 let screens = {
michael@0 27 iphone: {
michael@0 28 name: 'Apple iPhone', width:320, height:480, dpi:163
michael@0 29 },
michael@0 30 ipad: {
michael@0 31 name: 'Apple iPad', width:1024, height:768, dpi:132
michael@0 32 },
michael@0 33 nexus_s: {
michael@0 34 name: 'Samsung Nexus S', width:480, height:800, dpi:235
michael@0 35 },
michael@0 36 galaxy_s2: {
michael@0 37 name: 'Samsung Galaxy SII (I9100)', width:480, height:800, dpi:219
michael@0 38 },
michael@0 39 galaxy_nexus: {
michael@0 40 name: 'Samsung Galaxy Nexus', width:720, height:1280, dpi:316
michael@0 41 },
michael@0 42 galaxy_tab: {
michael@0 43 name: 'Samsung Galaxy Tab 10.1', width:800, height:1280, dpi:149
michael@0 44 },
michael@0 45 wildfire: {
michael@0 46 name: 'HTC Wildfire', width:240, height:320, dpi:125
michael@0 47 },
michael@0 48 tattoo: {
michael@0 49 name: 'HTC Tattoo', width:240, height:320, dpi:143
michael@0 50 },
michael@0 51 salsa: {
michael@0 52 name: 'HTC Salsa', width:320, height:480, dpi:170
michael@0 53 },
michael@0 54 chacha: {
michael@0 55 name: 'HTC ChaCha', width:320, height:480, dpi:222
michael@0 56 },
michael@0 57 };
michael@0 58
michael@0 59 // Get the command line arguments that were passed to the b2g client
michael@0 60 let args;
michael@0 61 try {
michael@0 62 // On Firefox Mulet, we don't always have a command line argument
michael@0 63 args = window.arguments[0].QueryInterface(Ci.nsICommandLine);
michael@0 64 } catch(e) {}
michael@0 65
michael@0 66 let screenarg = null;
michael@0 67
michael@0 68 // Get the --screen argument from the command line
michael@0 69 try {
michael@0 70 if (args) {
michael@0 71 screenarg = args.handleFlagWithParam('screen', false);
michael@0 72 }
michael@0 73
michael@0 74 // If there isn't one, use the default screen
michael@0 75 if (screenarg === null)
michael@0 76 screenarg = DEFAULT_SCREEN;
michael@0 77
michael@0 78 // With no value, tell the user how to use it
michael@0 79 if (screenarg == '')
michael@0 80 usage();
michael@0 81 }
michael@0 82 catch(e) {
michael@0 83 // If getting the argument value fails, its an error
michael@0 84 usage();
michael@0 85 }
michael@0 86
michael@0 87 // Special case --screen=full goes into fullscreen mode
michael@0 88 if (screenarg === 'full') {
michael@0 89 shell.setAttribute('sizemode', 'fullscreen');
michael@0 90 return;
michael@0 91 }
michael@0 92
michael@0 93 let rescale = false;
michael@0 94
michael@0 95 // If the value of --screen ends with !, we'll be scaling the output
michael@0 96 if (screenarg[screenarg.length - 1] === '!') {
michael@0 97 rescale = true;
michael@0 98 screenarg = screenarg.substring(0, screenarg.length-1);
michael@0 99 }
michael@0 100
michael@0 101 let width, height, dpi;
michael@0 102
michael@0 103 if (screenarg in screens) {
michael@0 104 // If this is a named screen, get its data
michael@0 105 let screen = screens[screenarg];
michael@0 106 width = screen.width;
michael@0 107 height = screen.height;
michael@0 108 dpi = screen.dpi;
michael@0 109 } else {
michael@0 110 // Otherwise, parse the resolution and density from the --screen value.
michael@0 111 // The supported syntax is WIDTHxHEIGHT[@DPI]
michael@0 112 let match = screenarg.match(/^(\d+)x(\d+)(@(\d+))?$/);
michael@0 113
michael@0 114 // Display usage information on syntax errors
michael@0 115 if (match == null)
michael@0 116 usage();
michael@0 117
michael@0 118 // Convert strings to integers
michael@0 119 width = parseInt(match[1], 10);
michael@0 120 height = parseInt(match[2], 10);
michael@0 121 if (match[4])
michael@0 122 dpi = parseInt(match[4], 10);
michael@0 123 else // If no DPI, use the actual dpi of the host screen
michael@0 124 dpi = hostDPI;
michael@0 125
michael@0 126 // If any of the values came out 0 or NaN or undefined, display usage
michael@0 127 if (!width || !height || !dpi)
michael@0 128 usage();
michael@0 129 }
michael@0 130
michael@0 131 Cu.import("resource://gre/modules/GlobalSimulatorScreen.jsm");
michael@0 132 function resize(width, height, dpi, shouldFlip) {
michael@0 133 GlobalSimulatorScreen.width = width;
michael@0 134 GlobalSimulatorScreen.height = height;
michael@0 135
michael@0 136 // In order to do rescaling, we set the <browser> tag to the specified
michael@0 137 // width and height, and then use a CSS transform to scale it so that
michael@0 138 // it appears at the correct size on the host display. We also set
michael@0 139 // the size of the <window> element to that scaled target size.
michael@0 140 let scale = rescale ? hostDPI / dpi : 1;
michael@0 141
michael@0 142 // Set the window width and height to desired size plus chrome
michael@0 143 // Include the size of the toolbox displayed under the system app
michael@0 144 let controls = document.getElementById('controls');
michael@0 145 let controlsHeight = 0;
michael@0 146 if (controls) {
michael@0 147 controlsHeight = controls.getBoundingClientRect().height;
michael@0 148 }
michael@0 149 let chromewidth = window.outerWidth - window.innerWidth;
michael@0 150 let chromeheight = window.outerHeight - window.innerHeight + controlsHeight;
michael@0 151 window.resizeTo(Math.round(width * scale) + chromewidth,
michael@0 152 Math.round(height * scale) + chromeheight);
michael@0 153
michael@0 154 let frameWidth = width, frameHeight = height;
michael@0 155 if (shouldFlip) {
michael@0 156 frameWidth = height;
michael@0 157 frameHeight = width;
michael@0 158 }
michael@0 159
michael@0 160 // Set the browser element to the full unscaled size of the screen
michael@0 161 let style = browser.style;
michael@0 162 style.width = style.minWidth = style.maxWidth =
michael@0 163 frameWidth + 'px';
michael@0 164 style.height = style.minHeight = style.maxHeight =
michael@0 165 frameHeight + 'px';
michael@0 166 browser.setAttribute('flex', '0'); // Don't let it stretch
michael@0 167
michael@0 168 style.transformOrigin = '';
michael@0 169 style.transform = '';
michael@0 170
michael@0 171 // Now scale the browser element as needed
michael@0 172 if (scale !== 1) {
michael@0 173 style.transformOrigin = 'top left';
michael@0 174 style.transform += ' scale(' + scale + ',' + scale + ')';
michael@0 175 }
michael@0 176
michael@0 177 if (shouldFlip) {
michael@0 178 // Display the system app with a 90° clockwise rotation
michael@0 179 let shift = Math.floor(Math.abs(frameWidth-frameHeight) / 2);
michael@0 180 style.transform +=
michael@0 181 ' rotate(0.25turn) translate(-' + shift + 'px, -' + shift + 'px)';
michael@0 182 }
michael@0 183
michael@0 184 // Set the pixel density that we want to simulate.
michael@0 185 // This doesn't change the on-screen size, but makes
michael@0 186 // CSS media queries and mozmm units work right.
michael@0 187 Services.prefs.setIntPref('layout.css.dpi', dpi);
michael@0 188 }
michael@0 189
michael@0 190 // Resize on startup
michael@0 191 resize(width, height, dpi, false);
michael@0 192
michael@0 193 let defaultOrientation = width < height ? 'portrait' : 'landscape';
michael@0 194
michael@0 195 // Then resize on each rotation button click,
michael@0 196 // or when the system app lock/unlock the orientation
michael@0 197 Services.obs.addObserver(function orientationChangeListener(subject) {
michael@0 198 let screen = subject.wrappedJSObject;
michael@0 199 let { mozOrientation, screenOrientation } = screen;
michael@0 200
michael@0 201 let newWidth = width;
michael@0 202 let newHeight = height;
michael@0 203 // If we have an orientation different than the startup one,
michael@0 204 // we switch the sizes
michael@0 205 if (screenOrientation != defaultOrientation) {
michael@0 206 newWidth = height;
michael@0 207 newHeight = width;
michael@0 208 }
michael@0 209
michael@0 210 // If the current app doesn't supports the current screen orientation
michael@0 211 // still resize the window, but rotate its frame so that
michael@0 212 // it is displayed rotated on the side
michael@0 213 let shouldFlip = mozOrientation != screenOrientation;
michael@0 214
michael@0 215 resize(newWidth, newHeight, dpi, shouldFlip);
michael@0 216 }, 'simulator-adjust-window-size', false);
michael@0 217
michael@0 218 // A utility function like console.log() for printing to the terminal window
michael@0 219 // Uses dump(), but enables it first, if necessary
michael@0 220 function print() {
michael@0 221 let dump_enabled =
michael@0 222 Services.prefs.getBoolPref('browser.dom.window.dump.enabled');
michael@0 223
michael@0 224 if (!dump_enabled)
michael@0 225 Services.prefs.setBoolPref('browser.dom.window.dump.enabled', true);
michael@0 226
michael@0 227 dump(Array.prototype.join.call(arguments, ' ') + '\n');
michael@0 228
michael@0 229 if (!dump_enabled)
michael@0 230 Services.prefs.setBoolPref('browser.dom.window.dump.enabled', false);
michael@0 231 }
michael@0 232
michael@0 233 // Print usage info for --screen and exit
michael@0 234 function usage() {
michael@0 235 // Documentation for the --screen argument
michael@0 236 let msg =
michael@0 237 'The --screen argument specifies the desired resolution and\n' +
michael@0 238 'pixel density of the simulated device screen. Use it like this:\n' +
michael@0 239 '\t--screen=WIDTHxHEIGHT\t\t\t// E.g.: --screen=320x480\n' +
michael@0 240 '\t--screen=WIDTHxHEIGHT@DOTS_PER_INCH\t// E.g.: --screen=480x800@250\n' +
michael@0 241 '\t--screen=full\t\t\t\t// run in fullscreen mode\n' +
michael@0 242 '\nYou can also specify certain device names:\n';
michael@0 243 for(let p in screens)
michael@0 244 msg += '\t--screen=' + p + '\t// ' + screens[p].name + '\n';
michael@0 245 msg +=
michael@0 246 '\nAdd a ! to the end of a screen specification to rescale the\n' +
michael@0 247 'screen so that it is shown at actual size on your monitor:\n' +
michael@0 248 '\t--screen=nexus_s!\n' +
michael@0 249 '\t--screen=320x480@200!\n'
michael@0 250 ;
michael@0 251
michael@0 252 // Display the usage message
michael@0 253 print(msg);
michael@0 254
michael@0 255 // Exit the b2g client
michael@0 256 Services.startup.quit(Ci.nsIAppStartup.eAttemptQuit);
michael@0 257 }
michael@0 258 });

mercurial