Merge autoland to mozilla-central. a=merge
authorCiure Andrei <aciure@mozilla.com>
Tue, 23 Oct 2018 19:48:47 +0300
changeset 490902 ff3ed362e82fae365afc440ccc3b662bcfcd0435
parent 490869 eea979fe8a920693df4859d22fad5c8098a57569 (current diff)
parent 490901 2eb4c1dd70f144a84c0eb9e96f2db53b2860742b (diff)
child 490903 89cef77c46f583a1f20c050453fdb7db43f128f1
child 490967 147e9c6a801ca68685ae0512bee2134976edeb29
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewersmerge
milestone65.0a1
Merge autoland to mozilla-central. a=merge
browser/components/sessionstore/DocShellCapabilities.jsm
toolkit/modules/sessionstore/ScrollPosition.jsm
tools/profiler/core/ProfileJSONWriter.h
--- a/.eslintignore
+++ b/.eslintignore
@@ -21,19 +21,17 @@ extensions/universalchardet/**
 gfx/layers/**
 gfx/tests/browser/**
 gfx/tests/chrome/**
 gfx/tests/mochitest/**
 image/**
 layout/**
 memory/replace/dmd/test/**
 modules/**
-netwerk/base/NetUtil.jsm
 netwerk/cookie/test/browser/**
-netwerk/cookie/test/unit/**
 netwerk/protocol/**
 netwerk/dns/**
 netwerk/test/browser/**
 netwerk/test/httpserver/**
 netwerk/test/mochitests/**
 netwerk/test/unit*/**
 netwerk/wifi/**
 parser/**
--- a/README.txt
+++ b/README.txt
@@ -13,16 +13,17 @@ submit it to Bugzilla (https://bugzilla.
     https://developer.mozilla.org/en/docs/Creating_a_patch
     https://developer.mozilla.org/en/docs/Getting_your_patch_in_the_tree
 
 If you have a question about developing Mozilla, and can't find the solution
 on https://developer.mozilla.org, you can try asking your question in a
 mozilla.* Usenet group, or on IRC at irc.mozilla.org. [The Mozilla news groups
 are accessible on Google Groups, or news.mozilla.org with a NNTP reader.]
 
-You can download nightly development builds from the Mozilla FTP server.
-Keep in mind that nightly builds, which are used by Mozilla developers for
-testing, may be buggy. Firefox nightlies, for example, can be found at:
+Nightly development builds can be downloaded from:
 
     https://archive.mozilla.org/pub/firefox/nightly/latest-mozilla-central/
             - or -
     https://www.mozilla.org/firefox/channel/desktop/#nightly
 
+Keep in mind that nightly builds, which are used by Mozilla developers for
+testing, may be buggy.
+
--- a/accessible/tests/mochitest/table.js
+++ b/accessible/tests/mochitest/table.js
@@ -492,17 +492,17 @@ function testTableSelection(aIdentifier,
   for (let i = 0; i < actualSelCellsCount; i++) {
     var actualSelCellAccessible =
       actualSelCellsArray.queryElementAt(i, nsIAccessibleTableCell);
 
     let colIdx = acc.getColumnIndexAt(selCells[i]);
     let rowIdx = acc.getRowIndexAt(selCells[i]);
     var expectedSelCellAccessible = acc.getCellAt(rowIdx, colIdx);
 
-    ok(actualSelCellAccessible, expectedSelCellAccessible,
+    is(actualSelCellAccessible, expectedSelCellAccessible,
        msg + "getSelectedCells: Cell at index " + selCells[i] +
        " should be selected.");
 
     ok(actualSelCellAccessible.isSelected(),
        "isSelected: Cell at index " + selCells[i] + " should be selected.");
   }
 
   // selected states tests
--- a/accessible/tests/mochitest/test_OuterDocAccessible.html
+++ b/accessible/tests/mochitest/test_OuterDocAccessible.html
@@ -39,33 +39,33 @@ https://bugzilla.mozilla.org/show_bug.cg
           // see bug 440770, no actions wanted on outer doc
           is(outerDocAcc.actionCount, 0,
              "Wrong number of actions for internal frame!");
 
           try {
             outerDocAcc.getActionName(0);
             do_throw("No exception thrown for actionName!");
           } catch (e) {
-            ok(e.result, ns_error_invalid_arg,
+            is(e.result, ns_error_invalid_arg,
                "Wrong return value for actionName call!");
           }
 
           try {
             actionTempStr = outerDocAcc.getActionDescription(0);
             do_throw("No exception thrown for actionDescription!");
           } catch (e) {
-            ok(e.result, ns_error_invalid_arg,
+            is(e.result, ns_error_invalid_arg,
                "Wrong return value for actionDescription call!");
           }
 
           try {
             outerDocAcc.doAction(0);
             do_throw("No exception thrown for doAction!");
           } catch (e) {
-            ok(e.result, ns_error_invalid_arg,
+            is(e.result, ns_error_invalid_arg,
                "Wrong return value for doAction call!");
           }
         }
       }
 
       SimpleTest.finish();
     }
 
--- a/accessible/tests/mochitest/text.js
+++ b/accessible/tests/mochitest/text.js
@@ -356,17 +356,17 @@ function cleanTextSelections(aID) {
  * @param aSelectionsCount  [in] expected number of selections after addSelection
  */
 function testTextAddSelection(aID, aStartOffset, aEndOffset, aSelectionsCount) {
   var acc = getAccessible(aID, [nsIAccessibleText]);
   var text = acc.getText(0, -1);
 
   acc.addSelection(aStartOffset, aEndOffset);
 
-  ok(acc.selectionCount, aSelectionsCount,
+  is(acc.selectionCount, aSelectionsCount,
      text + ": failed to add selection from offset '" + aStartOffset +
      "' to offset '" + aEndOffset + "': selectionCount after");
 }
 
 /**
  * Test removeSelection method.
  *
  * @param aID               [in] Id, DOM node, or acc obj
@@ -375,17 +375,17 @@ function testTextAddSelection(aID, aStar
  *                               removeSelection
  */
 function testTextRemoveSelection(aID, aSelectionIndex, aSelectionsCount) {
   var acc = getAccessible(aID, [nsIAccessibleText]);
   var text = acc.getText(0, -1);
 
   acc.removeSelection(aSelectionIndex);
 
-  ok(acc.selectionCount, aSelectionsCount,
+  is(acc.selectionCount, aSelectionsCount,
      text + ": failed to remove selection at index '" +
      aSelectionIndex + "': selectionCount after");
 }
 
 /**
  * Test setSelectionBounds method.
  *
  * @param aID               [in] Id, DOM node, or acc obj
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -587,18 +587,17 @@ const gStoragePressureObserver = {
       }
       msg = prefStrBundle.getFormattedString(descriptionStringID, [brandShortName]);
       buttons.push({
         label: prefStrBundle.getString(prefButtonLabelStringID),
         accessKey: prefStrBundle.getString(prefButtonAccesskeyStringID),
         callback(notificationBar, button) {
           // The advanced subpanes are only supported in the old organization, which will
           // be removed by bug 1349689.
-          let win = gBrowser.ownerGlobal;
-          win.openPreferences("privacy-sitedata", { origin: "storagePressure" });
+          openPreferences("privacy-sitedata", { origin: "storagePressure" });
         },
       });
     }
 
     notificationBox.appendNotification(
       msg, NOTIFICATION_VALUE, null, notificationBox.PRIORITY_WARNING_HIGH, buttons, null);
   },
 };
--- a/browser/base/content/tabbrowser.js
+++ b/browser/base/content/tabbrowser.js
@@ -2575,30 +2575,30 @@ window._gBrowser = {
       this._notifyPinnedStatus(t);
     }
 
     return t;
   },
 
   moveTabsToStart(contextTab) {
     let tabs = contextTab.multiselected ?
-      gBrowser.selectedTabs :
+      this.selectedTabs :
       [contextTab];
     // Walk the array in reverse order so the tabs are kept in order.
     for (let i = tabs.length - 1; i >= 0; i--) {
       let tab = tabs[i];
       if (tab._tPos > 0) {
         this.moveTabTo(tab, 0);
       }
     }
   },
 
   moveTabsToEnd(contextTab) {
     let tabs = contextTab.multiselected ?
-      gBrowser.selectedTabs :
+      this.selectedTabs :
       [contextTab];
     for (let tab of tabs) {
       if (tab._tPos < this.tabs.length - 1) {
         this.moveTabTo(tab, this.tabs.length - 1);
       }
     }
   },
 
--- a/browser/base/content/test/general/browser_visibleTabs_tabPreview.js
+++ b/browser/base/content/test/general/browser_visibleTabs_tabPreview.js
@@ -6,22 +6,25 @@ add_task(async function test() {
   await SpecialPowers.pushPrefEnv({"set": [["browser.ctrlTab.recentlyUsedOrder", true]]});
 
   let [origTab] = gBrowser.visibleTabs;
   let tabOne = BrowserTestUtils.addTab(gBrowser);
   let tabTwo = BrowserTestUtils.addTab(gBrowser);
 
   // test the ctrlTab.tabList
   pressCtrlTab();
-  ok(ctrlTab.tabList.length, 3, "Show 3 tabs in tab preview");
+  is(ctrlTab.tabList.length, 3, "Show 3 tabs in tab preview");
   releaseCtrl();
 
   gBrowser.showOnlyTheseTabs([origTab]);
   pressCtrlTab();
-  ok(ctrlTab.tabList.length, 1, "Show 1 tab in tab preview");
+
+  // XXX: Switched to from ok() to todo_is() in Bug 1467712. Follow up in 1500959
+  // `ctrlTab.tabList.length` is still equal to 3 at this step.
+  todo_is(ctrlTab.tabList.length, 1, "Show 1 tab in tab preview");
   ok(!ctrlTab.isOpen, "With 1 tab open, Ctrl+Tab doesn't open the preview panel");
 
   gBrowser.showOnlyTheseTabs([origTab, tabOne, tabTwo]);
   pressCtrlTab();
   ok(ctrlTab.isOpen, "With 3 tabs open, Ctrl+Tab does open the preview panel");
   releaseCtrl();
 
   // cleanup
--- a/browser/base/content/test/sanitize/browser_purgehistory_clears_sh.js
+++ b/browser/base/content/test/sanitize/browser_purgehistory_clears_sh.js
@@ -23,20 +23,18 @@ add_task(async function purgeHistoryTest
       content.history.pushState({}, "");
       content.history.pushState({}, "");
       content.history.back();
       let newHistory = content.history.length;
       Assert.equal(startHistory, 1, "Initial SHistory size");
       Assert.equal(newHistory, 3, "New SHistory size");
     });
 
-    ok(browser.webNavigation.canGoBack, true,
-       "New value for webNavigation.canGoBack");
-    ok(browser.webNavigation.canGoForward, true,
-       "New value for webNavigation.canGoForward");
+    ok(browser.webNavigation.canGoBack, "New value for webNavigation.canGoBack");
+    ok(browser.webNavigation.canGoForward, "New value for webNavigation.canGoForward");
     ok(!backButton.hasAttribute("disabled"), "Back button was enabled");
     ok(!forwardButton.hasAttribute("disabled"), "Forward button was enabled");
 
     await Sanitizer.sanitize(["history"]);
 
     await ContentTask.spawn(browser, null, async function() {
       Assert.equal(content.history.length, 1, "SHistory correctly cleared");
     });
--- a/browser/base/content/test/sidebar/browser_sidebar_adopt.js
+++ b/browser/base/content/test/sidebar/browser_sidebar_adopt.js
@@ -41,22 +41,21 @@ add_task(async function testEventsReceiv
 
   ok(true, "SidebarShown and SidebarFocused events fired on a new window");
 });
 
 add_task(async function testEventReceivedInNewWindow() {
   info("Opening a new window and expecting the SidebarFocused event to not fire");
 
   let promiseNewWindow = BrowserTestUtils.waitForNewWindow();
-  BrowserTestUtils.openNewBrowserWindow();
-  let win = await promiseNewWindow;
+  let win = OpenBrowserWindow();
 
   let adoptedShown = BrowserTestUtils.waitForEvent(win, "SidebarShown");
   win.addEventListener("SidebarFocused", failIfSidebarFocusedFires);
-
   registerCleanupFunction(async function() {
     win.removeEventListener("SidebarFocused", failIfSidebarFocusedFires);
     await BrowserTestUtils.closeWindow(win);
   });
 
+  await promiseNewWindow;
   await adoptedShown;
   ok(true, "SidebarShown event fired on an adopted window");
 });
--- a/browser/base/content/test/tabs/browser_multiselect_tabs_using_selectedTabs.js
+++ b/browser/base/content/test/tabs/browser_multiselect_tabs_using_selectedTabs.js
@@ -20,18 +20,19 @@ add_task(async function() {
     if (tabs.length == 1) {
       ok(!selectedTab.multiselected, "Selected tab shouldn't be multi-selected because we are not in multi-select context yet");
       ok(!_multiSelectedTabsSet.has(selectedTab), "Selected tab shouldn't be in _multiSelectedTabsSet");
       is(selectedTabs.length, 1, "selectedTabs should contain a single tab");
       is(selectedTabs[0], selectedTab, "selectedTabs should contain the selected tab");
       ok(!selectedTab.hasAttribute("aria-selected"),
          "Selected tab shouldn't be marked as aria-selected when only one tab is selected");
     } else {
-      ok(selectedTabs.length, tabs.length, "Check number of selected tabs");
-      for (let tab of tabs) {
+      const uniqueTabs = [...new Set(tabs)];
+      is(selectedTabs.length, uniqueTabs.length, "Check number of selected tabs");
+      for (let tab of uniqueTabs) {
         ok(tab.multiselected, "Tab should be multi-selected");
         ok(_multiSelectedTabsSet.has(tab), "Tab should be in _multiSelectedTabsSet");
         ok(selectedTabs.includes(tab), "Tab should be in selectedTabs");
         is(tab.getAttribute("aria-selected"), "true", "Selected tab should be marked as aria-selected");
       }
     }
   }
 
--- a/browser/base/content/test/urlbar/browser_locationBarCommand.js
+++ b/browser/base/content/test/urlbar/browser_locationBarCommand.js
@@ -29,28 +29,21 @@ add_task(async function alt_left_click_t
   await saveURLPromise;
   ok(true, "SaveURL was called");
   is(gURLBar.value, "", "Urlbar reverted to original value");
 });
 
 add_task(async function shift_left_click_test() {
   info("Running test: Shift left click");
 
-  let newWindowPromise = BrowserTestUtils.waitForNewWindow();
+  let destinationURL = "http://" + TEST_VALUE + "/";
+  let newWindowPromise = BrowserTestUtils.waitForNewWindow({url: destinationURL});
   triggerCommand(true, {shiftKey: true});
   let win = await newWindowPromise;
 
-  // Wait for the initial browser to load.
-  let browser = win.gBrowser.selectedBrowser;
-  let destinationURL = "http://" + TEST_VALUE + "/";
-  await Promise.all([
-    BrowserTestUtils.browserLoaded(browser),
-    BrowserTestUtils.waitForLocationChange(win.gBrowser, destinationURL),
-  ]);
-
   info("URL should be loaded in a new window");
   is(gURLBar.value, "", "Urlbar reverted to original value");
   await promiseCheckChildNoFocusedElement(gBrowser.selectedBrowser);
   is(document.activeElement, gBrowser.selectedBrowser, "Content window should be focused");
   is(win.gURLBar.textValue, TEST_VALUE, "New URL is loaded in new window");
 
   // Cleanup.
   await BrowserTestUtils.closeWindow(win);
--- a/browser/base/content/test/urlbar/browser_populateAfterPushState.js
+++ b/browser/base/content/test/urlbar/browser_populateAfterPushState.js
@@ -13,11 +13,11 @@ add_task(async function() {
   await BrowserTestUtils.withNewTab(TEST_PATH + "dummy_page.html", async function(browser) {
     gURLBar.value = "";
 
     let locationChangePromise = BrowserTestUtils.waitForLocationChange(gBrowser, TEST_PATH + "dummy_page2.html");
     await ContentTask.spawn(browser, null, function() {
       content.history.pushState({}, "Page 2", "dummy_page2.html");
     });
     await locationChangePromise;
-    ok(gURLBar.value, TEST_PATH + "dummy_page2.html", "Should have updated the URL bar.");
+    is(gURLBar.value, TEST_PATH + "dummy_page2.html", "Should have updated the URL bar.");
   });
 });
--- a/browser/components/contextualidentity/test/browser/browser_windowOpen.js
+++ b/browser/components/contextualidentity/test/browser/browser_windowOpen.js
@@ -18,22 +18,22 @@ add_task(async function test() {
   info("Creating a tab with UCI = 1...");
   let tab = BrowserTestUtils.addTab(gBrowser, BASE_URI, {userContextId: 1});
   is(tab.getAttribute("usercontextid"), 1, "New tab has UCI equal 1");
 
   let browser = gBrowser.getBrowserForTab(tab);
   await BrowserTestUtils.browserLoaded(browser);
 
   info("Opening a new window from this tab...");
+  let newWinPromise = BrowserTestUtils.waitForNewWindow({url: BASE_URI});
   ContentTask.spawn(browser, BASE_URI, function(url) {
     content.window.newWindow = content.window.open(url, "_blank");
   });
 
-  let newWin = await BrowserTestUtils.waitForNewWindow();
+  let newWin = await newWinPromise;
   let newTab = newWin.gBrowser.selectedTab;
 
-  await BrowserTestUtils.browserLoaded(newTab.linkedBrowser);
   is(newTab.getAttribute("usercontextid"), 1, "New tab has UCI equal 1");
 
   info("Closing the new window and tab...");
   await BrowserTestUtils.closeWindow(newWin);
   BrowserTestUtils.removeTab(tab);
 });
--- a/browser/components/extensions/test/browser/browser_ext_browserAction_popup_resize.js
+++ b/browser/components/extensions/test/browser/browser_ext_browserAction_popup_resize.js
@@ -165,24 +165,24 @@ async function testPopupSize(standardsMo
   let origPanelRect = panel.getBoundingClientRect();
 
   // Check that the panel is still positioned as expected.
   let checkPanelPosition = () => {
     is(panel.getAttribute("side"), arrowSide, "Panel arrow is positioned as expected");
 
     let panelRect = panel.getBoundingClientRect();
     if (arrowSide == "top") {
-      ok(panelRect.top, origPanelRect.top, "Panel has not moved downwards");
+      is(panelRect.top, origPanelRect.top, "Panel has not moved downwards");
       ok(panelRect.bottom >= origPanelRect.bottom, `Panel has not shrunk from original size (${panelRect.bottom} >= ${origPanelRect.bottom})`);
 
       let screenBottom = browserWin.screen.availTop + browserWin.screen.availHeight;
       let panelBottom = browserWin.mozInnerScreenY + panelRect.bottom;
       ok(Math.round(panelBottom) <= screenBottom, `Bottom of popup should be on-screen. (${panelBottom} <= ${screenBottom})`);
     } else {
-      ok(panelRect.bottom, origPanelRect.bottom, "Panel has not moved upwards");
+      is(panelRect.bottom, origPanelRect.bottom, "Panel has not moved upwards");
       ok(panelRect.top <= origPanelRect.top, `Panel has not shrunk from original size (${panelRect.top} <= ${origPanelRect.top})`);
 
       let panelTop = browserWin.mozInnerScreenY + panelRect.top;
       ok(panelTop >= browserWin.screen.availTop, `Top of popup should be on-screen. (${panelTop} >= ${browserWin.screen.availTop})`);
     }
   };
 
   await awaitBrowserLoaded(browser);
--- a/browser/components/payments/test/browser/browser_address_edit.js
+++ b/browser/components/payments/test/browser/browser_address_edit.js
@@ -408,17 +408,17 @@ add_task(async function test_shipping_ad
       let state = await PTU.DialogContentUtils.waitForState(content, (state) => {
         return Object.keys(state.savedAddresses).length == 1;
       }, "One saved addresses when starting test");
       let savedAddress = Object.values(state.savedAddresses)[0];
 
       let selector = "address-picker[selected-state-key='selectedShippingAddress']";
       let picker = content.document.querySelector(selector);
       let option = Cu.waiveXrays(picker).dropdown.popupBox.children[0];
-      ok(option.textContent,
+      is(option.textContent,
          FormAutofillUtils.getAddressLabel(savedAddress, null),
          "Shows correct shipping option label");
     });
 
     info("clicking cancel");
     spawnPaymentDialogTask(frame, PTU.DialogContentTasks.manuallyClickCancel);
 
     await BrowserTestUtils.waitForCondition(() => win.closed, "dialog should be closed");
@@ -450,17 +450,17 @@ add_task(async function test_payer_addre
       }, "One saved addresses when starting test");
       let savedAddress = Object.values(state.savedAddresses)[0];
 
       let selector = "address-picker[selected-state-key='selectedPayerAddress']";
       let picker = content.document.querySelector(selector);
       let option = Cu.waiveXrays(picker).dropdown.popupBox.children[0];
       is(option.textContent.includes("32 Vassar Street"), false,
          "Payer option label does not contain street address");
-      ok(option.textContent,
+      is(option.textContent,
          FormAutofillUtils.getAddressLabel(savedAddress, "name tel email"),
          "Shows correct payer option label");
     });
 
     info("clicking cancel");
     spawnPaymentDialogTask(frame, PTU.DialogContentTasks.manuallyClickCancel);
 
     await BrowserTestUtils.waitForCondition(() => win.closed, "dialog should be closed");
--- a/browser/components/payments/test/browser/browser_card_edit.js
+++ b/browser/components/payments/test/browser/browser_card_edit.js
@@ -72,17 +72,17 @@ async function add_link(aOptions = {}) {
     await spawnPaymentDialogTask(frame, async function checkBillingAddressPicker(testArgs = {}) {
       let billingAddressSelect = content.document.querySelector("#billingAddressGUID");
       ok(content.isVisible(billingAddressSelect),
          "The billing address selector should always be visible");
       is(billingAddressSelect.childElementCount, 2,
          "Only 2 child options should exist by default");
       is(billingAddressSelect.children[0].value, "",
          "The first option should be the blank/empty option");
-      ok(billingAddressSelect.children[1].value, "",
+      ok(billingAddressSelect.children[1].value,
          "The 2nd option is the prefilled address and should be truthy");
     }, aOptions);
 
     let addressOptions = Object.assign({}, aOptions, {
       addLinkSelector: ".billingAddressRow .add-link",
       checkboxSelector: "#address-page .persist-checkbox",
       initialPageId: "basic-card-page",
       expectPersist: aOptions.expectDefaultAddressPersist,
--- a/browser/components/payments/test/browser/browser_onboarding_wizard.js
+++ b/browser/components/payments/test/browser/browser_onboarding_wizard.js
@@ -484,17 +484,17 @@ add_task(async function test_back_button
       }, "Address page is shown again");
 
       info("Checking if the address page has been rendered");
       addressSaveButton = content.document.querySelector("address-form .save-button");
       ok(content.isVisible(addressSaveButton), "Address save button is rendered");
 
       info("Checking if the address saved in the last step is correctly loaded in the form");
       field = content.document.getElementById("given-name");
-      ok(field.value, PTU.Addresses.TimBL2["given-name"],
+      is(field.value, PTU.Addresses.TimBL2["given-name"],
          "Given name field value is correctly loaded");
 
       info("Editing the address and saving again");
       content.fillField(field, "John");
       addressSaveButton.click();
 
       info("Checking if the address was correctly edited");
       await PTU.DialogContentUtils.waitForState(content, (state) => {
@@ -504,17 +504,17 @@ add_task(async function test_back_button
       }, "Address was correctly edited and saved");
 
       // eslint-disable-next-line max-len
       info("Checking if the basic card form is now rendered and if the field values from before are preserved");
       let basicCardCancelButton = content.document.querySelector("basic-card-form .cancel-button");
       ok(content.isVisible(basicCardCancelButton),
          "Cancel button is visible on the basic card page");
       field = content.document.getElementById("cc-number");
-      ok(field.value, PTU.BasicCards.JohnDoe["cc-number"], "Values in the form are preserved");
+      is(field.value, PTU.BasicCards.JohnDoe["cc-number"], "Values in the form are preserved");
     });
 
     info("Closing the payment dialog");
     spawnPaymentDialogTask(frame, PTU.DialogContentTasks.manuallyClickCancel);
     await BrowserTestUtils.waitForCondition(() => win.closed, "dialog should be closed");
 
     cleanupFormAutofillStorage();
   });
--- a/browser/components/payments/test/mochitest/test_address_form.html
+++ b/browser/components/payments/test/mochitest/test_address_form.html
@@ -248,17 +248,17 @@ add_task(async function test_edit() {
     },
   });
   await asyncElementRendered();
   is(form.saveButton.textContent, "Update", "Check label");
   checkAddressForm(form, minimalAddress);
   ok(form.saveButton.disabled, "Save button should be disabled if only the name is filled");
   ok(form.querySelectorAll(":-moz-ui-invalid").length > 3,
      "Check fields are visibly invalid on an 'edit' form with only the given-name filled");
-  ok(form.querySelectorAll("#country:-moz-ui-invalid").length, 1,
+  is(form.querySelectorAll("#country:-moz-ui-invalid").length, 1,
      "Check that the country `select` is marked as invalid");
 
   info("change to no selected address");
   await form.requestStore.setState({
     page: {
       id: "address-page",
     },
     "address-page": {
--- a/browser/components/payments/test/mochitest/test_payment_method_picker.html
+++ b/browser/components/payments/test/mochitest/test_payment_method_picker.html
@@ -177,17 +177,17 @@ add_task(async function test_change_sele
 
   let stateChangePromise = promiseStateChange(picker1.requestStore);
 
   // Type in the security code field
   picker1.securityCodeInput.querySelector("input").focus();
   sendString("836");
   sendKey("Tab");
   let state = await stateChangePromise;
-  ok(state.selectedPaymentCardSecurityCode, "836", "Check security code in state");
+  is(state.selectedPaymentCardSecurityCode, "836", "Check security code in state");
 });
 
 add_task(async function test_delete() {
   await picker1.requestStore.setState({
     savedBasicCards: {
       // 48bnds6854t was deleted
       "68gjdh354j": {
         "cc-exp": "2017-08",
--- a/browser/components/payments/test/mochitest/test_shipping_option_picker.html
+++ b/browser/components/payments/test/mochitest/test_shipping_option_picker.html
@@ -32,18 +32,18 @@ import "../../res/containers/shipping-op
 let picker1 = document.getElementById("picker1");
 
 add_task(async function test_empty() {
   ok(picker1, "Check picker1 exists");
   let state = picker1.requestStore.getState();
   let {shippingOptions} = state && state.request && state.request.paymentDetails;
   is(Object.keys(shippingOptions).length, 0, "Check empty initial state");
   is(picker1.dropdown.popupBox.children.length, 0, "Check dropdown is empty");
-  ok(picker1.editLink.hidden, true, "Check that picker edit link is always hidden");
-  ok(picker1.addLink.hidden, true, "Check that picker add link is always hidden");
+  ok(picker1.editLink.hidden, "Check that picker edit link is always hidden");
+  ok(picker1.addLink.hidden, "Check that picker add link is always hidden");
 });
 
 add_task(async function test_initialSet() {
   picker1.requestStore.setState({
     request: {
       paymentDetails: {
         shippingOptions: [
           {
--- a/browser/components/places/tests/browser/browser_bookmarksProperties.js
+++ b/browser/components/places/tests/browser/browser_bookmarksProperties.js
@@ -137,17 +137,17 @@ gTests.push({
 
   finish() {
     SidebarUI.hide();
   },
 
   async cleanup() {
     // Check tags have not changed.
     var tags = PlacesUtils.tagging.getTagsForURI(Services.io.newURI(TEST_URL));
-    Assert.ok(tags[0], "testTag", "Tag on node has not changed");
+    Assert.equal(tags[0], "testTag", "Tag on node has not changed");
 
     // Cleanup.
     PlacesUtils.tagging.untagURI(Services.io.newURI(TEST_URL), ["testTag"]);
     await PlacesUtils.bookmarks.remove(this._bookmark);
     let bm = await PlacesUtils.bookmarks.fetch(this._bookmark.guid);
     Assert.ok(!bm, "should have been removed");
   },
 });
--- a/browser/components/places/tests/browser/browser_history_sidebar_search.js
+++ b/browser/components/places/tests/browser/browser_history_sidebar_search.js
@@ -55,10 +55,10 @@ function check_tree_order(tree, pages, a
   for (let i = 0; i < treeView.rowCount; i++) {
     let node = treeView.nodeForTreeIndex(i);
     // We could inherit delayed visits from previous tests, skip them.
     if (!pages.includes(node.uri))
       continue;
     is(node.uri, pages[i], "Node is in correct position based on its visit date");
     found++;
   }
-  ok(found, pages.length + aNumberOfRowsDelta, "Found all expected results");
+  is(found, pages.length + aNumberOfRowsDelta, "Found all expected results");
 }
--- a/browser/components/preferences/in-content/tests/browser_homepages_use_bookmark.js
+++ b/browser/components/preferences/in-content/tests/browser_homepages_use_bookmark.js
@@ -1,22 +1,22 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
-const TEST_URL = "http://example.com";
+const TEST_URL = "http://example.com/";
 
 add_task(async function setup() {
   let oldHomepagePref = Services.prefs.getCharPref("browser.startup.homepage");
 
   await openPreferencesViaOpenPreferencesAPI("paneHome", {leaveOpen: true});
 
-  Assert.ok(gBrowser.currentURI.spec, "about:preferences#home",
-            "#home should be in the URI for about:preferences");
+  Assert.equal(gBrowser.currentURI.spec, "about:preferences#home",
+               "#home should be in the URI for about:preferences");
 
   registerCleanupFunction(async () => {
     Services.prefs.setCharPref("browser.startup.homepage", oldHomepagePref);
     BrowserTestUtils.removeTab(gBrowser.selectedTab);
     await PlacesUtils.bookmarks.eraseEverything();
   });
 });
 
@@ -37,11 +37,11 @@ add_task(async function testSetHomepageF
   doc.getElementById("useBookmarkBtn").click();
 
   let dialog = await promiseSubDialogLoaded;
 
   dialog.document.getElementById("bookmarks").selectItems([bm.guid]);
 
   dialog.document.documentElement.getButton("accept").click();
 
-  Assert.ok(Services.prefs.getCharPref("browser.startup.homepage"), TEST_URL,
-            "Should have set the homepage to the same as the bookmark.");
+  Assert.equal(Services.prefs.getCharPref("browser.startup.homepage"), TEST_URL,
+               "Should have set the homepage to the same as the bookmark.");
 });
--- a/browser/components/search/test/browser_oneOffContextMenu_setDefault.js
+++ b/browser/components/search/test/browser_oneOffContextMenu_setDefault.js
@@ -106,17 +106,17 @@ add_task(async function test_urlBarChang
  * has resulted in the test engine now being the current engine.
  *
  * @return {Promise} Resolved once the test engine is set as the current engine.
  */
 function promiseCurrentEngineChanged() {
   return new Promise(resolve => {
     function observer(aSub, aTopic, aData) {
       if (aData == "engine-current") {
-        Assert.ok(Services.search.currentEngine.name, TEST_ENGINE_NAME, "currentEngine set");
+        Assert.equal(Services.search.currentEngine.name, TEST_ENGINE_NAME, "currentEngine set");
         Services.obs.removeObserver(observer, "browser-search-engine-modified");
         resolve();
       }
     }
 
     Services.obs.addObserver(observer, "browser-search-engine-modified");
   });
 }
--- a/browser/components/sessionstore/ContentRestore.jsm
+++ b/browser/components/sessionstore/ContentRestore.jsm
@@ -3,57 +3,29 @@
 * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 var EXPORTED_SYMBOLS = ["ContentRestore"];
 
 ChromeUtils.import("resource://gre/modules/Services.jsm", this);
 
-ChromeUtils.defineModuleGetter(this, "DocShellCapabilities",
-  "resource:///modules/sessionstore/DocShellCapabilities.jsm");
 ChromeUtils.defineModuleGetter(this, "FormData",
   "resource://gre/modules/FormData.jsm");
-ChromeUtils.defineModuleGetter(this, "ScrollPosition",
-  "resource://gre/modules/ScrollPosition.jsm");
 ChromeUtils.defineModuleGetter(this, "SessionHistory",
   "resource://gre/modules/sessionstore/SessionHistory.jsm");
 ChromeUtils.defineModuleGetter(this, "SessionStorage",
   "resource:///modules/sessionstore/SessionStorage.jsm");
 ChromeUtils.defineModuleGetter(this, "Utils",
   "resource://gre/modules/sessionstore/Utils.jsm");
 
 const ssu = Cc["@mozilla.org/browser/sessionstore/utils;1"]
               .getService(Ci.nsISessionStoreUtils);
 
 /**
- * Restores frame tree |data|, starting at the given root |frame|. As the
- * function recurses into descendant frames it will call cb(frame, data) for
- * each frame it encounters, starting with the given root.
- */
-function restoreFrameTreeData(frame, data, cb) {
-  // Restore data for the root frame.
-  // The callback can abort by returning false.
-  if (cb(frame, data) === false) {
-    return;
-  }
-
-  if (!data.hasOwnProperty("children")) {
-    return;
-  }
-
-  // Recurse into child frames.
-  ssu.forEachNonDynamicChildFrame(frame, (subframe, index) => {
-    if (data.children[index]) {
-      restoreFrameTreeData(subframe, data.children[index], cb);
-    }
-  });
-}
-
-/**
  * This module implements the content side of session restoration. The chrome
  * side is handled by SessionStore.jsm. The functions in this module are called
  * by content-sessionStore.js based on messages received from SessionStore.jsm
  * (or, in one case, based on a "load" event). Each tab has its own
  * ContentRestore instance, constructed by content-sessionStore.js.
  *
  * In a typical restore, content-sessionStore.js will call the following based
  * on messages and events it receives:
@@ -163,18 +135,17 @@ ContentRestoreInternal.prototype = {
       this.restoreTabContent(null, false, callbacks.onLoadFinished);
     });
 
     webNavigation.sessionHistory.legacySHistory.addSHistoryListener(listener);
     this._historyListener = listener;
 
     // Make sure to reset the capabilities and attributes in case this tab gets
     // reused.
-    let disallow = new Set(tabData.disallow && tabData.disallow.split(","));
-    DocShellCapabilities.restore(this.docShell, disallow);
+    ssu.restoreDocShellCapabilities(this.docShell, tabData.disallow);
 
     if (tabData.storage && this.docShell instanceof Ci.nsIDocShell) {
       SessionStorage.restore(this.docShell, tabData.storage);
       delete tabData.storage;
     }
 
     // Add a progress listener to correctly handle browser.loadURI()
     // calls from foreign code.
@@ -312,27 +283,27 @@ ContentRestoreInternal.prototype = {
       return;
     }
     let {formdata, scrollPositions} = this._restoringDocument;
     this._restoringDocument = null;
 
     let window = this.docShell.domWindow;
 
     // Restore form data.
-    restoreFrameTreeData(window, formdata, (frame, data) => {
+    Utils.restoreFrameTreeData(window, formdata, (frame, data) => {
       // restore() will return false, and thus abort restoration for the
       // current |frame| and its descendants, if |data.url| is given but
       // doesn't match the loaded document's URL.
       return FormData.restore(frame, data);
     });
 
     // Restore scroll data.
-    restoreFrameTreeData(window, scrollPositions, (frame, data) => {
+    Utils.restoreFrameTreeData(window, scrollPositions, (frame, data) => {
       if (data.scroll) {
-        ScrollPosition.restore(frame, data.scroll);
+        ssu.restoreScrollPosition(frame, data.scroll);
       }
     });
   },
 
   /**
    * Cancel an ongoing restore. This function can be called any time between
    * restoreHistory and restoreDocument.
    *
--- a/browser/components/sessionstore/ContentSessionStore.jsm
+++ b/browser/components/sessionstore/ContentSessionStore.jsm
@@ -17,20 +17,16 @@ function debug(msg) {
   Services.console.logStringMessage("SessionStoreContent: " + msg);
 }
 
 ChromeUtils.defineModuleGetter(this, "FormData",
   "resource://gre/modules/FormData.jsm");
 
 ChromeUtils.defineModuleGetter(this, "ContentRestore",
   "resource:///modules/sessionstore/ContentRestore.jsm");
-ChromeUtils.defineModuleGetter(this, "DocShellCapabilities",
-  "resource:///modules/sessionstore/DocShellCapabilities.jsm");
-ChromeUtils.defineModuleGetter(this, "ScrollPosition",
-  "resource://gre/modules/ScrollPosition.jsm");
 ChromeUtils.defineModuleGetter(this, "SessionHistory",
   "resource://gre/modules/sessionstore/SessionHistory.jsm");
 ChromeUtils.defineModuleGetter(this, "SessionStorage",
   "resource:///modules/sessionstore/SessionStorage.jsm");
 
 ChromeUtils.defineModuleGetter(this, "Utils",
   "resource://gre/modules/sessionstore/Utils.jsm");
 const ssu = Cc["@mozilla.org/browser/sessionstore/utils;1"]
@@ -348,17 +344,17 @@ class ScrollPositionListener extends Han
     this.messageQueue.push("scroll", () => this.collect());
   }
 
   onPageLoadStarted() {
     this.messageQueue.push("scroll", () => null);
   }
 
   collect() {
-    return mapFrameTree(this.mm, ScrollPosition.collect);
+    return mapFrameTree(this.mm, ssu.collectScrollPosition.bind(ssu));
   }
 }
 
 /**
  * Listens for changes to input elements. Whenever the value of an input
  * element changes we will re-collect data for the current frame tree and send
  * a message to the parent process.
  *
@@ -413,19 +409,17 @@ class DocShellCapabilitiesListener exten
      * that have just been collected. If nothing changed we won't send a message.
      */
     this._latestCapabilities = "";
 
     this.stateChangeNotifier.addObserver(this);
   }
 
   onPageLoadStarted() {
-    // The order of docShell capabilities cannot change while we're running
-    // so calling join() without sorting before is totally sufficient.
-    let caps = DocShellCapabilities.collect(this.mm.docShell).join(",");
+    let caps = ssu.collectDocShellCapabilities(this.mm.docShell);
 
     // Send new data only when the capability list changes.
     if (caps != this._latestCapabilities) {
       this._latestCapabilities = caps;
       this.messageQueue.push("disallow", () => caps || null);
     }
   }
 }
deleted file mode 100644
--- a/browser/components/sessionstore/DocShellCapabilities.jsm
+++ /dev/null
@@ -1,53 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
-* License, v. 2.0. If a copy of the MPL was not distributed with this file,
-* You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-"use strict";
-
-var EXPORTED_SYMBOLS = ["DocShellCapabilities"];
-
-/**
- * The external API exported by this module.
- */
-var DocShellCapabilities = Object.freeze({
-  collect(docShell) {
-    return DocShellCapabilitiesInternal.collect(docShell);
-  },
-
-  restore(docShell, disallow) {
-    return DocShellCapabilitiesInternal.restore(docShell, disallow);
-  },
-});
-
-const CAPABILITIES_TO_IGNORE = new Set(["Javascript"]);
-
-/**
- * Internal functionality to save and restore the docShell.allow* properties.
- */
-var DocShellCapabilitiesInternal = {
-  // List of docShell capabilities to (re)store. These are automatically
-  // retrieved from a given docShell if not already collected before.
-  // This is made so they're automatically in sync with all nsIDocShell.allow*
-  // properties.
-  caps: null,
-
-  allCapabilities(docShell) {
-    if (!this.caps) {
-      let keys = Object.keys(docShell);
-      this.caps = keys.filter(k => k.startsWith("allow")).map(k => k.slice(5));
-    }
-    return this.caps;
-  },
-
-  collect(docShell) {
-    let caps = this.allCapabilities(docShell);
-    return caps.filter(cap => !docShell["allow" + cap]
-                              && !CAPABILITIES_TO_IGNORE.has(cap));
-  },
-
-  restore(docShell, disallow) {
-    let caps = this.allCapabilities(docShell);
-    for (let cap of caps)
-      docShell["allow" + cap] = !disallow.has(cap);
-  },
-};
--- a/browser/components/sessionstore/moz.build
+++ b/browser/components/sessionstore/moz.build
@@ -7,17 +7,16 @@
 XPCSHELL_TESTS_MANIFESTS += ['test/unit/xpcshell.ini']
 BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
 
 JAR_MANIFESTS += ['jar.mn']
 
 EXTRA_JS_MODULES.sessionstore = [
     'ContentRestore.jsm',
     'ContentSessionStore.jsm',
-    'DocShellCapabilities.jsm',
     'GlobalState.jsm',
     'RecentlyClosedTabsAndWindowsMenuUtils.jsm',
     'RunState.jsm',
     'SessionCookies.jsm',
     'SessionFile.jsm',
     'SessionMigration.jsm',
     'SessionSaver.jsm',
     'SessionStartup.jsm',
--- a/browser/modules/test/browser/browser_PermissionUI.js
+++ b/browser/modules/test/browser/browser_PermissionUI.js
@@ -432,20 +432,23 @@ add_task(async function test_window_swap
     let shownPromise =
       BrowserTestUtils.waitForEvent(PopupNotifications.panel, "popupshown");
     TestPrompt.prompt();
     await shownPromise;
 
     let newWindowOpened = BrowserTestUtils.waitForNewWindow();
     gBrowser.replaceTabWithWindow(gBrowser.selectedTab);
     let newWindow = await newWindowOpened;
-    shownPromise =
-      BrowserTestUtils.waitForEvent(newWindow.PopupNotifications.panel, "popupshown");
-    TestPrompt.prompt();
-    await shownPromise;
+    // We may have already opened the panel, because it was open before we moved the tab.
+    if (newWindow.PopupNotifications.panel.state != "open") {
+      shownPromise =
+        BrowserTestUtils.waitForEvent(newWindow.PopupNotifications.panel, "popupshown");
+      TestPrompt.prompt();
+      await shownPromise;
+    }
 
     let notification =
       newWindow.PopupNotifications.getNotification(kTestNotificationID,
                                                    newWindow.gBrowser.selectedBrowser);
     Assert.ok(notification, "Should have gotten the notification");
 
     Assert.equal(notification.message, kTestMessage,
                  "Should be showing the right message");
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -821,31 +821,31 @@ toolbarbutton[constrain-size="true"][cui
   visibility: collapse;
 }
 
 #PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons {
   display: none;
 }
 
 .panel-banner-item {
-  color: black;
+  color: black !important /* !important overrides the toolbarbutton:hover default style on Linux */;
   background-color: hsla(96,65%,75%,.5);
 }
 
 .panel-banner-item:not([disabled]):hover {
   background-color: hsla(96,65%,75%,.8);
 }
 
 .panel-banner-item:not([disabled]):hover:active {
   background-color: hsl(96,65%,75%);
 }
 
 :root[lwt-popup-brighttext] .panel-banner-item:not([disabled]) {
   background-color: rgba(48,230,11,.1);
-  color: #F9F9FA;
+  color: #F9F9FA !important;
 }
 
 :root[lwt-popup-brighttext] .panel-banner-item:not([disabled]):hover {
   background-color: rgba(48,230,11,.15);
 }
 
 :root[lwt-popup-brighttext] .panel-banner-item:not([disabled]):active {
   background-color: rgba(48,230,11,.2);
--- a/caps/tests/mochitest/test_bug470804.html
+++ b/caps/tests/mochitest/test_bug470804.html
@@ -29,13 +29,13 @@ isnot(principal, null, "Should have a no
 is(secMan.isSystemPrincipal(principal), false,
    "Shouldn't have system principal here");
 try {
   secMan.checkLoadURIWithPrincipal(principal, null,
                                    nsIScriptSecurityManager.STANDARD);
 } catch (e) {
   // throwing is fine, it's just crashing that's bad
 }
-ok(true, "Survival", "We should get here without crashing");
+ok(true, "Survival: we should get here without crashing");
 </script>
 </pre>
 </body>
 </html>
--- a/devtools/client/aboutdebugging-new/aboutdebugging.css
+++ b/devtools/client/aboutdebugging-new/aboutdebugging.css
@@ -8,16 +8,17 @@
 @import "resource://devtools/client/themes/variables.css";
 @import "resource://devtools/client/aboutdebugging-new/src/base.css";
 
 /*
 * Components
 */
 @import "resource://devtools/client/aboutdebugging-new/src/components/App.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css";
+@import "resource://devtools/client/aboutdebugging-new/src/components/RuntimePage.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.css";
--- a/devtools/client/aboutdebugging-new/src/actions/debug-targets.js
+++ b/devtools/client/aboutdebugging-new/src/actions/debug-targets.js
@@ -31,41 +31,41 @@ const {
   REQUEST_WORKERS_START,
   REQUEST_WORKERS_SUCCESS,
   RUNTIMES,
 } = require("../constants");
 
 function inspectDebugTarget(type, id) {
   return async (_, getState) => {
     const runtime = getCurrentRuntime(getState().runtimes);
-    const { connection, type: runtimeType } = runtime;
+    const { runtimeDetails, type: runtimeType } = runtime;
 
     switch (type) {
       case DEBUG_TARGETS.TAB: {
         // Open tab debugger in new window.
         if (runtimeType === RUNTIMES.NETWORK || runtimeType === RUNTIMES.USB) {
-          const { host, port } = connection.transportDetails;
+          const { host, port } = runtimeDetails.transportDetails;
           window.open(`about:devtools-toolbox?type=tab&id=${id}` +
                       `&host=${host}&port=${port}`);
         } else if (runtimeType === RUNTIMES.THIS_FIREFOX) {
           window.open(`about:devtools-toolbox?type=tab&id=${id}`);
         }
         break;
       }
       case DEBUG_TARGETS.EXTENSION: {
         if (runtimeType === RUNTIMES.NETWORK) {
-          await debugRemoteAddon(id, connection.client);
+          await debugRemoteAddon(id, runtimeDetails.client);
         } else if (runtimeType === RUNTIMES.THIS_FIREFOX) {
           debugLocalAddon(id);
         }
         break;
       }
       case DEBUG_TARGETS.WORKER: {
         // Open worker toolbox in new window.
-        gDevToolsBrowser.openWorkerToolbox(connection.client, id);
+        gDevToolsBrowser.openWorkerToolbox(runtimeDetails.client, id);
         break;
       }
 
       default: {
         console.error("Failed to inspect the debug target of " +
                       `type: ${ type } id: ${ id }`);
       }
     }
--- a/devtools/client/aboutdebugging-new/src/actions/runtimes.js
+++ b/devtools/client/aboutdebugging-new/src/actions/runtimes.js
@@ -6,32 +6,37 @@
 
 const { ADB } = require("devtools/shared/adb/adb");
 const { DebuggerClient } = require("devtools/shared/client/debugger-client");
 const { DebuggerServer } = require("devtools/server/main");
 
 const Actions = require("./index");
 
 const {
+  getCurrentRuntime,
   findRuntimeById,
 } = require("../modules/runtimes-state-helper");
 const { isSupportedDebugTarget } = require("../modules/debug-target-support");
 
 const {
   CONNECT_RUNTIME_FAILURE,
   CONNECT_RUNTIME_START,
   CONNECT_RUNTIME_SUCCESS,
   DEBUG_TARGETS,
   DISCONNECT_RUNTIME_FAILURE,
   DISCONNECT_RUNTIME_START,
   DISCONNECT_RUNTIME_SUCCESS,
+  RUNTIME_PREFERENCE,
   RUNTIMES,
   UNWATCH_RUNTIME_FAILURE,
   UNWATCH_RUNTIME_START,
   UNWATCH_RUNTIME_SUCCESS,
+  UPDATE_CONNECTION_PROMPT_SETTING_FAILURE,
+  UPDATE_CONNECTION_PROMPT_SETTING_START,
+  UPDATE_CONNECTION_PROMPT_SETTING_SUCCESS,
   USB_RUNTIMES_UPDATED,
   WATCH_RUNTIME_FAILURE,
   WATCH_RUNTIME_START,
   WATCH_RUNTIME_SUCCESS,
 } = require("../constants");
 
 async function createLocalClient() {
   DebuggerServer.init();
@@ -90,38 +95,41 @@ async function getRuntimeInfo(runtime, c
 
 function connectRuntime(id) {
   return async (dispatch, getState) => {
     dispatch({ type: CONNECT_RUNTIME_START });
     try {
       const runtime = findRuntimeById(id, getState().runtimes);
       const { client, transportDetails } = await createClientForRuntime(runtime);
       const info = await getRuntimeInfo(runtime, client);
-      const connection = { client, info, transportDetails };
+      const preferenceFront = await client.mainRoot.getFront("preference");
+      const connectionPromptEnabled =
+        await preferenceFront.getBoolPref(RUNTIME_PREFERENCE.CONNECTION_PROMPT);
+      const runtimeDetails = { connectionPromptEnabled, client, info, transportDetails };
 
       dispatch({
         type: CONNECT_RUNTIME_SUCCESS,
         runtime: {
           id,
-          connection,
+          runtimeDetails,
           type: runtime.type,
         },
       });
     } catch (e) {
       dispatch({ type: CONNECT_RUNTIME_FAILURE, error: e.message });
     }
   };
 }
 
 function disconnectRuntime(id) {
   return async (dispatch, getState) => {
     dispatch({ type: DISCONNECT_RUNTIME_START });
     try {
       const runtime = findRuntimeById(id, getState().runtimes);
-      const client = runtime.connection.client;
+      const client = runtime.runtimeDetails.client;
 
       await client.close();
       DebuggerServer.destroy();
 
       dispatch({
         type: DISCONNECT_RUNTIME_SUCCESS,
         runtime: {
           id,
@@ -129,16 +137,38 @@ function disconnectRuntime(id) {
         },
       });
     } catch (e) {
       dispatch({ type: DISCONNECT_RUNTIME_FAILURE, error: e.message });
     }
   };
 }
 
+function updateConnectionPromptSetting(connectionPromptEnabled) {
+  return async (dispatch, getState) => {
+    dispatch({ type: UPDATE_CONNECTION_PROMPT_SETTING_START });
+    try {
+      const runtime = getCurrentRuntime(getState().runtimes);
+      const client = runtime.runtimeDetails.client;
+      const preferenceFront = await client.mainRoot.getFront("preference");
+      await preferenceFront.setBoolPref(RUNTIME_PREFERENCE.CONNECTION_PROMPT,
+                                        connectionPromptEnabled);
+      // Re-get actual value from the runtime.
+      connectionPromptEnabled =
+        await preferenceFront.getBoolPref(RUNTIME_PREFERENCE.CONNECTION_PROMPT);
+
+      dispatch({ type: UPDATE_CONNECTION_PROMPT_SETTING_SUCCESS,
+                 runtime, connectionPromptEnabled });
+    } catch (e) {
+      dispatch({ type: UPDATE_CONNECTION_PROMPT_SETTING_FAILURE,
+                 error: e.message });
+    }
+  };
+}
+
 function watchRuntime(id) {
   return async (dispatch, getState) => {
     dispatch({ type: WATCH_RUNTIME_START });
 
     try {
       if (id === RUNTIMES.THIS_FIREFOX) {
         // THIS_FIREFOX connects and disconnects on the fly when opening the page.
         await dispatch(connectRuntime(RUNTIMES.THIS_FIREFOX));
@@ -187,11 +217,12 @@ function unwatchRuntime(id) {
 function updateUSBRuntimes(runtimes) {
   return { type: USB_RUNTIMES_UPDATED, runtimes };
 }
 
 module.exports = {
   connectRuntime,
   disconnectRuntime,
   unwatchRuntime,
+  updateConnectionPromptSetting,
   updateUSBRuntimes,
   watchRuntime,
 };
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/src/components/ConnectionPromptSetting.js
@@ -0,0 +1,51 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+
+const FluentReact = require("devtools/client/shared/vendor/fluent-react");
+const Localized = createFactory(FluentReact.Localized);
+
+const Actions = require("../actions/index");
+
+class ConnectionPromptSetting extends PureComponent {
+  static get propTypes() {
+    return {
+      dispatch: PropTypes.func.isRequired,
+      connectionPromptEnabled: PropTypes.bool.isRequired,
+    };
+  }
+
+  onToggleClick() {
+    const { connectionPromptEnabled, dispatch } = this.props;
+    dispatch(Actions.updateConnectionPromptSetting(!connectionPromptEnabled));
+  }
+
+  render() {
+    const { connectionPromptEnabled } = this.props;
+
+    const localizedState = connectionPromptEnabled
+                             ? "about-debugging-connection-prompt-disable-button"
+                             : "about-debugging-connection-prompt-enable-button";
+
+    return Localized(
+      {
+        id: localizedState,
+      },
+      dom.button(
+        {
+          className: "default-button js-connection-prompt-toggle-button",
+          onClick: () => this.onToggleClick(),
+        },
+        localizedState
+      )
+    );
+  }
+}
+
+module.exports = ConnectionPromptSetting;
--- a/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css
@@ -3,17 +3,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
  /* NOTE: refactor these two rules into a more generic component if we ever need
           a main heading with an icon */
 
 .runtime-info {
   align-items: center;
   display: flex;
-  margin-block-end: 40px;
   white-space: nowrap;
 }
 
 .runtime-info__icon {
   height: 64px;
   margin-inline-end: 12px;
   width: 64px;
 }
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimePage.css
@@ -0,0 +1,8 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.connection-prompt-setting {
+  margin-block-end: var(--base-distance);
+  text-align: right;
+}
--- a/devtools/client/aboutdebugging-new/src/components/RuntimePage.js
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimePage.js
@@ -7,46 +7,62 @@
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 const FluentReact = require("devtools/client/shared/vendor/fluent-react");
 const Localized = createFactory(FluentReact.Localized);
 
+const ConnectionPromptSetting = createFactory(require("./ConnectionPromptSetting"));
 const DebugTargetPane = createFactory(require("./debugtarget/DebugTargetPane"));
 const ExtensionDetail = createFactory(require("./debugtarget/ExtensionDetail"));
 const InspectAction = createFactory(require("./debugtarget/InspectAction"));
 const RuntimeInfo = createFactory(require("./RuntimeInfo"));
 const ServiceWorkerAction = createFactory(require("./debugtarget/ServiceWorkerAction"));
 const TabDetail = createFactory(require("./debugtarget/TabDetail"));
 const TemporaryExtensionAction = createFactory(require("./debugtarget/TemporaryExtensionAction"));
 const TemporaryExtensionInstaller =
   createFactory(require("./debugtarget/TemporaryExtensionInstaller"));
 const WorkerDetail = createFactory(require("./debugtarget/WorkerDetail"));
 
 const { DEBUG_TARGET_PANE } = require("../constants");
-const { getCurrentRuntimeInfo } = require("../modules/runtimes-state-helper");
+const {
+  getCurrentConnectionPromptSetting,
+  getCurrentRuntimeInfo,
+} = require("../modules/runtimes-state-helper");
 const { isSupportedDebugTargetPane } = require("../modules/debug-target-support");
 
 class RuntimePage extends PureComponent {
   static get propTypes() {
     return {
       collapsibilities: PropTypes.object.isRequired,
+      connectionPromptEnabled: PropTypes.bool.isRequired,
       dispatch: PropTypes.func.isRequired,
       installedExtensions: PropTypes.arrayOf(PropTypes.object).isRequired,
       otherWorkers: PropTypes.arrayOf(PropTypes.object).isRequired,
       runtimeInfo: PropTypes.object,
       serviceWorkers: PropTypes.arrayOf(PropTypes.object).isRequired,
       sharedWorkers: PropTypes.arrayOf(PropTypes.object).isRequired,
       tabs: PropTypes.arrayOf(PropTypes.object).isRequired,
       temporaryExtensions: PropTypes.arrayOf(PropTypes.object).isRequired,
     };
   }
 
+  renderConnectionPromptSetting() {
+    const { connectionPromptEnabled, dispatch } = this.props;
+
+    return dom.div(
+      {
+        className: "connection-prompt-setting",
+      },
+      ConnectionPromptSetting({ connectionPromptEnabled, dispatch }),
+    );
+  }
+
   renderDebugTargetPane(name, targets, actionComponent,
                         detailComponent, paneKey, localizationId) {
     const { collapsibilities, dispatch, runtimeInfo } = this.props;
 
     if (!isSupportedDebugTargetPane(runtimeInfo.type, paneKey)) {
       return null;
     }
 
@@ -85,16 +101,17 @@ class RuntimePage extends PureComponent 
       return null;
     }
 
     return dom.article(
       {
         className: "page js-runtime-page",
       },
       RuntimeInfo(runtimeInfo),
+      this.renderConnectionPromptSetting(),
       isSupportedDebugTargetPane(runtimeInfo.type, DEBUG_TARGET_PANE.TEMPORARY_EXTENSION)
         ? TemporaryExtensionInstaller({ dispatch })
         : null,
       this.renderDebugTargetPane("Temporary Extensions",
                                  temporaryExtensions,
                                  TemporaryExtensionAction,
                                  ExtensionDetail,
                                  DEBUG_TARGET_PANE.TEMPORARY_EXTENSION,
@@ -130,16 +147,17 @@ class RuntimePage extends PureComponent 
                                  DEBUG_TARGET_PANE.OTHER_WORKER,
                                  "about-debugging-runtime-other-workers"),
     );
   }
 }
 
 const mapStateToProps = state => {
   return {
+    connectionPromptEnabled: getCurrentConnectionPromptSetting(state.runtimes),
     collapsibilities: state.ui.debugTargetCollapsibilities,
     installedExtensions: state.debugTargets.installedExtensions,
     otherWorkers: state.debugTargets.otherWorkers,
     runtimeInfo: getCurrentRuntimeInfo(state.runtimes),
     serviceWorkers: state.debugTargets.serviceWorkers,
     sharedWorkers: state.debugTargets.sharedWorkers,
     tabs: state.debugTargets.tabs,
     temporaryExtensions: state.debugTargets.temporaryExtensions,
--- a/devtools/client/aboutdebugging-new/src/components/moz.build
+++ b/devtools/client/aboutdebugging-new/src/components/moz.build
@@ -6,12 +6,14 @@ DIRS += [
     'connect',
     'debugtarget',
     'sidebar',
 ]
 
 DevToolsModules(
     'App.css',
     'App.js',
+    'ConnectionPromptSetting.js',
     'RuntimeInfo.css',
     'RuntimeInfo.js',
+    'RuntimePage.css',
     'RuntimePage.js',
 )
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
@@ -71,24 +71,24 @@ class Sidebar extends PureComponent {
     ];
   }
 
   renderSidebarItems(icon, runtimes) {
     const { dispatch, selectedPage } = this.props;
 
     return runtimes.map(runtime => {
       const pageId = runtime.type + "-" + runtime.id;
-      const runtimeHasConnection = !!runtime.connection;
+      const runtimeHasDetails = !!runtime.runtimeDetails;
 
       return SidebarRuntimeItem({
         id: pageId,
         deviceName: runtime.extra.deviceName,
         dispatch,
         icon,
-        isConnected: runtimeHasConnection,
+        isConnected: runtimeHasDetails,
         isSelected: selectedPage === pageId,
         key: pageId,
         name: runtime.name,
         runtimeId: runtime.id,
       });
     });
   }
 
--- a/devtools/client/aboutdebugging-new/src/constants.js
+++ b/devtools/client/aboutdebugging-new/src/constants.js
@@ -28,16 +28,19 @@ const actionTypes = {
   REQUEST_TABS_START: "REQUEST_TABS_START",
   REQUEST_TABS_SUCCESS: "REQUEST_TABS_SUCCESS",
   REQUEST_WORKERS_FAILURE: "REQUEST_WORKERS_FAILURE",
   REQUEST_WORKERS_START: "REQUEST_WORKERS_START",
   REQUEST_WORKERS_SUCCESS: "REQUEST_WORKERS_SUCCESS",
   UNWATCH_RUNTIME_FAILURE: "UNWATCH_RUNTIME_FAILURE",
   UNWATCH_RUNTIME_START: "UNWATCH_RUNTIME_START",
   UNWATCH_RUNTIME_SUCCESS: "UNWATCH_RUNTIME_SUCCESS",
+  UPDATE_CONNECTION_PROMPT_SETTING_FAILURE: "UPDATE_CONNECTION_PROMPT_SETTING_FAILURE",
+  UPDATE_CONNECTION_PROMPT_SETTING_START: "UPDATE_CONNECTION_PROMPT_SETTING_START",
+  UPDATE_CONNECTION_PROMPT_SETTING_SUCCESS: "UPDATE_CONNECTION_PROMPT_SETTING_SUCCESS",
   USB_RUNTIMES_UPDATED: "USB_RUNTIMES_UPDATED",
   WATCH_RUNTIME_FAILURE: "WATCH_RUNTIME_FAILURE",
   WATCH_RUNTIME_START: "WATCH_RUNTIME_START",
   WATCH_RUNTIME_SUCCESS: "WATCH_RUNTIME_SUCCESS",
 };
 
 const DEBUG_TARGETS = {
   EXTENSION: "EXTENSION",
@@ -54,16 +57,20 @@ const DEBUG_TARGET_PANE = {
   TEMPORARY_EXTENSION: "temporaryExtension",
 };
 
 const PAGES = {
   THIS_FIREFOX: "this-firefox",
   CONNECT: "connect",
 };
 
+const RUNTIME_PREFERENCE = {
+  CONNECTION_PROMPT: "devtools.debugger.prompt-connection",
+};
+
 const RUNTIMES = {
   NETWORK: "network",
   THIS_FIREFOX: "this-firefox",
   USB: "usb",
 };
 
 const SERVICE_WORKER_FETCH_STATES = {
   LISTENING: "LISTENING",
@@ -82,13 +89,14 @@ const USB_STATES = {
   UPDATING_USB: "UPDATING_USB",
 };
 
 // flatten constants
 module.exports = Object.assign({}, {
   DEBUG_TARGETS,
   DEBUG_TARGET_PANE,
   PAGES,
+  RUNTIME_PREFERENCE,
   RUNTIMES,
   SERVICE_WORKER_FETCH_STATES,
   SERVICE_WORKER_STATUSES,
   USB_STATES,
 }, actionTypes);
--- a/devtools/client/aboutdebugging-new/src/middleware/debug-target-listener.js
+++ b/devtools/client/aboutdebugging-new/src/middleware/debug-target-listener.js
@@ -49,28 +49,28 @@ function debugTargetListenerMiddleware(s
 
   const onWorkersUpdated = () => {
     store.dispatch(Actions.requestWorkers());
   };
 
   return next => action => {
     switch (action.type) {
       case WATCH_RUNTIME_SUCCESS: {
-        const { client } = action.runtime.connection;
+        const { client } = action.runtime.runtimeDetails;
         client.addListener("tabListChanged", onTabsUpdated);
         AddonManager.addAddonListener(extensionsListener);
         client.addListener("workerListChanged", onWorkersUpdated);
         client.addListener("serviceWorkerRegistrationListChanged", onWorkersUpdated);
         client.addListener("processListChanged", onWorkersUpdated);
         client.addListener("registration-changed", onWorkersUpdated);
         client.addListener("push-subscription-modified", onWorkersUpdated);
         break;
       }
       case UNWATCH_RUNTIME_START: {
-        const { client } = action.runtime.connection;
+        const { client } = action.runtime.runtimeDetails;
         client.removeListener("tabListChanged", onTabsUpdated);
         AddonManager.removeAddonListener(extensionsListener);
         client.removeListener("workerListChanged", onWorkersUpdated);
         client.removeListener("serviceWorkerRegistrationListChanged", onWorkersUpdated);
         client.removeListener("processListChanged", onWorkersUpdated);
         client.removeListener("registration-changed", onWorkersUpdated);
         client.removeListener("push-subscription-modified", onWorkersUpdated);
         break;
--- a/devtools/client/aboutdebugging-new/src/modules/runtimes-state-helper.js
+++ b/devtools/client/aboutdebugging-new/src/modules/runtimes-state-helper.js
@@ -6,33 +6,39 @@
 
 function getCurrentRuntime(runtimesState) {
   const selectedRuntimeId = runtimesState.selectedRuntimeId;
   return findRuntimeById(selectedRuntimeId, runtimesState);
 }
 exports.getCurrentRuntime = getCurrentRuntime;
 
 function getCurrentClient(runtimesState) {
-  const connection = getCurrentConnection(runtimesState);
-  return connection ? connection.client : null;
+  const runtimeDetails = getCurrentRuntimeDetails(runtimesState);
+  return runtimeDetails ? runtimeDetails.client : null;
 }
 exports.getCurrentClient = getCurrentClient;
 
 function getCurrentRuntimeInfo(runtimesState) {
-  const connection = getCurrentConnection(runtimesState);
-  return connection ? connection.info : null;
+  const runtimeDetails = getCurrentRuntimeDetails(runtimesState);
+  return runtimeDetails ? runtimeDetails.info : null;
 }
 exports.getCurrentRuntimeInfo = getCurrentRuntimeInfo;
 
+function getCurrentConnectionPromptSetting(runtimesState) {
+  const runtimeDetails = getCurrentRuntimeDetails(runtimesState);
+  return runtimeDetails ? runtimeDetails.connectionPromptEnabled : false;
+}
+exports.getCurrentConnectionPromptSetting = getCurrentConnectionPromptSetting;
+
 function findRuntimeById(id, runtimesState) {
   const allRuntimes = [
     ...runtimesState.networkRuntimes,
     ...runtimesState.thisFirefoxRuntimes,
     ...runtimesState.usbRuntimes,
   ];
   return allRuntimes.find(r => r.id === id);
 }
 exports.findRuntimeById = findRuntimeById;
 
-function getCurrentConnection(runtimesState) {
+function getCurrentRuntimeDetails(runtimesState) {
   const runtime = getCurrentRuntime(runtimesState);
-  return runtime ? runtime.connection : null;
+  return runtime ? runtime.runtimeDetails : null;
 }
--- a/devtools/client/aboutdebugging-new/src/reducers/runtimes-state.js
+++ b/devtools/client/aboutdebugging-new/src/reducers/runtimes-state.js
@@ -5,16 +5,17 @@
 "use strict";
 
 const {
   CONNECT_RUNTIME_SUCCESS,
   DISCONNECT_RUNTIME_SUCCESS,
   NETWORK_LOCATIONS_UPDATED,
   RUNTIMES,
   UNWATCH_RUNTIME_SUCCESS,
+  UPDATE_CONNECTION_PROMPT_SETTING_SUCCESS,
   USB_RUNTIMES_UPDATED,
   WATCH_RUNTIME_SUCCESS,
 } = require("../constants");
 
 const {
   findRuntimeById,
 } = require("../modules/runtimes-state-helper");
 
@@ -64,23 +65,23 @@ function _updateRuntimeById(runtimeId, u
     return r;
   });
   return Object.assign({}, state, { [key]: updatedRuntimes });
 }
 
 function runtimesReducer(state = RuntimesState(), action) {
   switch (action.type) {
     case CONNECT_RUNTIME_SUCCESS: {
-      const { id, connection } = action.runtime;
-      return _updateRuntimeById(id, { connection }, state);
+      const { id, runtimeDetails } = action.runtime;
+      return _updateRuntimeById(id, { runtimeDetails }, state);
     }
 
     case DISCONNECT_RUNTIME_SUCCESS: {
       const { id } = action.runtime;
-      return _updateRuntimeById(id, { connection: null }, state);
+      return _updateRuntimeById(id, { runtimeDetails: null }, state);
     }
 
     case NETWORK_LOCATIONS_UPDATED: {
       const { locations } = action;
       const networkRuntimes = locations.map(location => {
         const [ host, port ] = location.split(":");
         return {
           id: location,
@@ -93,16 +94,25 @@ function runtimesReducer(state = Runtime
       });
       return Object.assign({}, state, { networkRuntimes });
     }
 
     case UNWATCH_RUNTIME_SUCCESS: {
       return Object.assign({}, state, { selectedRuntimeId: null });
     }
 
+    case UPDATE_CONNECTION_PROMPT_SETTING_SUCCESS: {
+      const { connectionPromptEnabled } = action;
+      const { id: runtimeId } = action.runtime;
+      const runtime = findRuntimeById(runtimeId, state);
+      const runtimeDetails =
+        Object.assign({}, runtime.runtimeDetails, { connectionPromptEnabled });
+      return _updateRuntimeById(runtimeId, { runtimeDetails }, state);
+    }
+
     case USB_RUNTIMES_UPDATED: {
       const { runtimes } = action;
       const usbRuntimes = runtimes.map(runtime => {
         return {
           id: runtime.id,
           extra: {
             connectionParameters: { socketPath: runtime._socketPath },
             deviceName: runtime.deviceName,
--- a/devtools/client/aboutdebugging-new/src/types.js
+++ b/devtools/client/aboutdebugging-new/src/types.js
@@ -24,20 +24,23 @@ const runtimeInfo = {
 const runtimeTransportDetails = {
   // host name of tcp connection to debugger server
   host: PropTypes.string.isRequired,
 
   // port number of tcp connection to debugger server
   port: PropTypes.number.isRequired,
 };
 
-const runtimeConnection = {
+const runtimeDetails = {
   // debugger client instance
   client: PropTypes.object.isRequired,
 
+  // reflect devtools.debugger.prompt-connection preference of this runtime
+  connectionPromptEnabled: PropTypes.bool.isRequired,
+
   // runtime information
   info: PropTypes.shape(runtimeInfo).isRequired,
 
   // tcp connection information,
   // unavailable on this-firefox runtime
   transportDetails: PropTypes.shape(runtimeTransportDetails),
 };
 
@@ -65,17 +68,17 @@ const runtimeExtra = {
   deviceName: PropTypes.string,
 };
 
 const runtime = {
   // unique id for the runtime
   id: PropTypes.string.isRequired,
 
   // available after the connection to the runtime is established
-  connection: PropTypes.shape(runtimeConnection),
+  runtimeDetails: PropTypes.shape(runtimeDetails),
 
   // object containing non standard properties that depend on the runtime type,
   // unavailable on this-firefox runtime
   extra: PropTypes.shape(runtimeExtra),
 
   // display name of the runtime
   name: PropTypes.string.isRequired,
 
--- a/devtools/client/aboutdebugging-new/test/browser/browser.ini
+++ b/devtools/client/aboutdebugging-new/test/browser/browser.ini
@@ -8,16 +8,17 @@ support-files =
   resources/test-adb-extension/*
   resources/test-temporary-extension/*
   !/devtools/client/shared/test/shared-head.js
   !/devtools/client/shared/test/telemetry-test-helpers.js
 
 [browser_aboutdebugging_connect_networklocations.js]
 [browser_aboutdebugging_connect_toggle_usb_devices.js]
 skip-if = (os == 'linux' && bits == 32) # ADB start() fails on linux 32, see Bug 1499638
+[browser_aboutdebugging_connection_prompt_setting.js]
 [browser_aboutdebugging_debug-target-pane_collapsibilities_interaction.js]
 [browser_aboutdebugging_debug-target-pane_collapsibilities_preference.js]
 [browser_aboutdebugging_debug-target-pane_empty.js]
 [browser_aboutdebugging_navigate.js]
 [browser_aboutdebugging_sidebar_network_runtimes.js]
 [browser_aboutdebugging_sidebar_usb_status.js]
 skip-if = (os == 'linux' && bits == 32) # ADB start() fails on linux 32, see Bug 1499638
 [browser_aboutdebugging_thisfirefox.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_connection_prompt_setting.js
@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Check whether can toggle enable/disable connection prompt setting.
+ */
+add_task(async function() {
+  info("Set initial state for test");
+  await pushPref("devtools.debugger.prompt-connection", true);
+
+  const { document, tab } = await openAboutDebugging();
+
+  info("Check whether connection prompt toggle button exists");
+  const connectionPromptToggleButton =
+    document.querySelector(".js-connection-prompt-toggle-button");
+  ok(connectionPromptToggleButton, "Toggle button existed");
+  await waitUntil(() => connectionPromptToggleButton.textContent.includes("Disable"));
+
+  info("Click on the toggle button");
+  connectionPromptToggleButton.click();
+  info("Wait until the toggle button text is updated");
+  await waitUntil(() => connectionPromptToggleButton.textContent.includes("Enable"));
+  info("Check the preference");
+  is(Services.prefs.getBoolPref("devtools.debugger.prompt-connection"),
+     false,
+     "The preference should be updated");
+
+  info("Click on the toggle button again");
+  connectionPromptToggleButton.click();
+  info("Wait until the toggle button text is updated");
+  await waitUntil(() => connectionPromptToggleButton.textContent.includes("Disable"));
+  info("Check the preference");
+  is(Services.prefs.getBoolPref("devtools.debugger.prompt-connection"),
+     true,
+     "The preference should be updated");
+
+  await removeTab(tab);
+});
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_navigate.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_navigate.js
@@ -20,22 +20,16 @@ add_task(async function() {
   const connectSidebarItem = findSidebarItemByText("Connect", document);
   ok(connectSidebarItem, "Found the Connect sidebar item");
 
   const thisFirefoxSidebarItem = findSidebarItemByText("This Firefox", document);
   ok(thisFirefoxSidebarItem, "Found the ThisFirefox sidebar item");
   ok(isSidebarItemSelected(thisFirefoxSidebarItem),
     "ThisFirefox sidebar item is selected by default");
 
-  // Wait until the about:debugging target is visible in the tab list
-  // Otherwise, we might have a race condition where TAB1 is discovered by the initial
-  // listTabs from the watchRuntime action, instead of being discovered after the
-  // TAB_UPDATED event. See analysis in Bug 1493968.
-  await waitUntil(() => findDebugTargetByText("about:debugging", document));
-
   info("Open a new background tab TAB1");
   const backgroundTab1 = await addTab(TAB_URL_1, { background: true });
 
   info("Wait for the tab to appear in the debug targets with the correct name");
   await waitUntil(() => findDebugTargetByText("TAB1", document));
 
   info("Click on the Connect item in the sidebar");
   connectSidebarItem.click();
@@ -73,13 +67,8 @@ add_task(async function() {
   await waitUntil(() => !findDebugTargetByText("TAB2", document));
 
   await removeTab(tab);
 });
 
 function isSidebarItemSelected(item) {
   return item.classList.contains("js-sidebar-item-selected");
 }
-
-function findDebugTargetByText(text, document) {
-  const targets = [...document.querySelectorAll(".js-debug-target-item")];
-  return targets.find(target => target.textContent.includes(text));
-}
--- a/devtools/client/aboutdebugging-new/test/browser/head.js
+++ b/devtools/client/aboutdebugging-new/test/browser/head.js
@@ -46,16 +46,22 @@ async function openAboutDebugging(page, 
   const window = browser.contentWindow;
 
   info("Wait until the main about debugging container is available");
   await waitUntil(() => document.querySelector(".app"));
 
   info("Wait until the client connection was established");
   await waitUntil(() => document.querySelector(".js-runtime-page"));
 
+  // Wait until the about:debugging target is visible in the tab list
+  // Otherwise, we might have a race condition where TAB1 is discovered by the initial
+  // listTabs from the watchRuntime action, instead of being discovered after the
+  // TAB_UPDATED event. See analysis in Bug 1493968.
+  await waitUntil(() => findDebugTargetByText("about:debugging", document));
+
   return { tab, document, window };
 }
 
 /**
  * Navigate to the Connect page. Resolves when the Connect page is rendered.
  */
 async function selectConnectPage(doc) {
   const sidebarItems = doc.querySelectorAll(".js-sidebar-item");
@@ -66,14 +72,19 @@ async function selectConnectPage(doc) {
 
   info("Click on the Connect item in the sidebar");
   connectSidebarItem.click();
 
   info("Wait until Connect page is displayed");
   await waitUntil(() => doc.querySelector(".js-connect-page"));
 }
 
+function findDebugTargetByText(text, document) {
+  const targets = [...document.querySelectorAll(".js-debug-target-item")];
+  return targets.find(target => target.textContent.includes(text));
+}
+
 function findSidebarItemByText(text, document) {
   const sidebarItems = document.querySelectorAll(".js-sidebar-item");
   return [...sidebarItems].find(element => {
     return element.textContent.includes(text);
   });
 }
--- a/devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl
+++ b/devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl
@@ -190,8 +190,16 @@ about-debugging-worker-status-registerin
 # { $version } is version such as "64.0a1"
 about-debugging-runtime-info = { $name } ({ $version })
 
 # Displayed for runtime info in runtime page when we display the device model as well.
 # { $name } is brand name such as "Firefox Nightly"
 # { $version } is version such as "64.0a1"
 # { $deviceName } is model name of device
 about-debugging-runtime-info-with-model = { $name } on { $deviceName } ({ $version })
+
+# Text of the connection prompt button displayed in Runtime pages, when the preference
+# "devtools.debugger.prompt-connection" is false on the target runtime.
+about-debugging-connection-prompt-enable-button = Enable connection prompt
+
+# Text of the connection prompt button displayed in Runtime pages, when the preference
+# "devtools.debugger.prompt-connection" is true on the target runtime.
+about-debugging-connection-prompt-disable-button = Disable connection prompt
--- a/devtools/client/inspector/.eslintrc.js
+++ b/devtools/client/inspector/.eslintrc.js
@@ -7,20 +7,10 @@ module.exports = {
   "rules": {
     // The inspector is being migrated to HTML and cleaned of
     // chrome-privileged code, so this rule disallows requiring chrome
     // code. Some files in the inspector disable this rule still. The
     // goal is to enable the rule globally on all files.
     /* eslint-disable max-len */
     "mozilla/reject-some-requires": ["error",
       "^(chrome|chrome:.*|resource:.*|devtools/server/.*|.*\\.jsm|devtools/shared/platform/(chome|content)/.*)$"],
-
-    // The webpack bundle does not support trailing commas in functions, so disabled it
-    // explicitly with linting here.
-    "comma-dangle": ["error", {
-      "arrays": "ignore",
-      "objects": "ignore",
-      "imports": "ignore",
-      "exports": "ignore",
-      "functions": "never",
-    }]
   },
 };
--- a/devtools/client/inspector/animation/actions/animations.js
+++ b/devtools/client/inspector/animation/actions/animations.js
@@ -6,17 +6,17 @@
 
 const {
   UPDATE_ANIMATIONS,
   UPDATE_DETAIL_VISIBILITY,
   UPDATE_ELEMENT_PICKER_ENABLED,
   UPDATE_HIGHLIGHTED_NODE,
   UPDATE_PLAYBACK_RATES,
   UPDATE_SELECTED_ANIMATION,
-  UPDATE_SIDEBAR_SIZE
+  UPDATE_SIDEBAR_SIZE,
 } = require("./index");
 
 module.exports = {
   /**
    * Update the list of animation in the animation inspector.
    */
   updateAnimations(animations) {
     return {
@@ -77,10 +77,10 @@ module.exports = {
   /**
    * Update the sidebar size.
    */
   updateSidebarSize(sidebarSize) {
     return {
       type: UPDATE_SIDEBAR_SIZE,
       sidebarSize,
     };
-  }
+  },
 };
--- a/devtools/client/inspector/animation/animation.js
+++ b/devtools/client/inspector/animation/animation.js
@@ -14,17 +14,17 @@ const CurrentTimeTimer = require("./curr
 
 const {
   updateAnimations,
   updateDetailVisibility,
   updateElementPickerEnabled,
   updateHighlightedNode,
   updatePlaybackRates,
   updateSelectedAnimation,
-  updateSidebarSize
+  updateSidebarSize,
 } = require("./actions/animations");
 const {
   hasAnimationIterationCountInfinite,
   hasRunningAnimation,
 } = require("./utils/utils");
 
 class AnimationInspector {
   constructor(inspector, win) {
@@ -106,17 +106,17 @@ class AnimationInspector {
 
     this.animationsCurrentTimeListeners = [];
     this.isCurrentTimeSet = false;
 
     const provider = createElement(Provider,
       {
         id: "animationinspector",
         key: "animationinspector",
-        store: this.inspector.store
+        store: this.inspector.store,
       },
       App(
         {
           addAnimationsCurrentTimeListener,
           direction,
           emitEventForTest,
           getAnimatedPropertyMap,
           getAnimationsCurrentTime,
--- a/devtools/client/inspector/animation/components/AnimatedPropertyList.js
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyList.js
@@ -95,17 +95,17 @@ class AnimatedPropertyList extends Compo
       }
 
       return a.isUnchanged ? 1 : -1;
     });
 
     this.setState(
       {
         animatedProperties,
-        isStateUpdating: false
+        isStateUpdating: false,
       }
     );
 
     emitEventForTest("animation-keyframes-rendered");
   }
 
   render() {
     const {
@@ -117,17 +117,17 @@ class AnimatedPropertyList extends Compo
     } = this.state;
 
     if (!animatedProperties) {
       return null;
     }
 
     return dom.ul(
       {
-        className: "animated-property-list"
+        className: "animated-property-list",
       },
       animatedProperties.map(({ isUnchanged, keyframes, name, type }) => {
         const state = this.getPropertyState(name);
         return AnimatedPropertyItem(
           {
             getComputedStyle,
             isUnchanged,
             keyframes,
--- a/devtools/client/inspector/animation/components/AnimatedPropertyListContainer.js
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyListContainer.js
@@ -41,17 +41,17 @@ class AnimatedPropertyListContainer exte
       removeAnimationsCurrentTimeListener,
       simulateAnimation,
       simulateAnimationForKeyframesProgressBar,
       timeScale,
     } = this.props;
 
     return dom.div(
       {
-        className: `animated-property-list-container ${ animation.state.type }`
+        className: `animated-property-list-container ${ animation.state.type }`,
       },
       ProgressInspectionPanel(
         {
           indicator: KeyframesProgressBar(
             {
               addAnimationsCurrentTimeListener,
               animation,
               getAnimationsCurrentTime,
@@ -67,16 +67,16 @@ class AnimatedPropertyListContainer exte
               getAnimatedPropertyMap,
               getComputedStyle,
               simulateAnimation,
             }
           ),
           ticks: [0, 50, 100].map(position => {
             const label = getFormatStr("detail.propertiesHeader.percentage", position);
             return { position, label };
-          })
+          }),
         }
       )
     );
   }
 }
 
 module.exports = AnimatedPropertyListContainer;
--- a/devtools/client/inspector/animation/components/AnimationDetailContainer.js
+++ b/devtools/client/inspector/animation/components/AnimationDetailContainer.js
@@ -42,17 +42,17 @@ class AnimationDetailContainer extends P
       setDetailVisibility,
       simulateAnimation,
       simulateAnimationForKeyframesProgressBar,
       timeScale,
     } = this.props;
 
     return dom.div(
       {
-        className: "animation-detail-container"
+        className: "animation-detail-container",
       },
       animation ?
         AnimationDetailHeader(
           {
             animation,
             setDetailVisibility,
           }
         )
--- a/devtools/client/inspector/animation/components/AnimationList.js
+++ b/devtools/client/inspector/animation/components/AnimationList.js
@@ -39,17 +39,17 @@ class AnimationList extends PureComponen
       setHighlightedNode,
       setSelectedNode,
       simulateAnimation,
       timeScale,
     } = this.props;
 
     return dom.ul(
       {
-        className: "animation-list"
+        className: "animation-list",
       },
       animations.map(animation =>
         AnimationItem(
           {
             animation,
             emitEventForTest,
             getAnimatedPropertyMap,
             getNodeFromActor,
--- a/devtools/client/inspector/animation/components/AnimationListContainer.js
+++ b/devtools/client/inspector/animation/components/AnimationListContainer.js
@@ -54,17 +54,17 @@ class AnimationListContainer extends Pur
 
   componentDidMount() {
     this.updateState(this.props);
   }
 
   componentDidUpdate(prevProps) {
     const {
       timeScale,
-      sidebarWidth
+      sidebarWidth,
     } = this.props;
 
     if (timeScale.getDuration() !== prevProps.timeScale.getDuration() ||
         timeScale.zeroPositionTime !== prevProps.timeScale.zeroPositionTime ||
         sidebarWidth !== prevProps.sidebarWidth) {
       this.updateState(this.props);
     }
   }
@@ -121,17 +121,17 @@ class AnimationListContainer extends Pur
       setSelectedNode,
       simulateAnimation,
       timeScale,
     } = this.props;
     const { ticks } = this.state;
 
     return dom.div(
       {
-        className: "animation-list-container"
+        className: "animation-list-container",
       },
       ProgressInspectionPanel(
         {
           indicator: CurrentTimeScrubber(
             {
               addAnimationsCurrentTimeListener,
               direction,
               removeAnimationsCurrentTimeListener,
@@ -158,13 +158,13 @@ class AnimationListContainer extends Pur
         }
       )
     );
   }
 }
 
 const mapStateToProps = state => {
   return {
-    sidebarWidth: state.animations.sidebarSize ? state.animations.sidebarSize.width : 0
+    sidebarWidth: state.animations.sidebarSize ? state.animations.sidebarSize.width : 0,
   };
 };
 
 module.exports = connect(mapStateToProps)(AnimationListContainer);
--- a/devtools/client/inspector/animation/components/AnimationTarget.js
+++ b/devtools/client/inspector/animation/components/AnimationTarget.js
@@ -109,17 +109,17 @@ class AnimationTarget extends Component 
       setHighlightedNode,
     } = this.props;
 
     const { nodeFront } = this.state;
 
     if (!nodeFront) {
       return dom.div(
         {
-          className: "animation-target"
+          className: "animation-target",
         }
       );
     }
 
     emitEventForTest("animation-target-rendered");
 
     const isHighlighted = nodeFront.actorID === highlightedNode;
 
@@ -149,17 +149,17 @@ class AnimationTarget extends Component 
             e.stopPropagation();
 
             if (!isHighlighted) {
               // At first, hide highlighter which was created by onDOMNodeMouseOver.
               onHideBoxModelHighlighter();
             }
 
             setHighlightedNode(isHighlighted ? null : nodeFront);
-          }
+          },
         }
       )
     );
   }
 }
 
 const mapStateToProps = state => {
   return {
--- a/devtools/client/inspector/animation/components/App.js
+++ b/devtools/client/inspector/animation/components/App.js
@@ -131,22 +131,22 @@ class App extends Component {
               setAnimationsCurrentTime,
               setHighlightedNode,
               setSelectedNode,
               simulateAnimation,
               timeScale,
             }
           ),
           vert: false,
-        })
+        }),
       ]
       :
       NoAnimationPanel(
         {
-          toggleElementPicker
+          toggleElementPicker,
         }
       )
     );
   }
 }
 
 const mapStateToProps = state => {
   return {
--- a/devtools/client/inspector/animation/components/KeyframesProgressBar.js
+++ b/devtools/client/inspector/animation/components/KeyframesProgressBar.js
@@ -85,17 +85,17 @@ class KeyframesProgressBar extends PureC
       simulateAnimationForKeyframesProgressBar,
     } = props;
 
     if (this.simulatedAnimation) {
       this.simulatedAnimation.cancel();
     }
 
     const timing = Object.assign({}, animation.state, {
-      iterations: animation.state.iterationCount || Infinity
+      iterations: animation.state.iterationCount || Infinity,
     });
 
     this.simulatedAnimation = simulateAnimationForKeyframesProgressBar(timing);
   }
 
   render() {
     const { position } = this.state;
 
--- a/devtools/client/inspector/animation/components/NoAnimationPanel.js
+++ b/devtools/client/inspector/animation/components/NoAnimationPanel.js
@@ -25,36 +25,36 @@ class NoAnimationPanel extends Component
     return this.props.elementPickerEnabled != nextProps.elementPickerEnabled;
   }
 
   render() {
     const { elementPickerEnabled, toggleElementPicker } = this.props;
 
     return dom.div(
       {
-        className: "animation-error-message devtools-sidepanel-no-result"
+        className: "animation-error-message devtools-sidepanel-no-result",
       },
       dom.p(
         null,
         L10N.getStr("panel.noAnimation")
       ),
       dom.button(
         {
           className: "animation-element-picker devtools-button" +
                      (elementPickerEnabled ? " checked" : ""),
           "data-standalone": true,
           onClick: event => {
             event.stopPropagation();
             toggleElementPicker();
-          }
+          },
         }
       )
     );
   }
 }
 
 const mapStateToProps = state => {
   return {
-    elementPickerEnabled: state.animations.elementPickerEnabled
+    elementPickerEnabled: state.animations.elementPickerEnabled,
   };
 };
 
 module.exports = connect(mapStateToProps)(NoAnimationPanel);
--- a/devtools/client/inspector/animation/components/TickLabels.js
+++ b/devtools/client/inspector/animation/components/TickLabels.js
@@ -18,25 +18,25 @@ class TickLabels extends PureComponent {
     };
   }
 
   render() {
     const { ticks } = this.props;
 
     return dom.div(
       {
-        className: "tick-labels"
+        className: "tick-labels",
       },
       ticks.map(tick =>
         dom.div(
           {
             className: "tick-label",
             style: {
               marginInlineStart: `${ tick.position }%`,
-              maxWidth: `${ tick.width }px`
+              maxWidth: `${ tick.width }px`,
             },
           },
           tick.label
         )
       )
     );
   }
 }
--- a/devtools/client/inspector/animation/components/TickLines.js
+++ b/devtools/client/inspector/animation/components/TickLines.js
@@ -18,23 +18,23 @@ class TickLines extends PureComponent {
     };
   }
 
   render() {
     const { ticks } = this.props;
 
     return dom.div(
       {
-        className: "tick-lines"
+        className: "tick-lines",
       },
       ticks.map(tick =>
         dom.div(
           {
             className: "tick-line",
-            style: { marginInlineStart: `${ tick.position }%` }
+            style: { marginInlineStart: `${ tick.position }%` },
           }
         )
       )
     );
   }
 }
 
 module.exports = TickLines;
--- a/devtools/client/inspector/animation/components/graph/ComputedTimingPath.js
+++ b/devtools/client/inspector/animation/components/graph/ComputedTimingPath.js
@@ -34,28 +34,28 @@ class ComputedTimingPath extends TimingP
       offset,
       opacity,
       simulateAnimation,
       totalDuration,
     } = this.props;
 
     const { state } = animation;
     const effectTiming = Object.assign({}, state, {
-      iterations: state.iterationCount ? state.iterationCount : Infinity
+      iterations: state.iterationCount ? state.iterationCount : Infinity,
     });
 
     // Create new keyframes for opacity as computed style.
     // The reason why we use computed value instead of computed timing progress is to
     // include the easing in keyframes as well. Although the computed timing progress
     // is not affected by the easing in keyframes at all, computed value reflects that.
     const frames = keyframes.map(keyframe => {
       return {
         opacity: keyframe.offset,
         offset: keyframe.offset,
-        easing: keyframe.easing
+        easing: keyframe.easing,
       };
     });
 
     const simulatedAnimation = simulateAnimation(frames, effectTiming, true);
 
     if (!simulatedAnimation) {
       return null;
     }
@@ -82,16 +82,16 @@ class ComputedTimingPath extends TimingP
     const helper = new SummaryGraphHelper(state, keyframes,
                                           totalDuration, durationPerPixel,
                                           getValueFunc, toPathStringFunc);
 
     return dom.g(
       {
         className: "animation-computed-timing-path",
         style: { opacity },
-        transform: `translate(${ offset })`
+        transform: `translate(${ offset })`,
       },
       super.renderGraph(state, helper)
     );
   }
 }
 
 module.exports = ComputedTimingPath;
--- a/devtools/client/inspector/animation/components/graph/EffectTimingPath.js
+++ b/devtools/client/inspector/animation/components/graph/EffectTimingPath.js
@@ -30,17 +30,17 @@ class EffectTimingPath extends TimingPat
       durationPerPixel,
       offset,
       simulateAnimation,
       totalDuration,
     } = this.props;
 
     const { state } = animation;
     const effectTiming = Object.assign({}, state, {
-      iterations: state.iterationCount ? state.iterationCount : Infinity
+      iterations: state.iterationCount ? state.iterationCount : Infinity,
     });
 
     const simulatedAnimation = simulateAnimation(null, effectTiming, false);
 
     if (!simulatedAnimation) {
       return null;
     }
 
@@ -59,16 +59,16 @@ class EffectTimingPath extends TimingPat
       createSummaryGraphPathStringFunction(endTime, state.playbackRate);
     const helper = new SummaryGraphHelper(state, null,
                                           totalDuration, durationPerPixel,
                                           getValueFunc, toPathStringFunc);
 
     return dom.g(
       {
         className: "animation-effect-timing-path",
-        transform: `translate(${ offset })`
+        transform: `translate(${ offset })`,
       },
       super.renderGraph(state, helper)
     );
   }
 }
 
 module.exports = EffectTimingPath;
--- a/devtools/client/inspector/animation/components/graph/NegativePath.js
+++ b/devtools/client/inspector/animation/components/graph/NegativePath.js
@@ -34,28 +34,28 @@ class NegativePath extends PureComponent
       offset,
       simulateAnimation,
       totalDuration,
     } = this.props;
 
     const { state } = animation;
     const effectTiming = Object.assign({}, state, {
       fill: "both",
-      iterations: state.iterationCount ? state.iterationCount : Infinity
+      iterations: state.iterationCount ? state.iterationCount : Infinity,
     });
 
     // Create new keyframes for opacity as computed style.
     // The reason why we use computed value instead of computed timing progress is to
     // include the easing in keyframes as well. Although the computed timing progress
     // is not affected by the easing in keyframes at all, computed value reflects that.
     const frames = keyframes.map(keyframe => {
       return {
         opacity: keyframe.offset,
         offset: keyframe.offset,
-        easing: keyframe.easing
+        easing: keyframe.easing,
       };
     });
 
     const simulatedAnimation = simulateAnimation(frames, effectTiming, true);
 
     if (!simulatedAnimation) {
       return null;
     }
@@ -77,16 +77,16 @@ class NegativePath extends PureComponent
       createSummaryGraphPathStringFunction(endTime, state.playbackRate);
     const helper = new SummaryGraphHelper(state, keyframes,
                                           totalDuration, durationPerPixel,
                                           getValueFunc, toPathStringFunc);
 
     return dom.g(
       {
         className: this.getClassName(),
-        transform: `translate(${ offset })`
+        transform: `translate(${ offset })`,
       },
       this.renderGraph(state, helper)
     );
   }
 }
 
 module.exports = NegativePath;
--- a/devtools/client/inspector/animation/components/graph/SummaryGraphPath.js
+++ b/devtools/client/inspector/animation/components/graph/SummaryGraphPath.js
@@ -171,17 +171,17 @@ class SummaryGraphPath extends Component
     const totalDuration =
       timeScale.getDuration() * Math.abs(animation.state.playbackRate);
     const durationPerPixel = totalDuration / thisEl.parentNode.clientWidth;
 
     this.setState(
       {
         durationPerPixel,
         isStateUpdating: false,
-        keyframesList
+        keyframesList,
       }
     );
 
     emitEventForTest("animation-summary-graph-rendered");
   }
 
   render() {
     const { durationPerPixel, keyframesList } = this.state;
--- a/devtools/client/inspector/animation/components/keyframes-graph/ColorPath.js
+++ b/devtools/client/inspector/animation/components/keyframes-graph/ColorPath.js
@@ -80,17 +80,17 @@ class ColorPath extends ComputedStylePat
     for (let i = 0; i < keyframes.length - 1; i++) {
       const startKeyframe = keyframes[i];
       const endKeyframe = keyframes[i + 1];
       const startTime = startKeyframe.offset * totalDuration;
       const endTime = endKeyframe.offset * totalDuration;
 
       const g = dom.g(
         {
-          className: "hint"
+          className: "hint",
         },
         dom.title({}, startKeyframe.easing),
         dom.rect(
           {
             x: startTime,
             y: -graphHeight,
             height: graphHeight,
             width: endTime - startTime,
--- a/devtools/client/inspector/animation/components/keyframes-graph/ComputedStylePath.js
+++ b/devtools/client/inspector/animation/components/keyframes-graph/ComputedStylePath.js
@@ -149,26 +149,26 @@ class ComputedStylePath extends PureComp
           break;
         } else if (segment.x === endTime) {
           break;
         }
       }
 
       const g = dom.g(
         {
-          className: "hint"
+          className: "hint",
         },
         dom.title({}, startKeyframe.easing),
         dom.path(
           {
             d: `M${ hintSegments[0].x },${ hintSegments[0].y } ` +
                toPathString(hintSegments),
             style: {
               "stroke-width": easingHintStrokeWidth,
-            }
+            },
           }
         )
       );
 
       hints.push(g);
     }
 
     return hints;
@@ -193,17 +193,17 @@ class ComputedStylePath extends PureComp
         return null;
       }
 
       segments.push(...keyframesSegments);
     }
 
     return [
       this.renderPathSegments(segments),
-      this.renderEasingHint(segments)
+      this.renderEasingHint(segments),
     ];
   }
 
   /**
    * Return react dom fron given path segments.
    *
    * @param {Array} segments
    * @param {Object} style
--- a/devtools/client/inspector/animation/components/keyframes-graph/KeyframeMarkerList.js
+++ b/devtools/client/inspector/animation/components/keyframes-graph/KeyframeMarkerList.js
@@ -17,16 +17,16 @@ class KeyframeMarkerList extends PureCom
     };
   }
 
   render() {
     const { keyframes } = this.props;
 
     return dom.ul(
       {
-        className: "keyframe-marker-list"
+        className: "keyframe-marker-list",
       },
       keyframes.map(keyframe => KeyframeMarkerItem({ keyframe }))
     );
   }
 }
 
 module.exports = KeyframeMarkerList;
--- a/devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraph.js
+++ b/devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraph.js
@@ -28,17 +28,17 @@ class KeyframesGraph extends PureCompone
       keyframes,
       name,
       simulateAnimation,
       type,
     } = this.props;
 
     return dom.div(
       {
-        className: `keyframes-graph ${ name }`
+        className: `keyframes-graph ${ name }`,
       },
       KeyframesGraphPath(
         {
           getComputedStyle,
           keyframes,
           name,
           simulateAnimation,
           type,
--- a/devtools/client/inspector/animation/reducers/animations.js
+++ b/devtools/client/inspector/animation/reducers/animations.js
@@ -59,44 +59,44 @@ const reducers = {
     return Object.assign({}, state, {
       detailVisibility,
       selectedAnimation,
     });
   },
 
   [UPDATE_ELEMENT_PICKER_ENABLED](state, { elementPickerEnabled }) {
     return Object.assign({}, state, {
-      elementPickerEnabled
+      elementPickerEnabled,
     });
   },
 
   [UPDATE_HIGHLIGHTED_NODE](state, { highlightedNode }) {
     return Object.assign({}, state, {
-      highlightedNode
+      highlightedNode,
     });
   },
 
   [UPDATE_PLAYBACK_RATES](state) {
     return Object.assign({}, state, {
       playbackRates: getPlaybackRates([], state.animations),
     });
   },
 
   [UPDATE_SELECTED_ANIMATION](state, { selectedAnimation }) {
     const detailVisibility = !!selectedAnimation;
 
     return Object.assign({}, state, {
       detailVisibility,
-      selectedAnimation
+      selectedAnimation,
     });
   },
 
   [UPDATE_SIDEBAR_SIZE](state, { sidebarSize }) {
     return Object.assign({}, state, {
-      sidebarSize
+      sidebarSize,
     });
   },
 };
 
 function getPlaybackRates(basePlaybackRate, animations) {
   return [...new Set(animations.map(a => a.state.playbackRate).concat(basePlaybackRate))];
 }
 
--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path-01.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path-01.js
@@ -18,17 +18,17 @@ const TEST_DATA = [
         expectedPathSegments: [
           { x: 0, y: 0 },
           { x: 0, y: 100 },
           { x: 1000, y: 100 },
         ],
         expectedStopColors: [
           { offset: 0, color: "rgb(255, 0, 0)" },
           { offset: 1, color: "rgb(0, 255, 0)" },
-        ]
+        ],
       },
       {
         name: "background-repeat",
         computedValuePathClass: "discrete-path",
         expectedPathSegments: [
           { x: 0, y: 0 },
           { x: 499.999, y: 0 },
           { x: 500, y: 100 },
@@ -92,17 +92,17 @@ const TEST_DATA = [
         expectedPathSegments: [
           { x: 0, y: 0 },
           { x: 0, y: 100 },
           { x: 1000, y: 100 },
         ],
         expectedStopColors: [
           { offset: 0, color: "rgb(0, 255, 0)" },
           { offset: 1, color: "rgb(255, 0, 0)" },
-        ]
+        ],
       },
       {
         name: "background-repeat",
         computedValuePathClass: "discrete-path",
         expectedPathSegments: [
           { x: 0, y: 0 },
           { x: 499.999, y: 0 },
           { x: 500, y: 100 },
--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path-03.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path-03.js
@@ -20,17 +20,17 @@ const TEST_DATA = [
           { x: 0, y: 100 },
           { x: 500, y: 100 },
           { x: 1000, y: 100 },
         ],
         expectedStopColors: [
           { offset: 0, color: "rgb(255, 0, 0)" },
           { offset: 0.5, color: "rgb(0, 0, 255)" },
           { offset: 1, color: "rgb(0, 255, 0)" },
-        ]
+        ],
       },
       {
         name: "background-repeat",
         computedValuePathClass: "discrete-path",
         expectedPathSegments: [
           { x: 0, y: 0 },
           { x: 249.999, y: 0 },
           { x: 250, y: 100 },
@@ -110,17 +110,17 @@ const TEST_DATA = [
           { x: 1000, y: 100 },
         ],
         expectedStopColors: [
           { offset: 0, color: "rgb(255, 0, 0)" },
           { offset: 0.499, color: "rgb(255, 0, 0)" },
           { offset: 0.5, color: "rgb(128, 128, 0)" },
           { offset: 0.999, color: "rgb(128, 128, 0)" },
           { offset: 1, color: "rgb(0, 255, 0)" },
-        ]
+        ],
       },
       {
         name: "background-repeat",
         computedValuePathClass: "discrete-path",
         expectedPathSegments: [
           { x: 0, y: 0 },
           { x: 499.999, y: 0 },
           { x: 500, y: 100 },
--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path.js
@@ -16,112 +16,112 @@ const TEST_DATA = [
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 250000, y: 40.851 },
         { x: 500000, y: 80.24},
         { x: 750000, y: 96.05 },
         { x: 1000000, y: 100 },
         { x: 1000000, y: 0 },
-      ]
+      ],
     ],
   },
   {
     targetClass: "cssanimation-linear",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 250000, y: 25 },
         { x: 500000, y: 50 },
         { x: 750000, y: 75 },
         { x: 1000000, y: 100 },
         { x: 1000000, y: 0 },
-      ]
+      ],
     ],
   },
   {
     targetClass: "delay-positive",
     expectedDelayPath: [
       { x: 0, y: 0 },
       { x: 500000, y: 0 },
     ],
     expectedIterationPathList: [
       [
         { x: 500000, y: 0 },
         { x: 750000, y: 25 },
         { x: 1000000, y: 50 },
         { x: 1250000, y: 75 },
         { x: 1500000, y: 100 },
         { x: 1500000, y: 0 },
-      ]
+      ],
     ],
   },
   {
     targetClass: "delay-negative",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 0, y: 50 },
         { x: 250000, y: 75 },
         { x: 500000, y: 100 },
         { x: 500000, y: 0 },
-      ]
+      ],
     ],
   },
   {
     targetClass: "easing-step",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 499999, y: 0 },
         { x: 500000, y: 50 },
         { x: 999999, y: 50 },
         { x: 1000000, y: 0 },
-      ]
+      ],
     ],
   },
   {
     targetClass: "enddelay-positive",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 250000, y: 25 },
         { x: 500000, y: 50 },
         { x: 750000, y: 75 },
         { x: 1000000, y: 100 },
         { x: 1000000, y: 0 },
-      ]
+      ],
     ],
     expectedEndDelayPath: [
       { x: 1000000, y: 0 },
       { x: 1500000, y: 0 },
     ],
   },
   {
     targetClass: "enddelay-negative",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 250000, y: 25 },
         { x: 500000, y: 50 },
         { x: 500000, y: 0 },
-      ]
+      ],
     ],
   },
   {
     targetClass: "enddelay-with-fill-forwards",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 250000, y: 25 },
         { x: 500000, y: 50 },
         { x: 750000, y: 75 },
         { x: 1000000, y: 100 },
         { x: 1000000, y: 0 },
-      ]
+      ],
     ],
     expectedEndDelayPath: [
       { x: 1000000, y: 0 },
       { x: 1000000, y: 100 },
       { x: 1500000, y: 100 },
       { x: 1500000, y: 0 },
     ],
     expectedForwardsPath: [
@@ -144,17 +144,17 @@ const TEST_DATA = [
       ],
       [
         { x: 1000000, y: 0 },
         { x: 1250000, y: 25 },
         { x: 1500000, y: 50 },
         { x: 1750000, y: 75 },
         { x: 2000000, y: 100 },
         { x: 2000000, y: 0 },
-      ]
+      ],
     ],
     isInfinity: true,
   },
   {
     targetClass: "direction-alternate-with-iterations-infinity",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
@@ -166,17 +166,17 @@ const TEST_DATA = [
       ],
       [
         { x: 1000000, y: 0 },
         { x: 1000000, y: 100 },
         { x: 1250000, y: 75 },
         { x: 1500000, y: 50 },
         { x: 1750000, y: 25 },
         { x: 2000000, y: 0 },
-      ]
+      ],
     ],
     isInfinity: true,
   },
   {
     targetClass: "direction-alternate-reverse-with-iterations-infinity",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
@@ -188,17 +188,17 @@ const TEST_DATA = [
       ],
       [
         { x: 1000000, y: 0 },
         { x: 1250000, y: 25 },
         { x: 1500000, y: 50 },
         { x: 1750000, y: 75 },
         { x: 2000000, y: 100 },
         { x: 2000000, y: 0 },
-      ]
+      ],
     ],
     isInfinity: true,
   },
   {
     targetClass: "direction-reverse-with-iterations-infinity",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
@@ -210,31 +210,31 @@ const TEST_DATA = [
       ],
       [
         { x: 1000000, y: 0 },
         { x: 1000000, y: 100 },
         { x: 1250000, y: 75 },
         { x: 1500000, y: 50 },
         { x: 1750000, y: 25 },
         { x: 2000000, y: 0 },
-      ]
+      ],
     ],
     isInfinity: true,
   },
   {
     targetClass: "fill-backwards",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 250000, y: 25 },
         { x: 500000, y: 50 },
         { x: 750000, y: 75 },
         { x: 1000000, y: 100 },
         { x: 1000000, y: 0 },
-      ]
+      ],
     ],
   },
   {
     targetClass: "fill-backwards-with-delay-iterationstart",
     expectedDelayPath: [
       { x: 0, y: 0 },
       { x: 0, y: 50 },
       { x: 500000, y: 50 },
@@ -247,30 +247,30 @@ const TEST_DATA = [
         { x: 1000000, y: 100 },
         { x: 1000000, y: 0 },
       ],
       [
         { x: 1000000, y: 0 },
         { x: 1250000, y: 25 },
         { x: 1500000, y: 50 },
         { x: 1500000, y: 0 },
-      ]
+      ],
     ],
   },
   {
     targetClass: "fill-both",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 250000, y: 25 },
         { x: 500000, y: 50 },
         { x: 750000, y: 75 },
         { x: 1000000, y: 100 },
         { x: 1000000, y: 0 },
-      ]
+      ],
     ],
     expectedForwardsPath: [
       { x: 1000000, y: 0 },
       { x: 1000000, y: 100 },
       { x: 2000000, y: 100 },
       { x: 2000000, y: 0 },
     ],
   },
@@ -289,34 +289,34 @@ const TEST_DATA = [
         { x: 1000000, y: 100 },
         { x: 1000000, y: 0 },
       ],
       [
         { x: 1000000, y: 0 },
         { x: 1250000, y: 25 },
         { x: 1500000, y: 50 },
         { x: 1500000, y: 0 },
-      ]
+      ],
     ],
     expectedForwardsPath: [
       { x: 1500000, y: 0 },
       { x: 1500000, y: 50 },
     ],
   },
   {
     targetClass: "fill-forwards",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 250000, y: 25 },
         { x: 500000, y: 50 },
         { x: 750000, y: 75 },
         { x: 1000000, y: 100 },
         { x: 1000000, y: 0 },
-      ]
+      ],
     ],
     expectedForwardsPath: [
       { x: 1000000, y: 0 },
       { x: 1000000, y: 100 },
       { x: 2000000, y: 100 },
       { x: 2000000, y: 0 },
     ],
   },
@@ -329,67 +329,67 @@ const TEST_DATA = [
         { x: 500000, y: 100 },
         { x: 500000, y: 0 },
       ],
       [
         { x: 500000, y: 0 },
         { x: 750000, y: 25 },
         { x: 1000000, y: 50 },
         { x: 1000000, y: 0 },
-      ]
+      ],
     ],
   },
   {
     targetClass: "no-compositor",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 250000, y: 25 },
         { x: 500000, y: 50 },
         { x: 750000, y: 75 },
         { x: 1000000, y: 100 },
         { x: 1000000, y: 0 },
-      ]
+      ],
     ],
   },
   {
     targetClass: "keyframes-easing-step",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 499999, y: 0 },
         { x: 500000, y: 50 },
         { x: 999999, y: 50 },
         { x: 1000000, y: 0 },
-      ]
+      ],
     ],
   },
   {
     targetClass: "narrow-keyframes",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 100000, y: 10 },
         { x: 110000, y: 10 },
         { x: 115000, y: 10 },
         { x: 129999, y: 10 },
         { x: 130000, y: 13 },
         { x: 135000, y: 13.5 },
-      ]
+      ],
     ],
   },
   {
     targetClass: "duplicate-offsets",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 250000, y: 25 },
         { x: 500000, y: 50 },
         { x: 999999, y: 50 },
-      ]
+      ],
     ],
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
   const { panel } = await openAnimationInspector();
 
--- a/devtools/client/inspector/animation/test/browser_animation_timing_negative-playback-rate_summary-graph.js
+++ b/devtools/client/inspector/animation/test/browser_animation_timing_negative-playback-rate_summary-graph.js
@@ -14,140 +14,140 @@ const TEST_DATA = [
     targetSelector: ".normal",
     expectedPathList: [
       {
         selector: ".animation-iteration-path",
         path: [
           { x: 0, y: 100 },
           { x: 50000, y: 50 },
           { x: 100000, y: 0 },
-        ]
+        ],
       },
     ],
     expectedTooltip: "Playback rate: -1",
     expectedViewboxWidth: 200000,
   },
   {
     targetSelector: ".normal-playbackrate-2",
     expectedPathList: [
       {
         selector: ".animation-iteration-path",
         path: [
           { x: 0, y: 100 },
           { x: 50000, y: 50 },
           { x: 100000, y: 0 },
-        ]
+        ],
       },
     ],
     expectedTooltip: "Playback rate: -2",
     expectedViewboxWidth: 400000,
   },
   {
     targetSelector: ".positive-delay",
     expectedSignList: [
       {
         selector: ".animation-end-delay-sign",
         sign: {
           marginInlineStart: "75%",
           width: "25%",
         },
-      }
+      },
     ],
     expectedPathList: [
       {
         selector: ".animation-iteration-path",
         path: [
           { x: 0, y: 100 },
           { x: 50000, y: 50 },
           { x: 100000, y: 0 },
-        ]
+        ],
       },
     ],
     expectedTooltip: "Playback rate: -1",
   },
   {
     targetSelector: ".negative-delay",
     expectedSignList: [
       {
         selector: ".animation-end-delay-sign",
         sign: {
           marginInlineStart: "50%",
           width: "25%",
         },
-      }
+      },
     ],
     expectedPathList: [
       {
         selector: ".animation-iteration-path",
         path: [
           { x: 0, y: 100 },
           { x: 50000, y: 50 },
           { x: 50000, y: 0 },
-        ]
+        ],
       },
       {
         selector: ".animation-negative-delay-path path",
         path: [
           { x: 50000, y: 50 },
           { x: 100000, y: 0 },
-        ]
+        ],
       },
     ],
     expectedTooltip: "Playback rate: -1",
   },
   {
     targetSelector: ".positive-end-delay",
     expectedSignList: [
       {
         selector: ".animation-delay-sign",
         sign: {
           isFilled: true,
           marginInlineStart: "25%",
           width: "25%",
         },
-      }
+      },
     ],
     expectedPathList: [
       {
         selector: ".animation-iteration-path",
         path: [
           { x: 50000, y: 100 },
           { x: 100000, y: 50 },
           { x: 150000, y: 0 },
-        ]
+        ],
       },
     ],
     expectedTooltip: "Playback rate: -1",
   },
   {
     targetSelector: ".negative-end-delay",
     expectedSignList: [
       {
         selector: ".animation-delay-sign",
         sign: {
           isFilled: true,
           marginInlineStart: "0%",
           width: "25%",
         },
-      }
+      },
     ],
     expectedPathList: [
       {
         selector: ".animation-iteration-path",
         path: [
           { x: 0, y: 50 },
           { x: 50000, y: 0 },
-        ]
+        ],
       },
       {
         selector: ".animation-negative-end-delay-path path",
         path: [
           { x: -50000, y: 100 },
           { x: 0, y: 0 },
-        ]
+        ],
       },
     ],
     expectedTooltip: "Playback rate: -1",
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_negative_playback_rate.html");
--- a/devtools/client/inspector/animation/test/doc_multi_easings.html
+++ b/devtools/client/inspector/animation/test/doc_multi_easings.html
@@ -15,17 +15,17 @@
 
     function createAnimation(name, keyframes, effectEasing) {
       const div = document.createElement("div");
       div.classList.add(name);
       document.body.appendChild(div);
 
       const effect = {
         duration: 100000,
-        fill: "forwards"
+        fill: "forwards",
       };
 
       if (effectEasing) {
         effect.easing = effectEasing;
       }
 
       div.animate(keyframes, effect);
     }
@@ -45,53 +45,53 @@
         { opacity: 0 },
       ],
       "frames(5)"
     );
 
     createAnimation(
       "keyframe-easing",
       [
-        { opacity: 1, easing: "steps(2)", },
+        { opacity: 1, easing: "steps(2)" },
         { opacity: 0 },
       ]
     );
 
     createAnimation(
       "both-easing",
       [
-        { offset: 0, opacity: 1, easing: "steps(2)", },
-        { offset: 0, marginLeft: "0px", easing: "steps(1)", },
+        { offset: 0, opacity: 1, easing: "steps(2)" },
+        { offset: 0, marginLeft: "0px", easing: "steps(1)" },
         { marginLeft: "100px", opacity: 0 },
       ],
       "steps(10)"
     );
 
     createAnimation(
       "narrow-keyframes",
       [
-        { opacity: 0, },
-        { offset: 0.1, opacity: 1, easing: "steps(1)", },
-        { offset: 0.13, opacity: 0, },
+        { opacity: 0 },
+        { offset: 0.1, opacity: 1, easing: "steps(1)" },
+        { offset: 0.13, opacity: 0 },
       ]
     );
 
     createAnimation(
       "duplicate-keyframes",
       [
         { opacity: 0 },
-        { offset: 0.5, opacity: 1, },
-        { offset: 0.5, opacity: 0, easing: "steps(1)", },
-        { opacity: 1, },
+        { offset: 0.5, opacity: 1 },
+        { offset: 0.5, opacity: 0, easing: "steps(1)" },
+        { opacity: 1 },
       ]
     );
 
     createAnimation(
       "color-keyframes",
       [
-        { color: "red", easing: "ease-in", },
-        { offset: 0.4, color: "blue", easing: "ease-out", },
-        { color: "lime", },
+        { color: "red", easing: "ease-in" },
+        { offset: 0.4, color: "blue", easing: "ease-out" },
+        { color: "lime" },
       ]
     );
     </script>
   </body>
 </html>
--- a/devtools/client/inspector/animation/test/doc_multi_keyframes.html
+++ b/devtools/client/inspector/animation/test/doc_multi_keyframes.html
@@ -15,17 +15,17 @@
 
     function createAnimation(name, keyframes, effectEasing) {
       const div = document.createElement("div");
       div.classList.add(name);
       document.body.appendChild(div);
 
       const effect = {
         duration: 100000,
-        fill: "forwards"
+        fill: "forwards",
       };
 
       if (effectEasing) {
         effect.easing = effectEasing;
       }
 
       div.animate(keyframes, effect);
     }
@@ -35,134 +35,134 @@
       [
         {
           backgroundColor: "red",
           backgroundRepeat: "space round",
           fontSize: "10px",
           marginLeft: "0px",
           opacity: 0,
           textAlign: "right",
-          transform: "translate(0px)"
+          transform: "translate(0px)",
         },
         {
           backgroundColor: "lime",
           backgroundRepeat: "round space",
           fontSize: "20px",
           marginLeft: "100px",
           opacity: 1,
           textAlign: "center",
-          transform: "translate(100px)"
+          transform: "translate(100px)",
         },
       ]
     );
 
     createAnimation(
       "multi-types-reverse",
       [
         {
           backgroundColor: "lime",
           backgroundRepeat: "space",
           fontSize: "20px",
           marginLeft: "100px",
           opacity: 1,
           textAlign: "center",
-          transform: "translate(100px)"
+          transform: "translate(100px)",
         },
         {
           backgroundColor: "red",
           backgroundRepeat: "round",
           fontSize: "10px",
           marginLeft: "0px",
           opacity: 0,
           textAlign: "right",
-          transform: "translate(0px)"
+          transform: "translate(0px)",
         },
       ]
     );
 
     createAnimation(
       "middle-keyframe",
       [
         {
           backgroundColor: "red",
           backgroundRepeat: "space",
           fontSize: "10px",
           marginLeft: "0px",
           opacity: 0,
           textAlign: "right",
-          transform: "translate(0px)"
+          transform: "translate(0px)",
         },
         {
           backgroundColor: "blue",
           backgroundRepeat: "round",
           fontSize: "20px",
           marginLeft: "100px",
           opacity: 1,
           textAlign: "center",
-          transform: "translate(100px)"
+          transform: "translate(100px)",
         },
         {
           backgroundColor: "lime",
           backgroundRepeat: "space",
           fontSize: "10px",
           marginLeft: "0px",
           opacity: 0,
           textAlign: "right",
-          transform: "translate(0px)"
+          transform: "translate(0px)",
         },
       ]
     );
 
     createAnimation(
       "steps-keyframe",
       [
         {
           backgroundColor: "red",
           backgroundRepeat: "space",
           fontSize: "10px",
           marginLeft: "0px",
           opacity: 0,
           textAlign: "right",
           transform: "translate(0px)",
-          easing: "steps(2)"
+          easing: "steps(2)",
         },
         {
           backgroundColor: "lime",
           backgroundRepeat: "round",
           fontSize: "20px",
           marginLeft: "100px",
           opacity: 1,
           textAlign: "center",
-          transform: "translate(100px)"
+          transform: "translate(100px)",
         },
       ]
     );
 
     createAnimation(
       "steps-effect",
       [
         {
-          opacity: 0
+          opacity: 0,
         },
         {
-          opacity: 1
+          opacity: 1,
         },
       ],
       "steps(2)"
     );
 
     createAnimation(
       "frames-keyframe",
       [
         {
           easing: "frames(5)",
           opacity: 0,
         },
         {
-          opacity: 1
+          opacity: 1,
         },
       ]
     );
 
     createAnimation(
       "narrow-offsets",
       [
         {
--- a/devtools/client/inspector/animation/test/doc_multi_timings.html
+++ b/devtools/client/inspector/animation/test/doc_multi_timings.html
@@ -119,22 +119,22 @@
       [
         {
           opacity: 0,
           offset: 0,
         },
         {
           opacity: 1,
           offset: 0.1,
-          easing: "steps(1)"
+          easing: "steps(1)",
         },
         {
           opacity: 0,
           offset: 0.13,
-        }
+        },
       ],
       {},
       "narrow-keyframes");
 
     createAnimation(
       [
         {
           offset: 0,
@@ -147,15 +147,15 @@
         {
           offset: 0.5,
           easing: "steps(1)",
           opacity: 0,
         },
         {
           offset: 1,
           opacity: 1,
-        }
+        },
       ],
       {},
       "duplicate-offsets");
     </script>
   </body>
 </html>
--- a/devtools/client/inspector/animation/test/doc_overflowed_delay_end_delay.html
+++ b/devtools/client/inspector/animation/test/doc_overflowed_delay_end_delay.html
@@ -13,61 +13,61 @@
   <body>
     <div id="target"></div>
     <script>
     "use strict";
 
     const target = document.getElementById("target");
     target.animate(
       {
-        color: ["red", "lime"]
+        color: ["red", "lime"],
       },
       {
         id: "big-delay",
         duration: 1000,
         delay: Number.MAX_VALUE,
         iterations: Infinity,
       });
 
     target.animate(
       {
-        opacity: [1, 0]
+        opacity: [1, 0],
       },
       {
         id: "big-end-delay",
         duration: 1000,
         endDelay: Number.MAX_VALUE,
         iterations: Infinity,
       });
 
     target.animate(
       {
-        marginLeft: ["0px", "100px"]
+        marginLeft: ["0px", "100px"],
       },
       {
         id: "negative-big-delay",
         duration: 1000,
         delay: -Number.MAX_VALUE,
         iterations: Infinity,
       });
 
     target.animate(
       {
-        paddingLeft: ["0px", "100px"]
+        paddingLeft: ["0px", "100px"],
       },
       {
         id: "negative-big-end-delay",
         duration: 1000,
         endDelay: -Number.MAX_VALUE,
         iterations: Infinity,
       });
 
     target.animate(
       {
-        backgroundColor: ["lime", "white"]
+        backgroundColor: ["lime", "white"],
       },
       {
         id: "big-iteration-start",
         duration: 1000,
         iterations: Infinity,
         iterationStart: Number.MAX_VALUE,
       });
     </script>
--- a/devtools/client/inspector/animation/test/doc_simple_animation.html
+++ b/devtools/client/inspector/animation/test/doc_simple_animation.html
@@ -160,15 +160,15 @@
   <div class="ball longhand"></div>
   <script>
     /* globals KeyframeEffect, Animation */
     "use strict";
 
     const el = document.querySelector(".end-delay");
     const effect = new KeyframeEffect(el, [
       { opacity: 0, offset: 0 },
-      { opacity: 1, offset: 1 }
+      { opacity: 1, offset: 1 },
     ], { duration: 1000000, endDelay: 500000, fill: "none" });
     const animation = new Animation(effect, document.timeline);
     animation.play();
   </script>
 </body>
 </html>
--- a/devtools/client/inspector/animation/test/head.js
+++ b/devtools/client/inspector/animation/test/head.js
@@ -566,17 +566,17 @@ function _afterDispatchDone(store, type)
       predicate: action => {
         if (action.type === type) {
           return true;
         }
         return false;
       },
       run: (dispatch, getState, action) => {
         resolve(action);
-      }
+      },
     });
   });
 }
 
 /**
  * Wait for a specific action type to be dispatch.
  * If an async action, will wait for it to be done.
  * This is a custom waitForDispatch, and rather than having a number to wait on
--- a/devtools/client/inspector/animation/test/keyframes-graph_keyframe-marker_head.js
+++ b/devtools/client/inspector/animation/test/keyframes-graph_keyframe-marker_head.js
@@ -19,95 +19,95 @@ const KEYFRAMES_TEST_DATA = [
         expectedValues: [
           {
             title: "rgb(255, 0, 0)",
             marginInlineStart: "0%",
           },
           {
             title: "rgb(0, 255, 0)",
             marginInlineStart: "100%",
-          }
+          },
         ],
       },
       {
         name: "background-repeat",
         expectedValues: [
           {
             title: "space round",
             marginInlineStart: "0%",
           },
           {
             title: "round space",
             marginInlineStart: "100%",
-          }
+          },
         ],
       },
       {
         name: "font-size",
         expectedValues: [
           {
             title: "10px",
             marginInlineStart: "0%",
           },
           {
             title: "20px",
             marginInlineStart: "100%",
-          }
+          },
         ],
       },
       {
         name: "margin-left",
         expectedValues: [
           {
             title: "0px",
             marginInlineStart: "0%",
           },
           {
             title: "100px",
             marginInlineStart: "100%",
-          }
+          },
         ],
       },
       {
         name: "opacity",
         expectedValues: [
           {
             title: "0",
             marginInlineStart: "0%",
           },
           {
             title: "1",
             marginInlineStart: "100%",
-          }
+          },
         ],
       },
       {
         name: "text-align",
         expectedValues: [
           {
             title: "right",
             marginInlineStart: "0%",
           },
           {
             title: "center",
             marginInlineStart: "100%",
-          }
+          },
         ],
       },
       {
         name: "transform",
         expectedValues: [
           {
             title: "translate(0px)",
             marginInlineStart: "0%",
           },
           {
             title: "translate(100px)",
             marginInlineStart: "100%",
-          }
+          },
         ],
       },
     ],
   },
   {
     targetClass: "narrow-offsets",
     properties: [
       {
--- a/devtools/client/inspector/boxmodel/actions/box-model.js
+++ b/devtools/client/inspector/boxmodel/actions/box-model.js
@@ -38,11 +38,11 @@ module.exports = {
   /**
    * Updates the offset parent state with the new DOM node.
    */
   updateOffsetParent(offsetParent) {
     return {
       type: UPDATE_OFFSET_PARENT,
       offsetParent,
     };
-  }
+  },
 
 };
--- a/devtools/client/inspector/boxmodel/box-model.js
+++ b/devtools/client/inspector/boxmodel/box-model.js
@@ -140,17 +140,17 @@ BoxModel.prototype = {
       const node = this.inspector.selection.nodeFront;
 
       let layout = await this.inspector.pageStyle.getLayout(node, {
         autoMargins: true,
       });
 
       const styleEntries = await this.inspector.pageStyle.getApplied(node, {
         // We don't need styles applied to pseudo elements of the current node.
-        skipPseudo: true
+        skipPseudo: true,
       });
       this.elementRules = styleEntries.map(e => e.rule);
 
       // Update the layout properties with whether or not the element's position is
       // editable with the geometry editor.
       const isPositionEditable = await this.inspector.pageStyle.isPositionEditable(node);
 
       layout = Object.assign({}, layout, {
@@ -279,28 +279,28 @@ BoxModel.prototype = {
     });
     const initialValue = session.getProperty(property);
 
     const editor = new InplaceEditor({
       element: element,
       initial: initialValue,
       contentType: InplaceEditor.CONTENT_TYPES.CSS_VALUE,
       property: {
-        name: property
+        name: property,
       },
       start: self => {
         self.elt.parentNode.classList.add("boxmodel-editing");
       },
       change: value => {
         if (NUMERIC.test(value)) {
           value += "px";
         }
 
         const properties = [
-          { name: property, value: value }
+          { name: property, value: value },
         ];
 
         if (property.substring(0, 7) == "border-") {
           const bprop = property.substring(0, property.length - 5) + "style";
           const style = session.getProperty(bprop);
           if (!style || style == "none" || style == "hidden") {
             properties.push({ name: bprop, value: "solid" });
           }
--- a/devtools/client/inspector/boxmodel/components/BoxModelMain.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModelMain.js
@@ -56,46 +56,46 @@ class BoxModelMain extends PureComponent
     const isContentBox = this.getContextBox();
 
     this.layouts = {
       "position": new Map([
         [KeyCodes.DOM_VK_ESCAPE, this.positionLayout],
         [KeyCodes.DOM_VK_DOWN, this.marginLayout],
         [KeyCodes.DOM_VK_RETURN, this.positionEditable],
         [KeyCodes.DOM_VK_UP, null],
-        ["click", this.positionLayout]
+        ["click", this.positionLayout],
       ]),
       "margin": new Map([
         [KeyCodes.DOM_VK_ESCAPE, this.marginLayout],
         [KeyCodes.DOM_VK_DOWN, this.borderLayout],
         [KeyCodes.DOM_VK_RETURN, this.marginEditable],
         [KeyCodes.DOM_VK_UP, displayPosition ? this.positionLayout : null],
-        ["click", this.marginLayout]
+        ["click", this.marginLayout],
       ]),
       "border": new Map([
         [KeyCodes.DOM_VK_ESCAPE, this.borderLayout],
         [KeyCodes.DOM_VK_DOWN, this.paddingLayout],
         [KeyCodes.DOM_VK_RETURN, this.borderEditable],
         [KeyCodes.DOM_VK_UP, this.marginLayout],
-        ["click", this.borderLayout]
+        ["click", this.borderLayout],
       ]),
       "padding": new Map([
         [KeyCodes.DOM_VK_ESCAPE, this.paddingLayout],
         [KeyCodes.DOM_VK_DOWN, isContentBox ? this.contentLayout : null],
         [KeyCodes.DOM_VK_RETURN, this.paddingEditable],
         [KeyCodes.DOM_VK_UP, this.borderLayout],
-        ["click", this.paddingLayout]
+        ["click", this.paddingLayout],
       ]),
       "content": new Map([
         [KeyCodes.DOM_VK_ESCAPE, this.contentLayout],
         [KeyCodes.DOM_VK_DOWN, null],
         [KeyCodes.DOM_VK_RETURN, this.contentEditable],
         [KeyCodes.DOM_VK_UP, this.paddingLayout],
-        ["click", this.contentLayout]
-      ])
+        ["click", this.contentLayout],
+      ]),
     };
   }
 
   getAriaActiveDescendant() {
     let { activeDescendant } = this.state;
 
     if (!activeDescendant) {
       const displayPosition = this.getDisplayPosition();
@@ -210,17 +210,17 @@ class BoxModelMain extends PureComponent
    *         Node to be observed
    * @param  {Boolean} shiftKey
    *         Determines if shiftKey was pressed
    * @param  {String} level
    *         Current active layout
    */
   moveFocus({ target, shiftKey }, level) {
     const editBoxes = [
-      ...this.positionLayout.querySelectorAll(`[data-box="${level}"].boxmodel-editable`)
+      ...this.positionLayout.querySelectorAll(`[data-box="${level}"].boxmodel-editable`),
     ];
     const editingMode = target.tagName === "input";
     // target.nextSibling is input field
     let position = editingMode ? editBoxes.indexOf(target.nextSibling)
                                : editBoxes.indexOf(target);
 
     if (position === editBoxes.length - 1 && !shiftKey) {
       position = 0;
@@ -420,26 +420,26 @@ class BoxModelMain extends PureComponent
           box: "content",
           focusable,
           level,
           property: "width",
           ref: editable => {
             this.contentEditable = editable;
           },
           textContent: width,
-          onShowBoxModelEditor
+          onShowBoxModelEditor,
         }),
         dom.span({}, "\u00D7"),
         BoxModelEditable({
           box: "content",
           focusable,
           level,
           property: "height",
           textContent: height,
-          onShowBoxModelEditor
+          onShowBoxModelEditor,
         })
       )
       :
       dom.p({ className: "boxmodel-size" },
         dom.span({ title: "content" },
           SHARED_L10N.getFormatStr("dimensions", width, height)
         )
       );
--- a/devtools/client/inspector/boxmodel/components/BoxModelProperties.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModelProperties.js
@@ -51,17 +51,17 @@ class BoxModelProperties extends PureCom
   getReferenceElement(propertyName) {
     const value = this.props.boxModel.layout[propertyName];
 
     if (propertyName === "position" &&
         value !== "static" && value !== "fixed" &&
         this.props.boxModel.offsetParent) {
       return {
         referenceElement: this.props.boxModel.offsetParent,
-        referenceElementType: BOXMODEL_L10N.getStr("boxmodel.offsetParent")
+        referenceElementType: BOXMODEL_L10N.getStr("boxmodel.offsetParent"),
       };
     }
 
     return {};
   }
 
   onToggleExpander(event) {
     this.setState({
--- a/devtools/client/inspector/boxmodel/reducers/box-model.js
+++ b/devtools/client/inspector/boxmodel/reducers/box-model.js
@@ -8,17 +8,17 @@ const {
   UPDATE_GEOMETRY_EDITOR_ENABLED,
   UPDATE_LAYOUT,
   UPDATE_OFFSET_PARENT,
 } = require("../actions/index");
 
 const INITIAL_BOX_MODEL = {
   geometryEditorEnabled: false,
   layout: {},
-  offsetParent: null
+  offsetParent: null,
 };
 
 const reducers = {
 
   [UPDATE_GEOMETRY_EDITOR_ENABLED](boxModel, { enabled }) {
     return Object.assign({}, boxModel, {
       geometryEditorEnabled: enabled,
     });
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel.js
@@ -6,152 +6,152 @@
 
 // Test that the box model displays the right values and that it updates when
 // the node's style is changed
 
 // Expected values:
 var res1 = [
   {
     selector: ".boxmodel-element-size",
-    value: "160" + "\u00D7" + "160.117"
+    value: "160" + "\u00D7" + "160.117",
   },
   {
     selector: ".boxmodel-size > .boxmodel-width",
-    value: "100"
+    value: "100",
   },
   {
     selector: ".boxmodel-size > .boxmodel-height",
-    value: "100.117"
+    value: "100.117",
   },
   {
     selector: ".boxmodel-position.boxmodel-top > span",
-    value: 42
+    value: 42,
   },
   {
     selector: ".boxmodel-position.boxmodel-left > span",
-    value: 42
+    value: 42,
   },
   {
     selector: ".boxmodel-margin.boxmodel-top > span",
-    value: 30
+    value: 30,
   },
   {
     selector: ".boxmodel-margin.boxmodel-left > span",
-    value: "auto"
+    value: "auto",
   },
   {
     selector: ".boxmodel-margin.boxmodel-bottom > span",
-    value: 30
+    value: 30,
   },
   {
     selector: ".boxmodel-margin.boxmodel-right > span",
-    value: "auto"
+    value: "auto",
   },
   {
     selector: ".boxmodel-padding.boxmodel-top > span",
-    value: 20
+    value: 20,
   },
   {
     selector: ".boxmodel-padding.boxmodel-left > span",
-    value: 20
+    value: 20,
   },
   {
     selector: ".boxmodel-padding.boxmodel-bottom > span",
-    value: 20
+    value: 20,
   },
   {
     selector: ".boxmodel-padding.boxmodel-right > span",
-    value: 20
+    value: 20,
   },
   {
     selector: ".boxmodel-border.boxmodel-top > span",
-    value: 10
+    value: 10,
   },
   {
     selector: ".boxmodel-border.boxmodel-left > span",
-    value: 10
+    value: 10,
   },
   {
     selector: ".boxmodel-border.boxmodel-bottom > span",
-    value: 10
+    value: 10,
   },
   {
     selector: ".boxmodel-border.boxmodel-right > span",
-    value: 10
+    value: 10,
   },
 ];
 
 var res2 = [
   {
     selector: ".boxmodel-element-size",
-    value: "190" + "\u00D7" + "210"
+    value: "190" + "\u00D7" + "210",
   },
   {
     selector: ".boxmodel-size > .boxmodel-width",
-    value: "100"
+    value: "100",
   },
   {
     selector: ".boxmodel-size > .boxmodel-height",
-    value: "150"
+    value: "150",
   },
   {
     selector: ".boxmodel-position.boxmodel-top > span",
-    value: 50
+    value: 50,
   },
   {
     selector: ".boxmodel-position.boxmodel-left > span",
-    value: 42
+    value: 42,
   },
   {
     selector: ".boxmodel-margin.boxmodel-top > span",
-    value: 30
+    value: 30,
   },
   {
     selector: ".boxmodel-margin.boxmodel-left > span",
-    value: "auto"
+    value: "auto",
   },
   {
     selector: ".boxmodel-margin.boxmodel-bottom > span",
-    value: 30
+    value: 30,
   },
   {
     selector: ".boxmodel-margin.boxmodel-right > span",
-    value: "auto"
+    value: "auto",
   },
   {
     selector: ".boxmodel-padding.boxmodel-top > span",
-    value: 20
+    value: 20,
   },
   {
     selector: ".boxmodel-padding.boxmodel-left > span",
-    value: 20
+    value: 20,
   },
   {
     selector: ".boxmodel-padding.boxmodel-bottom > span",
-    value: 20
+    value: 20,
   },
   {
     selector: ".boxmodel-padding.boxmodel-right > span",
-    value: 50
+    value: 50,
   },
   {
     selector: ".boxmodel-border.boxmodel-top > span",
-    value: 10
+    value: 10,
   },
   {
     selector: ".boxmodel-border.boxmodel-left > span",
-    value: 10
+    value: 10,
   },
   {
     selector: ".boxmodel-border.boxmodel-bottom > span",
-    value: 10
+    value: 10,
   },
   {
     selector: ".boxmodel-border.boxmodel-right > span",
-    value: 10
+    value: 10,
   },
 ];
 
 add_task(async function() {
   const style = "div { position: absolute; top: 42px; left: 42px; " +
               "height: 100.111px; width: 100px; border: 10px solid black; " +
               "padding: 20px; margin: 30px auto;}";
   const html = "<style>" + style + "</style><div></div>";
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_offsetparent.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_offsetparent.js
@@ -16,47 +16,47 @@ const TEST_URI = `
   <div id="fixed" style="position: fixed"></div>
 `;
 
 const OFFSET_PARENT_SELECTOR = ".computed-property-value-container .objectBox-node";
 
 const res1 = [
   {
     selector: "#absolute_child",
-    offsetParentValue: "div#relative_parent"
+    offsetParentValue: "div#relative_parent",
   },
   {
     selector: "#no_parent",
-    offsetParentValue: "body"
+    offsetParentValue: "body",
   },
   {
     selector: "#relative_parent",
-    offsetParentValue: "body"
+    offsetParentValue: "body",
   },
   {
     selector: "#static",
-    offsetParentValue: null
+    offsetParentValue: null,
   },
   {
     selector: "#fixed",
-    offsetParentValue: null
+    offsetParentValue: null,
   },
 ];
 
 const updates = [
   {
     selector: "#absolute_child",
-    update: "position: static"
+    update: "position: static",
   },
 ];
 
 const res2 = [
   {
     selector: "#absolute_child",
-    offsetParentValue: null
+    offsetParentValue: null,
   },
 ];
 
 add_task(async function() {
   await addTab("data:text/html," + encodeURIComponent(TEST_URI));
   const { inspector, boxmodel, testActor } = await openLayoutView();
 
   await testInitialValues(inspector, boxmodel);
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_positions.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_positions.js
@@ -21,29 +21,29 @@ const TEST_URI = `
   </style>
   <div>Test Node</div>
 `;
 
 // Expected values:
 const res1 = [
   {
     selector: ".boxmodel-position.boxmodel-top > span",
-    value: "auto"
+    value: "auto",
   },
   {
     selector: ".boxmodel-position.boxmodel-right > span",
-    value: "auto"
+    value: "auto",
   },
   {
     selector: ".boxmodel-position.boxmodel-bottom > span",
-    value: "auto"
+    value: "auto",
   },
   {
     selector: ".boxmodel-position.boxmodel-left > span",
-    value: 0
+    value: 0,
   },
 ];
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const {inspector, boxmodel} = await openLayoutView();
   const node = await getNodeFront("div", inspector);
   const children = await inspector.markup.walker.children(node);
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_properties.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_properties.js
@@ -23,64 +23,64 @@ const TEST_URI = `
     }
   </style>
   <div>Test Node</div>
 `;
 
 const res1 = [
   {
     property: "box-sizing",
-    value: "border-box"
+    value: "border-box",
   },
   {
     property: "display",
-    value: "block"
+    value: "block",
   },
   {
     property: "float",
-    value: "left"
+    value: "left",
   },
   {
     property: "line-height",
-    value: "20px"
+    value: "20px",
   },
   {
     property: "position",
-    value: "relative"
+    value: "relative",
   },
   {
     property: "z-index",
-    value: 2
+    value: 2,
   },
 ];
 
 const res2 = [
   {
     property: "box-sizing",
-    value: "content-box"
+    value: "content-box",
   },
   {
     property: "display",
-    value: "block"
+    value: "block",
   },
   {
     property: "float",
-    value: "right"
+    value: "right",
   },
   {
     property: "line-height",
-    value: "10px"
+    value: "10px",
   },
   {
     property: "position",
-    value: "static"
+    value: "static",
   },
   {
     property: "z-index",
-    value: 5
+    value: 5,
   },
 ];
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, boxmodel, testActor } = await openLayoutView();
   await selectNode("div", inspector);
 
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_pseudo-element.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_pseudo-element.js
@@ -32,73 +32,73 @@ const TEST_URI = `
   </style>
   <div>Test Node</div>
 `;
 
 // Expected values:
 const res1 = [
   {
     selector: ".boxmodel-element-size",
-    value: "32" + "\u00D7" + "32"
+    value: "32" + "\u00D7" + "32",
   },
   {
     selector: ".boxmodel-size > .boxmodel-width",
-    value: "32"
+    value: "32",
   },
   {
     selector: ".boxmodel-size > .boxmodel-height",
-    value: "32"
+    value: "32",
   },
   {
     selector: ".boxmodel-margin.boxmodel-top > span",
-    value: 0
+    value: 0,
   },
   {
     selector: ".boxmodel-margin.boxmodel-left > span",
-    value: 4 // (100 - (10 * 2) - (20 * 2) - 32) / 2
+    value: 4, // (100 - (10 * 2) - (20 * 2) - 32) / 2
   },
   {
     selector: ".boxmodel-margin.boxmodel-bottom > span",
-    value: 6
+    value: 6,
   },
   {
     selector: ".boxmodel-margin.boxmodel-right > span",
-    value: 4 // (100 - (10 * 2) - (20 * 2) - 32) / 2
+    value: 4, // (100 - (10 * 2) - (20 * 2) - 32) / 2
   },
   {
     selector: ".boxmodel-padding.boxmodel-top > span",
-    value: 0
+    value: 0,
   },
   {
     selector: ".boxmodel-padding.boxmodel-left > span",
-    value: 0
+    value: 0,
   },
   {
     selector: ".boxmodel-padding.boxmodel-bottom > span",
-    value: 0
+    value: 0,
   },
   {
     selector: ".boxmodel-padding.boxmodel-right > span",
-    value: 0
+    value: 0,
   },
   {
     selector: ".boxmodel-border.boxmodel-top > span",
-    value: 0
+    value: 0,
   },
   {
     selector: ".boxmodel-border.boxmodel-left > span",
-    value: 0
+    value: 0,
   },
   {
     selector: ".boxmodel-border.boxmodel-bottom > span",
-    value: 0
+    value: 0,
   },
   {
     selector: ".boxmodel-border.boxmodel-right > span",
-    value: 0
+    value: 0,
   },
 ];
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const {inspector, boxmodel} = await openLayoutView();
   const node = await getNodeFront("div", inspector);
   const children = await inspector.markup.walker.children(node);
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_rotate-labels-on-sides.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_rotate-labels-on-sides.js
@@ -21,17 +21,17 @@ const res1 = [
   {selector: ".boxmodel-border.boxmodel-right > span", value: 10},
 ];
 
 const TEST_URI = encodeURIComponent([
   "<style>",
   "div { border:10px solid black; padding: 20px 20px 20px 2000000px; " +
   "margin: 30px auto; }",
   "</style>",
-  "<div></div>"
+  "<div></div>",
 ].join(""));
 const LONG_TEXT_ROTATE_LIMIT = 3;
 
 add_task(async function() {
   await addTab("data:text/html," + TEST_URI);
   const {inspector, boxmodel} = await openLayoutView();
   await selectNode("div", inspector);
 
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_tooltips.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_tooltips.js
@@ -23,56 +23,56 @@ const TEST_URI = "<style>" +
 //   - name: the name of the property that is set by the css rule
 //   - ruleSelector: the selector of the rule
 //   - styleSheetLocation: the fileName:lineNumber
 const VALUES_TEST_DATA = [{
   selector: "#div1",
   values: [{
     name: "margin-top",
     ruleSelector: "#div1",
-    styleSheetLocation: "inline:1"
+    styleSheetLocation: "inline:1",
   }, {
     name: "margin-right",
     ruleSelector: "#div1",
-    styleSheetLocation: "inline:1"
+    styleSheetLocation: "inline:1",
   }, {
     name: "margin-bottom",
     ruleSelector: "#div1",
-    styleSheetLocation: "inline:1"
+    styleSheetLocation: "inline:1",
   }, {
     name: "margin-left",
     ruleSelector: "#div1",
-    styleSheetLocation: "inline:1"
-  }]
+    styleSheetLocation: "inline:1",
+  }],
 }, {
   selector: "#div2",
   values: [{
     name: "border-bottom-width",
     ruleSelector: "#div2",
-    styleSheetLocation: "inline:2"
-  }]
+    styleSheetLocation: "inline:2",
+  }],
 }, {
   selector: "#div3",
   values: [{
     name: "padding-top",
     ruleSelector: "html, body, #div3",
-    styleSheetLocation: "inline:3"
+    styleSheetLocation: "inline:3",
   }, {
     name: "padding-right",
     ruleSelector: "html, body, #div3",
-    styleSheetLocation: "inline:3"
+    styleSheetLocation: "inline:3",
   }, {
     name: "padding-bottom",
     ruleSelector: "html, body, #div3",
-    styleSheetLocation: "inline:3"
+    styleSheetLocation: "inline:3",
   }, {
     name: "padding-left",
     ruleSelector: "html, body, #div3",
-    styleSheetLocation: "inline:3"
-  }]
+    styleSheetLocation: "inline:3",
+  }],
 }];
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const {inspector, boxmodel} = await openLayoutView();
 
   info("Checking the regions tooltips");
 
--- a/devtools/client/inspector/boxmodel/utils/editing-session.js
+++ b/devtools/client/inspector/boxmodel/utils/editing-session.js
@@ -174,12 +174,12 @@ EditingSession.prototype = {
   destroy: function() {
     this._modifications.clear();
 
     this._cssProperties = null;
     this._doc = null;
     this._inspector = null;
     this._modifications = null;
     this._rules = null;
-  }
+  },
 };
 
 module.exports = EditingSession;
--- a/devtools/client/inspector/breadcrumbs.js
+++ b/devtools/client/inspector/breadcrumbs.js
@@ -744,17 +744,17 @@ HTMLBreadcrumbs.prototype = {
     while (node && node != stopNode) {
       if (node.tagName || node.isShadowRoot) {
         const button = this.buildButton(node);
         fragment.insertBefore(button, lastButtonInserted);
         lastButtonInserted = button;
         this.nodeHierarchy.splice(originalLength, 0, {
           node,
           button,
-          currentPrettyPrintText: this.prettyPrintNodeAsText(node)
+          currentPrettyPrintText: this.prettyPrintNodeAsText(node),
         });
       }
       node = node.parentOrHost();
     }
     this.container.appendChild(fragment, this.container.firstChild);
   },
 
   /**
@@ -940,10 +940,10 @@ HTMLBreadcrumbs.prototype = {
         doneUpdating();
       } catch (e) {
         // Only log this as an error if we haven't been destroyed in the meantime.
         if (!this.isDestroyed) {
           console.error(e);
         }
       }
     }, 0);
-  }
+  },
 };
--- a/devtools/client/inspector/changes/components/ChangesApp.js
+++ b/devtools/client/inspector/changes/components/ChangesApp.js
@@ -7,17 +7,17 @@
 const { PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 
 class ChangesApp extends PureComponent {
   static get propTypes() {
     return {
-      changes: PropTypes.object.isRequired
+      changes: PropTypes.object.isRequired,
     };
   }
 
   renderMutations(remove = {}, add = {}) {
     const removals = Object.entries(remove).map(([prop, value]) => {
       return dom.div(
         { className: "line diff-remove"},
         `${prop}: ${value};`
@@ -63,16 +63,16 @@ class ChangesApp extends PureComponent {
       );
     });
   }
 
   render() {
     return dom.div(
       {
         className: "theme-sidebar inspector-tabpanel",
-        id: "sidebar-panel-changes"
+        id: "sidebar-panel-changes",
       },
       this.renderDiff(this.props.changes.diff)
     );
   }
 }
 
 module.exports = connect(state => state)(ChangesApp);
--- a/devtools/client/inspector/changes/reducers/changes.js
+++ b/devtools/client/inspector/changes/reducers/changes.js
@@ -96,17 +96,17 @@ function updateDiff(diff = {}, change = 
 const reducers = {
 
   [TRACK_CHANGE](state, { data }) {
     const defaults = {
       href: "",
       selector: "",
       tag: null,
       add: null,
-      remove: null
+      remove: null,
     };
 
     data = { ...defaults, ...data };
 
     // Update the state in-place with data about a style change (no deep clone of state).
     // TODO: redefine state as a shallow object structure after figuring how to track
     // both CSS Declarations and CSS Rules and At-Rules (@media, @keyframes, etc).
     // @See https://bugzilla.mozilla.org/show_bug.cgi?id=1491263
--- a/devtools/client/inspector/computed/computed.js
+++ b/devtools/client/inspector/computed/computed.js
@@ -341,17 +341,17 @@ CssComputedView.prototype = {
 
       for (const child of node.childNodes[0].childNodes) {
         if (child.nodeType === node.TEXT_NODE) {
           selectorText += child.textContent;
         }
       }
       return {
         type: VIEW_NODE_SELECTOR_TYPE,
-        value: selectorText.trim()
+        value: selectorText.trim(),
       };
     }
 
     // Walk up the nodes to find out where node is
     let propertyView;
     let propertyContent;
     let parent = node;
     while (parent.parentNode) {
@@ -373,39 +373,39 @@ CssComputedView.prototype = {
 
     // Get the property and value for a node that's a property name or value
     const isHref = classes.contains("theme-link") && !classes.contains("computed-link");
     if (propertyView && (classes.contains("computed-property-name") ||
                          classes.contains("computed-property-value") ||
                          isHref)) {
       value = {
         property: parent.querySelector(".computed-property-name").firstChild.textContent,
-        value: parent.querySelector(".computed-property-value").textContent
+        value: parent.querySelector(".computed-property-value").textContent,
       };
     }
     if (propertyContent && (classes.contains("computed-other-property-value") ||
                             isHref)) {
       const view = propertyContent.previousSibling;
       value = {
         property: view.querySelector(".computed-property-name").firstChild.textContent,
-        value: node.textContent
+        value: node.textContent,
       };
     }
     if (classes.contains("computed-font-family")) {
       if (propertyView) {
         value = {
           property: parent.querySelector(
             ".computed-property-name").firstChild.textContent,
-          value: node.parentNode.textContent
+          value: node.parentNode.textContent,
         };
       } else if (propertyContent) {
         const view = propertyContent.previousSibling;
         value = {
           property: view.querySelector(".computed-property-name").firstChild.textContent,
-          value: node.parentNode.textContent
+          value: node.parentNode.textContent,
         };
       } else {
         return null;
       }
     }
 
     // Get the type
     if (classes.contains("computed-property-name")) {
@@ -455,17 +455,17 @@ CssComputedView.prototype = {
           onCancel: () => {
             reject("_createPropertyViews cancelled");
           },
           onDone: () => {
             // Completed callback.
             this.element.appendChild(fragment);
             this.noResults.hidden = this.numVisibleProperties > 0;
             resolve(undefined);
-          }
+          },
         }
       );
     });
 
     this._createViewsProcess.schedule();
 
     return this._createViewsPromise;
   },
@@ -482,18 +482,18 @@ CssComputedView.prototype = {
     // early if it changed
     const viewedElement = this._viewedElement;
 
     return promise.all([
       this._createPropertyViews(),
       this.pageStyle.getComputed(this._viewedElement, {
         filter: this._sourceFilter,
         onlyMatched: !this.includeBrowserStyles,
-        markMatched: true
-      })
+        markMatched: true,
+      }),
     ]).then(([, computed]) => {
       if (viewedElement !== this._viewedElement) {
         return promise.resolve();
       }
 
       this._matchedProperties = new Set();
       for (const name in computed) {
         if (computed[name].matched) {
@@ -533,17 +533,17 @@ CssComputedView.prototype = {
                                 .add("devtools-style-searchbox-no-match");
               } else {
                 this.searchField.classList
                                 .remove("devtools-style-searchbox-no-match");
               }
 
               this.inspector.emit("computed-view-refreshed");
               resolve(undefined);
-            }
+            },
           }
         );
         this._refreshProcess.schedule();
       });
     }).catch(console.error);
   },
 
   /**
@@ -789,32 +789,32 @@ CssComputedView.prototype = {
     }
     this.propertyViews = null;
 
     this.inspector = null;
     this.styleDocument = null;
     this.styleWindow = null;
 
     this._isDestroyed = true;
-  }
+  },
 };
 
 function PropertyInfo(tree, name) {
   this.tree = tree;
   this.name = name;
 }
 
 PropertyInfo.prototype = {
   get value() {
     if (this.tree._computed) {
       const value = this.tree._computed[this.name].value;
       return value;
     }
     return null;
-  }
+  },
 };
 
 /**
  * A container to give easy access to property data from the template engine.
  *
  * @param {CssComputedView} tree
  *        The CssComputedView instance we are working with.
  * @param {String} name
@@ -947,17 +947,17 @@ PropertyView.prototype = {
     this.element = doc.createElementNS(HTML_NS, "div");
     this.element.setAttribute("class", this.propertyHeaderClassName);
     this.element.addEventListener("dblclick", this.onMatchedToggle);
 
     // Make it keyboard navigable
     this.element.setAttribute("tabindex", "0");
     this.shortcuts = new KeyShortcuts({
       window: this.tree.styleWindow,
-      target: this.element
+      target: this.element,
     });
     this.shortcuts.on("F1", event => {
       this.mdnLinkClick(event);
       // Prevent opening the options panel
       event.preventDefault();
       event.stopPropagation();
     });
     this.shortcuts.on("Return", this.onMatchedToggle);
@@ -1109,46 +1109,46 @@ PropertyView.prototype = {
   },
 
   _buildMatchedSelectors: function() {
     const frag = this.element.ownerDocument.createDocumentFragment();
 
     for (const selector of this.matchedSelectorViews) {
       const p = createChild(frag, "p");
       const span = createChild(p, "span", {
-        class: "rule-link"
+        class: "rule-link",
       });
       const link = createChild(span, "a", {
         target: "_blank",
         class: "computed-link theme-link",
         title: selector.href,
         sourcelocation: selector.source,
         tabindex: "0",
-        textContent: selector.source
+        textContent: selector.source,
       });
       link.addEventListener("click", selector.openStyleEditor);
       const shortcuts = new KeyShortcuts({
         window: this.tree.styleWindow,
-        target: link
+        target: link,
       });
       shortcuts.on("Return", () => selector.openStyleEditor());
 
       const status = createChild(p, "span", {
         dir: "ltr",
         class: "rule-text theme-fg-color3 " + selector.statusClass,
-        title: selector.statusText
+        title: selector.statusText,
       });
 
       createChild(status, "div", {
         class: "fix-get-selection",
-        textContent: selector.sourceText
+        textContent: selector.sourceText,
       });
 
       const valueDiv = createChild(status, "div", {
-        class: "fix-get-selection computed-other-property-value theme-fg-color1"
+        class: "fix-get-selection computed-other-property-value theme-fg-color1",
       });
       valueDiv.appendChild(selector.outputFragment);
     }
 
     this.matchedSelectorsContainer.innerHTML = "";
     this.matchedSelectorsContainer.appendChild(frag);
   },
 
@@ -1207,17 +1207,17 @@ PropertyView.prototype = {
     this.matchedExpander.removeEventListener("click", this.onMatchedToggle);
     this.matchedExpander = null;
 
     this.nameNode.removeEventListener("click", this.onFocus);
     this.nameNode = null;
 
     this.valueNode.removeEventListener("click", this.onFocus);
     this.valueNode = null;
-  }
+  },
 };
 
 /**
  * A container to give us easy access to display data from a CssRule
  *
  * @param CssComputedView tree
  *        the owning CssComputedView
  * @param selectorInfo
@@ -1255,17 +1255,17 @@ function SelectorView(tree, selectorInfo
  * @see SelectorView.prototype._cacheStatusNames
  * @see CssLogic.STATUS
  */
 SelectorView.STATUS_NAMES = [
   // "Parent Match", "Matched", "Best Match"
 ];
 
 SelectorView.CLASS_NAMES = [
-  "parentmatch", "matched", "bestmatch"
+  "parentmatch", "matched", "bestmatch",
 ];
 
 SelectorView.prototype = {
   /**
    * Cache localized status names.
    *
    * These statuses are localized inside the styleinspector.properties string
    * bundle.
@@ -1325,17 +1325,17 @@ SelectorView.prototype = {
     const outputParser = this.tree._outputParser;
     const frag = outputParser.parseCssProperty(
       this.selectorInfo.name,
       this.selectorInfo.value, {
         colorSwatchClass: "computed-colorswatch",
         colorClass: "computed-color",
         urlClass: "theme-link",
         fontFamilyClass: "computed-font-family",
-        baseURI: this.selectorInfo.rule.href
+        baseURI: this.selectorInfo.rule.href,
       }
     );
     return frag;
   },
 
   /**
    * Update the text of the source link to reflect whether we're showing
    * original sources or not.  This is a callback for
@@ -1512,14 +1512,14 @@ ComputedViewTool.prototype = {
     this.inspector.sidebar.off("computedview-selected", this.onPanelSelected);
     if (this.inspector.pageStyle) {
       this.inspector.pageStyle.off("stylesheet-updated", this.refresh);
     }
 
     this.computedView.destroy();
 
     this.computedView = this.document = this.inspector = null;
-  }
+  },
 };
 
 exports.CssComputedView = CssComputedView;
 exports.ComputedViewTool = ComputedViewTool;
 exports.PropertyView = PropertyView;
--- a/devtools/client/inspector/computed/test/browser_computed_cycle_color.js
+++ b/devtools/client/inspector/computed/test/browser_computed_cycle_color.js
@@ -34,42 +34,42 @@ async function checkColorCycling(contain
   const win = view.styleWindow;
 
   // "Authored" (default; currently the computed value)
   is(valueNode.textContent, "rgb(255, 0, 0)",
                             "Color displayed as an RGB value.");
 
   const tests = [{
     value: "red",
-    comment: "Color displayed as a color name."
+    comment: "Color displayed as a color name.",
   }, {
     value: "#f00",
-    comment: "Color displayed as an authored value."
+    comment: "Color displayed as an authored value.",
   }, {
     value: "hsl(0, 100%, 50%)",
-    comment: "Color displayed as an HSL value again."
+    comment: "Color displayed as an HSL value again.",
   }, {
     value: "rgb(255, 0, 0)",
-    comment: "Color displayed as an RGB value again."
+    comment: "Color displayed as an RGB value again.",
   }];
 
   for (const test of tests) {
     await checkSwatchShiftClick(container, win, test.value, test.comment);
   }
 }
 
 async function checkSwatchShiftClick(container, win, expectedValue, comment) {
   const swatch = container.querySelector(".computed-colorswatch");
   const valueNode = container.querySelector(".computed-color");
   swatch.scrollIntoView();
 
   const onUnitChange = swatch.once("unit-change");
   EventUtils.synthesizeMouseAtCenter(swatch, {
     type: "mousedown",
-    shiftKey: true
+    shiftKey: true,
   }, win);
   // we need to have the mouse up event in order to make sure that the platform
   // lets go of the last container, and is not waiting for something to happen.
   // Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1442153
   EventUtils.synthesizeMouseAtCenter(swatch, {type: "mouseup"}, win);
   await onUnitChange;
   is(valueNode.textContent, expectedValue, comment);
 }
--- a/devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js
+++ b/devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js
@@ -15,17 +15,17 @@
 // Since the code to make this work for the computed-view is 90% the same,
 // there is no need for testing it again here.
 // This test however serves as a unit test for getNodeInfo.
 
 const {
   VIEW_NODE_SELECTOR_TYPE,
   VIEW_NODE_PROPERTY_TYPE,
   VIEW_NODE_VALUE_TYPE,
-  VIEW_NODE_IMAGE_URL_TYPE
+  VIEW_NODE_IMAGE_URL_TYPE,
 } = require("devtools/client/inspector/shared/node-types");
 
 const TEST_URI = `
   <style type="text/css">
     body {
       background: red;
       color: white;
     }
@@ -50,124 +50,124 @@ const TEST_URI = `
 const TEST_DATA = [
   {
     desc: "Testing a null node",
     getHoveredNode: function() {
       return null;
     },
     assertNodeInfo: function(nodeInfo) {
       is(nodeInfo, null);
-    }
+    },
   },
   {
     desc: "Testing a useless node",
     getHoveredNode: function(view) {
       return view.element;
     },
     assertNodeInfo: function(nodeInfo) {
       is(nodeInfo, null);
-    }
+    },
   },
   {
     desc: "Testing a property name",
     getHoveredNode: function(view) {
       return getComputedViewProperty(view, "color").nameSpan;
     },
     assertNodeInfo: function(nodeInfo) {
       is(nodeInfo.type, VIEW_NODE_PROPERTY_TYPE);
       ok("property" in nodeInfo.value);
       ok("value" in nodeInfo.value);
       is(nodeInfo.value.property, "color");
       is(nodeInfo.value.value, "rgb(255, 0, 0)");
-    }
+    },
   },
   {
     desc: "Testing a property value",
     getHoveredNode: function(view) {
       return getComputedViewProperty(view, "color").valueSpan;
     },
     assertNodeInfo: function(nodeInfo) {
       is(nodeInfo.type, VIEW_NODE_VALUE_TYPE);
       ok("property" in nodeInfo.value);
       ok("value" in nodeInfo.value);
       is(nodeInfo.value.property, "color");
       is(nodeInfo.value.value, "rgb(255, 0, 0)");
-    }
+    },
   },
   {
     desc: "Testing an image url",
     getHoveredNode: function(view) {
       const {valueSpan} = getComputedViewProperty(view, "background-image");
       return valueSpan.querySelector(".theme-link");
     },
     assertNodeInfo: function(nodeInfo) {
       is(nodeInfo.type, VIEW_NODE_IMAGE_URL_TYPE);
       ok("property" in nodeInfo.value);
       ok("value" in nodeInfo.value);
       is(nodeInfo.value.property, "background-image");
       is(nodeInfo.value.value,
          "url(\"chrome://global/skin/icons/warning-64.png\")");
       is(nodeInfo.value.url, "chrome://global/skin/icons/warning-64.png");
-    }
+    },
   },
   {
     desc: "Testing a matched rule selector (bestmatch)",
     getHoveredNode: async function(view) {
       const el = await getComputedViewMatchedRules(view, "background-color");
       return el.querySelector(".bestmatch");
     },
     assertNodeInfo: function(nodeInfo) {
       is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
       is(nodeInfo.value, "div div");
-    }
+    },
   },
   {
     desc: "Testing a matched rule selector (matched)",
     getHoveredNode: async function(view) {
       const el = await getComputedViewMatchedRules(view, "background-color");
       return el.querySelector(".matched");
     },
     assertNodeInfo: function(nodeInfo) {
       is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
       is(nodeInfo.value, "div");
-    }
+    },
   },
   {
     desc: "Testing a matched rule selector (parentmatch)",
     getHoveredNode: async function(view) {
       const el = await getComputedViewMatchedRules(view, "color");
       return el.querySelector(".parentmatch");
     },
     assertNodeInfo: function(nodeInfo) {
       is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
       is(nodeInfo.value, "body");
-    }
+    },
   },
   {
     desc: "Testing a matched rule value",
     getHoveredNode: async function(view) {
       const el = await getComputedViewMatchedRules(view, "color");
       return el.querySelector(".computed-other-property-value");
     },
     assertNodeInfo: function(nodeInfo) {
       is(nodeInfo.type, VIEW_NODE_VALUE_TYPE);
       is(nodeInfo.value.property, "color");
       is(nodeInfo.value.value, "red");
-    }
+    },
   },
   {
     desc: "Testing a matched rule stylesheet link",
     getHoveredNode: async function(view) {
       const el = await getComputedViewMatchedRules(view, "color");
       return el.querySelector(".rule-link .theme-link");
     },
     assertNodeInfo: function(nodeInfo) {
       is(nodeInfo, null);
-    }
-  }
+    },
+  },
 ];
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const {inspector, view} = await openComputedView();
   await selectNode("#testElement", inspector);
 
   for (const {desc, getHoveredNode, assertNodeInfo} of TEST_DATA) {
--- a/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-01.js
+++ b/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-01.js
@@ -43,17 +43,17 @@ add_task(async function() {
 
 async function testCopySome(view) {
   const expectedPattern = "font-family: helvetica, sans-serif;[\\r\\n]+" +
                         "font-size: 16px;[\\r\\n]+" +
                         "font-variant-caps: small-caps;[\\r\\n]*";
 
   await copySomeTextAndCheckClipboard(view, {
     start: {prop: 1, offset: 0},
-    end: {prop: 3, offset: 2}
+    end: {prop: 3, offset: 2},
   }, expectedPattern);
 }
 
 async function testCopyAll(view) {
   const expectedPattern = "color: rgb\\(255, 255, 0\\);[\\r\\n]+" +
                         "font-family: helvetica, sans-serif;[\\r\\n]+" +
                         "font-size: 16px;[\\r\\n]+" +
                         "font-variant-caps: small-caps;[\\r\\n]*";
--- a/devtools/client/inspector/extensions/actions/index.js
+++ b/devtools/client/inspector/extensions/actions/index.js
@@ -13,11 +13,11 @@ createEnum([
 
   // Update the extension sidebar with an object value grip preview.
   "EXTENSION_SIDEBAR_OBJECT_GRIP_VIEW_UPDATE",
 
   // Switch the extension sidebar into an extension page container.
   "EXTENSION_SIDEBAR_PAGE_UPDATE",
 
   // Remove an extension sidebar from the inspector store.
-  "EXTENSION_SIDEBAR_REMOVE"
+  "EXTENSION_SIDEBAR_REMOVE",
 
 ], module.exports);
--- a/devtools/client/inspector/extensions/actions/sidebar.js
+++ b/devtools/client/inspector/extensions/actions/sidebar.js
@@ -50,11 +50,11 @@ module.exports = {
   /**
    * Remove the extension sidebar from the inspector store.
    */
   removeExtensionSidebar(sidebarId) {
     return {
       type: EXTENSION_SIDEBAR_REMOVE,
       sidebarId,
     };
-  }
+  },
 
 };
--- a/devtools/client/inspector/extensions/components/ObjectValueGripView.js
+++ b/devtools/client/inspector/extensions/components/ObjectValueGripView.js
@@ -44,17 +44,17 @@ class ObjectValueGripView extends PureCo
       mode: MODE.SHORT,
       // TODO: we disable focus since it's not currently working well in ObjectInspector.
       // Let's remove the property below when problem are fixed in OI.
       disabledFocus: true,
       roots: [{
         path: objectValueGrip && objectValueGrip.actor || JSON.stringify(objectValueGrip),
         contents: {
           value: objectValueGrip,
-        }
+        },
       }],
       createObjectClient: serviceContainer.createObjectClient,
       releaseActor: serviceContainer.releaseActor,
       // TODO: evaluate if there should also be a serviceContainer.openLink.
     };
 
     if (objectValueGrip && objectValueGrip.actor) {
       Object.assign(objectInspectorProps, {
--- a/devtools/client/inspector/extensions/extension-sidebar.js
+++ b/devtools/client/inspector/extensions/extension-sidebar.js
@@ -95,21 +95,21 @@ class ExtensionSidebar {
 
             if (!highlighterUtils) {
               return null;
             }
 
             const front = await highlighterUtils.gripToNodeFront(grip);
             const onInspectorUpdated = this.inspector.once("inspector-updated");
             const onNodeFrontSet = this.inspector.toolbox.selection.setNodeFront(front, {
-              reason: "inspector-extension-sidebar"
+              reason: "inspector-extension-sidebar",
             });
 
             return Promise.all([onNodeFrontSet, onInspectorUpdated]);
-          }
+          },
         },
       }));
     }
 
     return this._provider;
   }
 
   /**
--- a/devtools/client/inspector/extensions/reducers/sidebar.js
+++ b/devtools/client/inspector/extensions/reducers/sidebar.js
@@ -17,42 +17,42 @@ const reducers = {
 
   [EXTENSION_SIDEBAR_OBJECT_TREEVIEW_UPDATE](sidebar, {sidebarId, object}) {
     // Update the sidebar to a "object-treeview" which shows
     // the passed object.
     return Object.assign({}, sidebar, {
       [sidebarId]: {
         viewMode: "object-treeview",
         object,
-      }
+      },
     });
   },
 
   [EXTENSION_SIDEBAR_OBJECT_GRIP_VIEW_UPDATE](
     sidebar, {sidebarId, objectValueGrip, rootTitle}
   ) {
     // Update the sidebar to a "object-treeview" which shows
     // the passed object.
     return Object.assign({}, sidebar, {
       [sidebarId]: {
         viewMode: "object-value-grip-view",
         objectValueGrip,
         rootTitle,
-      }
+      },
     });
   },
 
   [EXTENSION_SIDEBAR_PAGE_UPDATE](sidebar, {sidebarId, iframeURL}) {
     // Update the sidebar to a "object-treeview" which shows
     // the passed object.
     return Object.assign({}, sidebar, {
       [sidebarId]: {
         viewMode: "extension-page",
         iframeURL,
-      }
+      },
     });
   },
 
   [EXTENSION_SIDEBAR_REMOVE](sidebar, {sidebarId}) {
     // Remove the sidebar from the Redux store.
     delete sidebar[sidebarId];
     return Object.assign({}, sidebar);
   },
--- a/devtools/client/inspector/extensions/test/browser_inspector_extension_sidebar.js
+++ b/devtools/client/inspector/extensions/test/browser_inspector_extension_sidebar.js
@@ -16,17 +16,17 @@ let fakeExtCallerInfo;
 let toolbox;
 let inspector;
 
 add_task(async function setupExtensionSidebar() {
   extension = ExtensionTestUtils.loadExtension({
     background() {
       // This is just an empty extension used to ensure that the caller extension uuid
       // actually exists.
-    }
+    },
   });
 
   await extension.startup();
 
   fakeExtCallerInfo = {
     url: WebExtensionPolicy.getByID(extension.id).getURL("fake-caller-script.js"),
     lineNumber: 1,
     addonId: extension.id,
@@ -118,17 +118,17 @@ add_task(async function testSidebarSetOb
     obj.prop1 = 123;
     obj[Symbol('sym1')] = 456;
     obj.cyclic = obj;
     obj;
   `;
 
   const evalResult = await inspectedWindowFront.eval(fakeExtCallerInfo, expression, {
     evalResultAsGrip: true,
-    toolboxConsoleActorID: toolbox.target.form.consoleActor
+    toolboxConsoleActorID: toolbox.target.form.consoleActor,
   });
 
   sidebar.setObjectValueGrip(evalResult.valueGrip, "Expected Root Title");
 
   // Wait the ObjectInspector component to be rendered and test its content.
   await testSetExpressionSidebarPanel(sidebarPanelContent, {
     nodesLength: 4,
     propertiesNames: ["cyclic", "prop1", "Symbol(sym1)"],
@@ -152,17 +152,17 @@ add_task(async function testSidebarDOMNo
   const inspectedWindowFront = toolbox.target.getFront("webExtensionInspectedWindow");
   const sidebar = inspector.getPanel(SIDEBAR_ID);
   const sidebarPanelContent = inspector.sidebar.getTabPanel(SIDEBAR_ID);
 
   const expression = "({ body: document.body })";
 
   const evalResult = await inspectedWindowFront.eval(fakeExtCallerInfo, expression, {
     evalResultAsGrip: true,
-    toolboxConsoleActorID: toolbox.target.form.consoleActor
+    toolboxConsoleActorID: toolbox.target.form.consoleActor,
   });
 
   sidebar.setObjectValueGrip(evalResult.valueGrip);
 
   // Wait the DOM node to be rendered inside the component.
   await waitForObjectInspector(sidebarPanelContent, "node");
 
   // Wait for the object to be expanded so we only target the "body" property node, and
--- a/devtools/client/inspector/extensions/test/head_devtools_inspector_sidebar.js
+++ b/devtools/client/inspector/extensions/test/head_devtools_inspector_sidebar.js
@@ -115,17 +115,17 @@ async function testSetExpressionSidebarP
        "Got no Accordion component as expected");
   }
 }
 
 function assertTreeView(panelDoc, expectedContent) {
   const {
     expectedTreeTables,
     expectedStringCells,
-    expectedNumberCells
+    expectedNumberCells,
   } = expectedContent;
 
   if (expectedTreeTables) {
     is(panelDoc.querySelectorAll("table.treeTable").length, expectedTreeTables,
        "The panel document contains the expected number of TreeView components");
   }
 
   if (expectedStringCells) {
--- a/devtools/client/inspector/flexbox/components/FlexItemSizingOutline.js
+++ b/devtools/client/inspector/flexbox/components/FlexItemSizingOutline.js
@@ -35,26 +35,26 @@ class FlexItemSizingOutline extends Pure
     if (!mainDeltaSize) {
       return null;
     }
 
     return (
       dom.div({
         className: "flex-outline-delta",
         style: {
-          backgroundColor: colorUtils.setAlpha(this.props.color, 0.1)
-        }
+          backgroundColor: colorUtils.setAlpha(this.props.color, 0.1),
+        },
       })
     );
   }
 
   renderFinalOutline(mainFinalSize, mainMaxSize, mainMinSize, isClamped) {
     return (
       dom.div({
-        className: "flex-outline-final" + (isClamped ? " clamped" : "")
+        className: "flex-outline-final" + (isClamped ? " clamped" : ""),
       })
     );
   }
 
   renderPoint(name) {
     return dom.div({ className: `flex-outline-point ${name}`, "data-label": name });
   }
 
@@ -95,17 +95,17 @@ class FlexItemSizingOutline extends Pure
     // TODO: replace this with the new clamping state that the API will return once bug
     // 1498273 is fixed.
     const showMin = mainMinSize === mainFinalSize && properties[`min-${dimension}`];
 
     // Sort all of the dimensions in order to come up with a grid track template.
     // Make mainDeltaSize start from the same point as the other ones so we can compare.
     let sizes = [
       { name: "basis-end", size: mainBaseSize },
-      { name: "final-end", size: mainFinalSize }
+      { name: "final-end", size: mainFinalSize },
     ];
 
     if (mainDeltaSize > 0) {
       sizes.push({ name: "delta-start", size: mainBaseSize });
       sizes.push({ name: "delta-end", size: mainBaseSize + mainDeltaSize });
     } else {
       sizes.push({ name: "delta-start", size: mainBaseSize + mainDeltaSize });
       sizes.push({ name: "delta-end", size: mainBaseSize });
@@ -138,18 +138,18 @@ class FlexItemSizingOutline extends Pure
       dom.div({ className: "flex-outline-container" },
         dom.div(
           {
             className: "flex-outline" +
                        (isRow ? " row" : " column") +
                        (mainDeltaSize > 0 ? " growing" : " shrinking"),
             style: {
               color: this.props.color,
-              gridTemplateColumns
-            }
+              gridTemplateColumns,
+            },
           },
           this.renderPoint("basis"),
           this.renderPoint("final"),
           showMin ? this.renderPoint("min") : null,
           showMax ? this.renderPoint("max") : null,
           this.renderBasisOutline(mainBaseSize),
           this.renderDeltaOutline(mainDeltaSize),
           this.renderFinalOutline(mainFinalSize, mainMaxSize, mainMinSize,
--- a/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
+++ b/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
@@ -136,17 +136,17 @@ class FlexItemSizingProperties extends P
     );
   }
 
   renderFlexibilitySection(flexItemSizing, properties) {
     const {
       mainDeltaSize,
       mainBaseSize,
       mainFinalSize,
-      lineGrowthState
+      lineGrowthState,
     } = flexItemSizing;
 
     // Don't attempt to display anything useful if everything is 0.
     if (!mainFinalSize && !mainBaseSize && !mainDeltaSize) {
       return null;
     }
 
     const flexGrow = properties["flex-grow"];
--- a/devtools/client/inspector/flexbox/components/Header.js
+++ b/devtools/client/inspector/flexbox/components/Header.js
@@ -126,17 +126,17 @@ class Header extends PureComponent {
             className: "flex-header-button-prev devtools-button",
             onClick: () => setSelectedNode(nodeFront),
           })
           :
           null,
         dom.div(
           {
             className: "flex-header-content" +
-                       (flexItemShown ? " flex-item-shown" : "")
+                       (flexItemShown ? " flex-item-shown" : ""),
           },
           this.renderFlexContainer(),
           this.renderFlexItemSelector()
         ),
         this.renderFlexboxHighlighterToggle()
       )
     );
   }
--- a/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_has_correct_layout.js
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_has_correct_layout.js
@@ -9,29 +9,29 @@
 // this grid has been correctly generated depending on the item that is currently
 // selected.
 
 const TEST_URI = URL_ROOT + "doc_flexbox_simple.html";
 
 const TEST_DATA = [{
   selector: ".shrinking .item",
   expectedGridTemplate: "[final-start basis-start] 300fr [final-end delta-start] " +
-                        "200fr [basis-end delta-end]"
+                        "200fr [basis-end delta-end]",
 }, {
   selector: ".shrinking.is-clamped .item",
   expectedGridTemplate: "[final-start basis-start] 300fr [delta-start] " +
-                        "50fr [final-end min] 150fr [basis-end delta-end]"
+                        "50fr [final-end min] 150fr [basis-end delta-end]",
 }, {
   selector: ".growing .item",
   expectedGridTemplate: "[final-start basis-start] 200fr [basis-end delta-start] " +
-                        "100fr [final-end delta-end]"
+                        "100fr [final-end delta-end]",
 }, {
   selector: ".growing.is-clamped .item",
   expectedGridTemplate: "[final-start basis-start] 200fr [basis-end delta-start] " +
-                        "50fr [final-end max] 50fr [delta-end]"
+                        "50fr [final-end max] 50fr [delta-end]",
 }];
 
 add_task(async function() {
   await addTab(TEST_URI);
   const { inspector, flexboxInspector } = await openLayoutView();
   const { document: doc } = flexboxInspector;
 
   for (const {selector, expectedGridTemplate} of TEST_DATA) {
--- a/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_has_correct_sections.js
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_has_correct_sections.js
@@ -7,26 +7,26 @@
 // Test that the flex item sizing UI contains the right sections, depending on which
 // element is selected. Some items may be clamped, others not, so not all sections are
 // visible at all times.
 
 const TEST_URI = URL_ROOT + "doc_flexbox_simple.html";
 
 const TEST_DATA = [{
   selector: ".shrinking .item",
-  expectedSections: ["Base Size", "Flexibility", "Final Size"]
+  expectedSections: ["Base Size", "Flexibility", "Final Size"],
 }, {
   selector: ".shrinking.is-clamped .item",
-  expectedSections: ["Base Size", "Flexibility", "Minimum Size", "Final Size"]
+  expectedSections: ["Base Size", "Flexibility", "Minimum Size", "Final Size"],
 }, {
   selector: ".growing .item",
-  expectedSections: ["Base Size", "Flexibility", "Final Size"]
+  expectedSections: ["Base Size", "Flexibility", "Final Size"],
 }, {
   selector: ".growing.is-clamped .item",
-  expectedSections: ["Base Size", "Flexibility", "Maximum Size", "Final Size"]
+  expectedSections: ["Base Size", "Flexibility", "Maximum Size", "Final Size"],
 }];
 
 add_task(async function() {
   await addTab(TEST_URI);
   const { inspector, flexboxInspector } = await openLayoutView();
   const { document: doc } = flexboxInspector;
 
   for (const { selector, expectedSections } of TEST_DATA) {
--- a/devtools/client/inspector/fonts/components/Font.js
+++ b/devtools/client/inspector/fonts/components/Font.js
@@ -40,17 +40,17 @@ class Font extends PureComponent {
 
     this.setState({
       isFontFaceRuleExpanded: false,
     });
   }
 
   onFontFaceRuleToggle(event) {
     this.setState({
-      isFontFaceRuleExpanded: !this.state.isFontFaceRuleExpanded
+      isFontFaceRuleExpanded: !this.state.isFontFaceRuleExpanded,
     });
     event.stopPropagation();
   }
 
   renderFontCSSCode(rule, ruleText) {
     if (!rule) {
       return null;
     }
--- a/devtools/client/inspector/fonts/components/FontEditor.js
+++ b/devtools/client/inspector/fonts/components/FontEditor.js
@@ -124,21 +124,21 @@ class FontEditor extends PureComponent {
       return FontName({
         font,
         onToggleFontHighlight: this.props.onToggleFontHighlight,
       });
     });
 
     return dom.div(
       {
-        className: "font-group"
+        className: "font-group",
       },
       dom.div(
         {
-          className: "font-family-name"
+          className: "font-family-name",
         },
         family),
       group
     );
   }
 
   renderFontSize(value) {
     return value !== null && FontSize({
@@ -183,17 +183,17 @@ class FontEditor extends PureComponent {
    *          values: []
    *        }
    * @return {DOMNode}
    */
   renderInstances(fontInstances = [], selectedInstance) {
     // Append a "Custom" instance entry which represents the latest manual axes changes.
     const customInstance = {
       name: getStr("fontinspector.customInstanceName"),
-      values: this.props.fontEditor.customInstanceValues
+      values: this.props.fontEditor.customInstanceValues,
     };
     fontInstances = [ ...fontInstances, customInstance ];
 
     // Generate the <option> elements for the dropdown.
     const instanceOptions = fontInstances.map(instance =>
       dom.option(
         {
           value: instance.name,
@@ -205,17 +205,17 @@ class FontEditor extends PureComponent {
 
     // Generate the dropdown.
     const instanceSelect = dom.select(
       {
         className: "font-control-input font-value-select",
         onChange: (e) => {
           const instance = fontInstances.find(inst => e.target.value === inst.name);
           instance && this.props.onInstanceChange(instance.name, instance.values);
-        }
+        },
       },
       instanceOptions
     );
 
     return dom.label(
       {
         className: "font-control",
       },
@@ -227,21 +227,21 @@ class FontEditor extends PureComponent {
       ),
       instanceSelect
     );
   }
 
   renderWarning(warning) {
     return dom.div(
       {
-        id: "font-editor"
+        id: "font-editor",
       },
       dom.div(
         {
-          className: "devtools-sidepanel-no-result"
+          className: "devtools-sidepanel-no-result",
         },
         warning
       )
     );
   }
 
   render() {
     const { fontEditor } = this.props;
@@ -260,17 +260,17 @@ class FontEditor extends PureComponent {
 
     // Show the empty state with a warning message when a used font was not found.
     if (!font) {
       return this.renderWarning(warning);
     }
 
     return dom.div(
       {
-        id: "font-editor"
+        id: "font-editor",
       },
       // Always render UI for used fonts.
       this.renderUsedFonts(fonts),
       // Render UI for font variation instances if they are defined.
       hasFontInstances && this.renderInstances(font.variationInstances, instance),
       // Always render UI for font size.
       this.renderFontSize(properties["font-size"]),
       // Always render UI for line height.
--- a/devtools/client/inspector/fonts/components/FontList.js
+++ b/devtools/client/inspector/fonts/components/FontList.js
@@ -47,25 +47,25 @@ class FontList extends PureComponent {
     this.previewInputRef.current && this.previewInputRef.current.focus();
   }
 
   render() {
     const {
       fonts,
       fontOptions,
       onPreviewTextChange,
-      onToggleFontHighlight
+      onToggleFontHighlight,
     } = this.props;
 
     const { previewText } = fontOptions;
     const { onPreviewClick } = this;
 
     const list = dom.ul(
       {
-        className: "fonts-list"
+        className: "fonts-list",
       },
       fonts.map((font, i) => Font({
         key: i,
         font,
         onPreviewClick,
         onToggleFontHighlight,
       }))
     );
--- a/devtools/client/inspector/fonts/components/FontName.js
+++ b/devtools/client/inspector/fonts/components/FontName.js
@@ -42,17 +42,17 @@ class FontName extends PureComponent {
       onToggleFontHighlight,
     } = this.props;
 
     onToggleFontHighlight(font, false);
   }
 
   render() {
     const options = {
-      className: "font-name"
+      className: "font-name",
     };
 
     if (Services.prefs.getBoolPref(FONT_HIGHLIGHTER_PREF)) {
       options.onMouseOver = this.onNameMouseOver;
       options.onMouseOut = this.onNameMouseOut;
     }
 
     return dom.span(options, this.props.font.name);
--- a/devtools/client/inspector/fonts/components/FontOrigin.js
+++ b/devtools/client/inspector/fonts/components/FontOrigin.js
@@ -30,30 +30,30 @@ class FontOrigin extends PureComponent {
   }
 
   render() {
     const url = this.props.font.URI;
 
     if (!url) {
       return dom.p(
         {
-          className: "font-origin system"
+          className: "font-origin system",
         },
         getStr("fontinspector.system")
       );
     }
 
     return dom.p(
       {
         className: "font-origin remote",
       },
       dom.span(
         {
           className: "url",
-          title: url
+          title: url,
         },
         url
       ),
       dom.button(
         {
           className: "copy-icon",
           onClick: this.onCopyURL,
           title: getStr("fontinspector.copyURL"),
--- a/devtools/client/inspector/fonts/components/FontOverview.js
+++ b/devtools/client/inspector/fonts/components/FontOverview.js
@@ -48,17 +48,17 @@ class FontOverview extends PureComponent
         fonts,
         fontOptions,
         onPreviewTextChange,
         onToggleFontHighlight,
       })
       :
       dom.div(
         {
-          className: "devtools-sidepanel-no-result"
+          className: "devtools-sidepanel-no-result",
         },
         getStr("fontinspector.noFontsUsedOnCurrentElement")
       );
   }
 
   renderFonts() {
     const {
       fontData,
@@ -82,21 +82,21 @@ class FontOverview extends PureComponent
       items: [
         {
           header,
           component: FontList,
           componentProps: {
             fontOptions,
             fonts,
             onPreviewTextChange,
-            onToggleFontHighlight: this.onToggleFontHighlightGlobal
+            onToggleFontHighlight: this.onToggleFontHighlightGlobal,
           },
-          opened: false
-        }
-      ]
+          opened: false,
+        },
+      ],
     });
   }
 
   render() {
     return dom.div(
       {
         id: "font-container",
       },
--- a/devtools/client/inspector/fonts/components/FontPreviewInput.js
+++ b/devtools/client/inspector/fonts/components/FontPreviewInput.js
@@ -24,17 +24,17 @@ class FontPreviewInput extends PureCompo
   constructor(props) {
     super(props);
 
     this.onChange = this.onChange.bind(this);
     this.onFocus = this.onFocus.bind(this);
     this.inputRef = createRef();
 
     this.state = {
-      value: this.props.previewText
+      value: this.props.previewText,
     };
   }
 
   onChange(e) {
     const value = e.target.value;
     this.props.onPreviewTextChange(value);
 
     this.setState((prevState) => {
--- a/devtools/client/inspector/fonts/components/FontPropertyValue.js
+++ b/devtools/client/inspector/fonts/components/FontPropertyValue.js
@@ -46,17 +46,17 @@ class FontPropertyValue extends PureComp
     return {
       autoIncrement: false,
       className: "",
       minLabel: false,
       maxLabel: false,
       nameLabel: false,
       step: 1,
       unit: null,
-      unitOptions: []
+      unitOptions: [],
     };
   }
 
   constructor(props) {
     super(props);
     // Interval ID for the auto-increment operation.
     this.interval = null;
     this.state = {
@@ -270,17 +270,17 @@ class FontPropertyValue extends PureComp
 
   onUnitChange(e) {
     this.props.onChange(this.props.name, this.props.value, this.props.unit,
        e.target.value);
     // Reset internal state value and wait for converted value from props.
     this.setState((prevState) => {
       return {
         ...prevState,
-        value: null
+        value: null,
       };
     });
   }
 
   onMouseDown() {
     this.toggleInteractiveState(true);
   }
 
@@ -325,17 +325,17 @@ class FontPropertyValue extends PureComp
    *
    * @param {Boolean} isInteractive
    *        Whether to mark the interactive state on or off.
    */
   toggleInteractiveState(isInteractive) {
     this.setState((prevState) => {
       return {
         ...prevState,
-        interactive: isInteractive
+        interactive: isInteractive,
       };
     });
   }
 
   /**
    * Calls the given `onChange` callback with the current property name, value and unit
    * if the value is valid according to the constraints of this component (min, max).
    * Updates the internal state with the current value. This will be used to render the
@@ -350,17 +350,17 @@ class FontPropertyValue extends PureComp
   updateValue(value) {
     if (this.isValueValid(value)) {
       this.props.onChange(this.props.name, value, this.props.unit);
     }
 
     this.setState((prevState) => {
       return {
         ...prevState,
-        value
+        value,
       };
     });
   }
 
   renderUnitSelect() {
     if (!this.props.unitOptions.length) {
       return null;
     }
@@ -404,17 +404,17 @@ class FontPropertyValue extends PureComp
       label
     );
 
     // Show the `name` prop value as an additional label if the `nameLabel` prop is true.
     const detailEl = nameLabel ?
       dom.span(
         {
           className: "font-control-label-detail",
-          id: `detail-${name}`
+          id: `detail-${name}`,
         },
         this.getPropLabel("name")
       )
       :
       null;
 
     return createElement(Fragment, null, labelEl, detailEl);
   }
@@ -475,17 +475,17 @@ class FontPropertyValue extends PureComp
         {
           className: "font-control-label",
           title: this.props.label,
         },
         this.renderLabelContent()
       ),
       dom.div(
         {
-          className: "font-control-input"
+          className: "font-control-input",
         },
         dom.div(
           {
             className: "font-value-slider-container",
             "data-min": this.getPropLabel("min"),
             "data-max": this.getPropLabel("max"),
           },
           range
--- a/devtools/client/inspector/fonts/components/FontStyle.js
+++ b/devtools/client/inspector/fonts/components/FontStyle.js
@@ -36,17 +36,17 @@ class FontStyle extends PureComponent {
       dom.span(
         {
           className: "font-control-label",
         },
         getStr("fontinspector.fontItalicLabel")
       ),
       dom.div(
         {
-          className: "font-control-input"
+          className: "font-control-input",
         },
         dom.input(
           {
             checked: this.props.value === "italic" || this.props.value === "oblique",
             className: "devtools-checkbox-toggle",
             name: this.name,
             onChange: this.onToggle,
             type: "checkbox",
--- a/devtools/client/inspector/fonts/components/FontsApp.js
+++ b/devtools/client/inspector/fonts/components/FontsApp.js
@@ -38,17 +38,17 @@ class FontsApp extends PureComponent {
       onPreviewTextChange,
       onPropertyChange,
       onToggleFontHighlight,
     } = this.props;
 
     return dom.div(
       {
         className: "theme-sidebar inspector-tabpanel",
-        id: "sidebar-panel-fontinspector"
+        id: "sidebar-panel-fontinspector",
       },
       fontEditorEnabled && FontEditor({
         fontEditor,
         onInstanceChange,
         onPropertyChange,
         onToggleFontHighlight,
       }),
       FontOverview({
--- a/devtools/client/inspector/fonts/fonts.js
+++ b/devtools/client/inspector/fonts/fonts.js
@@ -368,17 +368,17 @@ class FontInspector {
    *
    * @return {Array}
    */
   getFontPropertyValueKeywords() {
     return [
       "font-size",
       "font-weight",
       "font-stretch",
-      "line-height"
+      "line-height",
     ].reduce((acc, property) => {
       return acc.concat(this.cssProperties.getValues(property));
     }, []);
   }
 
   async getFontsForNode(node, options) {
     // In case we've been destroyed in the meantime
     if (!this.document) {
@@ -837,17 +837,17 @@ class FontInspector {
     }
 
     const node = this.inspector.selection.nodeFront;
     const fonts = await this.getFontsForNode(node, options);
 
     try {
       // Get computed styles for the selected node, but filter by CSS font properties.
       this.nodeComputedStyle = await this.pageStyle.getComputed(node, {
-        filterProperties: FONT_PROPERTIES
+        filterProperties: FONT_PROPERTIES,
       });
     } catch (e) {
       // Because getComputed is async, there is a chance the font editor was
       // destroyed while we were waiting. If that happened, just bail out
       // silently.
       if (!this.document) {
         return;
       }
@@ -914,17 +914,17 @@ class FontInspector {
     }
 
     const { fontOptions } = this.store.getState();
     const { previewText } = fontOptions;
 
     const options = {
       includePreviews: true,
       previewText,
-      previewFillStyle: getColor("body-color")
+      previewFillStyle: getColor("body-color"),
     };
 
     // Add the includeVariations argument into the option to get font variation data.
     if (this.pageStyle.supportsFontVariations) {
       options.includeVariations = true;
     }
 
     const node = this.inspector.selection.nodeFront;
--- a/devtools/client/inspector/fonts/test/head.js
+++ b/devtools/client/inspector/fonts/test/head.js
@@ -51,17 +51,17 @@ var openFontInspectorForURL = async func
   // was being opened or not.
   await selectNode("body", inspector);
 
   return {
     tab,
     testActor,
     toolbox,
     inspector,
-    view: inspector.fontinspector
+    view: inspector.fontinspector,
   };
 };
 
 /**
  * Focus the preview input, clear it, type new text into it and wait for the
  * preview images to be updated.
  *
  * @param {FontInspector} view - The FontInspector instance.
@@ -228,17 +228,17 @@ function getFamilyName(fontEl) {
 function getPropertyValue(viewDoc, name) {
   const selector = `#font-editor .font-value-input[name=${name}]`;
   return {
     // Ensure value input exists before querying its value
     value: viewDoc.querySelector(selector) &&
            parseFloat(viewDoc.querySelector(selector).value),
     // Ensure unit dropdown exists before querying its value
     unit: viewDoc.querySelector(selector + ` ~ .font-value-select`) &&
-          viewDoc.querySelector(selector + ` ~ .font-value-select`).value
+          viewDoc.querySelector(selector + ` ~ .font-value-select`).value,
   };
 }
 
 /**
  * Given a font element, check whether its font source is remote.
  *
  * @param  {DOMNode} fontEl
  *         The font element.
--- a/devtools/client/inspector/fonts/types.js
+++ b/devtools/client/inspector/fonts/types.js
@@ -69,17 +69,17 @@ const font = exports.font = {
 
   // The URI of the font file
   URI: PropTypes.string,
 
   // The variation axes of the font
   variationAxes: PropTypes.arrayOf(PropTypes.shape(fontVariationAxis)),
 
   // The variation instances of the font
-  variationInstances: PropTypes.arrayOf(PropTypes.shape(fontVariationInstance))
+  variationInstances: PropTypes.arrayOf(PropTypes.shape(fontVariationInstance)),
 };
 
 exports.fontOptions = {
   // The current preview text
   previewText: PropTypes.string,
 };
 
 exports.fontEditor = {
--- a/devtools/client/inspector/fonts/utils/font-utils.js
+++ b/devtools/client/inspector/fonts/utils/font-utils.js
@@ -104,10 +104,10 @@ module.exports = {
    * @return {Number}
    */
   toFixed(number, decimals = 1) {
     if (typeof number !== "number") {
       return number;
     }
 
     return Math.floor(number * Math.pow(10, decimals)) / Math.pow(10, decimals);
-  }
+  },
 };
--- a/devtools/client/inspector/grids/components/GridOutline.js
+++ b/devtools/client/inspector/grids/components/GridOutline.js
@@ -107,17 +107,17 @@ class GridOutline extends PureComponent 
     }
 
     onShowGridOutlineHighlight(grids[id].nodeFront, {
       showGridArea: name,
       showGridCell: {
         gridFragmentIndex,
         rowNumber,
         columnNumber,
-      }
+      },
     });
   }
 
   /**
    * Returns the grid area name if the given grid cell is part of a grid area, otherwise
    * null.
    *
    * @param  {Number} columnNumber
@@ -162,17 +162,17 @@ class GridOutline extends PureComponent 
    * Displays a message text "Cannot show outline for this grid".
    */
   renderCannotShowOutlineText() {
     return (
       dom.div({ className: "grid-outline-text" },
         dom.span(
           {
             className: "grid-outline-text-icon",
-            title: getStr("layout.cannotShowGridOutline.title")
+            title: getStr("layout.cannotShowGridOutline.title"),
           }
         ),
         getStr("layout.cannotShowGridOutline")
       )
     );
   }
 
   /**
@@ -285,32 +285,32 @@ class GridOutline extends PureComponent 
   renderGridOutline(grid) {
     const { color } = grid;
 
     return (
       dom.g(
         {
           id: "grid-outline-group",
           className: "grid-outline-group",
-          style: { color }
+          style: { color },
         },
         this.renderGrid(grid)
       )
     );
   }
 
   renderGridOutlineBorder(borderWidth, borderHeight, color) {
     return (
       dom.rect({
         key: "border",
         className: "grid-outline-border",
         x: 0,
         y: 0,
         width: borderWidth,
-        height: borderHeight
+        height: borderHeight,
       })
     );
   }
 
   renderOutline() {
     const {
       height,
       selectedGrid,
--- a/devtools/client/inspector/grids/grid-inspector.js
+++ b/devtools/client/inspector/grids/grid-inspector.js
@@ -41,17 +41,17 @@ const GRID_COLORS = [
   "#12BC00",
   "#EA8000",
   "#00B0BD",
   "#D70022",
   "#4B42FF",
   "#B5007F",
   "#058B00",
   "#A47F00",
-  "#005A71"
+  "#005A71",
 ];
 
 class GridInspector {
   constructor(inspector, window) {
     this.document = window.document;
     this.inspector = inspector;
     this.store = inspector.store;
     this.telemetry = inspector.telemetry;
--- a/devtools/client/inspector/grids/reducers/highlighter-settings.js
+++ b/devtools/client/inspector/grids/reducers/highlighter-settings.js
@@ -4,17 +4,17 @@
 
 "use strict";
 
 const Services = require("Services");
 
 const {
   UPDATE_SHOW_GRID_AREAS,
   UPDATE_SHOW_GRID_LINE_NUMBERS,
-  UPDATE_SHOW_INFINITE_LINES
+  UPDATE_SHOW_INFINITE_LINES,
 } = require("../actions/index");
 
 const SHOW_GRID_AREAS = "devtools.gridinspector.showGridAreas";
 const SHOW_GRID_LINE_NUMBERS = "devtools.gridinspector.showGridLineNumbers";
 const SHOW_INFINITE_LINES = "devtools.gridinspector.showInfiniteLines";
 
 const INITIAL_HIGHLIGHTER_SETTINGS = () => {
   return {
--- a/devtools/client/inspector/grids/test/browser_grids_grid-outline-updates-on-grid-change.js
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-outline-updates-on-grid-change.js
@@ -45,17 +45,17 @@ add_task(async function() {
   is(elements.length, 2, "Grid outline is shown.");
 
   info("Changing the grid in the page");
   const onReflow = new Promise(resolve => {
     const listener = {
       callback: () => {
         inspector.reflowTracker.untrackReflows(listener, listener.callback);
         resolve();
-      }
+      },
     };
     inspector.reflowTracker.trackReflows(listener, listener.callback);
   });
   const onGridOutlineChanged = waitForDOM(doc, ".grid-outline-cell", 4);
 
   testActor.eval(`
     const div = document.createElement("div");
     div.textContent = "item 3";
--- a/devtools/client/inspector/grids/test/unit/test_compare_fragments_geometry.js
+++ b/devtools/client/inspector/grids/test/unit/test_compare_fragments_geometry.js
@@ -3,75 +3,75 @@
 
 "use strict";
 
 const { compareFragmentsGeometry } = require("devtools/client/inspector/grids/utils/utils");
 
 const TESTS = [{
   desc: "No fragments",
   grids: [[], []],
-  expected: true
+  expected: true,
 }, {
   desc: "Different number of fragments",
   grids: [
     [{}, {}, {}],
-    [{}, {}]
+    [{}, {}],
   ],
-  expected: false
+  expected: false,
 }, {
   desc: "Different number of columns",
   grids: [
     [{cols: {lines: [{}, {}]}, rows: {lines: []}}],
-    [{cols: {lines: [{}]}, rows: {lines: []}}]
+    [{cols: {lines: [{}]}, rows: {lines: []}}],
   ],
-  expected: false
+  expected: false,
 }, {
   desc: "Different number of rows",
   grids: [
     [{cols: {lines: [{}, {}]}, rows: {lines: [{}]}}],
-    [{cols: {lines: [{}, {}]}, rows: {lines: [{}, {}]}}]
+    [{cols: {lines: [{}, {}]}, rows: {lines: [{}, {}]}}],
   ],
-  expected: false
+  expected: false,
 }, {
   desc: "Different number of rows and columns",
   grids: [
     [{cols: {lines: [{}]}, rows: {lines: [{}]}}],
-    [{cols: {lines: [{}, {}]}, rows: {lines: [{}, {}]}}]
+    [{cols: {lines: [{}, {}]}, rows: {lines: [{}, {}]}}],
   ],
-  expected: false
+  expected: false,
 }, {
   desc: "Different column sizes",
   grids: [
     [{cols: {lines: [{start: 0}, {start: 500}]}, rows: {lines: []}}],
-    [{cols: {lines: [{start: 0}, {start: 1000}]}, rows: {lines: []}}]
+    [{cols: {lines: [{start: 0}, {start: 1000}]}, rows: {lines: []}}],
   ],
-  expected: false
+  expected: false,
 }, {
   desc: "Different row sizes",
   grids: [
     [{cols: {lines: [{start: 0}, {start: 500}]}, rows: {lines: [{start: -100}]}}],
-    [{cols: {lines: [{start: 0}, {start: 500}]}, rows: {lines: [{start: 0}]}}]
+    [{cols: {lines: [{start: 0}, {start: 500}]}, rows: {lines: [{start: 0}]}}],
   ],
-  expected: false
+  expected: false,
 }, {
   desc: "Different row and column sizes",
   grids: [
     [{cols: {lines: [{start: 0}, {start: 500}]}, rows: {lines: [{start: -100}]}}],
-    [{cols: {lines: [{start: 0}, {start: 505}]}, rows: {lines: [{start: 0}]}}]
+    [{cols: {lines: [{start: 0}, {start: 505}]}, rows: {lines: [{start: 0}]}}],
   ],
-  expected: false
+  expected: false,
 }, {
   desc: "Complete structure, same fragments",
   grids: [
     [{cols: {lines: [{start: 0}, {start: 100.3}, {start: 200.6}]},
       rows: {lines: [{start: 0}, {start: 1000}, {start: 2000}]}}],
     [{cols: {lines: [{start: 0}, {start: 100.3}, {start: 200.6}]},
-      rows: {lines: [{start: 0}, {start: 1000}, {start: 2000}]}}]
+      rows: {lines: [{start: 0}, {start: 1000}, {start: 2000}]}}],
   ],
-  expected: true
+  expected: true,
 }];
 
 function run_test() {
   for (const { desc, grids, expected } of TESTS) {
     if (desc) {
       info(desc);
     }
     equal(compareFragmentsGeometry(grids[0], grids[1]), expected);
--- a/devtools/client/inspector/inspector-search.js
+++ b/devtools/client/inspector/inspector-search.js
@@ -126,17 +126,17 @@ InspectorSearch.prototype = {
     }
   },
 
   _onClearSearch: function() {
     this.searchBox.classList.remove("devtools-style-searchbox-no-match");
     this.searchBox.value = "";
     this.searchClearButton.hidden = true;
     this.emit("search-cleared");
-  }
+  },
 };
 
 /**
  * Converts any input box on a page to a CSS selector search and suggestion box.
  *
  * Emits 'processing-done' event when it is done processing the current
  * keypress, search request or selection from the list, whether that led to a
  * search or not.
@@ -422,17 +422,17 @@ SelectorAutocompleter.prototype = {
       } else if (query.match(/[a-zA-Z]*\[[^\]]*\][^\]]*/)) {
         // for cases like '[foo].bar' and likewise
         const attrPart = query.substring(0, query.lastIndexOf("]") + 1);
         value = attrPart + value;
       }
 
       const item = {
         preLabel: query,
-        label: value
+        label: value,
       };
 
       // In case the query's state is tag and the item's state is id or class
       // adjust the preLabel
       if (popupState === this.States.TAG && state === this.States.CLASS) {
         item.preLabel = "." + item.preLabel;
       }
       if (popupState === this.States.TAG && state === this.States.ID) {
@@ -528,10 +528,10 @@ SelectorAutocompleter.prototype = {
           result.suggestions[0][0] === firstPart) {
         result.suggestions = [];
       }
 
       // Wait for the autocomplete-popup to fire its popup-opened event, to make sure
       // the autoSelect item has been selected.
       return this._showPopup(result.suggestions, state);
     });
-  }
+  },
 };
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -163,17 +163,17 @@ Inspector.prototype = {
    */
   async init() {
     // Localize all the nodes containing a data-localization attribute.
     localizeMarkup(this.panelDoc);
 
     await Promise.all([
       this._getCssProperties(),
       this._getPageStyle(),
-      this._getDefaultSelection()
+      this._getDefaultSelection(),
     ]);
 
     return this._deferredOpen();
   },
 
   get toolbox() {
     return this._toolbox;
   },
@@ -566,29 +566,29 @@ Inspector.prototype = {
       className: "inspector-sidebar-splitter",
       initialWidth: width,
       initialHeight: height,
       minSize: "10%",
       maxSize: "80%",
       splitterSize: 1,
       endPanelControl: true,
       startPanel: this.InspectorTabPanel({
-        id: "inspector-main-content"
+        id: "inspector-main-content",
       }),
       endPanel: this.InspectorSplitBox({
         initialWidth: splitSidebarWidth,
         minSize: 10,
         maxSize: "80%",
         splitterSize: this.is3PaneModeEnabled ? 1 : 0,
         endPanelControl: this.is3PaneModeEnabled,
         startPanel: this.InspectorTabPanel({
-          id: "inspector-rules-container"
+          id: "inspector-rules-container",
         }),
         endPanel: this.InspectorTabPanel({
-          id: "inspector-sidebar-container"
+          id: "inspector-sidebar-container",
         }),
         ref: splitbox => {
           this.sidebarSplitBox = splitbox;
         },
       }),
       vert: this.useLandscapeMode(),
       onControlledPanelResized: this.onSidebarResized,
     });
@@ -863,25 +863,25 @@ Inspector.prototype = {
     const sidebar = this.panelDoc.getElementById("inspector-sidebar");
     const options = {
       showAllTabsMenu: true,
       sidebarToggleButton: {
         collapsed: !this.is3PaneModeEnabled,
         collapsePaneTitle: INSPECTOR_L10N.getStr("inspector.hideThreePaneMode"),
         expandPaneTitle: INSPECTOR_L10N.getStr("inspector.showThreePaneMode"),
         onClick: this.onSidebarToggle,
-      }
+      },
     };
 
     this.sidebar = new ToolSidebar(sidebar, this, "inspector", options);
     this.sidebar.on("select", this.onSidebarSelect);
 
     const ruleSideBar = this.panelDoc.getElementById("inspector-rules-sidebar");
     this.ruleViewSideBar = new ToolSidebar(ruleSideBar, this, "inspector", {
-      hideTabstripe: true
+      hideTabstripe: true,
     });
 
     // defaultTab may also be an empty string or a tab id that doesn't exist anymore
     // (e.g. it was a tab registered by an addon that has been uninstalled).
     let defaultTab = Services.prefs.getCharPref("devtools.inspector.activeSidebar");
 
     if (this.is3PaneModeEnabled && defaultTab === "ruleview") {
       defaultTab = "layoutview";
@@ -896,27 +896,27 @@ Inspector.prototype = {
     const layoutId = "layoutview";
     const layoutTitle = INSPECTOR_L10N.getStr("inspector.sidebar.layoutViewTitle2");
     this.sidebar.queueTab(
       layoutId,
       layoutTitle,
       {
         props: {
           id: layoutId,
-          title: layoutTitle
+          title: layoutTitle,
         },
         panel: () => {
           if (!this.layoutview) {
             const LayoutView =
               this.browserRequire("devtools/client/inspector/layout/layout");
             this.layoutview = new LayoutView(this, this.panelWin);
           }
 
           return this.layoutview.provider;
-        }
+        },
       },
       defaultTab == layoutId);
 
     this.sidebar.queueExistingTab(
       "computedview",
       INSPECTOR_L10N.getStr("inspector.sidebar.computedViewTitle"),
       defaultTab == "computedview");
 
@@ -924,73 +924,73 @@ Inspector.prototype = {
     const animationTitle =
       INSPECTOR_L10N.getStr("inspector.sidebar.animationInspectorTitle");
     this.sidebar.queueTab(
       animationId,
       animationTitle,
       {
         props: {
           id: animationId,
-          title: animationTitle
+          title: animationTitle,
         },
         panel: () => {
           const AnimationInspector =
             this.browserRequire("devtools/client/inspector/animation/animation");
           this.animationinspector = new AnimationInspector(this, this.panelWin);
           return this.animationinspector.provider;
-        }
+        },
       },
       defaultTab == animationId);
 
     // Inject a lazy loaded react tab by exposing a fake React object
     // with a lazy defined Tab thanks to `panel` being a function
     const fontId = "fontinspector";
     const fontTitle = INSPECTOR_L10N.getStr("inspector.sidebar.fontInspectorTitle");
     this.sidebar.queueTab(
       fontId,
       fontTitle,
       {
         props: {
           id: fontId,
-          title: fontTitle
+          title: fontTitle,
         },
         panel: () => {
           if (!this.fontinspector) {
             const FontInspector =
               this.browserRequire("devtools/client/inspector/fonts/fonts");
             this.fontinspector = new FontInspector(this, this.panelWin);
           }
 
           return this.fontinspector.provider;
-        }
+        },
       },
       defaultTab == fontId);
 
     if (Services.prefs.getBoolPref(TRACK_CHANGES_PREF)) {
       // Inject a lazy loaded react tab by exposing a fake React object
       // with a lazy defined Tab thanks to `panel` being a function
       const changesId = "changesview";
       const changesTitle = INSPECTOR_L10N.getStr("inspector.sidebar.changesViewTitle");
       this.sidebar.queueTab(
         changesId,
         changesTitle,
         {
           props: {
             id: changesId,
-            title: changesTitle
+            title: changesTitle,
           },
           panel: () => {
             if (!this.changesView) {
               const ChangesView =
                 this.browserRequire("devtools/client/inspector/changes/ChangesView");
               this.changesView = new ChangesView(this, this.panelWin);
             }
 
             return this.changesView.provider;
-          }
+          },
         },
         defaultTab == changesId);
     }
 
     this.sidebar.addAllQueuedTabs();
 
     // Persist splitter state in preferences.
     this.sidebar.on("show", this.onSidebarShown);
@@ -1195,17 +1195,17 @@ Inspector.prototype = {
     }
 
     const onExpand = this.markup.expandNode(this.selection.nodeFront);
 
     // Restore the highlighter states prior to emitting "new-root".
     if (this._highlighters) {
       await Promise.all([
         this.highlighters.restoreFlexboxState(),
-        this.highlighters.restoreGridState()
+        this.highlighters.restoreGridState(),
       ]);
     }
 
     this.emit("new-root");
 
     // Wait for full expand of the selected node in order to ensure
     // the markup view is fully emitted before firing 'reloaded'.
     // 'reloaded' is used to know when the panel is fully updated
@@ -1236,17 +1236,17 @@ Inspector.prototype = {
    */
   set selectionCssSelector(cssSelector = null) {
     if (this._panelDestroyer) {
       return;
     }
 
     this._selectionCssSelector = {
       selector: cssSelector,
-      url: this._target.url
+      url: this._target.url,
     };
   },
 
   /**
    * Get the current selection unique css selector if any, that is, if a node
    * is actually selected and that node has been selected while on the same url
    */
   get selectionCssSelector() {
@@ -1498,17 +1498,17 @@ Inspector.prototype = {
     this.show3PaneTooltip = null;
     this.sidebar = null;
     this.store = null;
     this.telemetry = null;
 
     this._panelDestroyer = promise.all([
       markupDestroyer,
       sidebarDestroyer,
-      ruleViewSideBarDestroyer
+      ruleViewSideBarDestroyer,
     ]);
 
     return this._panelDestroyer;
   },
 
   /**
    * Returns the clipboard content if it is appropriate for pasting
    * into the current node's outer HTML, otherwise returns null.
@@ -1717,17 +1717,17 @@ Inspector.prototype = {
         !Services.prefs.getBoolPref("devtools.accessibility.enabled")) {
       return;
     }
 
     const showA11YPropsItem = new MenuItem({
       id: "node-menu-showaccessibilityproperties",
       label: INSPECTOR_L10N.getStr("inspectorShowAccessibilityProperties.label"),
       click: () => this.showAccessibilityProperties(),
-      disabled: true
+      disabled: true,
     });
     // Only attempt to determine if a11y props menu item needs to be enabled iff
     // AccessibilityFront is enabled.
     const accessibilityFront = this.target.getFront("accessibility");
     if (accessibilityFront.enabled) {
       this._updateA11YMenuItem(showA11YPropsItem);
     }
 
@@ -2334,17 +2334,17 @@ Inspector.prototype = {
     // will do that, calling `hide` for the highlighter only if previously shown.
     await this.highlighter.hideBoxModel();
 
     const clipboardEnabled = Services.prefs
       .getBoolPref("devtools.screenshot.clipboard.enabled");
     const args = {
       file: true,
       selector: this.selectionCssSelector,
-      clipboard: clipboardEnabled
+      clipboard: clipboardEnabled,
     };
     const screenshotFront = this.target.getFront("screenshot");
     const screenshot = await screenshotFront.capture(args);
     await saveScreenshot(this.panelWin, args, screenshot);
   },
 
   /**
    * Scroll the node into view.
--- a/devtools/client/inspector/layout/components/Accordion.js
+++ b/devtools/client/inspector/layout/components/Accordion.js
@@ -13,26 +13,26 @@ const { createElement, PureComponent } =
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 const { div, span } = dom;
 
 class Accordion extends PureComponent {
   static get propTypes() {
     return {
-      items: PropTypes.array
+      items: PropTypes.array,
     };
   }
 
   constructor(props) {
     super(props);
 
     this.state = {
       opened: props.items.map(item => item.opened),
-      created: []
+      created: [],
     };
 
     this.handleHeaderClick = this.handleHeaderClick.bind(this);
     this.renderContainer = this.renderContainer.bind(this);
   }
 
   handleHeaderClick(i, event) {
     const opened = [...this.state.opened];
@@ -72,17 +72,17 @@ class Accordion extends PureComponent {
           onClick: event => this.handleHeaderClick(i, event) },
         span({ className: arrowClassName }),
         item.header
       ),
 
       (created[i] || opened[i]) ?
         div(
           { className: "_content",
-            style: { display: opened[i] ? "block" : "none" }
+            style: { display: opened[i] ? "block" : "none" },
           },
           createElement(item.component, item.componentProps || {})
         ) :
         null
     );
   }
 
   render() {
--- a/devtools/client/inspector/layout/components/LayoutApp.js
+++ b/devtools/client/inspector/layout/components/LayoutApp.js
@@ -79,27 +79,27 @@ class LayoutApp extends PureComponent {
       {
         component: Grid,
         componentProps: this.props,
         header: LAYOUT_L10N.getStr("layout.header"),
         opened: Services.prefs.getBoolPref(GRID_OPENED_PREF),
         onToggled: () => {
           const opened = Services.prefs.getBoolPref(GRID_OPENED_PREF);
           Services.prefs.setBoolPref(GRID_OPENED_PREF, !opened);
-        }
+        },
       },
       {
         component: BoxModel,
         componentProps: this.props,
         header: BOXMODEL_L10N.getStr("boxmodel.title"),
         opened: Services.prefs.getBoolPref(BOXMODEL_OPENED_PREF),
         onToggled: () => {
           const opened = Services.prefs.getBoolPref(BOXMODEL_OPENED_PREF);
           Services.prefs.setBoolPref(BOXMODEL_OPENED_PREF, !opened);
-        }
+        },
       },
     ];
 
     if (Services.prefs.getBoolPref(FLEXBOX_ENABLED_PREF)) {
       // Since the flexbox panel is hidden behind a pref. We insert the flexbox container
       // to the first index of the accordion item list.
       items.splice(0, 0, {
         component: Flexbox,
@@ -107,17 +107,17 @@ class LayoutApp extends PureComponent {
           ...this.props,
           flexContainer: this.props.flexbox.flexContainer,
         },
         header: this.getFlexboxHeader(this.props.flexbox.flexContainer),
         opened: Services.prefs.getBoolPref(FLEXBOX_OPENED_PREF),
         onToggled: () => {
           const opened =  Services.prefs.getBoolPref(FLEXBOX_OPENED_PREF);
           Services.prefs.setBoolPref(FLEXBOX_OPENED_PREF, !opened);
-        }
+        },
       });
 
       // If the current selected node is both a flex container and flex item. Render
       // an accordion with another Flexbox component where the flexbox to show is the
       // parent flex container of the current selected node.
       if (this.props.flexbox.flexItemContainer &&
           this.props.flexbox.flexItemContainer.actorID) {
         // Insert the parent flex container to the first index of the accordion item
@@ -128,17 +128,17 @@ class LayoutApp extends PureComponent {
             ...this.props,
             flexContainer: this.props.flexbox.flexItemContainer,
           },
           header: this.getFlexboxHeader(this.props.flexbox.flexItemContainer),
           opened: Services.prefs.getBoolPref(FLEXBOX_OPENED_PREF),
           onToggled: () => {
             const opened =  Services.prefs.getBoolPref(FLEXBOX_OPENED_PREF);
             Services.prefs.setBoolPref(FLEXBOX_OPENED_PREF, !opened);
-          }
+          },
         });
       }
     }
 
     return (
       dom.div({ className: "layout-container" },
         Accordion({ items })
       )
--- a/devtools/client/inspector/markup/markup.js
+++ b/devtools/client/inspector/markup/markup.js
@@ -639,17 +639,17 @@ MarkupView.prototype = {
    * highlighted.
    */
   _shouldNewSelectionBeHighlighted: function() {
     const reason = this.inspector.selection.reason;
     const unwantedReasons = [
       "inspector-open",
       "navigateaway",
       "nodeselected",
-      "test"
+      "test",
     ];
 
     const isHighlight = this._isContainerSelected(this._hoveredContainer);
     return !isHighlight && reason && !unwantedReasons.includes(reason);
   },
 
   /**
    * React to new-node-front selection events.
@@ -712,17 +712,17 @@ MarkupView.prototype = {
     const reasonsToNavigate = [
       // If the user picked an element with the element picker.
       "picker-node-picked",
       // If the user shift-clicked (previewed) an element.
       "picker-node-previewed",
       // If the user selected an element with the browser context menu.
       "browser-context-menu",
       // If the user added a new node by clicking in the inspector toolbar.
-      "node-inserted"
+      "node-inserted",
     ];
 
     // If the user performed an action with a keyboard, move keyboard focus to
     // the markup tree container.
     if (reason && reason.endsWith("-keyboard")) {
       this.getContainer(this._rootNode).elt.focus();
     }
 
@@ -1573,17 +1573,17 @@ MarkupView.prototype = {
         if (commit) {
           this.updateNodeOuterHTML(node, value, oldValue);
         }
 
         const end = this.telemetry.msSystemNow();
         this.telemetry.recordEvent("edit_html", "inspector", null, {
           "made_changes": commit,
           "time_open": end - start,
-          "session_id": this.toolbox.sessionId
+          "session_id": this.toolbox.sessionId,
         });
       });
 
       this.emit("begin-editing");
     });
   },
 
   /**
@@ -1885,17 +1885,17 @@ MarkupView.prototype = {
   _getVisibleChildren: function(container, centered) {
     let maxChildren = container.maxChildren || this.maxChildren;
     if (maxChildren == -1) {
       maxChildren = undefined;
     }
 
     return this.walker.children(container.node, {
       maxNodes: maxChildren,
-      center: centered
+      center: centered,
     });
   },
 
   /**
    * The parent of a given node as rendered in the markup view is not necessarily
    * node.parentNode(). For instance, shadow roots don't have a parentNode, but a host
    * element. However they are represented as parent and children in the markup view.
    *
@@ -2062,17 +2062,17 @@ MarkupView.prototype = {
       nextSibling = null;
     }
 
     if (parent.nodeType !== nodeConstants.ELEMENT_NODE) {
       return null;
     }
 
     return {parent, nextSibling};
-  }
+  },
 };
 
 /**
  * Map a number from one range to another.
  */
 function map(value, oldMin, oldMax, newMin, newMax) {
   const ratio = oldMax - oldMin;
   if (ratio == 0) {
--- a/devtools/client/inspector/markup/test/browser_markup_accessibility_navigation.js
+++ b/devtools/client/inspector/markup/test/browser_markup_accessibility_navigation.js
@@ -25,221 +25,221 @@ loadHelperScript("helper_markup_accessib
  */
 const TESTS = [
   {
     desc: "Collapse body container",
     focused: "root.elt",
     activedescendant: "body.tagLine",
     key: "VK_LEFT",
     options: { },
-    waitFor: "collapsed"
+    waitFor: "collapsed",
   },
   {
     desc: "Expand body container",
     focused: "root.elt",
     activedescendant: "body.tagLine",
     key: "VK_RIGHT",
     options: { },
-    waitFor: "expanded"
+    waitFor: "expanded",
   },
   {
     desc: "Select header container",
     focused: "root.elt",
     activedescendant: "header.tagLine",
     key: "VK_DOWN",
     options: { },
-    waitFor: "inspector-updated"
+    waitFor: "inspector-updated",
   },
   {
     desc: "Expand header container",
     focused: "root.elt",
     activedescendant: "header.tagLine",
     key: "VK_RIGHT",
     options: { },
-    waitFor: "expanded"
+    waitFor: "expanded",
   },
   {
     desc: "Select text container",
     focused: "root.elt",
     activedescendant: "container-0.tagLine",
     key: "VK_DOWN",
     options: { },
-    waitFor: "inspector-updated"
+    waitFor: "inspector-updated",
   },
   {
     desc: "Select header container again",
     focused: "root.elt",
     activedescendant: "header.tagLine",
     key: "VK_UP",
     options: { },
-    waitFor: "inspector-updated"
+    waitFor: "inspector-updated",
   },
   {
     desc: "Collapse header container",
     focused: "root.elt",
     activedescendant: "header.tagLine",
     key: "VK_LEFT",
     options: { },
-    waitFor: "collapsed"
+    waitFor: "collapsed",
   },
   {
     desc: "Focus on header container tag",
     focused: "header.focusableElms.0",
     activedescendant: "header.tagLine",
     key: "VK_RETURN",
-    options: { }
+    options: { },
   },
   {
     desc: "Remove focus from header container tag",
     focused: "root.elt",
     activedescendant: "header.tagLine",
     key: "VK_ESCAPE",
-    options: { }
+    options: { },
   },
   {
     desc: "Focus on header container tag again",
     focused: "header.focusableElms.0",
     activedescendant: "header.tagLine",
     key: "VK_SPACE",
-    options: { }
+    options: { },
   },
   {
     desc: "Focus on header id attribute",
     focused: "header.focusableElms.1",
     activedescendant: "header.tagLine",
     key: "VK_TAB",
-    options: { }
+    options: { },
   },
   {
     desc: "Focus on header class attribute",
     focused: "header.focusableElms.2",
     activedescendant: "header.tagLine",
     key: "VK_TAB",
-    options: { }
+    options: { },
   },
   {
     desc: "Focus on header new attribute",
     focused: "header.focusableElms.3",
     activedescendant: "header.tagLine",
     key: "VK_TAB",
-    options: { }
+    options: { },
   },
   {
     desc: "Circle back and focus on header tag again",
     focused: "header.focusableElms.0",
     activedescendant: "header.tagLine",
     key: "VK_TAB",
-    options: { }
+    options: { },
   },
   {
     desc: "Circle back and focus on header new attribute again",
     focused: "header.focusableElms.3",
     activedescendant: "header.tagLine",
     key: "VK_TAB",
-    options: { shiftKey: true }
+    options: { shiftKey: true },
   },
   {
     desc: "Tab back and focus on header class attribute",
     focused: "header.focusableElms.2",
     activedescendant: "header.tagLine",
     key: "VK_TAB",
-    options: { shiftKey: true }
+    options: { shiftKey: true },
   },
   {
     desc: "Tab back and focus on header id attribute",
     focused: "header.focusableElms.1",
     activedescendant: "header.tagLine",
     key: "VK_TAB",
-    options: { shiftKey: true }
+    options: { shiftKey: true },
   },
   {
     desc: "Tab back and focus on header tag",
     focused: "header.focusableElms.0",
     activedescendant: "header.tagLine",
     key: "VK_TAB",
-    options: { shiftKey: true }
+    options: { shiftKey: true },
   },
   {
     desc: "Expand header container, ensure that focus is still on header tag",
     focused: "header.focusableElms.0",
     activedescendant: "header.tagLine",
     key: "VK_RIGHT",
     options: { },
-    waitFor: "expanded"
+    waitFor: "expanded",
   },
   {
     desc: "Activate header tag editor",
     focused: "header.editor.tag.inplaceEditor.input",
     activedescendant: "header.tagLine",
     key: "VK_RETURN",
-    options: { }
+    options: { },
   },
   {
     desc: "Activate header id attribute editor",
     focused: "header.editor.attrList.children.0.children.1.inplaceEditor.input",
     activedescendant: "header.tagLine",
     key: "VK_TAB",
-    options: { }
+    options: { },
   },
   {
     desc: "Deselect text in header id attribute editor",
     focused: "header.editor.attrList.children.0.children.1.inplaceEditor.input",
     activedescendant: "header.tagLine",
     key: "VK_TAB",
-    options: { }
+    options: { },
   },
   {
     desc: "Activate header class attribute editor",
     focused: "header.editor.attrList.children.1.children.1.inplaceEditor.input",
     activedescendant: "header.tagLine",
     key: "VK_TAB",
-    options: { }
+    options: { },
   },
   {
     desc: "Deselect text in header class attribute editor",
     focused: "header.editor.attrList.children.1.children.1.inplaceEditor.input",
     activedescendant: "header.tagLine",
     key: "VK_TAB",
-    options: { }
+    options: { },
   },
   {
     desc: "Activate header new attribute editor",
     focused: "header.editor.newAttr.inplaceEditor.input",
     activedescendant: "header.tagLine",
     key: "VK_TAB",
-    options: { }
+    options: { },
   },
   {
     desc: "Circle back and activate header tag editor again",
     focused: "header.editor.tag.inplaceEditor.input",
     activedescendant: "header.tagLine",
     key: "VK_TAB",
-    options: { }
+    options: { },
   },
   {
     desc: "Circle back and activate header new attribute editor again",
     focused: "header.editor.newAttr.inplaceEditor.input",
     activedescendant: "header.tagLine",
     key: "VK_TAB",
-    options: { shiftKey: true }
+    options: { shiftKey: true },
   },
   {
     desc: "Exit edit mode and keep focus on header new attribute",
     focused: "header.focusableElms.3",
     activedescendant: "header.tagLine",
     key: "VK_ESCAPE",
-    options: { }
+    options: { },
   },
   {
     desc: "Move the selection to body and reset focus to container tree",
     focused: "docBody",
     activedescendant: "body.tagLine",
     key: "VK_UP",
     options: { },
-    waitFor: "inspector-updated"
+    waitFor: "inspector-updated",
   },
 ];
 
 let containerID = 0;
 let elms = {};
 
 add_task(async function() {
   const { inspector } = await openInspectorForURL(`data:text/html;charset=utf-8,
--- a/devtools/client/inspector/markup/test/browser_markup_accessibility_navigation_after_edit.js
+++ b/devtools/client/inspector/markup/test/browser_markup_accessibility_navigation_after_edit.js
@@ -27,81 +27,81 @@ const TEST_URI = '<div id="some-id" clas
  */
 const TESTS = [
   {
     desc: "Select header container",
     focused: "root.elt",
     activedescendant: "div.tagLine",
     key: "VK_DOWN",
     options: { },
-    waitFor: "inspector-updated"
+    waitFor: "inspector-updated",
   },
   {
     desc: "Focus on header tag",
     focused: "div.focusableElms.0",
     activedescendant: "div.tagLine",
     key: "VK_RETURN",
-    options: { }
+    options: { },
   },
   {
     desc: "Activate header tag editor",
     focused: "div.editor.tag.inplaceEditor.input",
     activedescendant: "div.tagLine",
     key: "VK_RETURN",
-    options: { }
+    options: { },
   },
   {
     desc: "Activate header id attribute editor",
     focused: "div.editor.attrList.children.0.children.1.inplaceEditor.input",
     activedescendant: "div.tagLine",
     key: "VK_TAB",
-    options: { }
+    options: { },
   },
   {
     desc: "Deselect text in header id attribute editor",
     focused: "div.editor.attrList.children.0.children.1.inplaceEditor.input",
     activedescendant: "div.tagLine",
     key: "VK_TAB",
-    options: { }
+    options: { },
   },
   {
     desc: "Move the cursor to the left",
     focused: "div.editor.attrList.children.0.children.1.inplaceEditor.input",
     activedescendant: "div.tagLine",
     key: "VK_LEFT",
-    options: { }
+    options: { },
   },
   {
     desc: "Modify the attribute",
     focused: "div.editor.attrList.children.0.children.1.inplaceEditor.input",
     activedescendant: "div.tagLine",
     key: "A",
-    options: { }
+    options: { },
   },
   {
     desc: "Commit the attribute change",
     focused: "div.focusableElms.1",
     activedescendant: "div.tagLine",
     key: "VK_RETURN",
     options: { },
-    waitFor: "inspector-updated"
+    waitFor: "inspector-updated",
   },
   {
     desc: "Tab and focus on header class attribute",
     focused: "div.focusableElms.2",
     activedescendant: "div.tagLine",
     key: "VK_TAB",
-    options: { }
+    options: { },
   },
   {
     desc: "Tab and focus on header new attribute node",
     focused: "div.focusableElms.3",
     activedescendant: "div.tagLine",
     key: "VK_TAB",
-    options: { }
+    options: { },
   },
 ];
 
 let elms = {};
 
 add_task(async function() {
   const url = `data:text/html;charset=utf-8,${TEST_URI}`;
   const { inspector } = await openInspectorForURL(url);
--- a/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_01.js
@@ -61,16 +61,16 @@ const TEST_DATA = [
   ["VK_RIGHT", "style=\"display:  inherit; color :chartreuse ", 43, 43, false],
   [" ", "style=\"display:  inherit; color :chartreuse aliceblue ",
    44, 53, true],
   ["!", "style=\"display:  inherit; color :chartreuse !important; ",
    45, 55, false],
   ["VK_RIGHT", "style=\"display:  inherit; color :chartreuse !important; ",
    55, 55, false],
   ["VK_RETURN", "style=\"display:  inherit; color :chartreuse !important;\"",
-   -1, -1, false]
+   -1, -1, false],
 ];
 
 add_task(async function() {
   const {inspector} = await openInspectorForURL(TEST_URL);
 
   await runStyleAttributeAutocompleteTests(inspector, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_02.js
@@ -35,17 +35,17 @@ const TEST_DATA_DOUBLE = [
   ["VK_RIGHT", "style=\"color:beige", 18, 18, false],
   ["\"", "style=\"color:beige\"", 19, 19, false],
   [" ", "style=\"color:beige\" ", 20, 20, false],
   ["d", "style=\"color:beige\" d", 21, 21, false],
   ["a", "style=\"color:beige\" da", 22, 22, false],
   ["t", "style=\"color:beige\" dat", 23, 23, false],
   ["a", "style=\"color:beige\" data", 24, 24, false],
   ["VK_RETURN", "style=\"color:beige\"",
-   -1, -1, false]
+   -1, -1, false],
 ];
 
 // Check that single quote attribute is also supported
 const TEST_DATA_SINGLE = [
   ["s", "s", 1, 1, false],
   ["t", "st", 2, 2, false],
   ["y", "sty", 3, 3, false],
   ["l", "styl", 4, 4, false],
@@ -59,17 +59,17 @@ const TEST_DATA_SINGLE = [
   ["VK_RIGHT", "style='color:beige", 18, 18, false],
   ["'", "style='color:beige'", 19, 19, false],
   [" ", "style='color:beige' ", 20, 20, false],
   ["d", "style='color:beige' d", 21, 21, false],
   ["a", "style='color:beige' da", 22, 22, false],
   ["t", "style='color:beige' dat", 23, 23, false],
   ["a", "style='color:beige' data", 24, 24, false],
   ["VK_RETURN", "style=\"color:beige\"",
-   -1, -1, false]
+   -1, -1, false],
 ];
 
 // Check that autocompletion is still enabled after using url('1)
 const TEST_DATA_INNER = [
   ["s", "s", 1, 1, false],
   ["t", "st", 2, 2, false],
   ["y", "sty", 3, 3, false],
   ["l", "styl", 4, 4, false],
@@ -89,17 +89,17 @@ const TEST_DATA_INNER = [
   ["'", "style=\"background:url('1')", 25, 25, false],
   [")", "style=\"background:url('1')", 26, 26, false],
   [";", "style=\"background:url('1');", 27, 27, false],
   [" ", "style=\"background:url('1'); ", 28, 28, false],
   ["c", "style=\"background:url('1'); color", 29, 33, true],
   ["VK_RIGHT", "style=\"background:url('1'); color", 33, 33, false],
   [":", "style=\"background:url('1'); color:aliceblue", 34, 43, true],
   ["b", "style=\"background:url('1'); color:beige", 35, 39, true],
-  ["VK_RETURN", "style=\"background:url('1'); color:beige\"", -1, -1, false]
+  ["VK_RETURN", "style=\"background:url('1'); color:beige\"", -1, -1, false],
 ];
 
 add_task(async function() {
   const {inspector} = await openInspectorForURL(TEST_URL);
 
   await runStyleAttributeAutocompleteTests(inspector, TEST_DATA_DOUBLE);
   await runStyleAttributeAutocompleteTests(inspector, TEST_DATA_SINGLE);
   await runStyleAttributeAutocompleteTests(inspector, TEST_DATA_INNER);
--- a/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_03.js
+++ b/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_03.js
@@ -39,16 +39,16 @@ const TEST_DATA = [
   [";", "style=\"color:beige;\"", 19, 19, false],
   [";", "style=\"color:beige;;\"", 20, 20, false],
   ["VK_LEFT", "style=\"color:beige;;\"", 19, 19, false],
   ["p", "style=\"color:beige;padding;\"", 20, 26, true],
   ["VK_RIGHT", "style=\"color:beige;padding;\"", 26, 26, false],
   [":", "style=\"color:beige;padding:inherit;\"", 27, 34, true],
   ["0", "style=\"color:beige;padding:0;\"", 28, 28, false],
   ["VK_RETURN", "style=\"color:beige;padding:0;\"",
-   -1, -1, false]
+   -1, -1, false],
 ];
 
 add_task(async function() {
   const {inspector} = await openInspectorForURL(TEST_URL);
 
   await runStyleAttributeAutocompleteTests(inspector, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_display_node_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_display_node_02.js
@@ -28,78 +28,78 @@ const TEST_URI = `
 `;
 
 const TEST_DATA = [
   {
     desc: "Hiding the #grid display node by changing its style property",
     selector: "#grid",
     before: {
       textContent: "grid",
-      visible: true
+      visible: true,
     },
     changeStyle: async function(testActor) {
       await testActor.eval(`
         let node = document.getElementById("grid");
         node.style.display = "block";
       `);
     },
     after: {
-      visible: false
-    }
+      visible: false,
+    },
   },
   {
     desc: "Reusing the 'grid' node, updating the display to 'grid again",
     selector: "#grid",
     before: {
-      visible: false
+      visible: false,
     },
     changeStyle: async function(testActor) {
       await testActor.eval(`
         let node = document.getElementById("grid");
         node.style.display = "grid";
       `);
     },
     after: {
       textContent: "grid",
-      visible: true
-    }
+      visible: true,
+    },
   },
   {
     desc: "Showing a 'grid' node by changing its style property",
     selector: "#block",
     before: {
-      visible: false
+      visible: false,
     },
     changeStyle: async function(testActor) {
       await testActor.eval(`
         let node = document.getElementById("block");
         node.style.display = "grid";
       `);
     },
     after: {
       textContent: "grid",
-      visible: true
-    }
+      visible: true,
+    },
   },
   {
     desc: "Showing a 'flex' node by removing its hidden attribute",
     selector: "#flex",
     before: {
-      visible: false
+      visible: false,
     },
     changeStyle: async function(testActor) {
       await testActor.eval(`
         document.getElementById("flex").removeAttribute("hidden");
       `);
     },
     after: {
       textContent: "flex",
-      visible: true
-    }
-  }
+      visible: true,
+    },
+  },
 ];
 
 add_task(async function() {
   const {inspector, testActor} = await openInspectorForURL(
     "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
 
   for (const data of TEST_DATA) {
     info("Running test case: " + data.desc);
--- a/devtools/client/inspector/markup/test/browser_markup_dragdrop_autoscroll_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_autoscroll_01.js
@@ -21,28 +21,28 @@ add_task(async function() {
   info("Pretend the markup-view is dragging");
   markup.isDragging = true;
 
   info("Simulate a mousemove on the view, at the bottom, and expect scrolling");
 
   markup._onMouseMove({
     preventDefault: () => {},
     target: markup.doc.body,
-    pageY: viewHeight + markup.doc.defaultView.scrollY
+    pageY: viewHeight + markup.doc.defaultView.scrollY,
   });
 
   const bottomScrollPos = await waitForScrollStop(markup.doc);
   ok(bottomScrollPos > 0, "The view was scrolled down");
 
   info("Simulate a mousemove at the top and expect more scrolling");
 
   markup._onMouseMove({
     preventDefault: () => {},
     target: markup.doc.body,
-    pageY: markup.doc.defaultView.scrollY
+    pageY: markup.doc.defaultView.scrollY,
   });
 
   const topScrollPos = await waitForScrollStop(markup.doc);
   ok(topScrollPos < bottomScrollPos, "The view was scrolled up");
   is(topScrollPos, 0, "The view was scrolled up to the top");
 
   info("Simulate a mouseup to stop dragging");
   markup._onMouseUp();
--- a/devtools/client/inspector/markup/test/browser_markup_dragdrop_autoscroll_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_autoscroll_02.js
@@ -20,27 +20,27 @@ add_task(async function() {
   info("Pretend the markup-view is dragging");
   markup.isDragging = true;
 
   info("Simulate a mousemove on the view, at the bottom, and expect scrolling");
 
   markup._onMouseMove({
     preventDefault: () => {},
     target: markup.doc.body,
-    pageY: viewHeight + markup.doc.defaultView.scrollY
+    pageY: viewHeight + markup.doc.defaultView.scrollY,
   });
 
   const bottomScrollPos = await waitForScrollStop(markup.doc);
   ok(bottomScrollPos > 0, "The view was scrolled down");
   info("Simulate a mousemove at the top and expect more scrolling");
 
   markup._onMouseMove({
     preventDefault: () => {},
     target: markup.doc.body,
-    pageY: markup.doc.defaultView.scrollY
+    pageY: markup.doc.defaultView.scrollY,
   });
 
   const topScrollPos = await waitForScrollStop(markup.doc);
   ok(topScrollPos < bottomScrollPos, "The view was scrolled up");
   is(topScrollPos, 0, "The view was scrolled up to the top");
 
   info("Simulate a mouseup to stop dragging");
   markup._onMouseUp();
--- a/devtools/client/inspector/markup/test/browser_markup_dragdrop_draggable.js
+++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_draggable.js
@@ -23,27 +23,27 @@ const TEST_DATA = [
   { node: "div", draggable: true },
   {
     node: async function(inspector) {
       const parentFront = await getNodeFront("#before", inspector);
       const {nodes} = await inspector.walker.children(parentFront);
       // Getting the comment node.
       return getContainerForNodeFront(nodes[1], inspector);
     },
-    draggable: true
+    draggable: true,
   },
   {
     node: async function(inspector) {
       const parentFront = await getNodeFront("#test", inspector);
       const {nodes} = await inspector.walker.children(parentFront);
       // Getting the ::before pseudo element.
       return getContainerForNodeFront(nodes[0], inspector);
     },
-    draggable: false
-  }
+    draggable: false,
+  },
 ];
 
 add_task(async function() {
   const {inspector} = await openInspectorForURL(TEST_URL);
   await inspector.markup.expandAll();
 
   for (const {node, draggable} of TEST_DATA) {
     let container;
--- a/devtools/client/inspector/markup/test/browser_markup_events_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_01.js
@@ -16,138 +16,138 @@ const TEST_DATA = [ // eslint-disable-li
   {
     selector: "html",
     expected: [
       {
         type: "load",
         filename: TEST_URL,
         attributes: [
           "Bubbling",
-          "DOM0"
+          "DOM0",
         ],
         handler: "function onload(event) {\n" +
                  "  init();\n" +
-                 "}"
-      }
-    ]
+                 "}",
+      },
+    ],
   },
   {
     selector: "#container",
     expected: [
       {
         type: "mouseover",
         filename: TEST_URL + ":45",
         attributes: [
           "Capturing",
-          "DOM2"
+          "DOM2",
         ],
         handler: "function mouseoverHandler(event) {\n" +
                  "  if (event.target.id !== \"container\") {\n" +
                  "    let output = document.getElementById(\"output\");\n" +
                  "    output.textContent = event.target.textContent;\n" +
                  "  }\n" +
-                 "}"
-      }
-    ]
+                 "}",
+      },
+    ],
   },
   {
     selector: "#multiple",
     expected: [
       {
         type: "click",
         filename: TEST_URL + ":52",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "function clickHandler(event) {\n" +
                  "  let output = document.getElementById(\"output\");\n" +
                  "  output.textContent = \"click\";\n" +
-                 "}"
+                 "}",
       },
       {
         type: "mouseup",
         filename: TEST_URL + ":57",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "function mouseupHandler(event) {\n" +
                  "  let output = document.getElementById(\"output\");\n" +
                  "  output.textContent = \"mouseup\";\n" +
-                 "}"
-      }
-    ]
+                 "}",
+      },
+    ],
   },
   // #noevents tests check that dynamically added events are properly displayed
   // in the markupview
   {
     selector: "#noevents",
-    expected: []
+    expected: [],
   },
   {
     selector: "#noevents",
     beforeTest: async function(inspector, testActor) {
       const nodeMutated = inspector.once("markupmutation");
       await testActor.eval("window.wrappedJSObject.addNoeventsClickHandler();");
       await nodeMutated;
     },
     expected: [
       {
         type: "click",
         filename: TEST_URL + ":72",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "function noeventsClickHandler(event) {\n" +
                  "  alert(\"noevents has an event listener\");\n" +
-                 "}"
-      }
-    ]
+                 "}",
+      },
+    ],
   },
   {
     selector: "#noevents",
     beforeTest: async function(inspector, testActor) {
       const nodeMutated = inspector.once("markupmutation");
       await testActor.eval(
         "window.wrappedJSObject.removeNoeventsClickHandler();");
       await nodeMutated;
     },
-    expected: []
+    expected: [],
   },
   {
     selector: "#DOM0",
     expected: [
       {
         type: "click",
         filename: TEST_URL,
         attributes: [
           "Bubbling",
-          "DOM0"
+          "DOM0",
         ],
         handler: "function onclick(event) {\n" +
                  "  alert('DOM0')\n" +
-                 "}"
-      }
-    ]
+                 "}",
+      },
+    ],
   },
   {
     selector: "#handleevent",
     expected: [
       {
         type: "click",
         filename: TEST_URL + ":67",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "function(blah) {\n" +
                  "  alert(\"handleEvent\");\n" +
-                 "}"
-      }
-    ]
-  }
+                 "}",
+      },
+    ],
+  },
 ];
 
 add_task(async function() {
   await runEventPopupTests(TEST_URL, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_events_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_02.js
@@ -16,148 +16,148 @@ const TEST_DATA = [ // eslint-disable-li
   {
     selector: "#fatarrow",
     expected: [
       {
         type: "click",
         filename: TEST_URL + ":39",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "() => {\n" +
                  "  alert(\"Fat arrow without params!\");\n" +
-                 "}"
+                 "}",
       },
       {
         type: "click",
         filename: TEST_URL + ":43",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "event => {\n" +
                  "  alert(\"Fat arrow with 1 param!\");\n" +
-                 "}"
+                 "}",
       },
       {
         type: "click",
         filename: TEST_URL + ":47",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "(event, foo, bar) => {\n" +
                  "  alert(\"Fat arrow with 3 params!\");\n" +
-                 "}"
+                 "}",
       },
       {
         type: "click",
         filename: TEST_URL + ":51",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
-        handler: "b => b"
-      }
-    ]
+        handler: "b => b",
+      },
+    ],
   },
   {
     selector: "#bound",
     expected: [
       {
         type: "click",
         filename: TEST_URL + ":62",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "function(event) {\n" +
                  "  alert(\"Bound event\");\n" +
-                 "}"
-      }
-    ]
+                 "}",
+      },
+    ],
   },
   {
     selector: "#boundhe",
     expected: [
       {
         type: "click",
         filename: TEST_URL + ":85",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "function() {\n" +
                  "  alert(\"boundHandleEvent\");\n" +
-                 "}"
-      }
-    ]
+                 "}",
+      },
+    ],
   },
   {
     selector: "#comment-inline",
     expected: [
       {
         type: "click",
         filename: TEST_URL + ":91",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "function functionProceededByInlineComment() {\n" +
                  "  alert(\"comment-inline\");\n" +
-                 "}"
-      }
-    ]
+                 "}",
+      },
+    ],
   },
   {
     selector: "#comment-streaming",
     expected: [
       {
         type: "click",
         filename: TEST_URL + ":96",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "function functionProceededByStreamingComment() {\n" +
                  "  alert(\"comment-streaming\");\n" +
-                 "}"
-      }
-    ]
+                 "}",
+      },
+    ],
   },
   {
     selector: "#anon-object-method",
     expected: [
       {
         type: "click",
         filename: TEST_URL + ":71",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "function() {\n" +
                  "  alert(\"obj.anonObjectMethod\");\n" +
-                 "}"
-      }
-    ]
+                 "}",
+      },
+    ],
   },
   {
     selector: "#object-method",
     expected: [
       {
         type: "click",
         filename: TEST_URL + ":75",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "function kay() {\n" +
                  "  alert(\"obj.objectMethod\");\n" +
-                 "}"
-      }
-    ]
-  }
+                 "}",
+      },
+    ],
+  },
 ];
 
 add_task(async function() {
   await runEventPopupTests(TEST_URL, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_events_03.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_03.js
@@ -16,101 +16,101 @@ const TEST_DATA = [ // eslint-disable-li
   {
     selector: "#es6-method",
     expected: [
       {
         type: "click",
         filename: TEST_URL + ":66",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "es6Method(foo, bar) {\n" +
                  "  alert(\"obj.es6Method\");\n" +
-                 "}"
-      }
-    ]
+                 "}",
+      },
+    ],
   },
   {
     selector: "#generator",
     expected: [
       {
         type: "click",
         filename: TEST_URL + ":85",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "function* generator() {\n" +
                  "  alert(\"generator\");\n" +
-                 "}"
-      }
-    ]
+                 "}",
+      },
+    ],
   },
   {
     selector: "#anon-generator",
     expected: [
       {
         type: "click",
         filename: TEST_URL + ":43",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "function*() {\n" +
                  "  alert(\"anonGenerator\");\n" +
-                 "}"
-      }
-    ]
+                 "}",
+      },
+    ],
   },
   {
     selector: "#named-function-expression",
     expected: [
       {
         type: "click",
         filename: TEST_URL + ":20",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "function foo() {\n" +
                  "  alert(\"namedFunctionExpression\");\n" +
-                 "}"
-      }
-    ]
+                 "}",
+      },
+    ],
   },
   {
     selector: "#anon-function-expression",
     expected: [
       {
         type: "click",
         filename: TEST_URL + ":24",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "function() {\n" +
                  "  alert(\"anonFunctionExpression\");\n" +
-                 "}"
-      }
-    ]
+                 "}",
+      },
+    ],
   },
   {
     selector: "#returned-function",
     expected: [
       {
         type: "click",
         filename: TEST_URL + ":29",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "function bar() {\n" +
                  "  alert(\"returnedFunction\");\n" +
-                 "}"
-      }
-    ]
+                 "}",
+      },
+    ],
   },
 ];
 
 add_task(async function() {
   await runEventPopupTests(TEST_URL, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_events_04.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_04.js
@@ -16,142 +16,142 @@ const TEST_DATA = [ // eslint-disable-li
   {
     selector: "html",
     expected: [
       {
         type: "click",
         filename: TEST_URL + ":56",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "function(foo2, bar2) {\n" +
                  "  alert(\"documentElement event listener clicked\");\n" +
-                 "}"
+                 "}",
       },
       {
         type: "click",
         filename: TEST_URL + ":52",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "function(foo, bar) {\n" +
                  "  alert(\"document event listener clicked\");\n" +
-                 "}"
+                 "}",
       },
       {
         type: "load",
         filename: TEST_URL,
         attributes: [
           "Bubbling",
-          "DOM0"
+          "DOM0",
         ],
         handler: "function onload(event) {\n" +
                  "  init();\n" +
-                 "}"
-      }
-    ]
+                 "}",
+      },
+    ],
   },
   {
     selector: "#constructed-function",
     expected: [
       {
         type: "click",
         filename: TEST_URL + ":1",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "function anonymous() {\n" +
                  "\n" +
-                 "}"
-      }
-    ]
+                 "}",
+      },
+    ],
   },
   {
     selector: "#constructed-function-with-body-string",
     expected: [
       {
         type: "click",
         filename: TEST_URL + ":1",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "function anonymous(a, b, c) {\n" +
                  "  alert(\"constructedFuncWithBodyString\");\n" +
-        "}"
-      }
-    ]
+        "}",
+      },
+    ],
   },
   {
     selector: "#multiple-assignment",
     expected: [
       {
         type: "click",
         filename: TEST_URL + ":24",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "function multi() {\n" +
                  "  alert(\"multipleAssignment\");\n" +
-                 "}"
-      }
-    ]
+                 "}",
+      },
+    ],
   },
   {
     selector: "#promise",
     expected: [
       {
         type: "click",
         filename: "[native code]",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "function() {\n" +
                  "  [native code]\n" +
-                 "}"
-      }
-    ]
+                 "}",
+      },
+    ],
   },
   {
     selector: "#arraysort",
     expected: [
       {
         type: "click",
         filename: "[native code]",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "function sort(arr, comparefn) {\n" +
                  "  [native code]\n" +
-                 "}"
-      }
-    ]
+                 "}",
+      },
+    ],
   },
   {
     selector: "#handleEvent",
     expected: [
       {
         type: "click",
         filename: TEST_URL + ":77",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: "function(event) {\n" +
                  "  switch (event.type) {\n" +
                  "    case \"click\":\n" +
                  "      alert(\"handleEvent click\");\n" +
                  "  }\n" +
-                 "}"
-      }
-    ]
+                 "}",
+      },
+    ],
   },
 ];
 
 add_task(async function() {
   await runEventPopupTests(TEST_URL, TEST_DATA);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_events_source_map.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_source_map.js
@@ -17,17 +17,17 @@ const TEST_DATA = [
     selector: "#clicky",
     isSourceMapped: true,
     expected: [
       {
         type: "click",
         filename: "webpack:///events_original.js:7",
         attributes: [
           "Bubbling",
-          "DOM2"
+          "DOM2",
         ],
         handler: `function clickme() {
   console.log("clickme");
 }`,
       },
     ],
   },
 ];
--- a/devtools/client/inspector/markup/test/browser_markup_html_edit_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_html_edit_01.js
@@ -14,42 +14,42 @@ const TEST_DATA = [{
   selector: "#one",
   oldHTML: '<div id="one">First <em>Div</em></div>',
   newHTML: '<div id="one">First Div</div>',
   validate: async function({pageNodeFront, selectedNodeFront, testActor}) {
     const text = await testActor.getProperty("#one", "textContent");
     is(text, "First Div", "New div has expected text content");
     const num = await testActor.getNumberOfElementMatches("#one em");
     is(num, 0, "No em remaining");
-  }
+  },
 }, {
   selector: "#removedChildren",
   oldHTML: "<div id=\"removedChildren\">removedChild " +
            "<i>Italic <b>Bold <u>Underline</u></b></i> Normal</div>",
-  newHTML: "<div id=\"removedChildren\">removedChild</div>"
+  newHTML: "<div id=\"removedChildren\">removedChild</div>",
 }, {
   selector: "#addedChildren",
   oldHTML: '<div id="addedChildren">addedChildren</div>',
   newHTML: "<div id=\"addedChildren\">addedChildren " +
-           "<i>Italic <b>Bold <u>Underline</u></b></i> Normal</div>"
+           "<i>Italic <b>Bold <u>Underline</u></b></i> Normal</div>",
 }, {
   selector: "#addedAttribute",
   oldHTML: '<div id="addedAttribute">addedAttribute</div>',
   newHTML: "<div id=\"addedAttribute\" class=\"important\" disabled checked>" +
            "addedAttribute</div>",
   validate: async function({pageNodeFront, selectedNodeFront, testActor}) {
     is(pageNodeFront, selectedNodeFront, "Original element is selected");
     const html = await testActor.getProperty("#addedAttribute", "outerHTML");
     is(html, "<div id=\"addedAttribute\" class=\"important\" disabled=\"\" " +
        "checked=\"\">addedAttribute</div>", "Attributes have been added");
-  }
+  },
 }, {
   selector: "#changedTag",
   oldHTML: '<div id="changedTag">changedTag</div>',
-  newHTML: '<p id="changedTag" class="important">changedTag</p>'
+  newHTML: '<p id="changedTag" class="important">changedTag</p>',
 }, {
   selector: "#siblings",
   oldHTML: '<div id="siblings">siblings</div>',
   newHTML: '<div id="siblings-before-sibling">before sibling</div>' +
            '<div id="siblings">siblings (updated)</div>' +
            '<div id="siblings-after-sibling">after sibling</div>',
   validate: async function({selectedNodeFront, inspector, testActor}) {
     const beforeSiblingFront = await getNodeFront("#siblings-before-sibling",
@@ -61,17 +61,17 @@ const TEST_DATA = [{
 
     const beforeText = await testActor.getProperty("#siblings-before-sibling",
                                                  "textContent");
     is(beforeText, "before sibling", "Sibling has been inserted");
 
     const afterText = await testActor.getProperty("#siblings-after-sibling",
                                                 "textContent");
     is(afterText, "after sibling", "Sibling has been inserted");
-  }
+  },
 }];
 
 const TEST_URL = "data:text/html," +
   "<!DOCTYPE html>" +
   "<head><meta charset='utf-8' /></head>" +
   "<body>" +
   TEST_DATA.map(outer => outer.oldHTML).join("\n") +
   "</body>" +
--- a/devtools/client/inspector/markup/test/browser_markup_html_edit_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_html_edit_02.js
@@ -20,17 +20,17 @@ const TEST_DATA = [
       const textNodeName = await testActor.eval(`
         document.querySelector("#badMarkup1").nextSibling.nodeName
       `);
       const textNodeData = await testActor.eval(`
         document.querySelector("#badMarkup1").nextSibling.data
       `);
       is(textNodeName, "#text", "Sibling is a text element");
       is(textNodeData, " hanging", "New text node has expected text content");
-    }
+    },
   },
   {
     selector: "#badMarkup2",
     oldHTML: "<div id=\"badMarkup2\">badMarkup2</div>",
     newHTML: "<div id=\"badMarkup2\">badMarkup2</div> hanging<div></div>" +
              "</div></div></body>",
     validate: async function({pageNodeFront, selectedNodeFront, testActor}) {
       is(pageNodeFront, selectedNodeFront, "Original element is selected");
@@ -38,32 +38,32 @@ const TEST_DATA = [
       const textNodeName = await testActor.eval(`
         document.querySelector("#badMarkup2").nextSibling.nodeName
       `);
       const textNodeData = await testActor.eval(`
         document.querySelector("#badMarkup2").nextSibling.data
       `);
       is(textNodeName, "#text", "Sibling is a text element");
       is(textNodeData, " hanging", "New text node has expected text content");
-    }
+    },
   },
   {
     selector: "#badMarkup3",
     oldHTML: "<div id=\"badMarkup3\">badMarkup3</div>",
     newHTML: "<div id=\"badMarkup3\">badMarkup3 <em>Emphasized <strong> " +
              "and strong</div>",
     validate: async function({pageNodeFront, selectedNodeFront, testActor}) {
       is(pageNodeFront, selectedNodeFront, "Original element is selected");
 
       const emText = await testActor.getProperty("#badMarkup3 em", "textContent");
       const strongText = await testActor.getProperty("#badMarkup3 strong",
                                                    "textContent");
       is(emText, "Emphasized  and strong", "<em> was auto created");
       is(strongText, " and strong", "<strong> was auto created");
-    }
+    },
   },
   {
     selector: "#badMarkup4",
     oldHTML: "<div id=\"badMarkup4\">badMarkup4</div>",
     newHTML: "<div id=\"badMarkup4\">badMarkup4</p>",
     validate: async function({pageNodeFront, selectedNodeFront, testActor}) {
       is(pageNodeFront, selectedNodeFront, "Original element is selected");
 
@@ -72,17 +72,17 @@ const TEST_DATA = [
 
       const pText = await testActor.getProperty("#badMarkup4 p", "textContent");
       const pTag = await testActor.getProperty("#badMarkup4 p", "tagName");
 
       is(divText, "badMarkup4", "textContent is correct");
       is(divTag, "DIV", "did not change to <p> tag");
       is(pText, "", "The <p> tag has no children");
       is(pTag, "P", "Created an empty <p> tag");
-    }
+    },
   },
   {
     selector: "#badMarkup5",
     oldHTML: "<p id=\"badMarkup5\">badMarkup5</p>",
     newHTML: "<p id=\"badMarkup5\">badMarkup5 <div>with a nested div</div></p>",
     validate: async function({pageNodeFront, selectedNodeFront, testActor}) {
       is(pageNodeFront, selectedNodeFront, "Original element is selected");
 
@@ -95,18 +95,18 @@ const TEST_DATA = [
                                                 "textContent");
       const divTag = await testActor.getProperty("#badMarkup5 ~ div", "tagName");
 
       is(num, 0, "The invalid markup got created as a sibling");
       is(pText, "badMarkup5 ", "The p tag does not take in the div content");
       is(pTag, "P", "Did not change to a <div> tag");
       is(divText, "with a nested div", "textContent is correct");
       is(divTag, "DIV", "Did not change to <p> tag");
-    }
-  }
+    },
+  },
 ];
 
 const TEST_URL = "data:text/html," +
   "<!DOCTYPE html>" +
   "<head><meta charset='utf-8' /></head>" +
   "<body>" +
   TEST_DATA.map(outer => outer.oldHTML).join("\n") +
   "</body>" +
--- a/devtools/client/inspector/markup/test/browser_markup_image_tooltip.js
+++ b/devtools/client/inspector/markup/test/browser_markup_image_tooltip.js
@@ -6,17 +6,17 @@
 // Test that image preview tooltips are shown on img and canvas tags in the
 // markup-view and that the tooltip actually contains an image and shows the
 // right dimension label
 
 const TEST_NODES = [
   {selector: "img.local", size: "192" + " \u00D7 " + "192"},
   {selector: "img.data", size: "64" + " \u00D7 " + "64"},
   {selector: "img.remote", size: "22" + " \u00D7 " + "23"},
-  {selector: ".canvas", size: "600" + " \u00D7 " + "600"}
+  {selector: ".canvas", size: "600" + " \u00D7 " + "600"},
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_markup_image_and_canvas_2.html");
   const {inspector} = await openInspector();
 
   info("Selecting the first <img> tag");
   await selectNode("img", inspector);
--- a/devtools/client/inspector/markup/test/browser_markup_image_tooltip_mutations.js
+++ b/devtools/client/inspector/markup/test/browser_markup_image_tooltip_mutations.js
@@ -60,17 +60,17 @@ add_task(async function() {
 
 /**
  * Updates the src attribute of the image. Return a Promise.
  */
 function updateImageSrc(img, newSrc, inspector) {
   const onMutated = inspector.once("markupmutation");
   const onModified = img.modifyAttributes([{
     attributeName: "src",
-    newValue: newSrc
+    newValue: newSrc,
   }]);
 
   return Promise.all([onMutated, onModified]);
 }
 
 /**
  * Checks that the markup view tooltip contains an image element with the given
  * size.
--- a/devtools/client/inspector/markup/test/browser_markup_keybindings_delete_attributes.js
+++ b/devtools/client/inspector/markup/test/browser_markup_keybindings_delete_attributes.js
@@ -13,20 +13,20 @@ const TEST_URL = "data:text/html;charset
 // List of all the test cases. Each item is an object with the following props:
 // - selector: the css selector of the node that should be selected
 // - attribute: the name of the attribute that should be focused. Do not
 //   specify an attribute that would make it impossible to find the node using
 //   selector.
 // Note that after each test case, undo is called.
 const TEST_DATA = [{
   selector: "#id",
-  attribute: "class"
+  attribute: "class",
 }, {
   selector: "#id",
-  attribute: "data-id"
+  attribute: "data-id",
 }];
 
 add_task(async function() {
   const {inspector} = await openInspectorForURL(TEST_URL);
   const {walker} = inspector;
 
   for (const {selector, attribute} of TEST_DATA) {
     info("Get the container for node " + selector);
--- a/devtools/client/inspector/markup/test/browser_markup_links_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_links_01.js
@@ -8,101 +8,101 @@
 // values) are URIs or pointers to IDs.
 
 const TEST_URL = URL_ROOT + "doc_markup_links.html";
 
 const TEST_DATA = [{
   selector: "link",
   attributes: [{
     attributeName: "href",
-    links: [{type: "cssresource", value: "style.css"}]
-  }]
+    links: [{type: "cssresource", value: "style.css"}],
+  }],
 }, {
   selector: "link[rel=icon]",
   attributes: [{
     attributeName: "href",
     links: [{type: "uri",
-             value: "/media/img/firefox/favicon-196.223e1bcaf067.png"}]
-  }]
+             value: "/media/img/firefox/favicon-196.223e1bcaf067.png"}],
+  }],
 }, {
   selector: "form",
   attributes: [{
     attributeName: "action",
-    links: [{type: "uri", value: "/post_message"}]
-  }]
+    links: [{type: "uri", value: "/post_message"}],
+  }],
 }, {
   selector: "label[for=name]",
   attributes: [{
     attributeName: "for",
-    links: [{type: "idref", value: "name"}]
-  }]
+    links: [{type: "idref", value: "name"}],
+  }],
 }, {
   selector: "label[for=message]",
   attributes: [{
     attributeName: "for",
-    links: [{type: "idref", value: "message"}]
-  }]
+    links: [{type: "idref", value: "message"}],
+  }],
 }, {
   selector: "output",
   attributes: [{
     attributeName: "form",
-    links: [{type: "idref", value: "message-form"}]
+    links: [{type: "idref", value: "message-form"}],
   }, {
     attributeName: "for",
     links: [
       {type: "idref", value: "name"},
       {type: "idref", value: "message"},
-      {type: "idref", value: "invalid"}
-    ]
-  }]
+      {type: "idref", value: "invalid"},
+    ],
+  }],
 }, {
   selector: "a",
   attributes: [{
     attributeName: "href",
-    links: [{type: "uri", value: "/go/somewhere/else"}]
+    links: [{type: "uri", value: "/go/somewhere/else"}],
   }, {
     attributeName: "ping",
     links: [
       {type: "uri", value: "/analytics?page=pageA"},
-      {type: "uri", value: "/analytics?user=test"}
-    ]
-  }]
+      {type: "uri", value: "/analytics?user=test"},
+    ],
+  }],
 }, {
   selector: "li[contextmenu=menu1]",
   attributes: [{
     attributeName: "contextmenu",
-    links: [{type: "idref", value: "menu1"}]
-  }]
+    links: [{type: "idref", value: "menu1"}],
+  }],
 }, {
   selector: "li[contextmenu=menu2]",
   attributes: [{
     attributeName: "contextmenu",
-    links: [{type: "idref", value: "menu2"}]
-  }]
+    links: [{type: "idref", value: "menu2"}],
+  }],
 }, {
   selector: "li[contextmenu=menu3]",
   attributes: [{
     attributeName: "contextmenu",
-    links: [{type: "idref", value: "menu3"}]
-  }]
+    links: [{type: "idref", value: "menu3"}],
+  }],
 }, {
   selector: "video",
   attributes: [{
     attributeName: "poster",
-    links: [{type: "uri", value: "doc_markup_tooltip.png"}]
+    links: [{type: "uri", value: "doc_markup_tooltip.png"}],
   }, {
     attributeName: "src",
-    links: [{type: "uri", value: "code-rush.mp4"}]
-  }]
+    links: [{type: "uri", value: "code-rush.mp4"}],
+  }],
 }, {
   selector: "script",
   attributes: [{
     attributeName: "src",
-    links: [{type: "jsresource", value: "lib_jquery_1.0.js"}]
-  }]
+    links: [{type: "jsresource", value: "lib_jquery_1.0.js"}],
+  }],
 }];
 
 requestLongerTimeout(2);
 
 add_task(async function() {
   const {inspector} = await openInspectorForURL(TEST_URL);
 
   for (const {selector, attributes} of TEST_DATA) {
--- a/devtools/client/inspector/markup/test/browser_markup_links_04.js
+++ b/devtools/client/inspector/markup/test/browser_markup_links_04.js
@@ -24,57 +24,57 @@ const TEST_DATA = [{
   selector: "link",
   attributeName: "href",
   popupNodeSelector: ".link",
   isLinkFollowItemVisible: true,
   isLinkCopyItemVisible: true,
   linkFollowItemLabel: TOOLBOX_L10N.getStr(
     "toolbox.viewCssSourceInStyleEditor.label"),
   linkCopyItemLabel: INSPECTOR_L10N.getStr(
-    "inspector.menu.copyUrlToClipboard.label")
+    "inspector.menu.copyUrlToClipboard.label"),
 }, {
   selector: "link[rel=icon]",
   attributeName: "href",
   popupNodeSelector: ".link",
   isLinkFollowItemVisible: true,
   isLinkCopyItemVisible: true,
   linkFollowItemLabel: INSPECTOR_L10N.getStr(
     "inspector.menu.openUrlInNewTab.label"),
   linkCopyItemLabel: INSPECTOR_L10N.getStr(
-    "inspector.menu.copyUrlToClipboard.label")
+    "inspector.menu.copyUrlToClipboard.label"),
 }, {
   selector: "link",
   attributeName: "rel",
   popupNodeSelector: ".attr-value",
   isLinkFollowItemVisible: false,
-  isLinkCopyItemVisible: false
+  isLinkCopyItemVisible: false,
 }, {
   selector: "output",
   attributeName: "for",
   popupNodeSelector: ".link",
   isLinkFollowItemVisible: true,
   isLinkCopyItemVisible: false,
   linkFollowItemLabel: INSPECTOR_L10N.getFormatStr(
-    "inspector.menu.selectElement.label", "name")
+    "inspector.menu.selectElement.label", "name"),
 }, {
   selector: "script",
   attributeName: "src",
   popupNodeSelector: ".link",
   isLinkFollowItemVisible: true,
   isLinkCopyItemVisible: true,
   linkFollowItemLabel: TOOLBOX_L10N.getStr(
     "toolbox.viewJsSourceInDebugger.label"),
   linkCopyItemLabel: INSPECTOR_L10N.getStr(
-    "inspector.menu.copyUrlToClipboard.label")
+    "inspector.menu.copyUrlToClipboard.label"),
 }, {
   selector: "p[for]",
   attributeName: "for",
   popupNodeSelector: ".attr-value",
   isLinkFollowItemVisible: false,
-  isLinkCopyItemVisible: false
+  isLinkCopyItemVisible: false,
 }];
 
 add_task(async function() {
   const {inspector} = await openInspectorForURL(TEST_URL);
 
   for (const test of TEST_DATA) {
     info("Selecting test node " + test.selector);
     await selectNode(test.selector, inspector);
--- a/devtools/client/inspector/markup/test/browser_markup_load_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_load_01.js
@@ -61,17 +61,17 @@ add_task(async function() {
 
   ok(inspector.markup, "There is a markup view");
   is(inspector.markup._elt.children.length, 1, "The markup view is rendering");
 });
 
 async function chooseWithInspectElementContextMenu(selector, tab) {
   await BrowserTestUtils.synthesizeMouseAtCenter(selector, {
     type: "contextmenu",
-    button: 2
+    button: 2,
   }, tab.linkedBrowser);
 
   await EventUtils.sendString("Q");
 }
 
 function waitForLinkedBrowserEvent(tab, event) {
   return BrowserTestUtils.waitForContentEvent(tab.linkedBrowser, event, true);
 }
--- a/devtools/client/inspector/markup/test/browser_markup_mutation_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_mutation_01.js
@@ -22,57 +22,57 @@ const TEST_DATA = [
     },
     check: async function(inspector) {
       const {editor} = await getContainerForSelector("#node1", inspector);
       ok([...editor.attrList.querySelectorAll(".attreditor")].some(attr => {
         return attr.textContent.trim() === "newattr=\"newattrval\""
           && attr.dataset.value === "newattrval"
           && attr.dataset.attr === "newattr";
       }), "newattr attribute found");
-    }
+    },
   },
   {
     desc: "Removing an attribute",
     test: async function(testActor) {
       await testActor.removeAttribute("#node1", "newattr");
     },
     check: async function(inspector) {
       const {editor} = await getContainerForSelector("#node1", inspector);
       ok(![...editor.attrList.querySelectorAll(".attreditor")].some(attr => {
         return attr.textContent.trim() === "newattr=\"newattrval\"";
       }), "newattr attribute removed");
-    }
+    },
   },
   {
     desc: "Re-adding an attribute",
     test: async function(testActor) {
       await testActor.setAttribute("#node1", "newattr", "newattrval");
     },
     check: async function(inspector) {
       const {editor} = await getContainerForSelector("#node1", inspector);
       ok([...editor.attrList.querySelectorAll(".attreditor")].some(attr => {
         return attr.textContent.trim() === "newattr=\"newattrval\""
           && attr.dataset.value === "newattrval"
           && attr.dataset.attr === "newattr";
       }), "newattr attribute found");
-    }
+    },
   },
   {
     desc: "Changing an attribute",
     test: async function(testActor) {
       await testActor.setAttribute("#node1", "newattr", "newattrchanged");
     },
     check: async function(inspector) {
       const {editor} = await getContainerForSelector("#node1", inspector);
       ok([...editor.attrList.querySelectorAll(".attreditor")].some(attr => {
         return attr.textContent.trim() === "newattr=\"newattrchanged\""
           && attr.dataset.value === "newattrchanged"
           && attr.dataset.attr === "newattr";
       }), "newattr attribute found");
-    }
+    },
   },
   {
     desc: "Adding another attribute does not rerender unchanged attributes",
     test: async function(testActor, inspector) {
       const {editor} = await getContainerForSelector("#node1", inspector);
 
       // This test checks the impact on the markup-view nodes after setting attributes on
       // content nodes.
@@ -92,60 +92,60 @@ const TEST_DATA = [
       info("Check the attribute-container for the new attribute mutation was created");
       const otherAttrContainer = editor.attrList.querySelector("[data-attr=otherattr]");
       ok(otherAttrContainer, "attribute-container for 'otherattr' found");
 
       info("Check the attribute-container for 'new-attr' is the same node as earlier.");
       const newAttrContainer = editor.attrList.querySelector("[data-attr=newattr]");
       ok(newAttrContainer, "attribute-container for 'newattr' found");
       ok(newAttrContainer.beforeMutationFlag, "attribute-container same as earlier");
-    }
+    },
   },
   {
     desc: "Adding ::after element",
     numMutations: 2,
     test: async function(testActor) {
       await testActor.eval(`
         let node1 = document.querySelector("#node1");
         node1.classList.add("pseudo");
       `);
     },
     check: async function(inspector) {
       const {children} = await getContainerForSelector("#node1", inspector);
       is(children.childNodes.length, 2,
         "Node1 now has 2 children (text child and ::after");
-    }
+    },
   },
   {
     desc: "Removing ::after element",
     numMutations: 2,
     test: async function(testActor) {
       await testActor.eval(`
         let node1 = document.querySelector("#node1");
         node1.classList.remove("pseudo");
       `);
     },
     check: async function(inspector) {
       const container = await getContainerForSelector("#node1", inspector);
       ok(container.inlineTextChild, "Has single text child.");
-    }
+    },
   },
   {
     desc: "Updating the text-content",
     test: async function(testActor) {
       await testActor.setProperty("#node1", "textContent", "newtext");
     },
     check: async function(inspector) {
       const container = await getContainerForSelector("#node1", inspector);
       ok(container.inlineTextChild, "Has single text child.");
       ok(!container.canExpand, "Can't expand container with inlineTextChild.");
       ok(!container.inlineTextChild.canExpand, "Can't expand inlineTextChild.");
       is(container.editor.elt.querySelector(".text").textContent.trim(),
          "newtext", "Single text child editor updated.");
-    }
+    },
   },
   {
     desc: "Adding a second text child",
     test: async function(testActor) {
       await testActor.eval(`
         let node1 = document.querySelector("#node1");
         let newText = node1.ownerDocument.createTextNode("more");
         node1.appendChild(newText);
@@ -212,32 +212,32 @@ const TEST_DATA = [
 
       const openTags = container.children.querySelectorAll(".open .tag");
       is(openTags.length, 2, "There are 2 tags in node2");
       is(openTags[0].textContent.trim(), "div", "The first tag is a div");
       is(openTags[1].textContent.trim(), "span", "The second tag is a span");
 
       is(container.children.querySelector(".text").textContent.trim(), "foo",
         "The span's textcontent is correct");
-    }
+    },
   },
   {
     desc: "Removing child nodes",
     test: async function(testActor) {
       await testActor.eval(`
         let node4 = document.querySelector("#node4");
         while (node4.firstChild) {
           node4.removeChild(node4.firstChild);
         }
       `);
     },
     check: async function(inspector) {
       const {children} = await getContainerForSelector("#node4", inspector);
       is(children.innerHTML, "", "Children have been removed");
-    }
+    },
   },
   {
     desc: "Appending a child to a different parent",
     test: async function(testActor) {
       await testActor.eval(`
         let node17 = document.querySelector("#node17");
         let node2 = document.querySelector("#node2");
         node2.appendChild(node17);
@@ -247,17 +247,17 @@ const TEST_DATA = [
       const {children} = await getContainerForSelector("#node16", inspector);
       is(children.innerHTML, "",
          "Node17 has been removed from its node16 parent");
 
       const container = await getContainerForSelector("#node2", inspector);
       const openTags = container.children.querySelectorAll(".open .tag");
       is(openTags.length, 3, "There are now 3 tags in node2");
       is(openTags[2].textContent.trim(), "p", "The third tag is node17");
-    }
+    },
   },
   {
     desc: "Swapping a parent and child element, putting them in the same tree",
     // body
     //  node1
     //  node18
     //    node19
     //      node20
@@ -293,18 +293,18 @@ const TEST_DATA = [
       const node21 = node20Children.childNodes[0];
       is(node21.container.editor.elt.querySelector(".text").textContent.trim(),
          "line21", "Node21 has a single text child");
 
       const node18 = node20Children.childNodes[1];
       is(node18.querySelector(".open .attreditor .attr-value")
                .textContent.trim(),
          "node18", "Node20's second child is indeed node18");
-    }
-  }
+    },
+  },
 ];
 
 add_task(async function() {
   const {inspector, testActor} = await openInspectorForURL(TEST_URL);
 
   info("Expanding all markup-view nodes");
   await inspector.markup.expandAll();
 
--- a/devtools/client/inspector/markup/test/browser_markup_mutation_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_mutation_02.js
@@ -27,75 +27,75 @@ const TEST_DATA = [{
   desc: "Adding a new node should flash the new node",
   mutate: async function(testActor) {
     await testActor.eval(`
       let newLi = document.createElement("LI");
       newLi.textContent = "new list item";
       document.querySelector(".list").appendChild(newLi);
     `);
   },
-  flashedNode: ".list li:nth-child(3)"
+  flashedNode: ".list li:nth-child(3)",
 }, {
   desc: "Removing a node should flash its parent",
   mutate: async function(testActor) {
     await testActor.eval(`
       let root = document.querySelector(".list");
       root.removeChild(root.lastElementChild);
     `);
-  }
+  },
 }, {
   desc: "Re-appending an existing node should only flash this node",
   mutate: async function(testActor) {
     await testActor.eval(`
       let root = document.querySelector(".list");
       root.appendChild(root.firstElementChild);
     `);
   },
-  flashedNode: ".list .item:last-child"
+  flashedNode: ".list .item:last-child",
 }, {
   desc: "Adding an attribute should flash the attribute",
   attribute: "test-name",
   mutate: async function(testActor) {
     await testActor.setAttribute(".list", "test-name", "value-" + Date.now());
-  }
+  },
 }, {
   desc: "Adding an attribute with css reserved characters should flash the " +
         "attribute",
   attribute: "one:two",
   mutate: async function(testActor) {
     await testActor.setAttribute(".list", "one:two", "value-" + Date.now());
-  }
+  },
 }, {
   desc: "Editing an attribute should flash the attribute",
   attribute: "class",
   mutate: async function(testActor) {
     await testActor.setAttribute(".list", "class", "list value-" + Date.now());
-  }
+  },
 }, {
   desc: "Multiple changes to an attribute should flash the attribute",
   attribute: "class",
   mutate: async function(testActor) {
     await testActor.eval(`
       let root = document.querySelector(".list");
       root.removeAttribute("class");
       root.setAttribute("class", "list value-" + Date.now());
       root.setAttribute("class", "list value-" + Date.now());
       root.removeAttribute("class");
       root.setAttribute("class", "list value-" + Date.now());
       root.setAttribute("class", "list value-" + Date.now());
     `);
-  }
+  },
 }, {
   desc: "Removing an attribute should flash the node",
   mutate: async function(testActor) {
     await testActor.eval(`
       let root = document.querySelector(".list");
       root.removeAttribute("class");
     `);
-  }
+  },
 }];
 
 add_task(async function() {
   const timerPrecision = Preferences.get("privacy.reduceTimerPrecision");
   Preferences.set("privacy.reduceTimerPrecision", false);
 
   registerCleanupFunction(function() {
     Preferences.set("privacy.reduceTimerPrecision", timerPrecision);
--- a/devtools/client/inspector/markup/test/browser_markup_navigation.js
+++ b/devtools/client/inspector/markup/test/browser_markup_navigation.js
@@ -68,17 +68,17 @@ const TEST_DATA = [
   ["KEY_ArrowDown", "*text*"],
   ["KEY_ArrowDown", "node9"],
   ["KEY_ArrowDown", "*text*"],
   ["KEY_ArrowDown", "node10"],
   ["KEY_PageUp", "*text*"],
   ["KEY_PageUp", "*doctype*"],
   ["KEY_ArrowDown", "html"],
   ["KEY_ArrowLeft", "html"],
-  ["KEY_ArrowDown", "head"]
+  ["KEY_ArrowDown", "head"],
 ];
 
 add_task(async function() {
   const {inspector} = await openInspectorForURL(TEST_URL);
 
   info("Making sure the markup-view frame is focused");
   inspector.markup._frame.focus();
 
--- a/devtools/client/inspector/markup/test/browser_markup_node_not_displayed_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_node_not_displayed_02.js
@@ -16,101 +16,101 @@ const TEST_DATA = [
     changeStyle: async function(testActor) {
       await testActor.eval(`
         let div = document.createElement("div");
         div.id = "new-style";
         div.innerHTML = "<style>#normal-div {display:none;}</style>";
         document.body.appendChild(div);
       `);
     },
-    after: false
+    after: false,
   },
   {
     desc: "Showing a node by deleting an existing stylesheet",
     selector: "#normal-div",
     before: false,
     changeStyle: async function(testActor) {
       await testActor.eval(`
         document.getElementById("new-style").remove();
       `);
     },
-    after: true
+    after: true,
   },
   {
     desc: "Hiding a node by changing its style property",
     selector: "#display-none",
     before: false,
     changeStyle: async function(testActor) {
       await testActor.eval(`
         let node = document.querySelector("#display-none");
         node.style.display = "block";
       `);
     },
-    after: true
+    after: true,
   },
   {
     desc: "Showing a node by removing its hidden attribute",
     selector: "#hidden-true",
     before: false,
     changeStyle: async function(testActor) {
       await testActor.eval(`
         document.querySelector("#hidden-true")
                 .removeAttribute("hidden");
       `);
     },
-    after: true
+    after: true,
   },
   {
     desc: "Hiding a node by adding a hidden attribute",
     selector: "#hidden-true",
     before: true,
     changeStyle: async function(testActor) {
       await testActor.setAttribute("#hidden-true", "hidden", "true");
     },
-    after: false
+    after: false,
   },
   {
     desc: "Showing a node by changin a stylesheet's rule",
     selector: "#hidden-via-stylesheet",
     before: false,
     changeStyle: async function(testActor) {
       await testActor.eval(`
         document.styleSheets[0]
                 .cssRules[0].style
                 .setProperty("display", "inline");
       `);
     },
-    after: true
+    after: true,
   },
   {
     desc: "Hiding a node by adding a new rule to a stylesheet",
     selector: "#hidden-via-stylesheet",
     before: true,
     changeStyle: async function(testActor) {
       await testActor.eval(`
         document.styleSheets[0].insertRule(
           "#hidden-via-stylesheet {display: none;}", 1);
       `);
     },
-    after: false
+    after: false,
   },
   {
     desc: "Hiding a node by adding a class that matches an existing rule",
     selector: "#normal-div",
     before: true,
     changeStyle: async function(testActor) {
       await testActor.eval(`
         document.styleSheets[0].insertRule(
           ".a-new-class {display: none;}", 2);
         document.querySelector("#normal-div")
                 .classList.add("a-new-class");
       `);
     },
-    after: false
-  }
+    after: false,
+  },
 ];
 
 add_task(async function() {
   const {inspector, testActor} = await openInspectorForURL(TEST_URL);
 
   for (const data of TEST_DATA) {
     info("Running test case: " + data.desc);
     await runTestData(inspector, testActor, data);
--- a/devtools/client/inspector/markup/test/browser_markup_pagesize_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_pagesize_01.js
@@ -8,38 +8,38 @@
 // devtools.markup.pagesize preference.
 
 Services.prefs.setIntPref("devtools.markup.pagesize", 5);
 
 const TEST_URL = URL_ROOT + "doc_markup_pagesize_01.html";
 const TEST_DATA = [{
   desc: "Select the last item",
   selector: "#z",
-  expected: "*more*vwxyz"
+  expected: "*more*vwxyz",
 }, {
   desc: "Select the first item",
   selector: "#a",
-  expected: "abcde*more*"
+  expected: "abcde*more*",
 }, {
   desc: "Select the last item",
   selector: "#z",
-  expected: "*more*vwxyz"
+  expected: "*more*vwxyz",
 }, {
   desc: "Select an already-visible item",
   selector: "#v",
   // Because "v" was already visible, we shouldn't have loaded
   // a different page.
-  expected: "*more*vwxyz"
+  expected: "*more*vwxyz",
 }, {
   desc: "Verify childrenDirty reloads the page",
   selector: "#w",
   forceReload: true,
   // But now that we don't already have a loaded page, selecting
   // w should center around w.
-  expected: "*more*uvwxy*more*"
+  expected: "*more*uvwxy*more*",
 }];
 
 add_task(async function() {
   const {inspector} = await openInspectorForURL(TEST_URL);
 
   info("Start iterating through the test data");
   for (const step of TEST_DATA) {
     info("Start test: " + step.desc);
--- a/devtools/client/inspector/markup/test/browser_markup_shadowdom.js
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom.js
@@ -48,17 +48,17 @@ const TEST_DATA = [
         slot="slot1"
           slotted-1
           inner
         slot="slot2"
           slotted-2
           inner
         class="no-slot-class"
           no-slot-text
-          inner`
+          inner`,
 
   }, {
     // Test that components without any direct children still display a shadow root node,
     // if a shadow root is attached to the host.
     title: "shadow root without direct children",
     url: `data:text/html;charset=utf-8,
       <test-component></test-component>
       <script>
@@ -70,17 +70,17 @@ const TEST_DATA = [
             shadowRoot.innerHTML = "<slot><div>fallback-content</div></slot>";
           }
         });
       </script>`,
     tree: `
       test-component
         #shadow-root
           slot
-            fallback-content`
+            fallback-content`,
 
   }, {
     // Test that markup view is correctly displayed for non-trivial shadow DOM nesting.
     title: "nested components",
     url: `data:text/html;charset=utf-8,
       <test-component >
         <div slot="slot1">slot1-1</div>
         <third-component slot="slot2"></third-component>
@@ -123,17 +123,17 @@ const TEST_DATA = [
               #shadow-root
                 div
                   slot
                     div!slotted
               div
         div
         third-component
           #shadow-root
-            div`
+            div`,
 
   }, {
     // Test that ::before and ::after pseudo elements are correctly displayed in host
     // components and in slot elements.
     title: "pseudo elements",
     url: `data:text/html;charset=utf-8,
       <style>
         test-component::before { content: "before-host" }
@@ -167,17 +167,17 @@ const TEST_DATA = [
           style
             slot { display: block }
           slot
             ::before
             div!slotted
             ::after
         ::before
         class="light-dom"
-        ::after`
+        ::after`,
 
   }, {
     // Test empty web components are still displayed correctly.
     title: "empty components",
     url: `data:text/html;charset=utf-8,
       <test-component></test-component>
 
       <script>
@@ -187,18 +187,18 @@ const TEST_DATA = [
             super();
             let shadowRoot = this.attachShadow({mode: "#MODE#"});
             shadowRoot.innerHTML = "";
           }
         });
       </script>`,
     tree: `
       test-component
-        #shadow-root`
-  }
+        #shadow-root`,
+  },
 ];
 
 for (const {url, tree, title} of TEST_DATA) {
   // Test each configuration in both open and closed modes
   add_task(async function() {
     info(`Testing: [${title}] in OPEN mode`);
     await enableWebComponents();
     const {inspector} = await openInspectorForURL(url.replace("#MODE#", "open"));
--- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_01.js
@@ -9,60 +9,60 @@
 loadHelperScript("helper_attributes_test_runner.js");
 
 const TEST_URL = URL_ROOT + "doc_markup_edit.html";
 var TEST_DATA = [{
   desc: "Change an attribute",
   node: "#node1",
   originalAttributes: {
     id: "node1",
-    class: "node1"
+    class: "node1",
   },
   name: "class",
   value: 'class="changednode1"',
   expectedAttributes: {
     id: "node1",
-    class: "changednode1"
-  }
+    class: "changednode1",
+  },
 }, {
   desc: "Try changing an attribute to a quote (\") - this should result " +
         "in it being set to an empty string",
   node: "#node22",
   originalAttributes: {
     id: "node22",
-    class: "unchanged"
+    class: "unchanged",
   },
   name: "class",
   value: 'class="""',
   expectedAttributes: {
     id: "node22",
-    class: ""
-  }
+    class: "",
+  },
 }, {
   desc: "Remove an attribute",
   node: "#node4",
   originalAttributes: {
     id: "node4",
-    class: "node4"
+    class: "node4",
   },
   name: "class",
   value: "",
   expectedAttributes: {
-    id: "node4"
-  }
+    id: "node4",
+  },
 }, {
   desc: "Try add attributes by adding to an existing attribute's entry",
   node: "#node24",
   originalAttributes: {
-    id: "node24"
+    id: "node24",
   },
   name: "id",
   value: 'id="node24" class="""',
   expectedAttributes: {
     id: "node24",
-    class: ""
-  }
+    class: "",
+  },
 }];
 
 add_task(async function() {
   const {inspector, testActor} = await openInspectorForURL(TEST_URL);
   await runEditAttributesTests(TEST_DATA, inspector, testActor);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_02.js
@@ -13,32 +13,32 @@ add_task(async function() {
   info("Opening the inspector on the test page");
   const {inspector, testActor} = await openInspectorForURL(TEST_URL);
 
   info("Selecting the test node");
   await focusNode("#test-div", inspector);
 
   info("Verify attributes, only ID should be there for now");
   await assertAttributes("#test-div", {
-    id: "test-div"
+    id: "test-div",
   }, testActor);
 
   info("Focus the ID attribute and change its content");
   const {editor} = await getContainerForSelector("#test-div", inspector);
   const attr = editor.attrElements.get("id").querySelector(".editable");
   const mutated = inspector.once("markupmutation");
   setEditableFieldValue(attr,
     attr.textContent + ' class="newclass" style="color:green"', inspector);
   await mutated;
 
   info("Verify attributes, should have ID, class and style");
   await assertAttributes("#test-div", {
     id: "test-div",
     class: "newclass",
-    style: "color:green"
+    style: "color:green",
   }, testActor);
 
   info("Trying to undo the change");
   await undoChange(inspector);
   await assertAttributes("#test-div", {
-    id: "test-div"
+    id: "test-div",
   }, testActor);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_04-backspace.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_04-backspace.js
@@ -29,30 +29,30 @@ const TEST_URL = "data:text/html;charset
 // - selector: the css selector of the node that should be selected
 // - focusedSelector: the css selector of the node we expect to be selected as
 //   a result of the deletion
 // - pseudo: (optional) if the focused node is actually supposed to be a pseudo element
 //   of the specified selector.
 // Note that after each test case, undo is called.
 const TEST_DATA = [{
   selector: "#first",
-  focusedSelector: "#second"
+  focusedSelector: "#second",
 }, {
   selector: "#second",
-  focusedSelector: "#first"
+  focusedSelector: "#first",
 }, {
   selector: "#third",
-  focusedSelector: "#second"
+  focusedSelector: "#second",
 }, {
   selector: "#fourth",
-  focusedSelector: "#only-child"
+  focusedSelector: "#only-child",
 }, {
   selector: "#fifth",
   focusedSelector: "#pseudo",
-  pseudo: "before"
+  pseudo: "before",
 }];
 
 add_task(async function() {
   const {inspector} = await openInspectorForURL(TEST_URL);
 
   for (const data of TEST_DATA) {
     await checkDeleteAndSelection(inspector, "back_space", data);
   }
--- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_04-delete.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_04-delete.js
@@ -29,30 +29,30 @@ const TEST_URL = "data:text/html;charset
 // - selector: the css selector of the node that should be selected
 // - focusedSelector: the css selector of the node we expect to be selected as
 //   a result of the deletion
 // - pseudo: (optional) if the focused node is actually supposed to be a pseudo element
 //   of the specified selector.
 // Note that after each test case, undo is called.
 const TEST_DATA = [{
   selector: "#first",
-  focusedSelector: "#second"
+  focusedSelector: "#second",
 }, {
   selector: "#second",
-  focusedSelector: "#third"
+  focusedSelector: "#third",
 }, {
   selector: "#third",
-  focusedSelector: "#second"
+  focusedSelector: "#second",
 }, {
   selector: "#fourth",
-  focusedSelector: "#only-child"
+  focusedSelector: "#only-child",
 }, {
   selector: "#fifth",
   focusedSelector: "#pseudo",
-  pseudo: "after"
+  pseudo: "after",
 }];
 
 add_task(async function() {
   const {inspector} = await openInspectorForURL(TEST_URL);
 
   for (const data of TEST_DATA) {
     await checkDeleteAndSelection(inspector, "delete", data);
   }
--- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_05.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_05.js
@@ -14,64 +14,64 @@
 
 loadHelperScript("helper_attributes_test_runner.js");
 
 var TEST_URL = "data:text/html,<div>markup-view attributes addition test</div>";
 var TEST_DATA = [{
   desc: "Add an attribute value without closing \"",
   text: 'style="display: block;',
   expectedAttributes: {
-    style: "display: block;"
-  }
+    style: "display: block;",
+  },
 }, {
   desc: "Add an attribute value without closing '",
   text: "style='display: inline;",
   expectedAttributes: {
-    style: "display: inline;"
-  }
+    style: "display: inline;",
+  },
 }, {
   desc: "Add an attribute wrapped with with double quotes double quote in it",
   text: 'style="display: "inline',
   expectedAttributes: {
     style: "display: ",
-    inline: ""
-  }
+    inline: "",
+  },
 }, {
   desc: "Add an attribute wrapped with single quotes with single quote in it",
   text: "style='display: 'inline",
   expectedAttributes: {
     style: "display: ",
-    inline: ""
-  }
+    inline: "",
+  },
 }, {
   desc: "Add an attribute with no value",
   text: "disabled",
   expectedAttributes: {
-    disabled: ""
-  }
+    disabled: "",
+  },
 }, {
   desc: "Add multiple attributes with no value",
   text: "disabled autofocus",
   expectedAttributes: {
     disabled: "",
-    autofocus: ""
-  }
+    autofocus: "",
+  },
 }, {
   desc: "Add multiple attributes with no value, and some with value",
   text: "disabled name='name' data-test='test' autofocus",
   expectedAttributes: {
     disabled: "",
     autofocus: "",
     name: "name",
-    "data-test": "test"
-  }
+    "data-test": "test",
+  },
 }, {
   desc: "Add attribute with xmlns",
   text: "xmlns:edi='http://ecommerce.example.org/schema'",
   expectedAttributes: {
-    "xmlns:edi": "http://ecommerce.example.org/schema"
-  }
+    "xmlns:edi": "http://ecommerce.example.org/schema",
+  },
 }];
 
 add_task(async function() {
   const {inspector, testActor} = await openInspectorForURL(TEST_URL);
   await runAddAttributesTests(TEST_DATA, "div", inspector, testActor);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_06.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_06.js
@@ -15,71 +15,71 @@
 loadHelperScript("helper_attributes_test_runner.js");
 
 var TEST_URL = "data:text/html,<div>markup-view attributes addition test</div>";
 var TEST_DATA = [{
   desc: "Mixed single and double quotes",
   text: "name=\"hi\" maxlength='not a number'",
   expectedAttributes: {
     maxlength: "not a number",
-    name: "hi"
-  }
+    name: "hi",
+  },
 }, {
   desc: "Invalid attribute name",
   text: "x='y' <why-would-you-do-this>=\"???\"",
   expectedAttributes: {
-    x: "y"
-  }
+    x: "y",
+  },
 }, {
   desc: "Double quote wrapped in single quotes",
   text: "x='h\"i'",
   expectedAttributes: {
-    x: "h\"i"
-  }
+    x: "h\"i",
+  },
 }, {
   desc: "Single quote wrapped in double quotes",
   text: "x=\"h'i\"",
   expectedAttributes: {
-    x: "h'i"
-  }
+    x: "h'i",
+  },
 }, {
   desc: "No quote wrapping",
   text: "a=b x=y data-test=Some spaced data",
   expectedAttributes: {
     a: "b",
     x: "y",
     "data-test": "Some",
     spaced: "",
-    data: ""
-  }
+    data: "",
+  },
 }, {
   desc: "Duplicate Attributes",
   text: "a=b a='c' a=\"d\"",
   expectedAttributes: {
-    a: "b"
-  }
+    a: "b",
+  },
 }, {
   desc: "Inline styles",
   text: "style=\"font-family: 'Lucida Grande', sans-serif; font-size: 75%;\"",
   expectedAttributes: {
-    style: "font-family: 'Lucida Grande', sans-serif; font-size: 75%;"
-  }
+    style: "font-family: 'Lucida Grande', sans-serif; font-size: 75%;",
+  },
 }, {
   desc: "Object attribute names",
   text: "toString=\"true\" hasOwnProperty=\"false\"",
   expectedAttributes: {
     tostring: "true",
-    hasownproperty: "false"
-  }
+    hasownproperty: "false",
+  },
 }, {
   desc: "Add event handlers",
   text: "onclick=\"javascript: throw new Error('wont fire');\" " +
         "onload=\"alert('here');\"",
   expectedAttributes: {
     onclick: "javascript: throw new Error('wont fire');",
-    onload: "alert('here');"
-  }
+    onload: "alert('here');",
+  },
 }];
 
 add_task(async function() {
   const {inspector, testActor} = await openInspectorForURL(TEST_URL);
   await runAddAttributesTests(TEST_DATA, "div", inspector, testActor);
 });
--- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js
@@ -18,101 +18,101 @@ const DATA_URL_ATTRIBUTE = "data:image/p
 const DATA_URL_ATTRIBUTE_COLLAPSED = "data:image/png;base64,iVBORw0K\u20269/AFGGFyjOXZtQAAAAAElFTkSuQmCC";
 /* eslint-enable */
 
 var TEST_URL = "data:text/html,<div>markup-view attributes addition test</div>";
 var TEST_DATA = [{
   desc: "Add an attribute value containing < > &uuml; \" & '",
   text: 'src="somefile.html?param1=<a>&param2=&uuml;&param3=\'&quot;\'"',
   expectedAttributes: {
-    src: "somefile.html?param1=<a>&param2=\xfc&param3='\"'"
-  }
+    src: "somefile.html?param1=<a>&param2=\xfc&param3='\"'",
+  },
 }, {
   desc: "Add an attribute by clicking the empty space after a node",
   text: 'class="newclass" style="color:green"',
   expectedAttributes: {
     class: "newclass",
-    style: "color:green"
-  }
+    style: "color:green",
+  },
 }, {
   desc: "Try add an attribute containing a quote (\") attribute by " +
         "clicking the empty space after a node - this should result " +
         "in it being set to an empty string",
   text: 'class="newclass" style="""',
   expectedAttributes: {
     class: "newclass",
-    style: ""
-  }
+    style: "",
+  },
 }, {
   desc: "Try to add long data URL to make sure it is collapsed in attribute " +
         "editor.",
   text: `style='${DATA_URL_INLINE_STYLE}'`,
   expectedAttributes: {
-    "style": DATA_URL_INLINE_STYLE
+    "style": DATA_URL_INLINE_STYLE,
   },
   validate: (container, inspector) => {
     const editor = container.editor;
     const visibleAttrText = editor.attrElements.get("style")
                                              .querySelector(".attr-value")
                                              .textContent;
     is(visibleAttrText, DATA_URL_INLINE_STYLE_COLLAPSED);
-  }
+  },
 }, {
   desc: "Try to add long attribute to make sure it is collapsed in attribute " +
         "editor.",
   text: `data-long="${LONG_ATTRIBUTE}"`,
   expectedAttributes: {
-    "data-long": LONG_ATTRIBUTE
+    "data-long": LONG_ATTRIBUTE,
   },
   validate: (container, inspector) => {
     const editor = container.editor;
     const visibleAttrText = editor.attrElements.get("data-long")
                                              .querySelector(".attr-value")
                                              .textContent;
     is(visibleAttrText, LONG_ATTRIBUTE_COLLAPSED);
-  }
+  },
 }, {
   desc: "Try to add long data URL to make sure it is collapsed in attribute " +
         "editor.",
   text: `src="${DATA_URL_ATTRIBUTE}"`,
   expectedAttributes: {
-    "src": DATA_URL_ATTRIBUTE
+    "src": DATA_URL_ATTRIBUTE,
   },
   validate: (container, inspector) => {
     const editor = container.editor;
     const visibleAttrText = editor.attrElements.get("src")
                                 .querySelector(".attr-value").textContent;
     is(visibleAttrText, DATA_URL_ATTRIBUTE_COLLAPSED);
-  }
+  },
 }, {
   desc: "Try to add long attribute with collapseAttributes == false" +
   "to make sure it isn't collapsed in attribute editor.",
   text: `data-long="${LONG_ATTRIBUTE}"`,
   expectedAttributes: {
-    "data-long": LONG_ATTRIBUTE
+    "data-long": LONG_ATTRIBUTE,
   },
   setUp: function(inspector) {
     Services.prefs.setBoolPref("devtools.markup.collapseAttributes", false);
   },
   validate: (container, inspector) => {
     const editor = container.editor;
     const visibleAttrText = editor.attrElements
       .get("data-long")
       .querySelector(".attr-value")
       .textContent;
     is(visibleAttrText, LONG_ATTRIBUTE);
   },
   tearDown: function(inspector) {
     Services.prefs.clearUserPref("devtools.markup.collapseAttributes");
-  }
+  },
 }, {
   desc: "Try to collapse attributes with collapseAttributeLength == 5",
   text: `data-long="${LONG_ATTRIBUTE}"`,
   expectedAttributes: {
-    "data-long": LONG_ATTRIBUTE
+    "data-long": LONG_ATTRIBUTE,
   },
   setUp: function(inspector) {
     Services.prefs.setIntPref("devtools.markup.collapseAttributeLength", 2);
   },
   validate: (container, inspector) => {
     const firstChar = LONG_ATTRIBUTE[0];
     const lastChar = LONG_ATTRIBUTE[LONG_ATTRIBUTE.length - 1];
     const collapsed = firstChar + "\u2026" + lastChar;
@@ -120,16 +120,16 @@ var TEST_DATA = [{
     const visibleAttrText = editor.attrElements
       .get("data-long")
       .querySelector(".attr-value")
       .textContent;
     is(visibleAttrText, collapsed);
   },
   tearDown: function(inspector) {
     Services.prefs.clearUserPref("devtools.markup.collapseAttributeLength");
-  }
+  },
 }];
 
 add_task(async function() {
   const {inspector, testActor} = await openInspectorForURL(TEST_URL);
   await runAddAttributesTests(TEST_DATA, "div", inspector, testActor);
 });
 
--- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_08.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_08.js
@@ -32,17 +32,17 @@ async function testCollapsedLongAttribut
 
   onMutation = inspector.once("markupmutation");
   await testActor.setAttribute("#node24", "data-long", LONG_ATTRIBUTE);
   await onMutation;
 
   await assertAttributes("#node24", {
     id: "node24",
     "class": "",
-    "data-long": LONG_ATTRIBUTE
+    "data-long": LONG_ATTRIBUTE,
   }, testActor);
 
   const {editor} = await focusNode("#node24", inspector);
   const attr = editor.attrElements.get("data-long").querySelector(".editable");
 
   // Check to make sure it has expanded after focus
   attr.focus();
   EventUtils.sendKey("return", inspector.panelWin);
@@ -56,26 +56,26 @@ async function testCollapsedLongAttribut
   const visibleAttrText = editor.attrElements.get("data-long")
                               .querySelector(".attr-value").textContent;
   is(visibleAttrText, LONG_ATTRIBUTE_COLLAPSED);
 
   await assertAttributes("#node24", {
     id: "node24",
     class: "",
     "data-long": LONG_ATTRIBUTE,
-    "data-short": "ABC"
+    "data-short": "ABC",
   }, testActor);
 }
 
 async function testModifyInlineStyleWithQuotes(inspector, testActor) {
   info("Modify inline style containing \"");
 
   await assertAttributes("#node26", {
     id: "node26",
-    style: 'background-image: url("moz-page-thumb://thumbnail?url=http%3A%2F%2Fwww.mozilla.org%2F");'
+    style: 'background-image: url("moz-page-thumb://thumbnail?url=http%3A%2F%2Fwww.mozilla.org%2F");',
   }, testActor);
 
   const onMutated = inspector.once("markupmutation");
   const {editor} = await focusNode("#node26", inspector);
   const attr = editor.attrElements.get("style").querySelector(".editable");
 
   attr.focus();
   EventUtils.sendKey("return", inspector.panelWin);
@@ -92,26 +92,26 @@ async function testModifyInlineStyleWith
   input.value = value;
 
   EventUtils.sendKey("return", inspector.panelWin);
 
   await onMutated;
 
   await assertAttributes("#node26", {
     id: "node26",
-    style: 'background-image: url("moz-page-thumb://thumbnail?url=http%3A%2F%2Fwww.mozilla.com%2F");'
+    style: 'background-image: url("moz-page-thumb://thumbnail?url=http%3A%2F%2Fwww.mozilla.com%2F");',
   }, testActor);
 }
 
 async function testEditingAttributeWithMixedQuotes(inspector, testActor) {
   info("Modify class containing \" and \'");
 
   await assertAttributes("#node27", {
     "id": "node27",
-    "class": 'Double " and single \''
+    "class": 'Double " and single \'',
   }, testActor);
 
   const onMutated = inspector.once("markupmutation");
   const {editor} = await focusNode("#node27", inspector);
   const attr = editor.attrElements.get("class").querySelector(".editable");
 
   attr.focus();
   EventUtils.sendKey("return", inspector.panelWin);
@@ -125,11 +125,11 @@ async function testEditingAttributeWithM
   input.value = value;
 
   EventUtils.sendKey("return", inspector.panelWin);
 
   await onMutated;
 
   await assertAttributes("#node27", {
     id: "node27",
-    class: '" " and \' \''
+    class: '" " and \' \'',
   }, testActor);
 }
--- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_09.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_09.js
@@ -35,17 +35,17 @@ async function testWellformedMixedCase(i
   const input = inplaceEditor(attr).input;
   input.value = "viewBox=\"0 0 1 1\"";
   EventUtils.sendKey("return", inspector.panelWin);
   await onMutated;
 
   await assertAttributes("svg", {
     "viewBox": "0 0 1 1",
     "width": "200",
-    "height": "200"
+    "height": "200",
   }, testActor);
 }
 
 async function testMalformedMixedCase(inspector, testActor) {
   info("Modifying a malformed, mixed-case attribute, " +
     "expecting the attribute's case to be preserved");
 
   info("Listening to markup mutations");
@@ -61,11 +61,11 @@ async function testMalformedMixedCase(in
   const input = inplaceEditor(attr).input;
   input.value = "viewBox=\"<>\"";
   EventUtils.sendKey("return", inspector.panelWin);
   await onMutated;
 
   await assertAttributes("svg", {
     "viewBox": "<>",
     "width": "200",
-    "height": "200"
+    "height": "200",
   }, testActor);
 }
--- a/devtools/client/inspector/markup/test/browser_markup_textcontent_edit_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_textcontent_edit_01.js
@@ -14,39 +14,39 @@ add_task(async function() {
 
   info("Expanding all nodes");
   await inspector.markup.expandAll();
   await waitForMultipleChildrenUpdates(inspector);
 
   await editContainer(inspector, testActor, {
     selector: ".node6",
     newValue: "New text",
-    oldValue: "line6"
+    oldValue: "line6",
   });
 
   await editContainer(inspector, testActor, {
     selector: "#node17",
     newValue: "LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. " +
               "DONEC POSUERE PLACERAT MAGNA ET IMPERDIET.",
     oldValue: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +
-              "Donec posuere placerat magna et imperdiet."
+              "Donec posuere placerat magna et imperdiet.",
   });
 
   await editContainer(inspector, testActor, {
     selector: "#node17",
     newValue: "New value",
     oldValue: "LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. " +
-              "DONEC POSUERE PLACERAT MAGNA ET IMPERDIET."
+              "DONEC POSUERE PLACERAT MAGNA ET IMPERDIET.",
   });
 
   await editContainer(inspector, testActor, {
     selector: "#node17",
     newValue: "LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. " +
               "DONEC POSUERE PLACERAT MAGNA ET IMPERDIET.",
-    oldValue: "New value"
+    oldValue: "New value",
   });
 });
 
 async function editContainer(inspector, testActor,
                         {selector, newValue, oldValue}) {
   let nodeValue = await getFirstChildNodeValue(selector, testActor);
   is(nodeValue, oldValue, "The test node's text content is correct");
 
--- a/devtools/client/inspector/markup/test/head.js
+++ b/devtools/client/inspector/markup/test/head.js
@@ -432,29 +432,29 @@ async function simulateNodeDrag(inspecto
 
   info("Simulate mouseDown on element " + selector);
   container._onMouseDown({
     target: container.tagLine,
     button: 0,
     pageX: scrollX + rect.x,
     pageY: scrollY + rect.y,
     stopPropagation: () => {},
-    preventDefault: () => {}
+    preventDefault: () => {},
   });
 
   // _onMouseDown selects the node, so make sure to wait for the
   // inspector-updated event if the current selection was different.
   if (inspector.selection.nodeFront !== container.node) {
     await inspector.once("inspector-updated");
   }
 
   info("Simulate mouseMove on element " + selector);
   container.onMouseMove({
     pageX: scrollX + rect.x + xOffset,
-    pageY: scrollY + rect.y + yOffset
+    pageY: scrollY + rect.y + yOffset,
   });
 }
 
 /**
  * Simulate dropping a MarkupContainer by calling its mouseup handler. This is
  * meant to be called after simulateNodeDrag has been called.
  * @param {InspectorPanel} inspector The current inspector-panel instance.
  * @param {String|MarkupContainer} selector The selector to identify the node or
@@ -651,17 +651,17 @@ async function _checkMarkupViewNode(tree
  * Lines represent a simplified view of the markup, where the trimmed line is supposed to
  * be included in the text content of the actual markupview container.
  * This method returns an object that can be passed to _checkMarkupViewNode() to verify
  * the current markup view displays the expected structure.
  */
 function _parseMarkupViewTree(inputString) {
   const tree = {
     level: 0,
-    children: []
+    children: [],
   };
   let lines = inputString.split("\n");
   lines = lines.filter(l => l.trim());
 
   let currentNode = tree;
   for (const line of lines) {
     const nodeString = line.trim();
     const level = line.split("  ").length;
@@ -676,17 +676,17 @@ function _parseMarkupViewTree(inputStrin
       }
     }
 
     const node = {
       node: nodeString,
       children: [],
       parent,
       level,
-      path: parent.path + " " + nodeString
+      path: parent.path + " " + nodeString,
     };
 
     parent.children.push(node);
     currentNode = node;
   }
 
   return tree;
 }
--- a/devtools/client/inspector/markup/views/element-container.js
+++ b/devtools/client/inspector/markup/views/element-container.js
@@ -144,17 +144,17 @@ MarkupElementContainer.prototype = exten
     }
 
     try {
       const { data, size } = await this._getPreview();
       // The preview is ready.
       const options = {
         naturalWidth: size.naturalWidth,
         naturalHeight: size.naturalHeight,
-        maxDim: Services.prefs.getIntPref(PREVIEW_MAX_DIM_PREF)
+        maxDim: Services.prefs.getIntPref(PREVIEW_MAX_DIM_PREF),
       };
 
       setImageTooltip(tooltip, this.markup.doc, data, options);
     } catch (e) {
       // Indicate the failure but show the tooltip anyway.
       setBrokenImageTooltip(tooltip, this.markup.doc);
     }
     return true;
@@ -203,12 +203,12 @@ MarkupElementContainer.prototype = exten
     const undoMods = this.editor._startModifyingAttributes();
     this.editor._saveAttribute(attrName, undoMods);
     doMods.removeAttribute(attrName);
     this.undo.do(() => {
       doMods.apply();
     }, () => {
       undoMods.apply();
     });
-  }
+  },
 });
 
 module.exports = MarkupElementContainer;
--- a/devtools/client/inspector/markup/views/element-editor.js
+++ b/devtools/client/inspector/markup/views/element-editor.js
@@ -22,17 +22,17 @@ const INSPECTOR_L10N =
 // Page size for pageup/pagedown
 const COLLAPSE_DATA_URL_REGEX = /^data.+base64/;
 const COLLAPSE_DATA_URL_LENGTH = 60;
 
 // Contains only void (without end tag) HTML elements
 const HTML_VOID_ELEMENTS = [
   "area", "base", "br", "col", "command", "embed",
   "hr", "img", "input", "keygen", "link", "meta", "param", "source",
-  "track", "wbr"
+  "track", "wbr",
 ];
 
 // Contains only valid computed display property types of the node to display in the
 // element markup and their respective title tooltip text.
 const DISPLAY_TYPES = {
   "flex": INSPECTOR_L10N.getStr("markupView.display.flex.tooltiptext"),
   "inline-flex": INSPECTOR_L10N.getStr("markupView.display.flex.tooltiptext"),
   "grid": INSPECTOR_L10N.getStr("markupView.display.grid.tooltiptext"),
@@ -86,17 +86,17 @@ function ElementEditor(container, node) 
     this.tag.setAttribute("tabindex", "-1");
     editableField({
       element: this.tag,
       multiline: true,
       maxWidth: () => getAutocompleteMaxWidth(this.tag, this.container.elt),
       trigger: "dblclick",
       stopOnReturn: true,
       done: this.onTagEdit,
-      cssProperties: this._cssProperties
+      cssProperties: this._cssProperties,
     });
   }
 
   // Make the new attribute space editable.
   this.newAttr.editMode = editableField({
     element: this.newAttr,
     multiline: true,
     maxWidth: () => getAutocompleteMaxWidth(this.newAttr, this.container.elt),
@@ -113,17 +113,17 @@ function ElementEditor(container, node) 
       const undoMods = this._startModifyingAttributes();
       this._applyAttributes(val, null, doMods, undoMods);
       this.container.undo.do(() => {
         doMods.apply();
       }, function() {
         undoMods.apply();
       });
     },
-    cssProperties: this._cssProperties
+    cssProperties: this._cssProperties,
   });
 
   const displayName = this.node.displayName;
   this.tag.textContent = displayName;
   this.closeTag.textContent = displayName;
 
   const isVoidElement = HTML_VOID_ELEMENTS.includes(displayName);
   if (node.isInHTMLDocument && isVoidElement) {
@@ -512,17 +512,17 @@ ElementEditor.prototype = {
         doMods.removeAttribute(attribute.name);
         this._applyAttributes(newValue, attr, doMods, undoMods);
         this.container.undo.do(() => {
           doMods.apply();
         }, () => {
           undoMods.apply();
         });
       },
-      cssProperties: this._cssProperties
+      cssProperties: this._cssProperties,
     });
 
     // Figure out where we should place the attribute.
     if (attribute.name == "id") {
       before = this.attrList.firstChild;
     } else if (attribute.name == "class") {
       const idNode = this.attrElements.get("id");
       before = idNode ? idNode.nextSibling : this.attrList.firstChild;
@@ -839,12 +839,12 @@ ElementEditor.prototype = {
     }
 
     this.expandBadge.removeEventListener("click", this.onExpandBadgeClick);
 
     for (const key in this.animationTimers) {
       clearTimeout(this.animationTimers[key]);
     }
     this.animationTimers = null;
-  }
+  },
 };
 
 module.exports = ElementEditor;
--- a/devtools/client/inspector/markup/views/html-editor.js
+++ b/devtools/client/inspector/markup/views/html-editor.js
@@ -41,17 +41,17 @@ function HTMLEditor(htmlDocument) {
   this.doc.defaultView.addEventListener("resize",
     this.refresh, true);
 
   const config = {
     mode: Editor.modes.html,
     lineWrapping: true,
     styleActiveLine: false,
     extraKeys: {},
-    theme: "mozilla markup-view"
+    theme: "mozilla markup-view",
   };
 
   config.extraKeys[ctrl("Enter")] = this.hide;
   config.extraKeys.F2 = this.hide;
   config.extraKeys.Esc = this.hide.bind(this, false);
 
   this.container.addEventListener("click", this.hide);
   this.editorInner.addEventListener("click", stopPropagation);
@@ -162,17 +162,17 @@ HTMLEditor.prototype = {
     this.doc.defaultView.removeEventListener("resize",
       this.refresh, true);
     this.container.removeEventListener("click", this.hide);
     this.editorInner.removeEventListener("click", stopPropagation);
 
     this.hide(false);
     this.container.remove();
     this.editor.destroy();
-  }
+  },
 };
 
 function ctrl(k) {
   return (Services.appinfo.OS == "Darwin" ? "Cmd-" : "Ctrl-") + k;
 }
 
 function stopPropagation(e) {
   e.stopPropagation();
--- a/devtools/client/inspector/markup/views/markup-container.js
+++ b/devtools/client/inspector/markup/views/markup-container.js
@@ -808,12 +808,12 @@ MarkupContainer.prototype = {
       if (firstChild.container) {
         firstChild.container.destroy();
       }
       this.children.removeChild(firstChild);
       firstChild = this.children.firstChild;
     }
 
     this.editor.destroy();
-  }
+  },
 };
 
 module.exports = MarkupContainer;
--- a/devtools/client/inspector/markup/views/read-only-editor.js
+++ b/devtools/client/inspector/markup/views/read-only-editor.js
@@ -53,12 +53,12 @@ ReadOnlyEditor.prototype = {
     this.tag = null;
   },
 
   /**
    * Stub method for consistency with ElementEditor.
    */
   getInfoAtNode: function() {
     return null;
-  }
+  },
 };
 
 module.exports = ReadOnlyEditor;
--- a/devtools/client/inspector/markup/views/root-container.js
+++ b/devtools/client/inspector/markup/views/root-container.js
@@ -48,12 +48,12 @@ RootContainer.prototype = {
 
   /**
    * Set an appropriate DOM tree depth level for a node and its subtree.
    */
   updateLevel: function() {},
 
   isSlotted: function() {
     return false;
-  }
+  },
 };
 
 module.exports = RootContainer;
--- a/devtools/client/inspector/markup/views/slotted-node-container.js
+++ b/devtools/client/inspector/markup/views/slotted-node-container.js
@@ -58,12 +58,12 @@ SlottedNodeContainer.prototype = extend(
   },
 
   isDraggable: function() {
     return false;
   },
 
   isSlotted: function() {
     return true;
-  }
+  },
 });
 
 module.exports = SlottedNodeContainer;
--- a/devtools/client/inspector/markup/views/slotted-node-editor.js
+++ b/devtools/client/inspector/markup/views/slotted-node-editor.js
@@ -49,12 +49,12 @@ SlottedNodeEditor.prototype = {
     this.revealLink = null;
   },
 
   /**
    * Stub method for consistency with ElementEditor.
    */
   getInfoAtNode: function() {
     return null;
-  }
+  },
 };
 
 module.exports = SlottedNodeEditor;
--- a/devtools/client/inspector/markup/views/text-editor.js
+++ b/devtools/client/inspector/markup/views/text-editor.js
@@ -120,12 +120,12 @@ TextEditor.prototype = {
 
   destroy: function() {},
 
   /**
    * Stub method for consistency with ElementEditor.
    */
   getInfoAtNode: function() {
     return null;
-  }
+  },
 };
 
 module.exports = TextEditor;
--- a/devtools/client/inspector/panel.js
+++ b/devtools/client/inspector/panel.js
@@ -9,11 +9,11 @@ function InspectorPanel(iframeWindow, to
 }
 InspectorPanel.prototype = {
   open() {
     return this._inspector.init();
   },
 
   destroy() {
     return this._inspector.destroy();
-  }
+  },
 };
 exports.InspectorPanel = InspectorPanel;
--- a/devtools/client/inspector/rules/models/rule.js
+++ b/devtools/client/inspector/rules/models/rule.js
@@ -185,17 +185,17 @@ Rule.prototype = {
     for (const prop of this.textProps) {
       if (prop.invisible) {
         continue;
       }
       if (!prop.enabled) {
         disabledProps.push({
           name: prop.name,
           value: prop.value,
-          priority: prop.priority
+          priority: prop.priority,
         });
         continue;
       }
       if (prop.value.trim() === "") {
         continue;
       }
 
       modifications.setProperty(-1, prop.name, prop.value, prop.priority);
@@ -226,17 +226,17 @@ Rule.prototype = {
           continue;
         }
         let cssProp = cssProps[textProp.name];
 
         if (!cssProp) {
           cssProp = {
             name: textProp.name,
             value: "",
-            priority: ""
+            priority: "",
           };
         }
 
         textProp.priority = cssProp.priority;
       }
     });
   },
 
@@ -659,12 +659,12 @@ Rule.prototype = {
    */
   hasAnyVisibleProperties: function() {
     for (const prop of this.textProps) {
       if (!prop.invisible) {
         return true;
       }
     }
     return false;
-  }
+  },
 };
 
 module.exports = Rule;
--- a/devtools/client/inspector/rules/models/text-property.js
+++ b/devtools/client/inspector/rules/models/text-property.js
@@ -220,12 +220,12 @@ TextProperty.prototype = {
     }
 
     // Starting with FF61, StyleRuleActor provides an accessor to signal if the property
     // name is valid. If we don't have this, assume the name is valid. In use, rely on
     // isValid() as a guard against false positives.
     return (this.rule.domRule.declarations[selfIndex].isNameValid !== undefined)
       ? this.rule.domRule.declarations[selfIndex].isNameValid
       : true;
-  }
+  },
 };
 
 module.exports = TextProperty;
--- a/devtools/client/inspector/rules/models/user-properties.js
+++ b/devtools/client/inspector/rules/models/user-properties.js
@@ -74,12 +74,12 @@ UserProperties.prototype = {
   },
 
   getKey: function(style, name) {
     return style.actorID + ":" + name;
   },
 
   clear: function() {
     this.map.clear();
-  }
+  },
 };
 
 module.exports = UserProperties;
--- a/devtools/client/inspector/rules/rules.js
+++ b/devtools/client/inspector/rules/rules.js
@@ -307,17 +307,17 @@ CssRuleView.prototype = {
       selectorIcon.classList.add("highlighted");
       this.lastSelectorIcon = selectorIcon;
 
       const node = this.inspector.selection.nodeFront;
 
       await highlighter.show(node, {
         hideInfoBar: true,
         hideGuides: true,
-        selector
+        selector,
       });
 
       this.emit("ruleview-selectorhighlighter-toggled", true);
     } else {
       this.highlighters.selectorHighlighterShown = null;
       this.emit("ruleview-selectorhighlighter-toggled", false);
     }
   },
@@ -347,52 +347,52 @@ CssRuleView.prototype = {
       type = VIEW_NODE_PROPERTY_TYPE;
       value = {
         property: node.textContent,
         value: getPropertyNameAndValue(node).value,
         enabled: prop.enabled,
         overridden: prop.overridden,
         pseudoElement: prop.rule.pseudoElement,
         sheetHref: prop.rule.domRule.href,
-        textProperty: prop
+        textProperty: prop,
       };
     } else if (classes.contains("ruleview-propertyvalue") && prop) {
       type = VIEW_NODE_VALUE_TYPE;
       value = {
         property: getPropertyNameAndValue(node).name,
         value: node.textContent,
         enabled: prop.enabled,
         overridden: prop.overridden,
         pseudoElement: prop.rule.pseudoElement,
         sheetHref: prop.rule.domRule.href,
-        textProperty: prop
+        textProperty: prop,
       };
     } else if (classes.contains("ruleview-font-family") && prop) {
       type = VIEW_NODE_FONT_TYPE;
       value = {
         property: getPropertyNameAndValue(node).name,
         value: getPropertyNameAndValue(node).value,
         enabled: prop.enabled,
         overridden: prop.overridden,
         pseudoElement: prop.rule.pseudoElement,
         sheetHref: prop.rule.domRule.href,
-        textProperty: prop
+        textProperty: prop,
       };
     } else if (classes.contains("ruleview-shape-point") && prop) {
       type = VIEW_NODE_SHAPE_POINT_TYPE;
       value = {
         property: getPropertyNameAndValue(node).name,
         value: node.textContent,
         enabled: prop.enabled,
         overridden: prop.overridden,
         pseudoElement: prop.rule.pseudoElement,
         sheetHref: prop.rule.domRule.href,
         textProperty: prop,
         toggleActive: getShapeToggleActive(node),
-        point: getShapePoint(node)
+        point: getShapePoint(node),
       };
     } else if (classes.contains("ruleview-shapeswatch") && prop) {
       type = VIEW_NODE_SHAPE_SWATCH;
       value = {
         enabled: prop.enabled,
         overridden: prop.overridden,
         textProperty: prop,
       };
@@ -402,30 +402,30 @@ CssRuleView.prototype = {
       value = {
         property: getPropertyNameAndValue(node).name,
         value: node.textContent,
         enabled: prop.enabled,
         overridden: prop.overridden,
         pseudoElement: prop.rule.pseudoElement,
         sheetHref: prop.rule.domRule.href,
         textProperty: prop,
-        variable: node.dataset.variable
+        variable: node.dataset.variable,
       };
     } else if (classes.contains("theme-link") &&
                !classes.contains("ruleview-rule-source") && prop) {
       type = VIEW_NODE_IMAGE_URL_TYPE;
       value = {
         property: getPropertyNameAndValue(node).name,
         value: node.parentNode.textContent,
         url: node.href,
         enabled: prop.enabled,
         overridden: prop.overridden,
         pseudoElement: prop.rule.pseudoElement,
         sheetHref: prop.rule.domRule.href,
-        textProperty: prop
+        textProperty: prop,
       };
     } else if (classes.contains("ruleview-selector-unmatched") ||
                classes.contains("ruleview-selector-matched") ||
                classes.contains("ruleview-selectorcontainer") ||
                classes.contains("ruleview-selector") ||
                classes.contains("ruleview-selector-attribute") ||
                classes.contains("ruleview-selector-pseudo-class") ||
                classes.contains("ruleview-selector-pseudo-class-lock")) {
@@ -659,17 +659,17 @@ CssRuleView.prototype = {
 
       this.searchData = {
         searchPropertyMatch: FILTER_PROP_RE.exec(this.searchValue),
         searchPropertyName: this.searchValue,
         searchPropertyValue: this.searchValue,
         strictSearchValue: "",
         strictSearchPropertyName: false,
         strictSearchPropertyValue: false,
-        strictSearchAllValues: false
+        strictSearchAllValues: false,
       };
 
       if (this.searchData.searchPropertyMatch) {
         // Parse search value as a single property line and extract the
         // property name and value. If the parsed property name or value is
         // contained in backquotes (`), extract the value within the backquotes
         // and set the corresponding strict search for the property to true.
         if (FILTER_STRICT_RE.test(this.searchData.searchPropertyMatch[1])) {
@@ -990,17 +990,17 @@ CssRuleView.prototype = {
   _showEmpty: function() {
     if (this.styleDocument.getElementById("ruleview-no-results")) {
       return;
     }
 
     createChild(this.element, "div", {
       id: "ruleview-no-results",
       class: "devtools-sidepanel-no-result",
-      textContent: l10n("rule.empty")
+      textContent: l10n("rule.empty"),
     });
   },
 
   /**
    * Clear the rules.
    */
   _clearRules: function() {
     this.element.innerHTML = "";
@@ -1712,17 +1712,17 @@ function getPropertyNameAndValue(node) {
     if (!node || !node.classList) {
       return null;
     }
     // Check first for ruleview-computed since it's the deepest
     if (node.classList.contains("ruleview-computed") ||
         node.classList.contains("ruleview-property")) {
       return {
         name: node.querySelector(".ruleview-propertyname").textContent,
-        value: node.querySelector(".ruleview-propertyvalue").textContent
+        value: node.querySelector(".ruleview-propertyvalue").textContent,
       };
     }
     node = node.parentNode;
   }
 }
 
 /**
  * Walk up the DOM from a given node until a parent property holder is found,
@@ -1876,13 +1876,13 @@ RuleViewTool.prototype = {
       this.inspector.pageStyle.off("stylesheet-updated", this.refresh);
     }
 
     this.view.off("ruleview-refreshed", this.onViewRefreshed);
 
     this.view.destroy();
 
     this.view = this.document = this.inspector = null;
-  }
+  },
 };
 
 exports.CssRuleView = CssRuleView;
 exports.RuleViewTool = RuleViewTool;
--- a/devtools/client/inspector/rules/test/browser_rules_add-rule-namespace-elements.js
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule-namespace-elements.js
@@ -21,17 +21,17 @@ const XHTML = `
     </body>
   </html>
 `;
 const TEST_URI = "data:application/xhtml+xml;charset=utf-8," + encodeURI(XHTML);
 
 const TEST_DATA = [
   { node: "clipPath", expected: "clipPath" },
   { node: "rect", expected: "rect" },
-  { node: "circle", expected: "circle" }
+  { node: "circle", expected: "circle" },
 ];
 
 add_task(async function() {
   await addTab(TEST_URI);
   const {inspector, view} = await openRuleView();
 
   for (const data of TEST_DATA) {
     const {node, expected} = data;
--- a/devtools/client/inspector/rules/test/browser_rules_add-rule.js
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule.js
@@ -27,17 +27,17 @@ const TEST_URI = `
 const TEST_DATA = [
   { node: "#testid", expected: "#testid" },
   { node: ".testclass2", expected: ".testclass2" },
   { node: ".class1.class2", expected: ".class1.class2" },
   { node: ".class3.class4", expected: ".class3.class4" },
   { node: "p", expected: "p" },
   { node: "h1", expected: ".asd\\@\\@\\@\\@a\\!\\!\\!\\!\\:\\:\\:\\@asd" },
   { node: "h2", expected: "#asd\\@\\@\\@a\\!\\!2a" },
-  { node: "circle", expected: "circle" }
+  { node: "circle", expected: "circle" },
 ];
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const {inspector, view} = await openRuleView();
 
   for (const data of TEST_DATA) {
     const {node, expected} = data;
--- a/devtools/client/inspector/rules/test/browser_rules_authored.js
+++ b/devtools/client/inspector/rules/test/browser_rules_authored.js
@@ -30,17 +30,17 @@ add_task(async function() {
                                      "} ");
 
   const elementStyle = view._elementStyle;
 
   const expected = [
     {name: "something", overridden: true, isNameValid: false, isValid: false},
     {name: "color", overridden: true, isNameValid: true, isValid: false},
     {name: "background-color", overridden: true, isNameValid: true, isValid: true},
-    {name: "background-color", overridden: false, isNameValid: true, isValid: true}
+    {name: "background-color", overridden: false, isNameValid: true, isValid: true},
   ];
 
   const rule = elementStyle.rules[1];
 
   for (let i = 0; i < expected.length; ++i) {
     const prop = rule.textProps[i];
     is(prop.name, expected[i].name,
       "Check name for prop " + i);
--- a/devtools/client/inspector/rules/test/browser_rules_authored_color.js
+++ b/devtools/client/inspector/rules/test/browser_rules_authored_color.js
@@ -41,17 +41,17 @@ add_task(async function() {
     const cPicker = view.tooltips.getTooltip("colorPicker");
     const onColorPickerReady = cPicker.once("ready");
     swatch.click();
     await onColorPickerReady;
 
     await simulateColorPickerChange(view, cPicker, [0, 255, 0, 1], {
       selector,
       name: "color",
-      value: "rgb(0, 255, 0)"
+      value: "rgb(0, 255, 0)",
     });
 
     const spectrum = cPicker.spectrum;
     const onHidden = cPicker.tooltip.once("hidden");
     // Validating the color change ends up updating the rule view twice
     const onRuleViewChanged = waitForNEvents(view, "ruleview-changed", 2);
     focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
     await onHidden;
--- a/devtools/client/inspector/rules/test/browser_rules_class_panel_add.js
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_add.js
@@ -9,40 +9,40 @@
 // This array contains the list of test cases. Each test case contains these properties:
 // - {String} textEntered The text to be entered in the field
 // - {Boolean} expectNoMutation Set to true if we shouldn't wait for a DOM mutation
 // - {Array} expectedClasses The expected list of classes to be applied to the DOM and to
 //   be found in the class panel
 const TEST_ARRAY = [{
   textEntered: "",
   expectNoMutation: true,
-  expectedClasses: []
+  expectedClasses: [],
 }, {
   textEntered: "class",
-  expectedClasses: ["class"]
+  expectedClasses: ["class"],
 }, {
   textEntered: "class",
   expectNoMutation: true,
-  expectedClasses: ["class"]
+  expectedClasses: ["class"],
 }, {
   textEntered: "a a a a a a a a a a",
-  expectedClasses: ["class", "a"]
+  expectedClasses: ["class", "a"],
 }, {
   textEntered: "class2 class3",
-  expectedClasses: ["class", "a", "class2", "class3"]
+  expectedClasses: ["class", "a", "class2", "class3"],
 }, {
   textEntered: "                       ",
   expectNoMutation: true,
-  expectedClasses: ["class", "a", "class2", "class3"]
+  expectedClasses: ["class", "a", "class2", "class3"],
 }, {
   textEntered: "          class4",
-  expectedClasses: ["class", "a", "class2", "class3", "class4"]
+  expectedClasses: ["class", "a", "class2", "class3", "class4"],
 }, {
   textEntered: "    \t      class5      \t \t\t             ",
-  expectedClasses: ["class", "a", "class2", "class3", "class4", "class5"]
+  expectedClasses: ["class", "a", "class2", "class3", "class4", "class5"],
 }];
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8,");
   const {testActor, inspector, view} = await openRuleView();
 
   info("Open the class panel");
   view.showClassPanel();
--- a/devtools/client/inspector/rules/test/browser_rules_class_panel_content.js
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_content.js
@@ -6,45 +6,45 @@
 
 // Test that class panel shows the right content when selecting various nodes.
 
 // This array contains the list of test cases. Each test case contains these properties:
 // - {String} inputClassName The className on a node
 // - {Array} expectedClasses The expected list of classes in the class panel
 const TEST_ARRAY = [{
   inputClassName: "",
-  expectedClasses: []
+  expectedClasses: [],
 }, {
   inputClassName: "         a a a a           a a a      a   a",
-  expectedClasses: ["a"]
+  expectedClasses: ["a"],
 }, {
   inputClassName: "c1 c2 c3 c4 c5",
-  expectedClasses: ["c1", "c2", "c3", "c4", "c5"]
+  expectedClasses: ["c1", "c2", "c3", "c4", "c5"],
 }, {
   inputClassName: "a a b b c c a a b b c c",
-  expectedClasses: ["a", "b", "c"]
+  expectedClasses: ["a", "b", "c"],
 }, {
   inputClassName: "ajdhfkasjhdkjashdkjghaskdgkauhkbdhvliashdlghaslidghasldgliashdglhasli",
   expectedClasses: [
-    "ajdhfkasjhdkjashdkjghaskdgkauhkbdhvliashdlghaslidghasldgliashdglhasli"
-  ]
+    "ajdhfkasjhdkjashdkjghaskdgkauhkbdhvliashdlghaslidghasldgliashdglhasli",
+  ],
 }, {
   inputClassName: "c0 c1 c2 c3 c4 c5 c6 c7 c8 c9 " +
                   "c10 c11 c12 c13 c14 c15 c16 c17 c18 c19 " +
                   "c20 c21 c22 c23 c24 c25 c26 c27 c28 c29 " +
                   "c30 c31 c32 c33 c34 c35 c36 c37 c38 c39 " +
                   "c40 c41 c42 c43 c44 c45 c46 c47 c48 c49",
   expectedClasses: ["c0", "c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9",
                     "c10", "c11", "c12", "c13", "c14", "c15", "c16", "c17", "c18", "c19",
                     "c20", "c21", "c22", "c23", "c24", "c25", "c26", "c27", "c28", "c29",
                     "c30", "c31", "c32", "c33", "c34", "c35", "c36", "c37", "c38", "c39",
-                    "c40", "c41", "c42", "c43", "c44", "c45", "c46", "c47", "c48", "c49"]
+                    "c40", "c41", "c42", "c43", "c44", "c45", "c46", "c47", "c48", "c49"],
 }, {
   inputClassName: "  \n  \n class1  \t   class2 \t\tclass3\t",
-  expectedClasses: ["class1", "class2", "class3"]
+  expectedClasses: ["class1", "class2", "class3"],
 }];
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8,<div>");
   const {testActor, inspector, view} = await openRuleView();
 
   await selectNode("div", inspector);
 
--- a/devtools/client/inspector/rules/test/browser_rules_class_panel_edit.js
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_edit.js
@@ -12,40 +12,40 @@ add_task(async function() {
 
   info("Open the class panel");
   view.showClassPanel();
 
   info("Click on class1 and check that the checkbox is unchecked and the DOM is updated");
   await toggleClassPanelCheckBox(view, "class1");
   checkClassPanelContent(view, [
     {name: "class1", state: false},
-    {name: "class2", state: true}
+    {name: "class2", state: true},
   ]);
   let newClassName = await testActor.getAttribute("body", "class");
   is(newClassName, "class2", "The class attribute has been updated in the DOM");
 
   info("Click on class2 and check the same thing");
   await toggleClassPanelCheckBox(view, "class2");
   checkClassPanelContent(view, [
     {name: "class1", state: false},
-    {name: "class2", state: false}
+    {name: "class2", state: false},
   ]);
   newClassName = await testActor.getAttribute("body", "class");
   is(newClassName, "", "The class attribute has been updated in the DOM");
 
   info("Click on class2 and checks that the class is added again");
   await toggleClassPanelCheckBox(view, "class2");
   checkClassPanelContent(view, [
     {name: "class1", state: false},
-    {name: "class2", state: true}
+    {name: "class2", state: true},
   ]);
   newClassName = await testActor.getAttribute("body", "class");
   is(newClassName, "class2", "The class attribute has been updated in the DOM");
 
   info("And finally, click on class1 again and checks it is added again");
   await toggleClassPanelCheckBox(view, "class1");
   checkClassPanelContent(view, [
     {name: "class1", state: true},
-    {name: "class2", state: true}
+    {name: "class2", state: true},
   ]);
   newClassName = await testActor.getAttribute("body", "class");
   is(newClassName, "class1 class2", "The class attribute has been updated in the DOM");
 });
--- a/devtools/client/inspector/rules/test/browser_rules_class_panel_mutation.js
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_mutation.js
@@ -18,57 +18,57 @@ add_task(async function() {
   info("Trigger an unrelated mutation on the div (id attribute change)");
   let onMutation = view.inspector.once("markupmutation");
   await testActor.setAttribute("div", "id", "test-id");
   await onMutation;
 
   info("Check that the panel still contains the right classes");
   checkClassPanelContent(view, [
     {name: "c1", state: true},
-    {name: "c2", state: true}
+    {name: "c2", state: true},
   ]);
 
   info("Trigger a class mutation on a different, unknown, node");
   onMutation = view.inspector.once("markupmutation");
   await testActor.setAttribute("body", "class", "test-class");
   await onMutation;
 
   info("Check that the panel still contains the right classes");
   checkClassPanelContent(view, [
     {name: "c1", state: true},
-    {name: "c2", state: true}
+    {name: "c2", state: true},
   ]);
 
   info("Trigger a class mutation on the current node");
   onMutation = view.inspector.once("markupmutation");
   await testActor.setAttribute("div", "class", "c3 c4");
   await onMutation;
 
   info("Check that the panel now contains the new classes");
   checkClassPanelContent(view, [
     {name: "c3", state: true},
-    {name: "c4", state: true}
+    {name: "c4", state: true},
   ]);
 
   info("Change the state of one of the new classes");
   await toggleClassPanelCheckBox(view, "c4");
   checkClassPanelContent(view, [
     {name: "c3", state: true},
-    {name: "c4", state: false}
+    {name: "c4", state: false},
   ]);
 
   info("Select another node");
   await selectNode("body", inspector);
 
   info("Trigger a class mutation on the div");
   onMutation = view.inspector.once("markupmutation");
   await testActor.setAttribute("div", "class", "c5 c6 c7");
   await onMutation;
 
   info("Go back to the previous node and check the content of the class panel." +
        "Even if hidden, it should have refreshed when we changed the DOM");
   await selectNode("div", inspector);
   checkClassPanelContent(view, [
     {name: "c5", state: true},
     {name: "c6", state: true},
-    {name: "c7", state: true}
+    {name: "c7", state: true},
   ]);
 });
--- a/devtools/client/inspector/rules/test/browser_rules_colorUnit.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorUnit.js
@@ -13,17 +13,17 @@ const TEST_URI = `
     }
   </style>
   <div id='testid' class='testclass'>Styled Node</div>
 `;
 
 add_task(async function() {
   const TESTS = [
     {name: "hex", result: "#0f0"},
-    {name: "rgb", result: "rgb(0, 255, 0)"}
+    {name: "rgb", result: "rgb(0, 255, 0)"},
   ];
 
   for (const {name, result} of TESTS) {
     info("starting test for " + name);
     Services.prefs.setCharPref("devtools.defaultColorUnit", name);
 
     const tab = await addTab("data:text/html;charset=utf-8," +
                            encodeURIComponent(TEST_URI));
@@ -44,17 +44,17 @@ async function basicTest(view, name, res
       .querySelector(".ruleview-colorswatch");
   const onColorPickerReady = cPicker.once("ready");
   swatch.click();
   await onColorPickerReady;
 
   await simulateColorPickerChange(view, cPicker, [0, 255, 0, 1], {
     selector: "#testid",
     name: "color",
-    value: "rgb(0, 255, 0)"
+    value: "rgb(0, 255, 0)",
   });
 
   const spectrum = cPicker.spectrum;
   const onHidden = cPicker.tooltip.once("hidden");
   // Validating the color change ends up updating the rule view twice
   const onRuleViewChanged = waitForNEvents(view, "ruleview-changed", 2);
   focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
   await onHidden;
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_01.js
@@ -35,17 +35,17 @@ async function testImageTooltipAfterColo
   const picker = ruleView.tooltips.getTooltip("colorPicker");
   const onColorPickerReady = picker.once("ready");
   swatch.click();
   await onColorPickerReady;
 
   await simulateColorPickerChange(ruleView, picker, [0, 0, 0, 1], {
     selector: "body",
     name: "background-image",
-    value: 'url("chrome://global/skin/icons/warning-64.png"), linear-gradient(rgb(0, 0, 0), rgb(255, 0, 102) 400px)'
+    value: 'url("chrome://global/skin/icons/warning-64.png"), linear-gradient(rgb(0, 0, 0), rgb(255, 0, 102) 400px)',
   });
 
   const spectrum = picker.spectrum;
   const onHidden = picker.tooltip.once("hidden");
   const onModifications = ruleView.once("ruleview-changed");
   focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
   await onHidden;
   await onModifications;
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_02.js
@@ -34,17 +34,17 @@ async function testColorChangeIsntRevert
   const picker = ruleView.tooltips.getTooltip("colorPicker");
   const onColorPickerReady = picker.once("ready");
   swatch.click();
   await onColorPickerReady;
 
   await simulateColorPickerChange(ruleView, picker, [0, 0, 0, 1], {
     selector: "body",
     name: "background-color",
-    value: "rgb(0, 0, 0)"
+    value: "rgb(0, 0, 0)",
   });
 
   const spectrum = picker.spectrum;
 
   const onModifications = waitForNEvents(ruleView, "ruleview-changed", 2);
   const onHidden = picker.tooltip.once("hidden");
   focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
   await onHidden;
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-commit-on-ENTER.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-commit-on-ENTER.js
@@ -30,17 +30,17 @@ async function testPressingEnterCommitsC
 
   const onColorPickerReady = cPicker.once("ready");
   swatch.click();
   await onColorPickerReady;
 
   await simulateColorPickerChange(ruleView, cPicker, [0, 255, 0, .5], {
     selector: "body",
     name: "border-left-color",
-    value: "rgba(0, 255, 0, 0.5)"
+    value: "rgba(0, 255, 0, 0.5)",
   });
 
   is(swatch.style.backgroundColor, "rgba(0, 255, 0, 0.5)",
     "The color swatch's background was updated");
   is(getRuleViewProperty(ruleView, "body", "border").valueSpan.textContent,
     "2em solid rgba(0, 255, 0, 0.5)",
     "The text of the border css property was updated");
 
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-edit-gradient.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-edit-gradient.js
@@ -56,17 +56,17 @@ async function testPickingNewColor(view)
   const onColorPickerReady = cPicker.once("ready");
   swatchEl.click();
   await onColorPickerReady;
 
   const change = {
     selector: "body",
     name: "background-image",
     value: "linear-gradient(to left, rgb(1, 1, 1) 25%, " +
-           "rgb(51, 51, 51) 95%, rgb(0, 0, 0) 100%)"
+           "rgb(51, 51, 51) 95%, rgb(0, 0, 0) 100%)",
   };
   await simulateColorPickerChange(view, cPicker, [1, 1, 1, 1], change);
 
   is(swatchEl.style.backgroundColor, "rgb(1, 1, 1)",
     "The color swatch's background was updated");
   is(colorEl.textContent, "#010101", "The color text was updated");
   is((await getComputedStyleProperty("body", null, "background-image")),
     "linear-gradient(to left, rgb(1, 1, 1) 25%, rgb(51, 51, 51) 95%, " +
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-multiple-changes.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-multiple-changes.js
@@ -45,23 +45,23 @@ async function testSimpleMultipleColorCh
   const onColorPickerReady = picker.once("ready");
   swatch.click();
   await onColorPickerReady;
 
   info("Changing the color several times");
   const colors = [
     {rgba: [0, 0, 0, 1], computed: "rgb(0, 0, 0)"},
     {rgba: [100, 100, 100, 1], computed: "rgb(100, 100, 100)"},
-    {rgba: [200, 200, 200, 1], computed: "rgb(200, 200, 200)"}
+    {rgba: [200, 200, 200, 1], computed: "rgb(200, 200, 200)"},
   ];
   for (const {rgba, computed} of colors) {
     await simulateColorPickerChange(ruleView, picker, rgba, {
       selector: "p",
       name: "color",
-      value: computed
+      value: computed,
     });
   }
 
   is((await getComputedStyleProperty("p", null, "color")),
     "rgb(200, 200, 200)", "The color of the P tag is correct");
 }
 
 async function testComplexMultipleColorChanges(inspector, ruleView) {
@@ -76,23 +76,23 @@ async function testComplexMultipleColorC
   const onColorPickerReady = picker.once("ready");
   swatch.click();
   await onColorPickerReady;
 
   info("Changing the color several times");
   const colors = [
     {rgba: [0, 0, 0, 1], computed: "rgb(0, 0, 0)"},
     {rgba: [100, 100, 100, 1], computed: "rgb(100, 100, 100)"},
-    {rgba: [200, 200, 200, 1], computed: "rgb(200, 200, 200)"}
+    {rgba: [200, 200, 200, 1], computed: "rgb(200, 200, 200)"},
   ];
   for (const {rgba, computed} of colors) {
     await simulateColorPickerChange(ruleView, picker, rgba, {
       selector: "body",
       name: "background-color",
-      value: computed
+      value: computed,
     });
   }
 
   info("Closing the color picker");
   await hideTooltipAndWaitForRuleViewChanged(picker, ruleView);
 
   is((await getComputedStyleProperty("p", null, "color")),
     "rgb(200, 200, 200)", "The color of the P tag is still correct");
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-revert-on-ESC.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-revert-on-ESC.js
@@ -21,17 +21,17 @@ add_task(async function() {
   await testPressingEscapeRevertsChanges(view);
 });
 
 async function testPressingEscapeRevertsChanges(view) {
   const {swatch, propEditor, cPicker} = await openColorPickerAndSelectColor(view,
     1, 0, [0, 0, 0, 1], {
       selector: "body",
       name: "background-color",
-      value: "rgb(0, 0, 0)"
+      value: "rgb(0, 0, 0)",
     });
 
   is(swatch.style.backgroundColor, "rgb(0, 0, 0)",
     "The color swatch's background was updated");
   is(propEditor.valueSpan.textContent, "#000",
     "The text of the background-color css property was updated");
 
   const spectrum = cPicker.spectrum;
--- a/devtools/client/inspector/rules/test/browser_rules_completion-existing-property_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-existing-property_02.js
@@ -29,17 +29,17 @@ var testData = [
   ["VK_BACK_SPACE", {}, "blue !", !OPEN, !SELECTED, CHANGE],
   ["VK_BACK_SPACE", {}, "blue ", !OPEN, !SELECTED, CHANGE],
   ["VK_BACK_SPACE", {}, "blue", !OPEN, !SELECTED, CHANGE],
   ["VK_TAB", {shiftKey: true}, "color", !OPEN, !SELECTED, CHANGE],
   ["VK_BACK_SPACE", {}, "", !OPEN, !SELECTED, !CHANGE],
   ["d", {}, "display", OPEN, SELECTED, !CHANGE],
   ["VK_TAB", {}, "blue", !OPEN, !SELECTED, CHANGE],
   ["n", {}, "none", !OPEN, !SELECTED, CHANGE],
-  ["VK_RETURN", {}, null, !OPEN, !SELECTED, CHANGE]
+  ["VK_RETURN", {}, null, !OPEN, !SELECTED, CHANGE],
 ];
 
 const TEST_URI = "<h1 style='color: red'>Header</h1>";
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const {toolbox, inspector, view, testActor} = await openRuleView();
 
--- a/devtools/client/inspector/rules/test/browser_rules_completion-new-property_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_02.js
@@ -33,17 +33,17 @@ const testData = [
   ["VK_DOWN", {}, "red", OPEN, SELECTED, CHANGE],
   ["VK_DOWN", {}, "rgb", OPEN, SELECTED, CHANGE],
   ["VK_DOWN", {}, "rgba", OPEN, SELECTED, CHANGE],
   ["VK_DOWN", {}, "rosybrown", OPEN, SELECTED, CHANGE],
   ["VK_DOWN", {}, "royalblue", OPEN, SELECTED, CHANGE],
   ["VK_RIGHT", {}, "royalblue", !OPEN, !SELECTED, !CHANGE],
   [" ", {}, "royalblue aliceblue", OPEN, SELECTED, CHANGE],
   ["!", {}, "royalblue !important", !OPEN, !SELECTED, CHANGE],
-  ["VK_ESCAPE", {}, null, !OPEN, !SELECTED, CHANGE]
+  ["VK_ESCAPE", {}, null, !OPEN, !SELECTED, CHANGE],
 ];
 
 const TEST_URI = `
   <style type="text/css">
     h1 {
       border: 1px solid red;
     }
   </style>
--- a/devtools/client/inspector/rules/test/browser_rules_computed-lists_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_computed-lists_02.js
@@ -36,17 +36,17 @@ function testComputedList(inspector, vie
   ok(expander.hasAttribute("open"), "margin computed list is open");
 
   const computed = propEditor.prop.computed;
   const computedDom = propEditor.computed;
   const propNames = [
     "margin-top",
     "margin-right",
     "margin-bottom",
-    "margin-left"
+    "margin-left",
   ];
 
   is(computed.length, propNames.length, "There should be 4 computed values");
   is(computedDom.children.length, propNames.length,
      "There should be 4 nodes in the DOM");
 
   propNames.forEach((propName, i) => {
     const propValue = i + "px";
--- a/devtools/client/inspector/rules/test/browser_rules_copy_styles.js
+++ b/devtools/client/inspector/rules/test/browser_rules_copy_styles.js
@@ -27,74 +27,74 @@ add_task(async function() {
       menuItemLabel: "styleinspector.contextmenu.copyPropertyName",
       expectedPattern: "color",
       visible: {
         copyLocation: false,
         copyPropertyDeclaration: true,
         copyPropertyName: true,
         copyPropertyValue: false,
         copySelector: false,
-        copyRule: true
-      }
+        copyRule: true,
+      },
     },
     {
       desc: "Test Copy Property Value",
       node: ruleEditor.rule.textProps[2].editor.valueSpan,
       menuItemLabel: "styleinspector.contextmenu.copyPropertyValue",
       expectedPattern: "12px",
       visible: {
         copyLocation: false,
         copyPropertyDeclaration: true,
         copyPropertyName: false,
         copyPropertyValue: true,
         copySelector: false,
-        copyRule: true
-      }
+        copyRule: true,
+      },
     },
     {
       desc: "Test Copy Property Value with Priority",
       node: ruleEditor.rule.textProps[3].editor.valueSpan,
       menuItemLabel: "styleinspector.contextmenu.copyPropertyValue",
       expectedPattern: "#00F !important",
       visible: {
         copyLocation: false,
         copyPropertyDeclaration: true,
         copyPropertyName: false,
         copyPropertyValue: true,
         copySelector: false,
-        copyRule: true
-      }
+        copyRule: true,
+      },
     },
     {
       desc: "Test Copy Property Declaration",
       node: ruleEditor.rule.textProps[2].editor.nameSpan,
       menuItemLabel: "styleinspector.contextmenu.copyPropertyDeclaration",
       expectedPattern: "font-size: 12px;",
       visible: {
         copyLocation: false,
         copyPropertyDeclaration: true,
         copyPropertyName: true,
         copyPropertyValue: false,
         copySelector: false,
-        copyRule: true
-      }
+        copyRule: true,
+      },
     },
     {
       desc: "Test Copy Property Declaration with Priority",
       node: ruleEditor.rule.textProps[3].editor.nameSpan,
       menuItemLabel: "styleinspector.contextmenu.copyPropertyDeclaration",
       expectedPattern: "border-color: #00F !important;",
       visible: {
         copyLocation: false,
         copyPropertyDeclaration: true,
         copyPropertyName: true,
         copyPropertyValue: false,
         copySelector: false,
-        copyRule: true
-      }
+        copyRule: true,
+      },
     },
     {
       desc: "Test Copy Rule",
       node: ruleEditor.rule.textProps[2].editor.nameSpan,
       menuItemLabel: "styleinspector.contextmenu.copyRule",
       expectedPattern: "#testid {[\\r\\n]+" +
                        "\tcolor: #F00;[\\r\\n]+" +
                        "\tbackground-color: #00F;[\\r\\n]+" +
@@ -103,47 +103,47 @@ add_task(async function() {
                        "\t--var: \"\\*/\";[\\r\\n]+" +
                        "}",
       visible: {
         copyLocation: false,
         copyPropertyDeclaration: true,
         copyPropertyName: true,
         copyPropertyValue: false,
         copySelector: false,
-        copyRule: true
-      }
+        copyRule: true,
+      },
     },
     {
       desc: "Test Copy Selector",
       node: ruleEditor.selectorText,
       menuItemLabel: "styleinspector.contextmenu.copySelector",
       expectedPattern: "html, body, #testid",
       visible: {
         copyLocation: false,
         copyPropertyDeclaration: false,
         copyPropertyName: false,
         copyPropertyValue: false,
         copySelector: true,
-        copyRule: true
-      }
+        copyRule: true,
+      },
     },
     {
       desc: "Test Copy Location",
       node: ruleEditor.source,
       menuItemLabel: "styleinspector.contextmenu.copyLocation",
       expectedPattern: "http://example.com/browser/devtools/client/" +
                        "inspector/rules/test/doc_copystyles.css",
       visible: {
         copyLocation: true,
         copyPropertyDeclaration: false,
         copyPropertyName: false,
         copyPropertyValue: false,
         copySelector: false,
-        copyRule: true
-      }
+        copyRule: true,
+      },
     },
     {
       setup: async function() {
         await disableProperty(view, 0);
       },
       desc: "Test Copy Rule with Disabled Property",
       node: ruleEditor.rule.textProps[2].editor.nameSpan,
       menuItemLabel: "styleinspector.contextmenu.copyRule",
@@ -155,18 +155,18 @@ add_task(async function() {
                        "\t--var: \"\\*/\";[\\r\\n]+" +
                        "}",
       visible: {
         copyLocation: false,
         copyPropertyDeclaration: true,
         copyPropertyName: true,
         copyPropertyValue: false,
         copySelector: false,
-        copyRule: true
-      }
+        copyRule: true,
+      },
     },
     {
       setup: async function() {
         await disableProperty(view, 4);
       },
       desc: "Test Copy Rule with Disabled Property with Comment",
       node: ruleEditor.rule.textProps[2].editor.nameSpan,
       menuItemLabel: "styleinspector.contextmenu.copyRule",
@@ -178,32 +178,32 @@ add_task(async function() {
                        "\t/\\* --var: \"\\*\\\\\/\"; \\*\/[\\r\\n]+" +
                        "}",
       visible: {
         copyLocation: false,
         copyPropertyDeclaration: true,
         copyPropertyName: true,
         copyPropertyValue: false,
         copySelector: false,
-        copyRule: true
-      }
+        copyRule: true,
+      },
     },
     {
       desc: "Test Copy Property Declaration with Disabled Property",
       node: ruleEditor.rule.textProps[0].editor.nameSpan,
       menuItemLabel: "styleinspector.contextmenu.copyPropertyDeclaration",
       expectedPattern: "\/\\* color: #F00; \\*\/",
       visible: {
         copyLocation: false,
         copyPropertyDeclaration: true,
         copyPropertyName: true,
         copyPropertyValue: false,
         copySelector: false,
-        copyRule: true
-      }
+        copyRule: true,
+      },
     },
   ];
 
   for (const { setup, desc, node, menuItemLabel, expectedPattern, visible } of data) {
     if (setup) {
       await setup();
     }
 
--- a/devtools/client/inspector/rules/test/browser_rules_cubicbezier-revert-on-ESC.js
+++ b/devtools/client/inspector/rules/test/browser_rules_cubicbezier-revert-on-ESC.js
@@ -21,17 +21,17 @@ add_task(async function() {
   await testPressingEscapeRevertsChanges(view);
 });
 
 async function testPressingEscapeRevertsChanges(view) {
   const {propEditor} = await openCubicBezierAndChangeCoords(view, 1, 0,
     [0.1, 2, 0.9, -1], {
       selector: "body",
       name: "animation-timing-function",
-      value: "cubic-bezier(0.1, 2, 0.9, -1)"
+      value: "cubic-bezier(0.1, 2, 0.9, -1)",
     });
 
   is(propEditor.valueSpan.textContent, "cubic-bezier(.1,2,.9,-1)",
     "Got expected property value.");
 
   await escapeTooltip(view);
 
   await waitForComputedStyleProperty("body", null, "animation-timing-function",
--- a/devtools/client/inspector/rules/test/browser_rules_cycle-angle.js
+++ b/devtools/client/inspector/rules/test/browser_rules_cycle-angle.js
@@ -30,26 +30,26 @@ async function checkAngleCycling(contain
   const valueNode = container.querySelector(".ruleview-angle");
   const win = view.styleWindow;
 
   // turn
   is(valueNode.textContent, "1turn", "Angle displayed as a turn value.");
 
   const tests = [{
     value: "360deg",
-    comment: "Angle displayed as a degree value."
+    comment: "Angle displayed as a degree value.",
   }, {
     value: `${Math.round(Math.PI * 2 * 10000) / 10000}rad`,
-    comment: "Angle displayed as a radian value."
+    comment: "Angle displayed as a radian value.",
   }, {
     value: "400grad",
-    comment: "Angle displayed as a gradian value."
+    comment: "Angle displayed as a gradian value.",
   }, {
     value: "1turn",
-    comment: "Angle displayed as a turn value again."
+    comment: "Angle displayed as a turn value again.",
   }];
 
   for (const test of tests) {
     await checkSwatchShiftClick(container, win, test.value, test.comment);
   }
 }
 
 async function checkAngleCyclingPersist(inspector, view) {
@@ -79,13 +79,13 @@ async function checkAngleCyclingPersist(
 
 async function checkSwatchShiftClick(container, win, expectedValue, comment) {
   const swatch = container.querySelector(".ruleview-angleswatch");
   const valueNode = container.querySelector(".ruleview-angle");
 
   const onUnitChange = swatch.once("unit-change");
   EventUtils.synthesizeMouseAtCenter(swatch, {
     type: "mousedown",
-    shiftKey: true
+    shiftKey: true,
   }, win);
   await onUnitChange;
   is(valueNode.textContent, expectedValue, comment);
 }
--- a/devtools/client/inspector/rules/test/browser_rules_cycle-color.js
+++ b/devtools/client/inspector/rules/test/browser_rules_cycle-color.js
@@ -32,29 +32,29 @@ async function checkColorCycling(contain
   const valueNode = container.querySelector(".ruleview-color");
   const win = view.styleWindow;
 
   // Hex
   is(valueNode.textContent, "#f00", "Color displayed as a hex value.");
 
   const tests = [{
     value: "hsl(0, 100%, 50%)",
-    comment: "Color displayed as an HSL value."
+    comment: "Color displayed as an HSL value.",
   }, {
     value: "rgb(255, 0, 0)",
-    comment: "Color displayed as an RGB value."
+    comment: "Color displayed as an RGB value.",
   }, {
     value: "red",
-    comment: "Color displayed as a color name."
+    comment: "Color displayed as a color name.",
   }, {
     value: "#f00",
-    comment: "Color displayed as an authored value."
+    comment: "Color displayed as an authored value.",
   }, {
     value: "hsl(0, 100%, 50%)",
-    comment: "Color displayed as an HSL value again."
+    comment: "Color displayed as an HSL value again.",
   }];
 
   for (const test of tests) {
     await checkSwatchShiftClick(container, win, test.value, test.comment);
   }
 }
 
 async function checkAlphaColorCycling(inspector, view) {
@@ -63,23 +63,23 @@ async function checkAlphaColorCycling(in
   const valueNode = container.querySelector(".ruleview-color");
   const win = view.styleWindow;
 
   is(valueNode.textContent, "#ff000080",
     "Color displayed as an alpha hex value.");
 
   const tests = [{
     value: "hsla(0, 100%, 50%, 0.5)",
-    comment: "Color displayed as an HSLa value."
+    comment: "Color displayed as an HSLa value.",
   }, {
     value: "rgba(255, 0, 0, 0.5)",
-    comment: "Color displayed as an RGBa value."
+    comment: "Color displayed as an RGBa value.",
   }, {
     value: "#ff000080",
-    comment: "Color displayed as an alpha hex value again."
+    comment: "Color displayed as an alpha hex value again.",
   }];
 
   for (const test of tests) {
     await checkSwatchShiftClick(container, win, test.value, test.comment);
   }
 }
 
 async function checkColorCyclingPersist(inspector, view) {
@@ -108,13 +108,13 @@ async function checkColorCyclingPersist(
 
 async function checkSwatchShiftClick(container, win, expectedValue, comment) {
   const swatch = container.querySelector(".ruleview-colorswatch");
   const valueNode = container.querySelector(".ruleview-color");
 
   const onUnitChange = swatch.once("unit-change");
   EventUtils.synthesizeMouseAtCenter(swatch, {
     type: "mousedown",
-    shiftKey: true
+    shiftKey: true,
   }, win);
   await onUnitChange;
   is(valueNode.textContent, expectedValue, comment);
 }
--- a/devtools/client/inspector/rules/test/browser_rules_edit-property-commit.js
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-commit.js
@@ -23,35 +23,35 @@ const TEST_URI = `
 //  modifiers: commitKey modifiers,
 //  expected: what value is expected as a result
 // }
 const testData = [
   {
     value: "red",
     commitKey: "VK_ESCAPE",
     modifiers: {},
-    expected: "#00F"
+    expected: "#00F",
   },
   {
     value: "red",
     commitKey: "VK_RETURN",
     modifiers: {},
-    expected: "red"
+    expected: "red",
   },
   {
     value: "invalid",
     commitKey: "VK_RETURN",
     modifiers: {},
-    expected: "invalid"
+    expected: "invalid",
   },
   {
     value: "blue",
     commitKey: "VK_TAB", modifiers: {shiftKey: true},
-    expected: "blue"
-  }
+    expected: "blue",
+  },
 ];
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const {inspector, view} = await openRuleView();
   await selectNode("#testid", inspector);
 
   for (const data of testData) {
--- a/devtools/client/inspector/rules/test/browser_rules_edit-property-computed.js
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-computed.js
@@ -61,17 +61,17 @@ async function editAndCheck(view) {
   info("Waiting for the style changes to be applied");
   await once(view, "ruleview-changed");
 
   const computed = prop.computed;
   const propNames = [
     "padding-top",
     "padding-right",
     "padding-bottom",
-    "padding-left"
+    "padding-left",
   ];
 
   is(computed.length, propNames.length, "There should be 4 computed values");
   propNames.forEach((propName, i) => {
     is(computed[i].name, propName,
       "Computed property #" + i + " has name " + propName);
     is(computed[i].value, newPaddingValue,
       "Computed value of " + propName + " is as expected");
--- a/devtools/client/inspector/rules/test/browser_