DEV: Make capabilities into a service

app/assets/javascripts/discourse/app/components/sidebar/footer.js

@@ -1,12 +1,8 @@
 import Component from "@glimmer/component";
-import { getOwner } from "discourse-common/lib/get-owner";
 import { inject as service } from "@ember/service";
 
 export default class SidebarFooter extends Component {
+  @service capabilities;
   @service site;
   @service siteSettings;
-
-  get capabilities() {
-    return getOwner(this).lookup("capabilities:main");
-  }
 }

app/assets/javascripts/discourse/app/initializers/auto-load-modules.js

@@ -20,7 +20,7 @@ export function autoLoadModules(container, registry) {
   let context = {
     siteSettings: container.lookup("service:site-settings"),
     keyValueStore: container.lookup("service:key-value-store"),
-    capabilities: container.lookup("capabilities:main"),
+    capabilities: container.lookup("service:capabilities"),
     currentUser: container.lookup("service:current-user"),
     site: container.lookup("service:site"),
     session: container.lookup("service:session"),

app/assets/javascripts/discourse/app/initializers/inject-objects.js

@@ -5,7 +5,8 @@ import deprecated from "discourse-common/lib/deprecated";
 
 export default {
   name: "inject-objects",
-  after: "export-application-global",
+  after: "sniff-capabilities",
+
   initialize(container, app) {
     // This is required for Ember CLI tests to work
     setDefaultOwner(app.__container__);

app/assets/javascripts/discourse/app/initializers/mobile-keyboard.js

@@ -6,7 +6,7 @@ export default {
 
   initialize(container) {
     const site = container.lookup("service:site");
-    this.capabilities = container.lookup("capabilities:main");
+    this.capabilities = container.lookup("service:capabilities");
 
     if (!this.capabilities.isIpadOS && !site.mobileView) {
       return;

app/assets/javascripts/discourse/app/initializers/post-decorations.js

@@ -58,7 +58,7 @@ export default {
         { id: "discourse-audio" }
       );
 
-      const caps = container.lookup("capabilities:main");
+      const caps = container.lookup("service:capabilities");
       if (caps.isSafari || caps.isIOS) {
         api.decorateCookedElement(
           (elem) => {

app/assets/javascripts/discourse/app/initializers/sniff-capabilities.js

@@ -0,0 +1,15 @@
+export default {
+  name: "sniff-capabilities",
+  after: "export-application-global",
+
+  initialize(container) {
+    const caps = container.lookup("service:capabilities");
+    const html = document.documentElement;
+
+    if (caps.touch) {
+      html.classList.add("touch", "discourse-touch");
+    } else {
+      html.classList.add("no-touch", "discourse-no-touch");
+    }
+  },
+};

app/assets/javascripts/discourse/app/initializers/webview-background.js

@@ -7,7 +7,7 @@ export default {
   after: "inject-objects",
 
   initialize(container) {
-    const caps = container.lookup("capabilities:main");
+    const caps = container.lookup("service:capabilities");
     if (caps.isAppWebview) {
       window
         .matchMedia("(prefers-color-scheme: dark)")

app/assets/javascripts/discourse/app/lib/register-service-worker.js

@@ -8,7 +8,7 @@ export function registerServiceWorker(
   const isSecured = document.location.protocol === "https:";
 
   if (isSecured && "serviceWorker" in navigator) {
-    const caps = container.lookup("capabilities:main");
+    const caps = container.lookup("service:capabilities");
     const isAppleBrowser =
       caps.isSafari ||
       (caps.isIOS && !window.matchMedia("(display-mode: standalone)").matches);

app/assets/javascripts/discourse/app/pre-initializers/inject-discourse-objects.js

@@ -58,6 +58,11 @@ export default {
 
     app.register("location:discourse-location", DiscourseLocation);
 
+    const caps = container.lookup("service:capabilities");
+    app.register("capabilities:main", caps, { instantiate: false });
+    app.inject("controller", "capabilities", "service:capabilities");
+    app.inject("component", "capabilities", "service:capabilities");
+
     ALL_TARGETS.forEach((t) => {
       app.inject(t, "appEvents", "service:app-events");
       app.inject(t, "pmTopicTrackingState", "service:pm-topic-tracking-state");

app/assets/javascripts/discourse/app/pre-initializers/sniff-capabilities.js

@@ -1,61 +0,0 @@
-// Initializes an object that lets us know about browser's capabilities
-
-const APPLE_NAVIGATOR_PLATFORMS = /iPhone|iPod|iPad|Macintosh|MacIntel/;
-
-const APPLE_USERAGENTDATA_PLATFORM = /macOS/;
-
-export default {
-  name: "sniff-capabilities",
-
-  initialize(_, app) {
-    const html = document.querySelector("html");
-    const touch = navigator.maxTouchPoints > 1 || "ontouchstart" in window;
-    const ua = navigator.userAgent;
-    const caps = { touch };
-
-    if (touch) {
-      html.classList.add("touch", "discourse-touch");
-    } else {
-      html.classList.add("no-touch", "discourse-no-touch");
-    }
-
-    caps.isAndroid = ua.includes("Android");
-    caps.isWinphone = ua.includes("Windows Phone");
-    caps.isOpera = !!window.opera || ua.includes(" OPR/");
-    caps.isFirefox = ua.includes("Firefox");
-    caps.isChrome = !!window.chrome && !caps.isOpera;
-    caps.isSafari =
-      /Constructor/.test(window.HTMLElement) ||
-      window.safari?.pushNotification.toString() ===
-        "[object SafariRemoteNotification]";
-    caps.isIpadOS = ua.includes("Mac OS") && !/iPhone|iPod/.test(ua) && touch;
-    caps.isIOS =
-      (/iPhone|iPod/.test(navigator.userAgent) || caps.isIpadOS) &&
-      !window.MSStream;
-
-    caps.isApple =
-      APPLE_NAVIGATOR_PLATFORMS.test(navigator.platform) ||
-      (navigator.userAgentData &&
-        APPLE_USERAGENTDATA_PLATFORM.test(navigator.userAgentData.platform));
-
-    caps.hasContactPicker =
-      "contacts" in navigator && "ContactsManager" in window;
-    caps.canVibrate = "vibrate" in navigator;
-    caps.isPwa =
-      window.matchMedia("(display-mode: standalone)").matches ||
-      window.navigator.standalone ||
-      document.referrer.includes("android-app://");
-
-    caps.isiOSPWA = caps.isPwa && caps.isIOS;
-
-    caps.wasLaunchedFromDiscourseHub =
-      window.location.search.includes("discourse_app=1");
-    caps.isAppWebview = window.ReactNativeWebView !== undefined;
-
-    // Inject it
-    app.register("capabilities:main", caps, { instantiate: false });
-    app.inject("view", "capabilities", "capabilities:main");
-    app.inject("controller", "capabilities", "capabilities:main");
-    app.inject("component", "capabilities", "capabilities:main");
-  },
-};

app/assets/javascripts/discourse/app/services/capabilities.js

@@ -0,0 +1,47 @@
+import Service from "@ember/service";
+
+const APPLE_NAVIGATOR_PLATFORMS = /iPhone|iPod|iPad|Macintosh|MacIntel/;
+const APPLE_USER_AGENT_DATA_PLATFORM = /macOS/;
+
+// Lets us know about browser's capabilities
+export default Service.extend({
+  init() {
+    this._super(...arguments);
+
+    const ua = navigator.userAgent;
+
+    this.touch = navigator.maxTouchPoints > 1 || "ontouchstart" in window;
+
+    this.isAndroid = ua.includes("Android");
+    this.isWinphone = ua.includes("Windows Phone");
+    this.isIpadOS =
+      ua.includes("Mac OS") && !/iPhone|iPod/.test(ua) && this.touch;
+    this.isIOS =
+      (/iPhone|iPod/.test(navigator.userAgent) || this.isIpadOS) &&
+      !window.MSStream;
+    this.isApple =
+      APPLE_NAVIGATOR_PLATFORMS.test(navigator.platform) ||
+      (navigator.userAgentData &&
+        APPLE_USER_AGENT_DATA_PLATFORM.test(navigator.userAgentData.platform));
+
+    this.isOpera = !!window.opera || ua.includes(" OPR/");
+    this.isFirefox = ua.includes("Firefox");
+    this.isChrome = !!window.chrome && !this.isOpera;
+    this.isSafari =
+      /Constructor/.test(window.HTMLElement) ||
+      window.safari?.pushNotification.toString() ===
+        "[object SafariRemoteNotification]";
+
+    this.hasContactPicker =
+      "contacts" in navigator && "ContactsManager" in window;
+    this.canVibrate = "vibrate" in navigator;
+    this.isPwa =
+      window.matchMedia("(display-mode: standalone)").matches ||
+      window.navigator.standalone ||
+      document.referrer.includes("android-app://");
+    this.isiOSPWA = this.isPwa && this.isIOS;
+    this.wasLaunchedFromDiscourseHub =
+      window.location.search.includes("discourse_app=1");
+    this.isAppWebview = window.ReactNativeWebView !== undefined;
+  },
+});

app/assets/javascripts/discourse/app/widgets/widget.js

@@ -143,7 +143,7 @@ export default class Widget {
     this.site = register.lookup("service:site");
     this.siteSettings = register.lookup("service:site-settings");
     this.currentUser = register.lookup("service:current-user");
-    this.capabilities = register.lookup("capabilities:main");
+    this.capabilities = register.lookup("service:capabilities");
     this.store = register.lookup("service:store");
     this.appEvents = register.lookup("service:app-events");
     this.keyValueStore = register.lookup("service:key-value-store");

app/assets/javascripts/discourse/tests/acceptance/sidebar-user-test.js

@@ -154,7 +154,7 @@ acceptance(
     });
 
     test("button to toggle between mobile and desktop view on touch devices ", async function (assert) {
-      const capabilities = this.container.lookup("capabilities:main");
+      const capabilities = this.container.lookup("service:capabilities");
       capabilities.touch = true;
 
       await visit("/");