Merge branch 'central'

2 files changed, 18 insertions, 8 deletions

diff --git a/lib/BookmarkPanelHub.jsm b/lib/BookmarkPanelHub.jsm
index 288cc3a3..98de50cc 100644
--- a/lib/BookmarkPanelHub.jsm
+++ b/lib/BookmarkPanelHub.jsm
@@ -38,10 +38,7 @@ class _BookmarkPanelHub {
     this._handleMessageRequest = handleMessageRequest;
     this._addImpression = addImpression;
     this._dispatch = dispatch;
-    this._l10n = new DOMLocalization([
-      "browser/branding/sync-brand.ftl",
-      "browser/newtab/asrouter.ftl",
-    ]);
+    this._l10n = new DOMLocalization();
     this._initialized = true;
   }
 
@@ -92,6 +89,9 @@ class _BookmarkPanelHub {
     };
 
     if (response && response.content) {
+      // Only insert localization files if we need to show a message
+      win.MozXULElement.insertFTLIfNeeded("browser/newtab/asrouter.ftl");
+      win.MozXULElement.insertFTLIfNeeded("browser/branding/sync-brand.ftl");
       this.showMessage(response.content, target, win);
       this.sendImpression();
       this.sendUserEventTelemetry("IMPRESSION", win);
@@ -127,9 +127,10 @@ class _BookmarkPanelHub {
       });
       recommendation.style.color = message.color;
       recommendation.style.background = `-moz-linear-gradient(-45deg, ${message.background_color_1} 0%, ${message.background_color_2} 70%)`;
-      const close = createElement("a");
+      const close = createElement("button");
       close.setAttribute("id", "cfrClose");
       close.setAttribute("aria-label", "close");
+      close.style.color = message.color;
       this._l10n.setAttributes(close, message.close_button.tooltiptext);
       close.addEventListener("click", e => {
         this.sendUserEventTelemetry("DISMISS", win);
@@ -149,7 +150,6 @@ class _BookmarkPanelHub {
       recommendation.appendChild(title);
       recommendation.appendChild(content);
       recommendation.appendChild(cta);
-      this._l10n.translateElements([...recommendation.children]);
       target.container.appendChild(recommendation);
     }
 
diff --git a/test/unit/lib/BookmarkPanelHub.test.js b/test/unit/lib/BookmarkPanelHub.test.js
index 2cdadc0b..87cec448 100644
--- a/test/unit/lib/BookmarkPanelHub.test.js
+++ b/test/unit/lib/BookmarkPanelHub.test.js
@@ -18,7 +18,7 @@ describe("BookmarkPanelHub", () => {
     sandbox = sinon.createSandbox();
     globals = new GlobalOverrider();
 
-    fakeL10n = {setAttributes: sandbox.stub(), translateElements: sandbox.stub()};
+    fakeL10n = {setAttributes: sandbox.stub()};
     globals.set("DOMLocalization", function() { return fakeL10n; }); // eslint-disable-line prefer-arrow-callback
     globals.set("FxAccounts", {config: {promiseEmailFirstURI: sandbox.stub()}});
     isBrowserPrivateStub = sandbox.stub().returns(false);
@@ -61,7 +61,10 @@ describe("BookmarkPanelHub", () => {
       close: sandbox.stub(),
     };
     fakeDispatch = sandbox.stub();
-    fakeWindow = {ownerGlobal: {openLinkIn: sandbox.stub(), gBrowser: {selectedBrowser: "browser"}}};
+    fakeWindow = {
+      ownerGlobal: {openLinkIn: sandbox.stub(), gBrowser: {selectedBrowser: "browser"}},
+      MozXULElement: {insertFTLIfNeeded: sandbox.stub()},
+    };
   });
   afterEach(() => {
     instance.uninit();
@@ -140,6 +143,13 @@ describe("BookmarkPanelHub", () => {
       assert.calledWithExactly(instance.showMessage, "content", fakeTarget, fakeWindow);
       assert.calledOnce(instance.sendImpression);
     });
+    it("should insert the appropriate ftl files with translations", () => {
+      instance.onResponse({content: "content"}, fakeTarget, fakeWindow);
+
+      assert.calledTwice(fakeWindow.MozXULElement.insertFTLIfNeeded);
+      assert.calledWith(fakeWindow.MozXULElement.insertFTLIfNeeded, "browser/newtab/asrouter.ftl");
+      assert.calledWith(fakeWindow.MozXULElement.insertFTLIfNeeded, "browser/branding/sync-brand.ftl");
+    });
     it("should dispatch a user impression", () => {
       sandbox.spy(instance, "sendUserEventTelemetry");