Port SimPicker implementation in MSAB and comms apps to GaiaSimPicker. r=Rik, r=julienw, r=francisco, r=yurenju

apps/communications/contacts/index.html

@@ -16,7 +16,6 @@
     <link href="/shared/style/switches.css" rel="stylesheet">
     <link href="/shared/style/confirm.css" rel="stylesheet">
     <link href="/shared/style/action_menu.css" rel="stylesheet">
-    <link href="/shared/style/sim_picker.css" rel="stylesheet">
     <link href="/shared/style/edit_mode.css" rel="stylesheet">
     <link href="/shared/style/animations.css" rel="stylesheet">
 
@@ -67,6 +66,14 @@
     <script defer src="/shared/elements/gaia-header/dist/script.js"></script>
     <link rel="stylesheet" type="text/css" href="/shared/elements/gaia-theme/style.css" />
     <!-- <link rel="stylesheet" type="text/css" href="/shared/elements/gaia-icons/style.css" /> -->
+    <link rel="localization" href="/shared/elements/gaia_menu/locales/gaia_menu.{locale}.properties">
+    <link rel="localization" href="/shared/elements/gaia_sim_picker/locales/gaia_sim_picker.{locale}.properties">
+    <script defer src="/shared/elements/gaia_menu/script.js"></script>
+    <script defer src="/shared/elements/gaia_sim_picker/script.js"></script>
+    <!--
+    <link rel="stylesheet" type="text/css" href="/shared/elements/gaia_menu/style.css">
+    <link rel="stylesheet" type="text/css" href="/shared/elements/gaia_sim_picker/style.css">
+    -->
 
     <!-- For initializing FB integration -->
     <script defer src="/contacts/js/fb/fb_init.js"></script>
@@ -84,7 +91,6 @@
     <link rel="localization" href="../dialer/locales/shared.{locale}.properties">
     <link rel="localization" href="/shared/locales/import_contacts/import_contacts.{locale}.properties">
     <link rel="localization" href="/shared/locales/date/date.{locale}.properties">
-    <link rel="localization" href="/shared/locales/sim_picker/sim_picker.{locale}.properties">
     <link rel="localization" href="/shared/locales/phone_types/phone_types.{locale}.properties">
 
     <script defer src="/contacts/js/fb_loader.js"></script>
@@ -98,7 +104,6 @@
     <link href="/shared/js/fb/fb_data_reader.js">
     <link href="/shared/js/setImmediate.js">
     <link href="/shared/js/sim_settings_helper.js">
-    <link href="/shared/js/sim_picker.js">
     <link href="/shared/js/nfc_utils.js">
     <link href="/shared/js/contacts/sms_integration.js">
     <link href="/shared/js/contacts/contacts_buttons.js">
@@ -124,7 +129,6 @@
     <link rel="import" href="elements/status.html">
     <link rel="import" href="elements/tag.html">
     <link rel="import" href="elements/ice.html">
-    <link rel="import" href="/shared/elements/sim_picker.html">
     <!--
     <link href="/shared/pages/import/oauth.html">
     <link href="/shared/pages/import/curtain.html">
@@ -239,7 +243,7 @@ <h1 id="edit-title" data-l10n-id="contacts"></h1>
     <form    is="confirm-form" data-type="confirm" id="loading-overlay" class="hide no-opacity" role="dialog"></form>
     <section is="status-message" id="statusMsg" role="status" class="hidden"></section>
     <form    is="confirmation-message" id="confirmation-message" class="hide" role="dialog" data-type="confirm"></form>
-    <form    is="sim-picker" id="sim-picker" role="dialog" data-type="action" hidden></form>
     <section is="ice-view" id="ice-view" role="region" class="view view-right hidden"></section>
+    <gaia-sim-picker id="sim-picker" tabindex="-1"></gaia-sim-picker>
   </body>
 </html>

apps/communications/contacts/js/contacts.js

@@ -625,15 +625,12 @@ var Contacts = (function() {
       callback();
     } else {
       Contacts.view('Details', function viewLoaded() {
-        var simPickerNode = document.getElementById('sim-picker');
         LazyLoader.load(
           [SHARED_UTILS_PATH + '/misc.js',
            '/dialer/js/telephony_helper.js',
            '/shared/js/contacts/sms_integration.js',
-           simPickerNode,
            '/shared/js/contacts/contacts_buttons.js'],
         function() {
-          navigator.mozL10n.translate(simPickerNode);
           detailsReady = true;
           contactsDetails = contacts.Details;
           contactsDetails.init();

apps/communications/contacts/test/unit/mock_details_dom.js.html

@@ -101,5 +101,4 @@
             '</section>' +
         '</article>' +
       '</section>' +
-      '<form is="sim-picker" id="sim-picker" role="dialog" data-type="action" hidden>' +
-      '</form>';
+      '<gaia-sim-picker id="sim-picker" tabindex="-1"></gaia-sim-picker>';

apps/communications/dialer/index.html

@@ -12,10 +12,11 @@
     <link rel="localization" href="locales/shared.{locale}.properties">
     <link rel="localization" href="../contacts/locales/contacts.{locale}.properties">
     <link rel="localization" href="/shared/locales/date/date.{locale}.properties">
-    <link rel="localization" href="/shared/locales/sim_picker/sim_picker.{locale}.properties">
     <link rel="localization" href="/shared/locales/voicemail/voicemail.{locale}.properties">
     <link rel="localization" href="/shared/locales/keypad/keypad.{locale}.properties">
     <link rel="localization" href="/shared/locales/phone_types/phone_types.{locale}.properties">
+    <link rel="localization" href="/shared/elements/gaia_menu/locales/gaia_menu.{locale}.properties">
+    <link rel="localization" href="/shared/elements/gaia_sim_picker/locales/gaia_sim_picker.{locale}.properties">
 
     <!-- CSS -->
     <link rel="stylesheet" type="text/css" href="/shared/style/animations.css">
@@ -28,7 +29,6 @@
     <link rel="stylesheet" type="text/css" href="/shared/style/dialer/overlay.css">
 
     <link rel="stylesheet" type="text/css" href="/shared/style/tabs.css">
-    <link rel="stylesheet" type="text/css" href="/shared/style/sim_picker.css">
 
     <link rel="stylesheet" type="text/css" href="/shared/elements/gaia-theme/style.css">
     <link rel="stylesheet" type="text/css" href="/shared/elements/gaia-icons/style.css">
@@ -63,14 +63,18 @@
     <link rel="stylesheet" type="text/css" href="/shared/style/contacts/contacts_buttons.css">
     <link rel="stylesheet" type="text/css" href="/shared/style/contacts.css">
     <link rel="stylesheet" type="text/css" href="/dialer/style/buttons.css">
+    <link rel="stylesheet" type="text/css" href="/shared/elements/gaia_menu/style.css">
+    <link rel="stylesheet" type="text/css" href="/shared/elements/gaia_sim_picker/style.css">
+    <script defer src="/shared/elements/gaia_menu/script.js"></script>
+    <script defer src="/shared/elements/gaia_sim_picker/script.js"></script>
     <script defer src="/shared/js/accessibility_helper.js"></script>
     <script defer src="/shared/js/async_storage.js"></script>
+    <script defer src="/shared/js/component_utils.js"></script>
     <script defer src="/shared/js/l10n.js"></script>
     <script defer src="/shared/js/l10n_date.js"></script>
     <script defer src="/shared/js/mobile_operator.js"></script>
     <script defer src="/shared/js/notification_helper.js"></script>
     <script defer src="/shared/js/option_menu.js"></script>
-    <script defer src="/shared/js/sim_picker.js"></script>
     <script defer src="/shared/js/simple_phone_matcher.js"></script>
     <script defer src="/shared/js/settings_listener.js"></script>
     <script defer src="/shared/js/confirm.js"></script>
@@ -103,7 +107,6 @@
     <link rel="import" href="/shared/elements/contacts/contact_in_overlay.html">
     <link rel="import" href="/shared/elements/contacts/contact_list_overlay.html">
     <link rel="import" href="/shared/elements/confirmation-message.html">
-    <link rel="import" href="/shared/elements/sim_picker.html">
     <link rel="import" href="/contacts/elements/phone_details.html">
     <link rel="import" href="/contacts/elements/email_details.html">
   </head>
@@ -240,7 +243,9 @@ <h1 data-l10n-id="callLog"></h1>
 
     <form is="edit-mode" id="edit-mode" role="dialog" data-l10n-id="callLogEditDialog" data-type="edit" hidden></form>
 
-    <form is="sim-picker" id="sim-picker" role="dialog" data-type="action" hidden></form>
+    <form is="add-contact-action-menu" id="add-contact-action-menu" role="dialog" data-l10n-id="dialerAddContactDialog" data-type="action" hidden></form>
+
+    <gaia-sim-picker id="sim-picker" tabindex="-1"></gaia-sim-picker>
 
     <form is="confirmation-message" id="confirmation-message" class="hide no-opacity" role="dialog" data-type="confirm"></form>
 

apps/communications/dialer/js/dialer.js

@@ -2,7 +2,7 @@
 
 /* global AccessibilityHelper, CallLog, CallLogDBManager, Contacts,
           KeypadManager,LazyL10n, LazyLoader, MmiManager, Notification,
-          NotificationHelper, SettingsListener, SimPicker, SimSettingsHelper,
+          NotificationHelper, SettingsListener, SimSettingsHelper,
           SuggestionBar, TelephonyHelper, TonePlayer, Utils, Voicemail */
 
 var NavbarManager = {
@@ -374,8 +374,11 @@ var CallHandler = (function callHandler() {
         SimSettingsHelper.getCardIndexFrom('outgoingCall',
         function(defaultCardIndex) {
           if (defaultCardIndex === SimSettingsHelper.ALWAYS_ASK_OPTION_VALUE) {
-            LazyLoader.load(['/shared/js/sim_picker.js'], function() {
-              SimPicker.getOrPick(defaultCardIndex, phoneNumber, function(ci) {
+            LazyLoader.load(['/shared/js/component_utils.js',
+                             '/shared/elements/gaia_sim_picker/script.js'],
+            function() {
+              var simPicker = document.getElementById('sim-picker');
+              simPicker.getOrPick(defaultCardIndex, phoneNumber, function(ci) {
                 CallHandler.call(phoneNumber, ci);
               });
               // Show the dialer so the user can select the SIM.

apps/communications/dialer/test/unit/dialer_test.js

@@ -5,7 +5,7 @@
    NavbarManager, Notification, MockKeypadManager, MockVoicemail,
    MockCallLog, MockCallLogDBManager, MockNavigatorWakeLock, MockMmiManager,
    MockSuggestionBar, LazyLoader, AccessibilityHelper, MockSimSettingsHelper,
-   MockSimPicker, MockTelephonyHelper */
+   MockTelephonyHelper, CustomElementsHelper */
 
 require(
   '/shared/test/unit/mocks/mock_navigator_moz_set_message_handler.js'
@@ -24,14 +24,15 @@ require('/shared/test/unit/mocks/mock_navigator_moz_icc_manager.js');
 require('/shared/test/unit/mocks/mock_notification.js');
 require('/shared/test/unit/mocks/mock_notification_helper.js');
 require('/shared/test/unit/mocks/mock_settings_listener.js');
-require('/shared/test/unit/mocks/mock_sim_picker.js');
 require('/shared/test/unit/mocks/mock_sim_settings_helper.js');
 require('/shared/test/unit/mocks/dialer/mock_contacts.js');
 require('/shared/test/unit/mocks/dialer/mock_lazy_l10n.js');
 require('/shared/test/unit/mocks/dialer/mock_keypad.js');
 require('/shared/test/unit/mocks/dialer/mock_telephony_helper.js');
 require('/shared/test/unit/mocks/dialer/mock_tone_player.js');
 require('/shared/test/unit/mocks/dialer/mock_utils.js');
+require(
+  '/shared/test/unit/mocks/elements/gaia_sim_picker/mock_gaia_sim_picker.js');
 
 require('/dialer/js/dialer.js');
 
@@ -41,21 +42,25 @@ var mocksHelperForDialer = new MocksHelper([
   'Contacts',
   'CallLog',
   'CallLogDBManager',
+  'GaiaSimPicker',
   'LazyL10n',
   'LazyLoader',
   'KeypadManager',
   'MmiManager',
   'Notification',
   'NotificationHelper',
   'SettingsListener',
-  'SimPicker',
   'SimSettingsHelper',
   'SuggestionBar',
   'Utils',
   'TonePlayer',
   'Voicemail'
 ]).init();
 
+var customElementsForNavbarManager = new CustomElementsHelper([
+  'GaiaSimPicker'
+]);
+
 suite('navigation bar', function() {
   var domContactsIframe;
   var domOptionRecents;
@@ -107,6 +112,8 @@ suite('navigation bar', function() {
 
     CallHandler.init();
     NavbarManager.init();
+
+    customElementsForNavbarManager.resolve();
   });
 
   teardown(function() {
@@ -531,11 +538,21 @@ suite('navigation bar', function() {
 
       var getGroupAtPositionStub;
       var callSpy;
+      var simPicker;
 
       setup(function() {
         getGroupAtPositionStub =
           this.sinon.stub(MockCallLogDBManager, 'getGroupAtPosition');
         callSpy = this.sinon.stub(CallHandler, 'call');
+
+        simPicker = document.createElement('gaia-sim-picker');
+        simPicker.id = 'sim-picker';
+        document.body.appendChild(simPicker);
+        customElementsForNavbarManager.resolve();
+      });
+
+      teardown(function() {
+        document.body.removeChild(simPicker);
       });
 
       [0, 1].forEach(function(serviceId) {
@@ -557,9 +574,9 @@ suite('navigation bar', function() {
         });
 
         test('should show SIM picker', function() {
-          this.sinon.spy(MockSimPicker, 'getOrPick');
+          this.sinon.spy(simPicker, 'getOrPick');
           sendCommand('ATD12345');
-          sinon.assert.calledWith(MockSimPicker.getOrPick, serviceId, '12345');
+          sinon.assert.calledWith(simPicker.getOrPick, serviceId, '12345');
         });
 
         test('should show/foreground the dialer', function() {

apps/communications/dialer/test/unit/keypad_test.js

@@ -1,9 +1,9 @@
 /* globals CallHandler, CallLogDBManager, FontSizeManager, gTonesFrequencies,
            KeypadManager, MockCall, MockCallsHandler, MockDialerIndexHtml,
            MockIccManager, MockNavigatorMozTelephony, MockNavigatorSettings,
-           MockSettingsListener, MocksHelper, MockTonePlayer, SimPicker,
-           telephonyAddCall, MockMultiSimActionButtonSingleton, MockMozL10n,
-           CustomDialog, MockMozActivity
+           MockSettingsListener, MocksHelper, MockTonePlayer, telephonyAddCall,
+           MockMultiSimActionButtonSingleton, MockMozL10n, CustomDialog,
+           MockMozActivity, CustomElementsHelper
 */
 
 'use strict';
@@ -18,7 +18,6 @@ require('/shared/test/unit/mocks/mock_iccmanager.js');
 require('/shared/test/unit/mocks/mock_navigator_moz_settings.js');
 require('/shared/test/unit/mocks/mock_navigator_moz_telephony.js');
 require('/shared/test/unit/mocks/mock_settings_listener.js');
-require('/shared/test/unit/mocks/mock_sim_picker.js');
 require('/shared/test/unit/mocks/mock_multi_sim_action_button.js');
 require('/shared/test/unit/mocks/dialer/mock_handled_call.js');
 require('/shared/test/unit/mocks/dialer/mock_call.js');
@@ -29,6 +28,8 @@ require('/shared/test/unit/mocks/dialer/mock_tone_player.js');
 require('/shared/test/unit/mocks/mock_custom_dialog.js');
 require('/shared/test/unit/mocks/mock_moz_activity.js');
 require('/shared/test/unit/mocks/dialer/mock_font_size_manager.js');
+require(
+  '/shared/test/unit/mocks/elements/gaia_sim_picker/mock_gaia_sim_picker.js');
 require('/dialer/test/unit/mock_dialer_index.html.js');
 
 var mocksHelperForKeypad = new MocksHelper([
@@ -41,13 +42,17 @@ var mocksHelperForKeypad = new MocksHelper([
   'CallLogDBManager',
   'HandledCall',
   'SettingsListener',
-  'SimPicker',
+  'GaiaSimPicker',
   'TonePlayer',
   'CustomDialog',
   'MozActivity',
   'FontSizeManager'
 ]).init();
 
+var customElementsHelperForKeypad = new CustomElementsHelper([
+  'GaiaSimPicker'
+]);
+
 suite('dialer/keypad', function() {
   var subject;
   var previousBody;
@@ -77,6 +82,8 @@ suite('dialer/keypad', function() {
     document.body.innerHTML = MockDialerIndexHtml;
     subject = KeypadManager;
     subject.init(false);
+
+    customElementsHelperForKeypad.resolve();
   });
 
   suiteTeardown(function() {
@@ -594,6 +601,7 @@ suite('dialer/keypad', function() {
 
       suite('DualSIM', function() {
         var fakeVoicemail2 = '666';
+        var simPicker;
 
         setup(function() {
           navigator.mozIccManager.iccIds[0] = 0;
@@ -603,24 +611,25 @@ suite('dialer/keypad', function() {
             fakeVoicemail, fakeVoicemail2];
           MockNavigatorSettings.mSettings['ril.voicemail.defaultServiceId'] = 1;
 
-          this.sinon.spy(SimPicker, 'getOrPick');
+          simPicker = document.getElementById('sim-picker');
+          this.sinon.spy(simPicker, 'getOrPick');
           doLongPress.bind(this)();
 
           MockNavigatorSettings.mReplyToRequests();
         });
 
         test('should show the SIM picker for favorite SIM', function() {
-          sinon.assert.calledWith(SimPicker.getOrPick, 1, 'voiceMail');
+          sinon.assert.calledWith(simPicker.getOrPick, 1, 'voiceMail');
         });
 
         test('should call voicemail for SIM1', function() {
-          SimPicker.getOrPick.yield(0);
+          simPicker.getOrPick.yield(0);
           MockNavigatorSettings.mReplyToRequests();
           sinon.assert.calledWith(CallHandler.call, fakeVoicemail, 0);
         });
 
         test('should call voicemail for SIM2', function() {
-          SimPicker.getOrPick.yield(1);
+          simPicker.getOrPick.yield(1);
           MockNavigatorSettings.mReplyToRequests();
           sinon.assert.calledWith(CallHandler.call, fakeVoicemail2, 1);
         });

apps/communications/dialer/test/unit/mock_dialer_index.html

@@ -85,4 +85,5 @@
             </section>
           </article>
         </div>
+        <gaia-sim-picker id="sim-picker"></gaia-sim-picker>
       </li>