forked from mirrors/gecko-dev
595da48d95
Differential Revision: https://phabricator.services.mozilla.com/D26334 --HG-- extra : moz-landing-system : lando
542 lines
16 KiB
JavaScript
542 lines
16 KiB
JavaScript
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
"use strict";
|
|
|
|
// This is loaded into chrome windows with the subscript loader. Wrap in
|
|
// a block to prevent accidentally leaking globals onto `window`.
|
|
{
|
|
const {AppConstants} = ChromeUtils.import("resource://gre/modules/AppConstants.jsm");
|
|
const {Services} = ChromeUtils.import("resource://gre/modules/Services.jsm");
|
|
|
|
const kDTDs = [ "chrome://global/locale/wizard.dtd" ];
|
|
|
|
class MozWizard extends MozXULElement {
|
|
constructor() {
|
|
super();
|
|
|
|
this._accessMethod = null;
|
|
this._currentPage = null;
|
|
this._canAdvance = true;
|
|
this._canRewind = false;
|
|
this._hasLoaded = false;
|
|
this._pageStack = [];
|
|
|
|
this._bundle =
|
|
Services.strings.createBundle("chrome://global/locale/wizard.properties");
|
|
|
|
this.addEventListener("keypress", (event) => {
|
|
if (event.keyCode == KeyEvent.DOM_VK_RETURN) {
|
|
this._hitEnter(event);
|
|
} else if (event.keyCode == KeyEvent.DOM_VK_ESCAPE && !event.defaultPrevented) {
|
|
this.cancel();
|
|
}
|
|
}, { mozSystemGroup: true });
|
|
|
|
this.attachShadow({ mode: "open" }).appendChild(
|
|
MozXULElement.parseXULToFragment(`
|
|
<html:link rel="stylesheet" href="chrome://global/content/widgets.css" />
|
|
<hbox class="wizard-header"></hbox>
|
|
<deck class="wizard-page-box" flex="1">
|
|
<slot xmlns="http://www.w3.org/1999/xhtml" name="wizardpage"></slot>
|
|
</deck>
|
|
<slot xmlns="http://www.w3.org/1999/xhtml"></slot>
|
|
<wizard-buttons class="wizard-buttons"></wizard-buttons>
|
|
`));
|
|
this.initializeAttributeInheritance();
|
|
|
|
this._deck = this.shadowRoot.querySelector(".wizard-page-box");
|
|
this._wizardButtons = this.shadowRoot.querySelector(".wizard-buttons");
|
|
|
|
this._wizardHeader = this.shadowRoot.querySelector(".wizard-header");
|
|
this._wizardHeader.appendChild(
|
|
MozXULElement.parseXULToFragment(AppConstants.platform == "macosx" ?
|
|
`<stack class="wizard-header-stack" flex="1">
|
|
<vbox class="wizard-header-box-1">
|
|
<vbox class="wizard-header-box-text">
|
|
<label class="wizard-header-label"/>
|
|
</vbox>
|
|
</vbox>
|
|
<hbox class="wizard-header-box-icon">
|
|
<spacer flex="1"/>
|
|
<image class="wizard-header-icon"/>
|
|
</hbox>
|
|
</stack>` :
|
|
`<hbox class="wizard-header-box-1" flex="1">
|
|
<vbox class="wizard-header-box-text" flex="1">
|
|
<label class="wizard-header-label"/>
|
|
<label class="wizard-header-description"/>
|
|
</vbox>
|
|
<image class="wizard-header-icon"/>
|
|
</hbox>`
|
|
)
|
|
);
|
|
}
|
|
|
|
static get inheritedAttributes() {
|
|
return {
|
|
".wizard-buttons": "pagestep,firstpage,lastpage",
|
|
};
|
|
}
|
|
|
|
connectedCallback() {
|
|
if (this.delayConnectedCallback()) {
|
|
return;
|
|
}
|
|
|
|
this.pageCount = this.wizardPages.length;
|
|
|
|
this._initPages();
|
|
this.advance(); // start off on the first page
|
|
|
|
window.addEventListener("close", (event) => {
|
|
if (document.documentElement.cancel()) {
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
|
|
// Give focus to the first focusable element in the wizard, do it after
|
|
// onload completes, see bug 103197.
|
|
window.addEventListener("load", () => window.setTimeout(() => {
|
|
document.documentElement._hasLoaded = true;
|
|
if (!document.commandDispatcher.focusedElement) {
|
|
document.commandDispatcher.advanceFocusIntoSubtree(this);
|
|
}
|
|
try {
|
|
let button = document.documentElement._wizardButtons.defaultButton;
|
|
if (button) {
|
|
window.notifyDefaultButtonLoaded(button);
|
|
}
|
|
} catch (e) {}
|
|
}, 0));
|
|
}
|
|
|
|
set title(val) {
|
|
return document.title = val;
|
|
}
|
|
|
|
get title() {
|
|
return document.title;
|
|
}
|
|
|
|
set canAdvance(val) {
|
|
this.getButton("next").disabled = !val;
|
|
return this._canAdvance = val;
|
|
}
|
|
|
|
get canAdvance() {
|
|
return this._canAdvance;
|
|
}
|
|
|
|
set canRewind(val) {
|
|
this.getButton("back").disabled = !val;
|
|
return this._canRewind = val;
|
|
}
|
|
|
|
get canRewind() {
|
|
return this._canRewind;
|
|
}
|
|
|
|
get pageStep() {
|
|
return this._pageStack.length;
|
|
}
|
|
|
|
get wizardPages() {
|
|
const xulns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
|
return this.getElementsByTagNameNS(xulns, "wizardpage");
|
|
}
|
|
|
|
set currentPage(val) {
|
|
if (!val)
|
|
return val;
|
|
|
|
this._currentPage = val;
|
|
|
|
// Setting this attribute allows wizard's clients to dynamically
|
|
// change the styles of each page based on purpose of the page.
|
|
this.setAttribute("currentpageid", val.pageid);
|
|
if (this.onFirstPage) {
|
|
this.canRewind = false;
|
|
this.setAttribute("firstpage", "true");
|
|
if (AppConstants.platform == "linux") {
|
|
this.getButton("back").setAttribute("hidden", "true");
|
|
}
|
|
} else {
|
|
this.canRewind = true;
|
|
this.setAttribute("firstpage", "false");
|
|
if (AppConstants.platform == "linux") {
|
|
this.getButton("back").setAttribute("hidden", "false");
|
|
}
|
|
}
|
|
|
|
if (this.onLastPage) {
|
|
this.canAdvance = true;
|
|
this.setAttribute("lastpage", "true");
|
|
} else {
|
|
this.setAttribute("lastpage", "false");
|
|
}
|
|
|
|
this._deck.setAttribute("selectedIndex", val.pageIndex);
|
|
this._advanceFocusToPage(val);
|
|
|
|
this._adjustWizardHeader();
|
|
this._wizardButtons.onPageChange();
|
|
|
|
this._fireEvent(val, "pageshow");
|
|
|
|
return val;
|
|
}
|
|
|
|
get currentPage() {
|
|
return this._currentPage;
|
|
}
|
|
|
|
set pageIndex(val) {
|
|
if (val < 0 || val >= this.pageCount)
|
|
return val;
|
|
|
|
var page = this.wizardPages[val];
|
|
this._pageStack[this._pageStack.length - 1] = page;
|
|
this.currentPage = page;
|
|
|
|
return val;
|
|
}
|
|
|
|
get pageIndex() {
|
|
return this._currentPage ? this._currentPage.pageIndex : -1;
|
|
}
|
|
|
|
get onFirstPage() {
|
|
return this._pageStack.length == 1;
|
|
}
|
|
|
|
get onLastPage() {
|
|
var cp = this.currentPage;
|
|
return cp && ((this._accessMethod == "sequential" && cp.pageIndex == this.pageCount - 1) ||
|
|
(this._accessMethod == "random" && cp.next == ""));
|
|
}
|
|
|
|
getButton(aDlgType) {
|
|
return this._wizardButtons.getButton(aDlgType);
|
|
}
|
|
|
|
getPageById(aPageId) {
|
|
var els = this.getElementsByAttribute("pageid", aPageId);
|
|
return els.item(0);
|
|
}
|
|
|
|
extra1() {
|
|
if (this.currentPage)
|
|
this._fireEvent(this.currentPage, "extra1");
|
|
}
|
|
|
|
extra2() {
|
|
if (this.currentPage)
|
|
this._fireEvent(this.currentPage, "extra2");
|
|
}
|
|
|
|
rewind() {
|
|
if (!this.canRewind)
|
|
return;
|
|
|
|
if (this.currentPage && !this._fireEvent(this.currentPage, "pagehide"))
|
|
return;
|
|
|
|
if (this.currentPage && !this._fireEvent(this.currentPage, "pagerewound"))
|
|
return;
|
|
|
|
if (!this._fireEvent(this, "wizardback"))
|
|
return;
|
|
|
|
this._pageStack.pop();
|
|
this.currentPage = this._pageStack[this._pageStack.length - 1];
|
|
this.setAttribute("pagestep", this._pageStack.length);
|
|
}
|
|
|
|
advance(aPageId) {
|
|
if (!this.canAdvance)
|
|
return;
|
|
|
|
if (this.currentPage && !this._fireEvent(this.currentPage, "pagehide"))
|
|
return;
|
|
|
|
if (this.currentPage && !this._fireEvent(this.currentPage, "pageadvanced"))
|
|
return;
|
|
|
|
if (this.onLastPage && !aPageId) {
|
|
if (this._fireEvent(this, "wizardfinish"))
|
|
window.setTimeout(function() { window.close(); }, 1);
|
|
} else {
|
|
if (!this._fireEvent(this, "wizardnext"))
|
|
return;
|
|
|
|
let page;
|
|
if (aPageId) {
|
|
page = this.getPageById(aPageId);
|
|
} else if (this.currentPage) {
|
|
if (this._accessMethod == "random") {
|
|
page = this.getPageById(this.currentPage.next);
|
|
} else {
|
|
page = this.wizardPages[this.currentPage.pageIndex + 1];
|
|
}
|
|
} else {
|
|
page = this.wizardPages[0];
|
|
}
|
|
|
|
if (page) {
|
|
this._pageStack.push(page);
|
|
this.setAttribute("pagestep", this._pageStack.length);
|
|
|
|
this.currentPage = page;
|
|
}
|
|
}
|
|
}
|
|
|
|
goTo(aPageId) {
|
|
var page = this.getPageById(aPageId);
|
|
if (page) {
|
|
this._pageStack[this._pageStack.length - 1] = page;
|
|
this.currentPage = page;
|
|
}
|
|
}
|
|
|
|
cancel() {
|
|
if (!this._fireEvent(this, "wizardcancel"))
|
|
return true;
|
|
|
|
window.close();
|
|
window.setTimeout(function() { window.close(); }, 1);
|
|
return false;
|
|
}
|
|
|
|
_advanceFocusToPage(aPage) {
|
|
if (!this._hasLoaded)
|
|
return;
|
|
|
|
document.commandDispatcher.advanceFocusIntoSubtree(aPage);
|
|
|
|
// if advanceFocusIntoSubtree tries to focus one of our
|
|
// dialog buttons, then remove it and put it on the root
|
|
var focused = document.commandDispatcher.focusedElement;
|
|
if (focused && focused.hasAttribute("dlgtype"))
|
|
this.focus();
|
|
}
|
|
|
|
_initPages() {
|
|
var meth = "sequential";
|
|
var pages = this.wizardPages;
|
|
for (var i = 0; i < pages.length; ++i) {
|
|
var page = pages[i];
|
|
page.pageIndex = i;
|
|
if (page.next != "")
|
|
meth = "random";
|
|
}
|
|
this._accessMethod = meth;
|
|
}
|
|
|
|
_adjustWizardHeader() {
|
|
var label = this.currentPage.getAttribute("label");
|
|
if (!label && this.onFirstPage && this._bundle) {
|
|
if (AppConstants.platform == "macosx") {
|
|
label = this._bundle.GetStringFromName("default-first-title-mac");
|
|
} else {
|
|
label = this._bundle.formatStringFromName("default-first-title", [this.title]);
|
|
}
|
|
} else if (!label && this.onLastPage && this._bundle) {
|
|
if (AppConstants.platform == "macosx") {
|
|
label = this._bundle.GetStringFromName("default-last-title-mac");
|
|
} else {
|
|
label = this._bundle.formatStringFromName("default-last-title", [this.title]);
|
|
}
|
|
}
|
|
this._wizardHeader.
|
|
querySelector(".wizard-header-label").textContent = label;
|
|
let headerDescEl =
|
|
this._wizardHeader.querySelector(".wizard-header-description");
|
|
if (headerDescEl) {
|
|
headerDescEl.textContent =
|
|
this.currentPage.getAttribute("description");
|
|
}
|
|
}
|
|
|
|
_hitEnter(evt) {
|
|
if (!evt.defaultPrevented)
|
|
this.advance();
|
|
}
|
|
|
|
_fireEvent(aTarget, aType) {
|
|
var event = document.createEvent("Events");
|
|
event.initEvent(aType, true, true);
|
|
|
|
// handle dom event handlers
|
|
return aTarget.dispatchEvent(event);
|
|
}
|
|
}
|
|
|
|
customElements.define("wizard", MozWizard);
|
|
|
|
class MozWizardPage extends MozXULElement {
|
|
constructor() {
|
|
super();
|
|
this.pageIndex = -1;
|
|
}
|
|
connectedCallback() {
|
|
this.setAttribute("slot", "wizardpage");
|
|
}
|
|
get pageid() {
|
|
return this.getAttribute("pageid");
|
|
}
|
|
set pageid(val) {
|
|
this.setAttribute("pageid", val);
|
|
}
|
|
get next() {
|
|
return this.getAttribute("next");
|
|
}
|
|
set next(val) {
|
|
this.setAttribute("next", val);
|
|
this.parentNode._accessMethod = "random";
|
|
return val;
|
|
}
|
|
}
|
|
|
|
customElements.define("wizardpage", MozWizardPage);
|
|
|
|
class MozWizardButtons extends MozXULElement {
|
|
connectedCallback() {
|
|
this.textContent = "";
|
|
this.appendChild(MozXULElement.parseXULToFragment(this._markup, kDTDs));
|
|
|
|
this._wizardButtonDeck = this.querySelector(".wizard-next-deck");
|
|
|
|
this.initializeAttributeInheritance();
|
|
|
|
const listeners = [
|
|
["back", () => document.documentElement.rewind()],
|
|
["next", () => document.documentElement.advance()],
|
|
["finish", () => document.documentElement.advance()],
|
|
["cancel", () => document.documentElement.cancel()],
|
|
["extra1", () => document.documentElement.extra1()],
|
|
["extra2", () => document.documentElement.extra2()],
|
|
];
|
|
for (let [name, listener] of listeners) {
|
|
let btn = this.getButton(name);
|
|
if (btn) {
|
|
btn.addEventListener("command", listener);
|
|
}
|
|
}
|
|
}
|
|
|
|
static get inheritedAttributes() {
|
|
return AppConstants.platform == "macosx" ? {
|
|
"[dlgtype='next']": "hidden=lastpage",
|
|
} : null;
|
|
}
|
|
|
|
get _markup() {
|
|
if (AppConstants.platform == "macosx") {
|
|
return `
|
|
<vbox flex="1">
|
|
<hbox class="wizard-buttons-btm">
|
|
<button class="wizard-button" dlgtype="extra1" hidden="true"/>
|
|
<button class="wizard-button" dlgtype="extra2" hidden="true"/>
|
|
<button label="&button-cancel-mac.label;"
|
|
class="wizard-button" dlgtype="cancel"/>
|
|
<spacer flex="1"/>
|
|
<button label="&button-back-mac.label;"
|
|
accesskey="&button-back-mac.accesskey;"
|
|
class="wizard-button wizard-nav-button" dlgtype="back"/>
|
|
<button label="&button-next-mac.label;"
|
|
accesskey="&button-next-mac.accesskey;"
|
|
class="wizard-button wizard-nav-button" dlgtype="next"
|
|
default="true" />
|
|
<button label="&button-finish-mac.label;" class="wizard-button"
|
|
dlgtype="finish" default="true" />
|
|
</hbox>
|
|
</vbox>`;
|
|
}
|
|
|
|
let buttons = AppConstants.platform == "linux" ? `
|
|
<button label="&button-cancel-unix.label;"
|
|
class="wizard-button"
|
|
dlgtype="cancel"/>
|
|
<spacer style="width: 24px;"/>
|
|
<button label="&button-back-unix.label;"
|
|
accesskey="&button-back-unix.accesskey;"
|
|
class="wizard-button" dlgtype="back"/>
|
|
<deck class="wizard-next-deck">
|
|
<hbox>
|
|
<button label="&button-finish-unix.label;"
|
|
class="wizard-button"
|
|
dlgtype="finish" default="true" flex="1"/>
|
|
</hbox>
|
|
<hbox>
|
|
<button label="&button-next-unix.label;"
|
|
accesskey="&button-next-unix.accesskey;"
|
|
class="wizard-button" dlgtype="next"
|
|
default="true" flex="1"/>
|
|
</hbox>
|
|
</deck>` : `
|
|
<button label="&button-back-win.label;"
|
|
accesskey="&button-back-win.accesskey;"
|
|
class="wizard-button" dlgtype="back"/>
|
|
<deck class="wizard-next-deck">
|
|
<hbox>
|
|
<button label="&button-finish-win.label;"
|
|
class="wizard-button"
|
|
dlgtype="finish" default="true" flex="1"/>
|
|
</hbox>
|
|
<hbox>
|
|
<button label="&button-next-win.label;"
|
|
accesskey="&button-next-win.accesskey;"
|
|
class="wizard-button" dlgtype="next"
|
|
default="true" flex="1"/>
|
|
</hbox>
|
|
</deck>
|
|
<button label="&button-cancel-win.label;"
|
|
class="wizard-button"
|
|
dlgtype="cancel"/>`;
|
|
|
|
return `
|
|
<vbox class="wizard-buttons-box-1" flex="1">
|
|
<separator class="wizard-buttons-separator groove"/>
|
|
<hbox class="wizard-buttons-box-2">
|
|
<button class="wizard-button" dlgtype="extra1" hidden="true"/>
|
|
<button class="wizard-button" dlgtype="extra2" hidden="true"/>
|
|
<spacer flex="1" anonid="spacer"/>
|
|
${buttons}
|
|
</hbox>
|
|
</vbox>`;
|
|
}
|
|
|
|
onPageChange() {
|
|
if (AppConstants.platform == "macosx") {
|
|
this.getButton("finish").hidden = !(this.getAttribute("lastpage") == "true");
|
|
} else if (this.getAttribute("lastpage") == "true") {
|
|
this._wizardButtonDeck.setAttribute("selectedIndex", 0);
|
|
} else {
|
|
this._wizardButtonDeck.setAttribute("selectedIndex", 1);
|
|
}
|
|
}
|
|
|
|
getButton(type) {
|
|
return this.querySelector(`[dlgtype="${type}"]`);
|
|
}
|
|
|
|
get defaultButton() {
|
|
const kXULNS =
|
|
"http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
|
let buttons = this._wizardButtonDeck.selectedPanel.
|
|
getElementsByTagNameNS(kXULNS, "button");
|
|
for (let i = 0; i < buttons.length; i++) {
|
|
if (buttons[i].getAttribute("default") == "true" &&
|
|
!buttons[i].hidden && !buttons[i].disabled) {
|
|
return buttons[i];
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
}
|
|
|
|
customElements.define("wizard-buttons", MozWizardButtons);
|
|
}
|