Replace css_browser_selector with our own implementation (#2854)

* Replace css_browser_selector

* Add classes to root element instead of body

* Export addBrowserClasses() in reviewer_extras for mobile clients (dae)

* Avoid setting .mac on iOS devices (dae)

LICENSE

@@ -17,7 +17,6 @@ In the qt folder:
  * winpaths.py: MIT.
  * MathJax: Apache 2.
  * jQuery and jQuery-UI: MIT.
- * browsersel.js: CC BY 2.5.
  * plot.js: MIT.
  * protobuf.js: BSD 3 clause
 

build/configure/src/aqt.rs

@@ -202,7 +202,6 @@ fn build_vendor_js(build: &mut Build) -> Result<()> {
             inputs: inputs![
                 ":node_modules:jquery",
                 ":node_modules:jquery-ui",
-                ":node_modules:css-browser-selector",
                 ":node_modules:bootstrap-dist",
                 "qt/aqt/data/web/js/vendor/plot.js"
             ],

build/configure/src/web.rs

@@ -56,9 +56,6 @@ fn setup_node(build: &mut Build) -> Result<()> {
             "jquery-ui" => vec![
                 "jquery-ui-dist/jquery-ui.min.js".into()
             ],
-            "css-browser-selector" => vec![
-                "css-browser-selector/css_browser_selector.min.js".into(),
-            ],
             "bootstrap-dist" => vec![
                 "bootstrap/dist/js/bootstrap.bundle.min.js".into(),
             ],

package.json

@@ -55,7 +55,6 @@
         "bootstrap-icons": "^1.10.5",
         "canvas": "npm:empty-npm-package",
         "codemirror": "^5.63.1",
-        "css-browser-selector": "^0.6.5",
         "d3": "^7.0.0",
         "fabric": "^5.3.0",
         "intl-pluralrules": "^2.0.0",

qt/aqt/mediasrv.py

@@ -339,7 +339,7 @@ def _extract_internal_request(
         if ext == ".css":
             additional_prefix = "css/"
         elif ext == ".js":
-            if base in ("browsersel", "jquery-ui", "jquery", "plot"):
+            if base in ("jquery-ui", "jquery", "plot"):
                 additional_prefix = "js/vendor/"
             else:
                 additional_prefix = "js/"
@@ -355,10 +355,6 @@ def _extract_internal_request(
             base = "jquery-ui.min"
             additional_prefix = "js/vendor/"
 
-        elif base == "browsersel":
-            base = "css_browser_selector.min"
-            additional_prefix = "js/vendor/"
-
     if additional_prefix:
         oldpath = path
         path = f"{prefix}{additional_prefix}{base}{ext}"

ts/licenses.json

@@ -166,13 +166,6 @@
         "path": "node_modules/commander",
         "licenseFile": "node_modules/commander/LICENSE"
     },
-    "css-browser-selector@0.6.5": {
-        "licenses": "CC-BY-SA-2.5",
-        "repository": "https://github.com/verbatim/css_browser_selector",
-        "publisher": "Rafael Lima",
-        "path": "node_modules/css-browser-selector",
-        "licenseFile": "node_modules/css-browser-selector/README.mkdn"
-    },
     "cssom@0.3.8": {
         "licenses": "MIT",
         "repository": "https://github.com/NV/CSSOM",
@@ -840,4 +833,3 @@
         "licenseFile": "node_modules/xmlchars/LICENSE"
     }
 }
-

ts/reviewer/browser_selector.ts

@@ -0,0 +1,44 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+export function addBrowserClasses() {
+    const ua = navigator.userAgent.toLowerCase();
+
+    function addClass(className: string) {
+        document.documentElement.classList.add(className);
+    }
+
+    function test(regex: RegExp): boolean {
+        return regex.test(ua);
+    }
+
+    if (test(/ipad/)) {
+        addClass("ipad");
+    } else if (test(/iphone/)) {
+        addClass("iphone");
+    } else if (test(/android/)) {
+        addClass("android");
+    }
+
+    if (test(/ipad|iphone|ipod/)) {
+        addClass("ios");
+    }
+
+    if (test(/ipad|iphone|ipod|android/)) {
+        addClass("mobile");
+    } else if (test(/linux/)) {
+        addClass("linux");
+    } else if (test(/windows/)) {
+        addClass("win");
+    } else if (test(/mac/)) {
+        addClass("mac");
+    }
+
+    if (test(/firefox\//)) {
+        addClass("firefox");
+    } else if (test(/chrome\//)) {
+        addClass("chrome");
+    } else if (test(/safari\//)) {
+        addClass("safari");
+    }
+}

ts/reviewer/index.ts

@@ -5,12 +5,11 @@
 @typescript-eslint/no-explicit-any: "off",
  */
 
-import "css-browser-selector/css_browser_selector.min";
-
 export { default as $, default as jQuery } from "jquery/dist/jquery";
 
 import { imageOcclusionAPI } from "../image-occlusion/review";
 import { mutateNextCardStates } from "./answering";
+import { addBrowserClasses } from "./browser_selector";
 
 globalThis.anki = globalThis.anki || {};
 globalThis.anki.mutateNextCardStates = mutateNextCardStates;
@@ -264,6 +263,8 @@ document.addEventListener("focusout", (event) => {
     }
 });
 
+addBrowserClasses();
+
 registerPackage("anki/reviewer", {
     // If you append a function to this each time the question or answer
     // is shown, it will be called before MathJax has been rendered.

ts/reviewer/reviewer_extras.ts

@@ -11,8 +11,10 @@
 
 import { imageOcclusionAPI } from "../image-occlusion/review";
 import { mutateNextCardStates } from "./answering";
+import { addBrowserClasses } from "./browser_selector";
 
 globalThis.anki = globalThis.anki || {};
 globalThis.anki.mutateNextCardStates = mutateNextCardStates;
 globalThis.anki.imageOcclusion = imageOcclusionAPI;
 globalThis.anki.setupImageCloze = imageOcclusionAPI.setup; // deprecated
+globalThis.anki.addBrowserClasses = addBrowserClasses;

ts/reviewer/tsconfig.json

@@ -3,8 +3,7 @@
     "include": ["*"],
     // "references": [{ "path": "../lib" }],
     "compilerOptions": {
-        // css-browser-selector fails if our output bundle is strict
+        "alwaysStrict": true,
-        "alwaysStrict": false,
         "composite": false,
         "types": ["jest"]
     }

yarn.lock

@@ -1900,11 +1900,6 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
-css-browser-selector@^0.6.5:
-  version "0.6.5"
-  resolved "https://registry.yarnpkg.com/css-browser-selector/-/css-browser-selector-0.6.5.tgz#d2b06c01ff7d7cb455e2006b6b6558d39372ca60"
-  integrity sha512-Cfn76BCNJb7GAd57nKT0abzW1yZCpk2+5TgjZrOt01RErG1lAxDs5rQ6tnh3PD4Zfg4pIcsQ/ED/QK+MeNVgYw==
-
 css-tree@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20"