Add translations

changedetectionio/blueprint/ui/__init__.py

@@ -1,6 +1,6 @@
 import time
 import threading
-from flask import Blueprint, request, redirect, url_for, flash, render_template, session
+from flask import Blueprint, request, redirect, url_for, flash, render_template, session, current_app
 from flask_babel import gettext
 from loguru import logger
 
@@ -404,4 +404,25 @@ def construct_blueprint(datastore: ChangeDetectionStore, update_q, worker_handle
 
         return redirect(url_for('watchlist.index'))
 
+    @ui_blueprint.route("/language/auto-detect", methods=['GET'])
+    def delete_locale_language_session_var_if_it_exists():
+        """Clear the session locale preference to auto-detect from browser Accept-Language header"""
+        if 'locale' in session:
+            session.pop('locale', None)
+            # Refresh Flask-Babel to clear cached locale
+            from flask_babel import refresh
+            refresh()
+            flash(gettext("Language set to auto-detect from browser"))
+
+        # Check if there's a redirect parameter to return to the same page
+        redirect_url = request.args.get('redirect')
+
+        # If redirect is provided and safe, use it
+        from changedetectionio.is_safe_url import is_safe_url
+        if redirect_url and is_safe_url(redirect_url, current_app):
+            return redirect(redirect_url)
+
+        # Otherwise redirect to watchlist
+        return redirect(url_for('watchlist.index'))
+
     return ui_blueprint

changedetectionio/content_fetchers/base.py

@@ -71,19 +71,10 @@ class Fetcher():
     supports_screenshots = False        # Can capture page screenshots
     supports_xpath_element_data = False # Can extract xpath element positions/data for visual selector
 
-    # Screenshot element locking - prevents layout shifts during screenshot capture
-    # Only needed for visual comparison (image_ssim_diff processor)
-    # Locks element dimensions in the first viewport to prevent headers/ads from resizing
-    lock_viewport_elements = False      # Default: disabled for performance
-
     def __init__(self, **kwargs):
         if kwargs and 'screenshot_format' in kwargs:
             self.screenshot_format = kwargs.get('screenshot_format')
 
-        # Allow lock_viewport_elements to be set via kwargs
-        if kwargs and 'lock_viewport_elements' in kwargs:
-            self.lock_viewport_elements = kwargs.get('lock_viewport_elements')
-
 
     @classmethod
     def get_status_icon_data(cls):

changedetectionio/content_fetchers/playwright.py

@@ -10,21 +10,18 @@ from changedetectionio.content_fetchers import SCREENSHOT_MAX_HEIGHT_DEFAULT, vi
 from changedetectionio.content_fetchers.base import Fetcher, manage_user_agent
 from changedetectionio.content_fetchers.exceptions import PageUnloadable, Non200ErrorCodeReceived, EmptyReply, ScreenshotUnavailable
 
-async def capture_full_page_async(page, screenshot_format='JPEG', watch_uuid=None, lock_viewport_elements=False):
+async def capture_full_page_async(page, screenshot_format='JPEG'):
     import os
     import time
     import multiprocessing
 
     start = time.time()
-    watch_info = f"[{watch_uuid}] " if watch_uuid else ""
 
-    setup_start = time.time()
     page_height = await page.evaluate("document.documentElement.scrollHeight")
     page_width = await page.evaluate("document.documentElement.scrollWidth")
     original_viewport = page.viewport_size
-    dimensions_time = time.time() - setup_start
 
-    logger.debug(f"{watch_info}Playwright viewport size {page.viewport_size} page height {page_height} page width {page_width} (got dimensions in {dimensions_time:.2f}s)")
+    logger.debug(f"Playwright viewport size {page.viewport_size} page height {page_height} page width {page_width}")
 
     # Use an approach similar to puppeteer: set a larger viewport and take screenshots in chunks
     step_size = SCREENSHOT_SIZE_STITCH_THRESHOLD # Size that won't cause GPU to overflow
@@ -32,31 +29,25 @@ async def capture_full_page_async(page, screenshot_format='JPEG', watch_uuid=Non
     y = 0
     elements_locked = False
 
-    # Only lock viewport elements if explicitly enabled (for image_ssim_diff processor)
-    # This prevents headers/ads from resizing when viewport changes
-    if lock_viewport_elements and page_height > page.viewport_size['height']:
-        lock_start = time.time()
+    if page_height > page.viewport_size['height']:
+
+        # Lock all element dimensions BEFORE screenshot to prevent CSS media queries from resizing
+        # capture_full_page_async() changes viewport height which triggers @media (min-height) rules
         lock_elements_js_path = os.path.join(os.path.dirname(__file__), 'res', 'lock-elements-sizing.js')
         with open(lock_elements_js_path, 'r') as f:
             lock_elements_js = f.read()
         await page.evaluate(lock_elements_js)
         elements_locked = True
-        lock_time = time.time() - lock_start
-        logger.debug(f"{watch_info}Viewport element locking enabled (took {lock_time:.2f}s)")
 
-    if page_height > page.viewport_size['height']:
+        logger.debug("Element dimensions locked before screenshot capture")
+
         if page_height < step_size:
             step_size = page_height # Incase page is bigger than default viewport but smaller than proposed step size
-        viewport_start = time.time()
-        logger.debug(f"{watch_info}Setting bigger viewport to step through large page width W{page.viewport_size['width']}xH{step_size} because page_height > viewport_size")
+        logger.debug(f"Setting bigger viewport to step through large page width W{page.viewport_size['width']}xH{step_size} because page_height > viewport_size")
         # Set viewport to a larger size to capture more content at once
         await page.set_viewport_size({'width': page.viewport_size['width'], 'height': step_size})
-        viewport_time = time.time() - viewport_start
-        logger.debug(f"{watch_info}Viewport changed to {page.viewport_size['width']}x{step_size} (took {viewport_time:.2f}s)")
 
     # Capture screenshots in chunks up to the max total height
-    capture_start = time.time()
-    chunk_times = []
     # Use PNG for better quality (no compression artifacts), JPEG for smaller size
     screenshot_type = screenshot_format.lower() if screenshot_format else 'jpeg'
     # PNG should use quality 100, JPEG uses configurable quality
@@ -78,11 +69,7 @@ async def capture_full_page_async(page, screenshot_format='JPEG', watch_uuid=Non
         if screenshot_type == 'jpeg':
             screenshot_kwargs['quality'] = screenshot_quality
 
-        chunk_start = time.time()
         screenshot_chunks.append(await page.screenshot(**screenshot_kwargs))
-        chunk_time = time.time() - chunk_start
-        chunk_times.append(chunk_time)
-        logger.debug(f"{watch_info}Chunk {len(screenshot_chunks)} captured in {chunk_time:.2f}s")
         y += step_size
 
     # Restore original viewport size
@@ -94,16 +81,11 @@ async def capture_full_page_async(page, screenshot_format='JPEG', watch_uuid=Non
         with open(unlock_elements_js_path, 'r') as f:
             unlock_elements_js = f.read()
         await page.evaluate(unlock_elements_js)
-        logger.debug(f"{watch_info}Element dimensions unlocked after screenshot capture")
-
-    capture_time = time.time() - capture_start
-    total_capture_time = sum(chunk_times)
-    logger.debug(f"{watch_info}All {len(screenshot_chunks)} chunks captured in {capture_time:.2f}s (total chunk time: {total_capture_time:.2f}s)")
+        logger.debug("Element dimensions unlocked after screenshot capture")
 
     # If we have multiple chunks, stitch them together
     if len(screenshot_chunks) > 1:
-        stitch_start = time.time()
-        logger.debug(f"{watch_info}Starting stitching of {len(screenshot_chunks)} chunks")
+        logger.debug(f"Screenshot stitching {len(screenshot_chunks)} chunks together")
 
         # For small number of chunks (2-3), stitch inline to avoid multiprocessing overhead
         # Only use separate process for many chunks (4+) to avoid blocking the event loop
@@ -124,22 +106,15 @@ async def capture_full_page_async(page, screenshot_format='JPEG', watch_uuid=Non
             del p
             del parent_conn, child_conn
 
-        stitch_time = time.time() - stitch_start
-        total_time = time.time() - start
-        setup_time = total_time - capture_time - stitch_time
         logger.debug(
-            f"{watch_info}Screenshot complete - Page height: {page_height}px, Capture height: {SCREENSHOT_MAX_TOTAL_HEIGHT}px | "
-            f"Setup: {setup_time:.2f}s, Capture: {capture_time:.2f}s, Stitching: {stitch_time:.2f}s, Total: {total_time:.2f}s")
+            f"Screenshot (chunked/stitched) - Page height: {page_height} Capture height: {SCREENSHOT_MAX_TOTAL_HEIGHT} - Stitched together in {time.time() - start:.2f}s")
         # Explicit cleanup
         del screenshot_chunks
         screenshot_chunks = None
         return screenshot
 
-    total_time = time.time() - start
-    setup_time = total_time - capture_time
     logger.debug(
-        f"{watch_info}Screenshot complete - Page height: {page_height}px, Capture height: {SCREENSHOT_MAX_TOTAL_HEIGHT}px | "
-        f"Setup: {setup_time:.2f}s, Single chunk: {capture_time:.2f}s, Total: {total_time:.2f}s")
+        f"Screenshot Page height: {page_height} Capture height: {SCREENSHOT_MAX_TOTAL_HEIGHT} - Stitched together in {time.time() - start:.2f}s")
 
     return screenshot_chunks[0]
 
@@ -209,8 +184,7 @@ class fetcher(Fetcher):
 
     async def screenshot_step(self, step_n=''):
         super().screenshot_step(step_n=step_n)
-        watch_uuid = getattr(self, 'watch_uuid', None)
-        screenshot = await capture_full_page_async(page=self.page, screenshot_format=self.screenshot_format, watch_uuid=watch_uuid, lock_viewport_elements=self.lock_viewport_elements)
+        screenshot = await capture_full_page_async(page=self.page, screenshot_format=self.screenshot_format)
 
         # Request GC immediately after screenshot to free memory
         # Screenshots can be large and browser steps take many of them
@@ -259,7 +233,6 @@ class fetcher(Fetcher):
         import playwright._impl._errors
         import time
         self.delete_browser_steps_screenshots()
-        self.watch_uuid = watch_uuid  # Store for use in screenshot_step
         response = None
 
         async with async_playwright() as p:
@@ -345,7 +318,7 @@ class fetcher(Fetcher):
                     logger.error(f"Error fetching FavIcon info {str(e)}, continuing.")
 
             if self.status_code != 200 and not ignore_status_codes:
-                screenshot = await capture_full_page_async(self.page, screenshot_format=self.screenshot_format, watch_uuid=watch_uuid, lock_viewport_elements=self.lock_viewport_elements)
+                screenshot = await capture_full_page_async(self.page, screenshot_format=self.screenshot_format)
                 # Cleanup before raising to prevent memory leak
                 await self.page.close()
                 await context.close()
@@ -401,7 +374,7 @@ class fetcher(Fetcher):
                 # which will significantly increase the IO size between the server and client, it's recommended to use the lowest
                 # acceptable screenshot quality here
                 # The actual screenshot - this always base64 and needs decoding! horrible! huge CPU usage
-                self.screenshot = await capture_full_page_async(page=self.page, screenshot_format=self.screenshot_format, watch_uuid=watch_uuid, lock_viewport_elements=self.lock_viewport_elements)
+                self.screenshot = await capture_full_page_async(page=self.page, screenshot_format=self.screenshot_format)
 
             except ScreenshotUnavailable:
                 # Re-raise screenshot unavailable exceptions

changedetectionio/content_fetchers/puppeteer.py

@@ -20,21 +20,18 @@ from changedetectionio.content_fetchers.exceptions import PageUnloadable, Non200
 # Screenshots also travel via the ws:// (websocket) meaning that the binary data is base64 encoded
 # which will significantly increase the IO size between the server and client, it's recommended to use the lowest
 # acceptable screenshot quality here
-async def capture_full_page(page, screenshot_format='JPEG', watch_uuid=None, lock_viewport_elements=False):
+async def capture_full_page(page, screenshot_format='JPEG'):
     import os
     import time
     import multiprocessing
 
     start = time.time()
-    watch_info = f"[{watch_uuid}] " if watch_uuid else ""
 
-    setup_start = time.time()
     page_height = await page.evaluate("document.documentElement.scrollHeight")
     page_width = await page.evaluate("document.documentElement.scrollWidth")
     original_viewport = page.viewport
-    dimensions_time = time.time() - setup_start
 
-    logger.debug(f"{watch_info}Puppeteer viewport size {page.viewport} page height {page_height} page width {page_width} (got dimensions in {dimensions_time:.2f}s)")
+    logger.debug(f"Puppeteer viewport size {page.viewport} page height {page_height} page width {page_width}")
 
     # Bug 3 in Playwright screenshot handling
     # Some bug where it gives the wrong screenshot size, but making a request with the clip set first seems to solve it
@@ -53,35 +50,20 @@ async def capture_full_page(page, screenshot_format='JPEG', watch_uuid=None, loc
     screenshot_chunks = []
     y = 0
     elements_locked = False
-
-    # Only lock viewport elements if explicitly enabled (for image_ssim_diff processor)
-    # This prevents headers/ads from resizing when viewport changes
-    if lock_viewport_elements and page_height > page.viewport['height']:
-        lock_start = time.time()
+    if page_height > page.viewport['height']:
+        # Lock all element dimensions BEFORE screenshot to prevent CSS media queries from resizing
+        # capture_full_page() changes viewport height which triggers @media (min-height) rules
         lock_elements_js_path = os.path.join(os.path.dirname(__file__), 'res', 'lock-elements-sizing.js')
-        file_read_start = time.time()
         with open(lock_elements_js_path, 'r') as f:
             lock_elements_js = f.read()
-        file_read_time = time.time() - file_read_start
-
-        evaluate_start = time.time()
         await page.evaluate(lock_elements_js)
-        evaluate_time = time.time() - evaluate_start
-
         elements_locked = True
-        lock_time = time.time() - lock_start
-        logger.debug(f"{watch_info}Viewport element locking enabled - File read: {file_read_time:.3f}s, Browser evaluate: {evaluate_time:.2f}s, Total: {lock_time:.2f}s")
+        logger.debug("Element dimensions locked before screenshot capture")
 
-    if page_height > page.viewport['height']:
         if page_height < step_size:
             step_size = page_height # Incase page is bigger than default viewport but smaller than proposed step size
-        viewport_start = time.time()
         await page.setViewport({'width': page.viewport['width'], 'height': step_size})
-        viewport_time = time.time() - viewport_start
-        logger.debug(f"{watch_info}Viewport changed to {page.viewport['width']}x{step_size} (took {viewport_time:.2f}s)")
 
-    capture_start = time.time()
-    chunk_times = []
     while y < min(page_height, SCREENSHOT_MAX_TOTAL_HEIGHT):
         # better than scrollTo incase they override it in the page
         await page.evaluate(
@@ -100,11 +82,7 @@ async def capture_full_page(page, screenshot_format='JPEG', watch_uuid=None, loc
         if screenshot_type == 'jpeg':
             screenshot_kwargs['quality'] = screenshot_quality
 
-        chunk_start = time.time()
         screenshot_chunks.append(await page.screenshot(**screenshot_kwargs))
-        chunk_time = time.time() - chunk_start
-        chunk_times.append(chunk_time)
-        logger.debug(f"{watch_info}Chunk {len(screenshot_chunks)} captured in {chunk_time:.2f}s")
         y += step_size
 
     await page.setViewport({'width': original_viewport['width'], 'height': original_viewport['height']})
@@ -115,38 +93,26 @@ async def capture_full_page(page, screenshot_format='JPEG', watch_uuid=None, loc
         with open(unlock_elements_js_path, 'r') as f:
             unlock_elements_js = f.read()
         await page.evaluate(unlock_elements_js)
-        logger.debug(f"{watch_info}Element dimensions unlocked after screenshot capture")
-
-    capture_time = time.time() - capture_start
-    total_capture_time = sum(chunk_times)
-    logger.debug(f"{watch_info}All {len(screenshot_chunks)} chunks captured in {capture_time:.2f}s (total chunk time: {total_capture_time:.2f}s)")
+        logger.debug("Element dimensions unlocked after screenshot capture")
 
     if len(screenshot_chunks) > 1:
         # Always use spawn for thread safety - consistent behavior in tests and production
         from changedetectionio.content_fetchers.screenshot_handler import stitch_images_worker
-        stitch_start = time.time()
-        logger.debug(f"{watch_info}Starting stitching of {len(screenshot_chunks)} chunks")
+        logger.debug(f"Screenshot stitching {len(screenshot_chunks)} chunks together")
         ctx = multiprocessing.get_context('spawn')
         parent_conn, child_conn = ctx.Pipe()
         p = ctx.Process(target=stitch_images_worker, args=(child_conn, screenshot_chunks, page_height, SCREENSHOT_MAX_TOTAL_HEIGHT))
         p.start()
         screenshot = parent_conn.recv_bytes()
         p.join()
-        stitch_time = time.time() - stitch_start
-        total_time = time.time() - start
-        setup_time = total_time - capture_time - stitch_time
         logger.debug(
-            f"{watch_info}Screenshot complete - Page height: {page_height}px, Capture height: {SCREENSHOT_MAX_TOTAL_HEIGHT}px | "
-            f"Setup: {setup_time:.2f}s, Capture: {capture_time:.2f}s, Stitching: {stitch_time:.2f}s, Total: {total_time:.2f}s")
+            f"Screenshot (chunked/stitched) - Page height: {page_height} Capture height: {SCREENSHOT_MAX_TOTAL_HEIGHT} - Stitched together in {time.time() - start:.2f}s")
 
         screenshot_chunks = None
         return screenshot
 
-    total_time = time.time() - start
-    setup_time = total_time - capture_time
     logger.debug(
-        f"{watch_info}Screenshot complete - Page height: {page_height}px, Capture height: {SCREENSHOT_MAX_TOTAL_HEIGHT}px | "
-        f"Setup: {setup_time:.2f}s, Single chunk: {capture_time:.2f}s, Total: {total_time:.2f}s")
+        f"Screenshot Page height: {page_height} Capture height: {SCREENSHOT_MAX_TOTAL_HEIGHT} - Stitched together in {time.time() - start:.2f}s")
     return screenshot_chunks[0]
 
 
@@ -391,7 +357,7 @@ class fetcher(Fetcher):
                 logger.error(f"Error fetching FavIcon info {str(e)}, continuing.")
 
         if self.status_code != 200 and not ignore_status_codes:
-            screenshot = await capture_full_page(page=self.page, screenshot_format=self.screenshot_format, watch_uuid=watch_uuid, lock_viewport_elements=self.lock_viewport_elements)
+            screenshot = await capture_full_page(page=self.page, screenshot_format=self.screenshot_format)
 
             raise Non200ErrorCodeReceived(url=url, status_code=self.status_code, screenshot=screenshot)
 
@@ -421,7 +387,7 @@ class fetcher(Fetcher):
 
         # Now take screenshot (scrolling may trigger layout changes, but measurements are already captured)
         logger.debug(f"Screenshot format {self.screenshot_format}")
-        self.screenshot = await capture_full_page(page=self.page, screenshot_format=self.screenshot_format, watch_uuid=watch_uuid, lock_viewport_elements=self.lock_viewport_elements)
+        self.screenshot = await capture_full_page(page=self.page, screenshot_format=self.screenshot_format)
         self.xpath_data = await self.page.evaluate(XPATH_ELEMENT_JS, {
             "visualselector_xpath_selectors": visualselector_xpath_selectors,
             "max_height": MAX_TOTAL_HEIGHT

changedetectionio/content_fetchers/res/lock-elements-sizing.js

@@ -1,5 +1,5 @@
 /**
- * Lock Element Dimensions for Screenshot Capture (First Viewport Only)
+ * Lock Element Dimensions for Screenshot Capture
  *
  * THE PROBLEM:
  * When taking full-page screenshots of tall pages, Chrome/Puppeteer/Playwright need to:
@@ -10,31 +10,40 @@
  * However, changing the viewport height triggers CSS media queries like:
  *   @media (min-height: 860px) { .ad { height: 250px; } }
  *
- * This causes elements (especially ads/headers) to resize during screenshot capture.
+ * This causes elements (especially ads) to resize during screenshot capture, creating a mismatch:
+ * - Screenshot shows element at NEW size (after media query triggered)
+ * - xpath element coordinates measured at OLD size (before viewport change)
+ * - Visual selector overlays don't align with screenshot
+ *
+ * EXAMPLE BUG:
+ * - Initial viewport: 1280x800, ad height: 138px, article position: 279px ✓
+ * - Viewport changes to 1280x3809 for screenshot
+ * - Media query triggers: ad expands to 250px
+ * - All content below shifts down by 112px (250-138)
+ * - Article now at position: 391px (279+112)
+ * - But xpath data says 279px → 112px mismatch! ✗
  *
  * THE SOLUTION:
- * Lock element dimensions in the FIRST VIEWPORT ONLY with !important inline styles.
- * This prevents headers, navigation, and top ads from resizing when viewport changes.
- * We only lock the visible portion because:
- * - Most layout shifts happen in headers/navbars/top ads
- * - Locking only visible elements is 100x+ faster (100-200 elements vs 10,000+)
- * - Below-fold content shifts don't affect visual comparison accuracy
+ * Before changing viewport, lock ALL element dimensions with !important inline styles.
+ * Inline styles with !important override media query CSS, preventing layout changes.
  *
  * WHAT THIS SCRIPT DOES:
- * 1. Gets current viewport height
- * 2. Finds elements within first viewport (top of page to bottom of screen)
- * 3. Locks their dimensions with !important inline styles
+ * 1. Iterates through every element on the page
+ * 2. Captures current computed dimensions (width, height)
+ * 3. Sets inline styles with !important to freeze those dimensions
  * 4. Disables ResizeObserver API (for JS-based resizing)
+ * 5. When viewport changes for screenshot, media queries can't resize anything
+ * 6. Layout remains consistent → xpath coordinates match screenshot ✓
  *
  * USAGE:
  * Execute this script BEFORE calling capture_full_page() / screenshot functions.
- * Only enabled for image_ssim_diff processor (visual comparison).
- * Default: OFF for performance.
+ * The page must be fully loaded and settled at its initial viewport size.
+ * No need to restore state afterward - page is closed after screenshot.
  *
  * PERFORMANCE:
- * - Only processes 100-300 elements (first viewport) vs 10,000+ (entire page)
- * - Typically completes in 10-50ms
- * - 100x+ faster than locking entire page
+ * - Iterates all DOM elements (can be 1000s on complex pages)
+ * - Typically completes in 50-200ms
+ * - One-time cost before screenshot, well worth it for coordinate accuracy
  *
  * @see https://github.com/dgtlmoon/changedetection.io/issues/XXXX
  */
@@ -43,34 +52,11 @@
     // Store original styles in a global WeakMap for later restoration
     window.__elementSizingRestore = new WeakMap();
 
-    const start = performance.now();
-
-    // Get current viewport height (visible portion of page)
-    const viewportHeight = window.innerHeight;
-
-    // Get all elements and filter to FIRST VIEWPORT ONLY
-    // This dramatically reduces elements to process (100-300 vs 10,000+)
-    const allElements = Array.from(document.querySelectorAll('*'));
-
-    // BATCH READ PHASE: Get bounding rects and filter to viewport
-    const measurements = allElements.map(el => {
-        const rect = el.getBoundingClientRect();
+    // Lock ALL element dimensions to prevent media query layout changes
+    document.querySelectorAll('*').forEach(el => {
         const computed = window.getComputedStyle(el);
+        const rect = el.getBoundingClientRect();
 
-        // Only lock elements in the first viewport (visible on initial page load)
-        // rect.top < viewportHeight means element starts within visible area
-        const inViewport = rect.top < viewportHeight && rect.top >= 0;
-        const hasSize = rect.height > 0 && rect.width > 0;
-
-        return inViewport && hasSize ? { el, computed, rect } : null;
-    }).filter(Boolean);  // Remove null entries
-
-    const elapsed = performance.now() - start;
-    console.log(`Locked first viewport elements: ${measurements.length} of ${allElements.length} total elements (viewport height: ${viewportHeight}px, took ${elapsed.toFixed(0)}ms)`);
-
-    // BATCH WRITE PHASE: Apply all inline styles without triggering layout
-    // No interleaved reads means browser can optimize style application
-    measurements.forEach(({el, computed, rect}) => {
         // Save original inline style values BEFORE locking
         const properties = ['height', 'min-height', 'max-height', 'width', 'min-width', 'max-width'];
         const originalStyles = {};
@@ -103,5 +89,5 @@
         disconnect() {}
     };
 
-    console.log(`✓ Element dimensions locked (${measurements.length} elements) to prevent media query changes during screenshot`);
+    console.log('✓ Element dimensions locked to prevent media query changes during screenshot');
 })();

changedetectionio/flask_app.py

@@ -94,6 +94,14 @@ if os.getenv('FLASK_SERVER_NAME'):
 app.config['BABEL_TRANSLATION_DIRECTORIES'] = str(Path(__file__).parent / 'translations')
 app.config['BABEL_DEFAULT_LOCALE'] = 'en_GB'
 
+# Session configuration
+# NOTE: Flask session (for locale, etc.) is separate from Flask-Login's remember-me cookie
+# - Flask session stores data like session['locale'] in a signed cookie
+# - Flask-Login's remember=True creates a separate authentication cookie
+# - Setting PERMANENT_SESSION_LIFETIME controls how long the Flask session cookie lasts
+from datetime import timedelta
+app.config['PERMANENT_SESSION_LIFETIME'] = timedelta(days=3650)  # ~10 years (effectively unlimited)
+
 #app.config["EXPLAIN_TEMPLATE_LOADING"] = True
 
 
@@ -550,6 +558,9 @@ def changedetection_app(config=None, datastore_o=None):
 
         # Validate the locale against available languages
         if locale in language_codes:
+            # Make session permanent so language preference persists across browser sessions
+            # NOTE: This is the Flask session cookie (separate from Flask-Login's remember-me auth cookie)
+            session.permanent = True
             session['locale'] = locale
 
             # CRITICAL: Flask-Babel caches the locale in the request context (ctx.babel_locale)

changedetectionio/templates/base.html

@@ -265,6 +265,9 @@
           </a>
           {% endfor %}
         </div>
+        <div>
+            <a href="{{ url_for('ui.delete_locale_language_session_var_if_it_exists', redirect=request.path) }}" >{{ _('Auto-detect from browser') }}</a>
+        </div>
         <div>
             {{ _('Language support is in beta, please help us improve by opening a PR on GitHub with any updates.') }}
         </div>

changedetectionio/tests/test_i18n.py

@@ -160,7 +160,7 @@ def test_invalid_locale(client, live_server, measure_memory_usage, datastore_pat
 def test_language_persistence_in_session(client, live_server, measure_memory_usage, datastore_path):
     """
     Test that the language preference persists across multiple requests
-    within the same session.
+    within the same session, and that auto-detect properly clears the preference.
     """
 
     # Establish session cookie
@@ -184,6 +184,34 @@ def test_language_persistence_in_session(client, live_server, measure_memory_usa
         assert res.status_code == 200
         assert b"Annulla" in res.data, "Italian text should persist across requests"
 
+    # Verify locale is in session
+    with client.session_transaction() as sess:
+        assert sess.get('locale') == 'it', "Locale should be set in session"
+
+    # Call auto-detect to clear the locale
+    res = client.get(
+        url_for("ui.delete_locale_language_session_var_if_it_exists"),
+        follow_redirects=True
+    )
+
+    assert res.status_code == 200
+    # Verify the flash message appears (in English since we cleared the locale)
+    assert b"Language set to auto-detect from browser" in res.data, "Should show flash message"
+
+    # Verify locale was removed from session
+    with client.session_transaction() as sess:
+        assert 'locale' not in sess, "Locale should be removed from session after auto-detect"
+
+    # Now requests should use browser default (English in test environment)
+    res = client.get(
+        url_for("watchlist.index"),
+        follow_redirects=True
+    )
+
+    assert res.status_code == 200
+    assert b"Cancel" in res.data, "Should show English after auto-detect clears Italian"
+    assert b"Annulla" not in res.data, "Should not show Italian after auto-detect"
+
 
 def test_set_language_with_redirect(client, live_server, measure_memory_usage, datastore_path):
     """

changedetectionio/translations/README.md

@@ -0,0 +1,101 @@
+# Translation Guide
+
+## Updating Translations
+
+To maintain consistency and minimize unnecessary changes in translation files, run these commands:
+
+```bash
+python setup.py extract_messages   # Extract translatable strings
+python setup.py update_catalog     # Update all language files
+python setup.py compile_catalog    # Compile to binary .mo files
+```
+
+## Configuration
+
+All translation settings are configured in **`../../setup.cfg`** (single source of truth).
+
+The configuration below is shown for reference - **edit `setup.cfg` to change settings**:
+
+```ini
+[extract_messages]
+# Extract translatable strings from source code
+mapping_file = babel.cfg
+output_file = changedetectionio/translations/messages.pot
+input_paths = changedetectionio
+keywords = _ _l gettext
+# Options to reduce unnecessary changes in .pot files
+sort_by_file = true       # Keeps entries ordered by file path
+width = 120               # Consistent line width (prevents rewrapping)
+add_location = file       # Show file path only (not line numbers)
+
+[update_catalog]
+# Update existing .po files with new strings from .pot
+# Note: 'locale' is omitted - Babel auto-discovers all catalogs in output_dir
+input_file = changedetectionio/translations/messages.pot
+output_dir = changedetectionio/translations
+domain = messages
+# Options for consistent formatting
+width = 120               # Consistent line width
+no_fuzzy_matching = true  # Avoids incorrect automatic matches
+
+[compile_catalog]
+# Compile .po files to .mo binary format
+directory = changedetectionio/translations
+domain = messages
+```
+
+**Key formatting options:**
+- `sort_by_file = true` - Orders entries by file path (consistent ordering)
+- `width = 120` - Fixed line width prevents text rewrapping
+- `add_location = file` - Shows file path only, not line numbers (reduces git churn)
+- `no_fuzzy_matching = true` - Prevents incorrect automatic fuzzy matches
+
+## Why Use These Commands?
+
+Running pybabel commands directly without consistent options causes:
+- ❌ Entries get reordered differently each time
+- ❌ Text gets rewrapped at different widths
+- ❌ Line numbers change every edit (if not configured)
+- ❌ Large diffs that make code review difficult
+
+Using `python setup.py` commands ensures:
+- ✅ Consistent ordering (by file path, not alphabetically)
+- ✅ Consistent line width (120 characters, no rewrapping)
+- ✅ File-only locations (no line number churn)
+- ✅ No fuzzy matching (prevents incorrect auto-translations)
+- ✅ Minimal diffs (only actual changes show up)
+- ✅ Easier code review and git history
+
+These commands read settings from `../../setup.cfg` automatically.
+
+## Supported Languages
+
+- `cs` - Czech (Čeština)
+- `de` - German (Deutsch)
+- `en_GB` - English (UK)
+- `en_US` - English (US)
+- `fr` - French (Français)
+- `it` - Italian (Italiano)
+- `ko` - Korean (한국어)
+- `zh` - Chinese Simplified (中文简体)
+- `zh_Hant_TW` - Chinese Traditional (繁體中文)
+
+## Adding a New Language
+
+1. Initialize the new language catalog:
+   ```bash
+   pybabel init -i changedetectionio/translations/messages.pot -d changedetectionio/translations -l NEW_LANG_CODE
+   ```
+2. Compile it:
+   ```bash
+   python setup.py compile_catalog
+   ```
+
+Babel will auto-discover the new language on subsequent translation updates.
+
+## Translation Notes
+
+From CLAUDE.md:
+- Always use "monitor" or "watcher" terminology (not "clock")
+- Use the most brief wording suitable
+- When finding issues in one language, check ALL languages for the same issue

setup.cfg

@@ -0,0 +1,28 @@
+# Translation configuration for changedetection.io
+# See changedetectionio/translations/README.md for full documentation on updating translations
+
+[extract_messages]
+# Extract translatable strings from source code
+mapping_file = babel.cfg
+output_file = changedetectionio/translations/messages.pot
+input_paths = changedetectionio
+keywords = _ _l gettext
+# Options to reduce unnecessary changes in .pot files
+sort_by_file = true
+width = 120
+add_location = file
+
+[update_catalog]
+# Update existing .po files with new strings from .pot
+# Note: Omitting 'locale' makes Babel auto-discover all catalogs in output_dir
+input_file = changedetectionio/translations/messages.pot
+output_dir = changedetectionio/translations
+domain = messages
+# Options for consistent formatting
+width = 120
+no_fuzzy_matching = true
+
+[compile_catalog]
+# Compile .po files to .mo binary format
+directory = changedetectionio/translations
+domain = messages