Firebug Localization

From FirebugWiki
Revision as of 04:12, 2 July 2010 by Honza (Talk | contribs) (Localization APIs)

Jump to: navigation, search


Firebug is using BabelZilla (BZ) to utilize an existing community of localizers and get translation to various languages. This effort requires a process and Firebug developers should follow some rules that help to synchronize files coming from BZ to the development source tree.

In case of any problems related to wrong usage of translated string within the Firebug's UI, please report a new issue.


Development Rules

  • FB developers should change only the en-US locale files, which stand like a

template for all other translated locales.

  • If some string (its value) is changed, change also its key so, translators can see

there is something new to translate.

  • When updating from BZ, always get all translations (even for not released

locales) from BZ before uploading new version. So, no translation made since the last upload is lost. The only dir, which is *not* synced with BZ is locale/en-US.

  • Only *.properties files should be used for localization (Firebug doesn't want to use DTD files due a lack of script-ability)

Naming Conventions

Every string in *.properties file is identified by ID (a key). For example, following string is identified by net.Response_Header and it's value is set to net.Response Header.

net.Response_Header=Response Header

String IDs in Firebug use following naming rules:

  • The key is prefixed with lower case module name using the string (e.g. net or console, ...)
  • In case of many strings in one module you can use additional prefix to further group related strings. Again such prefix should be followed by a period.
  • The part after last period is used as the default value (with underscores replaced by spaces) in case the string is not available in the current locale.

See examples:

$STR("net.Response Header");

  • key is: net.Response_Header
  • default is: Response Header

$STR("net.timing.Request Time");

  • key is: net.timing.Request_Time
  • default is: Request Time

Localization APIs

There are several APIs that are be used to make Firebug code localizable.

  • $STR - localization of a static string.
  • $STRF - localization of a string with dynamically inserted values.

Some examples:

// Search for key "Label" within firebug *.properties files and returns its value.
// If the key doesn't exist returns "Label".
// Search for key "Button_Label" within the firebug *.properties files.
// If the key doesn't exist returns "Button Label".
$STR("Button Label");
// Search for key "net.Response_Header".
// If the key doesn't exist returns "Response Header".
$STR("net.Response Header");
var param1 = 10;
var param2 = "ms";

// Returns "Request Time: 10 [ms]" for key that looks as follows:
// net.timing.Request_Time=Request Time: %S [%S]
$STRF("net.timing.Request Time", param1, param2);

In order to register a new string bundle (*.properties file) use Firebug.registerStringBundle method. This method should be also used from within a Firebug extension so, Firebug localization API properly work.


Localization Events

Every Firebug module (Firebug.Module), no matter if it's built-in core module or coming from an extension, should perform initial localization within internationalizeUI method. This module method is executed upon an internationalizeUI event that is dispatched to all registered modules during Firebug initialization process.

Here is an example of such method.

Firebug.FireCookieModel = extend(Firebug.Module,

    internationalizeUI: function()
        var elements = ["fcCookiesMenu", "fcExportAll", "fcExportForSite",
            "fcRemoveAll", "fcCreate", "fcCookieViewAll"];

        for (var i=0; i<elements.length; i++)
            var element =$(elements[i]);
            if (element.hasAttribute("label"))
                FBL.internationalize(element, "label");

            if (element.hasAttribute("tooltiptext"))
                FBL.internationalize(element, "tooltiptext");


Here is a simplified version of the same:

    internationalizeUI: function()
        var elements = ["fcCookiesMenu", "fcExportAll", "fcExportForSite",
            "fcRemoveAll", "fcCreate", "fcCookieViewAll"];

        var attributes = ["label", "tooltiptext"];

        FBL.internationalizeElements(doc, elements, attributes);