From d12929aceec63e3bbee0709321162d279d1107f3 Mon Sep 17 00:00:00 2001
From: Abe Jellinek <jellinek@berkeley.edu>
Date: Wed, 18 Jun 2025 10:28:25 -0400
Subject: [PATCH 1/2] Focus Mode -> Reading Mode

---
 .../modal-popup/appearance-popup.js           | 10 +++---
 src/common/components/reader-ui.js            |  3 +-
 src/common/components/toolbar.js              |  4 +--
 src/common/reader.js                          | 10 +++---
 src/common/types.ts                           |  8 ++---
 .../{focus-mode => reading-mode}/index.ts     | 14 ++++----
 .../node-mapping.ts                           |  0
 src/dom/snapshot/snapshot-view.ts             | 36 +++++++++----------
 .../{focus.scss => reading-mode.scss}         |  0
 9 files changed, 41 insertions(+), 44 deletions(-)
 rename src/dom/snapshot/{focus-mode => reading-mode}/index.ts (94%)
 rename src/dom/snapshot/{focus-mode => reading-mode}/node-mapping.ts (100%)
 rename src/dom/snapshot/stylesheets/{focus.scss => reading-mode.scss} (100%)

diff --git a/src/common/components/modal-popup/appearance-popup.js b/src/common/components/modal-popup/appearance-popup.js
index 565b6d895..884793556 100644
--- a/src/common/components/modal-popup/appearance-popup.js
+++ b/src/common/components/modal-popup/appearance-popup.js
@@ -379,19 +379,19 @@ function AppearancePopup(props) {
 					<div className="group">
 						{type === 'snapshot' && (
 							<div className="option">
-								<label htmlFor="focus-mode-enabled">{l10n.getString('reader-focus-mode')}</label>
+								<label htmlFor="reading-mode-enabled">{l10n.getString('reader-reading-mode')}</label>
 								<input
 									data-tabstop={1}
 									tabIndex={-1}
 									className="switch"
 									type="checkbox"
-									id="focus-mode-enabled"
-									checked={props.viewStats.focusModeEnabled}
-									onChange={e => props.onChangeFocusModeEnabled(e.target.checked)}
+									id="reading-mode-enabled"
+									checked={props.viewStats.readingModeEnabled}
+									onChange={e => props.onChangeReadingModeEnabled(e.target.checked)}
 								/>
 							</div>
 						)}
-						{(type === 'epub' || props.viewStats.focusModeEnabled) && (
+						{(type === 'epub' || props.viewStats.readingModeEnabled) && (
 							<ReflowableAppearanceSection
 								params={props.viewStats.appearance}
 								enablePageWidth={type === 'snapshot'
diff --git a/src/common/components/reader-ui.js b/src/common/components/reader-ui.js
index a7d4d45ac..dcc26e332 100644
--- a/src/common/components/reader-ui.js
+++ b/src/common/components/reader-ui.js
@@ -132,6 +132,7 @@ const ReaderUI = React.forwardRef((props, ref) => {
 						enableNavigateBack={viewStats.canNavigateBack}
 						enableNavigateToPreviousPage={viewStats.canNavigateToPreviousPage}
 						enableNavigateToNextPage={viewStats.canNavigateToNextPage}
+						readingModeEnabled={viewStats.readingModeEnabled}
 						appearancePopup={state.appearancePopup}
 						findPopupOpen={findState.popupOpen}
 						themes={state.themes}
@@ -234,7 +235,7 @@ const ReaderUI = React.forwardRef((props, ref) => {
 						onChangeSpreadMode={props.onChangeSpreadMode}
 						onChangeFlowMode={props.onChangeFlowMode}
 						onChangeAppearance={props.onChangeAppearance}
-						onChangeFocusModeEnabled={props.onChangeFocusModeEnabled}
+						onChangeReadingModeEnabled={props.onChangeReadingModeEnabled}
 						onAddTheme={props.onAddTheme}
 						onChangeTheme={props.onChangeTheme}
 						onOpenThemeContextMenu={props.onOpenThemeContextMenu}
diff --git a/src/common/components/toolbar.js b/src/common/components/toolbar.js
index 723a1c24c..8dcb51e88 100644
--- a/src/common/components/toolbar.js
+++ b/src/common/components/toolbar.js
@@ -111,8 +111,8 @@ function Toolbar(props) {
 					className={cx('toolbar-button', { active: props.appearancePopup })}
 					title={l10n.getString('reader-appearance')}
 					tabIndex={-1}
-					onClick={props.onToggleAppearancePopup}
-				><IconFormatText/></button>
+					onClick={() => props.onToggleAppearancePopup()}
+				>{props.readingModeEnabled ? <IconFormatTextFocus/> : <IconFormatText/>}</button>
 				<div className="divider"/>
 				<button
 					id="navigateBack"
diff --git a/src/common/reader.js b/src/common/reader.js
index c90fdc2a5..2b9e6ea4a 100644
--- a/src/common/reader.js
+++ b/src/common/reader.js
@@ -359,7 +359,7 @@ class Reader {
 						onSetDataTransferAnnotations={this._handleSetDataTransferAnnotations.bind(this)}
 						onOpenLink={this._onOpenLink}
 						onChangeAppearance={this._handleAppearanceChange.bind(this)}
-						onChangeFocusModeEnabled={this._handleFocusModeEnabledChange.bind(this)}
+						onChangeReadingModeEnabled={this._handleReadingModeEnabledChange.bind(this)}
 						onChangeFindState={this._handleFindStateChange.bind(this)}
 						onFindNext={this.findNext.bind(this)}
 						onFindPrevious={this.findPrevious.bind(this)}
@@ -747,15 +747,15 @@ class Reader {
 		this._secondaryView?.setAppearance(params);
 	}
 
-	_handleFocusModeEnabledChange(enabled) {
+	_handleReadingModeEnabledChange(enabled) {
 		this._ensureType('snapshot');
 		try {
-			this._primaryView?.setFocusModeEnabled(enabled);
-			this._secondaryView?.setFocusModeEnabled(enabled);
+			this._primaryView?.setReadingModeEnabled(enabled);
+			this._secondaryView?.setReadingModeEnabled(enabled);
 		}
 		catch (e) {
 			console.error(e);
-			this.setErrorMessage(this._getString('reader-focus-mode-not-supported'));
+			this.setErrorMessage(this._getString('reader-reading-mode-not-supported'));
 			setTimeout(() => {
 				this.setErrorMessage(null);
 			}, 5000);
diff --git a/src/common/types.ts b/src/common/types.ts
index 4f21e9a5f..ac01df21c 100644
--- a/src/common/types.ts
+++ b/src/common/types.ts
@@ -113,7 +113,7 @@ export type ViewStats = {
 	appearance?: Partial<ReflowableAppearance>;
 	fontFamily?: string;
 	outlinePath?: number[];
-	focusModeEnabled?: boolean;
+	readingModeEnabled?: boolean;
 };
 
 export type AnnotationPopupParams<A extends Annotation = Annotation> = {
@@ -147,11 +147,7 @@ type ImagePopupParams = {
 	rect: ArrayRect;
 }
 
-type HiddenInFocusModeParams = {
-	type: 'hiddenInFocusMode';
-}
-
-export type OverlayPopupParams = FootnotePopupParams | LinkPopupParams | ImagePopupParams | HiddenInFocusModeParams;
+export type OverlayPopupParams = FootnotePopupParams | LinkPopupParams | ImagePopupParams;
 
 export type ArrayRect = [left: number, top: number, right: number, bottom: number];
 
diff --git a/src/dom/snapshot/focus-mode/index.ts b/src/dom/snapshot/reading-mode/index.ts
similarity index 94%
rename from src/dom/snapshot/focus-mode/index.ts
rename to src/dom/snapshot/reading-mode/index.ts
index 0b1908189..e6d9dd4b5 100644
--- a/src/dom/snapshot/focus-mode/index.ts
+++ b/src/dom/snapshot/reading-mode/index.ts
@@ -1,10 +1,10 @@
-import focusSCSS from '../stylesheets/focus.scss';
+import readingModeSCSS from '../stylesheets/reading-mode.scss';
 import { Readability } from "@abejellinek/readability-keep-nodes";
 import { iterateWalker } from "../../common/lib/nodes";
 import { enumerate } from "../../common/lib/collection";
 import { NodeMapping } from "./node-mapping";
 
-export class FocusMode {
+export class ReadingMode {
 	private readonly _doc: Document;
 
 	private readonly _mapping = new NodeMapping();
@@ -13,15 +13,15 @@ export class FocusMode {
 
 	private readonly _originalStyleSheets = new Map<CSSStyleSheet, Element | ProcessingInstruction | null>;
 
-	private readonly _focusStyle: HTMLStyleElement;
+	private readonly _style: HTMLStyleElement;
 
 	private _enabled = false;
 
 	constructor(doc: Document) {
 		this._doc = doc;
 		this._fragment = doc.createDocumentFragment();
-		this._focusStyle = doc.createElement('style');
-		this._focusStyle.textContent = focusSCSS;
+		this._style = doc.createElement('style');
+		this._style.textContent = readingModeSCSS;
 
 		for (let styleSheet of [...this._doc.styleSheets, ...this._doc.adoptedStyleSheets]) {
 			if (styleSheet.disabled) {
@@ -153,7 +153,7 @@ export class FocusMode {
 			styleSheet.disabled = true;
 			ownerNode?.remove();
 		}
-		this._doc.head.append(this._focusStyle);
+		this._doc.head.append(this._style);
 	}
 
 	private _disable() {
@@ -168,7 +168,7 @@ export class FocusMode {
 				this._doc.head.append(ownerNode);
 			}
 		}
-		this._focusStyle.remove();
+		this._style.remove();
 		this._mapping.clear();
 		this._fragment.replaceChildren();
 	}
diff --git a/src/dom/snapshot/focus-mode/node-mapping.ts b/src/dom/snapshot/reading-mode/node-mapping.ts
similarity index 100%
rename from src/dom/snapshot/focus-mode/node-mapping.ts
rename to src/dom/snapshot/reading-mode/node-mapping.ts
diff --git a/src/dom/snapshot/snapshot-view.ts b/src/dom/snapshot/snapshot-view.ts
index 31521f12e..e281fc554 100644
--- a/src/dom/snapshot/snapshot-view.ts
+++ b/src/dom/snapshot/snapshot-view.ts
@@ -36,14 +36,14 @@ import { isPageRectVisible } from "../common/lib/rect";
 import { debounceUntilScrollFinishes } from "../../common/lib/utilities";
 import { scrollIntoView } from "../common/lib/scroll-into-view";
 import { SORT_INDEX_LENGTH, SORT_INDEX_LENGTH_OLD } from "./defines";
-import { FocusMode } from "./focus-mode";
+import { ReadingMode } from "./reading-mode";
 
 class SnapshotView extends DOMView<SnapshotViewState, SnapshotViewData> {
 	protected _find: DefaultFindProcessor | null = null;
 
 	private _isDynamicThemeSupported = true;
 
-	protected _focusMode!: FocusMode;
+	protected _readingMode!: ReadingMode;
 
 	private get _searchContext() {
 		let searchContext = createSearchContext(getVisibleTextNodes(this._iframeDocument.body));
@@ -137,7 +137,7 @@ class SnapshotView extends DOMView<SnapshotViewState, SnapshotViewData> {
 			}
 		}
 
-		this._focusMode = new FocusMode(this._iframeDocument);
+		this._readingMode = new ReadingMode(this._iframeDocument);
 
 		this._iframeDocument.addEventListener('visibilitychange', this._handleVisibilityChange.bind(this));
 
@@ -292,10 +292,10 @@ class SnapshotView extends DOMView<SnapshotViewState, SnapshotViewData> {
 		};
 
 		let count: number;
-		if (this._focusMode.enabled) {
-			let newRange = this._focusMode.mapRangeFromFocus(range);
+		if (this._readingMode.enabled) {
+			let newRange = this._readingMode.mapRangeFromFocus(range);
 			if (newRange) {
-				count = getCount(this._focusMode.originalRoot, newRange.startContainer, newRange.startOffset);
+				count = getCount(this._readingMode.originalRoot, newRange.startContainer, newRange.startOffset);
 			}
 			else {
 				count = 0;
@@ -312,8 +312,8 @@ class SnapshotView extends DOMView<SnapshotViewState, SnapshotViewData> {
 	}
 
 	toSelector(range: Range): Selector | null {
-		if (this._focusMode.enabled) {
-			let newRange = this._focusMode.mapRangeFromFocus(range);
+		if (this._readingMode.enabled) {
+			let newRange = this._readingMode.mapRangeFromFocus(range);
 			if (!newRange) {
 				return null;
 			}
@@ -362,10 +362,10 @@ class SnapshotView extends DOMView<SnapshotViewState, SnapshotViewData> {
 				if (selector.refinedBy && selector.refinedBy.type != 'TextPositionSelector') {
 					throw new Error('CssSelectors can only be refined by TextPositionSelectors');
 				}
-				let root = (this._focusMode.enabled ? this._focusMode.originalRoot : this._iframeDocument)
+				let root = (this._readingMode.enabled ? this._readingMode.originalRoot : this._iframeDocument)
 					.querySelector(selector.value);
 				if (!root) {
-					console.error(`Unable to locate selector root for selector '${selector.value}' (focus mode: ${this._focusMode.enabled})`);
+					console.error(`Unable to locate selector root for selector '${selector.value}' (reading mode: ${this._readingMode.enabled})`);
 					return null;
 				}
 				let range;
@@ -376,8 +376,8 @@ class SnapshotView extends DOMView<SnapshotViewState, SnapshotViewData> {
 					range = this._iframeDocument.createRange();
 					range.selectNodeContents(root);
 				}
-				if (this._focusMode.enabled) {
-					let newRange = this._focusMode.mapRangeToFocus(range);
+				if (this._readingMode.enabled) {
+					let newRange = this._readingMode.mapRangeToFocus(range);
 					if (!newRange) {
 						return null;
 					}
@@ -411,8 +411,8 @@ class SnapshotView extends DOMView<SnapshotViewState, SnapshotViewData> {
 	protected _navigateToSelector(selector: Selector, options: NavigateOptions = {}) {
 		let range = this.toDisplayedRange(selector);
 		if (!range) {
-			// Suppress log when failure is likely just due to focus mode
-			if (!this._focusMode.enabled) {
+			// Suppress log when failure is likely just due to reading mode
+			if (!this._readingMode.enabled) {
 				console.warn('Unable to resolve selector to range', selector);
 			}
 			return;
@@ -463,14 +463,14 @@ class SnapshotView extends DOMView<SnapshotViewState, SnapshotViewData> {
 			canNavigateBack: this._history.canNavigateBack,
 			canNavigateForward: this._history.canNavigateForward,
 			appearance: this.appearance,
-			focusModeEnabled: this._focusMode.enabled,
+			readingModeEnabled: this._readingMode.enabled,
 		};
 		this._options.onChangeViewStats(viewStats);
 	}
 
 	protected override _updateColorScheme() {
 		super._updateColorScheme();
-		if (this._isDynamicThemeSupported || this._focusMode.enabled) {
+		if (this._isDynamicThemeSupported || this._readingMode.enabled) {
 			// Pages with a reasonable amount of CSS: Use Dark Reader
 			this._iframeDocument.body.classList.remove('force-static-theme');
 			if (!('DarkReader' in this._iframeWindow)) {
@@ -673,8 +673,8 @@ class SnapshotView extends DOMView<SnapshotViewState, SnapshotViewData> {
 		// Ignore
 	}
 
-	setFocusModeEnabled(enabled: boolean) {
-		this._focusMode.enabled = enabled;
+	setReadingModeEnabled(enabled: boolean) {
+		this._readingMode.enabled = enabled;
 		// Hide inaccessible annotations
 		if (enabled) {
 			this._options.onSetHiddenAnnotations(
diff --git a/src/dom/snapshot/stylesheets/focus.scss b/src/dom/snapshot/stylesheets/reading-mode.scss
similarity index 100%
rename from src/dom/snapshot/stylesheets/focus.scss
rename to src/dom/snapshot/stylesheets/reading-mode.scss

From ee2a2ba6ff7580dc1c11a06dff7ea880fce9fc70 Mon Sep 17 00:00:00 2001
From: Abe Jellinek <jellinek@berkeley.edu>
Date: Fri, 20 Jun 2025 11:57:45 -0400
Subject: [PATCH 2/2] Move Reading Mode toggle to toolbar

---
 res/icons/20/reading-mode-enabled.svg         |  3 ++
 res/icons/20/reading-mode.svg                 |  6 ++++
 .../modal-popup/appearance-popup.js           | 35 +++++--------------
 src/common/components/reader-ui.js            |  2 +-
 src/common/components/toolbar.js              | 13 ++++++-
 src/common/reader.js                          |  7 ++--
 .../stylesheets/components/_modal-popup.scss  |  5 ---
 7 files changed, 36 insertions(+), 35 deletions(-)
 create mode 100644 res/icons/20/reading-mode-enabled.svg
 create mode 100644 res/icons/20/reading-mode.svg

diff --git a/res/icons/20/reading-mode-enabled.svg b/res/icons/20/reading-mode-enabled.svg
new file mode 100644
index 000000000..420964b10
--- /dev/null
+++ b/res/icons/20/reading-mode-enabled.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17 17.75C17 18.4404 16.4404 19 15.75 19L4.25 19C3.55964 19 3 18.4404 3 17.75L3 2.25C3 1.55964 3.55964 1 4.25 1L15.75 1C16.4404 1 17 1.55964 17 2.25L17 17.75ZM6 10V11.25L11 11.25V10H6ZM6 8.25V7L14 7V8.25L6 8.25ZM6 4L6 5.25L14 5.25V4L6 4Z" fill="currentColor"/>
+</svg>
diff --git a/res/icons/20/reading-mode.svg b/res/icons/20/reading-mode.svg
new file mode 100644
index 000000000..1a4c6969c
--- /dev/null
+++ b/res/icons/20/reading-mode.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 7V8.25L14 8.25V7L6 7Z" fill="currentColor"/>
+<path d="M6 11.25V10H11V11.25L6 11.25Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 17.75C3 18.4404 3.55964 19 4.25 19L15.75 19C16.4404 19 17 18.4404 17 17.75L17 2.25C17 1.55964 16.4404 1 15.75 1L4.25 1C3.55964 1 3 1.55964 3 2.25L3 17.75ZM15.75 2.25L15.75 17.75L4.25 17.75L4.25 2.25L15.75 2.25Z" fill="currentColor"/>
+<path d="M6 5.25L6 4L14 4V5.25L6 5.25Z" fill="currentColor"/>
+</svg>
diff --git a/src/common/components/modal-popup/appearance-popup.js b/src/common/components/modal-popup/appearance-popup.js
index 884793556..bd272181b 100644
--- a/src/common/components/modal-popup/appearance-popup.js
+++ b/src/common/components/modal-popup/appearance-popup.js
@@ -26,7 +26,7 @@ import { ReaderContext } from '../../reader';
 import { DEFAULT_THEMES } from '../../defines';
 import TickedRangeInput from "../common/ticked-range-input";
 
-function ReflowableAppearanceSection({ params, enablePageWidth, onChange, indent }) {
+function ReflowableAppearanceSection({ params, enablePageWidth, onChange }) {
 	const { l10n } = useLocalization();
 
 	const { type } = useContext(ReaderContext);
@@ -52,7 +52,7 @@ function ReflowableAppearanceSection({ params, enablePageWidth, onChange, indent
 	}
 
 	return (
-		<div className={cx('reflowable-appearance', { indent })}>
+		<div className="reflowable-appearance">
 			<div className="row">
 				<label htmlFor="line-height">{l10n.getString('reader-epub-appearance-line-height')}</label>
 				<TickedRangeInput
@@ -375,31 +375,14 @@ function AppearancePopup(props) {
 						</div>
 					</div>
 				</div>
-				{(type === 'epub' || type === 'snapshot') && (
+				{(type === 'epub' || type === 'snapshot' && props.viewStats.readingModeEnabled) && (
 					<div className="group">
-						{type === 'snapshot' && (
-							<div className="option">
-								<label htmlFor="reading-mode-enabled">{l10n.getString('reader-reading-mode')}</label>
-								<input
-									data-tabstop={1}
-									tabIndex={-1}
-									className="switch"
-									type="checkbox"
-									id="reading-mode-enabled"
-									checked={props.viewStats.readingModeEnabled}
-									onChange={e => props.onChangeReadingModeEnabled(e.target.checked)}
-								/>
-							</div>
-						)}
-						{(type === 'epub' || props.viewStats.readingModeEnabled) && (
-							<ReflowableAppearanceSection
-								params={props.viewStats.appearance}
-								enablePageWidth={type === 'snapshot'
-									|| props.viewStats.flowMode !== 'paginated' || props.viewStats.spreadMode === 0}
-								onChange={props.onChangeAppearance}
-								indent={type === 'snapshot'}
-							/>
-						)}
+						<ReflowableAppearanceSection
+							params={props.viewStats.appearance}
+							enablePageWidth={type === 'snapshot'
+								|| props.viewStats.flowMode !== 'paginated' || props.viewStats.spreadMode === 0}
+							onChange={props.onChangeAppearance}
+						/>
 					</div>
 				)}
 				<div className="group">
diff --git a/src/common/components/reader-ui.js b/src/common/components/reader-ui.js
index dcc26e332..caaf1e666 100644
--- a/src/common/components/reader-ui.js
+++ b/src/common/components/reader-ui.js
@@ -151,6 +151,7 @@ const ReaderUI = React.forwardRef((props, ref) => {
 						onChangePageNumber={props.onChangePageNumber}
 						onChangeTool={props.onChangeTool}
 						onOpenColorContextMenu={props.onOpenColorContextMenu}
+						onToggleReadingMode={props.onToggleReadingMode}
 						onToggleAppearancePopup={props.onToggleAppearancePopup}
 						onToggleFind={props.onToggleFind}
 						onToggleContextPane={props.onToggleContextPane}
@@ -235,7 +236,6 @@ const ReaderUI = React.forwardRef((props, ref) => {
 						onChangeSpreadMode={props.onChangeSpreadMode}
 						onChangeFlowMode={props.onChangeFlowMode}
 						onChangeAppearance={props.onChangeAppearance}
-						onChangeReadingModeEnabled={props.onChangeReadingModeEnabled}
 						onAddTheme={props.onAddTheme}
 						onChangeTheme={props.onChangeTheme}
 						onOpenThemeContextMenu={props.onOpenThemeContextMenu}
diff --git a/src/common/components/toolbar.js b/src/common/components/toolbar.js
index 8dcb51e88..f4987b1bc 100644
--- a/src/common/components/toolbar.js
+++ b/src/common/components/toolbar.js
@@ -13,6 +13,8 @@ import IconAutoWidth from '../../../res/icons/20/auto-width.svg';
 import IconChevronLeft from '../../../res/icons/20/chevron-left.svg';
 import IconChevronUp from '../../../res/icons/20/chevron-up.svg';
 import IconChevronDown from '../../../res/icons/20/chevron-down.svg';
+import IconReadingModeEnabled from '../../../res/icons/20/reading-mode-enabled.svg';
+import IconReadingMode from '../../../res/icons/20/reading-mode.svg';
 import IconFormatText from '../../../res/icons/20/format-text.svg';
 import IconHighlight from '../../../res/icons/20/annotate-highlight.svg';
 import IconUnderline from '../../../res/icons/20/annotate-underline.svg';
@@ -106,13 +108,22 @@ function Toolbar(props) {
 					disabled={!props.enableZoomReset}
 					onClick={props.onZoomReset}
 				><IconAutoWidth/></button>
+				{props.type === 'snapshot' && (
+					<button
+						id="reading-mode"
+						className={cx('toolbar-button', { active: props.readingModeEnabled })}
+						title={l10n.getString('reader-reading-mode')}
+						tabIndex={-1}
+						onClick={() => props.onToggleReadingMode()}
+					>{props.readingModeEnabled ? <IconReadingModeEnabled/> : <IconReadingMode/>}</button>
+				)}
 				<button
 					id="appearance"
 					className={cx('toolbar-button', { active: props.appearancePopup })}
 					title={l10n.getString('reader-appearance')}
 					tabIndex={-1}
 					onClick={() => props.onToggleAppearancePopup()}
-				>{props.readingModeEnabled ? <IconFormatTextFocus/> : <IconFormatText/>}</button>
+				><IconFormatText/></button>
 				<div className="divider"/>
 				<button
 					id="navigateBack"
diff --git a/src/common/reader.js b/src/common/reader.js
index 2b9e6ea4a..54dd97c88 100644
--- a/src/common/reader.js
+++ b/src/common/reader.js
@@ -358,8 +358,8 @@ class Reader {
 						onRenderThumbnails={(pageIndexes) => this._primaryView._pdfThumbnails.render(pageIndexes)}
 						onSetDataTransferAnnotations={this._handleSetDataTransferAnnotations.bind(this)}
 						onOpenLink={this._onOpenLink}
+						onToggleReadingMode={this._onToggleReadingMode.bind(this)}
 						onChangeAppearance={this._handleAppearanceChange.bind(this)}
-						onChangeReadingModeEnabled={this._handleReadingModeEnabledChange.bind(this)}
 						onChangeFindState={this._handleFindStateChange.bind(this)}
 						onFindNext={this.findNext.bind(this)}
 						onFindPrevious={this.findPrevious.bind(this)}
@@ -747,8 +747,11 @@ class Reader {
 		this._secondaryView?.setAppearance(params);
 	}
 
-	_handleReadingModeEnabledChange(enabled) {
+	_onToggleReadingMode(enabled) {
 		this._ensureType('snapshot');
+		if (enabled === undefined) {
+			enabled = !this._state.primaryViewStats.readingModeEnabled;
+		}
 		try {
 			this._primaryView?.setReadingModeEnabled(enabled);
 			this._secondaryView?.setReadingModeEnabled(enabled);
diff --git a/src/common/stylesheets/components/_modal-popup.scss b/src/common/stylesheets/components/_modal-popup.scss
index e1ed76709..2a16970eb 100644
--- a/src/common/stylesheets/components/_modal-popup.scss
+++ b/src/common/stylesheets/components/_modal-popup.scss
@@ -394,11 +394,6 @@
 		flex-direction: column;
 		gap: 12px;
 
-		&.indent {
-			margin-top: 5px;
-			margin-inline-start: 10px;
-		}
-
 		.row {
 			display: grid;
 			grid-template-columns: 1fr minmax(3.2em, max-content) max-content;