Fix vertical positioning of popovers #672 (#674)

www/-/s/style-dark.css

@@ -1,4 +1,4 @@
-
+
 /* Wikipedia Dark Theme v1.0.23 (1/17/2017)
  * https://github.com/StylishThemes/Wikipedia-Dark
  * http://userstyles.org/styles/
@@ -14,7 +14,7 @@
  */
 
   /* transparent background */
-div, span:not(.legend-color):not([class*="wikEd"]):not([style*="background"]), .MainPageBG, .navbox-list,
+div:not(.kiwixtooltip), span:not(.legend-color):not([class*="wikEd"]):not([style*="background"]), .MainPageBG, .navbox-list,
 div#mw-head, .mw-wsmfinal-content, #bodyContent, .referencetooltip > li + li,
 div.vectorTabs ul li, tr[style*="background:#F5FFFA"],
 th[style*="background-color: #fff"], .mw-echo-notifications-badge,
@@ -24,7 +24,7 @@ th[style*="background-color: #fff"], .mw-echo-notifications-badge,
 }
 
 /*** Overall ***/
-p, li, td:not([style*="background"]), th:not([style*="background"]), caption, div {
+p, li, td:not([style*="background"]), th:not([style*="background"]), caption, div:not(.kiwixtooltip) {
   color: lightgray !important;
   background-image: none !important;
 }
@@ -170,7 +170,7 @@ tr[style*="background: antiquewhite"], tr[style*="background-color:#ee"], tr[sty
 .mw-ui-button[style*="background"], .mw-ui-button[style*="background"] *, .wikiEditor-ui,
 table.navbox.collapsible tr:nth-child(2) > td, div.menu, div.NavHead, .oo-ui-popupWidget-popup,
 .oo-ui-buttonElement-button, .mw-notification, .mwe-popups, .mwe-popups-is-not-tall, .mwe-popups-is-tall,
-.ui-widget-content, .oo-ui-window-body, #pagehistory li.selected, .tracklist tr, .dataTable tr, div.kiwixtooltip {
+.ui-widget-content, .oo-ui-window-body, #pagehistory li.selected, .tracklist tr, .dataTable tr {
     background-color: #222 !important;
 }
 

www/js/app.js

@@ -414,6 +414,7 @@ function printCleanup () {
         // We don't need a radical cleanup because there was no printIntercept
         removePageMaxWidth();
         setTab();
+        setArticleZoom(params.relativeFontSize);
         params.cssTheme = settingsStore.getItem('cssTheme') || 'light';
         if (document.getElementById('cssWikiDarkThemeDarkReaderCheck').checked) {
             // It seems darkReader has been auto-turned on, so we need to respect that
@@ -522,6 +523,8 @@ function printIntercept () {
         removePageMaxWidth();
         params.removePageMaxWidth = tempPageMaxWidth;
     }
+    // Reset zoom level to 100%
+    setArticleZoom(100);
     // Put doc into light mode
     params.cssTheme = 'light';
     switchCSSTheme();
@@ -688,38 +691,39 @@ document.getElementById('btnForward').addEventListener('click', function () {
     history.forward();
 });
 document.getElementById('btnZoomin').addEventListener('click', function () {
-    params.relativeFontSize += 5;
+    params.relativeFontSize = Math.min(200, params.relativeFontSize + 5);
-    var doc = document.getElementById('articleContent').contentDocument;
+    setArticleZoom(params.relativeFontSize, true);
-    var docElStyle = doc.documentElement.style;
-    // IE11 and Firefox need to use fontSize on the body style
-    var zoomProp = '-ms-zoom' in docElStyle ? 'fontSize' : 'zoom' in docElStyle ? 'zoom' : 'fontSize';
-    docElStyle = zoomProp === 'fontSize' ? doc.body.style : docElStyle;
-    docElStyle[zoomProp] = /-\/static\/main\.css|statc\/css\/sotoki.css/.test(doc.head.innerHTML) && zoomProp === 'fontSize' ? params.relativeFontSize * 1.5 + '%' : params.relativeFontSize + '%';
-    var lblZoom = document.getElementById('lblZoom');
-    lblZoom.innerHTML = params.relativeFontSize + '%';
-    lblZoom.style.cssText = 'position:absolute;right:' + window.innerWidth / 5 + 'px;bottom:50px;z-index:50;';
-    setTimeout(function () {
-        lblZoom.innerHTML = '';
-    }, 2000);
-    settingsStore.setItem('relativeFontSize', params.relativeFontSize, Infinity);
-    document.getElementById('articleContent').contentWindow.focus();
 });
 document.getElementById('btnZoomout').addEventListener('click', function () {
-    params.relativeFontSize -= 5;
+    params.relativeFontSize = Math.max(50, params.relativeFontSize - 5);
-    var doc = document.getElementById('articleContent').contentDocument;
+    setArticleZoom(params.relativeFontSize, true);
-    var docElStyle = doc.documentElement.style;
-    var zoomProp = '-ms-zoom' in docElStyle ? 'fontSize' : 'zoom' in docElStyle ? 'zoom' : 'fontSize';
-    docElStyle = zoomProp === 'fontSize' ? doc.body.style : docElStyle;
-    docElStyle[zoomProp] = /-\/static\/main\.css|statc\/css\/sotoki.css/.test(doc.head.innerHTML) && zoomProp === 'fontSize' ? params.relativeFontSize * 1.5 + '%' : params.relativeFontSize + '%';
-    var lblZoom = document.getElementById('lblZoom');
-    lblZoom.innerHTML = params.relativeFontSize + '%';
-    lblZoom.style.cssText = 'position:absolute;right:' + window.innerWidth / 4 + 'px;bottom:50px;z-index:50;';
-    setTimeout(function () {
-        lblZoom.innerHTML = '';
-    }, 2000);
-    settingsStore.setItem('relativeFontSize', params.relativeFontSize, Infinity);
-    document.getElementById('articleContent').contentWindow.focus();
 });
+let zoomLabelTimeout;
+function setArticleZoom (zoomLevel, set) {
+    const root = articleDocument.documentElement || articleDocument;
+    const percentageFontSize = zoomLevel + '%';
+    // Set CSS fontSize and zoom if supported
+    // Note that the zoom property is supported in Firefox since May 2024, but it doesn't
+    // scale the font size at least in Wikipedia pages, so we need to set fontSize as well
+    root.style.fontSize = percentageFontSize;
+    if ('zoom' in root.style) {
+        root.style.zoom = percentageFontSize;
+    }
+    // If we are setting a value from the UI, update the display and settings
+    if (set) {
+        // Update zoom label
+        const lblZoom = document.getElementById('lblZoom');
+        lblZoom.innerHTML = percentageFontSize;
+        lblZoom.style.cssText = 'position:absolute;right:' + window.innerWidth / 4 + 'px;bottom:50px;z-index:50;';
+        // Clear and set timeout to hide zoom label
+        if (zoomLabelTimeout) clearTimeout(zoomLabelTimeout);
+        zoomLabelTimeout = setTimeout(function () {
+            lblZoom.innerHTML = '';
+        }, 2500);
+            settingsStore.setItem('relativeFontSize', zoomLevel, Infinity);
+            document.getElementById('articleContent').contentWindow.focus();
+    }
+}
 setRelativeUIFontSize(params.relativeUIFontSize);
 document.getElementById('relativeUIFontSizeSlider').addEventListener('change', function () {
     setRelativeUIFontSize(this.value);
@@ -5427,13 +5431,7 @@ var articleLoadedSW = function (dirEntry, container) {
         if (!appstate.isReplayWorkerAvailable) switchCSSTheme(); // Gets called in articleLoader for replay_iframe
         if (appstate.selectedArchive.zimType === 'open') {
             // Set relative font size + Stackexchange-family multiplier
-            var zimType = /-\/s\/style\.css/i.test(doc.head.innerHTML) ? 'desktop' : 'mobile';
+            setArticleZoom(params.relativeFontSize);
-            zimType = /-\/static\/main\.css|statc\/css\/sotoki.css/i.test(doc.head.innerHTML) ? 'desktop-stx' : zimType; // Support stackexchange
-            zimType = /minerva|mobile[^"']*\.css/i.test(doc.head.innerHTML) ? 'mobile' : zimType;
-            var docElStyle = doc.documentElement.style;
-            var zoomProp = '-ms-zoom' in docElStyle ? 'fontSize' : 'zoom' in docElStyle ? 'zoom' : 'fontSize';
-            docElStyle = zoomProp === 'fontSize' ? docBody.style : docElStyle;
-            docElStyle[zoomProp] = ~zimType.indexOf('stx') && zoomProp === 'fontSize' ? params.relativeFontSize * 1.5 + '%' : params.relativeFontSize + '%';
             if (!params.isLandingPage) openAllSections();
         }
         checkToolbar();
@@ -6626,11 +6624,8 @@ function displayArticleContentInContainer (dirEntry, htmlArticle) {
                 if (params.lockDisplayOrientation) articleWindow.addEventListener('mousedown', refreshFullScreen, true);
                 setupTableOfContents();
             }
-            // Set relative font size + Stackexchange-family multiplier
+            // Set relative font size
-            var docElStyle = articleDocument.style;
+            setArticleZoom(params.relativeFontSize);
-            var zoomProp = '-ms-zoom' in docElStyle ? 'fontSize' : 'zoom' in docElStyle ? 'zoom' : 'fontSize';
-            docElStyle = zoomProp === 'fontSize' ? docBody.style : docElStyle;
-            docElStyle[zoomProp] = zimType && ~zimType.indexOf('stx') && zoomProp === 'fontSize' ? params.relativeFontSize * 1.5 + '%' : params.relativeFontSize + '%';
             // Set page width according to user preference
             removePageMaxWidth();
             setupHeadings();

www/js/lib/popovers.js

@@ -178,9 +178,9 @@ function getImageHTMLFromNode (node, baseURL, pathPrefix) {
  * @param {Boolean} dark An optional parameter to adjust the background colour for dark themes (generally not needed for inversion-based themes)
  */
 function attachKiwixPopoverCss (doc, dark) {
-    const colour = dark && !/invert/i.test(params.cssTheme) ? 'darkgray' : 'black';
+    const colour = dark && !/invert/i.test(params.cssTheme) ? 'lightgray' : 'black';
-    const backgroundColour = dark && !/invert/i.test(params.cssTheme) ? '#111' : '#ebf4fb';
+    const backgroundColour = dark && !/invert/i.test(params.cssTheme) ? '#121e1e' : '#ebf4fb';
-    const borderColour = dark ? 'darkslategray' : 'skyblue';
+    const borderColour = 'skyblue !important';
     // DEV: Firefox OS blocks loading stylesheet files into iframe DOM content even if it is same origin, so we are forced to insert a style element instead
     uiUtil.insertLinkElement(doc, `
         .kiwixtooltip {
@@ -333,6 +333,7 @@ function createNewKiwixPopoverCointainer (win, anchor, event) {
     div.popoverisloading = true;
     const screenWidth = win.innerWidth - 40;
     const screenHeight = document.documentElement.clientHeight;
+    let zoomFactor = 'zoom' in currentDocument.documentElement.style && !isSafari() ? params.relativeFontSize / 100 : 1;
     let margin = 40;
     let divWidth = 512;
     if (screenWidth <= divWidth) {
@@ -352,40 +353,55 @@ function createNewKiwixPopoverCointainer (win, anchor, event) {
     // DEV: We need to insert the div into the target document before we can obtain its computed dimensions accurately
     currentDocument.body.appendChild(div);
     // Calculate the position of the link that is being hovered
-    const linkRect = anchor.getBoundingClientRect();
+    const rect = anchor.getBoundingClientRect();
+    const linkRect = {
+        top: rect.top,
+        bottom: rect.bottom,
+        left: rect.left,
+        right: rect.right,
+        width: rect.width
+    };
+    // Note that since Chromium 128 getBoundingClientRect() now returns zoom-adjusted values, but if this is the case,
+    // then currentCSSZoom will be defined as well, so we can adjust for this. Note that UWP also requires adjustment.
+    if (/UWP/.test(params.appType) || 'MSBlobBuilder' in window || anchor.currentCSSZoom || isSafari()) {
+        linkRect.top = linkRect.top / zoomFactor;
+        linkRect.bottom = linkRect.bottom / zoomFactor;
+        linkRect.left = linkRect.left / zoomFactor;
+        linkRect.right = linkRect.right / zoomFactor;
+        linkRect.width = linkRect.width / zoomFactor;
+    }
     // Initially position the div 20px above the link
+    const spacing = 20;
     let triangleDirection = 'top';
-    const divOffsetHeight = /UWP/.test(params.appType) ? div.offsetHeight * params.relativeFontSize / 100 + 20 : div.offsetHeight + 20;
+    const divOffsetHeight = div.offsetHeight + spacing;
     let divRectY = linkRect.top - divOffsetHeight;
-    if (/UWP/.test(params.appType)) divRectY = divRectY * 100 / params.relativeFontSize;
     let triangleY = divHeight + 6;
     // If we're less than half margin from the top, move the div below the link
     if (divRectY < margin / 2) {
         triangleDirection = 'bottom';
-        divRectY = linkRect.bottom + 20;
+        divRectY = linkRect.bottom + spacing;
         triangleY = -16;
-        if (/UWP/.test(params.appType)) divRectY = divRectY * 100 / params.relativeFontSize;
     }
     // Position it horizontally in relation to the pointer position
     let divRectX, triangleX;
     if (event.type === 'touchstart') {
         divRectX = event.touches[0].clientX - divWidth / 2;
-        triangleX = event.touches[0].clientX - divRectX - 20;
+        triangleX = event.touches[0].clientX - divRectX - spacing;
     } else if (event.type === 'focus') {
-        divRectX = linkRect.left + linkRect.width / 2 - divWidth / 2;
+        divRectX = linkRect.left * zoomFactor + linkRect.width / 2 - divWidth / 2;
-        triangleX = linkRect.left + linkRect.width / 2 - divRectX - 20;
+        triangleX = linkRect.left * zoomFactor + linkRect.width / 2 - divRectX - spacing;
     } else {
         divRectX = event.clientX - divWidth / 2;
-        triangleX = event.clientX - divRectX - 20;
+        triangleX = event.clientX - divRectX - spacing;
     }
     // If right edge of div is greater than margin from the right side of window, shift it to margin
-    if (divRectX + divWidth * params.relativeFontSize / 100 > screenWidth - margin) {
+    if (divRectX + divWidth * zoomFactor > screenWidth - margin) {
         triangleX += divRectX;
-        divRectX = screenWidth - divWidth * params.relativeFontSize / 100 - margin;
+        divRectX = screenWidth - divWidth * zoomFactor - margin;
         triangleX -= divRectX;
     }
     // If we're less than margin to the left, shift it to margin px from left
-    if (divRectX * params.relativeFontSize / 100 < margin) {
+    if (divRectX * zoomFactor < margin) {
         triangleX += divRectX;
         divRectX = margin;
         triangleX -= divRectX;
@@ -394,9 +410,13 @@ function createNewKiwixPopoverCointainer (win, anchor, event) {
     if (triangleX < 10) triangleX = 10;
     if (triangleX > divWidth - 10) triangleX = divWidth - 10;
     // Adjust positions to take into account the font zoom factor
-    divRectX = divRectX * 100 / params.relativeFontSize;
+    const adjustedScrollY = win.scrollY / zoomFactor;
-    triangleX = triangleX * 100 / params.relativeFontSize;
+    if (isSafari()) {
-    const adjustedScrollY = win.scrollY * 100 / params.relativeFontSize;
+        // We have to reinstate zoomFactor as it is only applied to horizontal positioning in Safari
+        zoomFactor = params.relativeFontSize / 100;
+    }
+    divRectX = divRectX / zoomFactor;
+    triangleX = triangleX / zoomFactor;
     // Now set the calculated x and y positions
     div.style.top = divRectY + adjustedScrollY + 'px';
     div.style.left = divRectX + 'px';
@@ -418,6 +438,12 @@ function createNewKiwixPopoverCointainer (win, anchor, event) {
     return { div: div, span: span };
 }
 
+function isSafari () {
+    return typeof navigator !== 'undefined' &&
+        /^((?!chrome|android).)*safari/i.test(navigator.userAgent) &&
+        CSS.supports('-webkit-backdrop-filter', 'blur(1px)');
+};
+
 /**
  * Adds event listeners to the popover's control icons
  * @param {Element} anchor The anchor which launched the popover