From 580fc6dbb94a1bbdfcb74c6b4c86eccc98e07172 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@webrecorder.org>
Date: Wed, 4 Jun 2025 10:43:28 -0700
Subject: [PATCH] devex: Replace inverted tooltip style with popver component
 (#2644)

Replaces all instances of `sl-tooltip.invert-tooltip` with
`<btrix-popover>`
---
 frontend/src/components/ui/popover.ts               |  2 --
 .../src/components/ui/table/table.stylesheet.css    |  3 ++-
 .../src/features/qa/page-list/ui/page-details.ts    |  6 +++---
 frontend/src/features/qa/page-list/ui/page.ts       |  4 ++--
 .../src/pages/org/archived-item-detail/ui/qa.ts     |  8 ++++----
 frontend/src/pages/org/browser-profiles-list.ts     |  6 +++---
 frontend/src/stories/components/Popover.stories.ts  |  2 +-
 frontend/src/theme.stylesheet.css                   | 13 -------------
 8 files changed, 15 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/ui/popover.ts b/frontend/src/components/ui/popover.ts
index e9e88a64..0e1654ad 100644
--- a/frontend/src/components/ui/popover.ts
+++ b/frontend/src/components/ui/popover.ts
@@ -1,4 +1,3 @@
-import { localized } from "@lit/localize";
 import SlTooltip from "@shoelace-style/shoelace/dist/components/tooltip/tooltip.component.js";
 import slTooltipStyles from "@shoelace-style/shoelace/dist/components/tooltip/tooltip.styles.js";
 import { css } from "lit";
@@ -19,7 +18,6 @@ import { customElement, property } from "lit/decorators.js";
  * @attr {Boolean} disabled
  */
 @customElement("btrix-popover")
-@localized()
 export class Popover extends SlTooltip {
   @property({ type: Boolean, reflect: true })
   hoist = true;
diff --git a/frontend/src/components/ui/table/table.stylesheet.css b/frontend/src/components/ui/table/table.stylesheet.css
index 9e28a6f9..b6536d59 100644
--- a/frontend/src/components/ui/table/table.stylesheet.css
+++ b/frontend/src/components/ui/table/table.stylesheet.css
@@ -9,7 +9,8 @@ btrix-table-cell .rowClickTarget {
   max-width: 100%;
 }
 
-btrix-table-cell sl-tooltip > * {
+btrix-table-cell sl-tooltip > *,
+btrix-table-cell btrix-popover > * {
   /* Place above .rowClickTarget::after overlay */
   z-index: 1;
 }
diff --git a/frontend/src/features/qa/page-list/ui/page-details.ts b/frontend/src/features/qa/page-list/ui/page-details.ts
index 6c28b56b..44d81324 100644
--- a/frontend/src/features/qa/page-list/ui/page-details.ts
+++ b/frontend/src/features/qa/page-list/ui/page-details.ts
@@ -20,7 +20,7 @@ export function formatPercentage(n: number, fractionDigits = 2) {
 
 export const pageDetails = (page: ArchivedItemQAPage) =>
   html`<ul class="leading-4">
-      <li class="my-3 flex">
+      <li class="flex">
         ${iconFor(
           severityFromMatch(page.qa.screenshotMatch),
           tw`mr-2 flex-none`,
@@ -65,7 +65,7 @@ export const pageDetails = (page: ArchivedItemQAPage) =>
             : msg("No Crawl Diff")}
         </span>
       </li>
-      <li class="my-3 flex">
+      <li class="flex">
         ${iconFor(
           severityFromResourceCounts(
             page.qa.resourceCounts?.replayBad,
@@ -93,7 +93,7 @@ export const pageDetails = (page: ArchivedItemQAPage) =>
           <div class="my-2 text-xs text-neutral-400">
             ${msg("Newest comment:")}
           </div>
-          <div class="mb-3 flex text-xs leading-4">
+          <div class="flex text-xs leading-4">
             <sl-icon
               name="chat-square-text-fill"
               class="mr-2 size-4 flex-none text-blue-600"
diff --git a/frontend/src/features/qa/page-list/ui/page.ts b/frontend/src/features/qa/page-list/ui/page.ts
index b7ecf663..6a8e6794 100644
--- a/frontend/src/features/qa/page-list/ui/page.ts
+++ b/frontend/src/features/qa/page-list/ui/page.ts
@@ -138,7 +138,7 @@ export class QaPage extends TailwindElement {
           tabindex="0"
           aria-selected=${this.selected}
         >
-          <sl-tooltip class="invert-tooltip" placement="left" hoist>
+          <btrix-popover placement="left">
             <div slot="content" class="max-w-60 text-xs">
               ${pageDetails(page)}
             </div>
@@ -174,7 +174,7 @@ export class QaPage extends TailwindElement {
                 class="text-blue-600"
               ></sl-icon>`}
             </div>
-          </sl-tooltip>
+          </btrix-popover>
           <h5 class="truncate text-sm font-semibold text-black">
             ${page.title ||
             html`<span class="opacity-50">${msg("No page title")}</span>`}
diff --git a/frontend/src/pages/org/archived-item-detail/ui/qa.ts b/frontend/src/pages/org/archived-item-detail/ui/qa.ts
index 6144d776..7451cf96 100644
--- a/frontend/src/pages/org/archived-item-detail/ui/qa.ts
+++ b/frontend/src/pages/org/archived-item-detail/ui/qa.ts
@@ -797,12 +797,12 @@ export class ArchivedItemDetailQA extends BtrixElement {
                 <btrix-table-cell>
                   ${page.notes?.length
                     ? html`
-                        <sl-tooltip class="invert-tooltip">
+                        <btrix-popover>
                           <div slot="content">
-                            <div class="text-xs text-neutral-400">
+                            <div class="mb-1 text-xs text-neutral-400">
                               ${msg("Newest comment:")}
                             </div>
-                            <div class="leading04 max-w-60 text-xs">
+                            <div class="max-w-60 text-xs leading-4">
                               ${page.notes[page.notes.length - 1].text}
                             </div>
                           </div>
@@ -813,7 +813,7 @@ export class ArchivedItemDetailQA extends BtrixElement {
                             ></sl-icon>`,
                             `${this.localize.number(page.notes.length)} ${pluralOf("comments", page.notes.length)}`,
                           )}
-                        </sl-tooltip>
+                        </btrix-popover>
                       `
                     : html`<span class="text-neutral-400">
                         ${msg("None")}
diff --git a/frontend/src/pages/org/browser-profiles-list.ts b/frontend/src/pages/org/browser-profiles-list.ts
index 6ffbea89..86407213 100644
--- a/frontend/src/pages/org/browser-profiles-list.ts
+++ b/frontend/src/pages/org/browser-profiles-list.ts
@@ -263,14 +263,14 @@ export class BrowserProfilesList extends BtrixElement {
         <btrix-table-cell>
           <div class="truncate">${data.origins[0]}</div>
           ${data.origins.length > 1
-            ? html`<sl-tooltip class="invert-tooltip">
-                <span slot="content" class=" break-words"
+            ? html`<btrix-popover placement="top">
+                <span slot="content" class="break-words"
                   >${data.origins.slice(1).join(", ")}</span
                 >
                 <btrix-badge class="ml-2">
                   ${msg(str`+${data.origins.length - 1}`)}
                 </btrix-badge>
-              </sl-tooltip>`
+              </btrix-popover>`
             : nothing}
         </btrix-table-cell>
         <btrix-table-cell class="whitespace-nowrap tabular-nums">
diff --git a/frontend/src/stories/components/Popover.stories.ts b/frontend/src/stories/components/Popover.stories.ts
index b3a61b7a..005b0553 100644
--- a/frontend/src/stories/components/Popover.stories.ts
+++ b/frontend/src/stories/components/Popover.stories.ts
@@ -38,7 +38,7 @@ export const TopPlacement: Story = {
   args: {
     open: true,
     placement: "top",
-    anchor: html`<btrix-badge>Popover displays below</btrix-badge>`,
+    anchor: html`<btrix-badge>Popover displays above</btrix-badge>`,
   },
 };
 
diff --git a/frontend/src/theme.stylesheet.css b/frontend/src/theme.stylesheet.css
index 34044e81..07aaffff 100644
--- a/frontend/src/theme.stylesheet.css
+++ b/frontend/src/theme.stylesheet.css
@@ -263,19 +263,6 @@
     min-width: min-content;
   }
 
-  /* Style tooltip with white background */
-  /* TODO Replace instances with `<btrix-popover>` */
-  sl-tooltip.invert-tooltip {
-    --sl-tooltip-arrow-size: 0;
-    --sl-tooltip-background-color: var(--sl-color-neutral-50);
-    --sl-tooltip-color: var(--sl-color-neutral-700);
-  }
-
-  sl-tooltip.invert-tooltip::part(body) {
-    outline: 1px solid var(--sl-panel-border-color);
-    box-shadow: var(--sl-shadow-large);
-  }
-
   sl-tab-group {
     --indicator-color: var(--sl-color-primary-500);
   }