Remove the getting of icons from github

Author: jsaq007

package.json

@@ -1,6 +1,7 @@
 {
   "scripts": {
-    "linter": "npx eslint ./services/*/client/source/class/*/"
+    "linter": "npx eslint ./services/*/client/source/class/*/",
+    "linter-fix": "npx eslint ./services/*/client/source/class/*/ --fix"
   },
   "devDependencies": {
     "babel-eslint": "^10.1.0",

services/static-webserver/client/source/boot/index.html

@@ -24,7 +24,7 @@
   <meta name="format-detection" content="telephone=no"/>
 
   <!-- Shortcut icon setup -->
-  <link rel="shortcut icon" type="image/png" href="replace_me_favicon_uri">
+  <link rel="icon" type="image/png" href="replace_me_favicon_uri">
 
   <!-- Manifest -->
   <link rel="manifest" href="replace_me_manifest_uri">

services/static-webserver/client/source/class/osparc/Application.js

@@ -53,8 +53,10 @@ qx.Class.define("osparc.Application", {
       this.__preventAutofillBrowserStyles();
       this.__loadCommonCss();
       this.__updateTabName();
-      this.__updateMetaTags();
-
+      if (osparc.utils.Utils.isDevelopmentPlatform()) {
+        this.__updateMetaTags();
+        this.__setDeviceSpecificIcons();
+      }
       if (qx.core.Environment.get("product.name") === "s4lengine") {
         const view = new osparc.auth.BlurredLoginPageS4LEngineering();
         this.__loadView(view);
@@ -216,226 +218,158 @@ qx.Class.define("osparc.Application", {
       }
     },
 
-    __updateMetaTags: function() {
-      // Update title and meta tags
+
+
+    __setDeviceSpecificIcons: function() {
+      const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+      const isAndroid = /android/i.test(navigator.userAgent);
+      const isWindows = /windows/i.test(navigator.userAgent);
+      // const productColor = qx.theme.manager.Color.getInstance().resolve("product-color");
+      // const backgroundColor = qx.theme.manager.Color.getInstance().resolve("primary-background-color");
+      // default icons
+      this.__updateMetaTags();
+      this.__setDefaultIcons()
+      if (isIOS) {
+        this.__setIOSpIcons();
+      } else if (isAndroid) {
+        this.__setGoogleIcons();
+      } else if (isWindows) {
+      //   this.__updateBrowserConfig(this.__getProductMetaData().productColor);
+      }
+    },
+
+    __getProductMetaData: function() {
+      let productName = osparc.product.Utils.getProductName();
+      if (osparc.product.Utils.isS4LProduct() || osparc.product.Utils.isProduct("s4llite")) {
+        productName = "s4l";
+      } else if (osparc.product.Utils.isProduct("tis") || osparc.product.Utils.isProduct("tiplite")) {
+        productName = "tis";
+      }
+
       const productColor = qx.theme.manager.Color.getInstance().resolve("product-color");
       const backgroundColor = qx.theme.manager.Color.getInstance().resolve("primary-background-color");
+      return {
+        productName: productName,
+        productColor: productColor,
+        backgroundColor: backgroundColor
+      }
+    },
 
+    __updateMetaTags: function() {
+      // check device type and only set the icons for the divice type
+      // i.e iOS, Android or windows etc
       const themeColorMeta = document.querySelector("meta[name='theme-color']");
       const tileColorMeta = document.querySelector("meta[name='msapplication-TileColor']");
       const tileImageMeta = document.querySelector("meta[name='msapplication-TileImage']");
-      const maskIconMeta = document.querySelector("meta[name='mask-icon']");
+      const maskIconMeta = document.querySelector("meta[rel='mask-icon']");
+      const shortIconMeta = document.querySelector("link[rel='icon']");
+      const manifestLink = document.querySelector("link[rel='manifest']");
+      const msApplicationLink = document.querySelector("link[rel='msapplication-config']");
+
+      const {productName, productColor} = this.__getProductMetaData();
 
       if (themeColorMeta) {
         themeColorMeta.setAttribute("content", productColor);
       }
 
       if (tileColorMeta && tileImageMeta) {
-        const maskIcon = osparc.product.Utils.getManifestIconUrl("ms-icon-150x150.png")
-        Promise.resolve(maskIcon)
-          .then(resolvedUrl => {
-            // Create the manifest data object with resolved URLs
-            tileColorMeta.setAttribute("content", productColor);
-            tileImageMeta.setAttribute("content", resolvedUrl);
-          })
-          .catch(error => {
-            console.error("Failed to resolve icon URLs:", error);
-          });
+        const maskIcon = `../resource/osparc/${productName}/icons/ms-icon-150x150.png`
+        tileColorMeta.setAttribute("content", productColor);
+        tileImageMeta.setAttribute("content", maskIcon);
       }
-      if (maskIconMeta) {
-        const maskIcon = osparc.product.Utils.getManifestIconUrl("safari-pinned-tab.png", "apple-icon-fallback.png")
-        Promise.resolve(maskIcon)
-          .then(resolvedUrl => {
-            // Create the manifest data object with resolved URLs
-            maskIconMeta.setAttribute("color", productColor);
-            maskIconMeta.setAttribute("href", resolvedUrl);
-          })
-          .catch(error => {
-            console.error("Failed to resolve icon URLs:", error);
-          });
+
+      if (shortIconMeta) {
+        const maskIconPath = `../resource/osparc/${productName}/icons/favicon-96x96.png`
+        shortIconMeta.setAttribute("href", maskIconPath);
       }
 
-      // Update app icons
-      this.__updateAppIcons();
+      if (maskIconMeta) {
+        const maskIconPath = `../resource/osparc/${productName}/apple-icon-fallback.png`
+        maskIconMeta.setAttribute("href", maskIconPath);
+      }
 
-      // Update manifest
-      this.__updateManifest(productColor, backgroundColor);
+      if (manifestLink) {
+        const manifestPath = `../resource/osparc/${productName}/manifest.json`
+        manifestLink.setAttribute("href", manifestPath);
+      }
 
-      // Update browserconfig
-      this.__updateBrowserConfig(productColor);
+      if (msApplicationLink) {
+        const msApplicationPath = `../resource/osparc/${productName}/broswserconfig.xml`
+        msApplicationLink.setAttribute("href", msApplicationPath);
+      }
     },
 
-    __updateAppIcons: function() {
-      // Array of promises to resolve icon URLs for Apple Touch Icons
-      const appleIconUrls = [
-        osparc.product.Utils.getManifestIconUrl("apple-icon-57x57.png", "apple-icon-fallback.png"),
-        osparc.product.Utils.getManifestIconUrl("apple-icon-60x60.png", "apple-icon-fallback.png"),
-        osparc.product.Utils.getManifestIconUrl("apple-icon-72x72.png", "apple-icon-fallback.png"),
-        osparc.product.Utils.getManifestIconUrl("apple-icon-76x76.png", "apple-icon-fallback.png"),
-        osparc.product.Utils.getManifestIconUrl("apple-icon-114x114.png", "apple-icon-fallback.png"),
-        osparc.product.Utils.getManifestIconUrl("apple-icon-120x120.png", "apple-icon-fallback.png"),
-        osparc.product.Utils.getManifestIconUrl("apple-icon-144x144.png", "apple-icon-fallback.png"),
-        osparc.product.Utils.getManifestIconUrl("apple-icon-152x152.png", "apple-icon-fallback.png"),
-        osparc.product.Utils.getManifestIconUrl("apple-icon-180x180.png", "apple-icon-fallback.png")
-      ];
-
-      // Array of promises to resolve icon URLs for Favicons
+    __setDefaultIcons: function() {
+      const {productName} = this.__getProductMetaData()
+      const resourcePath = `../resource/osparc/${productName}/icons`;
       const favIconUrls = [
-        osparc.product.Utils.getManifestIconUrl("android-icon-192x192.png"),
-        osparc.product.Utils.getManifestIconUrl("favicon-32x32.png"),
-        osparc.product.Utils.getManifestIconUrl("favicon-96x96.png"),
-        osparc.product.Utils.getManifestIconUrl("favicon-16x16.png")
+        "favicon-16x16.png",
+        "favicon-32x32.png",
+        "favicon-96x96.png"
       ];
 
-      // Wait for all icon URLs to be resolved
-      Promise.all([...appleIconUrls, ...favIconUrls])
-        .then(resolvedUrls => {
-          const appleResolvedUrls = resolvedUrls.slice(0, appleIconUrls.length);
-          const favResolvedUrls = resolvedUrls.slice(appleIconUrls.length);
-
-          // Remove existing Apple Touch Icons and Favicons
-          document.querySelectorAll("link[rel='apple-touch-icon'], link[rel='icon']").forEach(link => link.remove());
-
-          // Create and insert new Apple Touch Icon links
-          const appleIconSizes = [
-            "57x57", "60x60", "72x72", "76x76", "114x114", "120x120", "144x144", "152x152", "180x180"
-          ];
-          appleResolvedUrls.forEach((url, index) => {
-            let link = document.createElement("link");
-            link.setAttribute("rel", "apple-touch-icon");
-            link.setAttribute("sizes", appleIconSizes[index]);
-            link.setAttribute("href", url);
-            document.head.appendChild(link);
-          });
-
-          // Create and insert new Favicon links
-          const favIconSizes = [
-            "192x192", "32x32", "96x96", "16x16"
-          ];
-          favResolvedUrls.forEach((url, index) => {
-            let link = document.createElement("link");
-            link.setAttribute("rel", "icon");
-            link.setAttribute("type", "image/png");
-            link.setAttribute("sizes", favIconSizes[index]);
-            link.setAttribute("href", url);
-            document.head.appendChild(link);
-          });
-        })
-        .catch(error => {
-          console.error("Failed to resolve icon URLs:", error);
-        });
+      const iconSizes = [
+        "16x16", "32x32", "96x96"
+      ];
+      favIconUrls.forEach((url, index) => {
+        let link = document.createElement("link");
+        link.setAttribute("rel", "icon");
+        link.setAttribute("sizes", iconSizes[index]);
+        link.setAttribute("type", "image/png");
+        link.setAttribute("href", resourcePath + url);
+        document.head.appendChild(link);
+      });
     },
 
-    __updateManifest: function(themeColor, backgroundColor) {
-      const productName = osparc.product.Utils.getProductName();
-      let manifestLink = document.querySelector("link[rel='manifest']");
-
-      // Array of promises to resolve icon URLs
-      const iconUrls = [
-        osparc.product.Utils.getManifestIconUrl("android-icon-36x36.png"),
-        osparc.product.Utils.getManifestIconUrl("android-icon-48x48.png"),
-        osparc.product.Utils.getManifestIconUrl("android-icon-72x72.png"),
-        osparc.product.Utils.getManifestIconUrl("android-icon-96x96.png"),
-        osparc.product.Utils.getManifestIconUrl("android-icon-144x144.png"),
-        osparc.product.Utils.getManifestIconUrl("android-icon-192x192.png")
+    __setGoogleIcons: function() {
+      const {productName} = this.__getProductMetaData()
+      const resourcePath = `../resource/osparc/${productName}/icons`;
+
+      const favIconUrls = [
+        "android-icon-48x48.png",
+        "android-icon-192x192.png",
       ];
 
-      // Wait for all icon URLs to be resolved
-      Promise.all(iconUrls)
-        .then(resolvedUrls => {
-          // Create the manifest data object with resolved URLs
-          const manifestData = {
-            shortName: productName,
-            name: productName,
-            icons: [
-              {
-                src: resolvedUrls[0],
-                sizes: "36x36",
-                type: "image/png",
-                density: "0.75"
-              },
-              {
-                src: resolvedUrls[1],
-                sizes: "48x48",
-                type: "image/png",
-                density: "1.0"
-              },
-              {
-                src: resolvedUrls[2],
-                sizes: "72x72",
-                type: "image/png",
-                density: "1.5"
-              },
-              {
-                src: resolvedUrls[3],
-                sizes: "96x96",
-                type: "image/png",
-                density: "2.0"
-              },
-              {
-                src: resolvedUrls[4],
-                sizes: "144x144",
-                type: "image/png",
-                density: "3.0"
-              },
-              {
-                src: resolvedUrls[5],
-                sizes: "192x192",
-                type: "image/png",
-                density: "4.0"
-              }
-            ],
-            display: "standalone",
-            themeColor: themeColor,
-            backgroundColor: backgroundColor
-          };
-
-          const blob = new Blob([JSON.stringify(manifestData)], { type: "application/json" });
-          const manifestURL = URL.createObjectURL(blob);
-
-          // Create or update the manifest link in the document head
-          if (!manifestLink) {
-            manifestLink = document.createElement("link");
-            manifestLink.setAttribute("rel", "manifest");
-            document.head.appendChild(manifestLink);
-          }
-          manifestLink.setAttribute("href", manifestURL);
-        })
-        .catch(error => {
-          console.error("Failed to resolve icon URLs:", error);
-        });
+      const iconSizes = [
+        "48x48", "192x192"
+      ];
+      favIconUrls.forEach((url, index) => {
+        let link = document.createElement("link");
+        link.setAttribute("rel", "icon");
+        link.setAttribute("sizes", iconSizes[index]);
+        link.setAttribute("type", "image/png");
+        link.setAttribute("href", resourcePath + url);
+        document.head.appendChild(link);
+      });
     },
 
-    // Method to dynamically update the browserconfig
-    __updateBrowserConfig: function(tileColor) {
-      // Resolve the icon URL asynchronously
-      osparc.product.Utils.getManifestIconUrl("ms-icon-150x150.png")
-        .then(msTileIcon => {
-          const browserconfigData = `<?xml version="1.0" encoding="utf-8"?>
-      <browserconfig>
-        <msapplication>
-          <tile>
-            <square150x150logo src="${msTileIcon}"/>
-            <TileColor>${tileColor}</TileColor>
-          </tile>
-        </msapplication>
-      </browserconfig>`;
-
-          const blob = new Blob([browserconfigData], { type: "application/xml" });
-          const browserconfigURL = URL.createObjectURL(blob);
-
-          // Check if the meta tag exists, create it if not
-          let browserConfigLink = document.querySelector("meta[name='msapplication-config']");
-          if (!browserConfigLink) {
-            browserConfigLink = document.createElement("meta");
-            browserConfigLink.setAttribute("name", "msapplication-config");
-            document.head.appendChild(browserConfigLink);
-          }
-          browserConfigLink.setAttribute("content", browserconfigURL);
-        })
-        .catch(error => {
-          console.error("Failed to resolve msTileIcon URL:", error);
-        });
+    __setIOSpIcons: function() {
+      // Array of promises to resolve icon URLs for Apple Touch Icons
+      const {productName} = this.__getProductMetaData()
+      const resourcePath = `../resource/osparc/${productName}/icons`;
+
+      const appleIconUrls = [
+        "apple-icon-57x57.png",
+        "apple-icon-60x60.png",
+        "apple-icon-72x72.png",
+        "apple-icon-76x76.png",
+        "apple-icon-114x114.png",
+        "apple-icon-120x120.png",
+        "apple-icon-144x144.png",
+        "apple-icon-152x152.png",
+        "apple-icon-180x180.png"
+      ];
+
+      const appleIconSizes = [
+        "57x57", "60x60", "72x72", "76x76", "114x114", "120x120", "144x144", "152x152", "180x180"
+      ];
+      appleIconUrls.forEach((url, index) => {
+        let link = document.createElement("link");
+        link.setAttribute("rel", "apple-touch-icon");
+        link.setAttribute("sizes", appleIconSizes[index]);
+        link.setAttribute("href", resourcePath + url);
+        document.head.appendChild(link);
+      });
     },
 
     __startupChecks: function() {