feat(#33): add about screen

extension/css/content.css

@@ -22,6 +22,32 @@
     white-space: nowrap;
 }
 
+/**
+ * About Modal
+ */
+#aes-about-dialog .modal-dialog {
+    width: 40em;
+    max-width: 90vw;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+#aes-about-dialog .modal-body {
+    text-align: center;
+}
+
+#aes-about-dialog img {
+    width: 64px;
+    height: 64px;
+    border-radius: 5px;
+}
+
+#aes-about-dialog button[data-dismiss] {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}
+
 /**
  * General UI improvements
  */

extension/manifest.json

@@ -26,7 +26,8 @@
             "js": [
                 "js/jquery-3.4.1.min.js",
                 "helpers.js",
-                "modules/aes-menu.js"
+                "modules/aes-menu.js",
+                "modules/about-dialog.js"
             ],
             "matches": ["https://*.airlinesim.aero/app/*", "https://*.airlinesim.aero/action/*"]
         },
@@ -72,5 +73,9 @@
     ],
     "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAlgUt+9pr5xsoJIdZtv2s/miPjNaUMf5NdIRH6wQzgWpGzMCwf46cUSL0FbpnIo6E9d6pITalABU8Dx72/isyas/da0EQNCQkYxhvu2YakUyUMyzKg0jPuxR+VyaEzDMVQKyVD1xZb/jjOkHXvGew/EHPw9BzCdhKRptRqo4gqdgifS0/xQFiqneA35Hhqwo9bh5zfhZpdMsssMHH3uGGm1f4Yeq+j2ZUtvf74v8pWR5+sVI/dFhTSpQaT60sWFYkPVwtpQ5jUwqm9vDyAH0obZxVtBqI5UkmjEJsCXmQW6QdC4+gRwTgrKc137SH+mUVRHfcXogMSa72+szX63pMUQIDAQAB",
     "permissions": ["activeTab", "declarativeContent", "storage", "unlimitedStorage"],
-    "host_permissions": ["https://*.airlinesim.aero/"]
+    "host_permissions": ["https://*.airlinesim.aero/"],
+    "web_accessible_resources": [{
+        "resources": ["/images/*"],
+        "matches": ["https://*.airlinesim.aero/*"]
+    }]
 }

extension/modules/about-dialog.js

@@ -0,0 +1,103 @@
+class AboutDialog {
+    #target
+    #container
+    #modalDialog
+    #modalContent
+    #closeButton
+    #body
+
+    constructor() {
+        this.#closeButton = this.#createCloseButton()
+        this.#body = this.#createBody()
+        this.#body.prepend(this.#closeButton)
+        this.#modalContent = this.#createModalContent()
+        this.#modalContent.append(this.#body)
+        this.#modalDialog = this.#createModalDialog()
+        this.#modalDialog.append(this.#modalContent)
+        this.#container = this.#createContainer()
+        this.#container.append(this.#modalDialog)
+        this.#target = this.#setTarget()
+        this.#target.append(this.#container)
+
+        const observer = this.#mutationObserver()
+        observer.observe(this.#container, {attributes: true})
+    }
+
+    #createContainer() {
+        const container = document.createElement("div")
+        container.class = "modal"
+        container.id = "aes-about-dialog"
+        container.setAttribute("role", "dialog")
+        container.setAttribute("aria-modal", "true")
+        container.setAttribute("aria-hidden", "true")
+        container.style = "display: none"
+
+        return container
+    }
+
+    #createModalDialog() {
+        const modalDialog = document.createElement("div")
+        modalDialog.className = "modal-dialog modal-md"
+
+        return modalDialog
+    }
+
+    #createModalContent() {
+        const modalContent = document.createElement("div")
+        modalContent.className = "modal-content"
+
+        return modalContent
+    }
+
+    #createCloseButton() {
+        const icon = document.createElement("span")
+        icon.setAttribute("aria-hidden", "true")
+        icon.innerText = "×"
+        const label = document.createElement("span")
+        label.innerText = "Close"
+        label.className = "sr-only"
+        const button = document.createElement("button")
+        button.setAttribute("type", "button")
+        button.dataset.dismiss = "modal"
+        button.className = "btn btn-default"
+        button.append(icon, label)
+
+        return button
+    }
+
+    #createBody() {
+        const body = document.createElement("div")
+        body.className = "modal-body"
+        const manifest = chrome.runtime.getManifest()
+        const description = manifest.description
+        const version = manifest.version
+
+        body.innerHTML = `
+            <img src="${chrome.runtime.getURL('images/AES-logo-128.png')}">
+            <h2>AirlineSim Enhancement Suite</h2>
+            <p>Version ${version}</p>
+            <p>Copyright &copy; 2020-2024 AES Authors. MIT License.</p>
+        `
+
+        return body
+    }
+
+    #setTarget() {
+        const target = document.querySelector("body")
+        return target
+    }
+
+    #mutationObserver() {
+        const observer = new MutationObserver(this.#correctBootstrapBehaviour.bind(this))
+        return observer
+    }
+
+    #correctBootstrapBehaviour() {
+        if (this.#container.classList.contains("in") && !this.#container.classList.contains("modal")) {
+            this.#container.classList.add("modal")
+            this.#container.style = "display: block"
+        }
+    }
+}
+
+new AboutDialog()

extension/modules/aes-menu.js

@@ -78,6 +78,15 @@ class AESMenu {
             href: "https://github.com/ZoeBijl/airlinesim-enhancement-suite",
             newWindow: true,
             icon: { className: "fa-github" }
+        },{
+            isDivider: true
+        },{
+            label: "About AES",
+            icon: { className: "fa-info" },
+            data: {
+                toggle: "modal",
+                target: "#aes-about-dialog"
+            }
         }]
         for (const item of content) {
             let menuItem = this.#createMenuItem(item)