A few small changes

Author: rgantzos

features/outline-shape-options/data.json

@@ -1,6 +1,6 @@
 {
-  "title": "Outline Shape Options",
-  "description": "Change the shape of the corners of the object's outline in the Paint Editor.",
+  "title": "Customizable Shape Outlines",
+  "description": "Adds more options in the outline dropdown to allow you to customize the shape of the outline, such as making corners round.",
   "credits": [
     {
       "username": "Masaabu-YT",

features/outline-shape-options/script.js

@@ -1,18 +1,8 @@
 export default async function ({ feature, console }) {
   const icons = {
-    Cap: [
-      "butt",
-      "round",
-      "square"
-    ],
-    Join: [
-      "miter",
-      "round",
-      "bevel",
-      "arcs",
-      "miter-clip"
-    ]
-  }
+    Cap: ["butt", "round", "square"],
+    Join: ["miter", "round", "bevel", "arcs", "miter-clip"],
+  };
 
   function createSection(type) {
     const selectedItems = feature.traps.getPaper().project.selectedItems;
@@ -21,60 +11,70 @@ export default async function ({ feature, console }) {
 
     function changeItems(pos, value) {
       for (var i in selectedItems) {
-        if (selectedItems[i][pos]!==undefined) {
+        if (selectedItems[i][pos] !== undefined) {
           selectedItems[i][pos] = value;
         }
       }
     }
 
     const row = document.createElement("div");
-    row.classList.add('color-picker_row-header_173LQ')
+    row.classList.add("color-picker_row-header_173LQ");
     const labelName = document.createElement("span");
-    labelName.classList.add('color-picker_label-name_17igY')
-    labelName.textContent = `Line${type}`;
+    labelName.classList.add("color-picker_label-name_17igY");
+    labelName.textContent = `Line ${type}`;
     const labelReadout = document.createElement("span");
-    labelReadout.classList.add('color-picker_label-readout_9vjb2')
+    labelReadout.classList.add("color-picker_label-readout_9vjb2");
     if (selectedItems.length === 1) {
       strokeValue = `${selectedItems[0][`stroke${type}`]}`;
       labelReadout.textContent = strokeValue;
     }
     row.appendChild(labelName);
     row.appendChild(labelReadout);
 
-    const content = document.createElement("div")
-    content.classList.add('color-picker_gradient-picker-row_mnu4O')
-    icons[type].forEach(iconName => {
+    const content = document.createElement("div");
+    content.classList.add("color-picker_gradient-picker-row_mnu4O");
+    icons[type].forEach((iconName) => {
       const icon = document.createElement("img");
-      icon.classList.add(`ste-outline-shape-options-${iconName}`)
+      icon.classList.add(`ste-outline-shape-options-${iconName}`);
       icon.src = feature.self.getResource(`${type}-${iconName}`);
-      if (iconName !== strokeValue) icon.classList.add("ste-outline-shape-options-passive");
+      if (iconName !== strokeValue)
+        icon.classList.add("ste-outline-shape-options-passive");
       icon.addEventListener("click", () => {
-        changeItems(`stroke${type}`,`${iconName}`)
-        labelReadout.textContent = iconName
-        const elements = content.getElementsByTagName('*');
-        for (let i=0; i<elements.length; i++) {
-          if (elements[i].classList.contains(`ste-outline-shape-options-${iconName}`)) elements[i].classList.remove("ste-outline-shape-options-passive")
-          else elements[i].classList.add("ste-outline-shape-options-passive")
+        changeItems(`stroke${type}`, `${iconName}`);
+        labelReadout.textContent = iconName;
+        const elements = content.getElementsByTagName("*");
+        for (let i = 0; i < elements.length; i++) {
+          if (
+            elements[i].classList.contains(
+              `ste-outline-shape-options-${iconName}`
+            )
+          )
+            elements[i].classList.remove("ste-outline-shape-options-passive");
+          else elements[i].classList.add("ste-outline-shape-options-passive");
         }
       });
-      content.appendChild(icon)
+      content.appendChild(icon);
     });
 
     result.appendChild(row);
     result.appendChild(content);
+    feature.self.hideOnDisable(result)
     return result;
   }
 
-  ScratchTools.waitForElements("div.color-picker_swatch-row_1Q_s_", function(element) {
-    if (feature.traps.paint().modals.fillColor) return;
-    if (feature.traps.getPaper().project.selectedItems.length<1) return;
-    const dividerLine = document.createElement("div");
-    dividerLine.classList.add('color-picker_divider_3a3qR')
-    const sectionCap = createSection('Cap')
-    const sectionJoin = createSection('Join')
+  ScratchTools.waitForElements(
+    "div[class*='color-picker_swatch-row_']",
+    function (element) {
+      if (feature.traps.paint().modals.fillColor) return;
+      if (feature.traps.getPaper().project.selectedItems.length < 1) return;
+      const dividerLine = document.createElement("div");
+      dividerLine.classList.add("color-picker_divider_3a3qR");
+      const sectionCap = createSection("Cap");
+      const sectionJoin = createSection("Join");
 
-    element.insertAdjacentElement('afterend', sectionJoin)
-    element.insertAdjacentElement('afterend', sectionCap)
-    element.insertAdjacentElement('afterend', dividerLine)
-  })
-}
+      element.insertAdjacentElement("afterend", sectionJoin);
+      element.insertAdjacentElement("afterend", sectionCap);
+      element.insertAdjacentElement("afterend", dividerLine);
+    }
+  );
+}