tor-browser

commit 784cf2685fdf08c2f6786db5448d7088c2b129b0
parent d15c07018528aa94d9f2957198c097fcc7a5c32c
Author: Chloe Zhou <chloezhouny@gmail.com>
Date:   Fri,  5 Dec 2025 17:38:14 +0000

Bug 2000091 - Use ::before for keypoints chevron icon and handle RTL rotation. r=Mardak,desktop-theme-reviewers,ai-frontend-reviewers,mlucks,sfoster

Differential Revision: https://phabricator.services.mozilla.com/D272571

Diffstat:
M
browser/components/genai/content/link-preview-card.css
 | 
37
+++++++++++++++++++++++--------------
M
browser/components/genai/content/link-preview-card.mjs
 | 
1
-

2 files changed, 23 insertions(+), 15 deletions(-)
diff --git a/browser/components/genai/content/link-preview-card.css b/browser/components/genai/content/link-preview-card.css
@@ -74,27 +74,36 @@
     gap: var(--space-xs);
     margin: 0;
     user-select: none;
-    /* TODO: this could have been handled with just ::before with { content: '', icon stuff }*/
-    .chevron-icon {
-      background-image: url("chrome://global/skin/icons/arrow-down.svg");
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: contain;
-      display: inline-block;
-      fill: currentColor;
-      height: 16px;
-      margin-inline-end: 8px;
-      -moz-context-properties: fill;
-      transform: rotateZ(0deg);
+  }
+  .keypoints-header::before {
+    content: "";
+    background-image: url("chrome://global/skin/icons/arrow-down.svg");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    display: inline-block;
+    fill: currentColor;
+    height: var(--icon-size);
+    margin-inline-end: var(--space-small);
+    -moz-context-properties: fill;
+    transform: rotateZ(0deg);
+    width: var(--icon-size);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .keypoints-header::before {
       transition: transform 0.3s ease;
-      width: 16px;
     }
   }
 
-  .keypoints-header:has(+ .keypoints-content:not(.hidden)) .chevron-icon {
+  .keypoints-header:has(+ .keypoints-content:not(.hidden))::before {
     transform: rotateZ(-180deg);
   }
 
+  &:dir(rtl) .keypoints-header:has(+ .keypoints-content:not(.hidden))::before {
+    transform: rotateZ(180deg);
+  }
+
   img.icon {
     fill: currentColor;
     height: var(--icon-size);
diff --git a/browser/components/genai/content/link-preview-card.mjs b/browser/components/genai/content/link-preview-card.mjs
@@ -291,7 +291,6 @@ class LinkPreviewCard extends MozLitElement {
           role="button"
           aria-expanded=${!this.collapsed}
         >
-          <div class="chevron-icon"></div>
           <span data-l10n-id="link-preview-key-points-header"></span>
           <img
             class="icon"