diff --git a/apps/communications/contacts/index.html b/apps/communications/contacts/index.html
index 283802c8d1e1..cd0cd0a0fd0f 100644
--- a/apps/communications/contacts/index.html
+++ b/apps/communications/contacts/index.html
@@ -16,7 +16,6 @@
-
@@ -67,6 +66,14 @@
+
+
+
+
+
@@ -84,7 +91,6 @@
-
@@ -98,7 +104,6 @@
-
@@ -124,7 +129,6 @@
-
@@ -28,7 +29,6 @@
-
@@ -63,14 +63,18 @@
+
+
+
+
+
-
@@ -103,7 +107,6 @@
-
@@ -240,7 +243,9 @@
-
+
+
+
diff --git a/apps/communications/dialer/js/dialer.js b/apps/communications/dialer/js/dialer.js
index 4122f203d695..4d6969bbe0ba 100644
--- a/apps/communications/dialer/js/dialer.js
+++ b/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.
diff --git a/apps/communications/dialer/test/unit/dialer_test.js b/apps/communications/dialer/test/unit/dialer_test.js
index c37d315b0a66..e42bd6ff2883 100644
--- a/apps/communications/dialer/test/unit/dialer_test.js
+++ b/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,7 +24,6 @@ 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');
@@ -32,6 +31,8 @@ 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,6 +42,7 @@ var mocksHelperForDialer = new MocksHelper([
'Contacts',
'CallLog',
'CallLogDBManager',
+ 'GaiaSimPicker',
'LazyL10n',
'LazyLoader',
'KeypadManager',
@@ -48,7 +50,6 @@ var mocksHelperForDialer = new MocksHelper([
'Notification',
'NotificationHelper',
'SettingsListener',
- 'SimPicker',
'SimSettingsHelper',
'SuggestionBar',
'Utils',
@@ -56,6 +57,10 @@ var mocksHelperForDialer = new MocksHelper([
'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() {
diff --git a/apps/communications/dialer/test/unit/keypad_test.js b/apps/communications/dialer/test/unit/keypad_test.js
index a82f53a3523c..da29cf82d182 100644
--- a/apps/communications/dialer/test/unit/keypad_test.js
+++ b/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);
});
diff --git a/apps/communications/dialer/test/unit/mock_dialer_index.html b/apps/communications/dialer/test/unit/mock_dialer_index.html
index 5a553306d410..be2f16eb6351 100644
--- a/apps/communications/dialer/test/unit/mock_dialer_index.html
+++ b/apps/communications/dialer/test/unit/mock_dialer_index.html
@@ -85,4 +85,5 @@
+
diff --git a/apps/communications/dialer/test/unit/sim_picker_test.js b/apps/communications/dialer/test/unit/sim_picker_test.js
deleted file mode 100644
index f979a8c803c6..000000000000
--- a/apps/communications/dialer/test/unit/sim_picker_test.js
+++ /dev/null
@@ -1,201 +0,0 @@
-/* globals SimPicker, MocksHelper, MockMozL10n, MockNavigatorMozIccManager,
- MockTelephonyHelper */
-
-'use strict';
-
-require('/dialer/test/unit/mock_lazy_loader.js');
-require('/shared/test/unit/mocks/mock_navigator_moz_icc_manager.js');
-require('/shared/test/unit/mocks/mock_navigator_moz_telephony.js');
-require('/shared/test/unit/mocks/dialer/mock_lazy_l10n.js');
-require('/shared/test/unit/mocks/dialer/mock_telephony_helper.js');
-
-require('/shared/js/sim_picker.js');
-
-var mocksHelperForSimPicker = new MocksHelper([
- 'LazyLoader',
- 'LazyL10n'
-]).init();
-
-suite('SIM picker', function() {
- var subject;
- var realMozIccManager;
- var realMozL10n;
- var realTelephonyHelper;
- var menu;
- var header;
-
- mocksHelperForSimPicker.attachTestHelpers();
-
- var loadBody = function() {
- loadBodyHTML('/shared/elements/sim_picker.html');
- document.body.innerHTML = document.body.querySelector('template').innerHTML;
- };
-
- suiteSetup(function() {
- subject = SimPicker;
-
- realMozIccManager = navigator.mozIccManager;
- navigator.mozIccManager = MockNavigatorMozIccManager;
- navigator.mozIccManager.mTeardown();
-
- realMozL10n = navigator.mozL10n;
- navigator.mozL10n = MockMozL10n;
-
- realTelephonyHelper = window.TelephonyHelper;
- window.TelephonyHelper = null;
- });
-
- suiteTeardown(function() {
- navigator.mozIccManager = realMozIccManager;
- navigator.mozL10n = realMozL10n;
-
- window.TelephonyHelper = realTelephonyHelper;
- });
-
- setup(function() {
- subject._domBuilt = false;
-
- navigator.mozIccManager.addIcc(0, {});
- navigator.mozIccManager.addIcc(1, {});
-
- loadBody();
-
- subject.getOrPick(0, '1111', function() {});
-
- menu = document.querySelector('menu');
- header = document.getElementById('sim-picker-dial-via');
- });
-
- teardown(function() {
- navigator.mozIccManager.mTeardown();
- });
-
- suite('getOrPick/getInUseSim', function() {
- test('header should contain phone number when getter provided', function() {
- var setAttributesSpy = this.sinon.spy(MockMozL10n, 'setAttributes');
- subject.getOrPick(0, '1111', function() {});
- sinon.assert.calledWith(setAttributesSpy,
- header,
- 'sim-picker-dial-via-with-number',
- {phoneNumber: '1111'});
- });
-
- test('header should not contain phone number when getter not provided',
- function() {
- subject.getOrPick(0, null, function() {});
- assert.equal(header.getAttribute('data-l10n-id'),
- 'sim-picker-select-sim');
- });
-
- test('show the menu twice with different args', function() {
- var setAttributesSpy = this.sinon.spy(MockMozL10n, 'setAttributes');
-
- subject.getOrPick(0, '1111', function() {});
- sinon.assert.calledWith(setAttributesSpy,
- header,
- 'sim-picker-dial-via-with-number',
- {phoneNumber: '1111'});
- assert.equal(menu.children.length, 3);
-
- subject.getOrPick(0, '2222', function() {});
- sinon.assert.calledWith(setAttributesSpy,
- header,
- 'sim-picker-dial-via-with-number',
- {phoneNumber: '2222'});
- assert.equal(menu.children.length, 3);
- });
-
- test('should show the menu', function() {
- assert.equal(document.getElementById('sim-picker').hidden, false);
- });
-
- test('should focus on the menu', function() {
- var simPickerElt = document.getElementById('sim-picker');
-
- var focusSpy = this.sinon.spy(simPickerElt, 'focus');
- subject.getOrPick(0, '1111', function() {});
-
- sinon.assert.calledOnce(focusSpy);
- });
- });
-
- suite('buttons', function() {
- test('should have 2 option buttons', function() {
- var buttonNum = 0;
- for (var i = 0; i < menu.children.length; i++) {
- if (menu.children[i].dataset.l10nId !== 'cancel') {
- buttonNum++;
- }
- }
- assert.equal(buttonNum, 2);
- });
-
- test('should have 3 buttons in total', function() {
- assert.equal(menu.children.length, 3);
- });
-
- test('should mark default SIM', function() {
- for (var i = 0; i < menu.children.length; i++) {
- assert.equal(
- menu.children[i].classList.contains('is-default'), i === 0);
- }
- });
-
- test('should not mark default SIM when none is set', function() {
- subject.getOrPick(undefined, '2222', function() {});
- for (var i = 0; i < menu.children.length; i++) {
- assert.isFalse(menu.children[i].classList.contains('is-default'));
- }
- });
- });
-
- suite('callbacks and functions', function() {
- setup(function() {
- loadBody();
- });
-
- test('should fire callback when a SIM is selected', function() {
- var callbackStub = this.sinon.stub();
- subject.getOrPick(0, '1111', callbackStub);
-
- menu.children[0].click();
-
- sinon.assert.calledOnce(callbackStub);
- assert.equal(document.getElementById('sim-picker').hidden, true);
- });
-
- test('should close menu when pressing cancel button', function() {
- var callbackStub = this.sinon.stub();
- subject.getOrPick(0, '1111', callbackStub);
-
- menu.children[2].click();
-
- sinon.assert.notCalled(callbackStub);
- assert.equal(document.getElementById('sim-picker').hidden, true);
- });
- });
-
- suite('with a call in progress', function() {
- suiteSetup(function() {
- window.TelephonyHelper = MockTelephonyHelper;
- });
-
- suiteTeardown(function() {
- window.TelephonyHelper = null;
- });
-
- setup(function() {
- MockTelephonyHelper.mInUseSim = 1;
- });
-
- teardown(function() {
- MockTelephonyHelper.mTeardown();
- });
-
- test('should callback with in use serviceId', function() {
- var callbackStub = this.sinon.stub();
- subject.getOrPick(0, '1111', callbackStub);
- sinon.assert.calledWith(callbackStub, 1);
- });
- });
-});
diff --git a/apps/communications/test/unit/setup.js b/apps/communications/test/unit/setup.js
index 06548cf1678d..bf059ad516e9 100644
--- a/apps/communications/test/unit/setup.js
+++ b/apps/communications/test/unit/setup.js
@@ -1,5 +1,6 @@
'use strict';
-requireApp('communications/shared/test/unit/mocks/mocks_helper.js');
+require('/shared/test/unit/mocks/elements/custom_elements_helper.js');
+require('/shared/test/unit/mocks/mocks_helper.js');
require('/shared/test/unit/load_body_html_helper.js');
diff --git a/apps/emergency-call/index.html b/apps/emergency-call/index.html
index b136e8694eaf..7e416986eba0 100644
--- a/apps/emergency-call/index.html
+++ b/apps/emergency-call/index.html
@@ -10,7 +10,8 @@
-
+
+
@@ -31,16 +32,16 @@
-
-
+