svelte: Update messaging and link indicators (#61038)

This commit removes the info banner and adds an experimental badge with
popover instead. I'm sure the messaging in the popover can be improved.
Maybe we'll give people a way to permanently opt-out.

This also removes the styling for external links, which, toghether with
the changes to the repo URL matching, means that the
`data-sveltekit-reload` attributes are not necessary anymore.

Because I made changes to the popover logic, namely making it possible
to show and hide the popover on hover, I used that opportunity to
migrate from the deprecated popperjs to floating-ui, which resolves some
issues with the tooltip in hovercards.
Eventually we should probably standardize on using melt-ui for popovers
too (or whatever library we will use eventually) but for now I still
find floating-ui to be easier to use than the corresponding melt-ui
components.

Author: fkling

client/web-sveltekit/BUILD.bazel

@@ -45,14 +45,14 @@ SRCS = [
 
 BUILD_DEPS = [
     ":node_modules/@faker-js/faker",
+    ":node_modules/@floating-ui/dom",
     ":node_modules/@graphql-codegen/cli",
-    ":node_modules/@graphql-codegen/typescript",
-    ":node_modules/@graphql-codegen/typescript-operations",
     ":node_modules/@graphql-codegen/near-operation-file-preset",
     ":node_modules/@graphql-codegen/typed-document-node",
+    ":node_modules/@graphql-codegen/typescript",
+    ":node_modules/@graphql-codegen/typescript-operations",
     ":node_modules/@graphql-tools/utils",
     ":node_modules/@melt-ui/svelte",
-    ":node_modules/@popperjs/core",
     ":node_modules/@sourcegraph/branded",
     ":node_modules/@sourcegraph/common",
     ":node_modules/@sourcegraph/http-client",

client/web-sveltekit/package.json

@@ -65,8 +65,8 @@
   },
   "type": "module",
   "dependencies": {
+    "@floating-ui/dom": "^1.6.3",
     "@melt-ui/svelte": "^0.76.0",
-    "@popperjs/core": "^2.11.8",
     "@sourcegraph/branded": "workspace:*",
     "@sourcegraph/client-api": "workspace:*",
     "@sourcegraph/common": "workspace:*",

client/web-sveltekit/src/lib/Popover.svelte

@@ -1,44 +1,94 @@
 <script lang="ts">
-    import type { Placement } from '@popperjs/core'
+    import type { Placement } from '@floating-ui/dom'
 
-    import { createPopover, onClickOutside } from './dom'
-    import { afterUpdate } from 'svelte'
+    import { popover, onClickOutside, portal } from './dom'
+    import type { Action } from 'svelte/action'
 
     export let placement: Placement = 'bottom'
-
-    const { update, popover } = createPopover()
+    /**
+     * Show the popover when hovering over the trigger.
+     */
+    export let showOnHover = false
 
     let isOpen = false
     let trigger: HTMLElement | null
+    let popoverContainer: HTMLElement | null
 
     function toggle(open?: boolean): void {
         isOpen = open === undefined ? !isOpen : open
     }
 
-    function clickOutside(event: { detail: HTMLElement }): void {
+    function handleClickOutside(event: { detail: HTMLElement }): void {
         if (event.detail !== trigger && !trigger?.contains(event.detail)) {
             isOpen = false
         }
     }
 
-    function registerTrigger(node: HTMLElement) {
+    const registerTrigger: Action<HTMLElement> = node => {
         trigger = node
+
+        function handleMouseEnterTrigger(): void {
+            isOpen = true
+        }
+
+        function handleMouseLeaveTrigger(event: MouseEvent): void {
+            // It should be possible to move the mouse from the trigger to the popover without closing it
+            if (event.relatedTarget && !popoverContainer?.contains(event.relatedTarget as Node)) {
+                isOpen = false
+            }
+        }
+
+        if (showOnHover) {
+            node.addEventListener('mouseenter', handleMouseEnterTrigger)
+            node.addEventListener('mouseleave', handleMouseLeaveTrigger)
+        }
+
+        return {
+            destroy() {
+                trigger = null
+                node.removeEventListener('mouseenter', handleMouseEnterTrigger)
+                node.removeEventListener('mouseleave', handleMouseLeaveTrigger)
+            },
+        }
     }
 
-    afterUpdate(update)
+    const registerPopoverContainer: Action<HTMLElement> = node => {
+        popoverContainer = node
+        function handleMouseLeavePopover(event: MouseEvent): void {
+            // It should be possible to move the mouse from the popover to the trigger without closing it
+            if (event.relatedTarget && !trigger?.contains(event.relatedTarget as Node)) {
+                toggle(false)
+            }
+        }
+        if (showOnHover) {
+            node.addEventListener('mouseleave', handleMouseLeavePopover)
+        }
+        return {
+            destroy() {
+                popoverContainer = null
+                node.removeEventListener('mouseleave', handleMouseLeavePopover)
+            },
+        }
+    }
 </script>
 
 <slot {toggle} {registerTrigger} />
 {#if trigger && isOpen}
-    <div use:popover={{ target: trigger, options: { placement } }} use:onClickOutside on:click-outside={clickOutside}>
+    <div
+        use:registerPopoverContainer
+        use:portal
+        use:popover={{ reference: trigger, options: { placement, shift: { padding: 4 } } }}
+        use:onClickOutside
+        on:click-outside={handleClickOutside}
+    >
         <slot name="content" {toggle} />
     </div>
 {/if}
 
 <style lang="scss">
     div {
+        position: absolute;
         isolation: isolate;
-        z-index: 1000;
         min-width: 10rem;
         font-size: 0.875rem;
         background-clip: padding-box;

client/web-sveltekit/src/lib/Tooltip.stories.svelte

@@ -8,14 +8,14 @@
 </script>
 
 <script lang="ts">
-    const placements: Placement[] = ['auto', 'top', 'left', 'bottom', 'right']
+    const placements: Placement[] = ['top', 'left', 'bottom', 'right']
     let count = 0
 </script>
 
 <Story name="Default">
     <h2>Static Tooltip</h2>
     <p>
-        <Tooltip tooltip="Some static tooltip text" placement="auto">
+        <Tooltip tooltip="Some static tooltip text">
             <span>Hover over me</span>
         </Tooltip>
     </p>

client/web-sveltekit/src/lib/Tooltip.svelte

@@ -1,14 +1,11 @@
 <script lang="ts" context="module">
-    import type { Placement } from '@popperjs/core'
-    import { placements } from '@popperjs/core'
+    import type { Placement } from '@floating-ui/dom'
 
     export type { Placement }
-    export { placements }
 </script>
 
 <script lang="ts">
-    import { createPopover, uniqueID } from './dom'
-    import { afterUpdate } from 'svelte'
+    import { popover, portal, uniqueID } from './dom'
 
     /**
      * The content of the tooltip.
@@ -25,14 +22,11 @@
     export let alwaysVisible = false
 
     const id = uniqueID('tooltip')
-    const { update, popover } = createPopover()
 
     let visible = false
     let wrapper: HTMLElement
     let target: Element | null
 
-    afterUpdate(update)
-
     function show() {
         visible = true
     }
@@ -43,14 +37,10 @@
 
     $: options = {
         placement,
-        modifiers: [
-            {
-                name: 'offset',
-                options: {
-                    offset: [0, 8],
-                },
-            },
-        ],
+        offset: 8,
+        shift: {
+            padding: 4,
+        },
     }
     $: target = wrapper?.firstElementChild
     $: if (target && tooltip) {
@@ -68,9 +58,9 @@
     <slot />
 </div>
 {#if (alwaysVisible || visible) && target && tooltip}
-    <div role="tooltip" {id} use:popover={{ target, options }}>
-        {tooltip}
-        <div data-popper-arrow />
+    <div role="tooltip" {id} use:popover={{ reference: target, options }} use:portal>
+        <div class="content">{tooltip}</div>
+        <div data-arrow />
     </div>
 {/if}
 
@@ -89,56 +79,53 @@
         --tooltip-padding-x: 0.5rem;
         --tooltip-margin: 0;
 
+        --tooltip-arrow-side: 8px solid transparent;
+        --tooltip-arrow-main: 8px solid var(--tooltip-bg);
+
         all: initial;
+        position: absolute;
         isolation: isolate;
         font-family: inherit;
         font-size: var(--tooltip-font-size);
         font-style: normal;
         font-weight: normal;
         line-height: var(--tooltip-line-height);
         max-width: var(--tooltip-max-width);
-        background-color: var(--tooltip-bg);
-        border-radius: var(--tooltip-border-radius);
         color: var(--tooltip-color);
-        padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
         user-select: text;
         word-wrap: break-word;
         border: none;
         min-width: 0;
-        z-index: 100;
-    }
+        width: max-content;
 
-    :global([data-popper-placement^='top']) > [data-popper-arrow] {
-        bottom: -4px;
-    }
+        .content {
+            background-color: var(--tooltip-bg);
+            padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
+            border-radius: var(--tooltip-border-radius);
+        }
 
-    :global([data-popper-placement^='bottom']) > [data-popper-arrow] {
-        top: -4px;
-    }
+        :global([data-arrow][data-placement^='top']) {
+            bottom: -4px;
+        }
 
-    :global([data-popper-placement^='left']) > [data-popper-arrow] {
-        right: -4px;
-    }
+        :global([data-arrow][data-placement^='bottom']) {
+            top: -4px;
+        }
+
+        :global([data-arrow][data-placement^='left']) {
+            right: -4px;
+        }
 
-    :global([data-popper-placement^='right']) > [data-popper-arrow] {
-        left: -4px;
+        :global([data-arrow][data-placement^='right']) {
+            left: -4px;
+        }
     }
 
-    [data-popper-arrow],
-    [data-popper-arrow]::before {
+    [data-arrow] {
         position: absolute;
         width: 8px;
         height: 8px;
-        background: inherit;
-    }
-
-    [data-popper-arrow] {
-        visibility: hidden;
-
-        &::before {
-            visibility: visible;
-            content: '';
-            transform: rotate(45deg);
-        }
+        transform: rotate(45deg);
+        background-color: var(--tooltip-bg);
     }
 </style>