Modernize remaining JS (mdn#40398)

Author: Josh-Cena

files/en-us/mozilla/add-ons/webextensions/content_scripts/cloneinto/index.md

@@ -9,7 +9,7 @@ sidebar: addonsidebar
 This function provides a safe way to take an object defined in a privileged scope and create a [structured clone](/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm) of it in a less-privileged scope. It returns a reference to the clone:
 
 ```js
-var clonedObject = cloneInto(myObject, targetWindow);
+const clonedObject = cloneInto(myObject, targetWindow);
 ```
 
 You can then assign the clone to an object in the target scope as an expando property, and scripts running in that scope can access it:
@@ -53,7 +53,7 @@ This content script creates an object, clones it into the content window and mak
 
 ```js
 // content script
-var addonScriptObject = { greeting: "hello from your extension" };
+const addonScriptObject = { greeting: "hello from your extension" };
 window.addonScriptObject = cloneInto(addonScriptObject, window);
 ```
 
@@ -63,7 +63,7 @@ Scripts running in the page can access the object:
 // page script
 button.addEventListener(
   "click",
-  function () {
+  () => {
     console.log(window.addonScriptObject.greeting); // "hello from your extension"
   },
   false,
@@ -90,18 +90,18 @@ The content script can define an object, clone it, and pass it into this functio
 
 ```js
 // content script
-var addonScriptObject = { message: "hello from your extension" };
+const addonScriptObject = { message: "hello from your extension" };
 window.foo(cloneInto(addonScriptObject, window)); // "they said: hello from your extension"
 ```
 
 ### Cloning objects that have functions
 
-If the object to clone contains functions, you must pass the `{cloneFunctions:true}` flag, or you get an error. If you do pass this flag, then functions in the object are cloned using the same mechanism used in [`exportFunction`](/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts/exportFunction):
+If the object to clone contains functions, you must pass the `{ cloneFunctions: true }` flag, or you get an error. If you do pass this flag, then functions in the object are cloned using the same mechanism used in [`exportFunction`](/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts/exportFunction):
 
 ```js
 // content script
-var addonScriptObject = {
-  greetMe: function () {
+const addonScriptObject = {
+  greetMe() {
     alert("hello from your extension");
   },
 };
@@ -112,10 +112,10 @@ window.addonScriptObject = cloneInto(addonScriptObject, window, {
 
 ```js
 // page script
-var test = document.getElementById("test");
+const test = document.getElementById("test");
 test.addEventListener(
   "click",
-  function () {
+  () => {
     window.addonScriptObject.greetMe();
   },
   false,
@@ -124,11 +124,11 @@ test.addEventListener(
 
 ### Cloning objects that contain DOM elements
 
-By default, if the object you clone contains objects reflected from C++, such as DOM elements, the cloning operation fails with an error. If you pass the `{wrapReflectors:true}` flag, then the object you clone contains these objects:
+By default, if the object you clone contains objects reflected from C++, such as DOM elements, the cloning operation fails with an error. If you pass the `{ wrapReflectors: true }` flag, then the object you clone contains these objects:
 
 ```js
 // content script
-var addonScriptObject = {
+const addonScriptObject = {
   body: window.document.body,
 };
 window.addonScriptObject = cloneInto(addonScriptObject, window, {
@@ -138,10 +138,10 @@ window.addonScriptObject = cloneInto(addonScriptObject, window, {
 
 ```js
 // page script
-var test = document.getElementById("test");
+const test = document.getElementById("test");
 test.addEventListener(
   "click",
-  function () {
+  () => {
     console.log(window.addonScriptObject.body.innerHTML);
   },
   false,

files/en-us/mozilla/add-ons/webextensions/content_scripts/exportfunction/index.md

@@ -61,11 +61,11 @@ exportFunction(changeMyName, window, {
 
 ```js
 // less-privileged scope: for example, a page script
-var user = { name: "Jim" };
-var test = document.getElementById("test");
+const user = { name: "Jim" };
+const test = document.getElementById("test");
 test.addEventListener(
   "click",
-  function () {
+  () => {
     console.log(user.name); // "Jim"
     window.changeMyName(user);
     console.log(user.name); // "Bill"
@@ -93,15 +93,15 @@ exportFunction(logUser, window, {
 
 ```js
 // less-privileged scope: for example, a page script
-var user = {
-  getUser: function () {
+const user = {
+  getUser() {
     return "Bill";
   },
 };
-var test = document.getElementById("test");
+const test = document.getElementById("test");
 test.addEventListener(
   "click",
-  function () {
+  () => {
     window.logUser(user);
   },
   false,
@@ -129,10 +129,10 @@ exportFunction(logUser, unsafeWindow, {
 function getUser() {
   return "Bill";
 }
-var test = document.getElementById("test");
+const test = document.getElementById("test");
 test.addEventListener(
   "click",
-  function () {
+  () => {
     window.logUser(getUser);
   },
   false,
@@ -151,7 +151,7 @@ This script defines a function and then exports it to a content window:
 
 ```js
 // extension-script.js
-var salutation = "hello ";
+const salutation = "hello ";
 function greetMe(user) {
   return salutation + user;
 }
@@ -162,7 +162,7 @@ Instead of using `defineAs`, the script can assign the result of `exportFunction
 
 ```js
 // extension-script.js
-var salutation = "hello ";
+const salutation = "hello ";
 function greetMe(user) {
   return salutation + user;
 }
@@ -173,7 +173,7 @@ Either way, code running in the content window's scope can call the function:
 
 ```js
 // page-script.js
-var greeting = foo("alice");
+const greeting = foo("alice");
 console.log(greeting);
 // "hello alice"
 ```
@@ -184,7 +184,7 @@ Instead of attaching the function to the target's global `window` object, the ca
 
 ```js
 // page-script.js
-var bar = {};
+const bar = {};
 ```
 
 Now the extension script can attach the function to `bar`:
@@ -198,7 +198,7 @@ exportFunction(greetMe, window.bar, {
 
 ```js
 // page-script.js
-var value = bar.greetMe("bob");
+const value = bar.greetMe("bob");
 console.log(value);
 // "hello bob"
 ```

files/en-us/mozilla/add-ons/webextensions/work_with_the_cookies_api/index.md

@@ -128,14 +128,13 @@ The extension's UI uses a toolbar button ({{WebExtAPIRef("browserAction")}}) imp
 To handle the icon buttons the script first gathers all the class names used for the buttons in the HTML file. It then loops through all the buttons assigning them their image and creating an `onclick` listener for each button:
 
 ```js
-let bgBtns = document.querySelectorAll(".bg-container button");
+const bgBtns = document.querySelectorAll(".bg-container button");
 
-for (let i = 0; i < bgBtns.length; i++) {
-  let imgName = bgBtns[i].getAttribute("class");
-  let bgImg = `url('images/${imgName}.png')`;
-  bgBtns[i].style.backgroundImage = bgImg;
+for (const btn of bgBtns) {
+  const imgName = btn.getAttribute("class");
+  btn.style.backgroundImage = `url('images/${imgName}.png')`;
 
-  bgBtns[i].onclick = (e) => {
+  btn.onclick = (e) => {
     // ...
   };
 }

files/en-us/web/api/web_components/using_custom_elements/index.md

@@ -110,8 +110,12 @@ If you want to preserve the element's state, you can do so by defining a `connec
 You could add an empty `connectedMoveCallback()` to stop the other two callbacks running, or include some custom logic to handle the move:
 
 ```js
-connectedMoveCallback() {
-  console.log("Custom move-handling logic here.");
+class MyComponent {
+  // ...
+  connectedMoveCallback() {
+    console.log("Custom move-handling logic here.");
+  }
+  // ...
 }
 ```