From d69cea6324b1be71f533c5b85a9cb7670935f654 Mon Sep 17 00:00:00 2001
From: Alison Gale <[email protected]>
Date: Wed, 22 Apr 2026 08:34:01 -0700
Subject: [PATCH] [Reading List]Fix domain rendering for reading list

The url list item will render the title and domain or description of a
tab. Directionality of the text is reversed to elide from the front
which results in domains being rendered backwards. This ensures the
domain direction is isolated from the eliding so it will render
correctly.

https://screenshot.googleplex.com/BhFRWMFYrmJ7uN4

Bug: 503346647
Change-Id: Ic4ce0ef132d0b027a20922ed4d5da03f82b7a6a0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7782762
Commit-Queue: Alison Gale <[email protected]>
Reviewed-by: John Lee <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1618889}
---

diff --git a/chrome/test/data/webui/cr_elements/cr_url_list_item_test.ts b/chrome/test/data/webui/cr_elements/cr_url_list_item_test.ts
index c40e48fa..da2b00a 100644
--- a/chrome/test/data/webui/cr_elements/cr_url_list_item_test.ts
+++ b/chrome/test/data/webui/cr_elements/cr_url_list_item_test.ts
@@ -65,6 +65,17 @@
     assertEquals('99+', count.textContent);
   });
 
+  test('DescriptionWithBdi', async () => {
+    element.description = '1.google.com';
+    await element.updateComplete;
+    const descriptionText =
+        element.shadowRoot.querySelector('.description-text')!;
+    assertTrue(!!descriptionText);
+    const bdi = descriptionText.querySelector('bdi');
+    assertTrue(!!bdi);
+    assertEquals('1.google.com', bdi.textContent);
+  });
+
   test('SetsActiveClass', () => {
     assertFalse(element.classList.contains('active'));
     element.dispatchEvent(new PointerEvent('pointerdown'));
diff --git a/ui/webui/resources/cr_elements/cr_url_list_item/cr_url_list_item.html.ts b/ui/webui/resources/cr_elements/cr_url_list_item/cr_url_list_item.html.ts
index 9a2d762f..fef7ea5 100644
--- a/ui/webui/resources/cr_elements/cr_url_list_item/cr_url_list_item.html.ts
+++ b/ui/webui/resources/cr_elements/cr_url_list_item/cr_url_list_item.html.ts
@@ -56,7 +56,7 @@
     <span class="title">${this.title}</span>
     <div class="descriptions">
       <div class="description" ?hidden="${!this.description}">
-        <span class="description-text">${this.description}</span>
+        <span class="description-text"><bdi>${this.description}</bdi></span>
         <span class="description-meta" ?hidden="${!this.descriptionMeta}">
           &middot; ${this.descriptionMeta}
         </span>

diff --git a/chrome/test/data/webui/cr_elements/cr_url_list_item_test.ts b/chrome/test/data/webui/cr_elements/cr_url_list_item_test.ts
index c40e48fa..da2b00a 100644
--- a/chrome/test/data/webui/cr_elements/cr_url_list_item_test.ts
+++ b/chrome/test/data/webui/cr_elements/cr_url_list_item_test.ts
@@ -65,6 +65,17 @@
     assertEquals('99+', count.textContent);
   });
 
+  test('DescriptionWithBdi', async () => {
+    element.description = '1.google.com';
+    await element.updateComplete;
+    const descriptionText =
+        element.shadowRoot.querySelector('.description-text')!;
+    assertTrue(!!descriptionText);
+    const bdi = descriptionText.querySelector('bdi');
+    assertTrue(!!bdi);
+    assertEquals('1.google.com', bdi.textContent);
+  });
+
   test('SetsActiveClass', () => {
     assertFalse(element.classList.contains('active'));
     element.dispatchEvent(new PointerEvent('pointerdown'));