diff --git a/src/renderer/src/components/browser-pane/BrowserPane.tsx b/src/renderer/src/components/browser-pane/BrowserPane.tsx
index 29fdb3045aa..4ed588e3433 100644
--- a/src/renderer/src/components/browser-pane/BrowserPane.tsx
+++ b/src/renderer/src/components/browser-pane/BrowserPane.tsx
@@ -119,6 +119,7 @@ import {
applyBrowserPageZoom,
browserPageZoomLevelToPercent,
DEFAULT_BROWSER_PAGE_ZOOM_LEVEL,
+ getBrowserPageZoomIndicatorState,
normalizeBrowserPageZoomLevel,
setBrowserPageZoomLevel,
type BrowserPageZoomDirection
@@ -4242,8 +4243,10 @@ function BrowserPagePane({
}
return received
})()
- const showBrowserZoomIndicator =
- browserZoomFeedbackVisible || browserZoomPercent !== browserDefaultZoomPercent
+ const browserZoomIndicatorState = getBrowserPageZoomIndicatorState({
+ feedbackVisible: browserZoomFeedbackVisible,
+ isDefaultZoom: browserZoomPercent === browserDefaultZoomPercent
+ })
useEffect(() => {
const webview = webviewRef.current
@@ -4758,14 +4761,10 @@ function BrowserPagePane({
{browserZoomPercent}%
diff --git a/src/renderer/src/components/browser-pane/browser-page-zoom.test.ts b/src/renderer/src/components/browser-pane/browser-page-zoom.test.ts
index 94cdb2462cf..4e59d565c85 100644
--- a/src/renderer/src/components/browser-pane/browser-page-zoom.test.ts
+++ b/src/renderer/src/components/browser-pane/browser-page-zoom.test.ts
@@ -2,6 +2,7 @@ import { describe, expect, it, vi } from 'vitest'
import {
applyBrowserPageZoom,
browserPageZoomLevelToPercent,
+ getBrowserPageZoomIndicatorState,
nextBrowserPageZoomLevel,
normalizeBrowserPageZoomLevel,
setBrowserPageZoomLevel
@@ -106,3 +107,20 @@ describe('setBrowserPageZoomLevel', () => {
expect(webview.setZoomLevel).toHaveBeenCalledWith(1.5)
})
})
+
+describe('getBrowserPageZoomIndicatorState', () => {
+ it('shows browser zoom percent only while feedback is active', () => {
+ expect(
+ getBrowserPageZoomIndicatorState({ feedbackVisible: true, isDefaultZoom: false })
+ ).toEqual({
+ ariaHidden: false,
+ opacityClassName: 'opacity-100'
+ })
+ expect(
+ getBrowserPageZoomIndicatorState({ feedbackVisible: false, isDefaultZoom: false })
+ ).toEqual({
+ ariaHidden: true,
+ opacityClassName: 'opacity-0'
+ })
+ })
+})
diff --git a/src/renderer/src/components/browser-pane/browser-page-zoom.ts b/src/renderer/src/components/browser-pane/browser-page-zoom.ts
index a255e7181cc..79d878d3655 100644
--- a/src/renderer/src/components/browser-pane/browser-page-zoom.ts
+++ b/src/renderer/src/components/browser-pane/browser-page-zoom.ts
@@ -21,6 +21,16 @@ export type BrowserPageZoomEventDetail = {
direction: BrowserPageZoomDirection
}
+export type BrowserPageZoomIndicatorState = {
+ ariaHidden: boolean
+ opacityClassName: 'opacity-100' | 'opacity-0'
+}
+
+export type BrowserPageZoomIndicatorInput = {
+ feedbackVisible: boolean
+ isDefaultZoom: boolean
+}
+
type BrowserPageZoomWebview = {
getZoomLevel: () => number
setZoomLevel: (level: number) => void
@@ -60,6 +70,17 @@ export function setBrowserPageZoomLevel(
}
}
+export function getBrowserPageZoomIndicatorState({
+ feedbackVisible
+}: BrowserPageZoomIndicatorInput): BrowserPageZoomIndicatorState {
+ // Why: browser zoom percent is transient feedback; non-default page zoom
+ // should not leave a permanent badge over the webview.
+ return {
+ ariaHidden: !feedbackVisible,
+ opacityClassName: feedbackVisible ? 'opacity-100' : 'opacity-0'
+ }
+}
+
export function dispatchBrowserPageZoomEvent(detail: BrowserPageZoomEventDetail): void {
window.dispatchEvent(
new CustomEvent(ORCA_BROWSER_PAGE_ZOOM_EVENT, {