From 278c24c5bfdbc31b420f974a6ee70f935245a22b Mon Sep 17 00:00:00 2001
From: Lesley Norton <lesley@mozilla.com>
Date: Mon, 23 Sep 2024 08:25:46 -0700
Subject: [PATCH] Add support for nested bold hostname in popup string (#64)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds support for nested bold hostname in popup string.

<img width="350" alt="Screenshot 2024-09-20 at 7 04 53 PM"
src="https://github.com/user-attachments/assets/5dfc230b-4fa4-4ddd-90e5-48361085a429">
---
 src/ui/browserAction/popupPage.js | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/ui/browserAction/popupPage.js b/src/ui/browserAction/popupPage.js
index 24efcc3..496dedb 100644
--- a/src/ui/browserAction/popupPage.js
+++ b/src/ui/browserAction/popupPage.js
@@ -172,6 +172,23 @@ export class BrowserActionPopup extends LitElement {
       this.currentSiteContext = new_cntxt;
     };
 
+    const getExclusionStringElem = (origin) => {
+      const originPlaceholder = "dummyString";
+      const localizedString = tr("exludePageFor", originPlaceholder);
+      // Create a new <p> element
+      const el = document.createElement("p");
+
+      // Replace "dummyString" with <span>origin</span>
+      const parts = localizedString.split(originPlaceholder);
+      return html`
+        <p>
+          ${parts.at(0)}
+          <span class="bold">${origin}</span>
+          ${parts.at(-1)}
+        </p>
+      `;
+    };
+
     return BrowserActionPopup.sitePreferencesTemplate(
       this.currentSiteContext,
       this.openServerList.bind(this),
@@ -180,7 +197,8 @@ export class BrowserActionPopup extends LitElement {
         return Utils.nameFor(ctx.countryCode, ctx.cityCode, this.servers);
       },
       resetSitePreferences,
-      this._siteContext !== null
+      this._siteContext !== null,
+      getExclusionStringElem
     );
   }
 
@@ -218,7 +236,8 @@ export class BrowserActionPopup extends LitElement {
       return "";
     },
     removeSiteContext = () => {},
-    hasSiteContext = false
+    hasSiteContext = false,
+    getExclusionStringElem = () => {}
   ) {
     const pageLocationPicker = (() => {
       if (siteContext.excluded) {
@@ -255,7 +274,7 @@ export class BrowserActionPopup extends LitElement {
           ?checked=${siteContext.excluded}
           @click=${toggleExcluded}
         />
-        <p>${tr("exludePageFor", siteContext.origin)}</p>
+        ${getExclusionStringElem(siteContext.origin)}
       </div>
       ${pageLocationPicker}
       ${hasSiteContext