Gaia/TipsTricks

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.

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:

http://stackoverflow.com/questions/3493252/javascript-prototype-operator-performance-saves-memory-but-is-it-faster/4041582#4041582

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.

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