feat(CSS): add Firefox only css check

Author: rugk

MobileOptions.js EnvironmentalOptions.jsMobileOptions.js renamed to EnvironmentalOptions.js

@@ -1,5 +1,5 @@
 /**
- * Adjusts options page for mobile (Android) compatibility.
+* Adjusts options page for browser or system (mobile/Android) compatibility.
  *
  * Notice: You can include this asyncronously even when the whole DOM is not parsed yet.
  * It only accesses the body tag and that is very likely available as it's likely one of
@@ -16,14 +16,26 @@
  * Returns whether the current runtime is a mobile one (true) or not (false).
  *
  * @private
- * @returns {Promise} with Boolean
+ * @returns {Promise<bool>}
  */
 async function isMobile() {
     const platformInfo = await browser.runtime.getPlatformInfo();
 
     return platformInfo.os === "android";
 }
 
+/**
+* Returns whether the current browser is Firefox.
+*
+* @private
+* @returns {Promise<bool>}
+*/
+async function isFirefox() {
+    const browserInfo = await browser.runtime.getBrowserInfo();
+
+    return browserInfo.name === "Firefox";
+}
+
 /**
  * Initalize this module.
  *
@@ -33,10 +45,19 @@ async function isMobile() {
  * @public
  * @returns {Promise}
  */
-export async function init() {
-    if (!(await isMobile())) {
-        return;
-    }
+export function init() {
+    isMobile.then((isCurrentlyMobile) => {
+        if (!isCurrentlyMobile) {
+            return;
+        }
+        document.querySelector("body").classList.add("mobile");
+    });
+    isFirefox.then((isCurrentlyFirefox) => {
+        if (!isCurrentlyFirefox) {
+            return;
+        }
+        document.querySelector("body").classList.add("firefox");
+    });
 
-    document.querySelector("body").classList.add("mobile");
+    return Promise.all([isMobile, isFirefox]);
 }

README.md

@@ -215,7 +215,7 @@ Doc is TODO…
 
 ## CSS
 
-In the file [`css/photonOptions.css`], there is a style for 
+In the file [`css/photonOptions.css`], there is a style for a Firefox/[Photon](https://design.firefox.com/photon/)-style appearance of the settings.
 
 Here is the corresponding HTML, if you want to use it:
 ```html
@@ -257,6 +257,14 @@ Here is the corresponding HTML, if you want to use it:
 
 ```
 
+## Automatically disabling options
+
+To automatically disable options depending on the environment, load the `EnvironmentalOptions.js` module and run `MobileOptions.init();`. You can even do that asynchronously with the `async` attribute at the `script` tag.
+
+If you do so, you can use two CSS classes:
+* You can use the CSS class `.mobile-incompatible` to mark options that are not compatible with Android/mobile devices. 
+* You can use the CSS class `.firefox-only` to mark options that are only compatible with the Mozilla Firefox browser. 
+
 ## API note
 
 Everything in the `internal` dir is considered to be an internal module/file and thus not be considered to be an API under _semantic versioning_. That means the API there can change at any time, do _not_ import anything from there!

css/photonOptions.css

@@ -14,10 +14,13 @@ body.mobile {
   font-size: 14px;
 }
 
-/* disable all options incomaptible with mobile devices */
+/* disable all options incomaptible with current device/browser */
 body.mobile .mobile-incompatible {
   display: none;
 }
+body.firefox .firefox-only {
+  display: none;
+}
 
 /* https://design.firefox.com/photon/patterns/inactive.html */
 [disabled],