Bug 1274964 - ESLint cleanup of devtools/client/inspector; r=jryans
authorPatrick Brosset <pbrosset@mozilla.com>
Mon, 23 May 2016 10:41:02 +0200
changeset 298922 00f9eb3e72e805caebd204b780dc904877cab590
parent 298715 a35738e12eb382c6181c530b00b814d72c7a1b7b
child 298923 e8f4f77bd99eee8e95262779c90235ce5aaaafe4
push id77374
push usercbook@mozilla.com
push dateWed, 25 May 2016 13:20:27 +0000
treeherdermozilla-inbound@0bc5c825c58e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjryans
bugs1274964
milestone49.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1274964 - ESLint cleanup of devtools/client/inspector; r=jryans MozReview-Commit-ID: HCRVzU6NdM4
.eslintignore
devtools/client/inspector/fonts/test/browser_fontinspector.js
devtools/client/inspector/fonts/test/head.js
devtools/client/inspector/inspector-panel.js
devtools/client/inspector/inspector-search.js
devtools/client/inspector/test/browser_inspector_breadcrumbs_highlight_hover.js
devtools/client/inspector/test/browser_inspector_delete-selected-node-02.js
devtools/client/inspector/test/browser_inspector_destroy-before-ready.js
devtools/client/inspector/test/browser_inspector_expand-collapse.js
devtools/client/inspector/test/browser_inspector_gcli-inspect-command.js
devtools/client/inspector/test/browser_inspector_highlighter-01.js
devtools/client/inspector/test/browser_inspector_highlighter-02.js
devtools/client/inspector/test/browser_inspector_highlighter-03.js
devtools/client/inspector/test/browser_inspector_highlighter-by-type.js
devtools/client/inspector/test/browser_inspector_highlighter-comments.js
devtools/client/inspector/test/browser_inspector_highlighter-csstransform_01.js
devtools/client/inspector/test/browser_inspector_highlighter-csstransform_02.js
devtools/client/inspector/test/browser_inspector_highlighter-hover_01.js
devtools/client/inspector/test/browser_inspector_highlighter-hover_02.js
devtools/client/inspector/test/browser_inspector_highlighter-iframes_01.js
devtools/client/inspector/test/browser_inspector_highlighter-inline.js
devtools/client/inspector/test/browser_inspector_highlighter-keybinding_01.js
devtools/client/inspector/test/browser_inspector_highlighter-keybinding_02.js
devtools/client/inspector/test/browser_inspector_highlighter-keybinding_03.js
devtools/client/inspector/test/browser_inspector_highlighter-options.js
devtools/client/inspector/test/browser_inspector_highlighter-rect_01.js
devtools/client/inspector/test/browser_inspector_highlighter-rect_02.js
devtools/client/inspector/test/browser_inspector_highlighter-rulers_01.js
devtools/client/inspector/test/browser_inspector_highlighter-rulers_02.js
devtools/client/inspector/test/browser_inspector_highlighter-xbl.js
devtools/client/inspector/test/browser_inspector_highlighter-zoom.js
devtools/client/inspector/test/browser_inspector_iframe-navigation.js
devtools/client/inspector/test/browser_inspector_infobar_01.js
devtools/client/inspector/test/browser_inspector_initialization.js
devtools/client/inspector/test/browser_inspector_invalidate.js
devtools/client/inspector/test/browser_inspector_keyboard-shortcuts-copy-outerhtml.js
devtools/client/inspector/test/browser_inspector_menu-01-sensitivity.js
devtools/client/inspector/test/browser_inspector_menu-03-paste-items.js
devtools/client/inspector/test/browser_inspector_menu-04-use-in-console.js
devtools/client/inspector/test/browser_inspector_menu-05-attribute-items.js
devtools/client/inspector/test/browser_inspector_menu-06-other.js
devtools/client/inspector/test/browser_inspector_pane-toggle-01.js
devtools/client/inspector/test/browser_inspector_picker-stop-on-destroy.js
devtools/client/inspector/test/browser_inspector_pseudoclass-lock.js
devtools/client/inspector/test/browser_inspector_pseudoclass-menu.js
devtools/client/inspector/test/browser_inspector_remove-iframe-during-load.js
devtools/client/inspector/test/browser_inspector_search-01.js
devtools/client/inspector/test/browser_inspector_search-03.js
devtools/client/inspector/test/browser_inspector_search-04.js
devtools/client/inspector/test/browser_inspector_search-05.js
devtools/client/inspector/test/browser_inspector_search-reserved.js
devtools/client/inspector/test/browser_inspector_search-selection.js
devtools/client/inspector/test/browser_inspector_search-suggests-ids-and-classes.js
devtools/client/inspector/test/browser_inspector_search_keyboard_trap.js
devtools/client/inspector/test/browser_inspector_select-docshell.js
devtools/client/inspector/test/browser_inspector_select-last-selected.js
devtools/client/inspector/test/doc_inspector_highlighter-comments.html
devtools/client/inspector/test/doc_inspector_remove-iframe-during-load.html
devtools/client/inspector/test/head.js
--- a/.eslintignore
+++ b/.eslintignore
@@ -78,22 +78,16 @@ browser/locales/**
 browser/extensions/loop/**
 
 # devtools/ exclusions
 devtools/client/canvasdebugger/**
 devtools/client/commandline/**
 devtools/client/debugger/**
 devtools/client/eyedropper/**
 devtools/client/framework/**
-# devtools/client/inspector/shared/*.js files are eslint-clean, so they aren't
-# included in the ignore list.
-devtools/client/inspector/fonts/**
-devtools/client/inspector/test/**
-devtools/client/inspector/*.js
-!devtools/client/inspector/breadcrumbs.js
 devtools/client/jsonview/lib/**
 devtools/client/memory/**
 devtools/client/netmonitor/test/**
 devtools/client/netmonitor/har/test/**
 devtools/client/performance/**
 devtools/client/projecteditor/**
 devtools/client/promisedebugger/**
 devtools/client/responsivedesign/**
--- a/devtools/client/inspector/fonts/test/browser_fontinspector.js
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector.js
@@ -1,26 +1,41 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
 requestLongerTimeout(2);
 
 const TEST_URI = URL_ROOT + "browser_fontinspector.html";
-const FONTS = [
-  {name: "Ostrich Sans Medium", remote: true, url: URL_ROOT + "ostrich-regular.ttf",
-   format: "truetype", cssName: "bar"},
-  {name: "Ostrich Sans Black", remote: true, url: URL_ROOT + "ostrich-black.ttf",
-   format: "", cssName: "bar"},
-  {name: "Ostrich Sans Black", remote: true, url: URL_ROOT + "ostrich-black.ttf",
-   format: "", cssName: "bar"},
-  {name: "Ostrich Sans Medium", remote: true, url: URL_ROOT + "ostrich-regular.ttf",
-   format: "", cssName: "barnormal"},
-];
+const FONTS = [{
+  name: "Ostrich Sans Medium",
+  remote: true,
+  url: URL_ROOT + "ostrich-regular.ttf",
+  format: "truetype",
+  cssName: "bar"
+}, {
+  name: "Ostrich Sans Black",
+  remote: true,
+  url: URL_ROOT + "ostrich-black.ttf",
+  format: "",
+  cssName: "bar"
+}, {
+  name: "Ostrich Sans Black",
+  remote: true,
+  url: URL_ROOT + "ostrich-black.ttf",
+  format: "",
+  cssName: "bar"
+}, {
+  name: "Ostrich Sans Medium",
+  remote: true,
+  url: URL_ROOT + "ostrich-regular.ttf",
+  format: "",
+  cssName: "barnormal"
+}];
 
 add_task(function* () {
   let { inspector, view } = yield openFontInspectorForURL(TEST_URI);
   ok(!!view, "Font inspector document is alive.");
 
   let viewDoc = view.chromeDoc;
 
   yield testBodyFonts(inspector, viewDoc);
@@ -69,18 +84,19 @@ function* testBodyFonts(inspector, viewD
 
 function* testDivFonts(inspector, viewDoc) {
   let updated = inspector.once("fontinspector-updated");
   yield selectNode("div", inspector);
   yield updated;
 
   let sections1 = viewDoc.querySelectorAll("#all-fonts > section");
   is(sections1.length, 1, "Found 1 font on DIV");
-  is(sections1[0].querySelector(".font-name").textContent, "Ostrich Sans Medium",
-    "The DIV font has the right name");
+  is(sections1[0].querySelector(".font-name").textContent,
+     "Ostrich Sans Medium",
+     "The DIV font has the right name");
 }
 
 function* testShowAllFonts(inspector, viewDoc) {
   info("testing showing all fonts");
 
   let updated = inspector.once("fontinspector-updated");
   viewDoc.querySelector("#font-showall").click();
   yield updated;
--- a/devtools/client/inspector/fonts/test/head.js
+++ b/devtools/client/inspector/fonts/test/head.js
@@ -1,12 +1,14 @@
  /* vim: set ts=2 et sw=2 tw=80: */
 /* 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/. */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+/* import-globals-from ../../test/head.js */
 "use strict";
 
 // Import the inspector's head.js first (which itself imports shared-head.js).
 Services.scriptloader.loadSubScript(
   "chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
   this);
 
 Services.prefs.setBoolPref("devtools.fontinspector.enabled", true);
--- a/devtools/client/inspector/inspector-panel.js
+++ b/devtools/client/inspector/inspector-panel.js
@@ -1,23 +1,24 @@
 /* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* 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/. */
+/* Experimenting with 100 char long lines */
+/* eslint max-len: [2, 100, 2, {ignoreUrls: true, "ignorePattern": "\\s*require\\s*\\(|^\\s*loader\\.lazy|-\\*-"}] */ // eslint-disable-line
 
 "use strict";
 
-const {Cc, Ci, Cu} = require("chrome");
+const {Cc, Ci} = require("chrome");
 
 var Services = require("Services");
 var promise = require("promise");
 var EventEmitter = require("devtools/shared/event-emitter");
 var clipboard = require("sdk/clipboard");
-var {HostType} = require("devtools/client/framework/toolbox").Toolbox;
 const {executeSoon} = require("devtools/shared/DevToolsUtils");
 var {KeyShortcuts} = require("devtools/client/shared/key-shortcuts");
 var {Task} = require("devtools/shared/task");
 
 loader.lazyRequireGetter(this, "CSS", "CSS");
 
 loader.lazyRequireGetter(this, "CommandUtils", "devtools/client/shared/developer-toolbar", true);
 loader.lazyRequireGetter(this, "ComputedViewTool", "devtools/client/inspector/computed/computed", true);
@@ -35,17 +36,16 @@ loader.lazyGetter(this, "strings", () =>
 });
 loader.lazyGetter(this, "toolboxStrings", () => {
   return Services.strings.createBundle("chrome://devtools/locale/toolbox.properties");
 });
 loader.lazyGetter(this, "clipboardHelper", () => {
   return Cc["@mozilla.org/widget/clipboardhelper;1"].getService(Ci.nsIClipboardHelper);
 });
 
-
 /**
  * Represents an open instance of the Inspector for a tab.
  * The inspector controls the breadcrumbs, the markup view, and the sidebar
  * (computed view, rule view, font view and layout view).
  *
  * Events:
  * - ready
  *      Fired when the inspector panel is opened for the first time and ready to
@@ -186,17 +186,16 @@ InspectorPanel.prototype = {
 
         if (notification && this._toolbox.currentToolId != "inspector") {
           notificationBox.removeNotification(notification);
         }
 
         if (notification && !this._toolbox.threadClient.paused) {
           notificationBox.removeNotification(notification);
         }
-
       };
       this.target.on("thread-paused", this.updateDebuggerPausedWarning);
       this.target.on("thread-resumed", this.updateDebuggerPausedWarning);
       this._toolbox.on("select", this.updateDebuggerPausedWarning);
       this.updateDebuggerPausedWarning();
     }
 
     this._initMarkup();
@@ -246,25 +245,26 @@ InspectorPanel.prototype = {
     let pendingSelection = this._pendingSelection;
 
     // A helper to tell if the target has or is about to navigate.
     // this._pendingSelection changes on "will-navigate" and "new-root" events.
     let hasNavigated = () => pendingSelection !== this._pendingSelection;
 
     // If available, set either the previously selected node or the body
     // as default selected, else set documentElement
-    return walker.getRootNode().then(aRootNode => {
+    return walker.getRootNode().then(node => {
       if (hasNavigated()) {
         return promise.reject("navigated; resolution of _defaultNode aborted");
       }
 
-      rootNode = aRootNode;
+      rootNode = node;
       if (this.selectionCssSelector) {
         return walker.querySelector(rootNode, this.selectionCssSelector);
       }
+      return null;
     }).then(front => {
       if (hasNavigated()) {
         return promise.reject("navigated; resolution of _defaultNode aborted");
       }
 
       if (front) {
         return front;
       }
@@ -386,17 +386,17 @@ InspectorPanel.prototype = {
       this.panelDoc.getElementById("sidebar-tab-fontinspector").hidden = false;
     }
 
     this.layoutview = new LayoutView(this, this.panelWin);
 
     if (this.target.form.animationsActor) {
       this.sidebar.addTab("animationinspector",
                           "chrome://devtools/content/animationinspector/animation-inspector.xhtml",
-                          "animationinspector" == defaultTab);
+                          defaultTab == "animationinspector");
     }
 
     this.sidebar.show(defaultTab);
 
     this.setupSidebarToggle();
   },
 
   /**
@@ -462,19 +462,18 @@ InspectorPanel.prototype = {
   /**
    * 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() {
     if (this._selectionCssSelector &&
         this._selectionCssSelector.url === this._target.url) {
       return this._selectionCssSelector.selector;
-    } else {
-      return null;
     }
+    return null;
   },
 
   /**
    * Can a new HTML element be inserted into the currently selected element?
    * @return {Boolean}
    */
   canAddHTMLChild: function () {
     let selection = this.selection;
@@ -683,23 +682,23 @@ InspectorPanel.prototype = {
     ]);
 
     return this._panelDestroyer;
   },
 
   /**
    * Show the node menu.
    */
-  showNodeMenu: function (aButton, aPosition, aExtraItems) {
-    if (aExtraItems) {
-      for (let item of aExtraItems) {
+  showNodeMenu: function (button, position, extraItems) {
+    if (extraItems) {
+      for (let item of extraItems) {
         this.nodemenu.appendChild(item);
       }
     }
-    this.nodemenu.openPopup(aButton, aPosition, 0, 0, true, false);
+    this.nodemenu.openPopup(button, position, 0, 0, true, false);
   },
 
   hideNodeMenu: function () {
     this.nodemenu.hidePopup();
   },
 
   /**
    * Returns the clipboard content if it is appropriate for pasting
@@ -791,18 +790,17 @@ InspectorPanel.prototype = {
       duplicateNode.hidden = !value;
     });
     this._target.actorHasMethod("domnode", "scrollIntoView").then(value => {
       scrollIntoView.hidden = !value;
     });
 
     if (isDuplicatableElement) {
       duplicateNode.removeAttribute("disabled");
-    }
-    else {
+    } else {
       duplicateNode.setAttribute("disabled", "true");
     }
 
     if (isSelectionElement) {
       unique.removeAttribute("disabled");
       copyInnerHTML.removeAttribute("disabled");
       copyOuterHTML.removeAttribute("disabled");
       scrollIntoView.removeAttribute("disabled");
@@ -992,17 +990,18 @@ InspectorPanel.prototype = {
     this._markupFrame.setAttribute("context", "inspector-node-popup");
 
     // This is needed to enable tooltips inside the iframe document.
     this._markupFrame.addEventListener("load", this._onMarkupFrameLoad, true);
 
     this._markupBox.setAttribute("collapsed", true);
     this._markupBox.appendChild(this._markupFrame);
     this._markupFrame.setAttribute("src", "chrome://devtools/content/inspector/markup/markup.xhtml");
-    this._markupFrame.setAttribute("aria-label", strings.GetStringFromName("inspector.panelLabel.markupView"));
+    this._markupFrame.setAttribute("aria-label",
+      strings.GetStringFromName("inspector.panelLabel.markupView"));
   },
 
   _onMarkupFrameLoad: function () {
     this._markupFrame.removeEventListener("load", this._onMarkupFrameLoad, true);
 
     this._markupFrame.contentWindow.focus();
 
     this._markupBox.removeAttribute("collapsed");
@@ -1091,26 +1090,27 @@ InspectorPanel.prototype = {
 
     // Select the new node (this will auto-expand its parent).
     this.selection.setNodeFront(nodes[0], "node-inserted");
   }),
 
   /**
    * Toggle a pseudo class.
    */
-  togglePseudoClass: function (aPseudo) {
+  togglePseudoClass: function (pseudo) {
     if (this.selection.isElementNode()) {
       let node = this.selection.nodeFront;
-      if (node.hasPseudoClassLock(aPseudo)) {
-        return this.walker.removePseudoClassLock(node, aPseudo, {parents: true});
+      if (node.hasPseudoClassLock(pseudo)) {
+        return this.walker.removePseudoClassLock(node, pseudo, {parents: true});
       }
 
-      let hierarchical = aPseudo == ":hover" || aPseudo == ":active";
-      return this.walker.addPseudoClassLock(node, aPseudo, {parents: hierarchical});
+      let hierarchical = pseudo == ":hover" || pseudo == ":active";
+      return this.walker.addPseudoClassLock(node, pseudo, {parents: hierarchical});
     }
+    return promise.resolve();
   },
 
   /**
    * Show DOM properties
    */
   showDOMProperties: function () {
     this._toolbox.openSplitConsole().then(() => {
       let panel = this._toolbox.getPanel("webconsole");
@@ -1151,17 +1151,17 @@ InspectorPanel.prototype = {
     });
   },
 
   /**
    * Clear any pseudo-class locks applied to the current hierarchy.
    */
   clearPseudoClasses: function () {
     if (!this.walker) {
-      return;
+      return promise.resolve();
     }
     return this.walker.clearPseudoClassLocks().then(null, console.error);
   },
 
   /**
    * Edit the outerHTML of the selected Node.
    */
   editHTML: function () {
@@ -1173,48 +1173,51 @@ InspectorPanel.prototype = {
     }
   },
 
   /**
    * Paste the contents of the clipboard into the selected Node's outer HTML.
    */
   pasteOuterHTML: function () {
     let content = this._getClipboardContentForPaste();
-    if (!content)
+    if (!content) {
       return promise.reject("No clipboard content for paste");
+    }
 
     let node = this.selection.nodeFront;
     return this.markup.getNodeOuterHTML(node).then(oldContent => {
       this.markup.updateNodeOuterHTML(node, content, oldContent);
     });
   },
 
   /**
    * Paste the contents of the clipboard into the selected Node's inner HTML.
    */
   pasteInnerHTML: function () {
     let content = this._getClipboardContentForPaste();
-    if (!content)
+    if (!content) {
       return promise.reject("No clipboard content for paste");
+    }
 
     let node = this.selection.nodeFront;
     return this.markup.getNodeInnerHTML(node).then(oldContent => {
       this.markup.updateNodeInnerHTML(node, content, oldContent);
     });
   },
 
   /**
    * Paste the contents of the clipboard as adjacent HTML to the selected Node.
    * @param position The position as specified for Element.insertAdjacentHTML
    *        (i.e. "beforeBegin", "afterBegin", "beforeEnd", "afterEnd").
    */
   pasteAdjacentHTML: function (position) {
     let content = this._getClipboardContentForPaste();
-    if (!content)
+    if (!content) {
       return promise.reject("No clipboard content for paste");
+    }
 
     let node = this.selection.nodeFront;
     return this.markup.insertAdjacentHTMLToNode(node, position, content);
   },
 
   /**
    * Copy the innerHTML of the selected Node to the clipboard.
    */
@@ -1410,26 +1413,28 @@ InspectorPanel.prototype = {
     if (!type || !link) {
       return;
     }
 
     if (type === "uri" || type === "cssresource" || type === "jsresource") {
       // Open link in a new tab.
       // When the inspector menu was setup on click (see _setupNodeLinkMenu), we
       // already checked that resolveRelativeURL existed.
-      this.inspector.resolveRelativeURL(link, this.selection.nodeFront).then(url => {
-        if (type === "uri") {
-          let browserWin = this.target.tab.ownerDocument.defaultView;
-          browserWin.openUILinkIn(url, "tab");
-        } else if (type === "cssresource") {
-          return this.toolbox.viewSourceInStyleEditor(url);
-        } else if (type === "jsresource") {
-          return this.toolbox.viewSourceInDebugger(url);
-        }
-      }).catch(e => console.error(e));
+      this.inspector.resolveRelativeURL(
+        link, this.selection.nodeFront).then(url => {
+          if (type === "uri") {
+            let browserWin = this.target.tab.ownerDocument.defaultView;
+            browserWin.openUILinkIn(url, "tab");
+          } else if (type === "cssresource") {
+            return this.toolbox.viewSourceInStyleEditor(url);
+          } else if (type === "jsresource") {
+            return this.toolbox.viewSourceInDebugger(url);
+          }
+          return null;
+        }).catch(e => console.error(e));
     } else if (type == "idref") {
       // Select the node in the same document.
       this.walker.document(this.selection.nodeFront).then(doc => {
         return this.walker.querySelector(doc, "#" + CSS.escape(link)).then(node => {
           if (!node) {
             this.emit("idref-attribute-link-failed");
             return;
           }
--- a/devtools/client/inspector/inspector-search.js
+++ b/devtools/client/inspector/inspector-search.js
@@ -1,16 +1,15 @@
 /* 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 {Cu, Ci} = require("chrome");
-
+const {Ci} = require("chrome");
 const promise = require("promise");
 const {Task} = require("devtools/shared/task");
 
 loader.lazyGetter(this, "system", () => require("devtools/shared/system"));
 loader.lazyGetter(this, "EventEmitter", () => require("devtools/shared/event-emitter"));
 loader.lazyGetter(this, "AutocompletePopup", () => require("devtools/client/shared/autocomplete-popup").AutocompletePopup);
 
 // Maximum number of selector suggestions shown in the panel.
@@ -107,18 +106,18 @@ InspectorSearch.prototype = {
       this.searchBox.removeAttribute("filled");
     } else {
       this.searchBox.setAttribute("filled", true);
     }
     if (event.keyCode === event.DOM_VK_RETURN) {
       this._onSearch(event.shiftKey);
     }
 
-    const modifierKey = system.constants.platform === "macosx" ? event.metaKey :
-event.ctrlKey;
+    const modifierKey = system.constants.platform === "macosx"
+                        ? event.metaKey : event.ctrlKey;
     if (event.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_G && modifierKey) {
       this._onSearch(event.shiftKey);
       event.preventDefault();
     }
   }
 };
 
 /**
@@ -209,61 +208,65 @@ SelectorAutocompleter.prototype = {
     if (this._lastStateCheckAt == query) {
       // If query is the same, return early.
       return this._state;
     }
     this._lastStateCheckAt = query;
 
     this._state = null;
     let subQuery = "";
-    // Now we iterate over the query and decide the state character by character.
+    // Now we iterate over the query and decide the state character by
+    // character.
     // The logic here is that while iterating, the state can go from one to
     // another with some restrictions. Like, if the state is Class, then it can
     // never go to Tag state without a space or '>' character; Or like, a Class
     // state with only '.' cannot go to an Id state without any [a-zA-Z] after
     // the '.' which means that '.#' is a selector matching a class name '#'.
     // Similarily for '#.' which means a selctor matching an id '.'.
     for (let i = 1; i <= query.length; i++) {
       // Calculate the state.
       subQuery = query.slice(0, i);
       let [secondLastChar, lastChar] = subQuery.slice(-2);
       switch (this._state) {
         case null:
           // This will happen only in the first iteration of the for loop.
           lastChar = secondLastChar;
-        case this.States.TAG:
+
+        case this.States.TAG: // eslint-disable-line
           if (lastChar == ".") {
             this._state = this.States.CLASS;
           } else if (lastChar == "#") {
             this._state = this.States.ID;
           } else if (lastChar == "[") {
             this._state = this.States.ATTRIBUTE;
           } else {
             this._state = this.States.TAG;
           }
           break;
 
         case this.States.CLASS:
           if (subQuery.match(/[\.]+[^\.]*$/)[0].length > 2) {
-            // Checks whether the subQuery has atleast one [a-zA-Z] after the '.'.
+            // Checks whether the subQuery has atleast one [a-zA-Z] after the
+            // '.'.
             if (lastChar == " " || lastChar == ">") {
               this._state = this.States.TAG;
             } else if (lastChar == "#") {
               this._state = this.States.ID;
             } else if (lastChar == "[") {
               this._state = this.States.ATTRIBUTE;
             } else {
               this._state = this.States.CLASS;
             }
           }
           break;
 
         case this.States.ID:
           if (subQuery.match(/[#]+[^#]*$/)[0].length > 2) {
-            // Checks whether the subQuery has atleast one [a-zA-Z] after the '#'.
+            // Checks whether the subQuery has atleast one [a-zA-Z] after the
+            // '#'.
             if (lastChar == " " || lastChar == ">") {
               this._state = this.States.TAG;
             } else if (lastChar == ".") {
               this._state = this.States.CLASS;
             } else if (lastChar == "[") {
               this._state = this.States.ATTRIBUTE;
             } else {
               this._state = this.States.ID;
@@ -290,126 +293,130 @@ SelectorAutocompleter.prototype = {
     return this._state;
   },
 
   /**
    * Removes event listeners and cleans up references.
    */
   destroy: function () {
     this.searchBox.removeEventListener("input", this.showSuggestions, true);
-    this.searchBox.removeEventListener("keypress", this._onSearchKeypress, true);
+    this.searchBox.removeEventListener("keypress",
+      this._onSearchKeypress, true);
     this.inspector.off("markupmutation", this._onMarkupMutation);
     this.searchPopup.destroy();
     this.searchPopup = null;
     this.searchBox = null;
     this.panelDoc = null;
   },
 
   /**
    * Handles keypresses inside the input box.
    */
   _onSearchKeypress: function (event) {
     let query = this.searchBox.value;
+    let popup = this.searchPopup;
+
     switch (event.keyCode) {
       case event.DOM_VK_RETURN:
       case event.DOM_VK_TAB:
-        if (this.searchPopup.isOpen &&
-            this.searchPopup.getItemAtIndex(this.searchPopup.itemCount - 1)
+        if (popup.isOpen &&
+            popup.getItemAtIndex(popup.itemCount - 1)
                 .preLabel == query) {
-          this.searchPopup.selectedIndex = this.searchPopup.itemCount - 1;
-          this.searchBox.value = this.searchPopup.selectedItem.label;
+          popup.selectedIndex = popup.itemCount - 1;
+          this.searchBox.value = popup.selectedItem.label;
           this.hidePopup();
-        } else if (!this.searchPopup.isOpen && event.keyCode === event.DOM_VK_TAB) {
+        } else if (!popup.isOpen &&
+                   event.keyCode === event.DOM_VK_TAB) {
           // When tab is pressed with focus on searchbox and closed popup,
           // do not prevent the default to avoid a keyboard trap and move focus
           // to next/previous element.
           this.emit("processing-done");
           return;
         }
         break;
 
       case event.DOM_VK_UP:
-        if (this.searchPopup.isOpen && this.searchPopup.itemCount > 0) {
-          this.searchPopup.focus();
-          if (this.searchPopup.selectedIndex == this.searchPopup.itemCount - 1) {
-            this.searchPopup.selectedIndex =
-              Math.max(0, this.searchPopup.itemCount - 2);
+        if (popup.isOpen && popup.itemCount > 0) {
+          popup.focus();
+          if (popup.selectedIndex == popup.itemCount - 1) {
+            popup.selectedIndex =
+              Math.max(0, popup.itemCount - 2);
+          } else {
+            popup.selectedIndex = popup.itemCount - 1;
           }
-          else {
-            this.searchPopup.selectedIndex = this.searchPopup.itemCount - 1;
-          }
-          this.searchBox.value = this.searchPopup.selectedItem.label;
+          this.searchBox.value = popup.selectedItem.label;
         }
         break;
 
       case event.DOM_VK_DOWN:
-        if (this.searchPopup.isOpen && this.searchPopup.itemCount > 0) {
-          this.searchPopup.focus();
-          this.searchPopup.selectedIndex = 0;
-          this.searchBox.value = this.searchPopup.selectedItem.label;
+        if (popup.isOpen && popup.itemCount > 0) {
+          popup.focus();
+          popup.selectedIndex = 0;
+          this.searchBox.value = popup.selectedItem.label;
         }
         break;
 
       default:
         return;
     }
 
     event.preventDefault();
     event.stopPropagation();
     this.emit("processing-done");
   },
 
   /**
    * Handles keypress and mouse click on the suggestions richlistbox.
    */
   _onListBoxKeypress: function (event) {
+    let popup = this.searchPopup;
+
     switch (event.keyCode || event.button) {
       case event.DOM_VK_RETURN:
       case event.DOM_VK_TAB:
-      case 0: // left mouse button
+      case 0:
+        // left mouse button
         event.stopPropagation();
         event.preventDefault();
-        this.searchBox.value = this.searchPopup.selectedItem.label;
+        this.searchBox.value = popup.selectedItem.label;
         this.searchBox.focus();
         this.hidePopup();
         break;
 
       case event.DOM_VK_UP:
-        if (this.searchPopup.selectedIndex == 0) {
-          this.searchPopup.selectedIndex = -1;
+        if (popup.selectedIndex == 0) {
+          popup.selectedIndex = -1;
           event.stopPropagation();
           event.preventDefault();
           this.searchBox.focus();
-        }
-        else {
-          let index = this.searchPopup.selectedIndex;
-          this.searchBox.value = this.searchPopup.getItemAtIndex(index - 1).label;
+        } else {
+          let index = popup.selectedIndex;
+          this.searchBox.value = popup.getItemAtIndex(index - 1).label;
         }
         break;
 
       case event.DOM_VK_DOWN:
-        if (this.searchPopup.selectedIndex == this.searchPopup.itemCount - 1) {
-          this.searchPopup.selectedIndex = -1;
+        if (popup.selectedIndex == popup.itemCount - 1) {
+          popup.selectedIndex = -1;
           event.stopPropagation();
           event.preventDefault();
           this.searchBox.focus();
-        }
-        else {
-          let index = this.searchPopup.selectedIndex;
-          this.searchBox.value = this.searchPopup.getItemAtIndex(index + 1).label;
+        } else {
+          let index = popup.selectedIndex;
+          this.searchBox.value = popup.getItemAtIndex(index + 1).label;
         }
         break;
 
       case event.DOM_VK_BACK_SPACE:
         event.stopPropagation();
         event.preventDefault();
         this.searchBox.focus();
         if (this.searchBox.selectionStart > 0) {
-          this.searchBox.value =
-            this.searchBox.value.substring(0, this.searchBox.selectionStart - 1);
+          this.searchBox.value = this.searchBox.value.substring(0,
+            this.searchBox.selectionStart - 1);
         }
         this.hidePopup();
         break;
     }
     this.emit("processing-done");
   },
 
   /**
@@ -419,22 +426,22 @@ SelectorAutocompleter.prototype = {
   _onMarkupMutation: function () {
     this._searchResults = null;
     this._lastSearched = null;
   },
 
   /**
    * Populates the suggestions list and show the suggestion popup.
    */
-  _showPopup: function (list, firstPart, aState) {
+  _showPopup: function (list, firstPart, popupState) {
     let total = 0;
     let query = this.searchBox.value;
     let items = [];
 
-    for (let [value, /* count*/, state] of list) {
+    for (let [value, , state] of list) {
       if (query.match(/[\s>+]$/)) {
         // for cases like 'div ' or 'div >' or 'div+'
         value = query + value;
       } else if (query.match(/[\s>+][\.#a-zA-Z][^\s>+\.#\[]*$/)) {
         // for cases like 'div #a' or 'div .a' or 'div > d' and likewise
         let lastPart = query.match(/[\s>+][\.#a-zA-Z][^\s>+\.#\[]*$/)[0];
         value = query.slice(0, -1 * lastPart.length + 1) + value;
       } else if (query.match(/[a-zA-Z][#\.][^#\.\s+>]*$/)) {
@@ -449,38 +456,36 @@ SelectorAutocompleter.prototype = {
 
       let item = {
         preLabel: query,
         label: value
       };
 
       // In case the query's state is tag and the item's state is id or class
       // adjust the preLabel
-      if (aState === this.States.TAG && state === this.States.CLASS) {
+      if (popupState === this.States.TAG && state === this.States.CLASS) {
         item.preLabel = "." + item.preLabel;
       }
-      if (aState === this.States.TAG && state === this.States.ID) {
+      if (popupState === this.States.TAG && state === this.States.ID) {
         item.preLabel = "#" + item.preLabel;
       }
 
       items.unshift(item);
       if (++total > MAX_SUGGESTIONS - 1) {
         break;
       }
     }
     if (total > 0) {
       this.searchPopup.setItems(items);
       this.searchPopup.openPopup(this.searchBox);
-    }
-    else {
+    } else {
       this.hidePopup();
     }
   },
 
-
   /**
    * Hide the suggestion popup if necessary.
    */
   hidePopup: function () {
     if (this.searchPopup.isOpen) {
       this.searchPopup.hidePopup();
     }
   },
@@ -498,38 +503,38 @@ SelectorAutocompleter.prototype = {
       // Hide the popup if the query ends with * (because we don't want to
       // suggest all nodes) or if it is an attribute selector (because
       // it would give a lot of useless results).
       this.hidePopup();
       return;
     }
 
     if (state === this.States.TAG) {
-      // gets the tag that is being completed. For ex. 'div.foo > s' returns 's',
-      // 'di' returns 'di' and likewise.
+      // gets the tag that is being completed. For ex. 'div.foo > s' returns
+      // 's', 'di' returns 'di' and likewise.
       firstPart = (query.match(/[\s>+]?([a-zA-Z]*)$/) || ["", query])[1];
       query = query.slice(0, query.length - firstPart.length);
-    }
-    else if (state === this.States.CLASS) {
+    } else if (state === this.States.CLASS) {
       // gets the class that is being completed. For ex. '.foo.b' returns 'b'
       firstPart = query.match(/\.([^\.]*)$/)[1];
       query = query.slice(0, query.length - firstPart.length - 1);
-    }
-    else if (state === this.States.ID) {
+    } else if (state === this.States.ID) {
       // gets the id that is being completed. For ex. '.foo#b' returns 'b'
       firstPart = query.match(/#([^#]*)$/)[1];
       query = query.slice(0, query.length - firstPart.length - 1);
     }
     // TODO: implement some caching so that over the wire request is not made
     // everytime.
     if (/[\s+>~]$/.test(query)) {
       query += "*";
     }
 
-    this._lastQuery = this.walker.getSuggestionsForQuery(query, firstPart, state).then(result => {
+    let suggestionsPromise = this.walker.getSuggestionsForQuery(
+      query, firstPart, state);
+    this._lastQuery = suggestionsPromise.then(result => {
       this.emit("processing-done");
       if (result.query !== query) {
         // This means that this response is for a previous request and the user
         // as since typed something extra leading to a new request.
         return;
       }
 
       if (state === this.States.CLASS) {
@@ -540,15 +545,14 @@ SelectorAutocompleter.prototype = {
 
       // If there is a single tag match and it's what the user typed, then
       // don't need to show a popup.
       if (result.suggestions.length === 1 &&
           result.suggestions[0][0] === firstPart) {
         result.suggestions = [];
       }
 
-
       this._showPopup(result.suggestions, firstPart, state);
     });
 
-    return this._lastQuery;
+    return;
   }
 };
--- a/devtools/client/inspector/test/browser_inspector_breadcrumbs_highlight_hover.js
+++ b/devtools/client/inspector/test/browser_inspector_breadcrumbs_highlight_hover.js
@@ -1,35 +1,40 @@
 /* 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";
 
-// Test that hovering over nodes on the breadcrumb buttons in the inspector shows the highlighter over
-// those nodes
+// Test that hovering over nodes on the breadcrumb buttons in the inspector
+// shows the highlighter over those nodes
 add_task(function* () {
   info("Loading the test document and opening the inspector");
-  let {toolbox, inspector, testActor} = yield openInspectorForURL("data:text/html;charset=utf-8,<h1>foo</h1><span>bar</span>");
+  let {toolbox, inspector, testActor} = yield openInspectorForURL(
+    "data:text/html;charset=utf-8,<h1>foo</h1><span>bar</span>");
   info("Selecting the test node");
   yield selectNode("span", inspector);
-  let bcButtons = inspector.breadcrumbs["container"];
+  let bcButtons = inspector.breadcrumbs.container;
 
   let onNodeHighlighted = toolbox.once("node-highlight");
   let button = bcButtons.childNodes[1];
-  EventUtils.synthesizeMouseAtCenter(button, {type: "mousemove"}, button.ownerDocument.defaultView);
+  EventUtils.synthesizeMouseAtCenter(button, {type: "mousemove"},
+    button.ownerDocument.defaultView);
   yield onNodeHighlighted;
 
   let isVisible = yield testActor.isHighlighting();
   ok(isVisible, "The highlighter is shown on a markup container hover");
 
-  ok((yield testActor.assertHighlightedNode("body")), "The highlighter highlights the right node");
+  ok((yield testActor.assertHighlightedNode("body")),
+     "The highlighter highlights the right node");
 
   onNodeHighlighted = toolbox.once("node-highlight");
   button = bcButtons.childNodes[2];
-  EventUtils.synthesizeMouseAtCenter(button, {type: "mousemove"}, button.ownerDocument.defaultView);
+  EventUtils.synthesizeMouseAtCenter(button, {type: "mousemove"},
+    button.ownerDocument.defaultView);
   yield onNodeHighlighted;
 
   isVisible = yield testActor.isHighlighting();
   ok(isVisible, "The highlighter is shown on a markup container hover");
 
-  ok((yield testActor.assertHighlightedNode("span")), "The highlighter highlights the right node");
+  ok((yield testActor.assertHighlightedNode("span")),
+     "The highlighter highlights the right node");
 });
--- a/devtools/client/inspector/test/browser_inspector_delete-selected-node-02.js
+++ b/devtools/client/inspector/test/browser_inspector_delete-selected-node-02.js
@@ -28,43 +28,46 @@ add_task(function* () {
     info("Getting the node container in the markup view.");
     let container = yield getContainerForSelector("#deleteManually", inspector);
 
     info("Simulating right-click on the markup view container.");
     EventUtils.synthesizeMouse(container.tagLine, 2, 2,
       {type: "contextmenu", button: 2}, inspector.panelWin);
 
     info("Waiting for the context menu to open.");
-    yield once(inspector.panelDoc.getElementById("inspectorPopupSet"), "popupshown");
+    yield once(inspector.panelDoc.getElementById("inspectorPopupSet"),
+               "popupshown");
 
     info("Clicking 'Delete Node' in the context menu.");
     inspector.panelDoc.getElementById("node-menu-delete").click();
 
     info("Waiting for inspector to update.");
     yield inspector.once("inspector-updated");
 
     info("Inspector updated, performing checks.");
-    yield assertNodeSelectedAndPanelsUpdated("#selectedAfterDelete", "li#selectedAfterDelete");
+    yield assertNodeSelectedAndPanelsUpdated("#selectedAfterDelete",
+                                             "li#selectedAfterDelete");
   }
 
   function* testAutomaticallyDeleteSelectedNode() {
     info("Selecting a node, deleting it via javascript and checking that " +
          "its parent node is selected and breadcrumbs are updated.");
 
     let div = yield getNodeFront("#deleteAutomatically", inspector);
     yield selectNode(div, inspector);
 
     info("Deleting selected node via javascript.");
     yield inspector.walker.removeNode(div);
 
     info("Waiting for inspector to update.");
     yield inspector.once("inspector-updated");
 
     info("Inspector updated, performing checks.");
-    yield assertNodeSelectedAndPanelsUpdated("#deleteChildren", "ul#deleteChildren");
+    yield assertNodeSelectedAndPanelsUpdated("#deleteChildren",
+                                             "ul#deleteChildren");
   }
 
   function* testDeleteSelectedNodeContainerFrame() {
     info("Selecting a node inside iframe, deleting the iframe via javascript " +
          "and checking the parent node of the iframe is selected and " +
          "breadcrumbs are updated.");
 
     info("Selecting an element inside iframe.");
@@ -81,13 +84,15 @@ add_task(function* () {
     info("Inspector updated, performing checks.");
     yield assertNodeSelectedAndPanelsUpdated("body", "body");
   }
 
   function* assertNodeSelectedAndPanelsUpdated(selector, crumbLabel) {
     let nodeFront = yield getNodeFront(selector, inspector);
     is(inspector.selection.nodeFront, nodeFront, "The right node is selected");
 
-    let breadcrumbs = inspector.panelDoc.getElementById("inspector-breadcrumbs");
-    is(breadcrumbs.querySelector("button[checked=true]").textContent, crumbLabel,
-      "The right breadcrumb is selected");
+    let breadcrumbs = inspector.panelDoc.getElementById(
+      "inspector-breadcrumbs");
+    is(breadcrumbs.querySelector("button[checked=true]").textContent,
+       crumbLabel,
+       "The right breadcrumb is selected");
   }
 });
--- a/devtools/client/inspector/test/browser_inspector_destroy-before-ready.js
+++ b/devtools/client/inspector/test/browser_inspector_destroy-before-ready.js
@@ -17,10 +17,10 @@ add_task(function* () {
 
   info("Open the toolbox on the debugger panel");
   let target = TargetFactory.forTab(gBrowser.selectedTab);
   let toolbox = yield gDevTools.showToolbox(target, "jsdebugger");
 
   info("Switch to the inspector panel and immediately end the test");
   let onInspectorSelected = toolbox.once("inspector-selected");
   toolbox.selectTool("inspector");
-  let inspector = yield onInspectorSelected;
+  yield onInspectorSelected;
 });
--- a/devtools/client/inspector/test/browser_inspector_expand-collapse.js
+++ b/devtools/client/inspector/test/browser_inspector_expand-collapse.js
@@ -1,54 +1,58 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Tests that context menu items exapnd all and collapse are shown properly.
 
-const TEST_URL = "data:text/html;charset=utf-8,<div id='parent-node'><div id='child-node'></div></div>";
+const TEST_URL = "data:text/html;charset=utf-8," +
+                 "<div id='parent-node'><div id='child-node'></div></div>";
 
 add_task(function* () {
-
-    // Test is often exceeding time-out threshold, similar to Bug 1137765
+  // Test is often exceeding time-out threshold, similar to Bug 1137765
   requestLongerTimeout(2);
 
-  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
+  let {inspector} = yield openInspectorForURL(TEST_URL);
 
-  let nodeMenuCollapseElement = inspector.panelDoc.getElementById("node-menu-collapse");
-  let nodeMenuExpandElement = inspector.panelDoc.getElementById("node-menu-expand");
+  let nodeMenuCollapseElement = inspector.panelDoc.getElementById(
+    "node-menu-collapse");
+  let nodeMenuExpandElement = inspector.panelDoc.getElementById(
+    "node-menu-expand");
 
   info("Selecting the parent node");
 
   let front = yield getNodeFrontForSelector("#parent-node", inspector);
 
   yield selectNode(front, inspector);
 
   info("Simulating context menu click on the selected node container.");
   contextMenuClick(getContainerForNodeFront(front, inspector).tagLine);
 
-  ok(nodeMenuCollapseElement.hasAttribute("disabled"), "Collapse option is disabled");
-
-  ok(!nodeMenuExpandElement.hasAttribute("disabled"), "ExpandAll option is enabled");
+  ok(nodeMenuCollapseElement.hasAttribute("disabled"),
+     "Collapse option is disabled");
+  ok(!nodeMenuExpandElement.hasAttribute("disabled"),
+     "ExpandAll option is enabled");
 
   info("Testing whether expansion works properly");
   dispatchCommandEvent(nodeMenuExpandElement);
   info("Waiting for expansion to occur");
   yield waitForMultipleChildrenUpdates(inspector);
   let markUpContainer = getContainerForNodeFront(front, inspector);
   ok(markUpContainer.expanded, "node has been successfully expanded");
 
     // reslecting node after expansion
   yield selectNode(front, inspector);
 
   info("Testing whether collapse works properly");
   info("Simulating context menu click on the selected node container.");
   contextMenuClick(getContainerForNodeFront(front, inspector).tagLine);
 
-  ok(!nodeMenuCollapseElement.hasAttribute("disabled"), "Collapse option is enabled");
+  ok(!nodeMenuCollapseElement.hasAttribute("disabled"),
+     "Collapse option is enabled");
 
   dispatchCommandEvent(nodeMenuCollapseElement);
   info("Waiting for collapse to occur");
   yield waitForMultipleChildrenUpdates(inspector);
   ok(!markUpContainer.expanded, "node has been successfully collapsed");
 });
--- a/devtools/client/inspector/test/browser_inspector_gcli-inspect-command.js
+++ b/devtools/client/inspector/test/browser_inspector_gcli-inspect-command.js
@@ -1,11 +1,12 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint key-spacing: 0 */
 "use strict";
 
 // Testing that the gcli 'inspect' command works as it should.
 
 const TEST_URI = URL_ROOT + "doc_inspector_gcli-inspect-command.html";
 
 add_task(function* () {
   return helpers.addTabWithToolbar(TEST_URI, function (options) {
@@ -124,11 +125,11 @@ add_task(function* () {
         setup: "inspect :root",
         check: {
           input:  "inspect :root",
           hints:               "",
           markup: "VVVVVVVVVVVVV",
           status: "VALID"
         },
       },
-    ]); // helpers.audit
-  }); // helpers.addTabWithToolbar
-}); // add_task
+    ]);
+  });
+});
--- a/devtools/client/inspector/test/browser_inspector_highlighter-01.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-01.js
@@ -3,27 +3,29 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 // Test that hovering over nodes in the markup-view shows the highlighter over
 // those nodes
 add_task(function* () {
   info("Loading the test document and opening the inspector");
-  let {toolbox, inspector, testActor} = yield openInspectorForURL("data:text/html;charset=utf-8,<h1>foo</h1><span>bar</span>");
+  let {toolbox, inspector, testActor} = yield openInspectorForURL(
+    "data:text/html;charset=utf-8,<h1>foo</h1><span>bar</span>");
 
   let isVisible = yield testActor.isHighlighting(toolbox);
   ok(!isVisible, "The highlighter is hidden by default");
 
   info("Selecting the test node");
   yield selectNode("span", inspector);
   let container = yield getContainerForSelector("h1", inspector);
 
   let onHighlighterReady = toolbox.once("highlighter-ready");
   EventUtils.synthesizeMouseAtCenter(container.tagLine, {type: "mousemove"},
                                      inspector.markup.doc.defaultView);
   yield onHighlighterReady;
 
   isVisible = yield testActor.isHighlighting();
   ok(isVisible, "The highlighter is shown on a markup container hover");
 
-  ok((yield testActor.assertHighlightedNode("h1")), "The highlighter highlights the right node");
+  ok((yield testActor.assertHighlightedNode("h1")),
+     "The highlighter highlights the right node");
 });
--- a/devtools/client/inspector/test/browser_inspector_highlighter-02.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-02.js
@@ -6,17 +6,17 @@
 
 "use strict";
 
 // Test that the highlighter is correctly displayed over a variety of elements
 
 const TEST_URI = URL_ROOT + "doc_inspector_highlighter.html";
 
 add_task(function* () {
-  let {toolbox, inspector, testActor} = yield openInspectorForURL(TEST_URI);
+  let {inspector, testActor} = yield openInspectorForURL(TEST_URI);
 
   info("Selecting the simple, non-transformed DIV");
   yield selectAndHighlightNode("#simple-div", inspector);
 
   let isVisible = yield testActor.isHighlighting();
   ok(isVisible, "The highlighter is shown");
   ok((yield testActor.assertHighlightedNode("#simple-div")),
     "The highlighter's outline corresponds to the simple div");
@@ -29,10 +29,11 @@ add_task(function* () {
   ok(isVisible, "The highlighter is shown");
   yield testActor.isNodeCorrectlyHighlighted("#rotated-div", is, "rotated");
 
   info("Selecting the zero width height DIV");
   yield selectAndHighlightNode("#widthHeightZero-div", inspector);
 
   isVisible = yield testActor.isHighlighting();
   ok(isVisible, "The highlighter is shown");
-  yield testActor.isNodeCorrectlyHighlighted("#widthHeightZero-div", is, "zero width height");
+  yield testActor.isNodeCorrectlyHighlighted("#widthHeightZero-div", is,
+                                             "zero width height");
 });
--- a/devtools/client/inspector/test/browser_inspector_highlighter-03.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-03.js
@@ -50,17 +50,18 @@ add_task(function* () {
   yield testActor.eval("window.scrollBy(0, 40);");
 
   // target the body within the iframe
   let iframeBodySelector = ["iframe", "body"];
 
   info("Moving mouse over iframe body");
   yield moveMouseOver("iframe", 40, 40);
 
-  ok((yield testActor.assertHighlightedNode(iframeBodySelector)), "highlighter shows the right node");
+  ok((yield testActor.assertHighlightedNode(iframeBodySelector)),
+     "highlighter shows the right node");
   yield testActor.isNodeCorrectlyHighlighted(iframeBodySelector, is);
 
   info("Waiting for the element picker to deactivate.");
   yield inspector.toolbox.highlighterUtils.stopPicker();
 
   function moveMouseOver(selector, x, y) {
     info("Waiting for element " + selector + " to be highlighted");
     testActor.synthesizeMouse({selector, x, y, options: {type: "mousemove"}});
--- a/devtools/client/inspector/test/browser_inspector_highlighter-by-type.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-by-type.js
@@ -5,17 +5,17 @@
 "use strict";
 
 // Check that custom highlighters can be retrieved by type and that they expose
 // the expected API.
 
 const TEST_URL = "data:text/html;charset=utf-8,custom highlighters";
 
 add_task(function* () {
-  let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
+  let {inspector} = yield openInspectorForURL(TEST_URL);
 
   yield onlyOneInstanceOfMainHighlighter(inspector);
   yield manyInstancesOfCustomHighlighters(inspector);
   yield showHideMethodsAreAvailable(inspector);
   yield unknownHighlighterTypeShouldntBeAccepted(inspector);
 });
 
 function* onlyOneInstanceOfMainHighlighter({inspector}) {
--- a/devtools/client/inspector/test/browser_inspector_highlighter-comments.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-comments.js
@@ -14,47 +14,47 @@ thisTestLeaksUncaughtRejectionsAndShould
 
 // Test that hovering over the markup-view's containers doesn't always show the
 // highlighter, depending on the type of node hovered over.
 
 const TEST_PAGE = URL_ROOT +
   "doc_inspector_highlighter-comments.html";
 
 add_task(function* () {
-  let {toolbox, inspector, testActor} = yield openInspectorForURL(TEST_PAGE);
+  let {inspector, testActor} = yield openInspectorForURL(TEST_PAGE);
   let markupView = inspector.markup;
   yield selectNode("p", inspector);
 
   info("Hovering over #id1 and waiting for highlighter to appear.");
   yield hoverElement("#id1");
-  yield assertHighlighterShownOn(testActor, "#id1");
+  yield assertHighlighterShownOn("#id1");
 
   info("Hovering over comment node and ensuring highlighter doesn't appear.");
   yield hoverComment();
-  yield assertHighlighterHidden(testActor);
+  yield assertHighlighterHidden();
 
   info("Hovering over #id1 again and waiting for highlighter to appear.");
   yield hoverElement("#id1");
-  yield assertHighlighterShownOn(testActor, "#id1");
+  yield assertHighlighterShownOn("#id1");
 
   info("Hovering over #id2 and waiting for highlighter to appear.");
   yield hoverElement("#id2");
-  yield assertHighlighterShownOn(testActor, "#id2");
+  yield assertHighlighterShownOn("#id2");
 
   info("Hovering over <script> and ensuring highlighter doesn't appear.");
   yield hoverElement("script");
-  yield assertHighlighterHidden(testActor);
+  yield assertHighlighterHidden();
 
   info("Hovering over #id3 and waiting for highlighter to appear.");
   yield hoverElement("#id3");
-  yield assertHighlighterShownOn(testActor, "#id3");
+  yield assertHighlighterShownOn("#id3");
 
   info("Hovering over hidden #id4 and ensuring highlighter doesn't appear.");
   yield hoverElement("#id4");
-  yield assertHighlighterHidden(testActor);
+  yield assertHighlighterHidden();
 
   function hoverContainer(container) {
     let promise = inspector.toolbox.once("node-highlight");
     EventUtils.synthesizeMouse(container.tagLine, 2, 2, {type: "mousemove"},
         markupView.doc.defaultView);
 
     return promise;
   }
@@ -67,19 +67,21 @@ add_task(function* () {
 
   function hoverComment() {
     info("Hovering the comment node in the markup view");
     for (let [node, container] of markupView._containers) {
       if (node.nodeType === Ci.nsIDOMNode.COMMENT_NODE) {
         return hoverContainer(container);
       }
     }
+    return null;
   }
 
-  function* assertHighlighterShownOn(testActor, selector) {
-    ok((yield testActor.assertHighlightedNode(selector)), "Highlighter is shown on the right node: " + selector);
+  function* assertHighlighterShownOn(selector) {
+    ok((yield testActor.assertHighlightedNode(selector)),
+       "Highlighter is shown on the right node: " + selector);
   }
 
-  function* assertHighlighterHidden(testActor) {
+  function* assertHighlighterHidden() {
     let isVisible = yield testActor.isHighlighting();
     ok(!isVisible, "Highlighter is hidden");
   }
 });
--- a/devtools/client/inspector/test/browser_inspector_highlighter-csstransform_01.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-csstransform_01.js
@@ -2,23 +2,31 @@
  * 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";
 
 // Test the creation of the SVG highlighter elements of the css transform
 // highlighter.
 
-const TEST_URL = "data:text/html;charset=utf-8," +
-                 "<div id='transformed' style='border:1px solid red;width:100px;height:100px;transform:skew(13deg);'></div>" +
-                 "<div id='untransformed' style='border:1px solid blue;width:100px;height:100px;'></div>" +
-                 "<span id='inline' style='transform:rotate(90deg);'>this is an inline transformed element</span>";
+const TEST_URL = `
+ <div id="transformed"
+   style="border:1px solid red;width:100px;height:100px;transform:skew(13deg);">
+ </div>
+ <div id="untransformed"
+   style="border:1px solid blue;width:100px;height:100px;">
+ </div>
+ <span id="inline"
+   style="transform:rotate(90deg);">this is an inline transformed element
+ </span>
+`;
 
 add_task(function* () {
-  let {inspector, toolbox, testActor} = yield openInspectorForURL(TEST_URL);
+  let {inspector, testActor} = yield openInspectorForURL(
+    "data:text/html;charset=utf-8," + encodeURI(TEST_URL));
   let front = inspector.inspector;
 
   let highlighter = yield front.getHighlighterByType("CssTransformHighlighter");
 
   yield isHiddenByDefault(testActor, highlighter);
   yield has2PolygonsAnd4Lines(testActor, highlighter);
   yield isNotShownForUntransformed(testActor, inspector, highlighter);
   yield isNotShownForInline(testActor, inspector, highlighter);
@@ -26,101 +34,119 @@ add_task(function* () {
   yield linesLinkThePolygons(testActor, inspector, highlighter);
 
   yield highlighter.finalize();
 });
 
 function* isHiddenByDefault(testActor, highlighterFront) {
   info("Checking that the highlighter is hidden by default");
 
-  let hidden = yield testActor.getHighlighterNodeAttribute("css-transform-elements", "hidden", highlighterFront);
+  let hidden = yield testActor.getHighlighterNodeAttribute(
+    "css-transform-elements", "hidden", highlighterFront);
   ok(hidden, "The highlighter is hidden by default");
 }
 
 function* has2PolygonsAnd4Lines(testActor, highlighterFront) {
   info("Checking that the highlighter is made up of 4 lines and 2 polygons");
 
-  let value = yield testActor.getHighlighterNodeAttribute("css-transform-untransformed", "class", highlighterFront);
+  let value = yield testActor.getHighlighterNodeAttribute(
+    "css-transform-untransformed", "class", highlighterFront);
   is(value, "css-transform-untransformed", "The untransformed polygon exists");
 
-  value = yield testActor.getHighlighterNodeAttribute("css-transform-transformed", "class", highlighterFront);
+  value = yield testActor.getHighlighterNodeAttribute(
+    "css-transform-transformed", "class", highlighterFront);
   is(value, "css-transform-transformed", "The transformed polygon exists");
 
   for (let nb of ["1", "2", "3", "4"]) {
-    value = yield testActor.getHighlighterNodeAttribute("css-transform-line" + nb, "class", highlighterFront);
+    value = yield testActor.getHighlighterNodeAttribute(
+      "css-transform-line" + nb, "class", highlighterFront);
     is(value, "css-transform-line", "The line " + nb + " exists");
   }
 }
 
 function* isNotShownForUntransformed(testActor, inspector, highlighterFront) {
   info("Asking to show the highlighter on the untransformed test node");
 
   let node = yield getNodeFront("#untransformed", inspector);
   yield highlighterFront.show(node);
 
-  let hidden = yield testActor.getHighlighterNodeAttribute("css-transform-elements", "hidden", highlighterFront);
+  let hidden = yield testActor.getHighlighterNodeAttribute(
+    "css-transform-elements", "hidden", highlighterFront);
   ok(hidden, "The highlighter is still hidden");
 }
 
 function* isNotShownForInline(testActor, inspector, highlighterFront) {
   info("Asking to show the highlighter on the inline test node");
 
   let node = yield getNodeFront("#inline", inspector);
   yield highlighterFront.show(node);
 
-  let hidden = yield testActor.getHighlighterNodeAttribute("css-transform-elements", "hidden", highlighterFront);
+  let hidden = yield testActor.getHighlighterNodeAttribute(
+    "css-transform-elements", "hidden", highlighterFront);
   ok(hidden, "The highlighter is still hidden");
 }
 
 function* isVisibleWhenShown(testActor, inspector, highlighterFront) {
   info("Asking to show the highlighter on the test node");
 
   let node = yield getNodeFront("#transformed", inspector);
   yield highlighterFront.show(node);
 
-  let hidden = yield testActor.getHighlighterNodeAttribute("css-transform-elements", "hidden", highlighterFront);
+  let hidden = yield testActor.getHighlighterNodeAttribute(
+    "css-transform-elements", "hidden", highlighterFront);
   ok(!hidden, "The highlighter is visible");
 
   info("Hiding the highlighter");
   yield highlighterFront.hide();
 
-  hidden = yield testActor.getHighlighterNodeAttribute("css-transform-elements", "hidden", highlighterFront);
+  hidden = yield testActor.getHighlighterNodeAttribute(
+    "css-transform-elements", "hidden", highlighterFront);
   ok(hidden, "The highlighter is hidden");
 }
 
 function* linesLinkThePolygons(testActor, inspector, highlighterFront) {
   info("Showing the highlighter on the transformed node");
 
   let node = yield getNodeFront("#transformed", inspector);
   yield highlighterFront.show(node);
 
   info("Checking that the 4 lines do link the 2 shape's corners");
 
   let lines = [];
   for (let nb of ["1", "2", "3", "4"]) {
-    let x1 = yield testActor.getHighlighterNodeAttribute("css-transform-line" + nb, "x1", highlighterFront);
-    let y1 = yield testActor.getHighlighterNodeAttribute("css-transform-line" + nb, "y1", highlighterFront);
-    let x2 = yield testActor.getHighlighterNodeAttribute("css-transform-line" + nb, "x2", highlighterFront);
-    let y2 = yield testActor.getHighlighterNodeAttribute("css-transform-line" + nb, "y2", highlighterFront);
+    let x1 = yield testActor.getHighlighterNodeAttribute(
+      "css-transform-line" + nb, "x1", highlighterFront);
+    let y1 = yield testActor.getHighlighterNodeAttribute(
+      "css-transform-line" + nb, "y1", highlighterFront);
+    let x2 = yield testActor.getHighlighterNodeAttribute(
+      "css-transform-line" + nb, "x2", highlighterFront);
+    let y2 = yield testActor.getHighlighterNodeAttribute(
+      "css-transform-line" + nb, "y2", highlighterFront);
     lines.push({x1, y1, x2, y2});
   }
 
-  let points1 = yield testActor.getHighlighterNodeAttribute("css-transform-untransformed", "points", highlighterFront);
+  let points1 = yield testActor.getHighlighterNodeAttribute(
+    "css-transform-untransformed", "points", highlighterFront);
   points1 = points1.split(" ");
 
-  let points2 = yield testActor.getHighlighterNodeAttribute("css-transform-transformed", "points", highlighterFront);
+  let points2 = yield testActor.getHighlighterNodeAttribute(
+    "css-transform-transformed", "points", highlighterFront);
   points2 = points2.split(" ");
 
   for (let i = 0; i < lines.length; i++) {
     info("Checking line nb " + i);
     let line = lines[i];
 
     let p1 = points1[i].split(",");
-    is(p1[0], line.x1, "line " + i + "'s first point matches the untransformed x coordinate");
-    is(p1[1], line.y1, "line " + i + "'s first point matches the untransformed y coordinate");
+    is(p1[0], line.x1,
+       "line " + i + "'s first point matches the untransformed x coordinate");
+    is(p1[1], line.y1,
+       "line " + i + "'s first point matches the untransformed y coordinate");
 
     let p2 = points2[i].split(",");
-    is(p2[0], line.x2, "line " + i + "'s first point matches the transformed x coordinate");
-    is(p2[1], line.y2, "line " + i + "'s first point matches the transformed y coordinate");
+    is(p2[0], line.x2,
+       "line " + i + "'s first point matches the transformed x coordinate");
+    is(p2[1], line.y2,
+       "line " + i + "'s first point matches the transformed y coordinate");
   }
 
   yield highlighterFront.hide();
 }
--- a/devtools/client/inspector/test/browser_inspector_highlighter-csstransform_02.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-csstransform_02.js
@@ -16,30 +16,31 @@ sensible values
 (devtools/client/shared/test/browser_layoutHelpers-getBoxQuads.js),
 so the present test doesn't care about that, it just verifies that the css
 transform highlighter applies those values correctly to the SVG elements
 */
 
 const TEST_URL = URL_ROOT + "doc_inspector_highlighter_csstransform.html";
 
 add_task(function* () {
-  let {inspector, toolbox, testActor} = yield openInspectorForURL(TEST_URL);
+  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
   let front = inspector.inspector;
 
   let highlighter = yield front.getHighlighterByType("CssTransformHighlighter");
 
   let nodeFront = yield getNodeFront("#test-node", inspector);
 
   info("Displaying the transform highlighter on test node");
   yield highlighter.show(nodeFront);
 
   let data = yield testActor.getAllAdjustedQuads("#test-node");
   let [expected] = data.border;
 
-  let points = yield testActor.getHighlighterNodeAttribute("css-transform-transformed", "points", highlighter);
+  let points = yield testActor.getHighlighterNodeAttribute(
+    "css-transform-transformed", "points", highlighter);
   let polygonPoints = points.split(" ").map(p => {
     return {
       x: +p.substring(0, p.indexOf(",")),
       y: +p.substring(p.indexOf(",") + 1)
     };
   });
 
   for (let i = 1; i < 5; i++) {
--- a/devtools/client/inspector/test/browser_inspector_highlighter-hover_01.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-hover_01.js
@@ -3,31 +3,33 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that when first hovering over a node and immediately after selecting it
 // by clicking on it leaves the highlighter visible for as long as the mouse is
 // over the node
 
-const TEST_URL = "data:text/html;charset=utf-8,<p>It's going to be legen....</p>";
+const TEST_URL = "data:text/html;charset=utf-8," +
+                 "<p>It's going to be legen....</p>";
 
 add_task(function* () {
-  let {toolbox, inspector, testActor} = yield openInspectorForURL(TEST_URL);
+  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
 
   info("hovering over the <p> line in the markup-view");
   yield hoverContainer("p", inspector);
   let isVisible = yield testActor.isHighlighting();
   ok(isVisible, "the highlighter is still visible");
 
   info("selecting the <p> line by clicking in the markup-view");
   yield clickContainer("p", inspector);
 
   yield testActor.setProperty("p", "textContent", "wait for it ....");
-  info("wait and see if the highlighter stays visible even after the node was selected");
+  info("wait and see if the highlighter stays visible even after the node " +
+       "was selected");
   yield waitForTheBrieflyShowBoxModelTimeout();
 
   yield testActor.setProperty("p", "textContent", "dary!!!!");
   isVisible = yield testActor.isHighlighting();
   ok(isVisible, "the highlighter is still visible");
 });
 
 function waitForTheBrieflyShowBoxModelTimeout() {
--- a/devtools/client/inspector/test/browser_inspector_highlighter-hover_02.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-hover_02.js
@@ -8,26 +8,28 @@
 // mouse leaves the markup-view and comes back again on the same element, that
 // the highlighter is shown again on the node
 
 const TEST_URL = "data:text/html;charset=utf-8,<p>Select me!</p>";
 
 add_task(function* () {
   let {toolbox, inspector, testActor} = yield openInspectorForURL(TEST_URL);
 
-  info("hover over the <p> line in the markup-view so that it's the currently hovered node");
+  info("hover over the <p> line in the markup-view so that it's the " +
+       "currently hovered node");
   yield hoverContainer("p", inspector);
 
   info("select the <p> markup-container line by clicking");
   yield clickContainer("p", inspector);
   let isVisible = yield testActor.isHighlighting();
   ok(isVisible, "the highlighter is shown");
 
   info("listen to the highlighter's hidden event");
-  let onHidden = testActor.waitForHighlighterEvent("hidden", toolbox.highlighter);
+  let onHidden = testActor.waitForHighlighterEvent("hidden",
+    toolbox.highlighter);
   info("mouse-leave the markup-view");
   yield mouseLeaveMarkupView(inspector);
   yield onHidden;
   isVisible = yield testActor.isHighlighting();
   ok(!isVisible, "the highlighter is hidden after mouseleave");
 
   info("hover over the <p> line again, which is still selected");
   yield hoverContainer("p", inspector);
--- a/devtools/client/inspector/test/browser_inspector_highlighter-iframes_01.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-iframes_01.js
@@ -16,46 +16,49 @@ const OUTER_FRAME_SRC = "data:text/html;
   "<iframe src='" + NESTED_FRAME_SRC + "' />";
 
 const TEST_URI = "data:text/html;charset=utf-8," +
   "iframe tests for inspector" +
   "<iframe src=\"" + OUTER_FRAME_SRC + "\" />";
 
 add_task(function* () {
   let {inspector, testActor} = yield openInspectorForURL(TEST_URI);
-  let outerFrame = "iframe";
   let outerFrameDiv = ["iframe", "div"];
-  let innerFrame = ["iframe", "iframe"];
   let innerFrameDiv = ["iframe", "iframe", "div"];
 
   info("Waiting for element picker to activate.");
   yield startPicker(inspector.toolbox);
 
   info("Moving mouse over outerFrameDiv");
-  yield moveMouseOver(testActor, outerFrameDiv);
-  ok((yield testActor.assertHighlightedNode(outerFrameDiv)), "outerFrameDiv is highlighted.");
+  yield moveMouseOver(outerFrameDiv);
+  ok((yield testActor.assertHighlightedNode(outerFrameDiv)),
+     "outerFrameDiv is highlighted.");
 
   info("Moving mouse over innerFrameDiv");
-  yield moveMouseOver(testActor, innerFrameDiv);
-  ok((yield testActor.assertHighlightedNode(innerFrameDiv)), "innerFrameDiv is highlighted.");
+  yield moveMouseOver(innerFrameDiv);
+  ok((yield testActor.assertHighlightedNode(innerFrameDiv)),
+     "innerFrameDiv is highlighted.");
 
   info("Selecting root node");
   yield selectNode(inspector.walker.rootNode, inspector);
 
   info("Selecting an element from the nested iframe directly");
-  let innerFrameFront = yield getNodeFrontInFrame("iframe", "iframe", inspector);
-  let innerFrameDivFront = yield getNodeFrontInFrame("div", innerFrameFront, inspector);
+  let innerFrameFront = yield getNodeFrontInFrame("iframe", "iframe",
+                                                  inspector);
+  let innerFrameDivFront = yield getNodeFrontInFrame("div", innerFrameFront,
+                                                     inspector);
   yield selectNode(innerFrameDivFront, inspector);
 
-  is(inspector.breadcrumbs.nodeHierarchy.length, 9, "Breadcrumbs have 9 items.");
+  is(inspector.breadcrumbs.nodeHierarchy.length, 9,
+     "Breadcrumbs have 9 items.");
 
   info("Waiting for element picker to deactivate.");
   yield inspector.toolbox.highlighterUtils.stopPicker();
 
-  function moveMouseOver(testActor, selector) {
+  function moveMouseOver(selector) {
     info("Waiting for element " + selector + " to be highlighted");
     testActor.synthesizeMouse({
       selector: selector,
       options: {type: "mousemove"},
       center: true
     }).then(() => inspector.toolbox.once("picker-node-hovered"));
   }
 });
--- a/devtools/client/inspector/test/browser_inspector_highlighter-inline.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-inline.js
@@ -18,33 +18,35 @@ const TEST_DATA = [
   "p",
   "p span",
   // The following test case used to fail. See bug 1139925.
   "[dir=rtl] > span"
 ];
 
 add_task(function* () {
   info("Loading the test document and opening the inspector");
-  let {toolbox, inspector, testActor} = yield openInspectorForURL(TEST_URL);
+  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
 
   for (let selector of TEST_DATA) {
     info("Selecting and highlighting node " + selector);
     yield selectAndHighlightNode(selector, inspector);
 
     info("Get all quads for this node");
     let data = yield testActor.getAllAdjustedQuads(selector);
 
-    info("Iterate over the box-model regions and verify that the highlighter is correct");
+    info("Iterate over the box-model regions and verify that the highlighter " +
+         "is correct");
     for (let region of ["margin", "border", "padding", "content"]) {
       let {points} = yield testActor.getHighlighterRegionPath(region);
-      is(points.length, data[region].length,
-        "The highlighter's " + region + " path defines the correct number of boxes");
+      is(points.length, data[region].length, "The highlighter's " + region +
+         " path defines the correct number of boxes");
     }
 
-    info("Verify that the guides define a rectangle that contains all content boxes");
+    info("Verify that the guides define a rectangle that contains all " +
+         "content boxes");
 
     let expectedContentRect = {
       p1: {x: Infinity, y: Infinity},
       p2: {x: -Infinity, y: Infinity},
       p3: {x: -Infinity, y: -Infinity},
       p4: {x: Infinity, y: -Infinity}
     };
     for (let {p1, p2, p3, p4} of data.content) {
--- a/devtools/client/inspector/test/browser_inspector_highlighter-keybinding_01.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-keybinding_01.js
@@ -11,35 +11,40 @@ const TEST_URL = URL_ROOT + "doc_inspect
 add_task(function* () {
   let {inspector, toolbox, testActor} = yield openInspectorForURL(TEST_URL);
 
   yield startPicker(toolbox);
 
   info("Selecting the simple-div1 DIV");
   yield moveMouseOver("#simple-div1");
 
-  ok((yield testActor.assertHighlightedNode("#simple-div1")), "The highlighter shows #simple-div1. OK.");
+  ok((yield testActor.assertHighlightedNode("#simple-div1")),
+     "The highlighter shows #simple-div1. OK.");
 
   // First Child selection
   info("Testing first-child selection.");
 
   yield doKeyHover({key: "VK_RIGHT", options: {}});
-  ok((yield testActor.assertHighlightedNode("#useless-para")), "The highlighter shows #useless-para. OK.");
+  ok((yield testActor.assertHighlightedNode("#useless-para")),
+     "The highlighter shows #useless-para. OK.");
 
   info("Selecting the useful-para paragraph DIV");
   yield moveMouseOver("#useful-para");
-  ok((yield testActor.assertHighlightedNode("#useful-para")), "The highlighter shows #useful-para. OK.");
+  ok((yield testActor.assertHighlightedNode("#useful-para")),
+     "The highlighter shows #useful-para. OK.");
 
   yield doKeyHover({key: "VK_RIGHT", options: {}});
-  ok((yield testActor.assertHighlightedNode("#bold")), "The highlighter shows #bold. OK.");
+  ok((yield testActor.assertHighlightedNode("#bold")),
+     "The highlighter shows #bold. OK.");
 
   info("Going back up to the simple-div1 DIV");
   yield doKeyHover({key: "VK_LEFT", options: {}});
   yield doKeyHover({key: "VK_LEFT", options: {}});
-  ok((yield testActor.assertHighlightedNode("#simple-div1")), "The highlighter shows #simple-div1. OK.");
+  ok((yield testActor.assertHighlightedNode("#simple-div1")),
+     "The highlighter shows #simple-div1. OK.");
 
   info("First child selection test Passed.");
 
   info("Stopping the picker");
   yield toolbox.highlighterUtils.stopPicker();
 
   function doKeyHover(args) {
     info("Key pressed. Waiting for element to be highlighted/hovered");
@@ -51,10 +56,9 @@ add_task(function* () {
     info("Waiting for element " + selector + " to be highlighted");
     testActor.synthesizeMouse({
       options: {type: "mousemove"},
       center: true,
       selector: selector
     });
     return inspector.toolbox.once("picker-node-hovered");
   }
-
 });
--- a/devtools/client/inspector/test/browser_inspector_highlighter-keybinding_02.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-keybinding_02.js
@@ -15,28 +15,32 @@ add_task(function* () {
 
   // Previously chosen child memory
   info("Testing whether previously chosen child is remembered");
 
   info("Selecting the ahoy paragraph DIV");
   yield moveMouseOver("#ahoy");
 
   yield doKeyHover({key: "VK_LEFT", options: {}});
-  ok((yield testActor.assertHighlightedNode("#simple-div2")), "The highlighter shows #simple-div2. OK.");
+  ok((yield testActor.assertHighlightedNode("#simple-div2")),
+     "The highlighter shows #simple-div2. OK.");
 
   yield doKeyHover({key: "VK_RIGHT", options: {}});
-  ok((yield testActor.assertHighlightedNode("#ahoy")), "The highlighter shows #ahoy. OK.");
+  ok((yield testActor.assertHighlightedNode("#ahoy")),
+     "The highlighter shows #ahoy. OK.");
 
   info("Going back up to the complex-div DIV");
   yield doKeyHover({key: "VK_LEFT", options: {}});
   yield doKeyHover({key: "VK_LEFT", options: {}});
-  ok((yield testActor.assertHighlightedNode("#complex-div")), "The highlighter shows #complex-div. OK.");
+  ok((yield testActor.assertHighlightedNode("#complex-div")),
+     "The highlighter shows #complex-div. OK.");
 
   yield doKeyHover({key: "VK_RIGHT", options: {}});
-  ok((yield testActor.assertHighlightedNode("#simple-div2")), "The highlighter shows #simple-div2. OK.");
+  ok((yield testActor.assertHighlightedNode("#simple-div2")),
+     "The highlighter shows #simple-div2. OK.");
 
   info("Previously chosen child is remembered. Passed.");
 
   info("Stopping the picker");
   yield toolbox.highlighterUtils.stopPicker();
 
   function doKeyHover(args) {
     info("Key pressed. Waiting for element to be highlighted/hovered");
@@ -52,10 +56,9 @@ add_task(function* () {
     let onPickerNodeHovered = inspector.toolbox.once("picker-node-hovered");
     testActor.synthesizeMouse({
       options: {type: "mousemove"},
       center: true,
       selector: selector
     });
     return promise.all([onHighlighterReady, onPickerNodeHovered]);
   }
-
 });
--- a/devtools/client/inspector/test/browser_inspector_highlighter-keybinding_03.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-keybinding_03.js
@@ -14,27 +14,29 @@ add_task(function* () {
   yield startPicker(toolbox);
 
   info("Selecting the #another DIV");
   yield moveMouseOver("#another");
 
   // Testing pick-node shortcut
   info("Testing enter/return key as pick-node command");
   yield doKeyPick({key: "VK_RETURN", options: {}});
-  is(inspector.selection.nodeFront.id, "another", "The #another node was selected. Passed.");
+  is(inspector.selection.nodeFront.id, "another",
+     "The #another node was selected. Passed.");
 
   // Testing cancel-picker command
   yield startPicker(toolbox);
 
   info("Selecting the ahoy DIV");
   yield moveMouseOver("#ahoy");
 
   info("Testing escape key as cancel-picker command");
   yield doKeyStop({key: "VK_ESCAPE", options: {}});
-  is(inspector.selection.nodeFront.id, "another", "The #another DIV is still selected. Passed.");
+  is(inspector.selection.nodeFront.id, "another",
+     "The #another DIV is still selected. Passed.");
 
   function doKeyPick(args) {
     info("Key pressed. Waiting for element to be picked");
     testActor.synthesizeKey(args);
     return promise.all([
       toolbox.selection.once("new-node-front"),
       inspector.once("inspector-updated")
     ]);
@@ -52,10 +54,9 @@ add_task(function* () {
     let onPickerNodeHovered = inspector.toolbox.once("picker-node-hovered");
     testActor.synthesizeMouse({
       options: {type: "mousemove"},
       center: true,
       selector: selector
     });
     return promise.all([onHighlighterReady, onPickerNodeHovered]);
   }
-
 });
--- a/devtools/client/inspector/test/browser_inspector_highlighter-options.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-options.js
@@ -1,39 +1,44 @@
 /* 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";
 
 // Check that the box-model highlighter supports configuration options
 
-const TEST_URL = "data:text/html;charset=utf-8," +
-                 "<body style='padding:2em;'>" +
-                 "<div style='width:100px;height:100px;padding:2em;border:.5em solid black;margin:1em;'>test</div>" +
-                 "</body>";
+const TEST_URL = `
+  <body style="padding:2em;">
+    <div style="width:100px;height:100px;padding:2em;
+                border:.5em solid black;margin:1em;">test</div>
+  </body>
+`;
 
 // Test data format:
 // - desc: a string that will be output to the console.
 // - options: json object to be passed as options to the highlighter.
 // - checkHighlighter: a generator (async) function that should check the
 //   highlighter is correct.
 const TEST_DATA = [
   {
     desc: "Guides and infobar should be shown by default",
     options: {},
     checkHighlighter: function* (testActor) {
-      let hidden = yield testActor.getHighlighterNodeAttribute("box-model-nodeinfobar-container", "hidden");
+      let hidden = yield testActor.getHighlighterNodeAttribute(
+        "box-model-nodeinfobar-container", "hidden");
       ok(!hidden, "Node infobar is visible");
 
-      hidden = yield testActor.getHighlighterNodeAttribute("box-model-elements", "hidden");
+      hidden = yield testActor.getHighlighterNodeAttribute(
+        "box-model-elements", "hidden");
       ok(!hidden, "SVG container is visible");
 
       for (let side of ["top", "right", "bottom", "left"]) {
-        hidden = yield testActor.getHighlighterNodeAttribute("box-model-guide-" + side, "hidden");
+        hidden = yield testActor.getHighlighterNodeAttribute(
+          "box-model-guide-" + side, "hidden");
         ok(!hidden, side + " guide is visible");
       }
     }
   },
   {
     desc: "All regions should be shown by default",
     options: {},
     checkHighlighter: function* (testActor) {
@@ -43,26 +48,28 @@ const TEST_DATA = [
       }
     }
   },
   {
     desc: "Guides can be hidden",
     options: {hideGuides: true},
     checkHighlighter: function* (testActor) {
       for (let side of ["top", "right", "bottom", "left"]) {
-        let hidden = yield testActor.getHighlighterNodeAttribute("box-model-guide-" + side, "hidden");
+        let hidden = yield testActor.getHighlighterNodeAttribute(
+          "box-model-guide-" + side, "hidden");
         is(hidden, "true", side + " guide has been hidden");
       }
     }
   },
   {
     desc: "Infobar can be hidden",
     options: {hideInfoBar: true},
     checkHighlighter: function* (testActor) {
-      let hidden = yield testActor.getHighlighterNodeAttribute("box-model-nodeinfobar-container", "hidden");
+      let hidden = yield testActor.getHighlighterNodeAttribute(
+        "box-model-nodeinfobar-container", "hidden");
       is(hidden, "true", "nodeinfobar has been hidden");
     }
   },
   {
     desc: "One region only can be shown (1)",
     options: {showOnly: "content"},
     checkHighlighter: function* (testActor) {
       let {d} = yield testActor.getHighlighterRegionPath("margin");
@@ -94,38 +101,46 @@ const TEST_DATA = [
       ({d} = yield testActor.getHighlighterRegionPath("content"));
       ok(!d, "content region is hidden");
     }
   },
   {
     desc: "Guides can be drawn around a given region (1)",
     options: {region: "padding"},
     checkHighlighter: function* (testActor) {
-      let topY1 = yield testActor.getHighlighterNodeAttribute("box-model-guide-top", "y1");
-      let rightX1 = yield testActor.getHighlighterNodeAttribute("box-model-guide-right", "x1");
-      let bottomY1 = yield testActor.getHighlighterNodeAttribute("box-model-guide-bottom", "y1");
-      let leftX1 = yield testActor.getHighlighterNodeAttribute("box-model-guide-left", "x1");
+      let topY1 = yield testActor.getHighlighterNodeAttribute(
+        "box-model-guide-top", "y1");
+      let rightX1 = yield testActor.getHighlighterNodeAttribute(
+        "box-model-guide-right", "x1");
+      let bottomY1 = yield testActor.getHighlighterNodeAttribute(
+        "box-model-guide-bottom", "y1");
+      let leftX1 = yield testActor.getHighlighterNodeAttribute(
+        "box-model-guide-left", "x1");
 
       let {points} = yield testActor.getHighlighterRegionPath("padding");
       points = points[0];
 
       is(Math.ceil(topY1), points[0][1], "Top guide's y1 is correct");
       is(Math.floor(rightX1), points[1][0], "Right guide's x1 is correct");
       is(Math.floor(bottomY1), points[2][1], "Bottom guide's y1 is correct");
       is(Math.ceil(leftX1), points[3][0], "Left guide's x1 is correct");
     }
   },
   {
     desc: "Guides can be drawn around a given region (2)",
     options: {region: "margin"},
     checkHighlighter: function* (testActor) {
-      let topY1 = yield testActor.getHighlighterNodeAttribute("box-model-guide-top", "y1");
-      let rightX1 = yield testActor.getHighlighterNodeAttribute("box-model-guide-right", "x1");
-      let bottomY1 = yield testActor.getHighlighterNodeAttribute("box-model-guide-bottom", "y1");
-      let leftX1 = yield testActor.getHighlighterNodeAttribute("box-model-guide-left", "x1");
+      let topY1 = yield testActor.getHighlighterNodeAttribute(
+        "box-model-guide-top", "y1");
+      let rightX1 = yield testActor.getHighlighterNodeAttribute(
+        "box-model-guide-right", "x1");
+      let bottomY1 = yield testActor.getHighlighterNodeAttribute(
+        "box-model-guide-bottom", "y1");
+      let leftX1 = yield testActor.getHighlighterNodeAttribute(
+        "box-model-guide-left", "x1");
 
       let {points} = yield testActor.getHighlighterRegionPath("margin");
       points = points[0];
 
       is(Math.ceil(topY1), points[0][1], "Top guide's y1 is correct");
       is(Math.floor(rightX1), points[1][0], "Right guide's x1 is correct");
       is(Math.floor(bottomY1), points[2][1], "Bottom guide's y1 is correct");
       is(Math.ceil(leftX1), points[3][0], "Left guide's x1 is correct");
@@ -165,17 +180,18 @@ const TEST_DATA = [
           is(faded, "true", "Region " + region + " is faded");
         }
       }
     }
   }
 ];
 
 add_task(function* () {
-  let {inspector, toolbox, testActor} = yield openInspectorForURL(TEST_URL);
+  let {inspector, toolbox, testActor} = yield openInspectorForURL(
+    "data:text/html;charset=utf-8," + encodeURI(TEST_URL));
 
   let divFront = yield getNodeFront("div", inspector);
 
   for (let {desc, options, checkHighlighter} of TEST_DATA) {
     info("Running test: " + desc);
 
     info("Show the box-model highlighter with options " + options);
     yield toolbox.highlighter.showBoxModel(divFront, options);
--- a/devtools/client/inspector/test/browser_inspector_highlighter-rect_01.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-rect_01.js
@@ -6,103 +6,116 @@
 
 // Test that the custom rect highlighter provides the right API, ensures that
 // the input is valid and that it does create a box with the right dimensions,
 // at the right position.
 
 const TEST_URL = "data:text/html;charset=utf-8,Rect Highlighter Test";
 
 add_task(function* () {
-  let {inspector, toolbox, testActor} = yield openInspectorForURL(TEST_URL);
+  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
   let front = inspector.inspector;
   let highlighter = yield front.getHighlighterByType("RectHighlighter");
   let body = yield getNodeFront("body", inspector);
 
   info("Make sure the highlighter returned is correct");
 
   ok(highlighter, "The RectHighlighter custom type was created");
   is(highlighter.typeName, "customhighlighter",
     "The RectHighlighter has the right type");
   ok(highlighter.show && highlighter.hide,
     "The RectHighlighter has the expected show/hide methods");
 
   info("Check that the highlighter is hidden by default");
 
-  let hidden = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "hidden", highlighter);
+  let hidden = yield testActor.getHighlighterNodeAttribute(
+    "highlighted-rect", "hidden", highlighter);
   is(hidden, "true", "The highlighter is hidden by default");
 
   info("Check that nothing is shown if no rect is passed");
 
   yield highlighter.show(body);
-  hidden = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "hidden", highlighter);
+  hidden = yield testActor.getHighlighterNodeAttribute(
+    "highlighted-rect", "hidden", highlighter);
   is(hidden, "true", "The highlighter is hidden when no rect is passed");
 
   info("Check that nothing is shown if rect is incomplete or invalid");
 
   yield highlighter.show(body, {
     rect: {x: 0, y: 0}
   });
-  hidden = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "hidden", highlighter);
+  hidden = yield testActor.getHighlighterNodeAttribute(
+    "highlighted-rect", "hidden", highlighter);
   is(hidden, "true", "The highlighter is hidden when the rect is incomplete");
 
   yield highlighter.show(body, {
     rect: {x: 0, y: 0, width: -Infinity, height: 0}
   });
-  hidden = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "hidden", highlighter);
+  hidden = yield testActor.getHighlighterNodeAttribute(
+    "highlighted-rect", "hidden", highlighter);
   is(hidden, "true", "The highlighter is hidden when the rect is invalid (1)");
 
   yield highlighter.show(body, {
     rect: {x: 0, y: 0, width: 5, height: -45}
   });
-  hidden = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "hidden", highlighter);
+  hidden = yield testActor.getHighlighterNodeAttribute(
+    "highlighted-rect", "hidden", highlighter);
   is(hidden, "true", "The highlighter is hidden when the rect is invalid (2)");
 
   yield highlighter.show(body, {
     rect: {x: "test", y: 0, width: 5, height: 5}
   });
-  hidden = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "hidden", highlighter);
+  hidden = yield testActor.getHighlighterNodeAttribute(
+    "highlighted-rect", "hidden", highlighter);
   is(hidden, "true", "The highlighter is hidden when the rect is invalid (3)");
 
   info("Check that the highlighter is displayed when valid options are passed");
 
   yield highlighter.show(body, {
     rect: {x: 5, y: 5, width: 50, height: 50}
   });
-  hidden = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "hidden", highlighter);
+  hidden = yield testActor.getHighlighterNodeAttribute(
+    "highlighted-rect", "hidden", highlighter);
   ok(!hidden, "The highlighter is displayed");
-  let style = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "style", highlighter);
+  let style = yield testActor.getHighlighterNodeAttribute(
+    "highlighted-rect", "style", highlighter);
   is(style, "left:5px;top:5px;width:50px;height:50px;",
     "The highlighter is positioned correctly");
 
   info("Check that the highlighter can be displayed at x=0 y=0");
 
   yield highlighter.show(body, {
     rect: {x: 0, y: 0, width: 50, height: 50}
   });
-  hidden = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "hidden", highlighter);
+  hidden = yield testActor.getHighlighterNodeAttribute(
+    "highlighted-rect", "hidden", highlighter);
   ok(!hidden, "The highlighter is displayed when x=0 and y=0");
-  style = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "style", highlighter);
+  style = yield testActor.getHighlighterNodeAttribute(
+    "highlighted-rect", "style", highlighter);
   is(style, "left:0px;top:0px;width:50px;height:50px;",
     "The highlighter is positioned correctly");
 
   info("Check that the highlighter is hidden when dimensions are 0");
 
   yield highlighter.show(body, {
     rect: {x: 0, y: 0, width: 0, height: 0}
   });
-  hidden = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "hidden", highlighter);
+  hidden = yield testActor.getHighlighterNodeAttribute(
+    "highlighted-rect", "hidden", highlighter);
   is(hidden, "true", "The highlighter is hidden width and height are 0");
 
   info("Check that a fill color can be passed");
 
   yield highlighter.show(body, {
     rect: {x: 100, y: 200, width: 500, height: 200},
     fill: "red"
   });
-  hidden = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "hidden", highlighter);
+  hidden = yield testActor.getHighlighterNodeAttribute(
+    "highlighted-rect", "hidden", highlighter);
   ok(!hidden, "The highlighter is displayed");
-  style = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "style", highlighter);
+  style = yield testActor.getHighlighterNodeAttribute(
+    "highlighted-rect", "style", highlighter);
   is(style, "left:100px;top:200px;width:500px;height:200px;background:red;",
     "The highlighter has the right background color");
 
   yield highlighter.hide();
   yield highlighter.finalize();
 });
--- a/devtools/client/inspector/test/browser_inspector_highlighter-rect_02.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-rect_02.js
@@ -17,17 +17,18 @@ add_task(function* () {
   info("Showing the rect highlighter in the context of the iframe");
 
   // Get the reference to a context node inside the iframe
   let childBody = yield getNodeFrontInFrame("body", "iframe", inspector);
   yield highlighter.show(childBody, {
     rect: {x: 50, y: 50, width: 100, height: 100}
   });
 
-  let style = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "style", highlighter);
+  let style = yield testActor.getHighlighterNodeAttribute("highlighted-rect",
+    "style", highlighter);
 
   // The parent body has margin=50px and border=10px
   // The parent iframe also has margin=50px and border=10px
   // = 50 + 10 + 50 + 10 = 120px
   // The rect is aat x=50 and y=50, so left and top should be 170px
   is(style, "left:170px;top:170px;width:100px;height:100px;",
     "The highlighter is correctly positioned");
 
--- a/devtools/client/inspector/test/browser_inspector_highlighter-rulers_01.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-rulers_01.js
@@ -2,30 +2,31 @@
  * 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";
 
 // Test the creation of the geometry highlighter elements.
 
 const TEST_URL = "data:text/html;charset=utf-8," +
-                 "<div style='position:absolute;left: 0; top: 0; width: 40000px; height: 8000px'></div>";
+                 "<div style='position:absolute;left: 0; top: 0; " +
+                 "width: 40000px; height: 8000px'></div>";
 
 const ID = "rulers-highlighter-";
 
 // Maximum size, in pixel, for the horizontal ruler and vertical ruler
 // used by RulersHighlighter
 const RULERS_MAX_X_AXIS = 10000;
 const RULERS_MAX_Y_AXIS = 15000;
 // Number of steps after we add a text in RulersHighliter;
 // currently the unit is in pixel.
 const RULERS_TEXT_STEP = 100;
 
 add_task(function* () {
-  let { inspector, toolbox, testActor } = yield openInspectorForURL(TEST_URL);
+  let { inspector, testActor } = yield openInspectorForURL(TEST_URL);
   let front = inspector.inspector;
 
   let highlighter = yield front.getHighlighterByType("RulersHighlighter");
 
   yield isHiddenByDefault(highlighter, inspector, testActor);
   yield hasRightLabelsContent(highlighter, inspector, testActor);
 
   yield highlighter.finalize();
@@ -49,23 +50,27 @@ function* isHiddenByDefault(highlighterF
       ID + "elements", "hidden", highlighterFront);
 
   isnot(hidden, "true", "highlighter is visible after show");
 }
 
 function* hasRightLabelsContent(highlighterFront, inspector, testActor) {
   info("Checking the rulers have the proper text, based on rulers' size");
 
-  let contentX = yield testActor.getHighlighterNodeTextContent(`${ID}x-axis-text`, highlighterFront);
-  let contentY = yield testActor.getHighlighterNodeTextContent(`${ID}y-axis-text`, highlighterFront);
+  let contentX = yield testActor.getHighlighterNodeTextContent(
+    `${ID}x-axis-text`, highlighterFront);
+  let contentY = yield testActor.getHighlighterNodeTextContent(
+    `${ID}y-axis-text`, highlighterFront);
 
   let expectedX = "";
-  for (let i = RULERS_TEXT_STEP; i < RULERS_MAX_X_AXIS; i += RULERS_TEXT_STEP)
+  for (let i = RULERS_TEXT_STEP; i < RULERS_MAX_X_AXIS; i += RULERS_TEXT_STEP) {
     expectedX += i;
+  }
 
   is(contentX, expectedX, "x axis text content is correct");
 
   let expectedY = "";
-  for (let i = RULERS_TEXT_STEP; i < RULERS_MAX_Y_AXIS; i += RULERS_TEXT_STEP)
+  for (let i = RULERS_TEXT_STEP; i < RULERS_MAX_Y_AXIS; i += RULERS_TEXT_STEP) {
     expectedY += i;
+  }
 
   is(contentY, expectedY, "y axis text content is correct");
 }
--- a/devtools/client/inspector/test/browser_inspector_highlighter-rulers_02.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-rulers_02.js
@@ -2,93 +2,102 @@
  * 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";
 
 // Test the creation of the geometry highlighter elements.
 
 const TEST_URL = "data:text/html;charset=utf-8," +
-                 "<div style='position:absolute;left: 0; top: 0; width: 40000px; height: 8000px'></div>";
+                 "<div style='position:absolute;left: 0; top: 0; " +
+                 "width: 40000px; height: 8000px'></div>";
 
 const ID = "rulers-highlighter-";
 
 add_task(function* () {
-  let { inspector, toolbox, testActor } = yield openInspectorForURL(TEST_URL);
+  let { inspector, testActor } = yield openInspectorForURL(TEST_URL);
   let front = inspector.inspector;
 
   let highlighter = yield front.getHighlighterByType("RulersHighlighter");
 
   // the rulers doesn't need any node, but as highligher it seems mandatory
   // ones, so the body is given
   let body = yield getNodeFront("body", inspector);
   yield highlighter.show(body);
 
   yield isUpdatedAfterScroll(highlighter, inspector, testActor);
 
   yield highlighter.finalize();
 });
 
 function* isUpdatedAfterScroll(highlighterFront, inspector, testActor) {
-  info("Checking the rulers' position by default");
+  info("Check the rulers' position by default");
 
   let xAxisRulerTransform = yield testActor.getHighlighterNodeAttribute(
     `${ID}x-axis-ruler`, "transform", highlighterFront);
   let xAxisTextTransform = yield testActor.getHighlighterNodeAttribute(
     `${ID}x-axis-text`, "transform", highlighterFront);
   let yAxisRulerTransform = yield testActor.getHighlighterNodeAttribute(
     `${ID}y-axis-ruler`, "transform", highlighterFront);
   let yAxisTextTransform = yield testActor.getHighlighterNodeAttribute(
     `${ID}y-axis-text`, "transform", highlighterFront);
 
   is(xAxisRulerTransform, null, "x axis ruler is positioned properly");
   is(xAxisTextTransform, null, "x axis text are positioned properly");
   is(yAxisRulerTransform, null, "y axis ruler is positioned properly");
-  is(yAxisRulerTransform, null, "y axis text are positioned properly");
+  is(yAxisTextTransform, null, "y axis text are positioned properly");
 
-  info("Asking the content window to scroll to specific coords");
+  info("Ask the content window to scroll to specific coords");
 
   let x = 200, y = 300;
 
   let data = yield testActor.scrollWindow(x, y);
 
   is(data.x, x, "window scrolled properly horizontally");
   is(data.y, y, "window scrolled properly vertically");
 
-  info("Checking the rulers are properly positioned after the scrolling");
+  info("Check the rulers are properly positioned after the scrolling");
 
   xAxisRulerTransform = yield testActor.getHighlighterNodeAttribute(
     `${ID}x-axis-ruler`, "transform", highlighterFront);
   xAxisTextTransform = yield testActor.getHighlighterNodeAttribute(
     `${ID}x-axis-text`, "transform", highlighterFront);
   yAxisRulerTransform = yield testActor.getHighlighterNodeAttribute(
     `${ID}y-axis-ruler`, "transform", highlighterFront);
   yAxisTextTransform = yield testActor.getHighlighterNodeAttribute(
     `${ID}y-axis-text`, "transform", highlighterFront);
 
-  is(xAxisRulerTransform, `translate(-${x})`, "x axis ruler is positioned properly");
-  is(xAxisTextTransform, `translate(-${x})`, "x axis text are positioned properly");
-  is(yAxisRulerTransform, `translate(0, -${y})`, "y axis ruler is positioned properly");
-  is(yAxisRulerTransform, `translate(0, -${y})`, "y axis text are positioned properly");
+  is(xAxisRulerTransform, `translate(-${x})`,
+     "x axis ruler is positioned properly");
+  is(xAxisTextTransform, `translate(-${x})`,
+     "x axis text are positioned properly");
+  is(yAxisRulerTransform, `translate(0, -${y})`,
+     "y axis ruler is positioned properly");
+  is(yAxisTextTransform, `translate(0, -${y})`,
+     "y axis text are positioned properly");
 
-  info("Asking the content window to scroll relative to the current position");
+  info("Ask the content window to scroll relative to the current position");
 
   data = yield testActor.scrollWindow(-50, -60, true);
 
   is(data.x, x - 50, "window scrolled properly horizontally");
   is(data.y, y - 60, "window scrolled properly vertically");
 
-  info("Checking the rulers are properly positioned after the relative scrolling");
+  info("Check the rulers are properly positioned after the relative scrolling");
 
   xAxisRulerTransform = yield testActor.getHighlighterNodeAttribute(
     `${ID}x-axis-ruler`, "transform", highlighterFront);
   xAxisTextTransform = yield testActor.getHighlighterNodeAttribute(
     `${ID}x-axis-text`, "transform", highlighterFront);
   yAxisRulerTransform = yield testActor.getHighlighterNodeAttribute(
     `${ID}y-axis-ruler`, "transform", highlighterFront);
   yAxisTextTransform = yield testActor.getHighlighterNodeAttribute(
     `${ID}y-axis-text`, "transform", highlighterFront);
 
-  is(xAxisRulerTransform, `translate(-${x - 50})`, "x axis ruler is positioned properly");
-  is(xAxisTextTransform, `translate(-${x - 50})`, "x axis text are positioned properly");
-  is(yAxisRulerTransform, `translate(0, -${y - 60})`, "y axis ruler is positioned properly");
-  is(yAxisRulerTransform, `translate(0, -${y - 60})`, "y axis text are positioned properly");
+  is(xAxisRulerTransform, `translate(-${x - 50})`,
+     "x axis ruler is positioned properly");
+  is(xAxisTextTransform, `translate(-${x - 50})`,
+     "x axis text are positioned properly");
+  is(yAxisRulerTransform, `translate(0, -${y - 60})`,
+     "y axis ruler is positioned properly");
+  is(yAxisTextTransform, `translate(0, -${y - 60})`,
+     "y axis text are positioned properly");
 }
--- a/devtools/client/inspector/test/browser_inspector_highlighter-xbl.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-xbl.js
@@ -31,10 +31,9 @@ add_task(function* () {
     info("Waiting for element " + selector + " to be highlighted");
     testActor.synthesizeMouse({
       options: {type: "mousemove"},
       center: true,
       selector: selector
     });
     return inspector.toolbox.once("picker-node-hovered");
   }
-
 });
--- a/devtools/client/inspector/test/browser_inspector_highlighter-zoom.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-zoom.js
@@ -10,36 +10,39 @@
 const TEST_URL = "data:text/html;charset=utf-8,<div>zoom me</div>";
 
 // TEST_LEVELS entries should contain the following properties:
 // - level: the zoom level to test
 // - expected: the style attribute value to check for on the root highlighter
 //   element.
 const TEST_LEVELS = [{
   level: 2,
-  expected: "position:absolute;transform-origin:top left;transform:scale(0.5);width:200%;height:200%;"
+  expected: "position:absolute;transform-origin:top left;" +
+            "transform:scale(0.5);width:200%;height:200%;"
 }, {
   level: 1,
   expected: "position:absolute;width:100%;height:100%;"
 }, {
   level: .5,
-  expected: "position:absolute;transform-origin:top left;transform:scale(2);width:50%;height:50%;"
+  expected: "position:absolute;transform-origin:top left;" +
+            "transform:scale(2);width:50%;height:50%;"
 }];
 
 add_task(function* () {
   let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
 
   info("Highlighting the test node");
 
   yield hoverElement("div", inspector);
   let isVisible = yield testActor.isHighlighting();
   ok(isVisible, "The highlighter is visible");
 
   for (let {level, expected} of TEST_LEVELS) {
-    info("Zoom to level " + level + " and check that the highlighter is correct");
+    info("Zoom to level " + level +
+         " and check that the highlighter is correct");
 
     yield testActor.zoomPageTo(level);
     isVisible = yield testActor.isHighlighting();
     ok(isVisible, "The highlighter is still visible at zoom level " + level);
 
     yield testActor.isNodeCorrectlyHighlighted("div", is);
 
     info("Check that the highlighter root wrapper node was scaled down");
@@ -58,11 +61,12 @@ function* hoverElement(selector, inspect
 function* hoverContainer(container, inspector) {
   let onHighlight = inspector.toolbox.once("node-highlight");
   EventUtils.synthesizeMouse(container.tagLine, 2, 2, {type: "mousemove"},
       inspector.markup.doc.defaultView);
   yield onHighlight;
 }
 
 function* getRootNodeStyle(testActor) {
-  let value = yield testActor.getHighlighterNodeAttribute("box-model-root", "style");
+  let value = yield testActor.getHighlighterNodeAttribute(
+    "box-model-root", "style");
   return value;
 }
--- a/devtools/client/inspector/test/browser_inspector_iframe-navigation.js
+++ b/devtools/client/inspector/test/browser_inspector_iframe-navigation.js
@@ -6,17 +6,17 @@
 // Test that the highlighter element picker still works through iframe
 // navigations.
 
 const TEST_URI = "data:text/html;charset=utf-8," +
   "<p>bug 699308 - test iframe navigation</p>" +
   "<iframe src='data:text/html;charset=utf-8,hello world'></iframe>";
 
 add_task(function* () {
-  let { inspector, toolbox, testActor } = yield openInspectorForURL(TEST_URI);
+  let { toolbox, testActor } = yield openInspectorForURL(TEST_URI);
 
   info("Starting element picker.");
   yield startPicker(toolbox);
 
   info("Waiting for highlighter to activate.");
   let highlighterShowing = toolbox.once("highlighter-ready");
   testActor.synthesizeMouse({
     selector: "body",
--- a/devtools/client/inspector/test/browser_inspector_infobar_01.js
+++ b/devtools/client/inspector/test/browser_inspector_infobar_01.js
@@ -58,27 +58,32 @@ add_task(function* () {
   }
 });
 
 function* testPosition(test, inspector, testActor) {
   info("Testing " + test.selector);
 
   yield selectAndHighlightNode(test.selector, inspector);
 
-  let position = yield testActor.getHighlighterNodeAttribute("box-model-nodeinfobar-container", "position");
+  let position = yield testActor.getHighlighterNodeAttribute(
+    "box-model-nodeinfobar-container", "position");
   is(position, test.position, "Node " + test.selector + ": position matches");
 
-  let tag = yield testActor.getHighlighterNodeTextContent("box-model-nodeinfobar-tagname");
+  let tag = yield testActor.getHighlighterNodeTextContent(
+    "box-model-nodeinfobar-tagname");
   is(tag, test.tag, "node " + test.selector + ": tagName matches.");
 
   if (test.id) {
-    let id = yield testActor.getHighlighterNodeTextContent("box-model-nodeinfobar-id");
+    let id = yield testActor.getHighlighterNodeTextContent(
+      "box-model-nodeinfobar-id");
     is(id, "#" + test.id, "node " + test.selector + ": id matches.");
   }
 
-  let classes = yield testActor.getHighlighterNodeTextContent("box-model-nodeinfobar-classes");
+  let classes = yield testActor.getHighlighterNodeTextContent(
+    "box-model-nodeinfobar-classes");
   is(classes, test.classes, "node " + test.selector + ": classes match.");
 
   if (test.dims) {
-    let dims = yield testActor.getHighlighterNodeTextContent("box-model-nodeinfobar-dimensions");
+    let dims = yield testActor.getHighlighterNodeTextContent(
+      "box-model-nodeinfobar-dimensions");
     is(dims, test.dims, "node " + test.selector + ": dims match.");
   }
 }
--- a/devtools/client/inspector/test/browser_inspector_initialization.js
+++ b/devtools/client/inspector/test/browser_inspector_initialization.js
@@ -1,14 +1,14 @@
 /* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
 /* vim: set ts=2 et sw=2 tw=80: */
 /* 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/. */
-
+/* globals getTestActorWithoutToolbox */
 "use strict";
 
 // Tests for different ways to initialize the inspector.
 
 const HTML = `
   <div id="first" style="margin: 10em; font-size: 14pt;
                          font-family: helvetica, sans-serif; color: gray">
     <h1>Some header text</h1>
--- a/devtools/client/inspector/test/browser_inspector_invalidate.js
+++ b/devtools/client/inspector/test/browser_inspector_invalidate.js
@@ -6,26 +6,27 @@
 
 // Test that highlighter handles geometry changes correctly.
 
 const TEST_URI = "data:text/html;charset=utf-8," +
   "browser_inspector_invalidate.js\n" +
   "<div style=\"width: 100px; height: 100px; background:yellow;\"></div>";
 
 add_task(function* () {
-  let {toolbox, inspector, testActor} = yield openInspectorForURL(TEST_URI);
+  let {inspector, testActor} = yield openInspectorForURL(TEST_URI);
   let divFront = yield getNodeFront("div", inspector);
 
   info("Waiting for highlighter to activate");
   yield inspector.toolbox.highlighter.showBoxModel(divFront);
 
   let rect = yield testActor.getSimpleBorderRect();
   is(rect.width, 100, "The highlighter has the right width.");
 
-  info("Changing the test element's size and waiting for the highlighter to update");
+  info("Changing the test element's size and waiting for the highlighter " +
+       "to update");
   yield testActor.changeHighlightedNodeWaitForUpdate(
     "style",
     "width: 200px; height: 100px; background:yellow;"
   );
 
   rect = yield testActor.getSimpleBorderRect();
   is(rect.width, 200, "The highlighter has the right width after update");
 
--- a/devtools/client/inspector/test/browser_inspector_keyboard-shortcuts-copy-outerhtml.js
+++ b/devtools/client/inspector/test/browser_inspector_keyboard-shortcuts-copy-outerhtml.js
@@ -43,9 +43,10 @@ function* checkClipboard(expectedText, n
 }
 
 function getElementByType(inspector, type) {
   for (let [node] of inspector.markup._containers) {
     if (node.nodeType === type) {
       return node;
     }
   }
+  return null;
 }
--- a/devtools/client/inspector/test/browser_inspector_menu-01-sensitivity.js
+++ b/devtools/client/inspector/test/browser_inspector_menu-01-sensitivity.js
@@ -226,17 +226,18 @@ add_task(function* () {
     let front = yield getNodeFrontForSelector(selector, inspector);
 
     info("Selecting the specified node.");
     yield selectNode(front, inspector);
 
     info("Simulating context menu click on the selected node container.");
     let nodeFrontContainer = getContainerForNodeFront(front, inspector);
     let contextMenuTrigger = attributeTrigger
-      ? nodeFrontContainer.tagLine.querySelector(`[data-attr="${attributeTrigger}"]`)
+      ? nodeFrontContainer.tagLine.querySelector(
+          `[data-attr="${attributeTrigger}"]`)
       : nodeFrontContainer.tagLine;
     contextMenuClick(contextMenuTrigger);
 
     for (let menuitem of ALL_MENU_ITEMS) {
       let elt = inspector.panelDoc.getElementById(menuitem);
       let shouldBeDisabled = disabled.indexOf(menuitem) !== -1;
       let isDisabled = elt.hasAttribute("disabled");
 
@@ -249,21 +250,21 @@ add_task(function* () {
 /**
  * A helper that fetches a front for a node that matches the given selector or
  * doctype node if the selector is falsy.
  */
 function* getNodeFrontForSelector(selector, inspector) {
   if (selector) {
     info("Retrieving front for selector " + selector);
     return getNodeFront(selector, inspector);
-  } else {
-    info("Retrieving front for doctype node");
-    let {nodes} = yield inspector.walker.children(inspector.walker.rootNode);
-    return nodes[0];
   }
+
+  info("Retrieving front for doctype node");
+  let {nodes} = yield inspector.walker.children(inspector.walker.rootNode);
+  return nodes[0];
 }
 
 /**
  * A helper that populates the clipboard with data of given type. Clears the
  * clipboard if data is falsy.
  */
 function setupClipboard(data, type) {
   if (data) {
@@ -275,16 +276,16 @@ function setupClipboard(data, type) {
   }
 }
 
 /**
  * A helper that simulates a contextmenu event on the given chrome DOM element.
  */
 function contextMenuClick(element) {
   let evt = element.ownerDocument.createEvent("MouseEvents");
-  let button = 2;  // right click
+  let button = 2;
 
   evt.initMouseEvent("contextmenu", true, true,
        element.ownerDocument.defaultView, 1, 0, 0, 0, 0, false,
        false, false, false, button, null);
 
   element.dispatchEvent(evt);
 }
--- a/devtools/client/inspector/test/browser_inspector_menu-03-paste-items.js
+++ b/devtools/client/inspector/test/browser_inspector_menu-03-paste-items.js
@@ -1,16 +1,15 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
 http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
 // Test that different paste items work in the context menu
 
-
 const TEST_URL = URL_ROOT + "doc_inspector_menu.html";
 const PASTE_ADJACENT_HTML_DATA = [
   {
     desc: "As First Child",
     clipboardData: "2",
     menuId: "node-menu-pastefirstchild",
   },
   {
@@ -25,17 +24,16 @@ const PASTE_ADJACENT_HTML_DATA = [
   },
   {
     desc: "After",
     clipboardData: "<span>5</span>",
     menuId: "node-menu-pasteafter",
   },
 ];
 
-
 var clipboard = require("sdk/clipboard");
 registerCleanupFunction(() => {
   clipboard = null;
 });
 
 add_task(function* () {
   let { inspector, testActor } = yield openInspectorForURL(TEST_URL);
 
@@ -66,37 +64,39 @@ add_task(function* () {
     ok(!(yield testActor.hasNode(outerHTMLSelector)),
       "The original node was removed.");
   }
 
   function* testPasteInnerHTMLMenu() {
     info("Testing that 'Paste Inner HTML' menu item works.");
     clipboard.set("this was pasted (innerHTML)");
     let innerHTMLSelector = "#paste-area .inner";
-    let getInnerHTML = () => testActor.getProperty(innerHTMLSelector, "innerHTML");
+    let getInnerHTML = () => testActor.getProperty(innerHTMLSelector,
+                                                   "innerHTML");
     let origInnerHTML = yield getInnerHTML();
 
     let nodeFront = yield getNodeFront(innerHTMLSelector, inspector);
     yield selectNode(nodeFront, inspector);
 
     contextMenuClick(getContainerForNodeFront(nodeFront, inspector).tagLine);
 
     let onMutation = inspector.once("markupmutation");
     let menu = inspector.panelDoc.getElementById("node-menu-pasteinnerhtml");
     dispatchCommandEvent(menu);
 
     info("Waiting for mutation to occur");
     yield onMutation;
 
     ok((yield getInnerHTML()) === clipboard.get(),
        "Clipboard content was pasted into the node's inner HTML.");
-    ok((yield testActor.hasNode(innerHTMLSelector)), "The original node has been preserved.");
+    ok((yield testActor.hasNode(innerHTMLSelector)),
+       "The original node has been preserved.");
     yield undoChange(inspector);
-    ok((yield getInnerHTML()) === origInnerHTML, "Previous innerHTML has been " +
-      "restored after undo");
+    ok((yield getInnerHTML()) === origInnerHTML,
+       "Previous innerHTML has been restored after undo");
   }
 
   function* testPasteAdjacentHTMLMenu() {
     let refSelector = "#paste-area .adjacent .ref";
     let adjacentNodeSelector = "#paste-area .adjacent";
     let nodeFront = yield getNodeFront(refSelector, inspector);
     yield selectNode(nodeFront, inspector);
     let markupTagLine = getContainerForNodeFront(nodeFront, inspector).tagLine;
@@ -109,45 +109,47 @@ add_task(function* () {
       contextMenuClick(markupTagLine);
       let onMutation = inspector.once("markupmutation");
       dispatchCommandEvent(menu);
 
       info("Waiting for mutation to occur");
       yield onMutation;
     }
 
-    ok((yield testActor.getProperty(adjacentNodeSelector, "innerHTML")).trim() ===
-      "1<span class=\"ref\">234</span>" +
-      "<span>5</span>", "The Paste as Last Child / as First Child / Before " +
-      "/ After worked as expected");
+    let html = yield testActor.getProperty(adjacentNodeSelector, "innerHTML");
+    ok(html.trim() === "1<span class=\"ref\">234</span><span>5</span>",
+       "The Paste as Last Child / as First Child / Before / After worked as " +
+       "expected");
     yield undoChange(inspector);
-    ok((yield testActor.getProperty(adjacentNodeSelector, "innerHTML")).trim() ===
-      "1<span class=\"ref\">234</span>",
-      "Undo works for paste adjacent HTML");
+
+    html = yield testActor.getProperty(adjacentNodeSelector, "innerHTML");
+    ok(html.trim() === "1<span class=\"ref\">234</span>",
+       "Undo works for paste adjacent HTML");
   }
 
   function dispatchCommandEvent(node) {
     info("Dispatching command event on " + node);
     let commandEvent = document.createEvent("XULCommandEvent");
-    commandEvent.initCommandEvent("command", true, true, window, 0, false, false,
-                                  false, false, null);
+    commandEvent.initCommandEvent("command", true, true, window, 0, false,
+                                  false, false, false, null);
     node.dispatchEvent(commandEvent);
   }
 
   function contextMenuClick(element) {
     info("Simulating contextmenu event on " + element);
     let evt = element.ownerDocument.createEvent("MouseEvents");
-    let button = 2;  // right click
+    let button = 2;
 
     evt.initMouseEvent("contextmenu", true, true,
          element.ownerDocument.defaultView, 1, 0, 0, 0, 0, false,
          false, false, false, button, null);
 
     element.dispatchEvent(evt);
   }
 
   function getLabelFor(elt) {
-    if (typeof elt === "string")
+    if (typeof elt === "string") {
       elt = inspector.panelDoc.querySelector(elt);
+    }
     let isInPasteSubMenu = elt.matches("#node-menu-paste-extra-submenu *");
     return `"${isInPasteSubMenu ? "Paste > " : ""}${elt.label}"`;
   }
 });
--- a/devtools/client/inspector/test/browser_inspector_menu-04-use-in-console.js
+++ b/devtools/client/inspector/test/browser_inspector_menu-04-use-in-console.js
@@ -13,35 +13,38 @@ registerCleanupFunction(() => {
 
 add_task(function* () {
   let { inspector, toolbox } = yield openInspectorForURL(TEST_URL);
 
   yield testUseInConsole();
 
   function* testUseInConsole() {
     info("Testing 'Use in Console' menu item.");
-    let useInConsoleNode = inspector.panelDoc.getElementById("node-menu-useinconsole");
+    let useInConsoleNode = inspector.panelDoc.getElementById(
+      "node-menu-useinconsole");
 
     yield selectNode("#console-var", inspector);
     dispatchCommandEvent(useInConsoleNode);
     yield inspector.once("console-var-ready");
 
     let hud = toolbox.getPanel("webconsole").hud;
     let jsterm = hud.jsterm;
 
     let jstermInput = jsterm.hud.document.querySelector(".jsterm-input-node");
     is(jstermInput.value, "temp0", "first console variable is named temp0");
 
     let result = yield jsterm.execute();
-    isnot(result.textContent.indexOf('<p id="console-var">'), -1, "variable temp0 references correct node");
+    isnot(result.textContent.indexOf('<p id="console-var">'), -1,
+          "variable temp0 references correct node");
 
     yield selectNode("#console-var-multi", inspector);
     dispatchCommandEvent(useInConsoleNode);
     yield inspector.once("console-var-ready");
 
     is(jstermInput.value, "temp1", "second console variable is named temp1");
 
     result = yield jsterm.execute();
-    isnot(result.textContent.indexOf('<p id="console-var-multi">'), -1, "variable temp1 references correct node");
+    isnot(result.textContent.indexOf('<p id="console-var-multi">'), -1,
+          "variable temp1 references correct node");
 
     jsterm.clearHistory();
   }
 });
--- a/devtools/client/inspector/test/browser_inspector_menu-05-attribute-items.js
+++ b/devtools/client/inspector/test/browser_inspector_menu-05-attribute-items.js
@@ -3,17 +3,17 @@
 http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
 // Test that attribute items work in the context menu
 
 const TEST_URL = URL_ROOT + "doc_inspector_menu.html";
 
 add_task(function* () {
-  let { inspector, toolbox, testActor } = yield openInspectorForURL(TEST_URL);
+  let { inspector, testActor } = yield openInspectorForURL(TEST_URL);
   yield selectNode("#attributes", inspector);
 
   yield testAddAttribute();
   yield testEditAttribute();
   yield testRemoveAttribute();
 
   function* testAddAttribute() {
     info("Testing 'Add Attribute' menu item");
--- a/devtools/client/inspector/test/browser_inspector_menu-06-other.js
+++ b/devtools/client/inspector/test/browser_inspector_menu-06-other.js
@@ -9,17 +9,18 @@ add_task(function* () {
   let { inspector, toolbox, testActor } = yield openInspectorForURL(TEST_URL);
   yield testShowDOMProperties();
   yield testDuplicateNode();
   yield testDeleteNode();
   yield testDeleteRootNode();
   yield testScrollIntoView();
   function* testShowDOMProperties() {
     info("Testing 'Show DOM Properties' menu item.");
-    let showDOMPropertiesNode = inspector.panelDoc.getElementById("node-menu-showdomproperties");
+    let showDOMPropertiesNode = inspector.panelDoc.getElementById(
+      "node-menu-showdomproperties");
     ok(showDOMPropertiesNode, "the popup menu has a show dom properties item");
 
     let consoleOpened = toolbox.once("webconsole-ready");
 
     info("Triggering 'Show DOM Properties' and waiting for inspector open");
     dispatchCommandEvent(showDOMPropertiesNode);
     yield consoleOpened;
 
--- a/devtools/client/inspector/test/browser_inspector_pane-toggle-01.js
+++ b/devtools/client/inspector/test/browser_inspector_pane-toggle-01.js
@@ -7,17 +7,18 @@
 // this button is visible both in BOTTOM and SIDE hosts.
 
 add_task(function* () {
   info("Open the inspector in a bottom toolbox host");
   let {toolbox, inspector} = yield openInspectorForURL("about:blank", "bottom");
 
   let button = inspector.panelDoc.getElementById("inspector-pane-toggle");
   ok(button, "The toggle button exists in the DOM");
-  is(button.parentNode.id, "inspector-toolbar", "The toggle button is in the toolbar");
+  is(button.parentNode.id, "inspector-toolbar",
+     "The toggle button is in the toolbar");
   ok(button.getAttribute("tooltiptext"), "The tool tip has initial state");
   ok(!button.hasAttribute("pane-collapsed"), "The button is in expanded state");
   ok(!!button.getClientRects().length, "The button is visible");
 
   info("Switch the host to side type");
   yield toolbox.switchHost("side");
 
   ok(!!button.getClientRects().length, "The button is still visible");
--- a/devtools/client/inspector/test/browser_inspector_picker-stop-on-destroy.js
+++ b/devtools/client/inspector/test/browser_inspector_picker-stop-on-destroy.js
@@ -21,10 +21,10 @@ add_task(function* () {
 
   info("Destroying the toolbox.");
   yield toolbox.destroy();
 
   info("Waiting for the picker-stopped event that should be fired when the " +
        "toolbox is destroyed.");
   yield pickerStopped;
 
-  ok(true, "picker-stopped event fired after switch tools, so picker is closed.");
+  ok(true, "picker-stopped event fired after switch tools so picker is closed");
 });
--- a/devtools/client/inspector/test/browser_inspector_pseudoclass-lock.js
+++ b/devtools/client/inspector/test/browser_inspector_pseudoclass-lock.js
@@ -1,11 +1,12 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
+/* globals getTestActorWithoutToolbox */
 "use strict";
 
 // Test that locking the pseudoclass displays correctly in the ruleview
 
 const PSEUDO = ":hover";
 const TEST_URL = "data:text/html;charset=UTF-8," +
                  "<head>" +
                  "  <style>div {color:red;} div:hover {color:blue;}</style>" +
@@ -44,17 +45,16 @@ add_task(function* () {
   yield toolbox.destroy();
 
   // As the toolbox get detroyed, we need to fetch a new test-actor
   testActor = yield getTestActorWithoutToolbox(tab);
 
   yield assertPseudoRemovedFromNode(testActor);
 });
 
-
 function* togglePseudoClass(inspector) {
   info("Toggle the pseudoclass, wait for it to be applied");
 
   // Give the inspector panels a chance to update when the pseudoclass changes
   let onPseudo = inspector.selection.once("pseudoclass");
   let onRefresh = inspector.once("rule-view-refreshed");
 
   // Walker uses SDK-events so calling walker.once does not return a promise.
@@ -67,24 +67,27 @@ function* togglePseudoClass(inspector) {
   yield onMutations;
 }
 
 function* testNavigate(inspector, testActor, ruleview) {
   yield selectNode("#parent-div", inspector);
 
   info("Make sure the pseudoclass is still on after navigating to a parent");
 
-  ok((yield testActor.hasPseudoClassLock("#div-1", PSEUDO)), "pseudo-class lock is still applied after inspecting ancestor");
+  ok((yield testActor.hasPseudoClassLock("#div-1", PSEUDO)),
+     "pseudo-class lock is still applied after inspecting ancestor");
 
   let onPseudo = inspector.selection.once("pseudoclass");
   yield selectNode("#div-2", inspector);
   yield onPseudo;
 
-  info("Make sure the pseudoclass is removed after navigating to a non-hierarchy node");
-  ok(!(yield testActor.hasPseudoClassLock("#div-1", PSEUDO)), "pseudo-class lock is removed after inspecting sibling node");
+  info("Make sure the pseudoclass is removed after navigating to a " +
+       "non-hierarchy node");
+  ok(!(yield testActor.hasPseudoClassLock("#div-1", PSEUDO)),
+     "pseudo-class lock is removed after inspecting sibling node");
 
   yield selectNode("#div-1", inspector);
   yield togglePseudoClass(inspector);
 }
 
 function* showPickerOn(selector, inspector) {
   let highlighter = inspector.toolbox.highlighter;
   let nodeFront = yield getNodeFront(selector, inspector);
@@ -97,43 +100,50 @@ function* assertPseudoAddedToNode(inspec
   let hasLock = yield testActor.hasPseudoClassLock("#div-1", PSEUDO);
   ok(hasLock, "pseudo-class lock has been applied");
   hasLock = yield testActor.hasPseudoClassLock("#parent-div", PSEUDO);
   ok(hasLock, "pseudo-class lock has been applied");
   hasLock = yield testActor.hasPseudoClassLock("body", PSEUDO);
   ok(hasLock, "pseudo-class lock has been applied");
 
   info("Check that the ruleview contains the pseudo-class rule");
-  let rules = ruleview.element.querySelectorAll(".ruleview-rule.theme-separator");
-  is(rules.length, 3, "rule view is showing 3 rules for pseudo-class locked div");
-  is(rules[1]._ruleEditor.rule.selectorText, "div:hover", "rule view is showing " + PSEUDO + " rule");
+  let rules = ruleview.element.querySelectorAll(
+    ".ruleview-rule.theme-separator");
+  is(rules.length, 3,
+     "rule view is showing 3 rules for pseudo-class locked div");
+  is(rules[1]._ruleEditor.rule.selectorText, "div:hover",
+     "rule view is showing " + PSEUDO + " rule");
 
   info("Show the highlighter on #div-1");
   yield showPickerOn("#div-1", inspector);
 
   info("Check that the infobar selector contains the pseudo-class");
-  let value = yield testActor.getHighlighterNodeTextContent("box-model-nodeinfobar-pseudo-classes");
+  let value = yield testActor.getHighlighterNodeTextContent(
+    "box-model-nodeinfobar-pseudo-classes");
   is(value, PSEUDO, "pseudo-class in infobar selector");
   yield inspector.toolbox.highlighter.hideBoxModel();
 }
 
 function* assertPseudoRemovedFromNode(testActor) {
-  info("Make sure the pseudoclass lock is removed from #div-1 and its ancestors");
+  info("Make sure the pseudoclass lock is removed from #div-1 and its " +
+       "ancestors");
 
   let hasLock = yield testActor.hasPseudoClassLock("#div-1", PSEUDO);
   ok(!hasLock, "pseudo-class lock has been removed");
   hasLock = yield testActor.hasPseudoClassLock("#parent-div", PSEUDO);
   ok(!hasLock, "pseudo-class lock has been removed");
   hasLock = yield testActor.hasPseudoClassLock("body", PSEUDO);
   ok(!hasLock, "pseudo-class lock has been removed");
 }
 
 function* assertPseudoRemovedFromView(inspector, testActor, ruleview) {
   info("Check that the ruleview no longer contains the pseudo-class rule");
-  let rules = ruleview.element.querySelectorAll(".ruleview-rule.theme-separator");
+  let rules = ruleview.element.querySelectorAll(
+    ".ruleview-rule.theme-separator");
   is(rules.length, 2, "rule view is showing 2 rules after removing lock");
 
   yield showPickerOn("#div-1", inspector);
 
-  let value = yield testActor.getHighlighterNodeTextContent("box-model-nodeinfobar-pseudo-classes");
+  let value = yield testActor.getHighlighterNodeTextContent(
+    "box-model-nodeinfobar-pseudo-classes");
   is(value, "", "pseudo-class removed from infobar selector");
   yield inspector.toolbox.highlighter.hideBoxModel();
 }
--- a/devtools/client/inspector/test/browser_inspector_pseudoclass-menu.js
+++ b/devtools/client/inspector/test/browser_inspector_pseudoclass-menu.js
@@ -27,17 +27,18 @@ add_task(function* () {
 function openMenu(menu) {
   let promise = once(menu, "popupshowing", true);
   menu.openPopup();
   return promise;
 }
 
 function* testMenuItems(testActor, menu, inspector) {
   for (let pseudo of PSEUDOS) {
-    let menuitem = inspector.panelDoc.getElementById("node-menu-pseudo-" + pseudo);
+    let menuitem = inspector.panelDoc.getElementById(
+      "node-menu-pseudo-" + pseudo);
     ok(menuitem, ":" + pseudo + " menuitem exists");
 
     // Give the inspector panels a chance to update when the pseudoclass changes
     let onPseudo = inspector.selection.once("pseudoclass");
     let onRefresh = inspector.once("rule-view-refreshed");
 
     // Walker uses SDK-events so calling walker.once does not return a promise.
     let onMutations = once(inspector.walker, "mutations");
--- a/devtools/client/inspector/test/browser_inspector_remove-iframe-during-load.js
+++ b/devtools/client/inspector/test/browser_inspector_remove-iframe-during-load.js
@@ -4,44 +4,45 @@
 "use strict";
 
 // Testing that the inspector doesn't go blank when navigating to a page that
 // deletes an iframe while loading.
 
 const TEST_URL = URL_ROOT + "doc_inspector_remove-iframe-during-load.html";
 
 add_task(function* () {
-  let {inspector, toolbox, testActor} = yield openInspectorForURL("about:blank");
+  let {inspector, testActor} = yield openInspectorForURL("about:blank");
   yield selectNode("body", inspector);
 
   // We do not want to wait for the inspector to be fully ready before testing
-  // so we load TEST_URL and just wait for the content window to be done loading.
+  // so we load TEST_URL and just wait for the content window to be done loading
   yield testActor.loadAndWaitForCustomEvent(TEST_URL);
 
   // The content doc contains a script that creates iframes and deletes them
   // immediately after. It does this before the load event, after
   // DOMContentLoaded and after load. This is what used to make the inspector go
   // blank when navigating to that page.
   // At this stage, there should be no iframes in the page anymore.
   ok(!(yield testActor.hasNode("iframe")),
      "Iframes added by the content page should have been removed");
 
   // Create/remove an extra one now, after the load event.
   info("Creating and removing an iframe.");
   let onMarkupLoaded = inspector.once("markuploaded");
   testActor.eval("new " + function () {
-    var iframe = document.createElement("iframe");
+    let iframe = document.createElement("iframe");
     document.body.appendChild(iframe);
     iframe.remove();
   });
 
   ok(!(yield testActor.hasNode("iframe")),
      "The after-load iframe should have been removed.");
 
   info("Waiting for markup-view to load.");
   yield onMarkupLoaded;
 
   // Assert that the markup-view is displayed and works
   ok(!(yield testActor.hasNode("iframe")), "Iframe has been removed.");
-  is((yield testActor.getProperty("#yay", "textContent")), "load", "Load event fired.");
+  is((yield testActor.getProperty("#yay", "textContent")), "load",
+     "Load event fired.");
 
   yield selectNode("#yay", inspector);
 });
--- a/devtools/client/inspector/test/browser_inspector_search-01.js
+++ b/devtools/client/inspector/test/browser_inspector_search-01.js
@@ -1,11 +1,12 @@
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint no-inline-comments: 0 */
 "use strict";
 
 requestLongerTimeout(2);
 
 // Test that searching for nodes in the search field actually selects those
 // nodes.
 
 const TEST_URL = URL_ROOT + "doc_inspector_search.html";
--- a/devtools/client/inspector/test/browser_inspector_search-03.js
+++ b/devtools/client/inspector/test/browser_inspector_search-03.js
@@ -224,17 +224,18 @@ add_task(function* () {
 
     let command = once(searchBox, "command");
     EventUtils.synthesizeKey(key, {}, inspector.panelWin);
     yield command;
 
     info("Waiting for search query to complete");
     yield inspector.searchSuggestions._lastQuery;
 
-    info("Query completed. Performing checks for input '" + searchBox.value + "'");
+    info("Query completed. Performing checks for input '" +
+         searchBox.value + "'");
     let actualSuggestions = popup.getItems().reverse();
 
     is(popup.isOpen ? actualSuggestions.length : 0, suggestions.length,
        "There are expected number of suggestions.");
 
     for (let i = 0; i < suggestions.length; i++) {
       is(actualSuggestions[i].label, suggestions[i].label,
          "The suggestion at " + i + "th index is correct.");
--- a/devtools/client/inspector/test/browser_inspector_search-04.js
+++ b/devtools/client/inspector/test/browser_inspector_search-04.js
@@ -86,17 +86,18 @@ add_task(function* () {
 
     let command = once(searchBox, "command");
     EventUtils.synthesizeKey(key, {}, inspector.panelWin);
     yield command;
 
     info("Waiting for search query to complete");
     yield inspector.searchSuggestions._lastQuery;
 
-    info("Query completed. Performing checks for input '" + searchBox.value + "'");
+    info("Query completed. Performing checks for input '" +
+         searchBox.value + "'");
     let actualSuggestions = popup.getItems().reverse();
 
     is(popup.isOpen ? actualSuggestions.length : 0, suggestions.length,
        "There are expected number of suggestions.");
 
     for (let i = 0; i < suggestions.length; i++) {
       is(actualSuggestions[i].label, suggestions[i].label,
          "The suggestion at " + i + "th index is correct.");
--- a/devtools/client/inspector/test/browser_inspector_search-05.js
+++ b/devtools/client/inspector/test/browser_inspector_search-05.js
@@ -2,31 +2,31 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
 // Testing that when search results contain suggestions for nodes in other
 // frames, selecting these suggestions actually selects the right nodes.
 
 const IFRAME_SRC = "doc_inspector_search.html";
-const TEST_URL = "data:text/html;charset=utf-8," +
-                 "<iframe id=\"iframe-1\" src=\"" +
-                 URL_ROOT + IFRAME_SRC + "\"></iframe>" +
-                 "<iframe id=\"iframe-2\" src=\"" +
-                 URL_ROOT + IFRAME_SRC + "\"></iframe>" +
-                 "<iframe id='iframe-3' src='data:text/html," +
-                   "<button id=\"b1\">Nested button</button>" +
-                   "<iframe id=\"iframe-4\" src=" + URL_ROOT + IFRAME_SRC + "></iframe>'>" +
-                 "</iframe>";
+const NESTED_IFRAME_SRC = `
+  <button id="b1">Nested button</button>
+  <iframe id="iframe-4" src="${URL_ROOT + IFRAME_SRC}"></iframe>
+`;
+const TEST_URL = `
+  <iframe id="iframe-1" src="${URL_ROOT + IFRAME_SRC}"></iframe>
+  <iframe id="iframe-2" src="${URL_ROOT + IFRAME_SRC}"></iframe>
+  <iframe id="iframe-3"
+          src="data:text/html;charset=utf-8,${encodeURI(NESTED_IFRAME_SRC)}">
+  </iframe>
+`;
 
 add_task(function* () {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
-
-  let searchBox = inspector.searchBox;
-  let popup = inspector.searchSuggestions.searchPopup;
+  let {inspector} = yield openInspectorForURL(
+    "data:text/html;charset=utf-8," + encodeURI(TEST_URL));
 
   info("Focus the search box");
   yield focusSearchBoxUsingShortcut(inspector.panelWin);
 
   info("Enter # to search for all ids");
   let processingDone = once(inspector.searchSuggestions, "processing-done");
   EventUtils.synthesizeKey("#", {}, inspector.panelWin);
   yield processingDone;
--- a/devtools/client/inspector/test/browser_inspector_search-reserved.js
+++ b/devtools/client/inspector/test/browser_inspector_search-reserved.js
@@ -48,17 +48,17 @@ const TEST_DATA = [
     suggestions: [{label: "div"},
                   {label: "#d1\\.d2"}]
   },
   {
     key: "VK_BACK_SPACE",
     suggestions: []
   },
   {
-    key:"c",
+    key: "c",
     suggestions: [{label: ".c1\\.c2"}]
   },
   {
     key: "VK_BACK_SPACE",
     suggestions: []
   },
   {
     key: "b",
@@ -106,17 +106,18 @@ add_task(function* () {
 
     let command = once(searchBox, "command");
     EventUtils.synthesizeKey(key, {}, inspector.panelWin);
     yield command;
 
     info("Waiting for search query to complete");
     yield inspector.searchSuggestions._lastQuery;
 
-    info("Query completed. Performing checks for input '" + searchBox.value + "'");
+    info("Query completed. Performing checks for input '" +
+         searchBox.value + "'");
     let actualSuggestions = popup.getItems().reverse();
 
     is(popup.isOpen ? actualSuggestions.length : 0, suggestions.length,
        "There are expected number of suggestions.");
 
     for (let i = 0; i < suggestions.length; i++) {
       is(suggestions[i].label, actualSuggestions[i].label,
          "The suggestion at " + i + "th index is correct.");
--- a/devtools/client/inspector/test/browser_inspector_search-selection.js
+++ b/devtools/client/inspector/test/browser_inspector_search-selection.js
@@ -31,27 +31,30 @@ add_task(function* () {
   msg = "Press shift-enter to select the previous node";
   yield sendKeyAndCheck(inspector, msg, "VK_RETURN", { shiftKey: true }, "#p1");
 
   if (AppConstants.platform === "macosx") {
     msg = "Press meta-g to cycle through multiple nodes";
     yield sendKeyAndCheck(inspector, msg, "VK_G", { metaKey: true }, "#p2");
 
     msg = "Press shift+meta-g to select the previous node";
-    yield sendKeyAndCheck(inspector, msg, "VK_G", { metaKey: true, shiftKey: true }, "#p1");
+    yield sendKeyAndCheck(inspector, msg, "VK_G",
+                          { metaKey: true, shiftKey: true }, "#p1");
   } else {
     msg = "Press ctrl-g to cycle through multiple nodes";
     yield sendKeyAndCheck(inspector, msg, "VK_G", { ctrlKey: true }, "#p2");
 
     msg = "Press shift+ctrl-g to select the previous node";
-    yield sendKeyAndCheck(inspector, msg, "VK_G", { ctrlKey: true, shiftKey: true }, "#p1");
+    yield sendKeyAndCheck(inspector, msg, "VK_G",
+                          { ctrlKey: true, shiftKey: true }, "#p1");
   }
 });
 
-let sendKeyAndCheck = Task.async(function* (inspector, description, key, modifiers, expectedId) {
+let sendKeyAndCheck = Task.async(function* (inspector, description, key,
+                                            modifiers, expectedId) {
   info(description);
   let onSelect = inspector.once("inspector-updated");
   EventUtils.synthesizeKey(key, modifiers, inspector.panelWin);
   yield onSelect;
 
   let selectedNode = inspector.selection.nodeFront;
   info(selectedNode.id + " is selected with text " + inspector.searchBox.value);
   let targetNode = yield getNodeFront(expectedId, inspector);
--- a/devtools/client/inspector/test/browser_inspector_search-suggests-ids-and-classes.js
+++ b/devtools/client/inspector/test/browser_inspector_search-suggests-ids-and-classes.js
@@ -1,125 +1,84 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
 
 // Test that the selector-search input proposes ids and classes even when . and
 // # is missing, but that this only occurs when the query is one word (no
 // selector combination)
 
-function test()
-{
-  waitForExplicitFinish();
-
-  let inspector, searchBox, state, popup;
-
-  // The various states of the inspector: [key, suggestions array]
-  // [
-  //  what key to press,
-  //  suggestions array with count [
-  //    [suggestion1, count1], [suggestion2] ...
-  //  ] count can be left to represent 1
-  // ]
-  let keyStates = [
-    ["s", [["span", 1], [".span", 1], ["#span", 1]]],
-    ["p", [["span", 1], [".span", 1], ["#span", 1]]],
-    ["a", [["span", 1], [".span", 1], ["#span", 1]]],
-    ["n", []],
-    [" ", [["span div", 1]]],
-    ["d", [["span div", 1]]], // mixed tag/class/id suggestions only work for the first word
-    ["VK_BACK_SPACE", [["span div", 1]]],
-    ["VK_BACK_SPACE", []],
-    ["VK_BACK_SPACE", [["span", 1], [".span", 1], ["#span", 1]]],
-    ["VK_BACK_SPACE", [["span", 1], [".span", 1], ["#span", 1]]],
-    ["VK_BACK_SPACE", [["span", 1], [".span", 1], ["#span", 1]]],
-    ["VK_BACK_SPACE", []],
-    // Test that mixed tags, classes and ids are grouped by types, sorted by
-    // count and alphabetical order
-    ["b", [
-      ["button", 3],
-      ["body", 1],
-      [".bc", 3],
-      [".ba", 1],
-      [".bb", 1],
-      ["#ba", 1],
-      ["#bb", 1],
-      ["#bc", 1]
-    ]],
-  ];
-
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function onload() {
-    gBrowser.selectedBrowser.removeEventListener("load", onload, true);
-    waitForFocus(setupTest, content);
-  }, true);
-
-  content.location = "data:text/html," +
-                     "<span class='span' id='span'>" +
-                     "  <div class='div' id='div'></div>" +
-                     "</span>" +
-                     "<button class='ba bc' id='bc'></button>" +
-                     "<button class='bb bc' id='bb'></button>" +
-                     "<button class='bc' id='ba'></button>";
-
-  function $(id) {
-    if (id == null) return null;
-    return content.document.getElementById(id);
-  }
+// The various states of the inspector: [key, suggestions array]
+// [
+//  what key to press,
+//  suggestions array with count [
+//    [suggestion1, count1], [suggestion2] ...
+//  ] count can be left to represent 1
+// ]
+const KEY_STATES = [
+  ["s", [["span", 1], [".span", 1], ["#span", 1]]],
+  ["p", [["span", 1], [".span", 1], ["#span", 1]]],
+  ["a", [["span", 1], [".span", 1], ["#span", 1]]],
+  ["n", []],
+  [" ", [["span div", 1]]],
+  // mixed tag/class/id suggestions only work for the first word
+  ["d", [["span div", 1]]],
+  ["VK_BACK_SPACE", [["span div", 1]]],
+  ["VK_BACK_SPACE", []],
+  ["VK_BACK_SPACE", [["span", 1], [".span", 1], ["#span", 1]]],
+  ["VK_BACK_SPACE", [["span", 1], [".span", 1], ["#span", 1]]],
+  ["VK_BACK_SPACE", [["span", 1], [".span", 1], ["#span", 1]]],
+  ["VK_BACK_SPACE", []],
+  // Test that mixed tags, classes and ids are grouped by types, sorted by
+  // count and alphabetical order
+  ["b", [
+    ["button", 3],
+    ["body", 1],
+    [".bc", 3],
+    [".ba", 1],
+    [".bb", 1],
+    ["#ba", 1],
+    ["#bb", 1],
+    ["#bc", 1]
+  ]],
+];
 
-  function setupTest()
-  {
-    openInspector().then(startTest);
-  }
-
-  function startTest(aInspector)
-  {
-    inspector = aInspector;
-
-    searchBox =
-      inspector.panelWin.document.getElementById("inspector-searchbox");
-    popup = inspector.searchSuggestions.searchPopup;
+const TEST_URL = `<span class="span" id="span">
+                    <div class="div" id="div"></div>
+                  </span>
+                  <button class="ba bc" id="bc"></button>
+                  <button class="bb bc" id="bb"></button>
+                  <button class="bc" id="ba"></button>`;
 
-    focusSearchBoxUsingShortcut(inspector.panelWin, function () {
-      searchBox.addEventListener("command", checkState, true);
-      checkStateAndMoveOn(0);
-    });
-  }
+add_task(function* () {
+  let {inspector} = yield openInspectorForURL("data:text/html;charset=utf-8," +
+                                              encodeURI(TEST_URL));
 
-  function checkStateAndMoveOn(index) {
-    if (index == keyStates.length) {
-      finishUp();
-      return;
-    }
+  let searchBox = inspector.panelWin.document.getElementById(
+    "inspector-searchbox");
+  let popup = inspector.searchSuggestions.searchPopup;
 
-    let [key, suggestions] = keyStates[index];
-    state = index;
+  yield focusSearchBoxUsingShortcut(inspector.panelWin);
 
+  for (let [key, expectedSuggestions] of KEY_STATES) {
     info("pressing key " + key + " to get suggestions " +
-         JSON.stringify(suggestions));
+         JSON.stringify(expectedSuggestions));
+
+    let onCommand = once(searchBox, "command", true);
     EventUtils.synthesizeKey(key, {}, inspector.panelWin);
-  }
+    yield onCommand;
+
+    info("Waiting for the suggestions to be retrieved");
+    yield inspector.searchSuggestions._lastQuery;
 
-  function checkState(event) {
-    inspector.searchSuggestions._lastQuery.then(() => {
-      let [key, suggestions] = keyStates[state];
-      let actualSuggestions = popup.getItems();
-      is(popup.isOpen ? actualSuggestions.length : 0, suggestions.length,
-         "There are expected number of suggestions at " + state + "th step.");
-      actualSuggestions.reverse();
-      for (let i = 0; i < suggestions.length; i++) {
-        is(suggestions[i][0], actualSuggestions[i].label,
-           "The suggestion at " + i + "th index for " + state +
-           "th step is correct.");
-        is(suggestions[i][1] || 1, actualSuggestions[i].count,
-           "The count for suggestion at " + i + "th index for " + state +
-           "th step is correct.");
-      }
-      checkStateAndMoveOn(state + 1);
-    });
+    let actualSuggestions = popup.getItems();
+    is(popup.isOpen ? actualSuggestions.length : 0, expectedSuggestions.length,
+       "There are expected number of suggestions");
+    actualSuggestions.reverse();
+
+    for (let i = 0; i < expectedSuggestions.length; i++) {
+      is(expectedSuggestions[i][0], actualSuggestions[i].label,
+         "The suggestion at " + i + "th index is correct.");
+      is(expectedSuggestions[i][1] || 1, actualSuggestions[i].count,
+         "The count for suggestion at " + i + "th index is correct.");
+    }
   }
-
-  function finishUp() {
-    searchBox = null;
-    popup = null;
-    gBrowser.removeCurrentTab();
-    finish();
-  }
-}
+});
--- a/devtools/client/inspector/test/browser_inspector_search_keyboard_trap.js
+++ b/devtools/client/inspector/test/browser_inspector_search_keyboard_trap.js
@@ -35,17 +35,18 @@ const TEST_DATA = [
     keys: [
       {
         key: "VK_TAB",
         options: { shiftKey: true }
       }
     ]
   },
   {
-    desc: "Open popup and then tab away (2 times) to the a next focusable element",
+    desc: "Open popup and then tab away (2 times) to the a next focusable " +
+          "element",
     focused: false,
     keys: [
       {
         key: "d",
         options: { }
       },
       {
         key: "VK_TAB",
--- a/devtools/client/inspector/test/browser_inspector_select-docshell.js
+++ b/devtools/client/inspector/test/browser_inspector_select-docshell.js
@@ -5,38 +5,44 @@
 "use strict";
 
 // Test frame selection switching at toolbox level
 // when using the inspector
 
 const FrameURL = "data:text/html;charset=UTF-8," +
                  encodeURI("<div id=\"frame\">frame</div>");
 const URL = "data:text/html;charset=UTF-8," +
-            encodeURI("<iframe src=\"" + FrameURL + "\"></iframe><div id=\"top\">top</div>");
+            encodeURI('<iframe src="' + FrameURL +
+                      '"></iframe><div id="top">top</div>');
 
 add_task(function* () {
   Services.prefs.setBoolPref("devtools.command-button-frames.enabled", true);
 
   let {inspector, toolbox, testActor} = yield openInspectorForURL(URL);
 
   // Verify we are on the top level document
-  ok((yield testActor.hasNode("#top")), "We have the test node on the top level document");
+  ok((yield testActor.hasNode("#top")),
+     "We have the test node on the top level document");
 
   assertMarkupViewIsLoaded(inspector);
 
   // Verify that the frame list button is visible and populated
   let btn = toolbox.doc.getElementById("command-button-frames");
-  ok(!btn.firstChild.getAttribute("hidden"), "The frame list button is visible");
-  let frameBtns = Array.slice(btn.firstChild.querySelectorAll("[data-window-id]"));
+  ok(!btn.firstChild.getAttribute("hidden"),
+     "The frame list button is visible");
+  let frameBtns = Array.slice(
+    btn.firstChild.querySelectorAll("[data-window-id]"));
   is(frameBtns.length, 2, "We have both frames in the list");
   frameBtns.sort(function (a, b) {
     return a.getAttribute("label").localeCompare(b.getAttribute("label"));
   });
-  is(frameBtns[0].getAttribute("label"), FrameURL, "Got top level document in the list");
-  is(frameBtns[1].getAttribute("label"), URL, "Got iframe document in the list");
+  is(frameBtns[0].getAttribute("label"), FrameURL,
+     "Got top level document in the list");
+  is(frameBtns[1].getAttribute("label"), URL,
+     "Got iframe document in the list");
 
   // Listen to will-navigate to check if the view is empty
   let willNavigate = toolbox.target.once("will-navigate").then(() => {
     info("Navigation to the iframe has started, the inspector should be empty");
     assertMarkupViewIsEmpty(inspector);
   });
 
   // Only select the iframe after we are able to select an element from the top
@@ -47,18 +53,20 @@ add_task(function* () {
   frameBtns[0].click();
 
   yield willNavigate;
   yield newRoot;
 
   info("Navigation to the iframe is done, the inspector should be back up");
 
   // Verify we are on page one
-  ok(!(yield testActor.hasNode("iframe")), "We not longer have access to the top frame elements");
-  ok((yield testActor.hasNode("#frame")), "But now have direct access to the iframe elements");
+  ok(!(yield testActor.hasNode("iframe")),
+     "We not longer have access to the top frame elements");
+  ok((yield testActor.hasNode("#frame")),
+     "But now have direct access to the iframe elements");
 
   // On page 2 load, verify we have the right content
   assertMarkupViewIsLoaded(inspector);
 
   yield selectNode("#frame", inspector);
 
   Services.prefs.clearUserPref("devtools.command-button-frames.enabled");
 });
--- a/devtools/client/inspector/test/browser_inspector_select-last-selected.js
+++ b/devtools/client/inspector/test/browser_inspector_select-last-selected.js
@@ -1,13 +1,14 @@
 /* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
 /* vim: set ts=2 et sw=2 tw=80: */
 /* 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";
 
 // Checks that the expected default node is selected after a page navigation or
 // a reload.
 var PAGE_1 = URL_ROOT + "doc_inspector_select-last-selected-01.html";
 var PAGE_2 = URL_ROOT + "doc_inspector_select-last-selected-02.html";
 
 // An array of test cases with following properties:
 // - url: URL to navigate to. If URL == content.location, reload instead.
@@ -57,42 +58,42 @@ add_task(function* () {
 
   for (let { url, nodeToSelect, selectedNode } of TEST_DATA) {
     if (nodeToSelect) {
       info("Selecting node " + nodeToSelect + " before navigation.");
       yield selectNode(nodeToSelect, inspector);
     }
 
     let onNewRoot = inspector.once("new-root");
-    yield navigateToAndWaitForNewRoot(toolbox, testActor, url);
+    yield navigateToAndWaitForNewRoot(url);
 
     info("Waiting for new root.");
     yield onNewRoot;
 
     info("Waiting for inspector to update after new-root event.");
     yield inspector.once("inspector-updated");
 
     let nodeFront = yield getNodeFront(selectedNode, inspector);
     ok(nodeFront, "Got expected node front");
     is(inspector.selection.nodeFront, nodeFront,
        selectedNode + " is selected after navigation.");
   }
 
-  function navigateToAndWaitForNewRoot(toolbox, testActor, url) {
+  function navigateToAndWaitForNewRoot(url) {
     info("Navigating and waiting for new-root event after navigation.");
 
     let newRoot = inspector.once("new-root");
 
     return testActor.eval("location.href")
       .then(current => {
         if (url == current) {
           info("Reloading page.");
           let activeTab = toolbox.target.activeTab;
           return activeTab.reload();
-        } else {
-          info("Navigating to " + url);
-          navigateTo(toolbox, url);
         }
 
+        info("Navigating to " + url);
+        navigateTo(toolbox, url);
+
         return newRoot;
       });
   }
 });
--- a/devtools/client/inspector/test/doc_inspector_highlighter-comments.html
+++ b/devtools/client/inspector/test/doc_inspector_highlighter-comments.html
@@ -4,13 +4,15 @@
   <meta charset="utf-8">
   <title>Inspector Highlighter Test</title>
 </head>
 <body>
   <p></p>
   <div id="id1">Visible div 1</div>
   <!-- Invisible comment node -->
   <div id="id2">Visible div 2</div>
-  <script type="text/javascript">/*Invisible script node*/</script>
+  <script type="text/javascript">
+    /* Invisible script node */
+  </script>
   <div id="id3">Visible div 3</div>
   <div id="id4" style="display:none;">Invisible div node</div>
 </body>
 </html>
--- a/devtools/client/inspector/test/doc_inspector_remove-iframe-during-load.html
+++ b/devtools/client/inspector/test/doc_inspector_remove-iframe-during-load.html
@@ -2,42 +2,44 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>iframe creation/deletion test</title>
 </head>
 <body>
   <div id="yay"></div>
   <script type="text/javascript">
+    "use strict";
+
     var yay = document.querySelector("#yay");
     yay.textContent = "nothing";
 
     // Create a custom event to let the test know when the window has finished
     // loading.
     var event = new Event("test-page-processing-done");
 
     // Create/remove an iframe before load.
     var iframe = document.createElement("iframe");
     document.body.appendChild(iframe);
     iframe.remove();
     yay.textContent = "before events";
 
     // Create/remove an iframe on DOMContentLoaded.
-    document.addEventListener("DOMContentLoaded", function() {
-      var iframe = document.createElement("iframe");
-      document.body.appendChild(iframe);
-      iframe.remove();
+    document.addEventListener("DOMContentLoaded", function () {
+      let newIframe = document.createElement("iframe");
+      document.body.appendChild(newIframe);
+      newIframe.remove();
       yay.textContent = "DOMContentLoaded";
     });
 
     // Create/remove an iframe on window load.
-    window.addEventListener("load", function() {
-      var iframe = document.createElement("iframe");
-      document.body.appendChild(iframe);
-      iframe.remove();
+    window.addEventListener("load", function () {
+      let newIframe = document.createElement("iframe");
+      document.body.appendChild(newIframe);
+      newIframe.remove();
       yay.textContent = "load";
 
       // Dispatch the done event.
       window.dispatchEvent(event);
     });
   </script>
 </body>
 </html>
--- a/devtools/client/inspector/test/head.js
+++ b/devtools/client/inspector/test/head.js
@@ -1,16 +1,17 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* 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/. */
 /* eslint no-unused-vars: [2, {"vars": "local"}] */
 /* import-globals-from ../../framework/test/shared-head.js */
 /* import-globals-from ../../commandline/test/helpers.js */
 /* import-globals-from ../../shared/test/test-actor-registry.js */
+/* globals registerTestActor, getTestActor */
 "use strict";
 
 // Load the shared-head file first.
 Services.scriptloader.loadSubScript(
   "chrome://mochitests/content/browser/devtools/client/framework/test/shared-head.js",
   this);
 
 // Services.prefs.setBoolPref("devtools.debugger.log", true);
@@ -76,18 +77,17 @@ function getNode(nodeOrSelector, options
   let document = options.document || content.document;
   let noMatches = !!options.expectNoMatch;
 
   if (typeof nodeOrSelector === "string") {
     info("Looking for a node that matches selector " + nodeOrSelector);
     let node = document.querySelector(nodeOrSelector);
     if (noMatches) {
       ok(!node, "Selector " + nodeOrSelector + " didn't match any nodes.");
-    }
-    else {
+    } else {
       ok(node, "Selector " + nodeOrSelector + " matched a node.");
     }
 
     return node;
   }
 
   info("Looking for a node but selector was not a string.");
   return nodeOrSelector;
@@ -169,17 +169,18 @@ var openInspectorForURL = Task.async(fun
 /**
  * Open the toolbox, with the inspector tool visible.
  * @param {String} hostType Optional hostType, as defined in Toolbox.HostType
  * @return a promise that resolves when the inspector is ready
  */
 var openInspector = Task.async(function* (hostType) {
   info("Opening the inspector");
 
-  let toolbox = yield openToolboxForTab(gBrowser.selectedTab, "inspector", hostType);
+  let toolbox = yield openToolboxForTab(gBrowser.selectedTab, "inspector",
+                                        hostType);
   let inspector = toolbox.getPanel("inspector");
 
   info("Waiting for the inspector to update");
   if (inspector._updateProgress) {
     yield inspector.once("inspector-updated");
   }
 
   yield registerTestActor(toolbox.target.client);
@@ -196,17 +197,18 @@ function getActiveInspector() {
 /**
  * Right click on a node in the test page and click on the inspect menu item.
  * @param {TestActor}
  * @param {String} selector The selector for the node to click on in the page.
  * @return {Promise} Resolves to the inspector when it has opened and is updated
  */
 var clickOnInspectMenuItem = Task.async(function* (testActor, selector) {
   info("Showing the contextual menu on node " + selector);
-  let contentAreaContextMenu = document.querySelector("#contentAreaContextMenu");
+  let contentAreaContextMenu = document.querySelector(
+    "#contentAreaContextMenu");
   let contextOpened = once(contentAreaContextMenu, "popupshown");
 
   yield testActor.synthesizeMouse({
     selector: selector,
     center: true,
     options: {type: "contextmenu", button: 2}
   });
 
@@ -323,22 +325,20 @@ function getNodeFront(selector, {walker}
 /**
  * Get the NodeFront for a node that matches a given css selector inside a
  * given iframe.
  * @param {String|NodeFront} selector
  * @param {String|NodeFront} frameSelector A selector that matches the iframe
  * the node is in
  * @param {InspectorPanel} inspector The instance of InspectorPanel currently
  * loaded in the toolbox
- * @param {String} reason Defaults to "test" which instructs the inspector not
- * to highlight the node upon selection
  * @return {Promise} Resolves when the inspector is updated with the new node
  */
 var getNodeFrontInFrame = Task.async(function* (selector, frameSelector,
-                                               inspector, reason = "test") {
+                                                inspector) {
   let iframe = yield getNodeFront(frameSelector, inspector);
   let {nodes} = yield inspector.walker.children(iframe);
   return inspector.walker.querySelector(nodes[0], selector);
 });
 
 var focusSearchBoxUsingShortcut = Task.async(function* (panelWin, callback) {
   info("Focusing search box");
   let searchBox = panelWin.document.getElementById("inspector-searchbox");
@@ -424,17 +424,18 @@ var clickContainer = Task.async(function
     inspector.markup.doc.defaultView);
   EventUtils.synthesizeMouseAtCenter(container.tagLine, {type: "mouseup"},
     inspector.markup.doc.defaultView);
   return updated;
 });
 
 /**
  * Simulate the mouse leaving the markup-view area
- * @param {InspectorPanel} inspector The instance of InspectorPanel currently loaded in the toolbox
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * loaded in the toolbox
  * @return a promise when done
  */
 function mouseLeaveMarkupView(inspector) {
   info("Leaving the markup-view area");
   let def = promise.defer();
 
   // Find another element to mouseover over in order to leave the markup-view
   let btn = inspector.toolbox.doc.querySelector("#toolbox-controls");
@@ -507,38 +508,38 @@ function dispatchCommandEvent(node) {
   node.dispatchEvent(commandEvent);
 }
 
 /**
  * A helper that simulates a contextmenu event on the given chrome DOM element.
  */
 function contextMenuClick(element) {
   let evt = element.ownerDocument.createEvent("MouseEvents");
-  let button = 2;  // right click
+  let button = 2;
 
   evt.initMouseEvent("contextmenu", true, true,
        element.ownerDocument.defaultView, 1, 0, 0, 0, 0, false,
        false, false, false, button, null);
 
   element.dispatchEvent(evt);
 }
 
 /**
  * A helper that fetches a front for a node that matches the given selector or
  * doctype node if the selector is falsy.
  */
 function* getNodeFrontForSelector(selector, inspector) {
   if (selector) {
     info("Retrieving front for selector " + selector);
     return getNodeFront(selector, inspector);
-  } else {
-    info("Retrieving front for doctype node");
-    let {nodes} = yield inspector.walker.children(inspector.walker.rootNode);
-    return nodes[0];
   }
+
+  info("Retrieving front for doctype node");
+  let {nodes} = yield inspector.walker.children(inspector.walker.rootNode);
+  return nodes[0];
 }
 
 /**
  * Encapsulate some common operations for highlighter's tests, to have
  * the tests cleaner, without exposing directly `inspector`, `highlighter`, and
  * `testActor` if not needed.
  *
  * @param  {String}
@@ -633,26 +634,27 @@ const getHighlighterHelperFor = (type) =
         highlightedNode = null;
         yield highlighter.finalize();
       }
     };
   }
 );
 
 // The expand all operation of the markup-view calls itself recursively and
-// there's not one event we can wait for to know when it's done
-// so use this helper function to wait until all recursive children updates are done.
+// there's not one event we can wait for to know when it's done so use this
+// helper function to wait until all recursive children updates are done.
 function* waitForMultipleChildrenUpdates(inspector) {
-// As long as child updates are queued up while we wait for an update already
-// wait again
+  // As long as child updates are queued up while we wait for an update already
+  // wait again
   if (inspector.markup._queuedChildUpdates &&
         inspector.markup._queuedChildUpdates.size) {
     yield waitForChildrenUpdated(inspector);
     return yield waitForMultipleChildrenUpdates(inspector);
   }
+  return null;
 }
 
 /**
  * Using the markupview's _waitForChildren function, wait for all queued
  * children updates to be handled.
  * @param {InspectorPanel} inspector The instance of InspectorPanel currently
  * loaded in the toolbox
  * @return a promise that resolves when all queued children updates have been