Merge pull request #18 from EpocDotFr/update-options-page-dark-mode

EpocDotFr · web-flow · commit cee11c8cb4e9 · 2021-06-20T14:52:24.000+02:00
Fix Options page dark mode for Firefox 89+, minor improvements
diff --git a/css/options.css b/css/options.css
@@ -5,11 +5,16 @@
 
 /* Dark theme styles override */
 @media (prefers-color-scheme: dark) {
-    body.is-firefox {
+    body.is-firefox.lt-89 {
         background-color: #202023;
         color: rgb(249, 249, 250);
     }
 
+    body.is-firefox.ge-89 {
+        background-color: rgb(35, 34, 43);
+        color: rgb(251,251,254);
+    }
+
     .is-firefox input[type="url"],
     .is-firefox textarea {
         background-color: #2a2a2e;
@@ -43,6 +48,10 @@ body.is-chrome {
 /************************************************************************
  * Global styles */
 
+html, body, button {
+    font-size: 15px;
+}
+
 .is-hidden {
     display: none;
 }
diff --git a/js/options.js b/js/options.js
@@ -2,12 +2,22 @@
     'use strict';
 
     class OptionsPage {
+        /**
+         * Returns the list of browsers versions for which to compare the current browser version from. This allows to
+         * set CSS classes which can be used to target version-specific styles.
+         */
+        get browser_versions_to_compare() {
+            return {
+                'firefox': ['89']
+            };
+        }
+
         /**
          * Class which handles everything related to the options page of the extension. Preferences are persisted in
          * the browser's local storage.
          */
         constructor() {
-            this.addBrowserDiscriminatingClassToBody();
+            this.addBrowserDiscriminatingClassesToBody();
 
             this.preferencesManager = new globals.Gmrle.PreferencesManager();
 
@@ -188,29 +198,41 @@
         }
 
         /**
-         * Returns the browser name the extension is currently running on.
+         * Returns the browser name the extension is currently running on, as well as its version.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
          */
-        getCurrentBrowserName() {
+        getCurrentBrowserNameAndVersion() {
+            let browserName = null;
+            let browserVersion = null;
+
             let ua = navigator.userAgent;
 
             if (ua.includes('Firefox/') && !ua.includes('Seamonkey/')) {
-                return 'firefox';
+                browserName = 'firefox';
+
+                let firefoxVersionRegex = new RegExp('Firefox\/([0-9.]+)');
+                let results = firefoxVersionRegex.exec(ua);
+
+                if (results) {
+                    browserVersion = results[1];
+                }
             } else if (ua.includes('Chrome/') && !ua.includes('Chromium/')) {
-                return 'chrome';
+                browserName = 'chrome';
             } else if (ua.includes('Edg/')) {
-                return 'edge';
+                browserName = 'edge';
             } else if (ua.includes('OPR/')) {
-                return 'opera';
+                browserName = 'opera';
             }
 
-            return null;
+            return [browserName, browserVersion];
         }
 
         /**
-         * Adds a CSS class name to the <body> tag identifying the browser the extension is currently running on.
+         * Adds CSS classes names to the <body> tag identifying the browser the extension is currently running on, as well as its version.
          */
-        addBrowserDiscriminatingClassToBody() {
-            let currentBrowserName = this.getCurrentBrowserName();
+        addBrowserDiscriminatingClassesToBody() {
+            let [currentBrowserName, currentBrowserVersion] = this.getCurrentBrowserNameAndVersion();
 
             if (!currentBrowserName) {
                 return;
@@ -223,6 +245,22 @@
             }
 
             body.classList.add('is-' + currentBrowserName);
+
+            this.addBrowserVersionsComparisonsClasses(currentBrowserName, currentBrowserVersion, body);
+        }
+
+        addBrowserVersionsComparisonsClasses(currentBrowserName, currentBrowserVersion, el) {
+            if (!currentBrowserName || !currentBrowserVersion || !(currentBrowserName in this.browser_versions_to_compare)) {
+                return;
+            }
+
+            this.browser_versions_to_compare[currentBrowserName].forEach(function(targetBrowserVersion) {
+                ['gt', 'ge', 'lt', 'le', 'eq', 'ne'].forEach(function(operator) {
+                    if (this.versionCompare(currentBrowserVersion, targetBrowserVersion, operator)) {
+                        el.classList.add(operator + '-' + targetBrowserVersion.replace(new RegExp('\\.'), '-'));
+                    }
+                }, this);
+            }, this);
         }
 
         /**
@@ -277,6 +315,126 @@
 
             delete this.submitButtonInOptionsForm.dataset.originalTextContent;
         }
+
+        /**
+         * This function has been stolen from https://github.com/locutusjs/locutus/blob/master/src/php/info/version_compare.js
+         */
+        versionCompare(v1, v2, operator) { // eslint-disable-line camelcase
+            //       discuss at: https://locutus.io/php/version_compare/
+            //      original by: Philippe Jausions (https://pear.php.net/user/jausions)
+            //      original by: Aidan Lister (https://aidanlister.com/)
+            // reimplemented by: Kankrelune (https://www.webfaktory.info/)
+            //      improved by: Brett Zamir (https://brett-zamir.me)
+            //      improved by: Scott Baker
+            //      improved by: Theriault (https://github.com/Theriault)
+            //        example 1: version_compare('8.2.5rc', '8.2.5a')
+            //        returns 1: 1
+            //        example 2: version_compare('8.2.50', '8.2.52', '<')
+            //        returns 2: true
+            //        example 3: version_compare('5.3.0-dev', '5.3.0')
+            //        returns 3: -1
+            //        example 4: version_compare('4.1.0.52','4.01.0.51')
+            //        returns 4: 1
+
+            // Important: compare must be initialized at 0.
+            let i
+            let x
+            let compare = 0
+
+            // vm maps textual PHP versions to negatives so they're less than 0.
+            // PHP currently defines these as CASE-SENSITIVE. It is important to
+            // leave these as negatives so that they can come before numerical versions
+            // and as if no letters were there to begin with.
+            // (1alpha is < 1 and < 1.1 but > 1dev1)
+            // If a non-numerical value can't be mapped to this table, it receives
+            // -7 as its value.
+            const vm = {
+                dev: -6,
+                alpha: -5,
+                a: -5,
+                beta: -4,
+                b: -4,
+                RC: -3,
+                rc: -3,
+                '#': -2,
+                p: 1,
+                pl: 1
+            }
+
+            // This function will be called to prepare each version argument.
+            // It replaces every _, -, and + with a dot.
+            // It surrounds any nonsequence of numbers/dots with dots.
+            // It replaces sequences of dots with a single dot.
+            //    version_compare('4..0', '4.0') === 0
+            // Important: A string of 0 length needs to be converted into a value
+            // even less than an unexisting value in vm (-7), hence [-8].
+            // It's also important to not strip spaces because of this.
+            //   version_compare('', ' ') === 1
+            const _prepVersion = function (v) {
+                v = ('' + v).replace(/[_\-+]/g, '.')
+                v = v.replace(/([^.\d]+)/g, '.$1.').replace(/\.{2,}/g, '.')
+                return (!v.length ? [-8] : v.split('.'))
+            }
+            // This converts a version component to a number.
+            // Empty component becomes 0.
+            // Non-numerical component becomes a negative number.
+            // Numerical component becomes itself as an integer.
+            const _numVersion = function (v) {
+                return !v ? 0 : (isNaN(v) ? vm[v] || -7 : parseInt(v, 10))
+            }
+
+            v1 = _prepVersion(v1)
+            v2 = _prepVersion(v2)
+            x = Math.max(v1.length, v2.length)
+
+            for (i = 0; i < x; i++) {
+                if (v1[i] === v2[i]) {
+                    continue
+                }
+                v1[i] = _numVersion(v1[i])
+                v2[i] = _numVersion(v2[i])
+                if (v1[i] < v2[i]) {
+                    compare = -1
+                    break
+                } else if (v1[i] > v2[i]) {
+                    compare = 1
+                    break
+                }
+            }
+
+            if (!operator) {
+                return compare
+            }
+
+            // Important: operator is CASE-SENSITIVE.
+            // "No operator" seems to be treated as "<."
+            // Any other values seem to make the function return null.
+            switch (operator) {
+                case '>':
+                case 'gt':
+                    return (compare > 0)
+                case '>=':
+                case 'ge':
+                    return (compare >= 0)
+                case '<=':
+                case 'le':
+                    return (compare <= 0)
+                case '===':
+                case '=':
+                case 'eq':
+                    return (compare === 0)
+                case '<>':
+                case '!==':
+                case 'ne':
+                    return (compare !== 0)
+                case '':
+                case '<':
+                case 'lt':
+                    return (compare < 0)
+                default:
+                    return null
+            }
+        }
     }
 
     document.addEventListener('DOMContentLoaded', function() {
