✨ Implement zoom support

pulse-browser · Jan 5, 2024 · 86d3219 · 86d3219
1 parent 4097921
commit 86d3219
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 0 deletions.
diff --git a/apps/content/src/browser/components/keybindings/Keybindings.svelte b/apps/content/src/browser/components/keybindings/Keybindings.svelte
@@ -43,6 +43,18 @@
     pref="browser.keybinds.previousTab"
     on:command={() => setCurrentTabIndex(getCurrentTabIndex() - 1)}
   />
+
+  <Keybinding
+    pref="browser.keybinds.zoomIn"
+    on:command={() =>
+      runOnCurrentTab((tab) => tab.zoom.update((zoom) => zoom + 0.1))}
+  />
+  <Keybinding
+    pref="browser.keybinds.zoomOut"
+    on:command={() =>
+      runOnCurrentTab((tab) => tab.zoom.update((zoom) => zoom - 0.1))}
+  />
+
   {#each [1, 2, 3, 4, 5, 6, 7, 8] as tabNum}
     <Keybinding
       pref={`browser.keybinds.tab${tabNum}`}

diff --git a/apps/content/src/browser/components/omnibox/Omnibox.svelte b/apps/content/src/browser/components/omnibox/Omnibox.svelte
@@ -10,6 +10,7 @@
   import Bookmarks from './Bookmarks.svelte'
   import { pageActions } from '@browser/lib/modules/EPageActionsBindings'
   import PageAction from './PageAction.svelte'
+  import ZoomDisplay from './ZoomDisplay.svelte'
 
   const suggestionsModule = import('@shared/search/suggestions')
 
@@ -22,6 +23,7 @@
   let selectedSuggestion = 0
 
   $: uri = tab.uri
+  $: zoom = tab.zoom
 
   async function generateSuggestions() {
     const { suggestions: suggestionsMethod } = await suggestionsModule
@@ -89,6 +91,8 @@
         }}
       />
 
+      <ZoomDisplay zoom={$zoom} on:click={() => zoom.set(1)} />
+
       {#each $pageActions as [_extId, pageAction]}
         {#if pageAction.shouldShow($uri.asciiSpec, tab.getTabId())}
           <PageAction {pageAction} />

diff --git a/apps/content/src/browser/components/omnibox/ZoomDisplay.svelte b/apps/content/src/browser/components/omnibox/ZoomDisplay.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  export let zoom: number
+</script>
+
+{#if zoom != 1}
+  <button on:click>
+    {Math.round(zoom * 100)}%
+  </button>
+{/if}
+
+<style>
+  button {
+    background: var(--surface);
+    border: none;
+    cursor: pointer;
+    border-radius: 0.25rem;
+    height: 2rem;
+    margin-right: 0.125rem;
+  }
+
+  button:hover {
+    background: var(--surface-1);
+  }
+</style>
diff --git a/apps/content/src/browser/lib/window/tab.ts b/apps/content/src/browser/lib/window/tab.ts
@@ -43,6 +43,8 @@ export class Tab {
   public loading = writable(false)
   public loadingProgress = writable(0)
 
+  public zoom = writable(1)
+
   /**
    * This is used by the omnibox to determine if text input should be focused.
    */
@@ -59,6 +61,11 @@ export class Tab {
     this.goToUri(uri)
     this.title.set(uri.asciiHost)
 
+    this.zoom.subscribe(
+      (newZoom) =>
+        this.browserElement.browsingContext &&
+        (this.browserElement.fullZoom = newZoom),
+    )
     this.uri.subscribe(async (uri) =>
       this.bookmarkInfo.set(
         await search({ url: uri.spec }).then((r) =>
@@ -156,6 +163,9 @@ export class Tab {
       this.uri.set(event.aLocation)
       this.canGoBack.set(this.browserElement.canGoBack)
       this.canGoForward.set(this.browserElement.canGoForward)
+      this.zoom.set(
+        this.browserElement.browsingContext ? this.browserElement.fullZoom : 1,
+      )
     })
 
     this.progressListener.events.on('progressPercent', this.loadingProgress.set)

diff --git a/apps/content/src/settings/Settings.svelte b/apps/content/src/settings/Settings.svelte
@@ -75,6 +75,9 @@
       <StringPref pref="browser.keybinds.nextTab">Next tab</StringPref>
       <StringPref pref="browser.keybinds.previousTab">Previous Tab</StringPref>
 
+      <StringPref pref="browser.keybinds.zoomIn">Zoom in</StringPref>
+      <StringPref pref="browser.keybinds.zoomOut">Zoom out</StringPref>
+
       {#each [1, 2, 3, 4, 5, 6, 7, 8] as tabNum}
         <StringPref pref={`browser.keybinds.tab${tabNum}`}
           >Jump to tab {tabNum}</StringPref

diff --git a/apps/misc/static/defaults/pref/prefs.js b/apps/misc/static/defaults/pref/prefs.js
@@ -32,6 +32,8 @@ pref('browser.keybinds.newTab', 'accel+T');
 pref('browser.keybinds.closeTab', 'accel+W');
 pref('browser.keybinds.nextTab', 'accel+VK_TAB');
 pref('browser.keybinds.previousTab', 'accel+shift+VK_TAB');
+pref('browser.keybinds.zoomIn', 'accel+=');
+pref('browser.keybinds.zoomOut', 'accel+-');
 pref('browser.keybinds.tab1', 'accel+1');
 pref('browser.keybinds.tab2', 'accel+2');
 pref('browser.keybinds.tab3', 'accel+3');

diff --git a/libs/link/types/globals/Elements.d.ts b/libs/link/types/globals/Elements.d.ts
@@ -51,6 +51,8 @@ declare interface XULBrowserElement extends HTMLElement {
   canGoForward: boolean
   goForward()
   reload()
+  fullZoom: number
+  browsingContext?: unknown
   loadURI(uri: nsIURIType, params?: LoadURIOptions)
   browserId: number
   mInitialized: boolean