Bug 1013837 - Adjust the style of ime menu.

apps/system/index.html

@@ -54,6 +54,7 @@
     <link rel="stylesheet" type="text/css" href="style/system/system.css">
     <link rel="stylesheet" type="text/css" href="style/system/keyboard.css">
     <link rel="stylesheet" type="text/css" href="style/sound_manager/sound_manager.css">
+    <link rel="stylesheet" type="text/css" href="style/ime_menu.css">
 
     <!-- Include shared building blocks -->
     <link rel="stylesheet" type="text/css" href="shared/style/confirm.css"/>
@@ -1153,7 +1154,8 @@ <h1>${title}</h1>
         <!--
         <li role="option" aria-selected="${selected}" data-id="${layoutId}">
           <label role="presentation">
-            <span >${layoutName}</span>
+            <span class="item-label">${layoutName}</span>
+            <span class="item-note">${appName}</span>
           </label>
         </li>
         -->

apps/system/js/ime_menu.js

@@ -84,7 +84,8 @@
 
       items.forEach(function traveseItems(item) {
         this.menu.innerHTML += itemTemplate.interpolate({
-          layoutName: item.label,
+          layoutName: item.layoutName,
+          appName: item.appName,
           layoutId: item.value.toString(),
           selected: item.selected ? 'true' : 'false'
         });

apps/system/js/keyboard_manager.js

@@ -636,9 +636,9 @@ var KeyboardManager = {
     this.switchChangeTimeout = setTimeout(function keyboardLayoutList() {
       var items = [];
       self.keyboardLayouts[showed.type].forEach(function(layout, index) {
-        var label = layout.appName + ' ' + layout.name;
         var item = {
-          label: label,
+          layoutName: layout.name,
+          appName: layout.appName,
           value: index,
           selected: (index === activeLayout)
         };

apps/system/style/ime_menu.css

@@ -0,0 +1,22 @@
+.ime-menu .item-label {
+  font-size: 1.8rem;
+  color: #FFF;
+  font-weight: 400;  /* Regular */
+}
+
+.ime-menu .item-note {
+  font-size: 1.6rem;
+  color: #C3C3C3;
+  font-weight: 300; /* Light */
+}
+
+/* To override the styling in building block */
+.ime-menu[role="dialog"][data-type="value-selector"] [role="listbox"] .item-label {
+  line-height: normal;
+  padding: 0.9rem 2.6rem 0 1.5rem;
+}
+
+.ime-menu[role="dialog"][data-type="value-selector"] [role="listbox"] .item-note {
+  line-height: normal;
+  padding: 0.3rem 2.6rem 0.9rem 1.5rem;
+}

apps/system/test/unit/ime_menu_test.js

@@ -15,27 +15,32 @@ suite('ImeMenu', function() {
   var imeListMockup = [
     {
       value: 0,
-      label: 'Test Layout 1'
+      layoutName: 'Test Layout 1',
+      appName: 'test app 1'
     },
     {
       value: 1,
-      label: 'Test Layout 2',
+      layoutName: 'Test Layout 2',
+      appName: 'test app 1',
       selected: true
     }
   ];
 
   var newImeListMockup = [
     {
       value: 0,
-      label: 'New Test Layout 1'
+      layoutName: 'New Test Layout 1',
+      appName: 'test app 1'
     },
     {
       value: 1,
-      label: 'New Test Layout 2'
+      layoutName: 'New Test Layout 2',
+      appName: 'test app 1'
     },
     {
       value: 2,
-      label: 'New Test Layout 3',
+      layoutName: 'New Test Layout 3',
+      appName: 'test app 2',
       selected: true
     }
   ];
@@ -49,6 +54,25 @@ suite('ImeMenu', function() {
     return screenElement.querySelector('.ime-menu');
   }
 
+  /*
+   * Check each ime item in the menu matches the data we passed.
+   */
+  function checkImeItems(imeListContainer, imeList) {
+    var i = 0;
+    var layoutNameElement = null;
+    var appNameElement = null;
+
+    for (i = 0; i < imeListContainer.length; i++) {
+      layoutNameElement = imeListContainer[i].querySelector('.item-label');
+      appNameElement = imeListContainer[i].querySelector('.item-note');
+
+      assert.equal(layoutNameElement.textContent,
+                   imeList[i].layoutName);
+
+      assert.equal(appNameElement.textContent, imeList[i].appName);
+    }
+  }
+
   suiteSetup(function() {
     loadBodyHTML('/index.html');
     screenElement = document.getElementById('screen');
@@ -106,6 +130,17 @@ suite('ImeMenu', function() {
       menu.stop();
     });
 
+    test(' > check each item in the ime list', function() {
+      var menu = new ImeMenu(imeListMockup, title);
+      menu.start();
+
+      var imeItems = getMenu().querySelectorAll('.ime-menu-list li');
+      assert.equal(imeItems.length, imeListMockup.length);
+      checkImeItems(imeItems, imeListMockup);
+
+      menu.stop();
+    });
+
     test(' > renew ime list', function() {
       // Show menu 1
       var menu = new ImeMenu(imeListMockup, title);
@@ -130,6 +165,9 @@ suite('ImeMenu', function() {
       // Check the selected item is correct
       selectedItem = getMenu().querySelector('li[aria-selected="true"]');
       assert.equal(selectedItem.dataset.id, '2');
+
+      checkImeItems(imeItems, newImeListMockup);
+
       menu2.stop();
     });
 

shared/style/value_selector.css

@@ -93,15 +93,16 @@
 }
 
 /* Checked status */
+[role="dialog"][data-type="value-selector"] [role="listbox"] li[aria-selected="true"] label {
+  background: transparent url(value_selector/images/icons/checked.png) right 1.2rem top 50% / 2.1rem no-repeat;
+}
+
 [role="dialog"][data-type="value-selector"] [role="listbox"] li[aria-selected="true"] span {
   padding-right: 2.6rem;
   margin-right: 1.2rem;
   color: #00abcd;
-  background: transparent url(value_selector/images/icons/checked.png) no-repeat 100% 50%;
-  background-size: 2rem;
 }
 
-
 /* Menu & buttons setup */
 [role="dialog"][data-type="value-selector"] menu {
   white-space: nowrap;