Port Gaia Music app to L20n

music.diff

diff --git a/apps/music/index.html b/apps/music/index.html
index ae95940..b64d3ef 100644
--- a/apps/music/index.html
+++ b/apps/music/index.html
@@ -4,15 +4,17 @@
     <meta charset="utf-8" />
     <meta http-equiv="pragma" content="no-cache" />
     <title>Music</title>
+    <!-- Localization -->
+    <meta name="locales" content="en-US, pl" />
+    <meta name="default_locale" content="en-US" />
+    <meta name="resources" content="./locales/music.{{locale}}.lol" />
+    <script src="shared/js/l20n.gaia.min.js"></script>
     <!-- Include shared building blocks -->
     <link rel="stylesheet" type="text/css" href="shared/style/headers.css"/>
     <link rel="stylesheet" type="text/css" href="shared/style/input_areas.css"/>
     <link rel="stylesheet" type="text/css" href="shared/style_unstable/tabs.css"/>
     <link rel="stylesheet" type="text/css" href="style/music.css"/>
-    <!-- Localization -->
-    <link rel="resource" type="application/l10n" href="locales/locales.ini">
     <!-- Shared code -->
-    <script defer src="shared/js/l10n.js"></script>
     <script defer src="shared/js/mouse_event_shim.js"></script>
     <script defer src="shared/js/mediadb.js"></script>
     <script defer src="shared/js/lazy_loader.js"></script>
@@ -31,7 +33,7 @@
           <button id="title-player" hidden><span class="icon icon-player">player</span></button>
           <button id="title-done" hidden><span class="icon icon-done"></span></button>
         </menu>
-        <h1 id="title-text" data-l10n-id="music">Music</h1>
+        <h1 id="title-text" data-l10n-id="music"></h1>
       </header>
     </section>
     <div id="views">
@@ -40,8 +42,8 @@
           <button id="views-tiles-search-close" type="submit">close</button>
           <p>
             <input id="views-tiles-search-input" type="search"
-                   data-l10n-id="search-music" placeholder="SearcH MusiC">
-            <button id="views-tiles-search-clear" type="reset">Clear</button>
+                   data-l10n-id="search_music" placeholder="SearcH MusiC">
+            <button id="views-tiles-search-clear" type="reset"></button>
           </p>
         </form>
         <div id="views-tiles-anchor"></div>
@@ -51,8 +53,8 @@
           <button id="views-list-search-close" type="submit">close</button>
           <p>
             <input id="views-list-search-input" type="search"
-                   data-l10n-id="search-music" placeholder="SearcH MusiC">
-            <button id="views-list-search-clear" type="reset">Clear</button>
+                   data-l10n-id="search_music" placeholder="SearcH MusiC">
+            <button id="views-list-search-clear" type="reset"></button>
           </p>
         </form>
         <div id="views-list-anchor"></div>
@@ -63,7 +65,7 @@
             <img id="views-sublist-header-image" />
           </div>
           <div id="views-sublist-header-controls">
-            <div id="views-sublist-header-name">Name</div>
+            <div id="views-sublist-header-name"></div>
             <button id="views-sublist-controls-play" class="album-controls-button"></button>
             <button id="views-sublist-controls-shuffle" class="album-controls-button"></button>
           </div>
@@ -74,8 +76,8 @@
         <div id="player-cover">
           <img id="player-cover-image" />
           <div id="player-cover-caption">
-            <div id="player-cover-artist" data-l10n-id="songArtist">Song Artist</div>
-            <div id="player-cover-album" data-l10n-id="songAlbum">Song Album</div>
+            <div id="player-cover-artist" data-l10n-id="songArtist"></div>
+            <div id="player-cover-album" data-l10n-id="songAlbum"></div>
           </div>
           <div id="player-cover-buttons">
             <button id="player-album-repeat" class="player-cover-button"></button>
@@ -109,21 +111,21 @@
       <section role="region" class="skin-dark">
         <div id="views-search-artists" class="search-category hidden">
           <header>
-            <h2><span data-l10n-id="search-artists">ArtistS</span>
+            <h2><span data-l10n-id="search_artists"></span>
               (<span class="search-result-count"></span>)</h2>
           </header>
           <div class="search-results"></div>
         </div>
         <div id="views-search-albums" class="search-category hidden">
           <header>
-            <h2><span data-l10n-id="search-albums">AlbumS</span>
+            <h2><span data-l10n-id="search_albums"></span>
               (<span class="search-result-count"></span>)</h2>
           </header>
           <div class="search-results"></div>
         </div>
         <div id="views-search-titles" class="search-category hidden">
           <header>
-            <h2><span data-l10n-id="search-titles">TrackS</span>
+            <h2><span data-l10n-id="search_titles"></span>
               (<span class="search-result-count"></span>)</h2>
           </header>
           <div class="search-results"></div>
diff --git a/apps/music/js/music.js b/apps/music/js/music.js
index 00c9b91..9b1b998 100644
--- a/apps/music/js/music.js
+++ b/apps/music/js/music.js
@@ -4,6 +4,7 @@
  * This is Music Application of Gaia
  */
 
+var _ = document.l10n.get;
 // strings for localization
 var musicTitle;
 var playlistTitle;
@@ -23,11 +24,11 @@ var leastPlayedTitle;
 var unknownTitleL10nId = 'unknownTitle';
 var unknownArtistL10nId = 'unknownArtist';
 var unknownAlbumL10nId = 'unknownAlbum';
-var shuffleAllTitleL10nId = 'playlists-shuffle-all';
-var highestRatedTitleL10nId = 'playlists-highest-rated';
-var recentlyAddedTitleL10nId = 'playlists-recently-added';
-var mostPlayedTitleL10nId = 'playlists-most-played';
-var leastPlayedTitleL10nId = 'playlists-least-played';
+var shuffleAllTitleL10nId = 'playlists_shuffle_all';
+var highestRatedTitleL10nId = 'playlists_highest_rated';
+var recentlyAddedTitleL10nId = 'playlists_recently_added';
+var mostPlayedTitleL10nId = 'playlists_most_played';
+var leastPlayedTitleL10nId = 'playlists_least_played';
 
 // The MediaDB object that manages the filesystem and the database of metadata
 // See init()
@@ -37,26 +38,22 @@ var pendingPick;
 
 // We get a localized event when the application is launched and when
 // the user switches languages.
-window.addEventListener('localized', function onlocalized() {
-  // Set the 'lang' and 'dir' attributes to <html> when the page is translated
-  document.documentElement.lang = navigator.mozL10n.language.code;
-  document.documentElement.dir = navigator.mozL10n.language.direction;
-
+document.l10n.ready(function onlocalized() {
   // Get prepared for the localized strings, these will be used later
-  musicTitle = navigator.mozL10n.get('music');
-  playlistTitle = navigator.mozL10n.get('playlists');
-  artistTitle = navigator.mozL10n.get('artists');
-  albumTitle = navigator.mozL10n.get('albums');
-  songTitle = navigator.mozL10n.get('songs');
-  pickerTitle = navigator.mozL10n.get('picker-title');
-  unknownAlbum = navigator.mozL10n.get(unknownAlbumL10nId);
-  unknownArtist = navigator.mozL10n.get(unknownArtistL10nId);
-  unknownTitle = navigator.mozL10n.get(unknownTitleL10nId);
-  shuffleAllTitle = navigator.mozL10n.get(shuffleAllTitleL10nId);
-  highestRatedTitle = navigator.mozL10n.get(highestRatedTitleL10nId);
-  recentlyAddedTitle = navigator.mozL10n.get(recentlyAddedTitleL10nId);
-  mostPlayedTitle = navigator.mozL10n.get(mostPlayedTitleL10nId);
-  leastPlayedTitle = navigator.mozL10n.get(leastPlayedTitleL10nId);
+  musicTitle = _('music');
+  playlistTitle = _('playlists');
+  artistTitle = _('artists');
+  albumTitle = _('albums');
+  songTitle = _('songs');
+  pickerTitle = _('picker_title');
+  unknownAlbum = _(unknownAlbumL10nId);
+  unknownArtist = _(unknownArtistL10nId);
+  unknownTitle = _(unknownTitleL10nId);
+  shuffleAllTitle = _(shuffleAllTitleL10nId);
+  highestRatedTitle = _(highestRatedTitleL10nId);
+  recentlyAddedTitle = _(recentlyAddedTitleL10nId);
+  mostPlayedTitle = _(mostPlayedTitleL10nId);
+  leastPlayedTitle = _(leastPlayedTitleL10nId);
 
   // The first time we get this event we start running the application.
   // But don't re-initialize if the user switches languages while we're running.
@@ -336,16 +333,16 @@ function showOverlay(id) {
     return;
   }
 
-  var title = navigator.mozL10n.get(id + '-title');
-  var text = navigator.mozL10n.get(id + '-text');
+  var title = _(id + '_title');
+  var text = _(id + '_text');
 
   var titleElement = document.getElementById('overlay-title');
   var textElement = document.getElementById('overlay-text');
 
   titleElement.textContent = title;
-  titleElement.dataset.l10nId = id + '-title';
+  titleElement.dataset.l10nId = id + '_title';
   textElement.textContent = text;
-  textElement.dataset.l10nId = id + '-text';
+  textElement.dataset.l10nId = id + '_text';
 
   document.getElementById('overlay').classList.remove('hidden');
 }
@@ -1583,7 +1580,7 @@ var TabBar = {
         if (playList) {
           var metadata = playList.metadata;
           if (metadata && metadata.l10nId) {
-            metadata.title = navigator.mozL10n.get(metadata.l10nId);
+            metadata.title = _(metadata.l10nId);
           }
         }
       });
diff --git a/apps/music/js/open.js b/apps/music/js/open.js
index 75bd790..2e8ddae 100644
--- a/apps/music/js/open.js
+++ b/apps/music/js/open.js
@@ -1,5 +1,6 @@
 'use strict';
 
+var _ = document.l10n.get;
 // strings for localization
 var unknownAlbum;
 var unknownArtist;
@@ -14,15 +15,11 @@ var unknownTitleL10nId = 'unknownTitle';
 
 // We get a localized event when the application is launched and when
 // the user switches languages.
-window.addEventListener('localized', function onlocalized() {
-  // Set the 'lang' and 'dir' attributes to <html> when the page is translated
-  document.documentElement.lang = navigator.mozL10n.language.code;
-  document.documentElement.dir = navigator.mozL10n.language.direction;
-
+document.l10n.ready(function onlocalized() {
   // Get prepared for the localized strings, these will be used later
-  unknownAlbum = navigator.mozL10n.get('unknownAlbum');
-  unknownArtist = navigator.mozL10n.get('unknownArtist');
-  unknownTitle = navigator.mozL10n.get('unknownTitle');
+  unknownAlbum = _('unknownAlbum');
+  unknownArtist = _('unknownArtist');
+  unknownTitle = _('unknownTitle');
 
   navigator.mozSetMessageHandler('activity', handleOpenActivity);
 });
@@ -84,7 +81,7 @@ function handleOpenActivity(request) {
         // to the invoking app
         saved = filename;
         // And tell the user
-        showBanner(navigator.mozL10n.get('saved', {
+        showBanner(_('saved', {
           title: document.getElementById('title-text').textContent
         }));
       };
diff --git a/apps/music/locales/music.en-US.lol b/apps/music/locales/music.en-US.lol
new file mode 100644
index 0000000..c2563e1
--- /dev/null
+++ b/apps/music/locales/music.en-US.lol
@@ -0,0 +1,41 @@
+<music "Music L20n">
+
+<mix       "Mix">
+<playlists "Playlist">
+<artists   "Artists">
+<albums    "Albums">
+<songs     "Songs">
+<more      "More">
+
+<songArtist "Song artist">
+<songAlbum  "Song album">
+
+<unknownArtist "Unknown artist">
+<unknownAlbum  "Unknown album">
+<unknownTitle  "Unknown title">
+
+<empty_title "Add songs to get started">
+<empty_text "Load songs on to the memory card.">
+
+<nocard_title "No memory card found">
+<nocard_text  "Insert a memory card to listen to songs.">
+
+<pluggedin_title "Music can not be used while phone is plugged in">
+<pluggedin_text  "Unplug the phone to play music.">
+
+<search_music
+  placeholder: "Search Music">
+<search_cancel "Cancel">
+<search_artists "Artists">
+<search_albums "Albums">
+<search_titles "Tracks">
+
+<playlists_shuffle_all    "Shuffle all">
+<playlists_highest_rated  "Highest rated">
+<playlists_recently_added "Recently added">
+<playlists_most_played    "Most played">
+<playlists_least_played   "Least played">
+<picker_title "Select a track">
+
+<save  "Save">
+<saved "Saved {{$title}} to Music">
diff --git a/apps/music/locales/music.pl.lol b/apps/music/locales/music.pl.lol
new file mode 100644
index 0000000..b7c4f6c
--- /dev/null
+++ b/apps/music/locales/music.pl.lol
@@ -0,0 +1,42 @@
+<music "Muzyka {{ @hour }}">
+
+<mix "Pomieszane">
+<playlists "Listy">
+<artists " Artyści">
+<albums "Albumy">
+<songs "Utwory">
+<more "Więcej">
+
+<songArtist "Artysta">
+<songAlbum "Album">
+
+<unknownArtist "Nieznany artysta">
+<unknownAlbum "Nieznany album">
+<unknownTitle "Nieznany tytuł">
+
+<empty_title "Dodaj muzykę, aby zacząć">
+<empty_text "Wgraj pliki z muzyką na kartę pamięci.">
+
+<nocard_title "Brak karty pamięci">
+<nocard_text "Karta pamięci musi być obecna, aby można było słuchać muzyki.">
+
+<pluggedin_title "Nie można słuchać muzyki podczas ładowania">
+<pluggedin_text "Należy odłączyć telefon, aby odtwarzać muzykę.">
+
+<search_music 
+ placeholder: "Wyszukaj muzykę">
+<search_cancel "Anuluj">
+<search_artists "Artyści">
+<search_albums "Albumy">
+<search_titles "Utwory">
+
+<playlists_shuffle_all "Losowe">
+<playlists_highest_rated "Najwyżej ocenione">
+<playlists_recently_added "Ostatnio dodane">
+<playlists_most_played "Najczęściej odtwarzane">
+<playlists_least_played "Najrzadziej odtwarzane">
+
+<picker_title "Zaznacz utwór">
+
+<save "Zapisz">
+<saved "„{{$title}}” dodano do Muzyki">
diff --git a/apps/music/open.html b/apps/music/open.html
index 25f21d3..239a408 100644
--- a/apps/music/open.html
+++ b/apps/music/open.html
@@ -9,9 +9,10 @@
     <link rel="stylesheet" type="text/css" href="shared/style/headers.css"/>
     <link rel="stylesheet" type="text/css" href="shared/style/status.css" />
     <!-- Localization -->
-    <link rel="resource" type="application/l10n" href="locales/locales.ini">
+    <meta name="languages" content="en-US, pl" />
+    <meta name="resources" content="./locales/music.{{lang}}.lol" />
     <!-- Shared code -->
-    <script type="text/javascript" src="shared/js/l10n.js"></script>
+    <script defer src="shared/js/l20n.gaia.min.js"></script>
     <script type="text/javascript" src="shared/js/device_storage_utils.js"></script>
     <script type="text/javascript" defer src="shared/js/mouse_event_shim.js"></script>
     <script type="text/javascript" defer src="shared/js/blobview.js"></script>