Bug 1417577 - Support locale direction changes in sync sidebar r?eoger,gandalf
MozReview-Commit-ID: 2pHSjoOhW9o
--- a/browser/components/syncedtabs/SyncedTabsDeckComponent.js
+++ b/browser/components/syncedtabs/SyncedTabsDeckComponent.js
@@ -74,16 +74,21 @@ SyncedTabsDeckComponent.prototype = {
Services.obs.addObserver(this, FxAccountsCommon.ONLOGIN_NOTIFICATION);
Services.obs.addObserver(this, "weave:service:login:change");
// If the Sync service is not ready, in init() > updatePanel() we will
// show a blank screen. If tab syncing is disabled, we will not get any other
// ui-refreshing notifications! We listen to :ready in order to check again
// if this engine is disabled and refresh the UI one last time.
Services.obs.addObserver(this, "weave:service:ready");
+ // Add app locale change support for HTML sidebar
+ Services.obs.addObserver(this, "intl:app-locales-changed");
+ Services.prefs.addObserver("intl.uidirection", this);
+ this.updateDir();
+
// Go ahead and trigger sync
this._SyncedTabs.syncTabs()
.catch(Cu.reportError);
this._deckView = new this._DeckView(this._window, this.tabListComponent, {
onConnectDeviceClick: event => this.openConnectDevice(event),
onSyncPrefClick: event => this.openSyncPrefs(event)
});
@@ -96,32 +101,42 @@ SyncedTabsDeckComponent.prototype = {
this.updatePanel();
},
uninit() {
Services.obs.removeObserver(this, this._SyncedTabs.TOPIC_TABS_CHANGED);
Services.obs.removeObserver(this, FxAccountsCommon.ONLOGIN_NOTIFICATION);
Services.obs.removeObserver(this, "weave:service:login:change");
Services.obs.removeObserver(this, "weave:service:ready");
+ Services.obs.removeObserver(this, "intl:app-locales-changed");
+ Services.prefs.removeObserver("intl.uidirection", this);
this._deckView.destroy();
},
observe(subject, topic, data) {
switch (topic) {
case this._SyncedTabs.TOPIC_TABS_CHANGED:
this._syncedTabsListStore.getData();
this.updatePanel();
break;
case "weave:service:ready":
Services.obs.removeObserver(this, "weave:service:ready");
// Intended fallthrough.
case FxAccountsCommon.ONLOGIN_NOTIFICATION:
case "weave:service:login:change":
this.updatePanel();
break;
+ case "intl:app-locales-changed":
+ this.updateDir();
+ break;
+ case "nsPref:changed":
+ if (data == "intl.uidirection") {
+ this.updateDir();
+ }
+ break;
default:
break;
}
},
// 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() {
@@ -153,16 +168,27 @@ SyncedTabsDeckComponent.prototype = {
});
})
.catch(err => {
Cu.reportError(err);
return this.PANELS.NOT_AUTHED_INFO;
});
},
+ updateDir() {
+ // If the HTML document doesn't exist, we can't update the window
+ if (!this._window.document) return;
+
+ if (Services.locale.isAppLocaleRTL) {
+ this._window.document.body.dir = "rtl";
+ } else {
+ this._window.document.body.dir = "ltr";
+ }
+ },
+
updatePanel() {
// return promise for tests
return this.getPanelStatus()
.then(panelId => this._deckStore.selectPanel(panelId))
.catch(Cu.reportError);
},
openSyncPrefs() {
--- a/browser/components/syncedtabs/test/xpcshell/test_SyncedTabsDeckComponent.js
+++ b/browser/components/syncedtabs/test/xpcshell/test_SyncedTabsDeckComponent.js
@@ -89,30 +89,32 @@ add_task(async function testObserver() {
sinon.stub(SyncedTabs, "syncTabs", () => Promise.resolve());
sinon.spy(deckStore, "on");
sinon.stub(deckStore, "setPanels");
sinon.stub(listStore, "getData");
let component = new SyncedTabsDeckComponent({
- mockWindow,
+ window: mockWindow,
deckStore,
listStore,
listComponent,
SyncedTabs,
DeckView: ViewMock,
});
sinon.spy(component, "observe");
sinon.stub(component, "updatePanel");
+ sinon.stub(component, "updateDir");
component.init();
SyncedTabs.syncTabs.restore();
Assert.ok(component.updatePanel.called, "triggers panel update during init");
+ Assert.ok(component.updateDir.called, "triggers UI direction update during init");
Services.obs.notifyObservers(null, SyncedTabs.TOPIC_TABS_CHANGED);
Assert.ok(component.observe.calledWith(null, SyncedTabs.TOPIC_TABS_CHANGED),
"component is notified");
Assert.ok(listStore.getData.called, "gets list data");
Assert.ok(component.updatePanel.calledTwice, "triggers panel update");
@@ -123,16 +125,25 @@ add_task(async function testObserver() {
"component is notified of login");
Assert.equal(component.updatePanel.callCount, 3, "triggers panel update again");
Services.obs.notifyObservers(null, "weave:service:login:change");
Assert.ok(component.observe.calledWith(null, "weave:service:login:change"),
"component is notified of login change");
Assert.equal(component.updatePanel.callCount, 4, "triggers panel update again");
+
+ Services.locale.setAvailableLocales(["ab-CD"]);
+ Services.locale.setRequestedLocales(["ab-CD"]);
+
+ Assert.ok(component.updateDir.calledTwice, "locale change triggers UI direction update");
+
+ Services.prefs.setIntPref("intl.uidirection", 1);
+
+ Assert.equal(component.updateDir.callCount, 3, "pref change triggers UI direction update");
});
add_task(async function testPanelStatus() {
let deckStore = new SyncedTabsDeckStore();
let listStore = new SyncedTabsListStore();
let listComponent = {};
let fxAccounts = {
getSignedInUser() {}