chore: rename "scripts" to "features" in code

docs/Chapter 4.0 - Feature framework.md

@@ -22,7 +22,7 @@ The stylesheet file is a normal CSS file which, assuming the module file correct
 `/src/features/example/feature.json`
 ```json
 {
-  "title": "Example Script",
+  "title": "Example Feature",
   "description": "This doesn't do anything useful.",
   "icon": {
     "class_name": "ri-terminal-line",

docs/Chapter 4.1 - Feature metadata.md

@@ -8,7 +8,7 @@ Each feature requires a metadata file in order to be displayed in the configurat
 - Type: String
 - Required: No
 
-Human-readable title for this feature. Defaults to the script's filename if not provided.
+Human-readable title for this feature. Defaults to the feature's subfolder name if not provided.
 
 ### `"description"`
 - Type: String
@@ -50,15 +50,15 @@ URL which points to a usage guide or extended description for the feature.
 - Type: Array
 - Required: No
 
-An optional array of strings related to this script that a user might search for. Case insensitive.
+An optional array of strings related to this feature that a user might search for. Case insensitive.
 
 ### `"preferences"`
 - Type: Object
 - Required: No
 
 Object with 1 or more custom keys; each key is used internally as a preference's name.
 
-It is recommended to use camelCase for each preference name, so that the script can destructure each preference without renaming it.
+It is recommended to use camelCase for each preference name, so that the feature can destructure each preference without renaming it.
 
 #### `"preferences"`: \<preference name\>
 - Type: Object
@@ -85,7 +85,7 @@ For `"select"`-type preferences, an array of objects each with `"value"` and `"l
 - Type: String
 - Required: Yes, if `type` is `"iframe"`
 
-For `"iframe"`-type preferences, a relative address to be embedded in the script's preference list. Unused for other preference types.
+For `"iframe"`-type preferences, a relative address to be embedded in the feature's preference list. Unused for other preference types.
 
 #### `"preferences"`: \<preference name\>: `"default"`
 - Type: Any

docs/Chapter 4.2 - Feature modules.md

@@ -6,7 +6,7 @@ Modules may export any of the following:
 - Type: Async Function
 - Required: No
 
-The main function of the feature. Will be called whenever the user enables the feature, even if the tab(s) XKit is running in is/are not focused. Will also be called upon pageload if the script is enabled.
+The main function of the feature. Will be called whenever the user enables the feature, even if the tab(s) XKit is running in is/are not focused. Will also be called upon pageload if the feature is enabled.
 
 ## `clean()`
 - Type: Async Function

src/action/configuration.css

@@ -28,7 +28,7 @@ label[for="filter"] {
   align-items: center;
 }
 
-.scripts:empty::before {
+.features:empty::before {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -40,16 +40,16 @@ label[for="filter"] {
   font-weight: 700;
 }
 
-.script.search-hidden,
-.script.filter-hidden {
+.feature.search-hidden,
+.feature.filter-hidden {
   display: none;
 }
 
-.script {
+.feature {
   border-bottom: 1px dotted rgb(var(--active-grey));
 }
 
-.script summary {
+.feature summary {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
@@ -59,23 +59,23 @@ label[for="filter"] {
   cursor: pointer;
 }
 
-.script summary::-webkit-details-marker {
+.feature summary::-webkit-details-marker {
   display: none;
 }
 
-.script.disabled summary {
+.feature.disabled summary {
   color: rgba(var(--black), .8);
 }
 
-.script summary:hover {
+.feature summary:hover {
   background-color: rgb(var(--passive-grey));
 }
 
-.script summary:focus {
+.feature summary:focus {
   background-color: rgb(var(--active-grey));
 }
 
-.script .icon {
+.feature .icon {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -85,41 +85,41 @@ label[for="filter"] {
   border-radius: 5px;
 }
 
-.script .icon i {
+.feature .icon i {
   font-size: 26px;
 }
 
-.script .icon,
-.script .meta,
-.script .help {
+.feature .icon,
+.feature .meta,
+.feature .help {
   margin-right: 1ch;
 }
 
-.script .icon,
-.script .buttons {
+.feature .icon,
+.feature .buttons {
   flex-shrink: 0;
 }
 
-.script .buttons {
+.feature .buttons {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-left: auto;
 }
 
-.script .help {
+.feature .help {
   display: flex;
   justify-content: center;
   align-items: center;
 
   text-decoration: none;
 }
 
-.script .help:not([href]) i {
+.feature .help:not([href]) i {
   display: none;
 }
 
-.script .help:not([href])::before {
+.feature .help:not([href])::before {
   padding: 0 1ex;
   border-radius: 1em;
 
@@ -129,28 +129,28 @@ label[for="filter"] {
   line-height: 1.5;
 }
 
-.script .help i {
+.feature .help i {
   font-size: 1.25rem;
 }
 
-.script .title,
-.script .description {
+.feature .title,
+.feature .description {
   margin: 0;
 }
 
-.script.disabled .title::after {
+.feature.disabled .title::after {
   content: "(disabled)";
   margin-left: 0.5ch;
   font-weight: normal;
 }
 
-.script:not(.disabled)[data-deprecated="true"] .title::after {
+.feature:not(.disabled)[data-deprecated="true"] .title::after {
   content: "(deprecated)";
   margin-left: 0.5ch;
   font-weight: normal;
 }
 
-.script .note {
+.feature .note {
   padding: 1ch 2ch;
   margin: 0;
 
@@ -159,48 +159,48 @@ label[for="filter"] {
   text-align: center;
 }
 
-.script .note:empty {
+.feature .note:empty {
   display: none;
 }
 
-.script ul.preferences {
+.feature ul.preferences {
   padding: 0 0.5ch;
   margin: 1ch 0;
 
   list-style-type: none;
 }
 
-.script .preferences:empty {
+.feature .preferences:empty {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.script .preferences:empty::before {
-  content: "No preferences available for this script.";
+.feature .preferences:empty::before {
+  content: "No preferences available for this feature.";
 }
 
-.script li {
+.feature li {
   display: flex;
   align-items: center;
   padding: 0.5ch;
 }
 
-.script li.search-highlighted {
+.feature li.search-highlighted {
   background-color: rgb(var(--search-highlight));
 }
 
-.script input[type="text"] {
+.feature input[type="text"] {
   box-sizing: border-box;
   width: 65%;
 }
 
-.script input[type="text"],
-.script select {
+.feature input[type="text"],
+.feature select {
   margin-left: auto;
 }
 
-.script iframe {
+.feature iframe {
   border: none;
   width: 100%;
 }

src/action/popup.html

@@ -41,7 +41,7 @@
         <div class="no-results">
           <p>No results found.</p>
         </div>
-        <div class="scripts"></div>
+        <div class="features"></div>
       </section>
       <section id="backup">
         <details id="export" open>
@@ -84,8 +84,8 @@ <h4>Related projects</h4>
       </section>
     </main>
 
-    <template id="script">
-      <details class="script">
+    <template id="feature">
+      <details class="feature">
         <summary>
           <div class="icon">
             <i class="ri-fw"></i>
@@ -151,7 +151,7 @@ <h4 class="title"></h4>
     <script src="/lib/jquery.min.js"></script>
     <script src="/lib/spectrum.js"></script>
     <script src="popup.js"></script>
-    <script src="render_scripts.js"></script>
     <script src="render_backup.js"></script>
+    <script src="render_features.js"></script>
   </body>
 </html>

src/action/popup.js

@@ -1,6 +1,6 @@
 const checkForNoResults = function () {
   const nothingFound =
-    [...document.querySelectorAll('details.script')]
+    [...document.querySelectorAll('details.feature')]
       .every(detailsElement => detailsElement.classList.contains('search-hidden') || detailsElement.classList.contains('filter-hidden'));
 
   document.querySelector('.no-results').style.display = nothingFound ? 'flex' : 'none';
@@ -17,7 +17,7 @@ $('nav a').on('click', event => {
 document.getElementById('search').addEventListener('input', event => {
   const query = event.currentTarget.value.toLowerCase();
 
-  [...document.querySelectorAll('details.script')]
+  [...document.querySelectorAll('details.feature')]
     .forEach(detailsElement => {
       if (
         detailsElement.textContent.toLowerCase().includes(query) ||
@@ -29,7 +29,7 @@ document.getElementById('search').addEventListener('input', event => {
       }
     });
 
-  [...document.querySelectorAll('details.script li')]
+  [...document.querySelectorAll('details.feature li')]
     .forEach(preferenceElement => {
       if (
         query.length >= 3 && preferenceElement.textContent.toLowerCase().includes(query)
@@ -46,19 +46,19 @@ document.getElementById('search').addEventListener('input', event => {
 document.getElementById('filter').addEventListener('input', event => {
   switch (event.currentTarget.value) {
     case 'all':
-      $('.script.filter-hidden').removeClass('filter-hidden');
+      $('.feature.filter-hidden').removeClass('filter-hidden');
       break;
     case 'enabled':
-      $('.script.disabled').addClass('filter-hidden');
-      $('.script:not(.disabled)').removeClass('filter-hidden');
+      $('.feature.disabled').addClass('filter-hidden');
+      $('.feature:not(.disabled)').removeClass('filter-hidden');
       break;
     case 'disabled':
-      $('.script:not(.disabled)').addClass('filter-hidden');
-      $('.script.disabled').removeClass('filter-hidden');
+      $('.feature:not(.disabled)').addClass('filter-hidden');
+      $('.feature.disabled').removeClass('filter-hidden');
       break;
   }
 
-  $('.script[open].filter-hidden').removeAttr('open');
+  $('.feature[open].filter-hidden').removeAttr('open');
 
   checkForNoResults();
 });