Gaia/TipsTricks
Contents
Tips and Tricks Related to Gaia
Collect werid or unusal tips and tricks found by Gaia developers. Contribution is welcome.
CSS
Calc DOM's Height According to Its Width
Related Bug: Bug 903920
Provided by: Rex, George
Use 'padding-bottom': it calc the property according to width, not height. So:
padding-bottom: calc(70% - 3rem)
Would map the '70%' to (element's width) * 70%
Vertical Alignment Without Table
Related Bug: Bug 903920
Provided by: Arthur, John
The reason of having that is to have a new UI for large device. We need to align the video title and information at the bottom of preview. We had tried multiple ways to have that. From the vertical-align: bottom to display: flex. Because the performance issue on display: table-cell. We choose display:flex as the final decision:
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
A good doc can be found at [1]. If you still feel that's too hard to understand what's going on, you should just play this one: [2]
Hide an Element
Provided by:
TranslateX? Opacity? Display? Visibility?
If the element need to be moved in again, don't use display: none. It would clear the animation and styles.
JavaScript
Insert NBSP via textContent
Provided by: Greg
Inser a " " via set the textContent attribute of a node:
node.textContent = '\u00A0';
Note that even though the space in Unicode is \u0020, we must use this "no-break space" instead. If we set a normal space character it would be omitted, as the "real" spaces in HTML.
Check how many arguments in a function (definition)
Provided by: John
Use function_name.length:
http://stackoverflow.com/questions/4138012/checks-how-many-arguments-a-function-takes-in-javascript
Test transitionend event handler
Provided by: Alive
Used in the unit test of keyboard manager.
var fakeEvt = new CustomEvent('transitionend');
fakeEvt.propertyName = 'transform';
KeyboardManager.keyboardFrameContainer.dispatchEvent(fakeEvt);
Place a range in Settings with float point
Provided by: Greg, Arthur
In settings.js#635, you'll see Bug 906296 disallow you to put a float value as max. So if I put this in Settings, it would always bounce to the beginning:
<input type="range" name="lockscreen.sliding.accfactor" step="0.01" min="1.00" value="1.04" max="1.04" />
And the odd one is if you don't assign the name, the code won't be triggered. To solve this, I change the values to integers.
How to define methods
Provided by: John, Alive
Don't use constructor to define methods unless it's unavoidable. Reason:
Prototype's methods would be shared between instances. So, using constructor style would add extra memory consumptions and damage the performance.
Singleton strategy
Provided by: Greg
In the progress of finding a way to implement singleton in JavaScript, I've found that this can create a object with multiple interfaces, but single instance:
(function(exports) {
// @constructor
var Hub = function(){};
var HubSingleton = {
occupied: {}
};
HubSingleton.plugin = (function(deviceId, device) {
this.occupied[deviceId] = device;
}).bind(HubSingleton);
HubSingleton.unplugin = (function(deviceId) {
delete this.occupied[deviceId];
}).bind(HubSingleton);
Hub.prototype = HubSingleton;
exports.Hub = Hub;
})(window)
This trick is done by the bind() method applied on a prototype object.
In this way, even the user have multiple instances of Hub, they all still indicate to the HubSingleton. For example:
var hub1 = new Hub();
var hub2 = new Hub();
var hub3 = new Hub();
hub1.plugin('foo', deviceFoo);
hub2.plugin('bar', deviceBar);
hub3.unplugin('foo')
hub1.occupied['foo']; // undefined
I don't know whether this trick is useful or not. It's looks like the Observer pattern, but as you may know, without JavaScript runtime's supports, any observing would be broken by DOM and other manipulations.
Resolution
Provided by: John Lu
Read image which is already high-resolution: NO need to multiply with the device pixel ratio. Draw something (lines, arcs, but not images) with canvas APIs: NEED to multiply with the device pixel ratio.
This is because build script would read high-resolution image, so it would fit the screen. However, to draw things (lines, arcs, ...) pixel-by-pixel, we would need to multiply the device pixel ratio.
Building Tools
Let your browser icon and bootstrap screen comes with Firefox's logo
Provided by: Gary
MOZILLA_OFFICIAL=1 make reset-gaia
Let installation path differ from /system/b2g
Provided by: John
GAIA_INSTALL_PARENT=/data/local
Make both two apps at the same time
Provided by: Yuren
APP="(system|calendar)" make
Apps
Include Camera in LockScreen
Provided by: Tim
Because LockScreen is in System app, and it obviously can't access the Camera app's resources, so we use copy and paste trick before to launch a fully functional Camera in the LockScreen (with additional iframe element) in secure mode. To eliminate this, Tim has invent a trick to launch Camera app with flag (in secure mode):
app://camera.XXXXXXX/index.html#secure
In this way (still need to provide a iframe instead of full AppWindow), the Camera can be launched in secure mode, and avoid the cross-app problem.
Test
Timeout issue in test
Provided by: John
If unit test continuously says Error: timeout of 2000ms exceeded, maybe some defined done function has never been called. It's for asynchronous test, never defined it in the arguments list in synchronous functions or the test framework would be aware of it and wait it being called.
Bugzilla
How to fire bugs batchly
Provided by: Fred
When fire the first bug, select 'Show Advanced Fields' and then 'remember values as bookmark able template' to create a template. Then those bugs would have the same values while creation.
Black Magic
This section is for new adventures that may be trapped with those discovered traps.
Disguised "PNG" Files
Provided by: Fred
If you take a look at the files in the 'gaia/apps/homescreen/everything.me/images/', you will find that some of those PNG files are actually disguised traps that may cause your patch be backed out while you want to fix the name of the files. This is because they committed symbolic links as real files. So if you changed the file name but missed the linking path, your file would become an invalid file.
