Bug 1274964 - ESLint cleanup of devtools/client/inspector; r=jryans
authorPatrick Brosset <pbrosset@mozilla.com>
Mon, 23 May 2016 10:41:02 +0200
changeset 298262 00f9eb3e72e805caebd204b780dc904877cab590
parent 298261 a35738e12eb382c6181c530b00b814d72c7a1b7b
child 298263 e8f4f77bd99eee8e95262779c90235ce5aaaafe4
push id19344
push userpbrosset@mozilla.com
push dateTue, 24 May 2016 07:05:50 +0000
treeherderfx-team@00f9eb3e72e8 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjryans
bugs1274964
milestone49.0a1
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