💄 Use arrowscrollbox for tabs

src/actors/LinkHandlerChild.ts

@@ -23,9 +23,7 @@ type PageShow = PageTransitionEvent & { type: 'pageshow' }
 type PageHide = PageTransitionEvent & { type: 'pagehide' }
 
 export class LinkHandlerChild extends JSWindowActorChild {
-  iconLoader = new FaviconLoader(
-    this,
-  ) as import('../modules/FaviconLoader.ts').FaviconLoader
+  iconLoader = new FaviconLoader(this)
   loadedTabIcon = false
 
   /**

src/content/browser/components/customizableUI/Tabs.svelte

@@ -11,20 +11,69 @@
   import Tab from '@browser/components/tabs/Tab.svelte'
 
   import UiItemBase from './UIItemBase.svelte'
-  import { selectedTabId, tabs } from '@browser/lib/window/tabs'
+  import { openTab, selectedTabId, tabs } from '@browser/lib/window/tabs'
+  import ToolbarButton from '@shared/components/ToolbarButton.svelte'
+  import { onMount } from 'svelte'
 
   export let component: ComponentId & TabsComponent
   export let root: Component
+
+  let overflow = false
+  let arrowBox: HTMLElement
+
+  onMount(() => {
+    arrowBox.addEventListener('overflow', () => (overflow = true))
+    arrowBox.addEventListener('underflow', () => (overflow = false))
+  })
 </script>
 
 <UiItemBase {component} {root} class="tabs" on:drop={(e) => e.preventDefault()}>
-  {#each $tabs as tab (tab.getId())}
-    <Tab {tab} bind:selectedTab={$selectedTabId} />
-  {/each}
+  <xul:arrowscrollbox
+    bind:this={arrowBox}
+    class="tab-container"
+    orient="horizontal"
+    clicktoscroll="true"
+  >
+    {#each $tabs as tab (tab.getId())}
+      <Tab {tab} bind:selectedTab={$selectedTabId} />
+    {/each}
+
+    {#if !overflow}
+      <ToolbarButton on:click={() => openTab()}>
+        <i class="ri-add-line" />
+      </ToolbarButton>
+    {/if}
+  </xul:arrowscrollbox>
+
+  {#if overflow}
+    <ToolbarButton on:click={() => openTab()}>
+      <i class="ri-add-line" />
+    </ToolbarButton>
+  {/if}
 </UiItemBase>
 
 <style>
   :global(.component.tabs) {
-    overflow: scroll;
+    --tab-max-width: 16rem;
+    --tab-min-width: 4rem;
+
+    display: flex;
+    flex-grow: 1;
+    gap: 0.125rem;
+
+    overflow: hidden;
+  }
+
+  :global(.component.tabs .toolbar__button) {
+    margin: 0.25rem 0;
+  }
+
+  .tab-container {
+    display: flex;
+    flex-grow: 1;
+    flex-wrap: nowrap;
+    align-items: center;
+
+    overflow-x: hidden;
   }
 </style>

src/content/browser/components/tabs/Tab.svelte

@@ -50,6 +50,9 @@
       <img class="tab__icon tab__start-item" src={$icon} alt="favicon" />
     {/if}
     <span>{$title || $uri.asciiSpec}</span>
+
+    <span class="tab__space" />
+
     <button
       class="tab__close"
       on:click={() => closeTab(tab)}
@@ -68,10 +71,15 @@
     margin: 0.25rem 0;
     font-size: 1.25rem;
     border-radius: 0.5rem;
-    max-width: 16rem;
+
+    height: 2rem;
+    max-width: var(--tab-max-width);
+    min-width: var(--tab-min-width);
 
     display: flex;
     align-items: center;
+    flex-grow: 100;
+    flex-shrink: 100;
 
     cursor: default;
   }
@@ -128,6 +136,11 @@
     width: 1.5rem;
   }
 
+  .tab__space {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
   .drop-indicator {
     width: 1px;
   }

src/content/settings/components/pref/CustomizableUI/Component.svelte

@@ -152,4 +152,9 @@
   .component.root {
     height: 100%;
   }
+
+  .component.tabs {
+    display: flex;
+    gap: 0.125rem;
+  }
 </style>

src/content/shared/customizableUI/style.ts

@@ -69,13 +69,6 @@ function getOmniboxStyle(
   `
 }
 
-function getTabsStyle(): string {
-  return `
-    display:flex;
-    gap: 0.125rem;
-  `
-}
-
 function getIconButtonStyle(): string {
   return `
     display: flex;
@@ -97,8 +90,6 @@ export function getComponentStyle(
       return getSpacer(component, parentOrientation)
     case 'omnibox':
       return getOmniboxStyle(parentOrientation, preview)
-    case 'tabs':
-      return getTabsStyle()
     case 'icon':
       return getIconButtonStyle()
     default:

src/link.d.ts

@@ -14,10 +14,6 @@ declare type LazyImportType<Modules extends Partial<MozESMExportFile>> =
   | { [Key in keyof Modules]: MozESMExportType[Key] }
   | {}
 
-declare module 'resource://app/modules/FaviconLoader.sys.mjs' {
-  export const FaviconLoader: typeof import('./modules/FaviconLoader').FaviconLoader
-}
-
 declare module 'resource://app/modules/TypedImportUtils.sys.mjs' {
   export const lazyESModuleGetters: typeof import('./modules/TypedImportUtils').lazyESModuleGetters
 }

src/modules/link.json

@@ -1,7 +1 @@
-[
-  "BrowserGlue",
-  "BrowserWindowTracker",
-  "EPageActions",
-  "FaviconLoader",
-  "TypedImportUtils"
-]
+["BrowserGlue", "BrowserWindowTracker", "EPageActions", "TypedImportUtils"]

src/prefs.js

@@ -20,11 +20,7 @@ pref(
 );
 pref(
   'browser.uiCustomization.state',
-  '{"type":"block","direction":"vertical","content":[{"type":"block","direction":"horizontal","size":{"type":"content"},"content":[{"type":"tabs"},{"type":"icon","icon":"add-line"}],"color":"base"},{"type":"block","direction":"horizontal","size":{"type":"content"},"content":[{"type":"icon","icon":"arrow-left-line"},{"type":"icon","icon":"refresh-line"},{"type":"icon","icon":"arrow-right-line"},{"type":"spacer","grow":1},{"type":"omnibox"},{"type":"spacer","grow":1},{"type":"icon","icon":"menu-line"}],"color":"surface-0"},{"type":"browser"}],"size":{"type":"grow","value":1},"color":"base"}'
-);
-pref(
-  'browser.uiCustomization.state',
-  '{"type":"block","direction":"vertical","content":[{"type":"block","direction":"horizontal","size":{"type":"content"},"content":[{"type":"tabs"},{"type":"icon","icon":"add-line"}],"color":"base"},{"type":"block","direction":"horizontal","size":{"type":"content"},"content":[{"type":"icon","icon":"arrow-left-line"},{"type":"icon","icon":"refresh-line"},{"type":"icon","icon":"arrow-right-line"},{"type":"spacer","grow":1},{"type":"omnibox"},{"type":"spacer","grow":1},{"type":"icon","icon":"menu-line"}],"color":"surface-0"},{"type":"browser"}],"size":{"type":"grow","value":1},"color":"base"}'
+  '{"type":"block","direction":"vertical","content":[{"type":"block","direction":"horizontal","size":{"type":"content"},"content":[{"type":"tabs"}],"color":"base"},{"type":"block","direction":"horizontal","size":{"type":"content"},"content":[{"type":"icon","icon":"arrow-left-line"},{"type":"icon","icon":"refresh-line"},{"type":"icon","icon":"arrow-right-line"},{"type":"spacer","grow":1},{"type":"omnibox"},{"type":"spacer","grow":1},{"type":"icon","icon":"menu-line"}],"color":"surface-0"},{"type":"browser"}],"size":{"type":"grow","value":1},"color":"base"}'
 );
 
 // Default keybinds