info

Author: rgantzos

extras/icons/info.svg

@@ -375,4 +375,47 @@ input:checked + .slider:before {
 span.new-feature-tag.beta {
   background-color: #fc8c4f;
   cursor: pointer !important;
+}
+
+.warning-component {
+  background-color: #fc8c4f20;
+  border: 1.5px solid #fc8c4f;
+  border-radius: .5rem;
+  padding: .5rem;
+  font-size: .8rem;
+  font-weight: 600;
+  margin-top: .5rem;
+  display: flex;
+  align-items: center;
+  border-bottom-width: 3px;
+  line-height: 1.2rem;
+  color: var(--primary-color);
+}
+
+.warning-component img {
+  height: 1rem;
+  margin-right: 0.5rem;
+  margin-inline-end: 10px;
+  transform: scale(1.15);
+}
+
+.info-component {
+  background-color: #fcd44f20;
+  border: 1.5px solid #fcd44f;
+  border-radius: .5rem;
+  padding: .5rem;
+  font-size: .8rem;
+  margin-top: .5rem;
+  display: flex;
+  align-items: center;
+  border-bottom-width: 3px;
+  line-height: 1.2rem;
+  color: var(--primary-color);
+}
+
+.info-component img {
+  height: 1rem;
+  margin-right: 0.5rem;
+  margin-inline-end: 10px;
+  transform: scale(1.15);
 }

extras/icons/warning.svg

@@ -601,13 +601,13 @@ async function getFeatures() {
       span.textContent = "Beta";
       span.className = "new-feature-tag beta";
       div.appendChild(span);
-      div.addEventListener("click", function() {
+      span.addEventListener("click", function () {
         ScratchTools.modals.create({
           title: "Beta feature",
           description:
             "This feature is currently in a beta stage, and may have small bugs that weren't noticed during testing. There may also be changes/improvements to come soon.",
         });
-      })
+      });
     }
 
     var label = document.createElement("label");
@@ -801,6 +801,8 @@ async function getFeatures() {
     });
     div.appendChild(span);
 
+    div.appendChild(generateComponents(feature.components || []));
+
     if (
       feature.versionAdded?.replace("v", "") ===
       chrome.runtime.getManifest().version.toString()
@@ -1252,3 +1254,61 @@ localizationSelectors.forEach(function (item) {
     );
   }
 });
+
+function generateComponents(components) {
+  let div = document.createElement("div");
+  div.classList.add("feature-components");
+
+  components?.forEach(function (el) {
+    let element = document.createElement("div");
+    if (el.type === "warning") {
+      element.className = "warning-component";
+
+      let img = document.createElement("img");
+      img.src = "/extras/icons/warning.svg";
+
+      element.textContent = el.content;
+
+      element.prepend(img);
+    }
+
+    if (el.type === "info") {
+      element.className = "info-component";
+
+      let img = document.createElement("img");
+      img.src = "/extras/icons/info.svg";
+
+      element.textContent = el.content;
+
+      element.prepend(img);
+    }
+
+    if (el.if) {
+      let conditions = [];
+
+      el.if.conditions?.forEach(function (cond) {
+        let value = false;
+        if (cond.type === "os") {
+          if (navigator.userAgent.includes(cond.value)) {
+            value = true;
+          }
+        }
+        conditions.push(value);
+      });
+
+      if (el.if.type === "any") {
+        if (!!conditions.find((cond) => cond)) {
+          div.appendChild(element);
+        }
+      } else if (el.if.type === "all") {
+        if (conditions.find((cond) => !cond) === undefined) {
+          div.appendChild(element);
+        }
+      }
+    } else {
+      div.appendChild(element);
+    }
+  });
+
+  return div;
+}

extras/popup/popup.css

@@ -720,4 +720,47 @@ body[data-filter="Egg"] .feature[data-type*="Egg"] {
 span.new-feature-tag.beta {
   background-color: #fc8c4f;
   cursor: pointer !important;
+}
+
+.warning-component {
+  background-color: #fc8c4f20;
+  border: 1.5px solid #fc8c4f;
+  border-radius: .5rem;
+  padding: .5rem;
+  font-size: .8rem;
+  font-weight: 600;
+  margin-top: .5rem;
+  display: flex;
+  align-items: center;
+  border-bottom-width: 3px;
+  line-height: 1.2rem;
+  color: var(--primary-color);
+}
+
+.warning-component img {
+  height: 1rem;
+  margin-right: 0.5rem;
+  margin-inline-end: 10px;
+  transform: scale(1.15);
+}
+
+.info-component {
+  background-color: #fcd44f20;
+  border: 1.5px solid #fcd44f;
+  border-radius: .5rem;
+  padding: .5rem;
+  font-size: .8rem;
+  margin-top: .5rem;
+  display: flex;
+  align-items: center;
+  border-bottom-width: 3px;
+  line-height: 1.2rem;
+  color: var(--primary-color);
+}
+
+.info-component img {
+  height: 1rem;
+  margin-right: 0.5rem;
+  margin-inline-end: 10px;
+  transform: scale(1.15);
 }

extras/popup/popup.js

@@ -2,12 +2,21 @@
   "title": "Opacity Slider",
   "description": "Change the opacity of objects in the paint editor.",
   "credits": [
-    { "username": "IncognitoOrange", "url": "https://scratch.mit.edu/users/IncognitoOrange/" },
+    {
+      "username": "IncognitoOrange",
+      "url": "https://scratch.mit.edu/users/IncognitoOrange/"
+    },
     { "username": "rgantzos", "url": "https://scratch.mit.edu/users/rgantzos/" }
   ],
   "type": ["Editor"],
   "tags": ["New", "Featured", "Beta"],
   "dynamic": true,
   "scripts": [{ "file": "script.js", "runOn": "/projects/*" }],
-  "styles": [{ "file": "style.css", "runOn": "/projects/*" }]
+  "styles": [{ "file": "style.css", "runOn": "/projects/*" }],
+  "components": [
+    {
+      "type": "warning",
+      "content": "The slider, although located in the fill modal, controls the opacity of the entire shape, including the outline."
+    }
+  ]
 }