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.

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