Lint 20220813 (#4978)

* Fix lint error

* Optimize SVGs

* Update actions/upload-artifact to v3

* Fix typo, etc

* Document addon API

* Enable no-constant-binary-expression eslint rule

.eslintrc.json

@@ -60,7 +60,8 @@
         "selector": "MemberExpression[property.type=Identifier][property.name=path]:matches([object.name=e],[object.name=ev],[object.name=event])",
         "message": "Event.path is incompatible with Firefox, use Event.composedPath()"
       }
-    ]
+    ],
+    "no-constant-binary-expression": 2
   },
   "overrides": [
     {

.github/workflows/packer.yml

@@ -19,7 +19,7 @@ jobs:
         env:
           ENVIRONMENT: chrome
       - name: Upload packed extensions
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         with:
           name: Packed Extensions (zip)
           path: .dist/*.zip

addon-api/common/Self.js

@@ -13,6 +13,7 @@ export default class Self extends Listenable {
     this._addonId = info.id; // In order to receive fireEvent messages from background
     this.id = info.id;
     this._addonObj = addonObj;
+    // catches both Chrome and Chromium
     this.browser = /Chrom/.test(navigator.userAgent) ? "chrome" : "firefox";
     this.disabled = false;
     this.addEventListener("disabled", () => (this.disabled = true));

addon-api/content-script/Tab.js

@@ -15,7 +15,6 @@ let createdAnyBlockContextMenus = false;
 /**
  * APIs specific to userscripts.
  * @extends Listenable
- * @property {?string} clientVersion - version of the renderer (scratch-www, scratchr2, etc)
  * @property {Trap} traps
  * @property {ReduxHandler} redux
  */
@@ -27,6 +26,10 @@ export default class Tab extends Listenable {
     this.redux = new ReduxHandler();
     this._waitForElementSet = new WeakSet();
   }
+  /**
+   * Version of the renderer (scratch-www, scratchr2, or null if it cannot be determined).
+   * @type {?string}
+   */
   get clientVersion() {
     if (!this._clientVersion)
       this._clientVersion = document.querySelector("meta[name='format-detection']")
@@ -36,21 +39,55 @@ export default class Tab extends Listenable {
         : null;
     return this._clientVersion;
   }
-  addBlock(...a) {
+  /**
+   * @callback Tab~blockCallback
+   * @param {object} params - the passed params.
+   * @param {object} thread - the current thread.
+   */
+  /**
+   * Adds a custom stack block definition. Internally this is a special-cased custom block.
+   * @param {string} proccode the procedure definition code
+   * @param {object} opts - options.
+   * @param {string[]} opts.args - a list of argument names the block takes.
+   * @param {Tab~blockCallback} opts.callback - the callback.
+   * @param {boolean=} opts.hidden - whether the block is hidden from the palette.
+   * @param {string=} opts.displayName - the display name of the block, if different from the proccode.
+   */
+  addBlock(proccode, opts) {
     blocks.init(this);
-    return blocks.addBlock(...a);
+    return blocks.addBlock(proccode, opts);
   }
-  removeBlock(...a) {
-    return blocks.removeBlock(...a);
+  /**
+   * Removes a stack block definition. Should not be called in most cases.
+   * @param {string} proccode the procedure definition code of the block
+   */
+  removeBlock(proccode) {
+    return blocks.removeBlock(proccode);
   }
-  setCustomBlockColor(...a) {
-    return blocks.setCustomBlockColor(...a);
+  /**
+   * Sets the color for the custom blocks.
+   * @param {object} colors - the colors.
+   * @param {string=} colors.color - the primary color.
+   * @param {string=} colors.secondaryColor - the secondary color.
+   * @param {string=} colors.tertiaryColor - the tertiary color.
+   */
+  setCustomBlockColor(colors) {
+    return blocks.setCustomBlockColor(colors);
   }
+  /**
+   * Gets the custom block colors.
+   * @returns {object} - the colors.
+   */
   getCustomBlockColor() {
     return blocks.color;
   }
-  getCustomBlock(...a) {
-    return blocks.getCustomBlock(...a);
+  /**
+   * Gets a custom block from the procedure definition code.
+   * @param {string} proccode the procedure definition code.
+   * @returns {object=} the custom block definition.
+   */
+  getCustomBlock(proccode) {
+    return blocks.getCustomBlock(proccode);
   }
   /**
    * Loads a script by URL.
@@ -308,6 +345,18 @@ export default class Tab extends Listenable {
    * forumsAfterPostReport - after the report button in forum posts
    * beforeRemixButton - before the remix button in project page
    * studioCuratorsTab - inside the studio curators tab
+   * forumToolbarTextDecoration - after the forum toolbar's text decoration (bold, etc) buttons
+   * forumToolbarLinkDecoration - after the forum toolbar's link buttons
+   * forumToolbarFont - after the forum toolbar's big or small font dropdown
+   * forumToolbarList - after the forum toolbar's list buttons
+   * forumToolbarDecoration - after the forum toolbar's emoji and quote buttons
+   * forumToolbarEnvironment - after the forum toolbar's environment button
+   * forumToolbarScratchblocks - after the forum toolbar's scratchblocks dropdown
+   * forumToolbarTools - after the forum toolbar's remove formatting and preview buttons
+   * assetContextMenuAfterExport - after the export button of asset (sprite, costume, etc)'s context menu
+   * assetContextMenuAfterDelete - after the delete button of asset (sprite, costume, etc)'s context menu
+   * monitor - after the end of the stage monitor context menu
+   *
    * @param {object} opts - options.
    * @param {string} opts.space - the shared space name.
    * @param {HTMLElement} element - the element to add.
@@ -694,17 +743,56 @@ export default class Tab extends Listenable {
     addContextMenu(this, ...args);
   }
 
+  /**
+   * @typedef {object} Tab~Modal
+   * @property {HTMLElement} container - the container element.
+   * @property {HTMLElement} content - where the content should be appended.
+   * @property {HTMLElement} backdrop - the modal overlay.
+   * @property {HTMLElement} closeButton - the close (X) button on the header.
+   * @property {function} open - opens the modal.
+   * @property {function} close - closes the modal.
+   * @property {function} remove - removes the modal, making it no longer usable.
+   */
+
+  /**
+   * Creates a modal using the vanilla style.
+   * @param {string} title - the title.
+   * @param {object=} opts - the options.
+   * @param {boolean=} opts.isOpen - whether to open the modal by default.
+   * @param {boolean=} opts.useEditorClasses - if on editor, whether to apply editor styles and not www styles.
+   * @param {boolean=} opts.useSizesClass - if on scratch-www, whether to add modal-sizes class.
+   * @return {Tab~Modal} - the modal.
+   */
   createModal(title, { isOpen = false, useEditorClasses = false, useSizesClass = false } = {}) {
     if (this.editorMode !== null && useEditorClasses) return modal.createEditorModal(this, title, { isOpen });
     if (this.clientVersion === "scratch-www") return modal.createScratchWwwModal(title, { isOpen, useSizesClass });
     return modal.createScratchr2Modal(title, { isOpen });
   }
 
-  confirm(...args) {
-    return modal.confirm(this, ...args);
+  /**
+   * Opens a confirmation dialog. Can be used to replace confirm(), but is async.
+   * @param {string} title - the title.
+   * @param {string} message - the message displayed in the contents.
+   * @param {object=} opts - the options.
+   * @param {boolean=} opts.useEditorClasses - if on editor, whether to apply editor styles and not www styles.
+   * @param {string=} opts.okButtonLabel - the label of the button for approving the confirmation
+   * @param {string=} opts.cancelButtonLabel - the label of the button for rejecting the confirmation
+   * @returns {Promise<boolean>} - whether the confirmation was approved
+   */
+  confirm(title, message, opts) {
+    return modal.confirm(this, title, message, opts);
   }
 
-  prompt(...args) {
-    return modal.prompt(this, ...args);
+  /**
+   * Opens a prompt that a user can enter a value into.
+   * @param {string} title - the title.
+   * @param {string} message - the message displayed in the contents.
+   * @param {string=} defaultValue - the default value.
+   * @param {object=} opts - the options.
+   * @param {boolean=} opts.useEditorClasses - if on editor, whether to apply editor styles and not www styles.
+   * @returns Promise<?string> - the entered value, or null if canceled.
+   */
+  prompt(title, message, defaultValue, opts) {
+    return modal.prompt(this, title, message, defaultValue, opts);
   }
 }

addons/disable-auto-save/userscript.js

@@ -7,7 +7,7 @@ export default async ({ addon, console, msg }) => {
   });
 
   // If the addon is enable late, don't use the `waitForElement` below
-  // becuase the `waitForElement` below only runs on certain redux events
+  // because the `waitForElement` below only runs on certain redux events
   if (addon.self.enabledLate) {
     addListener(document.querySelector('[class*="community-button_community-button_"]'));
   }

addons/drag-drop/userscript.js

@@ -80,7 +80,7 @@ export default async function ({ addon, global, console }) {
       callback = async (files) => {
         const text = (await Promise.all(Array.from(files, (file) => file.text())))
           .join("")
-          // Match pasting behaviour: remove all newline characters at the end
+          // Match pasting behavior: remove all newline characters at the end
           .replace(/[\r\n]+$/, "")
           .replace(/\r?\n|\r/g, " ");
         const selectionStart = el.selectionStart;

addons/find-bar/userscript.js

@@ -601,7 +601,7 @@ export default async function ({ addon, msg, console }) {
           continue;
         }
 
-        for (const id in blocks._blocks) {
+        for (const id of Object.keys(blocks._blocks)) {
           const block = blocks._blocks[id];
           // To find event broadcaster blocks, we look for the nested "event_broadcast_menu" blocks first that match the event name
           if (block.opcode === "event_broadcast_menu" && block.fields.BROADCAST_OPTION.value === name) {
@@ -649,7 +649,7 @@ export default async function ({ addon, msg, console }) {
 
         this.idx = 0;
         if (instanceBlock) {
-          for (const idx in this.blocks) {
+          for (const idx of Object.keys(this.blocks)) {
             const block = this.blocks[idx];
             if (block.id === instanceBlock.id) {
               this.idx = Number(idx);

addons/hide-flyout/userscript.js

@@ -92,7 +92,7 @@ export default async function ({ addon, global, console, msg }) {
     addon.tab.redux.addEventListener("statechanged", (e) => {
       switch (e.detail.action.type) {
         // Event casted when you switch between tabs
-        case "scratch-gui/navigation/ACTIVATE_TAB":
+        case "scratch-gui/navigation/ACTIVATE_TAB": {
           // always 0, 1, 2
           const toggleSetting = getToggleSetting();
           if (
@@ -104,6 +104,7 @@ export default async function ({ addon, global, console, msg }) {
             toggle = false;
           }
           break;
+        }
       }
     });
 

addons/variable-manager/userscript.js

@@ -106,7 +106,7 @@ export default async function ({ addon, global, console, msg }) {
       if (this.scratchVariable.name.toLowerCase().includes(search.toLowerCase()) || !search) {
         // fuzzy searches are lame we are too cool for fuzzy searches (& i doubt they're even the right thing to use here, this should work fine enough)
         this.row.style.display = ""; // make the row normal
-        this.updateValue(true); // force it to update because its hidden and it wouldnt be able to otherwise
+        this.updateValue(true); // force it to update because its hidden and it wouldn't be able to otherwise
       } else {
         this.row.style.display = "none"; // set the entire row as hidden
       }