Backport popover code from Kiwix PWA

service-worker.js

@@ -122,6 +122,8 @@ const precacheFiles = [
     'www/img/icons/kiwix-256.png',
     'www/img/icons/kiwix-32.png',
     'www/img/icons/kiwix-60.png',
+    'www/img/icons/new_window_black.svg',
+    'www/img/icons/new_window_white.svg',
     'www/img/spinner.gif',
     'www/img/Icon_External_Link.png',
     'www/index.html',
@@ -135,6 +137,7 @@ const precacheFiles = [
     'www/js/lib/arrayFromPolyfill.js',
     'www/js/lib/filecache.js',
     'www/js/lib/cache.js',
+    'www/js/lib/popovers.js',
     'www/js/lib/promisePolyfill.js',
     'www/js/lib/settingsStore.js',
     'www/js/lib/translateUI.js',

tests/e2e/spec/legacy-ray_charles.e2e.spec.js

@@ -205,7 +205,7 @@ function runTests (driver, modes) {
             it('Load legacy Ray Charles and check index contains specified article', async function () {
                 if (!serviceWorkerAPI) {
                     console.log('\x1b[33m%s\x1b[0m', '    - Following test skipped:');
-                    return;
+                    this.skip();
                 }
                 const archiveFiles = await driver.findElement(By.id('archiveFiles'));
                 // Unhide the element using JavaScript in case it is hidden
@@ -234,7 +234,7 @@ function runTests (driver, modes) {
             it('Navigate to "This Little Girl of Mine"', async function () {
                 if (!serviceWorkerAPI) {
                     console.log('\x1b[33m%s\x1b[0m', '    - Following test skipped:');
-                    return;
+                    this.skip();
                 }
 
                 // console.log('FilesLength outer: ' + filesLength);
@@ -274,12 +274,38 @@ function runTests (driver, modes) {
                 // console.log('Element text: ' + elementText);
                 // Check that the article title is correct
                 assert.equal('Instrumentation by the Ray Charles Orchestra', elementText);
+                await driver.switchTo().defaultContent();
+            });
+
+            it('Check for popover functionality when focusing link', async function () {
+                // Check if the browser supports 'matches' in Element.prototype
+                const matchesSupported = await driver.executeScript('return typeof Element.prototype.matches === "function";');
+                if (!matchesSupported) {
+                    console.log('\x1b[33m%s\x1b[0m', '    - Following test skipped because browser does not support css matches:');
+                    this.skip();
+                }
+                // Switch to iframe
+                await driver.switchTo().frame('articleContent');
+                // Focus on the link "Hallelujah" with id="mwVw"
+                let link = await driver.findElement(By.id('mwVw'));
+                await driver.executeScript('arguments[0].focus();', link);
+                await driver.sleep(2000);
+                // Focus on the next link "A Fool for You" with id="mwWw"
+                await driver.executeScript('document.getElementById("mwWw").focus();');
+                // Wait for the popover to appear
+                await driver.sleep(2500); // DEV: Adjust this delay if failing on older, slower browsers
+                // Use standard JavaScript methods to find the popover element because Safari 14 fails when using WebDriver methods
+                let popover = await driver.executeScript('return document.querySelector(".kiwixtooltip").outerHTML;');
+                // The popover should contain the word "bluesy" (description of style of song)
+                let popoverContainsText = /bluesy/.test(popover);
+                assert.ok(popoverContainsText, 'Popover div with class ".kiwixtooltip" did not have expected text "bluesy"');
+                await driver.switchTo().defaultContent();
             });
 
             it('Search for Ray Charles in title index and go to article', async function () {
                 if (!serviceWorkerAPI) {
                     console.log('\x1b[33m%s\x1b[0m', '    - Following test skipped:');
-                    return;
+                    this.skip();
                 }
                 await driver.switchTo().defaultContent();
                 const prefix = await driver.findElement(By.id('prefix'));

www/index.html

@@ -577,9 +577,9 @@ <h3 data-i18n="configure-display-settings-title">Display settings</h3>
                         </div>
                     </div>
                     <div class="container">
-                        <h3 data-i18n="configure-performance-settings-title">Performance settings</h3>
+                        <h3 data-i18n="configure-performance-settings-title">Performance / compatibility</h3>
                         <div class="card card-warning" id="performanceSettingsDiv">
-                            <div data-i18n="configure-performance-panel-header" class="card-header">Speed up archive access</div>
+                            <div data-i18n="configure-performance-panel-header" class="card-header">Caching and preview settings</div>
                             <div class="card-body">
                                 <div class="row">
                                     <div class="col-sm-6">
@@ -628,11 +628,22 @@ <h3 data-i18n="configure-performance-settings-title">Performance settings</h3>
                                         </div>
                                     </div>
                                 </div>
+                                <div class="row">
+                                    <div class="col-sm-12">
+                                        <div class="checkbox">
+                                            <label data-i18n-tip="configure-previews-tip" title="Shows a small popup preview of Wikipedia and Wikivoyage articles when the pointer is hovered over an article link. Turn this off if it is too slow or interferes wtih display of articles on small-screen devices.">
+                                                <input type="checkbox" name="showPopoverPreviews" id="showPopoverPreviewsCheck" checked>
+                                                <span data-i18n="configure-previews">
+                                                    <b>Show a popover preview of <i>Wikipedia / Wkivoyage</i> articles</b> when hovering over links (<i>limited functionality in Safe Mode</i>)
+                                                </span>
+                                            </label>   
+                                        </div> 
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
                     <div class="container">
-                        <h3 data-i18n="configure-compatibility-settings-title">Compatibility settings</h3>
                         <div class="card card-warning" id="contentInjectionModeDiv">
                             <div data-i18n="configure-compatibility-panel-header" class="card-header">Content injection mode</div>
                             <div class="card-body">