зеркало из https://github.com/mozilla/gecko-dev.git
Backed out changeset 2c76f5df35f1 (bug 1763138) for causing leaks. CLOSED TREE
This commit is contained in:
Butkovits Atila
Родитель
95691e9784
Коммит
67bc50b71b
|
|
@ -1,43 +1,37 @@
|
|||
# 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/.
|
||||
# NOTE: New strings should use the about-logins- prefix.
|
||||
|
||||
-myfirefox-brand-name = My Firefox
|
||||
|
||||
myfirefox-page-title = { -myfirefox-brand-name }
|
||||
myfirefox-page-title = My Firefox
|
||||
|
||||
myfirefox-colorway-button = Colorway Closet
|
||||
|
||||
# Used instead of the localized relative time when a timestamp is within a minute or so of now
|
||||
myfirefox-just-now-timestamp = Just now
|
||||
|
||||
# This is a headline for an area in the product where users can resume and re-open tabs they have previously viewed on other devices.
|
||||
myfirefox-tabpickup-header = Tab Pickup
|
||||
myfirefox-tabpickup-description = Pick up where you left off on another device.
|
||||
|
||||
myfirefox-tabpickup-recenttabs-description = Recent tabs list would go here
|
||||
|
||||
# Variables:
|
||||
# $percentValue (Number): the percentage value for setup completion
|
||||
myfirefox-tabpickup-progress-label = { $percentValue }% complete
|
||||
|
||||
myfirefox-tabpickup-step-signin-header = Step 1 of 3: Sign in to { -brand-product-name }
|
||||
myfirefox-tabpickup-step-signin-description = To get your mobile tabs on this device, sign in to { -brand-product-name } and turn on sync.
|
||||
myfirefox-tabpickup-step-signin-primarybutton = Continue
|
||||
|
||||
# These are placeholders for now..
|
||||
|
||||
myfirefox-tabpickup-adddevice-header = Step 2 of 3: Sign in on a mobile device
|
||||
myfirefox-tabpickup-step-signin-header = Step 1 Header
|
||||
myfirefox-tabpickup-step-signin-description = Step 1 description.
|
||||
myfirefox-tabpickup-step-signin-primarybutton = Step 1 Action
|
||||
|
||||
myfirefox-tabpickup-adddevice-header = Step 2 Header
|
||||
myfirefox-tabpickup-adddevice-description = Step 2 description.
|
||||
myfirefox-tabpickup-adddevice-primarybutton = Get { -brand-product-name } for mobile
|
||||
myfirefox-tabpickup-adddevice-primarybutton = Step 2 Action
|
||||
|
||||
myfirefox-tabpickup-synctabs-header = Step 3 of 3: Sync open tabs
|
||||
myfirefox-tabpickup-synctabs-header = Step 3 Header
|
||||
myfirefox-tabpickup-synctabs-description = Step 3 description.
|
||||
myfirefox-tabpickup-synctabs-primarybutton = Sync open tabs
|
||||
myfirefox-tabpickup-synctabs-primarybutton = Step 3 Action
|
||||
|
||||
myfirefox-tabpickup-setupsuccess-header = Setup Complete!
|
||||
myfirefox-tabpickup-setupsuccess-header = Step 4 Header
|
||||
myfirefox-tabpickup-setupsuccess-description = Step 4 description.
|
||||
myfirefox-tabpickup-setupsuccess-primarybutton = Get my other tabs
|
||||
myfirefox-tabpickup-setupsuccess-primarybutton = Step 4 Action
|
||||
|
||||
myfirefox-closed-tabs-title = Recently closed
|
||||
myfirefox-closed-tabs-collapse-button =
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<meta http-equiv="Content-Security-Policy" content="default-src chrome:; object-src 'none'">
|
||||
<meta name="color-scheme" content="light dark">
|
||||
<title data-l10n-id="myfirefox-page-title"></title>
|
||||
<link rel="localization" href="branding/brand.ftl">
|
||||
<link rel="localization" href="preview/myFirefox.ftl"/>
|
||||
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
|
||||
<link rel="stylesheet" href="chrome://browser/content/myfirefox.css">
|
||||
|
|
@ -24,51 +23,33 @@
|
|||
</nav>
|
||||
<main>
|
||||
<template id="sync-setup-template">
|
||||
<named-deck class="sync-setup-container" data-prefix="id:">
|
||||
<div name="sync-setup-view0" data-prefix="id:-view0" class="card setup-step" data-prefix="aria-labelledby:-view0-header">
|
||||
<h2 data-prefix="id:-view0-header" data-l10n-id="myfirefox-tabpickup-step-signin-header" class="card-header"></h2>
|
||||
<named-deck class="sync-setup-container">
|
||||
<div name="sync-setup-view0" class="card setup-step">
|
||||
<h2 data-l10n-id="myfirefox-tabpickup-step-signin-header" class="card-header"></h2>
|
||||
<section class="step-body">
|
||||
<p class="step-content" data-l10n-id="myfirefox-tabpickup-step-signin-description"></p>
|
||||
<button class="primary" data-action="view0-primary-action" data-l10n-id="myfirefox-tabpickup-step-signin-primarybutton"></button>
|
||||
</section>
|
||||
<footer>
|
||||
<progress data-prefix="id:-view0-progress" class="step-progress" max="100" value="11"></progress>
|
||||
<label
|
||||
data-prefix="for:-view0-progress"
|
||||
data-l10n-id="myfirefox-tabpickup-progress-label"
|
||||
data-l10n-args='{"percentValue":"11"}'></label>
|
||||
</footer>
|
||||
<progress class="step-progress" max="100" value="11"/>
|
||||
</div>
|
||||
<div name="sync-setup-view1" data-prefix="id:-view1" class="card setup-step" data-prefix="aria-labelledby:-view1-header">
|
||||
<h2 data-prefix="id:-view1-header" data-l10n-id="myfirefox-tabpickup-adddevice-header" class="card-header"></h2>
|
||||
<div name="sync-setup-view1" class="card setup-step">
|
||||
<h2 data-l10n-id="myfirefox-tabpickup-adddevice-header"></h2>
|
||||
<section class="step-body">
|
||||
<p class="step-content" data-l10n-id="myfirefox-tabpickup-adddevice-description"></p>
|
||||
<button class="primary" data-action="view1-primary-action" data-l10n-id="myfirefox-tabpickup-adddevice-primarybutton"></button>
|
||||
</section>
|
||||
<footer>
|
||||
<progress data-prefix="id:-view1-progress" class="step-progress" max="100" value="33"></progress>
|
||||
<label
|
||||
data-prefix="for:-view1-progress"
|
||||
data-l10n-id="myfirefox-tabpickup-progress-label"
|
||||
data-l10n-args='{"percentValue":"33"}'></label>
|
||||
</footer>
|
||||
<progress class="step-progress" max="100" value="33"/>
|
||||
</div>
|
||||
<div name="sync-setup-view2" data-prefix="id:-view2" class="card setup-step" data-prefix="aria-labelledby:-view2-header">
|
||||
<h2 data-prefix="id:-view2-header" data-l10n-id="myfirefox-tabpickup-synctabs-header" class="card-header"></h2>
|
||||
<div name="sync-setup-view2" class="card setup-step">
|
||||
<h2 data-l10n-id="myfirefox-tabpickup-synctabs-header"></h2>
|
||||
<section class="step-body">
|
||||
<p class="step-content" data-l10n-id="myfirefox-tabpickup-synctabs-description"></p>
|
||||
<button class="primary" data-action="view2-primary-action" data-l10n-id="myfirefox-tabpickup-synctabs-primarybutton"></button>
|
||||
</section>
|
||||
<footer>
|
||||
<progress data-prefix="id:-view2-progress" class="step-progress" max="100" value="66"></progress>
|
||||
<label
|
||||
data-prefix="for:-view2-progress"
|
||||
data-l10n-id="myfirefox-tabpickup-progress-label"
|
||||
data-l10n-args='{"percentValue":"66"}'></label>
|
||||
</footer>
|
||||
<progress class="step-progress" max="100" value="66"/>
|
||||
</div>
|
||||
<div name="sync-setup-view3" data-prefix="id:-view3" class="card setup-step" data-prefix="aria-labelledby:-view3-header">
|
||||
<h2 data-prefix="id:-view2-header" data-l10n-id="myfirefox-tabpickup-setupsuccess-header" class="card-header"></h2>
|
||||
<div name="sync-setup-view3" class="card setup-step">
|
||||
<h2 data-l10n-id="myfirefox-tabpickup-setupsuccess-header"></h2>
|
||||
<section class="step-body">
|
||||
<p class="step-content" data-l10n-id="myfirefox-tabpickup-setupsuccess-description"></p>
|
||||
<button class="primary" data-action="view3-primary-action" data-l10n-id="myfirefox-tabpickup-setupsuccess-primarybutton"></button>
|
||||
|
|
@ -77,7 +58,7 @@
|
|||
</named-deck>
|
||||
</template>
|
||||
<template id="synced-tabs-template">
|
||||
<div class="synced-tabs-container" data-prefix="id:" hidden>
|
||||
<div class="synced-tabs-container" hidden>
|
||||
<div class="card">
|
||||
<h2 data-l10n-id="myfirefox-tabpickup-recenttabs-description"></h2>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,217 +4,89 @@
|
|||
|
||||
/* eslint-env mozilla/frame-script */
|
||||
|
||||
const { switchToTabHavingURI } = window.docShell.chromeEventHandler.ownerGlobal;
|
||||
|
||||
const { XPCOMUtils } = ChromeUtils.import(
|
||||
"resource://gre/modules/XPCOMUtils.jsm"
|
||||
);
|
||||
|
||||
const tabsSetupFlowManager = new (class {
|
||||
constructor() {
|
||||
this.QueryInterface = ChromeUtils.generateQI(["nsIObserver"]);
|
||||
|
||||
this.setupState = new Map();
|
||||
this._currentSetupStateName = "";
|
||||
this.sync = {};
|
||||
|
||||
XPCOMUtils.defineLazyModuleGetters(this, {
|
||||
Services: "resource://gre/modules/Services.jsm",
|
||||
fxAccounts: "resource://gre/modules/FxAccounts.jsm",
|
||||
});
|
||||
ChromeUtils.defineModuleGetter(
|
||||
this.sync,
|
||||
"UIState",
|
||||
"resource://services-sync/UIState.jsm"
|
||||
);
|
||||
|
||||
this.registerSetupState({
|
||||
uiStateIndex: 0,
|
||||
name: "not-signed-in",
|
||||
exitConditions: () => {
|
||||
return this.fxaSignedIn;
|
||||
},
|
||||
});
|
||||
// TODO: handle offline, sync service not ready or available
|
||||
this.registerSetupState({
|
||||
uiStateIndex: 1,
|
||||
name: "no-mobile-device",
|
||||
exitConditions: () => {
|
||||
return this.mobileDeviceConnected;
|
||||
},
|
||||
});
|
||||
this.registerSetupState({
|
||||
uiStateIndex: 2,
|
||||
name: "disabled-tab-sync",
|
||||
exitConditions: () => {
|
||||
// Bug 1763139 - Implement the actual logic to advance to next step
|
||||
// This will basically be a check for the pref to enable tab-syncing
|
||||
return false;
|
||||
},
|
||||
});
|
||||
this.registerSetupState({
|
||||
uiStateIndex: 3,
|
||||
name: "synced-tabs-not-ready",
|
||||
exitConditions: () => {
|
||||
// Bug 1763139 - Implement the actual logic to advance to next step
|
||||
return false;
|
||||
},
|
||||
});
|
||||
this.registerSetupState({
|
||||
uiStateIndex: 4,
|
||||
name: "show-synced-tabs-agreement",
|
||||
exitConditions: () => {
|
||||
// Bug 1763139 - Implement the actual logic to advance to next step
|
||||
return false;
|
||||
},
|
||||
});
|
||||
}
|
||||
async initialize(elem) {
|
||||
initialize(elem) {
|
||||
this.elem = elem;
|
||||
// placeholder initial value
|
||||
// Bug 1763138 - Get the actual initial state for the setup flow
|
||||
this.setupState = 0;
|
||||
|
||||
this.elem.addEventListener("click", this);
|
||||
this.Services.obs.addObserver(this, this.sync.UIState.ON_UPDATE);
|
||||
this.Services.obs.addObserver(this, "fxaccounts:device_connected");
|
||||
this.Services.obs.addObserver(this, "fxaccounts:device_disconnected");
|
||||
|
||||
await this.fxAccounts.getSignedInUser();
|
||||
this.maybeUpdateUI();
|
||||
this.elem.updateSetupState(this.setupState);
|
||||
}
|
||||
uninit() {
|
||||
this.Services.obs.removeObserver(this, this.sync.UIState.ON_UPDATE);
|
||||
this.Services.obs.removeObserver(this, "fxaccounts:device_connected");
|
||||
this.Services.obs.removeObserver(this, "fxaccounts:device_disconnected");
|
||||
}
|
||||
get fxaSignedIn() {
|
||||
return (
|
||||
this.sync.UIState.get().status === this.sync.UIState.STATUS_SIGNED_IN
|
||||
);
|
||||
}
|
||||
get mobileDeviceConnected() {
|
||||
let mobileDevice = this.fxAccounts.device?.recentDeviceList?.find(
|
||||
device => device.type == "mobile"
|
||||
);
|
||||
return !!mobileDevice;
|
||||
}
|
||||
registerSetupState(state) {
|
||||
this.setupState.set(state.name, state);
|
||||
}
|
||||
|
||||
async observe(subject, topic, data) {
|
||||
switch (topic) {
|
||||
case this.sync.UIState.ON_UPDATE:
|
||||
this.maybeUpdateUI();
|
||||
break;
|
||||
case "fxaccounts:device_connected":
|
||||
case "fxaccounts:device_disconnected":
|
||||
await this.fxAccounts.device.refreshDeviceList();
|
||||
this.maybeUpdateUI();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
handleEvent(event) {
|
||||
if (event.type == "click" && event.target.dataset.action) {
|
||||
switch (event.target.dataset.action) {
|
||||
case "view0-primary-action": {
|
||||
this.openFxASignup(event.target);
|
||||
this.advanceToAddDeviceStep(event.target);
|
||||
break;
|
||||
}
|
||||
case "view1-primary-action": {
|
||||
this.openSyncPreferences(event.target);
|
||||
this.advanceToSyncTabsStep(event.target);
|
||||
break;
|
||||
}
|
||||
case "view2-primary-action": {
|
||||
this.syncOpenTabs(event.target);
|
||||
this.advanceToSetupComplete(event.target);
|
||||
break;
|
||||
}
|
||||
case "view3-primary-action": {
|
||||
this.confirmSetupComplete(event.target);
|
||||
this.advanceToGetMyTabs(event.target);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
maybeUpdateUI() {
|
||||
let nextSetupStateName = this._currentSetupStateName;
|
||||
|
||||
// state transition conditions
|
||||
for (let state of this.setupState.values()) {
|
||||
nextSetupStateName = state.name;
|
||||
if (!state.exitConditions()) {
|
||||
break;
|
||||
advanceToAddDeviceStep(containerElem) {
|
||||
// Bug 1763138 - Implement the actual logic to advance to next step
|
||||
this.setupState = 1;
|
||||
this.elem.updateSetupState(this.setupState);
|
||||
}
|
||||
advanceToSyncTabsStep(containerElem) {
|
||||
// Bug 1763138 - Implement the actual logic to advance to next step
|
||||
this.setupState = 2;
|
||||
this.elem.updateSetupState(this.setupState);
|
||||
}
|
||||
|
||||
if (nextSetupStateName !== this._currentSetupStateName) {
|
||||
this.elem.updateSetupState(
|
||||
this.setupState.get(nextSetupStateName).uiStateIndex
|
||||
);
|
||||
this._currentSetupStateName = nextSetupStateName;
|
||||
advanceToSetupComplete(containerElem) {
|
||||
// Bug 1763138 - Implement the actual logic to advance to next step
|
||||
this.setupState = 3;
|
||||
this.elem.updateSetupState(this.setupState);
|
||||
}
|
||||
}
|
||||
|
||||
async openFxASignup() {
|
||||
const url = await this.fxAccounts.constructor.config.promiseConnectAccountURI(
|
||||
"myfirefox"
|
||||
);
|
||||
switchToTabHavingURI(url, true);
|
||||
}
|
||||
openSyncPreferences(containerElem) {
|
||||
const url = "about:preferences?action=pair#sync";
|
||||
switchToTabHavingURI(url, true);
|
||||
}
|
||||
syncOpenTabs(containerElem) {
|
||||
// Bug 1763139 - Implement the actual logic to advance to next step
|
||||
this.elem.updateSetupState(
|
||||
this.setupState.get("synced-tabs-not-ready").uiStateIndex
|
||||
);
|
||||
}
|
||||
confirmSetupComplete(containerElem) {
|
||||
// Bug 1763139 - Implement the actual logic to advance to next step
|
||||
this.elem.updateSetupState(
|
||||
this.setupState.get("show-synced-tabs-agreement").uiStateIndex
|
||||
);
|
||||
advanceToGetMyTabs(containerElem) {
|
||||
// Bug 1763138 - Implement the actual logic to advance to next step
|
||||
this.setupState = 4;
|
||||
this.elem.updateSetupState(this.setupState);
|
||||
}
|
||||
})();
|
||||
|
||||
class TabsPickupContainer extends HTMLElement {
|
||||
export class TabsPickupContainer extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.manager = null;
|
||||
this._currentSetupStateIndex = -1;
|
||||
this._currentSetupState = -1;
|
||||
}
|
||||
get setupContainerElem() {
|
||||
return this.querySelector(".sync-setup-container");
|
||||
return this.querySelector("#tabpickup-setup-steps");
|
||||
}
|
||||
get tabsContainerElem() {
|
||||
return this.querySelector(".synced-tabs-container");
|
||||
return this.querySelector("#tabpickup-tabs-container");
|
||||
}
|
||||
appendTemplatedElement(templateId, elementId) {
|
||||
const template = document.getElementById(templateId);
|
||||
const templateContent = template.content;
|
||||
const cloned = templateContent.cloneNode(true);
|
||||
if (elementId) {
|
||||
// populate id-prefixed attributes on elements that need them
|
||||
for (let elem of cloned.querySelectorAll("[data-prefix]")) {
|
||||
let [name, value] = elem.dataset.prefix
|
||||
.split(":")
|
||||
.map(str => str.trim());
|
||||
elem.setAttribute(name, elementId + value);
|
||||
delete elem.dataset.prefix;
|
||||
}
|
||||
cloned.firstElementChild.id = elementId;
|
||||
}
|
||||
this.appendChild(cloned);
|
||||
}
|
||||
updateSetupState(stateIndex) {
|
||||
const currStateIndex = this._currentSetupStateIndex;
|
||||
if (stateIndex === undefined) {
|
||||
stateIndex = currStateIndex;
|
||||
stateIndex = this._currentSetupState;
|
||||
}
|
||||
if (stateIndex === this._currentSetupStateIndex) {
|
||||
if (stateIndex == this._currentSetupState) {
|
||||
return;
|
||||
}
|
||||
this._currentSetupStateIndex = stateIndex;
|
||||
this._currentSetupState = stateIndex;
|
||||
this.render();
|
||||
}
|
||||
render() {
|
||||
|
|
@ -223,12 +95,15 @@ class TabsPickupContainer extends HTMLElement {
|
|||
}
|
||||
let setupElem = this.setupContainerElem;
|
||||
let tabsElem = this.tabsContainerElem;
|
||||
const stateIndex = this._currentSetupStateIndex;
|
||||
const stateIndex = this._currentSetupState;
|
||||
|
||||
// show/hide either the setup or tab list containers, creating each as necessary
|
||||
if (stateIndex < 4) {
|
||||
if (!setupElem) {
|
||||
this.appendTemplatedElement("sync-setup-template", "tabpickup-steps");
|
||||
this.appendTemplatedElement(
|
||||
"sync-setup-template",
|
||||
"tabpickup-setup-steps"
|
||||
);
|
||||
setupElem = this.setupContainerElem;
|
||||
}
|
||||
if (tabsElem) {
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче