Bug 1439194 - Implement a separate state for login failed in the sidebar. r?markh
MozReview-Commit-ID: B9hY8mpPEMw
--- a/browser/components/syncedtabs/SyncedTabsDeckComponent.js
+++ b/browser/components/syncedtabs/SyncedTabsDeckComponent.js
@@ -53,16 +53,17 @@ function SyncedTabsDeckComponent({
getChromeWindow: this._getChromeWindow,
});
}
SyncedTabsDeckComponent.prototype = {
PANELS: {
TABS_CONTAINER: "tabs-container",
TABS_FETCHING: "tabs-fetching",
+ LOGIN_FAILED: "reauth",
NOT_AUTHED_INFO: "notAuthedInfo",
SINGLE_DEVICE_INFO: "singleDeviceInfo",
TABS_DISABLED: "tabs-disabled",
UNVERIFIED: "unverified"
},
get container() {
return this._deckView ? this._deckView.container : null;
@@ -124,19 +125,22 @@ SyncedTabsDeckComponent.prototype = {
// There's no good way to mock fxAccounts in browser tests where it's already
// been instantiated, so we have this method for stubbing.
_getSignedInUser() {
return this._fxAccounts.getSignedInUser();
},
getPanelStatus() {
return this._getSignedInUser().then(user => {
- if (!user || this._SyncedTabs.loginFailed) {
+ if (!user) {
return this.PANELS.NOT_AUTHED_INFO;
}
+ if (this._SyncedTabs.loginFailed) {
+ return this.PANELS.LOGIN_FAILED;
+ }
if (!user.verified) {
return this.PANELS.UNVERIFIED;
}
if (!this._SyncedTabs.isConfiguredToSyncTabs) {
return this.PANELS.TABS_DISABLED;
}
if (!this._SyncedTabs.hasSyncedThisSession) {
return this.PANELS.TABS_FETCHING;
--- a/browser/components/syncedtabs/sidebar.xhtml
+++ b/browser/components/syncedtabs/sidebar.xhtml
@@ -75,16 +75,21 @@
<div class="tabs-fetching sync-state">
<!-- Show intentionally blank panel, see bug 1239845 -->
</div>
<div class="notAuthedInfo sync-state">
<div class="syncIllustration"></div>
<p class="instructions">&syncedTabs.sidebar.notsignedin.label;</p>
<button class="button sync-prefs">&fxaSignIn.label;</button>
</div>
+ <div class="reauth sync-state">
+ <div class="syncIllustrationIssue"></div>
+ <p class="instructions">&syncedTabs.sidebar.notsignedin.label;</p>
+ <button class="button sync-prefs">&fxaSignIn.label;</button>
+ </div>
<div class="unverified sync-state">
<div class="syncIllustrationIssue"></div>
<p class="instructions">&syncedTabs.sidebar.unverified.label;</p>
<button class="button sync-prefs">&syncedTabs.sidebar.openprefs.label;</button>
</div>
<div class="singleDeviceInfo sync-state">
<div class="syncIllustrationIssue"></div>
<p class="instructions">&syncedTabs.sidebar.noclients.subtitle;</p>
--- a/browser/components/syncedtabs/test/browser/browser_sidebar_syncedtabslist.js
+++ b/browser/components/syncedtabs/test/browser/browser_sidebar_syncedtabslist.js
@@ -198,16 +198,17 @@ add_task(async function testSyncedTabsSi
let account = null;
await SidebarUI.show("viewTabsSidebar");
let syncedTabsDeckComponent = window.SidebarUI.browser.contentWindow.syncedTabsDeckComponent;
let SyncedTabs = window.SidebarUI.browser.contentWindow.SyncedTabs;
originalSyncedTabsInternal = SyncedTabs._internal;
SyncedTabs._internal = {
+ loginFailed: false,
isConfiguredToSyncTabs: false,
hasSyncedThisSession: false,
getTabClients() {},
syncTabs() { return Promise.resolve(); },
};
Assert.ok(syncedTabsDeckComponent, "component exists");
@@ -229,16 +230,24 @@ add_task(async function testSyncedTabsSi
"not-authed panel is selected");
account = {verified: false};
await syncedTabsDeckComponent.updatePanel();
selectedPanel = syncedTabsDeckComponent.container.querySelector(".sync-state.selected");
Assert.ok(selectedPanel.classList.contains("unverified"),
"unverified panel is selected");
+ SyncedTabs._internal.loginFailed = true;
+ account = {verified: true};
+ await syncedTabsDeckComponent.updatePanel();
+ selectedPanel = syncedTabsDeckComponent.container.querySelector(".sync-state.selected");
+ Assert.ok(selectedPanel.classList.contains("reauth"),
+ "reauth panel is selected");
+ SyncedTabs._internal.loginFailed = false;
+
account = {verified: true};
await syncedTabsDeckComponent.updatePanel();
selectedPanel = syncedTabsDeckComponent.container.querySelector(".sync-state.selected");
Assert.ok(selectedPanel.classList.contains("tabs-disabled"),
"tabs disabled panel is selected");
SyncedTabs._internal.isConfiguredToSyncTabs = true;
await syncedTabsDeckComponent.updatePanel();
--- a/browser/components/syncedtabs/test/xpcshell/test_SyncedTabsDeckComponent.js
+++ b/browser/components/syncedtabs/test/xpcshell/test_SyncedTabsDeckComponent.js
@@ -160,17 +160,17 @@ add_task(async function testPanelStatus(
result = await component.getPanelStatus();
Assert.equal(result, component.PANELS.UNVERIFIED);
account = {verified: true};
SyncedTabsMock.loginFailed = true;
result = await component.getPanelStatus();
- Assert.equal(result, component.PANELS.NOT_AUTHED_INFO);
+ Assert.equal(result, component.PANELS.LOGIN_FAILED);
SyncedTabsMock.loginFailed = false;
SyncedTabsMock.isConfiguredToSyncTabs = false;
result = await component.getPanelStatus();
Assert.equal(result, component.PANELS.TABS_DISABLED);
SyncedTabsMock.isConfiguredToSyncTabs = true;