Indicate and disable currently-outdated features

src/action/configuration.css

@@ -150,6 +150,16 @@ label[for="filter"] {
   font-weight: normal;
 }
 
+.script:not(.disabled)[data-outdated="true"] .title::after {
+  content: "(outdated)";
+  margin-left: 0.5ch;
+  font-weight: normal;
+}
+
+.script[data-outdated="true"] .meta {
+  opacity: 0.6;
+}
+
 .script .note {
   padding: 1ch 2ch;
   margin: 0;

src/action/render_scripts.js

@@ -141,6 +141,7 @@ const renderScripts = async function () {
       title = scriptName,
       description = '',
       note = '',
+      outdated = false,
       icon = {},
       help = '',
       relatedTerms = [],
@@ -153,6 +154,7 @@ const renderScripts = async function () {
     const detailsElement = scriptTemplateClone.querySelector('details.script');
     detailsElement.dataset.relatedTerms = relatedTerms;
     detailsElement.dataset.deprecated = deprecated;
+    detailsElement.dataset.outdated = outdated;
 
     if (enabledScripts.includes(scriptName) === false) {
       detailsElement.classList.add('disabled');

src/content_scripts/main.js

@@ -89,12 +89,19 @@
     }
   };
 
-  const getInstalledScripts = async function () {
-    const url = browser.runtime.getURL('/features/_index.json');
-    const file = await fetch(url);
-    const installedScripts = await file.json();
-
-    return installedScripts;
+  const getInstalledEnabledScripts = async () => {
+    const { enabledScripts = [] } = await browser.storage.local.get('enabledScripts');
+
+    return (
+      await Promise.all(
+        enabledScripts.map(scriptName =>
+          fetch(browser.runtime.getURL(`/features/${scriptName}.json`))
+            .then(response => response.json())
+            .then(scriptManifest => scriptManifest.outdated ? false : scriptName)
+            .catch(() => false)
+        )
+      )
+    ).filter(Boolean);
   };
 
   const initMainWorld = () => new Promise(resolve => {
@@ -113,11 +120,9 @@
     browser.storage.onChanged.addListener(onStorageChanged);
 
     const [
-      installedScripts,
-      { enabledScripts = [] }
+      installedEnabledScripts
     ] = await Promise.all([
-      getInstalledScripts(),
-      browser.storage.local.get('enabledScripts'),
+      getInstalledEnabledScripts(),
       initMainWorld()
     ]);
 
@@ -127,9 +132,7 @@
      */
     await Promise.all(['css_map', 'language_data', 'user'].map(name => import(browser.runtime.getURL(`/utils/${name}.js`))));
 
-    installedScripts
-      .filter(scriptName => enabledScripts.includes(scriptName))
-      .forEach(runScript);
+    installedEnabledScripts.forEach(runScript);
   };
 
   const waitForReactLoaded = () => new Promise(resolve => {

src/features/panorama.json

@@ -2,6 +2,7 @@
   "title": "Panorama",
   "description": "Widescreen dashboard",
   "note": "This feature is not currently functional.",
+  "outdated": true,
   "icon": {
     "class_name": "ri-align-justify",
     "color": "white",

src/features/quote_replies.json

@@ -6,6 +6,8 @@
     "color": "white",
     "background_color": "#00b8ff"
   },
+  "note": "This feature is not currently functional.",
+  "outdated": true,
   "help": "https://github.com/AprilSylph/XKit-Rewritten/wiki/Features#quote-replies",
   "preferences": {
     "tagReplyingBlog": {