Skip to content
This repository has been archived by the owner on Nov 3, 2021. It is now read-only.

Bug 964653 - (system-dialog) [Window Management] Implement System Dialog Window #16282

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
90 changes: 15 additions & 75 deletions apps/system/index.html
Expand Up @@ -91,7 +91,6 @@
<script defer src="js/hardware_buttons.js"></script>
<script defer src="js/dialer_ringer.js"></script>
<script defer src="js/system_banner.js"></script>
<script defer src="js/system_dialog.js"></script>
<script defer src="js/home_gesture.js"></script>

<!-- TTL View -->
Expand Down Expand Up @@ -155,11 +154,6 @@
<script defer src="js/lockscreen_connection_info_manager.js"></script>
<script defer src="js/lockscreen.js"></script>

<!-- PIN Unlocking -->
<script defer src="js/sim_lock.js"></script>
<link rel="stylesheet" type="text/css" href="style/simcard.css">
<script defer src="js/simcard_dialog.js"></script>

<!-- Airplane Mode -->
<script defer src="js/airplane_mode.js"></script>

Expand Down Expand Up @@ -268,10 +262,6 @@
<!-- Identity -->
<script defer src="js/identity.js"></script>

<!-- Fx Accounts -->
<link rel="stylesheet" type="text/css" href="style/firefox_account/firefox_account_container.css">
<script defer src="js/fxa_ui.js"></script>

<!-- Operator Variant Mechanism -->
<script defer src="shared/js/operator_variant_helper.js"></script>
<script defer src="js/operator_variant/operator_variant.js"></script>
Expand Down Expand Up @@ -318,6 +308,10 @@
<script defer src="js/secure_window.js"></script>
<script defer src="js/secure_window_factory.js"></script>
<script defer src="js/secure_window_manager.js"></script>
<script defer src="js/system_dialog.js"></script>
<script defer src="js/system_dialog_manager.js"></script>
<script defer src="js/system_simcard_dialog.js"></script>
<script defer src="js/fxa_dialog.js"></script>
<script defer src="js/visibility_manager.js"></script>
<script defer src="js/layout_manager.js"></script>
<script defer src="js/suspending_app_priority_manager.js"></script>
Expand Down Expand Up @@ -362,7 +356,14 @@
<script defer src="shared/js/url_helper.js"></script>
<link rel="stylesheet" type="text/css" href="style/rocketbar/rocketbar.css">

<!-- Firefox Accounts-->
<!-- PIN Unlocking -->
<script defer src="js/sim_lock.js"></script>
<link rel="stylesheet" type="text/css" href="style/simcard.css">
<script defer src="js/simcard_dialog.js"></script>

<!-- Firefox Accounts -->
<link rel="stylesheet" type="text/css" href="style/firefox_account/firefox_account_container.css">
<script defer src="js/fxa_ui.js"></script>
<script defer src="js/fxa_manager.js"></script>

<style>
Expand Down Expand Up @@ -599,69 +600,8 @@

<div id="dialog-overlay" data-z-index-level="dialog-overlay">
<!-- Unlock SIM Pin dialog -->
<div id="simpin-dialog" role="dialog" class="generic-dialog" data-z-index-level="simpin-dialog" hidden>
<section role="region">
<header>
<button class="back" hidden>
<span class="icon icon-back"></span>
</button>
<h1></h1>
</header>
<div class="container">
<div id="errorMsg" class="error" hidden>
<div id="messageHeader">The PIN was incorrect.</div>
<span id="messageBody">3 tries left.</span>
</div>
<!-- tries left -->
<div id="triesLeft" data-l10n-id="inputCodeRetriesLeft" hidden>3 tries left</div>

<!-- sim pin input field -->
<div id="pinArea" hidden>
<div data-l10n-id="simPin">SIM PIN</div>
<div class="input-wrapper">
<input name="simpin" type="password" x-inputmode="digit" size="8" maxlength="8" />
</div>
</div>
<!-- sim puk input field -->
<div id="pukArea" hidden>
<div data-l10n-id="pukCode">PUK Code</div>
<div class="input-wrapper">
<input name="simpuk" type="password" x-inputmode="digit" size="8" maxlength="8" />
</div>
</div>
<!-- sim nck/cck/spck input field -->
<div id="xckArea" hidden>
<div name="xckDesc" data-l10n-id="nckCode">NCK Code</div>
<div class="input-wrapper">
<input name="xckpin" type="number" size="16" maxlength="16" />
<input name="xckpinVis" type="text" size="16" maxlength="16" />
</div>
</div>
<!-- new sim pin input field -->
<div id="newPinArea" hidden>
<div data-l10n-id="newSimPinMsg">
Create PIN (must contain 4 to 8 digits)
</div>
<div class="input-wrapper">
<input name="newSimpin" type="password" x-inputmode="digit" size="8" maxlength="8" />
</div>
</div>
<!-- confirm new sim pin input field -->
<div id="confirmPinArea" hidden>
<div data-l10n-id="confirmNewSimPinMsg">
Confirm New PIN
</div>
<div class="input-wrapper">
<input name="confirmNewSimpin" type="password" x-inputmode="digit" size="8" maxlength="8" />
</div>
</div>
</div>
</section>
<menu data-items="2">
<button type="reset" data-l10n-id="skip">Skip</button>
<button data-l10n-id="ok" type="submit">Done</button>
</menu>
</div>
<!-- Add the dialog via SystemDialog dynamically. -->
<!-- <div id="simpin-dialog" role="dialog" class="generic-dialog" data-z-index-level="simpin-dialog" hidden></div> -->

<!-- Crash reporter -->
<div id="crash-dialog">
Expand Down Expand Up @@ -750,7 +690,7 @@ <h3 data-l10n-id="error-title" id="trustedui-error-title">Error</h3>
</div>

<!-- Firefox Account Dialog -->
<div id="fxa-dialog"></div>
<!-- <div id="fxa-dialog"></div> Add the dialog via SystemDialog dynamically. -->

<div id="modal-dialog">
<div id="modal-dialog-alert" role="dialog" class="generic-dialog" tabindex="-1">
Expand Down
3 changes: 3 additions & 0 deletions apps/system/js/bootstrap.js
Expand Up @@ -24,6 +24,9 @@ window.addEventListener('load', function startup() {
if (window.SuspendingAppPriorityManager) {
window.suspendingAppPriorityManager = new SuspendingAppPriorityManager();
}
/** @global */
window.systemDialogManager = window.systemDialogManager ||
new SystemDialogManager();
}

function safelyLaunchFTU() {
Expand Down
51 changes: 51 additions & 0 deletions apps/system/js/fxa_dialog.js
@@ -0,0 +1,51 @@
/* -*- Mode: js; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- /
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
'use strict';

(function(exports) {

/**
* @class FxAccountsDialog
* @param {options} object for attributes `onShow`, `onHide` callback.
* @extends SystemDialog
*/
var FxAccountsDialog = function FxAccountsDialog(options) {
if (options) {
this.options = options;
}
/**
* render the dialog
*/
this.render();
this.publish('created');
};

FxAccountsDialog.prototype.__proto__ = window.SystemDialog.prototype;

FxAccountsDialog.prototype.customID = 'fxa-dialog';

FxAccountsDialog.prototype.DEBUG = false;

FxAccountsDialog.prototype.view = function fxad_view() {
return '<div id="' + this.instanceID + '"></div>';
};

FxAccountsDialog.prototype.getView = function fxad_view() {
return document.getElementById(this.instanceID);
};

// Get all elements when inited.
FxAccountsDialog.prototype._fetchElements =
function fxad__fetchElements() {

};

// Register events when all elements are got.
FxAccountsDialog.prototype._registerEvents =
function fxad__registerEvents() {

};

exports.FxAccountsDialog = FxAccountsDialog;

}(window));
8 changes: 5 additions & 3 deletions apps/system/js/fxa_ui.js
@@ -1,4 +1,4 @@
/* global SystemDialog, FtuLauncher */
/* global FxAccountsDialog, FtuLauncher */

'use strict';

Expand All @@ -12,8 +12,10 @@ var FxAccountsUI = {
var dialogOptions = {
onHide: this.reset.bind(this)
};
this.dialog = SystemDialog('fxa-dialog', dialogOptions);
this.panel = document.getElementById('fxa-dialog');
if (!this.dialog) {
this.dialog = new FxAccountsDialog(dialogOptions);
}
this.panel = this.dialog.getView();
this.iframe = document.createElement('iframe');
this.iframe.id = 'fxa-iframe';
},
Expand Down
17 changes: 17 additions & 0 deletions apps/system/js/layout_manager.js
@@ -1,3 +1,5 @@
/* global AppWindowManager, KeyboardManager, SoftwareButtonManager, StatusBar,
System */
'use strict';

(function(window) {
Expand Down Expand Up @@ -53,6 +55,21 @@
SoftwareButtonManager.height - StatusBar.height;
},

/**
* Gives the available height for a active App window.
*
* @memberOf LayoutManager
*/
get availableHeight() {
var isFullScreen = AppWindowManager.getActiveApp().isFullScreen();
return (isFullScreen ? this.fullscreenHeight : this.usualHeight);
},

/**
* Gives the possible width for a normal window.
*
* @memberOf LayoutManager
*/
get width() {
return window.innerWidth;
},
Expand Down
63 changes: 37 additions & 26 deletions apps/system/js/simcard_dialog.js
@@ -1,37 +1,19 @@
/* -*- Mode: js; js-indent-level: 2; indent-tabs-mode: nil -*- */
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
/* global SIMSlotManager, SystemDialog */
/* global SIMSlotManager, SimPinSystemDialog */

'use strict';

var SimPinDialog = {
_currentSlot: null,
dialogTitle: document.querySelector('#simpin-dialog header h1'),
dialogDone: document.querySelector('#simpin-dialog button[type="submit"]'),
dialogSkip: document.querySelector('#simpin-dialog button[type="reset"]'),
dialogBack: document.querySelector('#simpin-dialog button.back'),

pinArea: document.getElementById('pinArea'),
pukArea: document.getElementById('pukArea'),
xckArea: document.getElementById('xckArea'),
desc: document.querySelector('#xckArea div[name="xckDesc"]'),
newPinArea: document.getElementById('newPinArea'),
confirmPinArea: document.getElementById('confirmPinArea'),
simPinSystemDialog: null,

pinInput: null,
pukInput: null,
xckInput: null,
newPinInput: null,
confirmPinInput: null,

triesLeftMsg: document.getElementById('triesLeft'),

errorMsg: document.getElementById('errorMsg'),
errorMsgHeader: document.getElementById('messageHeader'),
errorMsgBody: document.getElementById('messageBody'),

containerDiv: document.querySelector('#simpin-dialog .container'),

lockType: 'pin',

lockTypeMap: {
Expand All @@ -42,6 +24,31 @@ var SimPinDialog = {
'serviceProviderLocked': 'spck'
},

initElements: function spl_initElements() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd like to move this into SimPinSystemDialog and let simcard_dialog.js to be manager of that but this could be another bug.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with your suggestion. That would be a follow up work.:)

// All of the simpin dialog elements are appended via SimPinSystemDialog.
this.dialogTitle = document.querySelector('#simpin-dialog header h1');
this.dialogDone =
document.querySelector('#simpin-dialog button[type="submit"]');
this.dialogSkip =
document.querySelector('#simpin-dialog button[type="reset"]');
this.dialogBack = document.querySelector('#simpin-dialog button.back');

this.pinArea = document.getElementById('pinArea');
this.pukArea = document.getElementById('pukArea');
this.xckArea = document.getElementById('xckArea');
this.desc = document.querySelector('#xckArea div[name="xckDesc"]');
this.newPinArea = document.getElementById('newPinArea');
this.confirmPinArea = document.getElementById('confirmPinArea');

this.triesLeftMsg = document.getElementById('triesLeft');

this.errorMsg = document.getElementById('errorMsg');
this.errorMsgHeader = document.getElementById('messageHeader');
this.errorMsgBody = document.getElementById('messageBody');

this.containerDiv = document.querySelector('#simpin-dialog .container');
},

getNumberPasswordInputField: function spl_wrapNumberInput(name) {
var inputField = document.querySelector('input[name="' + name + '"]');
var self = this;
Expand Down Expand Up @@ -264,7 +271,7 @@ var SimPinDialog = {

/**
* Show the SIM pin dialog
* @param {Object} slot SIMSlot instance
* @param {Object} slot SIMSlot instance.
* @param {Function} [onclose] Optional function called when dialog is closed.
* Receive a single argument being the reason of
* dialog closing: success, skip, home or holdhome.
Expand All @@ -277,7 +284,7 @@ var SimPinDialog = {

window.dispatchEvent(new CustomEvent('simpinshow'));

this.systemDialog.show();
this.simPinSystemDialog.show();
this._visible = true;
this.lockType = 'pin';
this.handleCardState();
Expand Down Expand Up @@ -306,7 +313,7 @@ var SimPinDialog = {
window.dispatchEvent(new CustomEvent('simpinclose', {
detail: this
}));
this.systemDialog.hide(reason);
this.simPinSystemDialog.hide(reason);
this._visible = false;
},

Expand Down Expand Up @@ -336,14 +343,18 @@ var SimPinDialog = {
},

init: function spl_init() {
this.systemDialog = SystemDialog('simpin-dialog', {
onHide: this.onHide.bind(this)
});
if (!this.simPinSystemDialog) {
this.simPinSystemDialog = new SimPinSystemDialog({
onHide: this.onHide.bind(this)
});
}

if (!SIMSlotManager.length) {
return;
}

this.initElements();

this.dialogDone.onclick = this.verify.bind(this);
this.dialogSkip.onclick = this.skip.bind(this);
this.dialogBack.onclick = this.back.bind(this);
Expand Down