Bug 1422106 - Show broken heart when unverified in synced tabs sidebar/panel. r=markh

MozReview-Commit-ID: BDTdmcIOHmn

--HG--
extra : rebase_source : b1471e1ef0163b2d3b137852d285146f5a23f1fa
This commit is contained in:
Edouard Oger 2017-11-30 16:01:40 -05:00
parent 31c313504e
commit 2a41681065
12 changed files with 55 additions and 8 deletions

View File

@ -477,12 +477,17 @@
key="key_openAddons"
command="Tools:Addons"/>
<!-- only one of sync-setup, sync-syncnowitem or sync-reauthitem will be showing at once -->
<!-- only one of sync-setup, sync-unverifieditem, sync-syncnowitem or sync-reauthitem will be showing at once -->
<menuitem id="sync-setup"
label="&syncSignIn.label;"
accesskey="&syncSignIn.accesskey;"
observes="sync-setup-state"
oncommand="gSync.openPrefs('menubar')"/>
<menuitem id="sync-unverifieditem"
label="&syncSignIn.label;"
accesskey="&syncSignIn.accesskey;"
observes="sync-unverified-state"
oncommand="gSync.openPrefs('menubar')"/>
<menuitem id="sync-syncnowitem"
label="&syncSyncNowItem.label;"
accesskey="&syncSyncNowItem.accesskey;"

View File

@ -166,6 +166,7 @@
<!-- broadcasters of the "hidden" attribute to reflect setup state for
menus -->
<broadcaster id="sync-setup-state"/>
<broadcaster id="sync-unverified-state" hidden="true"/>
<broadcaster id="sync-syncnow-state" hidden="true"/>
<broadcaster id="sync-reauth-state" hidden="true"/>
<broadcaster id="viewTabsSidebar" autoCheck="false" sidebartitle="&syncedTabs.sidebar.label;"

View File

@ -218,13 +218,15 @@ var gSync = {
document.getElementById("sync-reauth-state").hidden = true;
document.getElementById("sync-setup-state").hidden = true;
document.getElementById("sync-syncnow-state").hidden = true;
document.getElementById("sync-unverified-state").hidden = true;
if (status == UIState.STATUS_LOGIN_FAILED) {
// unhiding this element makes the menubar show the login failure state.
document.getElementById("sync-reauth-state").hidden = false;
} else if (status == UIState.STATUS_NOT_CONFIGURED ||
status == UIState.STATUS_NOT_VERIFIED) {
} else if (status == UIState.STATUS_NOT_CONFIGURED) {
document.getElementById("sync-setup-state").hidden = false;
} else if (status == UIState.STATUS_NOT_VERIFIED) {
document.getElementById("sync-unverified-state").hidden = false;
} else {
document.getElementById("sync-syncnow-state").hidden = false;
}

View File

@ -108,8 +108,8 @@ add_task(async function test_ui_state_unverified() {
syncing: false,
syncNowTooltip: tooltipText
});
checkRemoteTabsPanel("PanelUI-remotetabs-setupsync", false);
checkMenuBarItem("sync-setup");
checkRemoteTabsPanel("PanelUI-remotetabs-unverified", false);
checkMenuBarItem("sync-unverifieditem");
});
add_task(async function test_ui_state_loginFailed() {
@ -176,7 +176,8 @@ function checkPanelUIStatusBar({label, tooltip, fxastatus, avatarURL, syncing, s
function checkRemoteTabsPanel(expectedShownItemId, syncing, syncNowTooltip) {
checkItemsVisiblities(["PanelUI-remotetabs-main",
"PanelUI-remotetabs-setupsync",
"PanelUI-remotetabs-reauthsync"],
"PanelUI-remotetabs-reauthsync",
"PanelUI-remotetabs-unverified"],
expectedShownItemId);
if (syncing != undefined && syncNowTooltip != undefined) {
@ -185,7 +186,7 @@ function checkRemoteTabsPanel(expectedShownItemId, syncing, syncNowTooltip) {
}
function checkMenuBarItem(expectedShownItemId) {
checkItemsVisiblities(["sync-setup", "sync-syncnowitem", "sync-reauthitem"],
checkItemsVisiblities(["sync-setup", "sync-syncnowitem", "sync-reauthitem", "sync-unverifieditem"],
expectedShownItemId);
}

View File

@ -491,6 +491,17 @@
label="&appMenuRemoteTabs.signin.label;"
oncommand="gSync.openPrefs('synced-tabs');"/>
</vbox>
<vbox id="PanelUI-remotetabs-unverified"
flex="1"
align="center"
class="PanelUI-remotetabs-instruction-box"
observes="sync-unverified-state">
<image class="fxaSyncIllustrationIssue"/>
<label class="PanelUI-remotetabs-instruction-label">&appMenuRemoteTabs.unverified.label;</label>
<toolbarbutton class="PanelUI-remotetabs-prefs-button"
label="&appMenuRemoteTabs.signin.label;"
oncommand="gSync.openPrefs('synced-tabs');"/>
</vbox>
</hbox>
</vbox>
</panelview>

View File

@ -139,6 +139,13 @@ add_task(async function() {
});
add_task(asyncCleanup);
// When Sync is configured in an unverified state.
add_task(async function() {
gSync.updateAllUI({ status: UIState.STATUS_NOT_VERIFIED, email: "foo@bar.com" });
await openPrefsFromMenuPanel("PanelUI-remotetabs-unverified", "synced-tabs");
});
add_task(asyncCleanup);
// When Sync is configured in a "needs reauthentication" state.
add_task(async function() {
gSync.updateAllUI({ status: UIState.STATUS_LOGIN_FAILED, email: "foo@bar.com" });

View File

@ -63,6 +63,7 @@ SyncedTabsDeckComponent.prototype = {
NOT_AUTHED_INFO: "notAuthedInfo",
SINGLE_DEVICE_INFO: "singleDeviceInfo",
TABS_DISABLED: "tabs-disabled",
UNVERIFIED: "unverified"
},
get container() {
@ -121,9 +122,12 @@ SyncedTabsDeckComponent.prototype = {
getPanelStatus() {
return this._getSignedInUser().then(user => {
if (!user || !user.verified || this._SyncedTabs.loginFailed) {
if (!user || this._SyncedTabs.loginFailed) {
return this.PANELS.NOT_AUTHED_INFO;
}
if (!user.verified) {
return this.PANELS.UNVERIFIED;
}
if (!this._SyncedTabs.isConfiguredToSyncTabs) {
return this.PANELS.TABS_DISABLED;
}

View File

@ -80,6 +80,11 @@
<p class="instructions">&syncedTabs.sidebar.notsignedin.label;</p>
<button class="button sync-prefs">&fxaSignIn.label;</button>
</div>
<div class="unverified sync-state">
<div class="syncIllustration"></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>

View File

@ -228,6 +228,12 @@ add_task(async function testSyncedTabsSidebarStatus() {
Assert.ok(selectedPanel.classList.contains("notAuthedInfo"),
"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");
account = {verified: true};
await syncedTabsDeckComponent.updatePanel();
selectedPanel = syncedTabsDeckComponent.container.querySelector(".sync-state.selected");

View File

@ -381,6 +381,7 @@ These should match what Safari and other Apple applications use on OS X Lion. --
<!ENTITY appMenuRemoteTabs.noclients.subtitle "Want to see your tabs from other devices here?">
<!ENTITY appMenuRemoteTabs.openprefs.label "Sync Preferences">
<!ENTITY appMenuRemoteTabs.notsignedin.label "Sign in to view a list of tabs from your other devices.">
<!ENTITY appMenuRemoteTabs.unverified.label "Your account needs to be verified.">
<!ENTITY appMenuRemoteTabs.signin.label "Sign in to Sync">
<!ENTITY appMenuRemoteTabs.managedevices.label "Manage Devices…">
<!ENTITY appMenuRemoteTabs.sidebar.label "View Synced Tabs Sidebar">
@ -794,6 +795,7 @@ you can use these alternative items. Otherwise, their values should be empty. -
<!ENTITY syncedTabs.sidebar.noclients.label "Sign in to Firefox from your other devices to view their tabs here.">
<!ENTITY syncedTabs.sidebar.noclients.subtitle "Want to see your tabs from other devices here?">
<!ENTITY syncedTabs.sidebar.notsignedin.label "Sign in to view a list of tabs from your other devices.">
<!ENTITY syncedTabs.sidebar.unverified.label "Your account needs to be verified.">
<!ENTITY syncedTabs.sidebar.notabs.label "No open tabs">
<!ENTITY syncedTabs.sidebar.openprefs.label "Open &syncBrand.shortName.label; Preferences">
<!-- LOCALIZATION NOTE (syncedTabs.sidebar.tabsnotsyncing.label): This is shown

View File

@ -36,6 +36,7 @@ function mockSyncedTabs() {
// configure our broadcasters so we are in the right state.
document.getElementById("sync-reauth-state").hidden = true;
document.getElementById("sync-setup-state").hidden = true;
document.getElementById("sync-unverified-state").hidden = true;
document.getElementById("sync-syncnow-state").hidden = false;
registerCleanupFunction(() => {
@ -43,6 +44,7 @@ function mockSyncedTabs() {
document.getElementById("sync-reauth-state").hidden = true;
document.getElementById("sync-setup-state").hidden = false;
document.getElementById("sync-unverified-state").hidden = true;
document.getElementById("sync-syncnow-state").hidden = true;
});
}

View File

@ -718,6 +718,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton
*/
#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-reauthsync,
#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-unverified,
#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane,
#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-tabsdisabledpane {
min-height: calc(var(--panel-ui-sync-illustration-height) +