Bug 1241319 - Clarify synced tabs menu when not logged in. r=markh

This commit is contained in:
Edouard Oger 2016-04-08 10:46:00 -04:00
parent d80f435b5a
commit d236e9ccd1
8 changed files with 64 additions and 21 deletions

View File

@ -28,6 +28,7 @@ var gSyncUI = {
"weave:ui:sync:error",
"weave:ui:sync:finish",
"weave:ui:clear-error",
"weave:engine:sync:finish"
],
_unloaded: false,
@ -417,6 +418,17 @@ var gSyncUI = {
let title = this._stringBundle.GetStringFromName("error.sync.title");
},
onClientsSynced: function() {
let broadcaster = document.getElementById("sync-syncnow-state");
if (broadcaster) {
if (Weave.Service.clientsEngine.stats.numClients > 1) {
broadcaster.setAttribute("devices-status", "multi");
} else {
broadcaster.setAttribute("devices-status", "single");
}
}
},
observe: function SUI_observe(subject, topic, data) {
this.log.debug("observed", topic);
if (this._unloaded) {
@ -470,6 +482,12 @@ var gSyncUI = {
case "weave:notification:added":
this.initNotifications();
break;
case "weave:engine:sync:finish":
if (data != "clients") {
return;
}
this.onClientsSynced();
break;
}
},

View File

@ -316,9 +316,11 @@ const CustomizableWidgets = [
link.className = "text-link remotetabs-promo-link";
return link.outerHTML;
});
// Put it all together...
let contents = bundle.getFormattedString("appMenuRemoteTabs.mobilePromo", formatArgs);
let promoParentElt = doc.getElementById("PanelUI-remotetabs-mobile-promo");
let fxAccountsBrand = promoParentElt.getAttribute("fxAccountsBrand");
formatArgs.push(fxAccountsBrand);
// Put it all together...
let contents = bundle.getFormattedString("appMenuRemoteTabs.mobilePromo.text", formatArgs);
promoParentElt.innerHTML = contents;
// We manually manage the "click" event to open the promo links because
// allowing the "text-link" widget handle it has 2 problems: (1) it only

View File

@ -108,16 +108,18 @@
<!-- this widget has 3 boxes in the body, but only 1 is ever visible -->
<!-- When Sync is ready to sync -->
<vbox id="PanelUI-remotetabs-main" observes="sync-syncnow-state">
<toolbarbutton id="PanelUI-remotetabs-view-sidebar"
class="subviewbutton"
observes="viewTabsSidebar"
label="&appMenuRemoteTabs.sidebar.label;"/>
<toolbarbutton id="PanelUI-remotetabs-syncnow"
observes="sync-status"
class="subviewbutton"
oncommand="gSyncUI.doSync();"
closemenu="none"/>
<menuseparator id="PanelUI-remotetabs-separator"/>
<vbox id="PanelUI-remotetabs-buttons">
<toolbarbutton id="PanelUI-remotetabs-view-sidebar"
class="subviewbutton"
observes="viewTabsSidebar"
label="&appMenuRemoteTabs.sidebar.label;"/>
<toolbarbutton id="PanelUI-remotetabs-syncnow"
observes="sync-status"
class="subviewbutton"
oncommand="gSyncUI.doSync();"
closemenu="none"/>
<menuseparator id="PanelUI-remotetabs-separator"/>
</vbox>
<deck id="PanelUI-remotetabs-deck">
<!-- Sync is ready to Sync and the "tabs" engine is enabled -->
<vbox id="PanelUI-remotetabs-tabspane">
@ -149,9 +151,10 @@
<hbox pack="center">
<image class="fxaSyncIllustration" alt=""/>
</hbox>
<label class="PanelUI-remotetabs-instruction-label">&appMenuRemoteTabs.noclients.label;</label>
<label class="PanelUI-remotetabs-instruction-title">&appMenuRemoteTabs.noclients.title;</label>
<label class="PanelUI-remotetabs-instruction-label">&appMenuRemoteTabs.noclients.subtitle;</label>
<!-- The inner HTML for PanelUI-remotetabs-mobile-promo is built at runtime -->
<label id="PanelUI-remotetabs-mobile-promo"/>
<label id="PanelUI-remotetabs-mobile-promo" fxAccountsBrand="&syncBrand.fxAccount.label;"/>
</vbox>
</hbox>
</deck>

View File

@ -73,9 +73,12 @@ SyncedTabsDeckView.prototype = {
link.setAttribute("href", "#");
return link.outerHTML;
});
let promoParentElt = this.container.querySelector(".device-promo");
let fxAccountsBrand = promoParentElt.getAttribute("fxAccountsBrand");
formatArgs.push(fxAccountsBrand);
// Put it all together...
let contents = bundle.getFormattedString("appMenuRemoteTabs.mobilePromo", formatArgs);
this.container.querySelector(".device-promo").innerHTML = contents;
let contents = bundle.getFormattedString("appMenuRemoteTabs.mobilePromo.text", formatArgs);
promoParentElt.innerHTML = contents;
},
destroy() {

View File

@ -10,6 +10,9 @@
<!ENTITY % globalDTD
SYSTEM "chrome://global/locale/global.dtd">
%globalDTD;
<!ENTITY % syncBrandDTD
SYSTEM "chrome://browser/locale/syncBrand.dtd">
%syncBrandDTD;
]>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
@ -77,8 +80,9 @@
<p><a href="#" class="sync-prefs text-link">&fxaSignIn.label;</a></p>
</div>
<div class="singleDeviceInfo sync-state">
<p>&syncedTabs.sidebar.noclients.label;</p>
<p class="device-promo"></p>
<p>&syncedTabs.sidebar.noclients.title;</p>
<p>&syncedTabs.sidebar.noclients.subtitle;</p>
<p class="device-promo" fxAccountsBrand="&syncBrand.fxAccount.label;"></p>
</div>
<div class="tabs-disabled sync-state">
<p>&syncedTabs.sidebar.tabsnotsyncing.label;</p>

View File

@ -348,7 +348,8 @@ These should match what Safari and other Apple applications use on OS X Lion. --
<!-- LOCALIZATION NOTE (appMenuRemoteTabs.noclients.label): This is shown
when Sync is configured but this appears to be the only device attached to
the account. We also show links to download Firefox for android/ios. -->
<!ENTITY appMenuRemoteTabs.noclients.label "Sign in to Firefox from your other devices to view their tabs here.">
<!ENTITY appMenuRemoteTabs.noclients.title "No synced tabs… yet!">
<!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.signin.label "Sign in to Sync">
@ -724,6 +725,8 @@ you can use these alternative items. Otherwise, their values should be empty. -
<!ENTITY syncedTabs.sidebar.label "Synced Tabs">
<!ENTITY syncedTabs.sidebar.noclients.label "Sign in to Firefox from your other devices to view their tabs here.">
<!ENTITY syncedTabs.sidebar.noclients.title "No synced tabs… yet!">
<!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.notabs.label "No open tabs">
<!ENTITY syncedTabs.sidebar.openprefs.label "Open &syncBrand.shortName.label; Preferences">

View File

@ -694,14 +694,15 @@ appmenu.downloadUpdateButton.label = Download Update
readingList.promo.firstUse.readerView.title = Reader View
readingList.promo.firstUse.readerView.body = Remove clutter so you can focus exactly on what you want to read.
# LOCALIZATION NOTE (appMenuRemoteTabs.mobilePromo):
# LOCALIZATION NOTE (appMenuRemoteTabs.mobilePromo.text):
# %1$S will be replaced with a link, the text of which is
# appMenuRemoteTabs.mobilePromo.android and the link will be to
# https://www.mozilla.org/firefox/android/.
# %2$S will be replaced with a link, the text of which is
# appMenuRemoteTabs.mobilePromo.ios
# and the link will be to https://www.mozilla.org/firefox/ios/.
appMenuRemoteTabs.mobilePromo = Get %1$S or %2$S.
# %3$S will be replace by the content of syncBrand.fxAccount.label (Firefox Account)
appMenuRemoteTabs.mobilePromo.text = Download %1$S or %2$S and connect them to your %3$S.
appMenuRemoteTabs.mobilePromo.android = Firefox for Android
appMenuRemoteTabs.mobilePromo.ios = Firefox for iOS

View File

@ -679,6 +679,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
--panel-ui-sync-illustration-height: 157.5px;
}
.PanelUI-remotetabs-instruction-title,
.PanelUI-remotetabs-instruction-label,
#PanelUI-remotetabs-mobile-promo {
/* If you change the margin here, the min-height of the synced tabs panel
@ -691,6 +692,10 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
color: GrayText;
}
.PanelUI-remotetabs-instruction-title {
font-size: 1.3em;
}
/* The boxes with "instructions" get extra top and bottom padding for space
around the illustration and buttons */
.PanelUI-remotetabs-instruction-box {
@ -775,6 +780,10 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
visibility: collapse;
}
#PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons {
display: none;
}
#PanelUI-fxa-icon[syncstatus="active"] {
list-style-image: url(chrome://browser/skin/syncProgress-horizontalbar.png);
}